Merge remote-tracking branch 'origin/master' into flow_editing

30 files changed, 645 insertions, 656 deletions

diff --git a/web/src/js/__tests__/ducks/flowView.js b/web/src/js/__tests__/ducks/flowView.js
new file mode 100644
index 00000000..d5d9a6d9
--- /dev/null
+++ b/web/src/js/__tests__/ducks/flowView.js
@@ -0,0 +1,67 @@
+jest.unmock('../../ducks/flows')
+jest.unmock('../../ducks/flowView')
+jest.unmock('../../ducks/utils/view')
+jest.unmock('../../ducks/utils/list')
+jest.unmock('./tutils')
+
+import { createStore } from './tutils'
+
+import flows, * as flowActions from '../../ducks/flows'
+import flowView, * as flowViewActions from '../../ducks/flowView'
+
+
+function testStore() {
+    let store = createStore({
+        flows,
+        flowView
+    })
+    for (let i of [1, 2, 3, 4]) {
+        store.dispatch(
+            flowActions.addFlow({ id: i })
+        )
+    }
+    return store
+}
+
+describe('select relative', () => {
+
+    function testSelect(start, relative, result) {
+        const store = testStore()
+        store.dispatch(flowActions.select(start))
+        expect(store.getState().flows.selected).toEqual(start ? [start] : [])
+        store.dispatch(flowViewActions.selectRelative(relative))
+        expect(store.getState().flows.selected).toEqual([result])
+    }
+
+    describe('previous', () => {
+
+        it('should select the previous flow', () => {
+            testSelect(3, -1, 2)
+        })
+
+        it('should not changed when first flow is selected', () => {
+            testSelect(1, -1, 1)
+        })
+
+        it('should select first flow if no flow is selected', () => {
+            testSelect(undefined, -1, 1)
+        })
+
+    })
+
+    describe('next', () => {
+
+        it('should select the next flow', () => {
+            testSelect(2, 1, 3)
+        })
+
+        it('should not changed when last flow is selected', () => {
+            testSelect(4, 1, 4)
+        })
+
+        it('should select last flow if no flow is selected', () => {
+            testSelect(undefined, 1, 4)
+        })
+
+    })
+})
diff --git a/web/src/js/__tests__/ducks/flows.js b/web/src/js/__tests__/ducks/flows.js
new file mode 100644
index 00000000..2b261cb1
--- /dev/null
+++ b/web/src/js/__tests__/ducks/flows.js
@@ -0,0 +1,30 @@
+jest.unmock('../../ducks/flows');
+
+import reduceFlows, * as flowActions from '../../ducks/flows'
+
+
+describe('select flow', () => {
+
+    let state = reduceFlows(undefined, {})
+    for (let i of [1, 2, 3, 4]) {
+        state = reduceFlows(state, flowActions.addFlow({ id: i }))
+    }
+
+    it('should be possible to select a single flow', () => {
+        expect(reduceFlows(state, flowActions.select(2))).toEqual(
+            {
+                ...state,
+                selected: [2],
+            }
+        )
+    })
+
+    it('should be possible to deselect a flow', () => {
+        expect(reduceFlows({ ...state, selected: [1] }, flowActions.select())).toEqual(
+            {
+                ...state,
+                selected: [],
+            }
+        )
+    })
+})
diff --git a/web/src/js/__tests__/ducks/tutils.js b/web/src/js/__tests__/ducks/tutils.js
new file mode 100644
index 00000000..90a21b78
--- /dev/null
+++ b/web/src/js/__tests__/ducks/tutils.js
@@ -0,0 +1,12 @@
+jest.unmock('redux')
+jest.unmock('redux-thunk')
+
+import { combineReducers, applyMiddleware, createStore as createReduxStore } from 'redux'
+import thunk from 'redux-thunk'
+
+export function createStore(parts) {
+    return createReduxStore(
+        combineReducers(parts),
+        applyMiddleware(...[thunk])
+    )
+}
diff --git a/web/src/js/__tests__/ducks/ui.js b/web/src/js/__tests__/ducks/ui.js
index 2388a9ad..d3242815 100644
--- a/web/src/js/__tests__/ducks/ui.js
+++ b/web/src/js/__tests__/ducks/ui.js
@@ -1,36 +1,36 @@
-jest.unmock("../../ducks/ui");
-// @todo fix it ( this is why I don't like to add tests until our architecture is stable :P )
-jest.unmock("../../ducks/views/main");
+jest.unmock('../../ducks/ui')
+jest.unmock('../../ducks/flows')
 
-import reducer, { setActiveMenu } from '../../ducks/ui';
-import { SELECT } from '../../ducks/views/main';
+import reducer, { setActiveMenu } from '../../ducks/ui'
+import * as flowActions from '../../ducks/flows'
 
