Merge remote-tracking branch 'jason/websocket'

6 files changed, 184 insertions, 102 deletions

diff --git a/mitmproxy/web/static/app.js b/mitmproxy/web/static/app.js
index 0eef0142..799ad03e 100644
--- a/mitmproxy/web/static/app.js
+++ b/mitmproxy/web/static/app.js
@@ -1,10 +1,10 @@
 (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 "use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.Query=exports.FlowActions=exports.ConnectionActions=exports.StoreCmds=exports.ActionTypes=void 0;var _jquery=require("jquery"),_jquery2=_interopRequireDefault(_jquery),_dispatcher=require("./dispatcher.js"),_utils=require("./utils.js"),ActionTypes=exports.ActionTypes={CONNECTION_OPEN:"connection_open",CONNECTION_CLOSE:"connection_close",CONNECTION_ERROR:"connection_error",SETTINGS_STORE:"settings",EVENT_STORE:"events",FLOW_STORE:"flows"},StoreCmds=exports.StoreCmds={ADD:"add",UPDATE:"update",REMOVE:"remove",RESET:"reset"},ConnectionActions=exports.ConnectionActions={open:function(){_dispatcher.AppDispatcher.dispatchViewAction({type:ActionTypes.CONNECTION_OPEN})},close:function(){_dispatcher.AppDispatcher.dispatchViewAction({type:ActionTypes.CONNECTION_CLOSE})},error:function(){_dispatcher.AppDispatcher.dispatchViewAction({type:ActionTypes.CONNECTION_ERROR})}},FlowActions=exports.FlowActions={accept:function(e){_jquery2["default"].post("/flows/"+e.id+"/accept")},accept_all:function(){_jquery2["default"].post("/flows/accept")},"delete":function(e){_jquery2["default"].ajax({type:"DELETE",url:"/flows/"+e.id})},duplicate:function(e){_jquery2["default"].post("/flows/"+e.id+"/duplicate")},replay:function(e){_jquery2["default"].post("/flows/"+e.id+"/replay")},revert:function(e){_jquery2["default"].post("/flows/"+e.id+"/revert")},update:function(e,t){_jquery2["default"].ajax({type:"PUT",url:"/flows/"+e.id,contentType:"application/json",data:JSON.stringify(t)})},clear:function(){_jquery2["default"].post("/clear")},download:function(){return window.location="/flows/dump"},upload:function(e){var t=new FormData;t.append("file",e),(0,_utils.fetchApi)("/flows/dump",{method:"post",body:t})}},Query=exports.Query={SEARCH:"s",HIGHLIGHT:"h",SHOW_EVENTLOG:"e"};
 
-},{"./dispatcher.js":41,"./utils.js":52,"jquery":"jquery"}],2:[function(require,module,exports){
-"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}var _react=require("react"),_react2=_interopRequireDefault(_react),_reactDom=require("react-dom"),_redux=require("redux"),_reactRedux=require("react-redux"),_reduxLogger=require("redux-logger"),_reduxLogger2=_interopRequireDefault(_reduxLogger),_reduxThunk=require("redux-thunk"),_reduxThunk2=_interopRequireDefault(_reduxThunk),_reactRouter=require("react-router"),_connection=require("./connection"),_connection2=_interopRequireDefault(_connection),_ProxyApp=require("./components/ProxyApp"),_ProxyApp2=_interopRequireDefault(_ProxyApp),_MainView=require("./components/MainView"),_MainView2=_interopRequireDefault(_MainView),_index=require("./ducks/index"),_index2=_interopRequireDefault(_index),_eventLog=require("./ducks/eventLog"),store=(0,_redux.createStore)(_index2["default"],(0,_redux.applyMiddleware)(_reduxThunk2["default"],(0,_reduxLogger2["default"])()));window.addEventListener("error",function(e){store.dispatch((0,_eventLog.addLogEntry)(e))}),document.addEventListener("DOMContentLoaded",function(){window.ws=new _connection2["default"]("/updates",store.dispatch),(0,_reactDom.render)(_react2["default"].createElement(_reactRedux.Provider,{store:store},_react2["default"].createElement(_reactRouter.Router,{history:_reactRouter.hashHistory},_react2["default"].createElement(_reactRouter.Redirect,{from:"/",to:"/flows"}),_react2["default"].createElement(_reactRouter.Route,{path:"/",component:_ProxyApp2["default"]},_react2["default"].createElement(_reactRouter.Route,{path:"flows",component:_MainView2["default"]}),_react2["default"].createElement(_reactRouter.Route,{path:"flows/:flowId/:detailTab",component:_MainView2["default"]})))),document.getElementById("mitmproxy"))});
+},{"./dispatcher.js":40,"./utils.js":52,"jquery":"jquery"}],2:[function(require,module,exports){
+"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}var _react=require("react"),_react2=_interopRequireDefault(_react),_reactDom=require("react-dom"),_redux=require("redux"),_reactRedux=require("react-redux"),_reduxLogger=require("redux-logger"),_reduxLogger2=_interopRequireDefault(_reduxLogger),_reduxThunk=require("redux-thunk"),_reduxThunk2=_interopRequireDefault(_reduxThunk),_reactRouter=require("react-router"),_ProxyApp=require("./components/ProxyApp"),_ProxyApp2=_interopRequireDefault(_ProxyApp),_MainView=require("./components/MainView"),_MainView2=_interopRequireDefault(_MainView),_index=require("./ducks/index"),_index2=_interopRequireDefault(_index),_eventLog=require("./ducks/eventLog"),store=(0,_redux.createStore)(_index2["default"],(0,_redux.applyMiddleware)(_reduxThunk2["default"],(0,_reduxLogger2["default"])()));window.addEventListener("error",function(e){store.dispatch((0,_eventLog.addLogEntry)(e))}),document.addEventListener("DOMContentLoaded",function(){(0,_reactDom.render)(_react2["default"].createElement(_reactRedux.Provider,{store:store},_react2["default"].createElement(_reactRouter.Router,{history:_reactRouter.hashHistory},_react2["default"].createElement(_reactRouter.Redirect,{from:"/",to:"/flows"}),_react2["default"].createElement(_reactRouter.Route,{path:"/",component:_ProxyApp2["default"]},_react2["default"].createElement(_reactRouter.Route,{path:"flows",component:_MainView2["default"]}),_react2["default"].createElement(_reactRouter.Route,{path:"flows/:flowId/:detailTab",component:_MainView2["default"]})))),document.getElementById("mitmproxy"))});
 
-},{"./components/MainView":28,"./components/ProxyApp":30,"./connection":40,"./ducks/eventLog":42,"./ducks/index":44,"react":"react","react-dom":"react-dom","react-redux":"react-redux","react-router":"react-router","redux":"redux","redux-logger":"redux-logger","redux-thunk":"redux-thunk"}],3:[function(require,module,exports){
+},{"./components/MainView":28,"./components/ProxyApp":30,"./ducks/eventLog":42,"./ducks/index":44,"react":"react","react-dom":"react-dom","react-redux":"react-redux","react-router":"react-router","redux":"redux","redux-logger":"redux-logger","redux-thunk":"redux-thunk"}],3:[function(require,module,exports){
 "use strict";function _interopRequireWildcard(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t["default"]=e,t}function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},_createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_utils=require("../flow/utils.js"),_ContentViews=require("./ContentView/ContentViews"),_ContentErrors=require("./ContentView/ContentErrors"),ContentErrors=_interopRequireWildcard(_ContentErrors),_ContentLoader=require("./ContentView/ContentLoader"),_ContentLoader2=_interopRequireDefault(_ContentLoader),_ViewSelector=require("./ContentView/ViewSelector"),_ViewSelector2=_interopRequireDefault(_ViewSelector),ContentView=function(e){function t(e,r){_classCallCheck(this,t);var n=_possibleConstructorReturn(this,Object.getPrototypeOf(t).call(this,e,r));return n.state={displayLarge:!1,View:_ContentViews.ViewAuto},n.selectView=n.selectView.bind(n),n}return _inherits(t,e),_createClass(t,[{key:"selectView",value:function(e){this.setState({View:e})}},{key:"displayLarge",value:function(){this.setState({displayLarge:!0})}},{key:"componentWillReceiveProps",value:function(e){e.message!==this.props.message&&this.setState({displayLarge:!1,View:_ContentViews.ViewAuto})}},{key:"isContentTooLarge",value:function(e){return e.contentLength>1048576*(_ContentViews.ViewImage.matches(e)?10:.2)}},{key:"render",value:function(){var e=this.props,t=e.flow,r=e.message,n=this.state,o=n.displayLarge,a=n.View;return 0===r.contentLength?_react2["default"].createElement(ContentErrors.ContentEmpty,this.props):null===r.contentLength?_react2["default"].createElement(ContentErrors.ContentMissing,this.props):!o&&this.isContentTooLarge(r)?_react2["default"].createElement(ContentErrors.ContentTooLarge,_extends({},this.props,{onClick:this.displayLarge})):_react2["default"].createElement("div",null,a.textView?_react2["default"].createElement(_ContentLoader2["default"],{flow:t,message:r},_react2["default"].createElement(this.state.View,{content:""})):_react2["default"].createElement(a,{flow:t,message:r}),_react2["default"].createElement("div",{className:"view-options text-center"},_react2["default"].createElement(_ViewSelector2["default"],{onSelectView:this.selectView,active:a,message:r})," ",_react2["default"].createElement("a",{className:"btn btn-default btn-xs",href:_utils.MessageUtils.getContentURL(t,r)},_react2["default"].createElement("i",{className:"fa fa-download"}))))}}]),t}(_react.Component);ContentView.propTypes={flow:_react2["default"].PropTypes.object.isRequired,message:_react2["default"].PropTypes.object.isRequired},exports["default"]=ContentView;
 
 },{"../flow/utils.js":51,"./ContentView/ContentErrors":4,"./ContentView/ContentLoader":5,"./ContentView/ContentViews":6,"./ContentView/ViewSelector":7,"react":"react"}],4:[function(require,module,exports){
@@ -86,9 +86,9 @@
 "use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function Prompt(e,t){function r(e){return _lodash2["default"].map(i,"key").includes(e)}function o(e){e.stopPropagation(),e.preventDefault();var r=i.find(function(t){return _utils.Key[t.key.toUpperCase()]===e.keyCode});(r||e.keyCode===_utils.Key.ESC||e.keyCode===_utils.Key.ENTER)&&(n(k||!1),t.returnFocus())}for(var a=e.prompt,n=e.done,u=e.options,i=[],s=0;s<u.length;s++){var l=u[s];if(_lodash2["default"].isString(l)){for(var p=l;p.length>0&&r(p[0]);)p=p.substr(1);l={text:l,key:p[0]}}if(!l.text||!l.key||r(l.key))throw"invalid options";i.push(l)}return _react2["default"].createElement("div",{tabIndex:"0",onKeyDown:o,onClick:onClick,className:"prompt-dialog"},_react2["default"].createElement("div",{className:"prompt-content"},a||_react2["default"].createElement("strong",null,"Select: "),i.map(function(e){function t(t){n(e.key),t.stopPropagation()}var r=e.text.indexOf(e.key);return _react2["default"].createElement("span",{key:e.key,className:"option",onClick:t},-1!==r?e.text.substring(0,r):e.text+"(",prefix,_react2["default"].createElement("strong",{className:"text-primary"},e.key),-1!==r?e.text.substring(r+1):")")})))}Object.defineProperty(exports,"__esModule",{value:!0}),exports["default"]=Prompt;var _react=require("react"),_react2=_interopRequireDefault(_react),_reactDom=require("react-dom"),_reactDom2=_interopRequireDefault(_reactDom),_lodash=require("lodash"),_lodash2=_interopRequireDefault(_lodash),_utils=require("../utils.js");Prompt.contextTypes={returnFocus:_react.PropTypes.func},Prompt.propTypes={options:_react.PropTypes.array.isRequired,done:_react.PropTypes.func.isRequired,prompt:_react.PropTypes.string};
 
 },{"../utils.js":52,"lodash":"lodash","react":"react","react-dom":"react-dom"}],30:[function(require,module,exports){
-"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_reactDom=require("react-dom"),_reactDom2=_interopRequireDefault(_reactDom),_lodash=require("lodash"),_lodash2=_interopRequireDefault(_lodash),_reactRedux=require("react-redux"),_Header=require("./Header"),_Header2=_interopRequireDefault(_Header),_EventLog=require("./EventLog"),_EventLog2=_interopRequireDefault(_EventLog),_Footer=require("./Footer"),_Footer2=_interopRequireDefault(_Footer),_utils=require("../utils.js"),ProxyAppMain=function(e){function t(e,r){_classCallCheck(this,t);var o=_possibleConstructorReturn(this,Object.getPrototypeOf(t).call(this,e,r));return o.focus=o.focus.bind(o),o.onKeyDown=o.onKeyDown.bind(o),o.updateLocation=o.updateLocation.bind(o),o}return _inherits(t,e),_createClass(t,[{key:"updateLocation",value:function(e,t){void 0===e&&(e=this.props.location.pathname);var r=this.props.location.query,o=!0,n=!1,a=void 0;try{for(var i,u=Object.keys(t||{})[Symbol.iterator]();!(o=(i=u.next()).done);o=!0){var c=i.value;r[c]=t[c]||void 0}}catch(l){n=!0,a=l}finally{try{!o&&u["return"]&&u["return"]()}finally{if(n)throw a}}this.context.router.replace({pathname:e,query:r})}},{key:"getQuery",value:function(){return _lodash2["default"].clone(this.props.location.query)}},{key:"componentDidMount",value:function(){this.focus()}},{key:"getChildContext",value:function(){return{returnFocus:this.focus}}},{key:"focus",value:function(){document.activeElement.blur(),window.getSelection().removeAllRanges(),_reactDom2["default"].findDOMNode(this).focus()}},{key:"onKeyDown",value:function(e){var t=this,r=null;switch(e.keyCode){case _utils.Key.I:r="intercept";break;case _utils.Key.L:r="search";break;case _utils.Key.H:r="highlight";break;default:var o=this.refs.view;return this.refs.view.getWrappedInstance&&(o=this.refs.view.getWrappedInstance()),void(o.onMainKeyDown&&o.onMainKeyDown(e))}r&&!function(){var e=t.refs.header;e.setState({active:_Header2["default"].entries[0]},function(){e.refs.active.refs[r].select()})}(),e.preventDefault()}},{key:"render",value:function(){var e=this.props,t=e.showEventLog,r=e.location,o=e.children,n=this.getQuery();return _react2["default"].createElement("div",{id:"container",tabIndex:"0",onKeyDown:this.onKeyDown},_react2["default"].createElement(_Header2["default"],{ref:"header",updateLocation:this.updateLocation,query:n}),_react2["default"].cloneElement(o,{ref:"view",location:r,query:n,updateLocation:this.updateLocation}),t&&_react2["default"].createElement(_EventLog2["default"],{key:"eventlog"}),_react2["default"].createElement(_Footer2["default"],null))}}]),t}(_react.Component);ProxyAppMain.childContextTypes={returnFocus:_react.PropTypes.func.isRequired},ProxyAppMain.contextTypes={router:_react.PropTypes.object.isRequired},exports["default"]=(0,_reactRedux.connect)(function(e){return{showEventLog:e.eventLog.visible}})(ProxyAppMain);
+"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(exports,"__esModule",{value:!0});var _createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_reactDom=require("react-dom"),_reactDom2=_interopRequireDefault(_reactDom),_lodash=require("lodash"),_lodash2=_interopRequireDefault(_lodash),_reactRedux=require("react-redux"),_app=require("../ducks/app"),_Header=require("./Header"),_Header2=_interopRequireDefault(_Header),_EventLog=require("./EventLog"),_EventLog2=_interopRequireDefault(_EventLog),_Footer=require("./Footer"),_Footer2=_interopRequireDefault(_Footer),_utils=require("../utils.js"),ProxyAppMain=function(e){function t(e,r){_classCallCheck(this,t);var n=_possibleConstructorReturn(this,Object.getPrototypeOf(t).call(this,e,r));return n.focus=n.focus.bind(n),n.onKeyDown=n.onKeyDown.bind(n),n.updateLocation=n.updateLocation.bind(n),n}return _inherits(t,e),_createClass(t,[{key:"componentWillMount",value:function(){this.props.appInit()}},{key:"componentDidMount",value:function(){this.focus()}},{key:"componentWillUnmount",value:function(){this.props.appDestruct()}},{key:"getChildContext",value:function(){return{returnFocus:this.focus}}},{key:"focus",value:function(){document.activeElement.blur(),window.getSelection().removeAllRanges(),_reactDom2["default"].findDOMNode(this).focus()}},{key:"onKeyDown",value:function(e){var t=this,r=null;switch(e.keyCode){case _utils.Key.I:r="intercept";break;case _utils.Key.L:r="search";break;case _utils.Key.H:r="highlight";break;default:var n=this.refs.view;return this.refs.view.getWrappedInstance&&(n=this.refs.view.getWrappedInstance()),void(n.onMainKeyDown&&n.onMainKeyDown(e))}r&&!function(){var e=t.refs.header;e.setState({active:_Header2["default"].entries[0]},function(){e.refs.active.refs[r].select()})}(),e.preventDefault()}},{key:"updateLocation",value:function(e,t){void 0===e&&(e=this.props.location.pathname);var r=this.props.location.query,n=!0,o=!1,a=void 0;try{for(var i,u=Object.keys(t||{})[Symbol.iterator]();!(n=(i=u.next()).done);n=!0){var c=i.value;r[c]=t[c]||void 0}}catch(s){o=!0,a=s}finally{try{!n&&u["return"]&&u["return"]()}finally{if(o)throw a}}this.context.router.replace({pathname:e,query:r})}},{key:"getQuery",value:function(){return _lodash2["default"].clone(this.props.location.query)}},{key:"render",value:function(){var e=this.props,t=e.showEventLog,r=e.location,n=e.children,o=this.getQuery();return _react2["default"].createElement("div",{id:"container",tabIndex:"0",onKeyDown:this.onKeyDown},_react2["default"].createElement(_Header2["default"],{ref:"header",updateLocation:this.updateLocation,query:o}),_react2["default"].cloneElement(n,{ref:"view",location:r,query:o,updateLocation:this.updateLocation}),t&&_react2["default"].createElement(_EventLog2["default"],{key:"eventlog"}),_react2["default"].createElement(_Footer2["default"],null))}}]),t}(_react.Component);ProxyAppMain.childContextTypes={returnFocus:_react.PropTypes.func.isRequired},ProxyAppMain.contextTypes={router:_react.PropTypes.object.isRequired},exports["default"]=(0,_reactRedux.connect)(function(e){return{showEventLog:e.eventLog.visible,settings:e.settings.settings}},{appInit:_app.init,appDestruct:_app.destruct})(ProxyAppMain);
 
-},{"../utils.js":52,"./EventLog":8,"./Footer":19,"./Header":20,"lodash":"lodash","react":"react","react-dom":"react-dom","react-redux":"react-redux"}],31:[function(require,module,exports){
+},{"../ducks/app":41,"../utils.js":52,"./EventLog":8,"./Footer":19,"./Header":20,"lodash":"lodash","react":"react","react-dom":"react-dom","react-redux":"react-redux"}],31:[function(require,module,exports){
 "use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function _inherits(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(exports,"__esModule",{value:!0});var _extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},_createClass=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),_react=require("react"),_react2=_interopRequireDefault(_react),_reactDom=require("react-dom"),_reactDom2=_interopRequireDefault(_reactDom),_ValidateEditor=require("./ValueEditor/ValidateEditor"),_ValidateEditor2=_interopRequireDefault(_ValidateEditor),ValueEditor=function(e){function t(e){_classCallCheck(this,t);var r=_possibleConstructorReturn(this,Object.getPrototypeOf(t).call(this,e));return r.focus=r.focus.bind(r),r}return _inherits(t,e),_createClass(t,[{key:"render",value:function(){var e=this,t=this.props.inline?"span":"div";return _react2["default"].createElement(_ValidateEditor2["default"],_extends({},this.props,{onStop:function(){return e.context.returnFocus()},tag:t}))}},{key:"focus",value:function(){_reactDom2["default"].findDOMNode(this).focus()}}]),t}(_react.Component);ValueEditor.contextTypes={returnFocus:_react.PropTypes.func},ValueEditor.propTypes={content:_react.PropTypes.string.isRequired,onDone:_react.PropTypes.func.isRequired,inline:_react.PropTypes.bool},exports["default"]=ValueEditor;
 
 },{"./ValueEditor/ValidateEditor":33,"react":"react","react-dom":"react-dom"}],32:[function(require,module,exports){
@@ -116,12 +116,21 @@
 "use strict";function calcVScroll(t){if(!t)return{start:0,end:0,paddingTop:0,paddingBottom:0};var e=t.itemCount,o=t.rowHeight,r=t.viewportTop,a=t.viewportHeight,i=t.itemHeights,l=r+a,n=0,c=0,d=0,p=0;if(i)for(var h=0,s=0;e>h;h++){var m=i[h]||o;r>=s&&h%2===0&&(d=s,n=h),l>=s?c=h+1:p+=m,s+=m}else n=-2&Math.max(0,Math.floor(r/o)-1),c=Math.min(e,n+Math.ceil(a/o)+2),d=Math.min(n,e)*o,p=Math.max(0,e-c)*o;return{start:n,end:c,paddingTop:d,paddingBottom:p}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.calcVScroll=calcVScroll;
 
 },{}],40:[function(require,module,exports){
+<<<<<<< HEAD
 "use strict";function _interopRequireWildcard(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t["default"]=e,t}function Connection(e,t){"/"===e[0]&&(e=location.origin.replace("http","ws")+e);var n=new WebSocket(e);return n.onopen=function(){t(webSocketActions.connected()),t(settingsActions.fetchSettings()),t(flowActions.fetchFlows()).then(function(){console.log("flows are loaded now"),_actions.ConnectionActions.open()}),t(eventLogActions.fetchLogEntries())},n.onmessage=function(e){var n=JSON.parse(e.data);switch(_dispatcher.AppDispatcher.dispatchServerAction(n),n.type){case eventLogActions.UPDATE_LOG:return t(eventLogActions.updateLogEntries(n));case flowActions.UPDATE_FLOWS:return t(flowActions.updateFlows(n));case settingsActions.UPDATE_SETTINGS:return t(settingsActions.handleWsMsg(n));default:console.warn("unknown message",n)}},n.onerror=function(){_actions.ConnectionActions.error(),t(eventLogActions.addLogEntry("WebSocket connection error."))},n.onclose=function(){_actions.ConnectionActions.close(),t(eventLogActions.addLogEntry("WebSocket connection closed.")),t(webSocketActions.disconnected())},n}Object.defineProperty(exports,"__esModule",{value:!0}),exports["default"]=Connection;var _actions=require("./actions.js"),_dispatcher=require("./dispatcher.js"),_websocket=require("./ducks/websocket"),webSocketActions=_interopRequireWildcard(_websocket),_eventLog=require("./ducks/eventLog"),eventLogActions=_interopRequireWildcard(_eventLog),_flows=require("./ducks/flows"),flowActions=_interopRequireWildcard(_flows),_settings=require("./ducks/settings"),settingsActions=_interopRequireWildcard(_settings);
 
 },{"./actions.js":1,"./dispatcher.js":41,"./ducks/eventLog":42,"./ducks/flows":43,"./ducks/settings":45,"./ducks/websocket":49}],41:[function(require,module,exports){
 "use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.AppDispatcher=void 0;var _flux=require("flux"),_flux2=_interopRequireDefault(_flux),PayloadSources={VIEW:"view",SERVER:"server"},AppDispatcher=exports.AppDispatcher=new _flux2["default"].Dispatcher;AppDispatcher.dispatchViewAction=function(e){e.source=PayloadSources.VIEW,this.dispatch(e)},AppDispatcher.dispatchServerAction=function(e){e.source=PayloadSources.SERVER,this.dispatch(e)};
 
 },{"flux":"flux"}],42:[function(require,module,exports){
+=======
+"use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.AppDispatcher=void 0;var _flux=require("flux"),_flux2=_interopRequireDefault(_flux),PayloadSources={VIEW:"view",SERVER:"server"},AppDispatcher=exports.AppDispatcher=new _flux2["default"].Dispatcher;AppDispatcher.dispatchViewAction=function(e){e.source=PayloadSources.VIEW,this.dispatch(e)},AppDispatcher.dispatchServerAction=function(e){e.source=PayloadSources.SERVER,this.dispatch(e)};
+
+},{"flux":"flux"}],41:[function(require,module,exports){
+"use strict";function reduce(){var e=arguments.length<=0||void 0===arguments[0]?defaultState:arguments[0],t=arguments[1];switch(t.type){default:return e}}function init(){return function(e){e((0,_websocket.connect)()),e({type:INIT})}}function destruct(){return function(e){e((0,_websocket.disconnect)()),e({type:DESTRUCT})}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.INIT=void 0,exports.reduce=reduce,exports.init=init,exports.destruct=destruct;var _websocket=require("./websocket"),INIT=exports.INIT="APP_INIT",defaultState={};
+
+},{"./websocket":49}],42:[function(require,module,exports){
+>>>>>>> jason/websocket
 "use strict";function _interopRequireDefault(e){return e&&e.__esModule?e:{"default":e}}function _defineProperty(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function reducer(){var e=arguments.length<=0||void 0===arguments[0]?defaultState:arguments[0],t=arguments[1],r=function(){switch(t.type){case TOGGLE_FILTER:var r=_extends({},e.filter,_defineProperty({},t.filter,!e.filter[t.filter]));return{v:_extends({},e,{filter:r,filteredEvents:(0,_view.updateViewFilter)(e.events,function(e){return r[e.level]})})};case TOGGLE_VISIBILITY:return{v:_extends({},e,{visible:!e.visible})};case UPDATE_LOG:var i=reduceList(e.events,t);return{v:_extends({},e,{events:i,filteredEvents:(0,_view.updateViewList)(e.filteredEvents,e.events,i,t,function(t){return e.filter[t.level]})})};default:return{v:e}}}();return"object"===("undefined"==typeof r?"undefined":_typeof(r))?r.v:void 0}function toggleEventLogFilter(e){return{type:TOGGLE_FILTER,filter:e}}function toggleEventLogVisibility(){return{type:TOGGLE_VISIBILITY}}function addLogEntry(e){var t=arguments.length<=1||void 0===arguments[1]?"web":arguments[1];return addItem({message:e,level:t,id:"log-"+id++})}Object.defineProperty(exports,"__esModule",{value:!0}),exports.fetchLogEntries=exports.updateLogEntries=exports.UPDATE_LOG=void 0;var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},_extends=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e};exports["default"]=reducer,exports.toggleEventLogFilter=toggleEventLogFilter,exports.toggleEventLogVisibility=toggleEventLogVisibility,exports.addLogEntry=addLogEntry;var _list=require("./utils/list"),_list2=_interopRequireDefault(_list),_view=require("./utils/view"),TOGGLE_FILTER="TOGGLE_EVENTLOG_FILTER",TOGGLE_VISIBILITY="TOGGLE_EVENTLOG_VISIBILITY",UPDATE_LOG=exports.UPDATE_LOG="UPDATE_EVENTLOG",_makeList=(0,_list2["default"])(UPDATE_LOG,"/events"),reduceList=_makeList.reduceList,updateList=_makeList.updateList,fetchList=_makeList.fetchList,addItem=_makeList.addItem,defaultState={visible:!1,filter:{debug:!1,info:!0,web:!0},events:reduceList(),filteredEvents:[]},id=0;exports.updateLogEntries=updateList,exports.fetchLogEntries=fetchList;
 
 },{"./utils/list":47,"./utils/view":48}],43:[function(require,module,exports){
@@ -143,9 +152,9 @@
 "use strict";function _toConsumableArray(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}function sortedIndexOf(e,t,r){r||(r=function(e){return 0});for(var n=0,o=e.length,i=r(t),u=void 0;o>n;)u=n+o>>>1,r(e[u])<i?n=u+1:o=u;for(;e[n].id!==t.id&&r(e[n+1])===i;)n++;return n}function updateViewList(e,t,r,n){var o=arguments.length<=4||void 0===arguments[4]?defaultFilterFn:arguments[4],i=arguments.length<=5||void 0===arguments[5]?defaultSortFn:arguments[5];switch(n.cmd){case _list.REQUEST_LIST:return e;case _list.RECEIVE_LIST:return updateViewFilter(r,o,i);case _list.ADD:return o(n.item)?sortedInsert(e,i,n.item):e;case _list.UPDATE:var u=t.byId[n.item.id],d=n.item,a=o(u),f=o(d);if(!a&&f)return sortedInsert(e,i,n.item);if(a&&!f)return sortedRemove(e,i,n.item);if(a&&f){var s=function(){var t=[].concat(_toConsumableArray(e));return t.indexOf=function(e){return sortedIndexOf(t,e,i)},t[t.indexOf(u)]=d,i&&i(u)!==i(d)&&t.sort(makeCompareFn(i)),{v:t}}();if("object"===("undefined"==typeof s?"undefined":_typeof(s)))return s.v}return e;case _list.REMOVE:var l=o(t.byId[n.item.id]);return l?sortedRemove(e,i,n.item):e;default:return console.error("Unknown list action: ",n),e}}function updateViewFilter(e){var t=arguments.length<=1||void 0===arguments[1]?defaultFilterFn:arguments[1],r=arguments.length<=2||void 0===arguments[2]?defaultSortFn:arguments[2],n=e.list.filter(t);return r&&n.sort(makeCompareFn(r)),n.indexOf=function(e){return sortedIndexOf(n,e,r)},n}function updateViewSort(e){var t=arguments.length<=1||void 0===arguments[1]?defaultSortFn:arguments[1],r=[].concat(_toConsumableArray(e));return t&&r.sort(makeCompareFn(t)),r.indexOf=function(e){return sortedIndexOf(r,e,t)},r}Object.defineProperty(exports,"__esModule",{value:!0});var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e};exports.sortedIndexOf=sortedIndexOf,exports.updateViewList=updateViewList,exports.updateViewFilter=updateViewFilter,exports.updateViewSort=updateViewSort;var _list=require("./list"),defaultFilterFn=function(e){return!0},defaultSortFn=!1,makeCompareFn=function(e){var t=function(t,r){var n=e(t),o=e(r);return o>n?-1:n>o?1:0};return t},sortedInsert=function(e,t,r){var n=[].concat(_toConsumableArray(e),[r]);n.indexOf=function(e){return sortedIndexOf(n,e,t)};var o=makeCompareFn(t);return t&&o(e[e.length-1],r)>0&&(console.debug("sorting view..."),n.sort(o)),n},sortedRemove=function(e,t,r){var n=r.id,o=e.filter(function(e){return e.id!==n});return o.indexOf=function(e){return sortedIndexOf(o,e,t)},o};
 
 },{"./list":47}],49:[function(require,module,exports){
-"use strict";function reducer(){var e=arguments.length<=0||void 0===arguments[0]?defaultState:arguments[0],t=arguments[1];switch(t.type){case CONNECTED:return{connected:!0};case DISCONNECTED:return{connected:!1};default:return e}}function connected(){return{type:CONNECTED}}function disconnected(){return{type:DISCONNECTED}}Object.defineProperty(exports,"__esModule",{value:!0}),exports["default"]=reducer,exports.connected=connected,exports.disconnected=disconnected;var CONNECTED="WEBSOCKET_CONNECTED",DISCONNECTED="WEBSOCKET_DISCONNECTED",defaultState={connected:!1};
+"use strict";function _interopRequireWildcard(e){if(e&&e.__esModule)return e;var n={};if(null!=e)for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&(n[t]=e[t]);return n["default"]=e,n}function _defineProperty(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function reduce(){var e,n=arguments.length<=0||void 0===arguments[0]?defaultState:arguments[0],t=arguments[1];switch(t.type){case CONNECT:return _extends({},n,_defineProperty({},SYM_SOCKET,t.socket));case CONNECTED:return _extends({},n,{connected:!0});case DISCONNECT:return _extends({},n,{connected:!1});case DISCONNECTED:return _extends({},n,(e={},_defineProperty(e,SYM_SOCKET,null),_defineProperty(e,"connected",!1),e));default:return n}}function connect(){return function(e){var n=new WebSocket(location.origin.replace("http","ws")+"/updates");return window.ws=n,n.addEventListener("open",function(){return e(onConnect())}),n.addEventListener("close",function(){return e(onDisconnect())}),n.addEventListener("message",function(n){return e(onMessage(n))}),n.addEventListener("error",function(n){return e(onError(n))}),e({type:CONNECT,socket:n}),n}}function disconnect(){return function(e,n){n().settings[SYM_SOCKET].close(),e({type:DISCONNECT})}}function onConnect(){return function(e){e({type:CONNECTED}),e(settingsActions.fetchSettings()),e(flowsActions.fetchFlows()).then(function(){return _actions.ConnectionActions.open()})}}function onMessage(e){return function(n){var t=JSON.parse(e.data);switch(_dispatcher.AppDispatcher.dispatchServerAction(t),t.type){case eventLogActions.UPDATE_LOG:return n(eventLogActions.updateLogEntries(t));case flowsActions.UPDATE_FLOWS:return n(flowsActions.updateFlows(t));case settingsActions.UPDATE_SETTINGS:return n(settingsActions.updateSettings(message));default:console.warn("unknown message",t)}n({type:MESSAGE,msg:e})}}function onDisconnect(){return function(e){_actions.ConnectionActions.close(),e(eventLogActions.addLogEntry("WebSocket connection closed.")),e({type:DISCONNECTED})}}function onError(e){return function(n){_actions.ConnectionActions.error(),n(eventLogActions.addLogEntry("WebSocket connection error.")),n({type:ERROR,error:e})}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.MESSAGE=exports.ERROR=exports.DISCONNECTED=exports.DISCONNECT=exports.CONNECTED=exports.CONNECT=exports.SYM_SOCKET=void 0;var _extends=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e};exports["default"]=reduce,exports.connect=connect,exports.disconnect=disconnect,exports.onConnect=onConnect,exports.onMessage=onMessage,exports.onDisconnect=onDisconnect,exports.onError=onError;var _actions=require("../actions.js"),_dispatcher=require("../dispatcher.js"),_eventLog=require("./eventLog"),eventLogActions=_interopRequireWildcard(_eventLog),_flows=require("./flows"),flowsActions=_interopRequireWildcard(_flows),_settings=require("./settings"),settingsActions=_interopRequireWildcard(_settings),SYM_SOCKET=exports.SYM_SOCKET=Symbol("WEBSOCKET_SYM_SOCKET"),CONNECT=exports.CONNECT="WEBSOCKET_CONNECT",CONNECTED=exports.CONNECTED="WEBSOCKET_CONNECTED",DISCONNECT=exports.DISCONNECT="WEBSOCKET_DISCONNECT",DISCONNECTED=exports.DISCONNECTED="WEBSOCKET_DISCONNECTED",ERROR=exports.ERROR="WEBSOCKET_ERROR",MESSAGE=exports.MESSAGE="WEBSOCKET_MESSAGE",defaultState={connected:!1,socket:null};
 
-},{}],50:[function(require,module,exports){
+},{"../actions.js":1,"../dispatcher.js":40,"./eventLog":42,"./flows":43,"./settings":45}],50:[function(require,module,exports){
 "use strict";module.exports=function(){function e(e,t){function r(){this.constructor=e}r.prototype=t.prototype,e.prototype=new r}function t(e,r,n,i){this.message=e,this.expected=r,this.found=n,this.location=i,this.name="SyntaxError","function"==typeof Error.captureStackTrace&&Error.captureStackTrace(this,t)}function r(e){function r(t){var r,n,i=Ot[t];if(i)return i;for(r=t-1;!Ot[r];)r--;for(i=Ot[r],i={line:i.line,column:i.column,seenCR:i.seenCR};t>r;)n=e.charAt(r),"\n"===n?(i.seenCR||i.line++,i.column=1,i.seenCR=!1):"\r"===n||"\u2028"===n||"\u2029"===n?(i.line++,i.column=1,i.seenCR=!0):(i.column++,i.seenCR=!1),r++;return Ot[t]=i,i}function n(e,t){var n=r(e),i=r(t);return{start:{offset:e,line:n.line,column:n.column},end:{offset:t,line:i.line,column:i.column}}}function i(e){Pt>Mt||(Mt>Pt&&(Pt=Mt,Qt=[]),Qt.push(e))}function s(e,r,n,i){function s(e){var t=1;for(e.sort(function(e,t){return e.description<t.description?-1:e.description>t.description?1:0});t<e.length;)e[t-1]===e[t]?e.splice(t,1):t++}function u(e,t){function r(e){function t(e){return e.charCodeAt(0).toString(16).toUpperCase()}return e.replace(/\\/g,"\\\\").replace(/"/g,'\\"').replace(/\x08/g,"\\b").replace(/\t/g,"\\t").replace(/\n/g,"\\n").replace(/\f/g,"\\f").replace(/\r/g,"\\r").replace(/[\x00-\x07\x0B\x0E\x0F]/g,function(e){return"\\x0"+t(e)}).replace(/[\x10-\x1F\x80-\xFF]/g,function(e){return"\\x"+t(e)}).replace(/[\u0100-\u0FFF]/g,function(e){return"\\u0"+t(e)}).replace(/[\u1000-\uFFFF]/g,function(e){return"\\u"+t(e)})}var n,i,s,u=new Array(e.length);for(s=0;s<e.length;s++)u[s]=e[s].description;return n=e.length>1?u.slice(0,-1).join(", ")+" or "+u[e.length-1]:u[0],i=t?'"'+r(t)+'"':"end of input","Expected "+n+" but "+i+" found."}return null!==r&&s(r),new t(null!==e?e:u(r,n),r,n,i)}function u(){var e,t,r,n;return Vt++,e=Mt,t=a(),t!==P?(r=l(),r!==P?(n=a(),n!==P?(Nt=e,t=X(r),e=t):(Mt=e,e=P)):(Mt=e,e=P)):(Mt=e,e=P),Vt--,e===P&&(t=P,0===Vt&&i(W)),e}function c(){var t,r;return Vt++,Z.test(e.charAt(Mt))?(t=e.charAt(Mt),Mt++):(t=P,0===Vt&&i($)),Vt--,t===P&&(r=P,0===Vt&&i(Y)),t}function o(){var t,r;return Vt++,te.test(e.charAt(Mt))?(t=e.charAt(Mt),Mt++):(t=P,0===Vt&&i(re)),Vt--,t===P&&(r=P,0===Vt&&i(ee)),t}function a(){var e,t;for(Vt++,e=[],t=c();t!==P;)e.push(t),t=c();return Vt--,e===P&&(t=P,0===Vt&&i(ne)),e}function l(){var t,r,n,s,u,c;return t=Mt,r=p(),r!==P?(n=a(),n!==P?(124===e.charCodeAt(Mt)?(s=ie,Mt++):(s=P,0===Vt&&i(se)),s!==P?(u=a(),u!==P?(c=l(),c!==P?(Nt=t,r=ue(r,c),t=r):(Mt=t,t=P)):(Mt=t,t=P)):(Mt=t,t=P)):(Mt=t,t=P)):(Mt=t,t=P),t===P&&(t=p()),t}function p(){var t,r,n,s,u,o;if(t=Mt,r=f(),r!==P?(n=a(),n!==P?(38===e.charCodeAt(Mt)?(s=ce,Mt++):(s=P,0===Vt&&i(oe)),s!==P?(u=a(),u!==P?(o=p(),o!==P?(Nt=t,r=ae(r,o),t=r):(Mt=t,t=P)):(Mt=t,t=P)):(Mt=t,t=P)):(Mt=t,t=P)):(Mt=t,t=P),t===P){if(t=Mt,r=f(),r!==P){if(n=[],s=c(),s!==P)for(;s!==P;)n.push(s),s=c();else n=P;n!==P?(s=p(),s!==P?(Nt=t,r=ae(r,s),t=r):(Mt=t,t=P)):(Mt=t,t=P)}else Mt=t,t=P;t===P&&(t=f())}return t}function f(){var t,r,n,s;return t=Mt,33===e.charCodeAt(Mt)?(r=le,Mt++):(r=P,0===Vt&&i(pe)),r!==P?(n=a(),n!==P?(s=f(),s!==P?(Nt=t,r=fe(s),t=r):(Mt=t,t=P)):(Mt=t,t=P)):(Mt=t,t=P),t===P&&(t=h()),t}function h(){var t,r,n,s,u,c;return t=Mt,40===e.charCodeAt(Mt)?(r=he,Mt++):(r=P,0===Vt&&i(de)),r!==P?(n=a(),n!==P?(s=l(),s!==P?(u=a(),u!==P?(41===e.charCodeAt(Mt)?(c=ve,Mt++):(c=P,0===Vt&&i(ye)),c!==P?(Nt=t,r=ge(s),t=r):(Mt=t,t=P)):(Mt=t,t=P)):(Mt=t,t=P)):(Mt=t,t=P)):(Mt=t,t=P),t===P&&(t=d()),t}function d(){var e;return e=v(),e===P&&(e=g()),e}function v(){var t,r;return t=y(),t===P&&(t=Mt,e.substr(Mt,2)===Ae?(r=Ae,Mt+=2):(r=P,0===Vt&&i(xe)),r!==P&&(Nt=t,r=Re()),t=r,t===P&&(t=Mt,e.substr(Mt,2)===me?(r=me,Mt+=2):(r=P,0===Vt&&i(qe)),r!==P&&(Nt=t,r=Ce()),t=r,t===P&&(t=Mt,e.substr(Mt,2)===we?(r=we,Mt+=2):(r=P,0===Vt&&i(Ee)),r!==P&&(Nt=t,r=be()),t=r,t===P&&(t=Mt,e.substr(Mt,2)===Fe?(r=Fe,Mt+=2):(r=P,0===Vt&&i(Ue)),r!==P&&(Nt=t,r=je()),t=r)))),t}function y(){var t,r;return t=Mt,e.substr(Mt,4)===Te?(r=Te,Mt+=4):(r=P,0===Vt&&i(_e)),r!==P&&(Nt=t,r=Se()),t=r,t===P&&(t=Mt,e.substr(Mt,5)===ke?(r=ke,Mt+=5):(r=P,0===Vt&&i(Be)),r!==P&&(Nt=t,r=Ie()),t=r),t}function g(){var t,r,n,s;if(t=Mt,e.substr(Mt,2)===ze?(r=ze,Mt+=2):(r=P,0===Vt&&i(De)),r!==P){if(n=[],s=c(),s!==P)for(;s!==P;)n.push(s),s=c();else n=P;n!==P?(s=A(),s!==P?(Nt=t,r=Ge(s),t=r):(Mt=t,t=P)):(Mt=t,t=P)}else Mt=t,t=P;if(t===P){if(t=Mt,e.substr(Mt,2)===He?(r=He,Mt+=2):(r=P,0===Vt&&i(Je)),r!==P){if(n=[],s=c(),s!==P)for(;s!==P;)n.push(s),s=c();else n=P;n!==P?(s=x(),s!==P?(Nt=t,r=Ke(s),t=r):(Mt=t,t=P)):(Mt=t,t=P)}else Mt=t,t=P;if(t===P){if(t=Mt,e.substr(Mt,2)===Le?(r=Le,Mt+=2):(r=P,0===Vt&&i(Me)),r!==P){if(n=[],s=c(),s!==P)for(;s!==P;)n.push(s),s=c();else n=P;n!==P?(s=x(),s!==P?(Nt=t,r=Ne(s),t=r):(Mt=t,t=P)):(Mt=t,t=P)}else Mt=t,t=P;if(t===P){if(t=Mt,e.substr(Mt,3)===Oe?(r=Oe,Mt+=3):(r=P,0===Vt&&i(Pe)),r!==P){if(n=[],s=c(),s!==P)for(;s!==P;)n.push(s),s=c();else n=P;n!==P?(s=x(),s!==P?(Nt=t,r=Qe(s),t=r):(Mt=t,t=P)):(Mt=t,t=P)}else Mt=t,t=P;if(t===P){if(t=Mt,e.substr(Mt,3)===Ve?(r=Ve,Mt+=3):(r=P,0===Vt&&i(We)),r!==P){if(n=[],s=c(),s!==P)for(;s!==P;)n.push(s),s=c();else n=P;n!==P?(s=x(),s!==P?(Nt=t,r=Xe(s),t=r):(Mt=t,t=P)):(Mt=t,t=P)}else Mt=t,t=P;if(t===P){if(t=Mt,e.substr(Mt,2)===Ye?(r=Ye,Mt+=2):(r=P,0===Vt&&i(Ze)),r!==P){if(n=[],s=c(),s!==P)for(;s!==P;)n.push(s),s=c();else n=P;n!==P?(s=x(),s!==P?(Nt=t,r=$e(s),t=r):(Mt=t,t=P)):(Mt=t,t=P)}else Mt=t,t=P;if(t===P){if(t=Mt,e.substr(Mt,2)===et?(r=et,Mt+=2):(r=P,0===Vt&&i(tt)),r!==P){if(n=[],s=c(),s!==P)for(;s!==P;)n.push(s),s=c();else n=P;n!==P?(s=x(),s!==P?(Nt=t,r=rt(s),t=r):(Mt=t,t=P)):(Mt=t,t=P)}else Mt=t,t=P;if(t===P){if(t=Mt,e.substr(Mt,3)===nt?(r=nt,Mt+=3):(r=P,0===Vt&&i(it)),r!==P){if(n=[],s=c(),s!==P)for(;s!==P;)n.push(s),s=c();else n=P;n!==P?(s=x(),s!==P?(Nt=t,r=st(s),t=r):(Mt=t,t=P)):(Mt=t,t=P)}else Mt=t,t=P;if(t===P){if(t=Mt,e.substr(Mt,3)===ut?(r=ut,Mt+=3):(r=P,0===Vt&&i(ct)),r!==P){if(n=[],s=c(),s!==P)for(;s!==P;)n.push(s),s=c();else n=P;n!==P?(s=x(),s!==P?(Nt=t,r=ot(s),t=r):(Mt=t,t=P)):(Mt=t,t=P)}else Mt=t,t=P;if(t===P){if(t=Mt,e.substr(Mt,2)===at?(r=at,Mt+=2):(r=P,0===Vt&&i(lt)),r!==P){if(n=[],s=c(),s!==P)for(;s!==P;)n.push(s),s=c();else n=P;n!==P?(s=x(),s!==P?(Nt=t,r=pt(s),t=r):(Mt=t,t=P)):(Mt=t,t=P)}else Mt=t,t=P;t===P&&(t=Mt,r=x(),r!==P&&(Nt=t,r=pt(r)),t=r)}}}}}}}}}return t}function A(){var t,r,n,s;if(Vt++,t=Mt,ht.test(e.charAt(Mt))?(r=e.charAt(Mt),Mt++):(r=P,0===Vt&&i(dt)),r===P&&(r=null),r!==P){if(n=[],vt.test(e.charAt(Mt))?(s=e.charAt(Mt),Mt++):(s=P,0===Vt&&i(yt)),s!==P)for(;s!==P;)n.push(s),vt.test(e.charAt(Mt))?(s=e.charAt(Mt),Mt++):(s=P,0===Vt&&i(yt));else n=P;n!==P?(ht.test(e.charAt(Mt))?(s=e.charAt(Mt),Mt++):(s=P,0===Vt&&i(dt)),s===P&&(s=null),s!==P?(Nt=t,r=gt(n),t=r):(Mt=t,t=P)):(Mt=t,t=P)}else Mt=t,t=P;return Vt--,t===P&&(r=P,0===Vt&&i(ft)),t}function x(){var t,r,n,s;if(Vt++,t=Mt,34===e.charCodeAt(Mt)?(r=xt,Mt++):(r=P,0===Vt&&i(Rt)),r!==P){for(n=[],s=R();s!==P;)n.push(s),s=R();n!==P?(34===e.charCodeAt(Mt)?(s=xt,Mt++):(s=P,0===Vt&&i(Rt)),s!==P?(Nt=t,r=mt(n),t=r):(Mt=t,t=P)):(Mt=t,t=P)}else Mt=t,t=P;if(t===P){if(t=Mt,39===e.charCodeAt(Mt)?(r=qt,Mt++):(r=P,0===Vt&&i(Ct)),r!==P){for(n=[],s=m();s!==P;)n.push(s),s=m();n!==P?(39===e.charCodeAt(Mt)?(s=qt,Mt++):(s=P,0===Vt&&i(Ct)),s!==P?(Nt=t,r=mt(n),t=r):(Mt=t,t=P)):(Mt=t,t=P)}else Mt=t,t=P;if(t===P)if(t=Mt,r=Mt,Vt++,n=o(),Vt--,n===P?r=void 0:(Mt=r,r=P),r!==P){if(n=[],s=q(),s!==P)for(;s!==P;)n.push(s),s=q();else n=P;n!==P?(Nt=t,r=mt(n),t=r):(Mt=t,t=P)}else Mt=t,t=P}return Vt--,t===P&&(r=P,0===Vt&&i(At)),t}function R(){var t,r,n;return t=Mt,r=Mt,Vt++,wt.test(e.charAt(Mt))?(n=e.charAt(Mt),Mt++):(n=P,0===Vt&&i(Et)),Vt--,n===P?r=void 0:(Mt=r,r=P),r!==P?(e.length>Mt?(n=e.charAt(Mt),Mt++):(n=P,0===Vt&&i(bt)),n!==P?(Nt=t,r=Ft(n),t=r):(Mt=t,t=P)):(Mt=t,t=P),t===P&&(t=Mt,92===e.charCodeAt(Mt)?(r=Ut,Mt++):(r=P,0===Vt&&i(jt)),r!==P?(n=C(),n!==P?(Nt=t,r=Ft(n),t=r):(Mt=t,t=P)):(Mt=t,t=P)),t}function m(){var t,r,n;return t=Mt,r=Mt,Vt++,Tt.test(e.charAt(Mt))?(n=e.charAt(Mt),Mt++):(n=P,0===Vt&&i(_t)),Vt--,n===P?r=void 0:(Mt=r,r=P),r!==P?(e.length>Mt?(n=e.charAt(Mt),Mt++):(n=P,0===Vt&&i(bt)),n!==P?(Nt=t,r=Ft(n),t=r):(Mt=t,t=P)):(Mt=t,t=P),t===P&&(t=Mt,92===e.charCodeAt(Mt)?(r=Ut,Mt++):(r=P,0===Vt&&i(jt)),r!==P?(n=C(),n!==P?(Nt=t,r=Ft(n),t=r):(Mt=t,t=P)):(Mt=t,t=P)),t}function q(){var t,r,n;return t=Mt,r=Mt,Vt++,n=c(),Vt--,n===P?r=void 0:(Mt=r,r=P),r!==P?(e.length>Mt?(n=e.charAt(Mt),Mt++):(n=P,0===Vt&&i(bt)),n!==P?(Nt=t,r=Ft(n),t=r):(Mt=t,t=P)):(Mt=t,t=P),t}function C(){var t,r;return St.test(e.charAt(Mt))?(t=e.charAt(Mt),Mt++):(t=P,0===Vt&&i(kt)),t===P&&(t=Mt,110===e.charCodeAt(Mt)?(r=Bt,Mt++):(r=P,0===Vt&&i(It)),r!==P&&(Nt=t,r=zt()),t=r,t===P&&(t=Mt,114===e.charCodeAt(Mt)?(r=Dt,Mt++):(r=P,0===Vt&&i(Gt)),r!==P&&(Nt=t,r=Ht()),t=r,t===P&&(t=Mt,116===e.charCodeAt(Mt)?(r=Jt,Mt++):(r=P,0===Vt&&i(Kt)),r!==P&&(Nt=t,r=Lt()),t=r))),t}function w(e,t){function r(){return e.apply(this,arguments)||t.apply(this,arguments)}return r.desc=e.desc+" or "+t.desc,r}function E(e,t){function r(){return e.apply(this,arguments)&&t.apply(this,arguments)}return r.desc=e.desc+" and "+t.desc,r}function b(e){function t(){return!e.apply(this,arguments)}return t.desc="not "+e.desc,t}function F(e){function t(){return e.apply(this,arguments)}return t.desc="("+e.desc+")",t}function U(e){return!0}function j(e){return!1}function T(e){if(e.response)for(var t=Wt.ResponseUtils.getContentType(e.response),r=Xt.length;r--;)if(Xt[r].test(t))return!0;return!1}function _(e){function t(t){return t.response&&t.response.status_code===e}return t.desc="resp. code is "+e,t}function S(e){function t(t){return t.request&&e.test(t.request.host)}return e=new RegExp(e,"i"),t.desc="domain matches "+e,t}function k(e){return!!e.error}function B(e){function t(t){return t.request&&Wt.RequestUtils.match_header(t.request,e)||t.response&&Wt.ResponseUtils.match_header(t.response,e)}return e=new RegExp(e,"i"),t.desc="header matches "+e,t}function I(e){function t(t){return t.request&&Wt.RequestUtils.match_header(t.request,e)}return e=new RegExp(e,"i"),t.desc="req. header matches "+e,t}function z(e){function t(t){return t.response&&Wt.ResponseUtils.match_header(t.response,e)}return e=new RegExp(e,"i"),t.desc="resp. header matches "+e,t}function D(e){function t(t){return t.request&&e.test(t.request.method)}return e=new RegExp(e,"i"),t.desc="method matches "+e,t}function G(e){return e.request&&!e.response}function H(e){return!!e.response}function J(e){function t(t){return t.request&&e.test(Wt.RequestUtils.getContentType(t.request))||t.response&&e.test(Wt.ResponseUtils.getContentType(t.response))}return e=new RegExp(e,"i"),t.desc="content type matches "+e,t}function K(e){function t(t){return t.request&&e.test(Wt.RequestUtils.getContentType(t.request))}return e=new RegExp(e,"i"),t.desc="req. content type matches "+e,t}function L(e){function t(t){return t.response&&e.test(Wt.ResponseUtils.getContentType(t.response))}return e=new RegExp(e,"i"),t.desc="resp. content type matches "+e,t}function M(e){function t(t){return t.request&&e.test(Wt.RequestUtils.pretty_url(t.request))}return e=new RegExp(e,"i"),t.desc="url matches "+e,t}var N,O=arguments.length>1?arguments[1]:{},P={},Q={start:u},V=u,W={type:"other",description:"filter expression"},X=function(e){return e},Y={type:"other",description:"whitespace"},Z=/^[ \t\n\r]/,$={type:"class",value:"[ \\t\\n\\r]",description:"[ \\t\\n\\r]"},ee={type:"other",description:"control character"},te=/^[|&!()~"]/,re={type:"class",value:'[|&!()~"]',description:'[|&!()~"]'},ne={type:"other",description:"optional whitespace"},ie="|",se={type:"literal",value:"|",description:'"|"'},ue=function(e,t){return w(e,t)},ce="&",oe={type:"literal",value:"&",description:'"&"'},ae=function(e,t){return E(e,t)},le="!",pe={type:"literal",value:"!",description:'"!"'},fe=function(e){return b(e)},he="(",de={type:"literal",value:"(",description:'"("'},ve=")",ye={type:"literal",value:")",description:'")"'},ge=function(e){return F(e)},Ae="~a",xe={type:"literal",value:"~a",description:'"~a"'},Re=function(){return T},me="~e",qe={type:"literal",value:"~e",description:'"~e"'},Ce=function(){return k},we="~q",Ee={type:"literal",value:"~q",description:'"~q"'},be=function(){return G},Fe="~s",Ue={type:"literal",value:"~s",description:'"~s"'},je=function(){return H},Te="true",_e={type:"literal",value:"true",description:'"true"'},Se=function(){return U},ke="false",Be={type:"literal",value:"false",description:'"false"'},Ie=function(){return j},ze="~c",De={type:"literal",value:"~c",description:'"~c"'},Ge=function(e){return _(e)},He="~d",Je={type:"literal",value:"~d",description:'"~d"'},Ke=function(e){return S(e)},Le="~h",Me={type:"literal",value:"~h",description:'"~h"'},Ne=function(e){return B(e)},Oe="~hq",Pe={type:"literal",value:"~hq",description:'"~hq"'},Qe=function(e){return I(e)},Ve="~hs",We={type:"literal",value:"~hs",description:'"~hs"'},Xe=function(e){return z(e)},Ye="~m",Ze={type:"literal",value:"~m",description:'"~m"'},$e=function(e){return D(e)},et="~t",tt={type:"literal",value:"~t",description:'"~t"'},rt=function(e){return J(e)},nt="~tq",it={type:"literal",value:"~tq",description:'"~tq"'},st=function(e){return K(e)},ut="~ts",ct={type:"literal",value:"~ts",description:'"~ts"'},ot=function(e){return L(e)},at="~u",lt={type:"literal",value:"~u",description:'"~u"'},pt=function(e){return M(e)},ft={type:"other",description:"integer"},ht=/^['"]/,dt={type:"class",value:"['\"]",description:"['\"]"},vt=/^[0-9]/,yt={type:"class",value:"[0-9]",description:"[0-9]"},gt=function(e){return parseInt(e.join(""),10)},At={type:"other",description:"string"},xt='"',Rt={type:"literal",value:'"',description:'"\\""'},mt=function(e){return e.join("")},qt="'",Ct={type:"literal",value:"'",description:'"\'"'},wt=/^["\\]/,Et={type:"class",value:'["\\\\]',description:'["\\\\]'},bt={type:"any",description:"any character"},Ft=function(e){return e},Ut="\\",jt={type:"literal",value:"\\",description:'"\\\\"'},Tt=/^['\\]/,_t={type:"class",value:"['\\\\]",description:"['\\\\]"},St=/^['"\\]/,kt={type:"class",value:"['\"\\\\]",description:"['\"\\\\]"},Bt="n",It={type:"literal",value:"n",description:'"n"'},zt=function(){return"\n"},Dt="r",Gt={type:"literal",value:"r",description:'"r"'},Ht=function(){return"\r"},Jt="t",Kt={type:"literal",value:"t",description:'"t"'},Lt=function(){return"	"},Mt=0,Nt=0,Ot=[{line:1,column:1,seenCR:!1}],Pt=0,Qt=[],Vt=0;if("startRule"in O){if(!(O.startRule in Q))throw new Error("Can't start parsing from rule \""+O.startRule+'".');V=Q[O.startRule]}var Wt=require("../flow/utils.js");U.desc="true",j.desc="false";var Xt=[new RegExp("text/javascript"),new RegExp("application/x-javascript"),new RegExp("application/javascript"),new RegExp("text/css"),new RegExp("image/.*"),new RegExp("application/x-shockwave-flash")];if(T.desc="is asset",k.desc="has error",G.desc="has no response",H.desc="has response",N=V(),N!==P&&Mt===e.length)return N;throw N!==P&&Mt<e.length&&i({type:"end",description:"end of input"}),s(null,Qt,Pt<e.length?e.charAt(Pt):null,Pt<e.length?n(Pt,Pt+1):n(Pt,Pt))}return e(t,Error),{SyntaxError:t,parse:r}}();
 
 },{"../flow/utils.js":51}],51:[function(require,module,exports){
diff --git a/web/src/js/app.jsx b/web/src/js/app.jsx
index 8fa52a00..643bb8b7 100644
--- a/web/src/js/app.jsx
+++ b/web/src/js/app.jsx
@@ -1,16 +1,15 @@
-import React from "react"
+import React from 'react'
 import { render } from 'react-dom'
 import { applyMiddleware, createStore } from 'redux'
 import { Provider } from 'react-redux'
 import createLogger from 'redux-logger'
 import thunkMiddleware from 'redux-thunk'
-import { Route, Router as ReactRouter, hashHistory, Redirect } from "react-router"
+import { Route, Router as ReactRouter, hashHistory, Redirect } from 'react-router'
 
-import Connection from "./connection"
-import ProxyApp from "./components/ProxyApp"
+import ProxyApp from './components/ProxyApp'
 import MainView from './components/MainView'
 import rootReducer from './ducks/index'
-import { addLogEntry } from "./ducks/eventLog"
+import { addLogEntry } from './ducks/eventLog'
 
 // logger must be last
 const store = createStore(
@@ -18,14 +17,13 @@ const store = createStore(
     applyMiddleware(thunkMiddleware, createLogger())
 )
 
+// @todo move to ProxyApp
 window.addEventListener('error', msg => {
     store.dispatch(addLogEntry(msg))
 })
 
 // @todo remove this
 document.addEventListener('DOMContentLoaded', () => {
-    window.ws = new Connection("/updates", store.dispatch)
-
     render(
         <Provider store={store}>
             <ReactRouter history={hashHistory}>
diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx
index 5d795b57..84564c32 100644
--- a/web/src/js/components/ProxyApp.jsx
+++ b/web/src/js/components/ProxyApp.jsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
 import _ from 'lodash'
 import { connect } from 'react-redux'
 
+import { init as appInit, destruct as appDestruct } from '../ducks/app'
 import Header from './Header'
 import EventLog from './EventLog'
 import Footer from './Footer'
@@ -26,27 +27,8 @@ class ProxyAppMain extends Component {
         this.updateLocation = this.updateLocation.bind(this)
     }
 
-    /**
-     * @todo move to actions
-     */
-    updateLocation(pathname, queryUpdate) {
-        if (pathname === undefined) {
-            pathname = this.props.location.pathname
-        }
-        const query = this.props.location.query
-        for (const key of Object.keys(queryUpdate || {})) {
-            query[key] = queryUpdate[key] || undefined
-        }
-        this.context.router.replace({ pathname, query })
-    }
-
-    /**
-     * @todo pass in with props
-     */
-    getQuery() {
-        // For whatever reason, react-router always returns the same object, which makes comparing
-        // the current props with nextProps impossible. As a workaround, we just clone the query object.
-        return _.clone(this.props.location.query)
+    componentWillMount() {
+        this.props.appInit()
     }
 
     /**
@@ -56,6 +38,10 @@ class ProxyAppMain extends Component {
         this.focus()
     }
 
+    componentWillUnmount() {
+        this.props.appDestruct()
+    }
+
     /**
      * @todo use props
      */
@@ -110,6 +96,29 @@ class ProxyAppMain extends Component {
         e.preventDefault()
     }
 
+    /**
+     * @todo move to actions
+     */
+    updateLocation(pathname, queryUpdate) {
+        if (pathname === undefined) {
+            pathname = this.props.location.pathname
+        }
+        const query = this.props.location.query
+        for (const key of Object.keys(queryUpdate || {})) {
+            query[key] = queryUpdate[key] || undefined
+        }
+        this.context.router.replace({ pathname, query })
+    }
+
+    /**
+     * @todo pass in with props
+     */
+    getQuery() {
+        // For whatever reason, react-router always returns the same object, which makes comparing
+        // the current props with nextProps impossible. As a workaround, we just clone the query object.
+        return _.clone(this.props.location.query)
+    }
+
     render() {
         const { showEventLog, location, children } = this.props
         const query = this.getQuery()
@@ -132,5 +141,10 @@ class ProxyAppMain extends Component {
 export default connect(
     state => ({
         showEventLog: state.eventLog.visible,
-    })
+        settings: state.settings.settings,
+    }),
+    {
+        appInit,
+        appDestruct,
+    }
 )(ProxyAppMain)
diff --git a/web/src/js/connection.js b/web/src/js/connection.js
deleted file mode 100644
index 524a8f6a..00000000
--- a/web/src/js/connection.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import {ConnectionActions} from "./actions.js";
-import {AppDispatcher} from "./dispatcher.js";
-import * as webSocketActions from "./ducks/websocket"
-import * as eventLogActions from "./ducks/eventLog"
-import * as flowActions from "./ducks/flows"
-import * as settingsActions from './ducks/settings'
-
-export default function Connection(url, dispatch) {
-    if (url[0] === "/") {
-        url = location.origin.replace("http", "ws") + url;
-    }
-
-    var ws = new WebSocket(url);
-    ws.onopen = function () {
-        dispatch(webSocketActions.connected())
-        dispatch(settingsActions.fetchSettings())
-        dispatch(flowActions.fetchFlows())
-        // workaround to make sure that our state is already available.
-            .then(() => {
-            console.log("flows are loaded now")
-            ConnectionActions.open()
-        })
-        dispatch(eventLogActions.fetchLogEntries())
-    };
-    ws.onmessage = function (m) {
-        var message = JSON.parse(m.data);
-        AppDispatcher.dispatchServerAction(message);
-        switch (message.type) {
-            case eventLogActions.UPDATE_LOG:
-                return dispatch(eventLogActions.updateLogEntries(message))
-            case flowActions.UPDATE_FLOWS:
-                return dispatch(flowActions.updateFlows(message))
-            case settingsActions.UPDATE_SETTINGS:
-                return dispatch(settingsActions.handleWsMsg(message))
-            default:
-                console.warn("unknown message", message)
-        }
-    };
-    ws.onerror = function () {
-        ConnectionActions.error();
-        dispatch(eventLogActions.addLogEntry("WebSocket connection error."));
-    };
-    ws.onclose = function () {
-        ConnectionActions.close();
-        dispatch(eventLogActions.addLogEntry("WebSocket connection closed."));
-        dispatch(webSocketActions.disconnected());
-    };
-    return ws;
-}
diff --git a/web/src/js/ducks/app.js b/web/src/js/ducks/app.js
new file mode 100644
index 00000000..f1dcb490
--- /dev/null
+++ b/web/src/js/ducks/app.js
@@ -0,0 +1,27 @@
+import { connect as wsConnect, disconnect as wsDisconnect } from './websocket'
+
+export const INIT = 'APP_INIT'
+
+const defaultState = {}
+
+export function reduce(state = defaultState, action) {
+    switch (action.type) {
+
+        default:
+            return state
+    }
+}
+
+export function init() {
+    return dispatch => {
+        dispatch(wsConnect())
+        dispatch({ type: INIT })
+    }
+}
+
+export function destruct() {
+    return dispatch => {
+        dispatch(wsDisconnect())
+        dispatch({ type: DESTRUCT })
+    }
+}
diff --git a/web/src/js/ducks/websocket.js b/web/src/js/ducks/websocket.js
index ebb39cf8..f38124c9 100644
--- a/web/src/js/ducks/websocket.js
+++ b/web/src/js/ducks/websocket.js
@@ -1,30 +1,113 @@
-const CONNECTED = 'WEBSOCKET_CONNECTED'
-const DISCONNECTED = 'WEBSOCKET_DISCONNECTED'
+import { ConnectionActions } from '../actions.js'
+import { AppDispatcher } from '../dispatcher.js'
+import * as eventLogActions from './eventLog'
+import * as flowsActions from './flows'
+import * as settingsActions from './settings'
 
+export const SYM_SOCKET = Symbol('WEBSOCKET_SYM_SOCKET')
 
-const defaultState = {
-    connected: false,
-    /* we may want to have an error message attribute here at some point */
-}
-export default function reducer(state = defaultState, action) {
+export const CONNECT = 'WEBSOCKET_CONNECT'
+export const CONNECTED = 'WEBSOCKET_CONNECTED'
+export const DISCONNECT = 'WEBSOCKET_DISCONNECT'
+export const DISCONNECTED = 'WEBSOCKET_DISCONNECTED'
+export const ERROR = 'WEBSOCKET_ERROR'
+export const MESSAGE = 'WEBSOCKET_MESSAGE'
+
+/* we may want to have an error message attribute here at some point */
+const defaultState = { connected: false, socket: null }
+
+export default function reduce(state = defaultState, action) {
     switch (action.type) {
+
+        case CONNECT:
+            return { ...state, [SYM_SOCKET]: action.socket }
+
         case CONNECTED:
-            return {
-                connected: true
-            }
+            return { ...state, connected: true }
+
+        case DISCONNECT:
+            return { ...state, connected: false }
+
         case DISCONNECTED:
-            return {
-                connected: false
-            }
+            return { ...state, [SYM_SOCKET]: null, connected: false }
+
         default:
             return state
     }
 }
 
+export function connect() {
+    return dispatch => {
+        const socket = new WebSocket(location.origin.replace('http', 'ws') + '/updates')
+
+        // @todo remove this
+        window.ws = socket
 
-export function connected() {
-    return {type: CONNECTED}
+        socket.addEventListener('open', () => dispatch(onConnect()))
+        socket.addEventListener('close', () => dispatch(onDisconnect()))
+        socket.addEventListener('message', msg => dispatch(onMessage(msg)))
+        socket.addEventListener('error', error => dispatch(onError(error)))
+
+        dispatch({ type: CONNECT, socket })
+
+        return socket
+    }
+}
+
+export function disconnect() {
+    return (dispatch, getState) => {
+        getState().settings[SYM_SOCKET].close()
+        dispatch({ type: DISCONNECT })
+    }
 }
-export function disconnected() {
-    return {type: DISCONNECTED}
+
+export function onConnect() {
+    // workaround to make sure that our state is already available.
+    return dispatch => {
+        dispatch({ type: CONNECTED })
+        dispatch(settingsActions.fetchSettings())
+        dispatch(flowsActions.fetchFlows()).then(() => ConnectionActions.open())
+    }
+}
+
+export function onMessage(msg) {
+    return dispatch => {
+        const data = JSON.parse(msg.data)
+
+        AppDispatcher.dispatchServerAction(data)
+
+        switch (data.type) {
+
+            case eventLogActions.UPDATE_LOG:
+                return dispatch(eventLogActions.updateLogEntries(data))
+
+            case flowsActions.UPDATE_FLOWS:
+                return dispatch(flowsActions.updateFlows(data))
+
+            case settingsActions.UPDATE_SETTINGS:
+                return dispatch(settingsActions.updateSettings(message))
+
+            default:
+                console.warn('unknown message', data)
+        }
+
+        dispatch({ type: MESSAGE, msg })
+    }
+}
+
+export function onDisconnect() {
+    return dispatch => {
+        ConnectionActions.close()
+        dispatch(eventLogActions.addLogEntry('WebSocket connection closed.'))
+        dispatch({ type: DISCONNECTED })
+    }
+}
+
+export function onError(error) {
+    // @todo let event log subscribe WebSocketActions.ERROR
+    return dispatch => {
+        ConnectionActions.error()
+        dispatch(eventLogActions.addLogEntry('WebSocket connection error.'))
+        dispatch({ type: ERROR, error })
+    }
 }