-describe("ui reducer", () => {
-    it("should return the initial state", () => {
-        expect(reducer(undefined, {})).toEqual({ activeMenu: 'Start'})
-    }),
-    it("should return the state for view", () => {
-        expect(reducer(undefined, setActiveMenu('View'))).toEqual({ activeMenu: 'View'})
-    }),
-    it("should change the state to Start when deselecting a flow and we a currently at the flow tab", () => {
-        expect(reducer({activeMenu: 'Flow'},
-            { type: SELECT,
-              currentSelection: '1',
-              flowId : undefined
-            })).toEqual({ activeMenu: 'Start'})
-    }),
-    it("should change the state to Flow when we selected a flow and no flow was selected before", () => {
-        expect(reducer({activeMenu: 'Start'},
-            { type: SELECT,
-              currentSelection: undefined,
-              flowId : '1'
-            })).toEqual({ activeMenu: 'Flow'})
-    }),
-    it("should not change the state to Flow when OPTIONS tab is selected and we selected a flow and a flow as selected before", () => {
-        expect(reducer({activeMenu: 'Options'},
-            { type: SELECT,
-              currentSelection: '1',
-              flowId : '2'
-            })).toEqual({ activeMenu: 'Options'})
+describe('ui reducer', () => {
+    it('should return the initial state', () => {
+        expect(reducer(undefined, {}).activeMenu).toEqual('Start')
     })
-});
+
+    it('should return the state for view', () => {
+        expect(reducer(undefined, setActiveMenu('View')).activeMenu).toEqual('View')
+    })
+
+    it('should change the state to Start when deselecting a flow and we a currently at the flow tab', () => {
+        expect(reducer(
+            { activeMenu: 'Flow', isFlowSelected: true },
+            flowActions.select(undefined)).activeMenu
+        ).toEqual('Start')
+    })
+
+    it('should change the state to Flow when we selected a flow and no flow was selected before', () => {
+        expect(reducer(
+            { activeMenu: 'Start', isFlowSelected: false },
+            flowActions.select(1)).activeMenu
+        ).toEqual('Flow')
+    })
+
+    it('should not change the state to Flow when OPTIONS tab is selected and we selected a flow and a flow as selected before', () => {
+        expect(reducer(
+            { activeMenu: 'Options', isFlowSelected: true },
+            flowActions.select(1)
+        ).activeMenu).toEqual('Options')
+    })
+})
diff --git a/web/src/js/__tests__/ducks/utils/list.js b/web/src/js/__tests__/ducks/utils/list.js
index 8cae91ec..72d162f2 100644
--- a/web/src/js/__tests__/ducks/utils/list.js
+++ b/web/src/js/__tests__/ducks/utils/list.js
@@ -27,7 +27,7 @@ describe('list reduce', () => {
             { id: 1, val: 1 },
             { id: 2, val: 3 }
         ])
-        expect(reduce(state, list.update(2, { id: 2, val: 3 }))).toEqual(result)
+        expect(reduce(state, list.update({ id: 2, val: 3 }))).toEqual(result)
     })
 
     it('should remove item', () => {
diff --git a/web/src/js/__tests__/ducks/utils/view.js b/web/src/js/__tests__/ducks/utils/view.js
index 1b07f723..f0b147da 100644
--- a/web/src/js/__tests__/ducks/utils/view.js
+++ b/web/src/js/__tests__/ducks/utils/view.js
@@ -14,7 +14,7 @@ describe('view reduce', () => {
         const result = createState([
             { id: 1 }
         ])
-        expect(reduce(state, view.updateFilter(state, item => item.id === 1))).toEqual(result)
+        expect(reduce(state, view.updateFilter(state.data, item => item.id === 1))).toEqual(result)
     })
 
     it('should sort items', () => {
@@ -72,7 +72,7 @@ describe('view reduce', () => {
             { id: 1, val: 1 },
             { id: 2, val: 3 }
         ])
-        expect(reduce(state, view.update(2, { id: 2, val: 3 }))).toEqual(result)
+        expect(reduce(state, view.update({ id: 2, val: 3 }))).toEqual(result)
     })
 
     it('should sort updated item', () => {
@@ -84,7 +84,7 @@ describe('view reduce', () => {
             { id: 2, val: 3 },
             { id: 1, val: 1 }
         ])
-        expect(reduce(state, view.update(2, { id: 2, val: 3 }, undefined, (a, b) => b.id - a.id))).toEqual(result)
+        expect(reduce(state, view.update({ id: 2, val: 3 }, undefined, (a, b) => b.id - a.id))).toEqual(result)
     })
 
     it('should filter updated item', () => {
@@ -96,7 +96,7 @@ describe('view reduce', () => {
             { id: 1, val: 1 }
         ])
         result.indexOf[2] = null
-        expect(reduce(state, view.update(2, { id: 2, val: 3 }, i => i.id === i.val))).toEqual(result)
+        expect(reduce(state, view.update({ id: 2, val: 3 }, i => i.id === i.val))).toEqual(result)
     })
 
     it('should remove item', () => {
@@ -119,7 +119,7 @@ describe('view reduce', () => {
         const result = createState([
             { id: 1 }
         ])
-        expect(reduce(state, view.receive({ data: [{ id: 1 }] }))).toEqual(result)
+        expect(reduce(state, view.receive([{ id: 1 }]))).toEqual(result)
     })
 
     it('should sort received items', () => {
@@ -131,7 +131,7 @@ describe('view reduce', () => {
             { id: 2 },
             { id: 1 }
         ])
-        expect(reduce(state, view.receive({ data: [{ id: 1 }, { id: 2 }] }, undefined, (a, b) => b.id - a.id))).toEqual(result)
+        expect(reduce(state, view.receive([{ id: 1 }, { id: 2 }], undefined, (a, b) => b.id - a.id))).toEqual(result)
     })
 
     it('should filter received', () => {
@@ -142,7 +142,7 @@ describe('view reduce', () => {
         const result = createState([
             { id: 1 }
         ])
-        expect(reduce(state, view.receive({ data: [{ id: 1 }, { id: 2 }] }, i => i.id === 1))).toEqual(result)
+        expect(reduce(state, view.receive([{ id: 1 }, { id: 2 }], i => i.id === 1))).toEqual(result)
     })
 })
 
diff --git a/web/src/js/app.jsx b/web/src/js/app.jsx
index 5acf5dd4..726b2ae1 100644
--- a/web/src/js/app.jsx
+++ b/web/src/js/app.jsx
@@ -12,7 +12,7 @@ import { add as addLog } from './ducks/eventLog'
 
 const middlewares = [thunk];
 
-if (process.env.NODE_ENV === 'development' ) {
+if (process.env.NODE_ENV !== 'production') {
   const createLogger = require('redux-logger');
   middlewares.push(createLogger());
 }
diff --git a/web/src/js/components/ContentView.jsx b/web/src/js/components/ContentView.jsx
index 3cd9990c..0b93d3f0 100644
--- a/web/src/js/components/ContentView.jsx
+++ b/web/src/js/components/ContentView.jsx
@@ -1,121 +1,68 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { MessageUtils } from '../flow/utils.js'
-import { ViewAuto, ViewImage } from './ContentView/ContentViews'
+import * as ContentViews from './ContentView/ContentViews'
 import * as MetaViews from './ContentView/MetaViews'
 import ContentLoader from './ContentView/ContentLoader'
 import ViewSelector from './ContentView/ViewSelector'
+import { setContentView, setDisplayLarge } from '../ducks/ui'
 import CodeEditor from './common/CodeEditor'
 import {setModifiedFlowContent} from '../ducks/flows'
 
+ContentView.propTypes = {
+    // It may seem a bit weird at the first glance:
+    // Every view takes the flow and the message as props, e.g.
+    // <Auto flow={flow} message={flow.request}/>
+    flow: React.PropTypes.object.isRequired,
+    message: React.PropTypes.object.isRequired,
+}
 
-class ContentView extends Component {
-
-    static propTypes = {
-        // It may seem a bit weird at the first glance:
-        // Every view takes the flow and the message as props, e.g.
-        // <Auto flow={flow} message={flow.request}/>
-        flow: React.PropTypes.object.isRequired,
-        message: React.PropTypes.object.isRequired,
-        onContentChange: React.PropTypes.func.isRequired
-    }
-
-    constructor(props, context) {
-        super(props, context)
-        this.state = { displayLarge: false, View: ViewAuto}
-        this.selectView = this.selectView.bind(this)
-    }
-
-    selectView(View) {
-        this.setState({ View })
-    }
+ContentView.isContentTooLarge = msg => msg.contentLength > 1024 * 1024 * (ContentViews.ViewImage.matches(msg) ? 10 : 0.2)
 
-    displayLarge() {
-        this.setState({ displayLarge: true })
-    }
+function ContentView(props) {
+    const { flow, message, contentView, selectView, displayLarge, setDisplayLarge } = props
 
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.message !== this.props.message) {
-            this.setState({ displayLarge: false, View: ViewAuto })
-        }
+    if (message.contentLength === 0) {
+        return <MetaViews.ContentEmpty {...props}/>
     }
 
-    isContentTooLarge(msg) {
-        return msg.contentLength > 1024 * 1024 * (ViewImage.matches(msg) ? 10 : 0.2)
+    if (message.contentLength === null) {
+        return <MetaViews.ContentMissing {...props}/>
     }
 
-    onOpenFile(e) {
-        if (e.target.files.length > 0) {
-            this.props.onContentChange(e.target.files[0])
-        }
-        e.preventDefault()
+    if (!displayLarge && ContentView.isContentTooLarge(message)) {
+        return <MetaViews.ContentTooLarge {...props} onClick={() => setDisplayLarge(true)}/>
     }
 
-    render() {
-        const { flow, message, setModifiedFlowContent, isFlowEditorOpen } = this.props
-        const { displayLarge, View } = this.state
-
-        if (message.contentLength === 0) {
-            return <MetaViews.ContentEmpty {...this.props}/>
-        }
-
-        if (message.contentLength === null) {
-            return <MetaViews.ContentMissing {...this.props}/>
-        }
-
-        if (!displayLarge && this.isContentTooLarge(message)) {
-            return <MetaViews.ContentTooLarge {...this.props} onClick={this.displayLarge}/>
-        }
-
-        return (
-            <div>
-                {isFlowEditorOpen ? (
-                    <ContentLoader flow={flow} message={message}>
-                        <CodeEditor content="" onChange={content =>{setModifiedFlowContent(content)}}/>
-                    </ContentLoader>
-                ): (<div>
-                    {View.textView ? (
-                        <ContentLoader  flow={flow} message={message}>
-                            <this.state.View content="" />
-                        </ContentLoader>
-                    ) : (
-                        <View flow={flow}  message={message} />
-                    )}
-
-
-
-                    <div className="view-options text-center">
-                        <ViewSelector onSelectView={this.selectView} active={View} message={message}/>
-                        &nbsp;
-                        <a  className="btn btn-default btn-xs"
-                            href={MessageUtils.getContentURL(flow, message)}
-                            title="Download the content of the flow."
-                        >
-                            <i className="fa fa-download"/>
-                        </a>
-                        &nbsp;
-                        <a  className="btn btn-default btn-xs"
-                            href="#"
-                            onClick={e => {this.fileInput.click(); e.preventDefault();}}
-                            title="Upload a file to replace the content."
-                        >
-                            <i className="fa fa-upload"/>
-                        </a>
-                        <input
-                            ref={ref => this.fileInput = ref}
-                            className="hidden"
-                            type="file"
-                            onChange={e => this.onOpenFile(e)}
-                        />
-                    </div>
-                </div>)}
+    const View = ContentViews[contentView]
+
+    return (
+        <div>
+            {View.textView ? (
+                <ContentLoader flow={flow} message={message}>
+                    <View content="" />
+                </ContentLoader>
+            ) : (
+                <View flow={flow} message={message} />
+            )}
+            <div className="view-options text-center">
+                <ViewSelector onSelectView={selectView} active={View} message={message}/>
+                &nbsp;
+                <a className="btn btn-default btn-xs" href={MessageUtils.getContentURL(flow, message)}>
+                    <i className="fa fa-download"/>
+                </a>
             </div>
-        )
-    }
+        </div>
+    )
 }
+
 export default connect(
-    state => (
-        {isFlowEditorOpen : state.ui.isFlowEditorOpen}
-    ), {
-        setModifiedFlowContent
-    })(ContentView)
+    state => ({
+        contentView: state.ui.contentView,
+        displayLarge: state.ui.displayLarge,
+    }),
+    {
+        selectView: setContentView,
+        setDisplayLarge,
+    }
+)(ContentView)
diff --git a/web/src/js/components/ContentView/MetaViews.jsx b/web/src/js/components/ContentView/MetaViews.jsx
index 83720a13..2d064b54 100644
--- a/web/src/js/components/ContentView/MetaViews.jsx
+++ b/web/src/js/components/ContentView/MetaViews.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {formatSize} from '../../utils.js'
+import { formatSize } from '../../utils.js'
 
 export function ContentEmpty({ flow, message }) {
     return (
diff --git a/web/src/js/components/ContentView/ViewSelector.jsx b/web/src/js/components/ContentView/ViewSelector.jsx
index df3a5b83..9b151a5b 100644
--- a/web/src/js/components/ContentView/ViewSelector.jsx
+++ b/web/src/js/components/ContentView/ViewSelector.jsx
@@ -14,7 +14,7 @@ export default function ViewSelector({ active, message, onSelectView }) {
             {views.map(View => (
                 <button
                     key={View.name}
-                    onClick={() => onSelectView(View)}
+                    onClick={() => onSelectView(View.name)}
                     className={classnames('btn btn-default', { active: View === active })}>
                     {View === ViewAuto ? (
                         `auto: ${ViewAuto.findView(message).name.toLowerCase().replace('view', '')}`
diff --git a/web/src/js/components/FlowTable/FlowTableHead.jsx b/web/src/js/components/FlowTable/FlowTableHead.jsx
index f65369bd..50242737 100644
--- a/web/src/js/components/FlowTable/FlowTableHead.jsx
+++ b/web/src/js/components/FlowTable/FlowTableHead.jsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux'
 import classnames from 'classnames'
 import columns from './FlowColumns'
 
-import { updateSort } from '../../ducks/views/main'
+import { updateSort } from '../../ducks/flowView'
 
 FlowTableHead.propTypes = {
     updateSort: PropTypes.func.isRequired,
@@ -29,8 +29,8 @@ function FlowTableHead({ sortColumn, sortDesc, updateSort }) {
 
 export default connect(
     state => ({
-        sortDesc: state.flows.views.main.sort.desc,
-        sortColumn: state.flows.views.main.sort.column,
+        sortDesc: state.flowView.sort.desc,
+        sortColumn: state.flowView.sort.column,
     }),
     {
         updateSort
diff --git a/web/src/js/components/FlowView.jsx b/web/src/js/components/FlowView.jsx
index 0ef6e5cd..5ba472a5 100644
--- a/web/src/js/components/FlowView.jsx
+++ b/web/src/js/components/FlowView.jsx
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 import _ from 'lodash'
 
 import Nav from './FlowView/Nav'
@@ -6,47 +7,29 @@ import { Request, Response, ErrorView as Error } from './FlowView/Messages'
 import Details from './FlowView/Details'
 import Prompt from './Prompt'
 
+import { setPrompt, selectTab } from '../ducks/ui'
+
 export default class FlowView extends Component {
 
     static allTabs = { Request, Response, Error, Details }
 
     constructor(props, context) {
         super(props, context)
-
-        this.state = { prompt: false }
-
-        this.closePrompt = this.closePrompt.bind(this)
-        this.selectTab = this.selectTab.bind(this)
-    }
-
-    getTabs() {
-        return ['request', 'response', 'error'].filter(k => this.props.flow[k]).concat(['details'])
-    }
-
-    nextTab(increment) {
-        const tabs = this.getTabs()
-        // JS modulo operator doesn't correct negative numbers, make sure that we are positive.
-        this.selectTab(tabs[(tabs.indexOf(this.props.tab) + increment + tabs.length) % tabs.length])
+        this.onPromptFinish = this.onPromptFinish.bind(this)
     }
 
-    selectTab(panel) {
-        this.props.updateLocation(`/flows/${this.props.flow.id}/${panel}`)
-    }
-
-    closePrompt(edit) {
-        this.setState({ prompt: false })
+    onPromptFinish(edit) {
+        this.props.setPrompt(false)
         if (edit && this.tabComponent) {
             this.tabComponent.edit(edit)
         }
     }
 
-    promptEdit() {
-        let options
-
+    getPromptOptions() {
         switch (this.props.tab) {
 
             case 'request':
-                options = [
+                return [
                     'method',
                     'url',
                     { text: 'http version', key: 'v' },
@@ -55,7 +38,7 @@ export default class FlowView extends Component {
                 break
 
             case 'response':
-                options = [
+                return [
                     { text: 'http version', key: 'v' },
                     'code',
                     'message',
@@ -69,13 +52,11 @@ export default class FlowView extends Component {
             default:
                 throw 'Unknown tab for edit: ' + this.props.tab
         }
-
-        this.setState({ prompt: { options, done: this.closePrompt } })
     }
 
     render() {
-        const tabs = this.getTabs()
         let { flow, tab: active, updateFlow } = this.props
+        const tabs = ['request', 'response', 'error'].filter(k => flow[k]).concat(['details'])
 
         if (tabs.indexOf(active) < 0) {
             if (active === 'response' && flow.error) {
@@ -95,13 +76,23 @@ export default class FlowView extends Component {
                     flow={flow}
                     tabs={tabs}
                     active={active}
-                    onSelectTab={this.selectTab}
+                    onSelectTab={this.props.selectTab}
                 />
                 <Tab ref={ tab => this.tabComponent = tab } flow={flow} updateFlow={updateFlow} />
-                {this.state.prompt && (
-                    <Prompt {...this.state.prompt}/>
+                {this.props.promptOpen && (
+                    <Prompt options={this.getPromptOptions()} done={this.onPromptFinish} />
                 )}
             </div>
         )
     }
 }
+
+export default connect(
+    state => ({
+        promptOpen: state.ui.promptOpen,
+    }),
+    {
+        setPrompt,
+        selectTab,
+    }
+)(FlowView)
diff --git a/web/src/js/components/Header.jsx b/web/src/js/components/Header.jsx
index b6ef1cc7..5de885ae 100644
--- a/web/src/js/components/Header.jsx
+++ b/web/src/js/components/Header.jsx
@@ -17,10 +17,10 @@ class Header extends Component {
     }
 
     render() {
-        const { updateLocation, query, selectedFlow, activeMenu} = this.props
+        const { query, selectedFlowId, activeMenu} = this.props
 
         let entries = [...Header.entries]
-        if(selectedFlow)
+        if(selectedFlowId)
             entries.push(FlowMenu)
 
         const Active = _.find(entries, (e) => e.title == activeMenu)
@@ -41,7 +41,6 @@ class Header extends Component {
                 <div className="menu">
                     <Active
                         ref="active"
-                        updateLocation={updateLocation}
                         query={query}
                     />
                 </div>
@@ -52,7 +51,7 @@ class Header extends Component {
 
 export default connect(
     state => ({
-        selectedFlow: state.flows.views.main.selected[0],
+        selectedFlowId: state.flows.selected[0],
         activeMenu: state.ui.activeMenu,
     }),
     {
diff --git a/web/src/js/components/Header/FilterInput.jsx b/web/src/js/components/Header/FilterInput.jsx
index 5b49b788..e421f1a4 100644
--- a/web/src/js/components/Header/FilterInput.jsx
+++ b/web/src/js/components/Header/FilterInput.jsx
@@ -7,10 +7,6 @@ import FilterDocs from './FilterDocs'
 
 export default class FilterInput extends Component {
 
-    static contextTypes = {
-        returnFocus: React.PropTypes.func,
-    }
-
     constructor(props, context) {
         super(props, context)
 
@@ -91,7 +87,6 @@ export default class FilterInput extends Component {
 
     blur() {
         ReactDOM.findDOMNode(this.refs.input).blur()
-        this.context.returnFocus()
     }
 
     select() {
diff --git a/web/src/js/components/Header/FlowMenu.jsx b/web/src/js/components/Header/FlowMenu.jsx
index 8d13dd6a..bdd30d5e 100644
--- a/web/src/js/components/Header/FlowMenu.jsx
+++ b/web/src/js/components/Header/FlowMenu.jsx
@@ -15,11 +15,11 @@ function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, rev
     return (
         <div>
             <div className="menu-row">
-                <Button disabled={!flow.intercepted} title="[a]ccept intercepted flow" text="Accept" icon="fa-play" onClick={() => acceptFlow(flow)} />
+                <Button disabled={!flow || !flow.intercepted} title="[a]ccept intercepted flow" text="Accept" icon="fa-play" onClick={() => acceptFlow(flow)} />
                 <Button title="[r]eplay flow" text="Replay" icon="fa-repeat" onClick={() => replayFlow(flow)} />
                 <Button title="[D]uplicate flow" text="Duplicate" icon="fa-copy" onClick={() => duplicateFlow(flow)} />
                 <Button title="[d]elete flow" text="Delete" icon="fa-trash" onClick={() => removeFlow(flow)}/>
-                <Button disabled={!flow.modified} title="revert changes to flow [V]" text="Revert" icon="fa-history" onClick={() => revertFlow(flow)} />
+                <Button disabled={!flow || !flow.modified} title="revert changes to flow [V]" text="Revert" icon="fa-history" onClick={() => revertFlow(flow)} />
                 <Button title="download" text="Download" icon="fa-download" onClick={() => window.location = MessageUtils.getContentURL(flow, flow.response)}/>
             </div>
             <div className="clearfix"/>
@@ -29,7 +29,7 @@ function FlowMenu({ flow, acceptFlow, replayFlow, duplicateFlow, removeFlow, rev
 
 export default connect(
     state => ({
-        flow: state.flows.list.byId[state.flows.views.main.selected[0]],
+        flow: state.flows.byId[state.flows.selected[0]],
     }),
     {
         acceptFlow: flowsActions.accept,
diff --git a/web/src/js/components/Header/MainMenu.jsx b/web/src/js/components/Header/MainMenu.jsx
index 48fea5a2..27a4be60 100644
--- a/web/src/js/components/Header/MainMenu.jsx
+++ b/web/src/js/components/Header/MainMenu.jsx
@@ -3,6 +3,7 @@ import { connect } from 'react-redux'
 import FilterInput from './FilterInput'
 import { Query } from '../../actions.js'
 import { update as updateSettings } from '../../ducks/settings'
+import { updateQuery, setSelectedInput } from '../../ducks/ui'
 
 class MainMenu extends Component {
 
@@ -12,8 +13,8 @@ class MainMenu extends Component {
     static propTypes = {
         query: PropTypes.object.isRequired,
         settings: PropTypes.object.isRequired,
-        updateLocation: PropTypes.func.isRequired,
         updateSettings: PropTypes.func.isRequired,
+        updateQuery: PropTypes.func.isRequired,
     }
 
     constructor(props, context) {
@@ -22,12 +23,19 @@ class MainMenu extends Component {
         this.onHighlightChange = this.onHighlightChange.bind(this)
     }
 
+    componentWillReceiveProps(nextProps) {
+        if(this.refs[nextProps.selectedInput]) {
+            this.refs[nextProps.selectedInput].select()
+        }
+        this.props.setSelectedInput(undefined)
+    }
+
     onSearchChange(val) {
-        this.props.updateLocation(undefined, { [Query.SEARCH]: val })
+        this.props.updateQuery({ [Query.SEARCH]: val })
     }
 
     onHighlightChange(val) {
-        this.props.updateLocation(undefined, { [Query.HIGHLIGHT]: val })
+        this.props.updateQuery({ [Query.HIGHLIGHT]: val })
     }
 
     render() {
@@ -70,9 +78,12 @@ class MainMenu extends Component {
 export default connect(
     state => ({
         settings: state.settings.settings,
+        selectedInput: state.ui.selectedInput
     }),
     {
         updateSettings,
+        updateQuery,
+        setSelectedInput
     },
     null,
     {
diff --git a/web/src/js/components/MainView.jsx b/web/src/js/components/MainView.jsx
index 93f7b299..b0bbf70e 100644
--- a/web/src/js/components/MainView.jsx
+++ b/web/src/js/components/MainView.jsx
@@ -1,12 +1,11 @@
 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { Query } from '../actions.js'
-import { Key } from '../utils.js'
 import Splitter from './common/Splitter'
 import FlowTable from './FlowTable'
 import FlowView from './FlowView'
 import * as flowsActions from '../ducks/flows'
-import { select as selectFlow, updateFilter, updateHighlight } from '../ducks/views/main'
+import { updateFilter, updateHighlight } from '../ducks/flowView'
 
 class MainView extends Component {
 
@@ -20,10 +19,6 @@ class MainView extends Component {
      * @todo replace with mapStateToProps
      */
     componentWillReceiveProps(nextProps) {
-        // Update redux store with route changes
-        if (nextProps.routeParams.flowId !== (nextProps.selectedFlow || {}).id) {
-            this.props.selectFlow(nextProps.routeParams.flowId)
-        }
         if (nextProps.location.query[Query.SEARCH] !== nextProps.filter) {
             this.props.updateFilter(nextProps.location.query[Query.SEARCH], false)
         }
@@ -32,127 +27,6 @@ class MainView extends Component {
         }
     }
 
-    /**
-     * @todo move to actions
-     */
-    selectFlow(flow) {
-        if (flow) {
-            this.props.updateLocation(`/flows/${flow.id}/${this.props.routeParams.detailTab || 'request'}`)
-        } else {
-            this.props.updateLocation('/flows')
-        }
-    }
-
-    /**
-     * @todo move to actions
-     */
-    selectFlowRelative(shift) {
-        const { flows, routeParams, selectedFlow } = this.props
-        let index = 0
-        if (!routeParams.flowId) {
-            if (shift < 0) {
-                index = flows.length - 1
-            }
-        } else {
-            index = Math.min(
-                Math.max(0, flows.indexOf(selectedFlow) + shift),
-                flows.length - 1
-            )
-        }
-        this.selectFlow(flows[index])
-    }
-
-    /**
-     * @todo move to actions
-     */
-    onMainKeyDown(e) {
-        var flow = this.props.selectedFlow
-        if (e.ctrlKey) {
-            return
-        }
-        switch (e.keyCode) {
-            case Key.K:
-            case Key.UP:
-                this.selectFlowRelative(-1)
-                break
-            case Key.J:
-            case Key.DOWN:
-                this.selectFlowRelative(+1)
-                break
-            case Key.SPACE:
-            case Key.PAGE_DOWN:
-                this.selectFlowRelative(+10)
-                break
-            case Key.PAGE_UP:
-                this.selectFlowRelative(-10)
-                break
-            case Key.END:
-                this.selectFlowRelative(+1e10)
-                break
-            case Key.HOME:
-                this.selectFlowRelative(-1e10)
-                break
-            case Key.ESC:
-                this.selectFlow(null)
-                break
-            case Key.H:
-            case Key.LEFT:
-                if (this.refs.flowDetails) {
-                    this.refs.flowDetails.nextTab(-1)
-                }
-                break
-            case Key.L:
-            case Key.TAB:
-            case Key.RIGHT:
-                if (this.refs.flowDetails) {
-                    this.refs.flowDetails.nextTab(+1)
-                }
-                break
-            case Key.C:
-                if (e.shiftKey) {
-                    this.props.clearFlows()
-                }
-                break
-            case Key.D:
-                if (flow) {
-                    if (e.shiftKey) {
-                        this.props.duplicateFlow(flow)
-                    } else {
-                        this.props.removeFlow(flow)
-                    }
-                }
-                break
-            case Key.A:
-                if (e.shiftKey) {
-                    this.props.acceptAllFlows()
-                } else if (flow && flow.intercepted) {
-                    this.props.acceptFlow(flow)
-                }
-                break
-            case Key.R:
-                if (!e.shiftKey && flow) {
-                    this.props.replayFlow(flow)
-                }
-                break
-            case Key.V:
-                if (e.shiftKey && flow && flow.modified) {
-                    this.props.revertFlow(flow)
-                }
-                break
-            case Key.E:
-                if (this.refs.flowDetails) {
-                    this.refs.flowDetails.promptEdit()
-                }
-                break
-            case Key.SHIFT:
-                break
-            default:
-                console.debug('keydown', e.keyCode)
-                return
-        }
-        e.preventDefault()
-    }
-
     render() {
         const { flows, selectedFlow, highlight } = this.props
         return (
@@ -162,7 +36,7 @@ class MainView extends Component {
                     flows={flows}
                     selected={selectedFlow}
                     highlight={highlight}
-                    onSelect={flow => this.selectFlow(flow)}
+                    onSelect={flow => this.props.selectFlow(flow.id)}
                 />
                 {selectedFlow && [
                     <Splitter key="splitter"/>,
@@ -171,7 +45,6 @@ class MainView extends Component {
                         ref="flowDetails"
                         tab={this.props.routeParams.detailTab}
                         query={this.props.query}
-                        updateLocation={this.props.updateLocation}
                         updateFlow={data => this.props.updateFlow(selectedFlow, data)}
                         flow={selectedFlow}
                     />
@@ -183,24 +56,19 @@ class MainView extends Component {
 
 export default connect(
     state => ({
-        flows: state.flows.views.main.view.data,
-        filter: state.flows.views.main.filter,
-        highlight: state.flows.views.main.highlight,
-        selectedFlow: state.flows.list.byId[state.flows.views.main.selected[0]]
+        flows: state.flowView.data,
+        filter: state.flowView.filter,
+        highlight: state.flowView.highlight,
+        selectedFlow: state.flows.byId[state.flows.selected[0]]
     }),
     {
-        selectFlow,
+        selectFlow: flowsActions.select,
         updateFilter,
         updateHighlight,
         updateFlow: flowsActions.update,
-        clearFlows: flowsActions.clear,
-        duplicateFlow: flowsActions.duplicate,
-        removeFlow: flowsActions.remove,
-        acceptAllFlows: flowsActions.acceptAll,
-        acceptFlow: flowsActions.accept,
-        replayFlow: flowsActions.replay,
-        revertFlow: flowsActions.revert,
     },
     undefined,
-    { withRef: true }
+    {
+        withRef: true
+    }
 )(MainView)
diff --git a/web/src/js/components/Prompt.jsx b/web/src/js/components/Prompt.jsx
index e6564896..1c20b1a9 100755
--- a/web/src/js/components/Prompt.jsx
+++ b/web/src/js/components/Prompt.jsx
@@ -4,23 +4,15 @@ import _ from 'lodash'
 
 import {Key} from '../utils.js'
 
-Prompt.contextTypes = {
-    returnFocus: PropTypes.func
-}
-
 Prompt.propTypes = {
     options: PropTypes.array.isRequired,
     done: PropTypes.func.isRequired,
     prompt: PropTypes.string,
 }
 
-export default function Prompt({ prompt, done, options }, context) {
+export default function Prompt({ prompt, done, options }) {
     const opts = []
 
-    function keyTaken(k) {
-        return _.map(opts, 'key').includes(k)
-    }
-
     for (let i = 0; i < options.length; i++) {
         let opt = options[i]
         if (_.isString(opt)) {
@@ -35,7 +27,11 @@ export default function Prompt({ prompt, done, options }, context) {
         }
         opts.push(opt)
     }
-    
+
+    function keyTaken(k) {
+        return _.map(opts, 'key').includes(k)
+    }
+
     function onKeyDown(event) {
         event.stopPropagation()
         event.preventDefault()
@@ -44,7 +40,6 @@ export default function Prompt({ prompt, done, options }, context) {
             return
         }
         done(key.key || false)
-        context.returnFocus()
     }
 
     return (
diff --git a/web/src/js/components/ProxyApp.jsx b/web/src/js/components/ProxyApp.jsx
index 1ac979bc..2962fc2b 100644
--- a/web/src/js/components/ProxyApp.jsx
+++ b/web/src/js/components/ProxyApp.jsx
@@ -4,6 +4,7 @@ import _ from 'lodash'
 import { connect } from 'react-redux'
 
 import { init as appInit, destruct as appDestruct } from '../ducks/app'
+import { onKeyDown } from '../ducks/ui'
 import Header from './Header'
 import EventLog from './EventLog'
 import Footer from './Footer'
@@ -11,124 +12,39 @@ import { Key } from '../utils.js'
 
 class ProxyAppMain extends Component {
 
-    static childContextTypes = {
-        returnFocus: PropTypes.func.isRequired,
-    }
-
     static contextTypes = {
         router: PropTypes.object.isRequired,
     }
 
-    constructor(props, context) {
-        super(props, context)
-
-        this.focus = this.focus.bind(this)
-        this.onKeyDown = this.onKeyDown.bind(this)
-        this.updateLocation = this.updateLocation.bind(this)
-    }
-
     componentWillMount() {
-        this.props.appInit()
-    }
-
-    /**
-     * @todo listen to window's key events
-     */
-    componentDidMount() {
-        this.focus()
+        this.props.appInit(this.context.router)
+        window.addEventListener('keydown', this.props.onKeyDown);
     }
 
     componentWillUnmount() {
-        this.props.appDestruct()
-    }
-
-    /**
-     * @todo use props
-     */
-    getChildContext() {
-        return { returnFocus: this.focus }
-    }
-
-    /**
-     * @todo remove it
-     */
-    focus() {
-        document.activeElement.blur()
-        window.getSelection().removeAllRanges()
-        ReactDOM.findDOMNode(this).focus()
-    }
-
-    /**
-     * @todo move to actions
-     * @todo bind on window
-     */
-    onKeyDown(e) {
-        let name = null
-
-        switch (e.keyCode) {
-            case Key.I:
-                name = 'intercept'
-                break
-            case Key.L:
-                name = 'search'
-                break
-            case Key.H:
-                name = 'highlight'
-                break
-            default:
-                let main = this.refs.view
-                if (this.refs.view.refs.wrappedInstance) {
-                    main = this.refs.view.refs.wrappedInstance
-                }
-                if (main.onMainKeyDown) {
-                    main.onMainKeyDown(e)
-                }
-                return // don't prevent default then
-        }
-
-        if (name) {
-            const headerComponent = this.refs.header.refs.wrappedInstance || this.refs.header
-            headerComponent.setState({ active: Header.entries[0] }, () => {
-                const active = headerComponent.refs.active.refs.wrappedInstance || headerComponent.refs.active
-                active.refs[name].select()
-            })
-        }
-
-        e.preventDefault()
+        this.props.appDestruct(this.context.router)
+        window.removeEventListener('keydown', this.props.onKeyDown);
     }
 
-    /**
-     * @todo move to actions
-     */
-    updateLocation(pathname, queryUpdate) {
-        if (pathname === undefined) {
-            pathname = this.props.location.pathname
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.query === this.props.query && nextProps.selectedFlowId === this.props.selectedFlowId && nextProps.panel === this.props.panel) {
+            return
         }
-        const query = this.props.location.query
-        for (const key of Object.keys(queryUpdate || {})) {
-            query[key] = queryUpdate[key] || undefined
+        if (nextProps.selectedFlowId) {
+            this.context.router.replace({ pathname: `/flows/${nextProps.selectedFlowId}/${nextProps.panel}`, query: nextProps.query })
+        } else {
+            this.context.router.replace({ pathname: '/flows', query: nextProps.query })
         }
-        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()
+        const { showEventLog, location, children, query } = this.props
         return (
-            <div id="container" tabIndex="0" onKeyDown={this.onKeyDown}>
-                <Header ref="header" updateLocation={this.updateLocation} query={query} />
+            <div id="container" tabIndex="0">
+                <Header ref="header" query={query} />
                 {React.cloneElement(
                     children,
-                    { ref: 'view', location, query, updateLocation: this.updateLocation }
+                    { ref: 'view', location, query }
                 )}
                 {showEventLog && (
                     <EventLog key="eventlog"/>
@@ -142,10 +58,13 @@ class ProxyAppMain extends Component {
 export default connect(
     state => ({
         showEventLog: state.eventLog.visible,
-        settings: state.settings.settings,
+        query: state.ui.query,
+        panel: state.ui.panel,
+        selectedFlowId: state.flows.selected[0]
     }),
     {
         appInit,
         appDestruct,
+        onKeyDown
     }
 )(ProxyAppMain)
diff --git a/web/src/js/components/ValueEditor.jsx b/web/src/js/components/ValueEditor.jsx
index 0316924f..5f1bf2dc 100755
--- a/web/src/js/components/ValueEditor.jsx
+++ b/web/src/js/components/ValueEditor.jsx
@@ -4,27 +4,17 @@ import ValidateEditor from './ValueEditor/ValidateEditor'
 
 export default class ValueEditor extends Component {
 
-    static contextTypes = {
-        returnFocus: PropTypes.func,
-    }
-
     static propTypes = {
         content: PropTypes.string.isRequired,
         onDone: PropTypes.func.isRequired,
         inline: PropTypes.bool,
     }
 
-    constructor(props) {
-        super(props)
-        this.focus = this.focus.bind(this)
-    }
-
     render() {
-        var tag = this.props.inline ? "span" : 'div'
+        var tag = this.props.inline ? 'span' : 'div'
         return (
             <ValidateEditor
                 {...this.props}
-                onStop={() => this.context.returnFocus()}
                 tag={tag}
             />
         )
diff --git a/web/src/js/components/ValueEditor/EditorBase.jsx b/web/src/js/components/ValueEditor/EditorBase.jsx
index e737d2af..aa09dad5 100755
--- a/web/src/js/components/ValueEditor/EditorBase.jsx
+++ b/web/src/js/components/ValueEditor/EditorBase.jsx
@@ -54,7 +54,6 @@ export default class EditorBase extends Component {
     render() {
         return (
             <this.props.tag
-                {...this.props}
                 tabIndex="0"
                 className={`inline-input ${this.props.className}`}
                 contentEditable={this.state.editable || undefined}
diff --git a/web/src/js/ducks/eventLog.js b/web/src/js/ducks/eventLog.js
index 52eec1cd..f72d7bd6 100644
--- a/web/src/js/ducks/eventLog.js
+++ b/web/src/js/ducks/eventLog.js
@@ -35,7 +35,7 @@ export default function reduce(state = defaultState, action) {
             return {
                 ...state,
                 filters,
-                view: reduceView(state.view, viewActions.updateFilter(state.list, log => filters[log.level])),
+                view: reduceView(state.view, viewActions.updateFilter(state.list.data, log => filters[log.level])),
             }
 
         case ADD:
@@ -55,7 +55,7 @@ export default function reduce(state = defaultState, action) {
             return {
                 ...state,
                 list: reduceList(state.list, listActions.receive(action.list)),
-                view: reduceView(state.view, viewActions.receive(list, log => state.filters[log.level])),
+                view: reduceView(state.view, viewActions.receive(action.list, log => state.filters[log.level])),
             }
 
         default:
diff --git a/web/src/js/ducks/views/main.js b/web/src/js/ducks/flowView.js
index f4968de4..dd5bea41 100755..100644
--- a/web/src/js/ducks/views/main.js
+++ b/web/src/js/ducks/flowView.js
@@ -1,12 +1,12 @@
-import Filt from '../../filt/filt'
-import { RequestUtils } from '../../flow/utils'
-import reduceView, * as viewActions from '../utils/view'
-import * as viewsActions from '../views'
+import reduceView, * as viewActions from './utils/view'
+import * as flowActions from './flows'
+import Filt from '../filt/filt'
+import { RequestUtils } from '../flow/utils'
+
+export const UPDATE_FILTER = 'FLOWVIEW_UPDATE_FILTER'
+export const UPDATE_SORT = 'FLOWVIEW_UPDATE_SORT'
+export const UPDATE_HIGHLIGHT = 'FLOWVIEW_UPDATE_HIGHLIGHT'
 
-export const UPDATE_FILTER = 'FLOW_VIEWS_MAIN_UPDATE_FILTER'
-export const UPDATE_SORT = 'FLOW_VIEWS_MAIN_UPDATE_SORT'
-export const UPDATE_HIGHLIGHT = 'FLOW_VIEWS_MAIN_UPDATE_HIGHLIGHT'
-export const SELECT = 'FLOW_VIEWS_MAIN_SELECT'
 
 const sortKeyFuns = {
 
@@ -29,12 +29,37 @@ const sortKeyFuns = {
     },
 }
 
+export function makeFilter(filter) {
+    if (!filter) {
+        return
+    }
+    return Filt.parse(filter)
+}
+
+export function makeSort({ column, desc }) {
+    const sortKeyFun = sortKeyFuns[column]
+    if (!sortKeyFun) {
+        return
+    }
+    return (a, b) => {
+        const ka = sortKeyFun(a)
+        const kb = sortKeyFun(b)
+        if (ka > kb) {
+            return desc ? -1 : 1
+        }
+        if (ka < kb) {
+            return desc ? 1 : -1
+        }
+        return 0
+    }
+}
+
+
 const defaultState = {
     highlight: null,
-    selected: [],
     filter: null,
     sort: { column: null, desc: false },
-    view: undefined,
+    ...reduceView(undefined, {})
 }
 
 export default function reduce(state = defaultState, action) {
@@ -46,44 +71,35 @@ export default function reduce(state = defaultState, action) {
                 highlight: action.highlight,
             }
 
-        case SELECT:
-            return {
-                ...state,
-                selected: [action.id]
-            }
-
         case UPDATE_FILTER:
             return {
-                ...state,
-                filter: action.filter,
-                view: reduceView(
-                    state.view,
+                ...reduceView(
+                    state,
                     viewActions.updateFilter(
-                        action.list,
+                        action.flows,
                         makeFilter(action.filter),
                         makeSort(state.sort)
                     )
                 ),
+                filter: action.filter,
             }
 
         case UPDATE_SORT:
             const sort = { column: action.column, desc: action.desc }
             return {
-                ...state,
-                sort,
-                view: reduceView(
-                    state.view,
+                ...reduceView(
+                    state,
                     viewActions.updateSort(
                         makeSort(sort)
                     )
                 ),
+                sort,
             }
 
-        case viewsActions.ADD:
+        case flowActions.ADD:
             return {
-                ...state,
-                view: reduceView(
-                    state.view,
+                ...reduceView(
+                    state,
                     viewActions.add(
                         action.item,
                         makeFilter(state.filter),
@@ -92,13 +108,11 @@ export default function reduce(state = defaultState, action) {
                 ),
             }
 
-        case viewsActions.UPDATE:
+        case flowActions.UPDATE:
             return {
-                ...state,
-                view: reduceView(
-                    state.view,
+                ...reduceView(
+                    state,
                     viewActions.update(
-                        action.id,
                         action.item,
                         makeFilter(state.filter),
                         makeSort(state.sort)
@@ -106,22 +120,20 @@ export default function reduce(state = defaultState, action) {
                 ),
             }
 
-        case viewsActions.REMOVE:
+        case flowActions.REMOVE:
             return {
-                ...state,
-                view: reduceView(
-                    state.view,
+                ...reduceView(
+                    state,
                     viewActions.remove(
                         action.id
                     )
                 ),
             }
 
-        case viewsActions.RECEIVE:
+        case flowActions.RECEIVE:
             return {
-                ...state,
-                view: reduceView(
-                    state.view,
+                ...reduceView(
+                    state,
                     viewActions.receive(
                         action.list,
                         makeFilter(state.filter),
@@ -132,8 +144,7 @@ export default function reduce(state = defaultState, action) {
 
         default:
             return {
-                ...state,
-                view: reduceView(state.view, action)
+                ...reduceView(state, action),
             }
     }
 }
@@ -143,7 +154,7 @@ export default function reduce(state = defaultState, action) {
  */
 export function updateFilter(filter) {
     return (dispatch, getState) => {
-        dispatch({ type: UPDATE_FILTER, filter, list: getState().flows.list })
+        dispatch({ type: UPDATE_FILTER, filter, flows: getState().flows.data })
     }
 }
 
@@ -161,42 +172,24 @@ export function updateSort(column, desc) {
     return { type: UPDATE_SORT, column, desc }
 }
 
+
 /**
  * @public
  */
-export function select(id) {
+export function selectRelative(shift) {
     return (dispatch, getState) => {
-        dispatch({ type: SELECT, currentSelection: getState().flows.views.main.selected[0], id })
-    }
-}
-
-/**
- * @private
- */
-function makeFilter(filter) {
-    if (!filter) {
-        return
-    }
-    return Filt.parse(filter)
-}
-
-/**
- * @private
- */
-function makeSort({ column, desc }) {
-    const sortKeyFun = sortKeyFuns[column]
-    if (!sortKeyFun) {
-        return
-    }
-    return (a, b) => {
-        const ka = sortKeyFun(a)
-        const kb = sortKeyFun(b)
-        if (ka > kb) {
-            return desc ? -1 : 1
+        let currentSelectionIndex = getState().flowView.indexOf[getState().flows.selected[0]]
+        let minIndex = 0
+        let maxIndex = getState().flowView.data.length - 1
+        let newIndex
+        if (currentSelectionIndex === undefined) {
+            newIndex = (shift < 0) ? minIndex : maxIndex
+        } else {
+            newIndex = currentSelectionIndex + shift
+            newIndex = Math.max(newIndex, minIndex)
+            newIndex = Math.min(newIndex, maxIndex)
         }
-        if (ka < kb) {
-            return desc ? 1 : -1
-        }
-        return 0
+        let flow = getState().flowView.data[newIndex]
+        dispatch(flowActions.select(flow ? flow.id : undefined))
     }
 }
diff --git a/web/src/js/ducks/flows.js b/web/src/js/ducks/flows.js
index eea91924..ffb7ac87 100644
--- a/web/src/js/ducks/flows.js
+++ b/web/src/js/ducks/flows.js
@@ -1,25 +1,25 @@
 import { fetchApi } from '../utils'
 import reduceList, * as listActions from './utils/list'
-import reduceViews, * as viewsActions from './views'
+
 import * as msgQueueActions from './msgQueue'
 import * as websocketActions from './websocket'
 
 export const MSG_TYPE = 'UPDATE_FLOWS'
 export const DATA_URL = '/flows'
 
-export const ADD            = 'FLOWS_ADD'
-export const UPDATE         = 'FLOWS_UPDATE'
-export const REMOVE         = 'FLOWS_REMOVE'
-export const RECEIVE        = 'FLOWS_RECEIVE'
+export const ADD = 'FLOWS_ADD'
+export const UPDATE = 'FLOWS_UPDATE'
+export const REMOVE = 'FLOWS_REMOVE'
+export const RECEIVE = 'FLOWS_RECEIVE'
 export const REQUEST_ACTION = 'FLOWS_REQUEST_ACTION'
-export const UNKNOWN_CMD    = 'FLOWS_UNKNOWN_CMD'
-export const FETCH_ERROR    = 'FLOWS_FETCH_ERROR'
-export const SET_MODIFIED_FLOW_CONTENT = "FLOWS_SET_MODIFIED_FLOW"
+export const UNKNOWN_CMD = 'FLOWS_UNKNOWN_CMD'
+export const FETCH_ERROR = 'FLOWS_FETCH_ERROR'
+export const SELECT = 'FLOWS_SELECT'
+
 
 const defaultState = {
-    list: undefined,
-    views: undefined,
-    modifiedFlow: {headers: "", content: ""}
+    selected: [],
+    ...reduceList(undefined, {}),
 }
 
 export default function reduce(state = defaultState, action) {
@@ -28,43 +28,37 @@ export default function reduce(state = defaultState, action) {
         case ADD:
             return {
                 ...state,
-                list: reduceList(state.list, listActions.add(action.item)),
-                views: reduceViews(state.views, viewsActions.add(action.item)),
+                ...reduceList(state, listActions.add(action.item)),
             }
 
         case UPDATE:
             return {
                 ...state,
-                list: reduceList(state.list, listActions.update(action.id, action.item)),
-                views: reduceViews(state.views, viewsActions.update(action.id, action.item)),
+                ...reduceList(state, listActions.update(action.item)),
             }
 
         case REMOVE:
             return {
                 ...state,
-                list: reduceList(state.list, listActions.remove(action.id)),
-                views: reduceViews(state.views, viewsActions.remove(action.id)),
+                ...reduceList(state, listActions.remove(action.id)),
             }
 
         case RECEIVE:
-            const list = reduceList(state.list, listActions.receive(action.list))
             return {
                 ...state,
-                list,
-                views: reduceViews(state.views, viewsActions.receive(list)),
+                ...reduceList(state, listActions.receive(action.list)),
             }
-        case SET_MODIFIED_FLOW_CONTENT:
-            return{
+
+        case SELECT:
+            return {
                 ...state,
-                   modifiedFlow: {...state.modifiedFlow, content: action.content}
+                selected: action.flowIds
             }
 
-
         default:
             return {
                 ...state,
-                list: reduceList(state.list, action),
-                views: reduceViews(state.views, action),
+                ...reduceList(state, action),
             }
     }
 }
@@ -72,17 +66,6 @@ export default function reduce(state = defaultState, action) {
 /**
  * @public
  */
-export function setModifiedFlowContent(content) {
-    return {
-        type: SET_MODIFIED_FLOW_CONTENT,
-        content
-    }
-}
-
-
-/**
- * @public
- */
 export function accept(flow) {
     fetchApi(`/flows/${flow.id}/accept`, { method: 'POST' })
     return { type: REQUEST_ACTION }
@@ -172,6 +155,15 @@ export function upload(file) {
     return { type: REQUEST_ACTION }
 }
 
+
+export function select(id) {
+    return {
+        type: SELECT,
+        flowIds: id ? [id] : []
+    }
+}
+
+
 /**
  * This action creater takes all WebSocket events
  *
@@ -181,16 +173,16 @@ export function handleWsMsg(msg) {
     switch (msg.cmd) {
 
         case websocketActions.CMD_ADD:
-            return addItem(msg.data)
+            return addFlow(msg.data)
 
         case websocketActions.CMD_UPDATE:
-            return updateItem(msg.data.id, msg.data)
+            return updateFlow(msg.data)
 
         case websocketActions.CMD_REMOVE:
-            return removeItem(msg.data.id)
+            return removeFlow(msg.data.id)
 
         case websocketActions.CMD_RESET:
-            return fetchData()
+            return fetchFlows()
 
         default:
             return { type: UNKNOWN_CMD, msg }
@@ -200,7 +192,7 @@ export function handleWsMsg(msg) {
 /**
  * @public websocket
  */
-export function fetchData() {
+export function fetchFlows() {
     return msgQueueActions.fetchData(MSG_TYPE)
 }
 
@@ -214,20 +206,20 @@ export function receiveData(list) {
 /**
  * @private
  */
-export function addItem(item) {
+export function addFlow(item) {
     return { type: ADD, item }
 }
 
 /**
  * @private
  */
-export function updateItem(id, item) {
-    return { type: UPDATE, id, item }
+export function updateFlow(item) {
+    return { type: UPDATE, item }
 }
 
 /**
  * @private
  */
-export function removeItem(id) {
+export function removeFlow(id) {
     return { type: REMOVE, id }
 }
diff --git a/web/src/js/ducks/index.js b/web/src/js/ducks/index.js
index c2488d70..16193530 100644
--- a/web/src/js/ducks/index.js
+++ b/web/src/js/ducks/index.js
@@ -2,6 +2,7 @@ import { combineReducers } from 'redux'
 import eventLog from './eventLog'
 import websocket from './websocket'
 import flows from './flows'
+import flowView from './flowView'
 import settings from './settings'
 import ui from './ui'
 import msgQueue from './msgQueue'
@@ -10,6 +11,7 @@ export default combineReducers({
     eventLog,
     websocket,
     flows,
+    flowView,
     settings,
     ui,
     msgQueue,
diff --git a/web/src/js/ducks/ui.js b/web/src/js/ducks/ui.js
index f8234fdb..f745f0af 100644
--- a/web/src/js/ducks/ui.js
+++ b/web/src/js/ducks/ui.js
@@ -1,42 +1,259 @@
-import {SELECT} from "./views/main"
-export const SET_ACTIVE_MENU = 'SET_ACTIVE_MENU';
+import { selectRelative as selectFlowRelative } from './flowView'
+import { Key } from '../utils.js'
+import * as flowsActions from './flows'
 
+export const SET_ACTIVE_MENU = 'UI_SET_ACTIVE_MENU'
+export const SET_CONTENT_VIEW = 'UI_SET_CONTENT_VIEW'
+export const SET_SELECTED_INPUT = 'UI_SET_SELECTED_INPUT'
+export const UPDATE_QUERY = 'UI_UPDATE_QUERY'
+export const SELECT_TAB = 'UI_SELECT_TAB'
+export const SET_PROMPT = 'UI_SET_PROMPT'
+export const SET_DISPLAY_LARGE = 'UI_SET_DISPLAY_LARGE'
 
 const defaultState = {
     activeMenu: 'Start',
+    isFlowSelected: false,
+    selectedInput: null,
+    displayLarge: false,
+    promptOpen: false,
+    contentView: 'ViewAuto',
+    query: {},
+    panel: 'request'
 }
+
 export default function reducer(state = defaultState, action) {
     switch (action.type) {
+
         case SET_ACTIVE_MENU:
             return {
                 ...state,
-                activeMenu: action.activeMenu
+                activeMenu: action.activeMenu,
             }
-        case SELECT:
-            let isNewSelect = (action.flowId && !action.currentSelection)
-            let isDeselect = (!action.flowId && action.currentSelection)
-            if(isNewSelect) {
+
+        case flowsActions.SELECT:
+            if (action.flowIds.length && !state.isFlowSelected) {
                 return {
                     ...state,
-                    activeMenu: "Flow"
+                    displayLarge: false,
+                    activeMenu: 'Flow',
+                    isFlowSelected: true,
                 }
             }
-            if(isDeselect && state.activeMenu === "Flow") {
+
+            if (!action.flowIds.length && state.isFlowSelected) {
+                let activeMenu = state.activeMenu
+                if (activeMenu == 'Flow') {
+                    activeMenu = 'Start'
+                }
                 return {
                     ...state,
-                    activeMenu: "Start"
+                    activeMenu,
+                    isFlowSelected: false,
                 }
             }
-            return state
+
+            return {
+                ...state,
+                displayLarge: false,
+            }
+
+        case SET_CONTENT_VIEW:
+            return {
+                ...state,
+                contentView: action.contentView,
+            }
+
+        case SET_SELECTED_INPUT:
+            return {
+                ...state,
+                selectedInput: action.input
+            }
+
+        case UPDATE_QUERY:
+            return {
+                ...state,
+                query: { ...state.query, ...action.query }
+            }
+
+        case SELECT_TAB:
+            return {
+                ...state,
+                panel: action.panel
+            }
+
+        case SET_PROMPT:
+            return {
+                ...state,
+                promptOpen: action.open,
+            }
+
+        case SET_DISPLAY_LARGE:
+            return {
+                ...state,
+                displayLarge: action.displayLarge,
+            }
+
         default:
             return state
     }
 }
 
 export function setActiveMenu(activeMenu) {
-    return {
-        type: SET_ACTIVE_MENU,
-        activeMenu
-    }
+    return { type: SET_ACTIVE_MENU, activeMenu }
+}
+
+export function setContentView(contentView) {
+    return { type: SET_CONTENT_VIEW, contentView }
 }
 
+export function setSelectedInput(input) {
+    return { type: SET_SELECTED_INPUT, input }
+}
+
+export function updateQuery(query) {
+    return { type: UPDATE_QUERY, query }
+}
+
+export function selectTab(panel) {
+    return { type: SELECT_TAB, panel }
+}
+
+export function setPrompt(open) {
+    return { type: SET_PROMPT, open }
+}
+
+export function setDisplayLarge(displayLarge) {
+    return { type: SET_DISPLAY_LARGE, displayLarge }
+}
+
+export function onKeyDown(e) {
+    if (e.ctrlKey) {
+        return () => {
+        }
+    }
+    var key = e.keyCode
+    var shiftKey = e.shiftKey
+    e.preventDefault()
+    return (dispatch, getState) => {
+
+        const flow = getState().flows.byId[getState().flows.selected[0]]
+
+        switch (key) {
+
+            case Key.I:
+                dispatch(setSelectedInput('intercept'))
+                break
+
+            case Key.L:
+                dispatch(setSelectedInput('search'))
+                break
+
+            case Key.H:
+                dispatch(setSelectedInput('highlight'))
+                break
+
+            case Key.K:
+            case Key.UP:
+                dispatch(selectFlowRelative(-1))
+                break
+
+            case Key.J:
+            case Key.DOWN:
+                dispatch(selectFlowRelative(+1))
+                break
+
+            case Key.SPACE:
+            case Key.PAGE_DOWN:
+                dispatch(selectFlowRelative(+10))
+                break
+
+            case Key.PAGE_UP:
+                dispatch(selectFlowRelative(-10))
+                break
+
+            case Key.END:
+                dispatch(selectFlowRelative(+1e10))
+                break
+
+            case Key.HOME:
+                dispatch(selectFlowRelative(-1e10))
+                break
+
+            case Key.ESC:
+                dispatch(flowsActions.select(null))
+                break
+
+            case Key.LEFT:
+            {
+                let tabs = ['request', 'response', 'error'].filter(k => flow[k]).concat(['details']),
+                    currentTab = getState().ui.panel,
+                    nextTab = tabs[(tabs.indexOf(currentTab) - 1 + tabs.length) % tabs.length]
+                dispatch(selectTab(nextTab))
+                break
+            }
+
+            case Key.TAB:
+            case Key.RIGHT:
+            {
+                let tabs = ['request', 'response', 'error'].filter(k => flow[k]).concat(['details']),
+                    currentTab = getState().ui.panel,
+                    nextTab = tabs[(tabs.indexOf(currentTab) + 1) % tabs.length]
+                dispatch(selectTab(nextTab))
+                break
+            }
+
+            case Key.C:
+                if (shiftKey) {
+                    dispatch(flowsActions.clear())
+                }
+                break
+
+            case Key.D:
+            {
+                if (!flow) {
+                    return
+                }
+                if (shiftKey) {
+                    dispatch(flowsActions.duplicate(flow))
+                } else {
+                    dispatch(flowsActions.remove(flow))
+                }
+                break
+            }
+
+            case Key.A:
+            {
+                if (shiftKey) {
+                    dispatch(flowsActions.acceptAll())
+                } else if (flow && flow.intercepted) {
+                    dispatch(flowsActions.accept(flow))
+                }
+                break
+            }
+
+            case Key.R:
+            {
+                if (!shiftKey && flow) {
+                    dispatch(flowsActions.replay(flow))
+                }
+                break
+            }
+
+            case Key.V:
+            {
+                if (!shiftKey && flow && flow.modified) {
+                    dispatch(flowsActions.revert(flow))
+                }
+                break
+            }
+
+            case Key.E:
+                dispatch(setPrompt(true))
+                break
+
+            default:
+                return () => {
+                }
+        }
+    }
+}
diff --git a/web/src/js/ducks/utils/list.js b/web/src/js/ducks/utils/list.js
index 4f631590..fdeb5856 100644
--- a/web/src/js/ducks/utils/list.js
+++ b/web/src/js/ducks/utils/list.js
@@ -23,7 +23,7 @@ export default function reduce(state = defaultState, action) {
             }
 
         case UPDATE: {
-            const index = state.indexOf[action.id]
+            const index = state.indexOf[action.item.id]
 
             if (index == null) {
                 return state
@@ -36,7 +36,7 @@ export default function reduce(state = defaultState, action) {
             return {
                 ...state,
                 data,
-                byId: { ...state.byId, [action.id]: action.item }
+                byId: { ...state.byId, [action.item.id]: action.item }
             }
         }
 
@@ -86,8 +86,8 @@ export function add(item) {
 /**
  * @public
  */
-export function update(id, item) {
-    return { type: UPDATE, id, item }
+export function update(item) {
+    return { type: UPDATE, item }
 }
 
 /**
diff --git a/web/src/js/ducks/utils/view.js b/web/src/js/ducks/utils/view.js
index 0349a398..c00f00bd 100755
--- a/web/src/js/ducks/utils/view.js
+++ b/web/src/js/ducks/utils/view.js
@@ -15,8 +15,9 @@ const defaultState = {
 export default function reduce(state = defaultState, action) {
     switch (action.type) {
 
-        case UPDATE_FILTER: {
-            const data = action.list.data.filter(action.filter).sort(action.sort)
+        case UPDATE_FILTER:
+        {
+            const data = action.list.filter(action.filter).sort(action.sort)
             return {
                 ...state,
                 data,
@@ -24,7 +25,8 @@ export default function reduce(state = defaultState, action) {
             }
         }
 
-        case UPDATE_SORT: {
+        case UPDATE_SORT:
+        {
             const data = [...state.data].sort(action.sort)
             return {
                 ...state,
@@ -51,13 +53,13 @@ export default function reduce(state = defaultState, action) {
                 ...sortedRemove(state, action.id),
             }
 
-        case UPDATE: {
-            if (state.indexOf[action.id] == null) {
+        case UPDATE:
+            if (state.indexOf[action.item.id] == null) {
                 return
             }
             const nextState = {
                 ...state,
-                ...sortedRemove(state, action.id),
+                ...sortedRemove(state, action.item.id),
             }
             if (!action.filter(action.item)) {
                 return nextState
@@ -66,10 +68,10 @@ export default function reduce(state = defaultState, action) {
                 ...nextState,
                 ...sortedInsert(nextState, action.item, action.sort)
             }
-        }
 
-        case RECEIVE: {
-            const data = action.list.data.filter(action.filter).sort(action.sort)
+        case RECEIVE:
+        {
+            const data = action.list.filter(action.filter).sort(action.sort)
             return {
                 ...state,
                 data,
@@ -94,8 +96,8 @@ export function add(item, filter = defaultFilter, sort = defaultSort) {
     return { type: ADD, item, filter, sort }
 }
 
-export function update(id, item, filter = defaultFilter, sort = defaultSort) {
-    return { type: UPDATE, id, item, filter, sort }
+export function update(item, filter = defaultFilter, sort = defaultSort) {
+    return { type: UPDATE, item, filter, sort }
 }
 
 export function remove(id) {
diff --git a/web/src/js/ducks/views.js b/web/src/js/ducks/views.js
deleted file mode 100755
index e1e46c2e..00000000
--- a/web/src/js/ducks/views.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { combineReducers } from 'redux'
-import * as viewActions from './utils/view'
-import main from './views/main.js'
-
-export const ADD = 'FLOW_VIEWS_ADD'
-export const UPDATE = 'FLOW_VIEWS_UPDATE'
-export const REMOVE = 'FLOW_VIEWS_REMOVE'
-export const RECEIVE = 'FLOW_VIEWS_RECEIVE'
-
-export default combineReducers({
-    main,
-})
-
-/**
- * @public
- */
-export function add(item) {
-    return { type: ADD, item }
-}
-
-/**
- * @public
- */
-export function update(id, item) {
-    return { type: UPDATE, id, item }
-}
-
-/**
- * @public
- */
-export function remove(id) {
-    return { type: REMOVE, id }
-}
-
-/**
- * @public
- */
-export function receive(list) {
-    return { type: RECEIVE, list }
-}
diff --git a/web/src/js/ducks/websocket.js b/web/src/js/ducks/websocket.js
index 5ba7baef..21400bb5 100644
--- a/web/src/js/ducks/websocket.js
+++ b/web/src/js/ducks/websocket.js
@@ -68,7 +68,7 @@ export function onConnect() {
     return dispatch => {
         dispatch({ type: CONNECTED })
         dispatch(settingsActions.fetchData())
-        dispatch(flowsActions.fetchData())
+        dispatch(flowsActions.fetchFlows())
         dispatch(eventLogActions.fetchData())
     }
 }