diff --git a/app/components/DeviceView.tsx b/app/components/DeviceView.tsx
index 0dff0f2..d748d46 100644
--- a/app/components/DeviceView.tsx
+++ b/app/components/DeviceView.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { Grid, Header, Icon, Item } from "semantic-ui-react";
 
-import { injectState, MqttApiState } from "@app/state";
+import { injectState, StateBase } from "@app/state";
 import { SprinklersDevice } from "@common/sprinklers";
 import { ProgramTable, RunSectionForm, SectionRunnerView, SectionTable } from ".";
 
@@ -23,7 +23,7 @@ function ConnectionState({ connected, className }: { connected: boolean, classNa
 
 interface DeviceViewProps {
     deviceId: string;
-    state: MqttApiState;
+    state: StateBase;
 }
 
 class DeviceView extends React.Component<DeviceViewProps> {
diff --git a/app/components/MessageTest.tsx b/app/components/MessageTest.tsx
index 1c802c7..d782956 100644
--- a/app/components/MessageTest.tsx
+++ b/app/components/MessageTest.tsx
@@ -1,10 +1,10 @@
 import * as React from "react";
 import { Button, Segment } from "semantic-ui-react";
 
-import { injectState, MqttApiState } from "@app/state";
+import { injectState, StateBase } from "@app/state";
 import { getRandomId } from "@common/utils";
 
-class MessageTest extends React.Component<{ state: MqttApiState }> {
+class MessageTest extends React.Component<{ state: StateBase }> {
     render() {
         return (
             <Segment>
diff --git a/app/components/MessagesView.tsx b/app/components/MessagesView.tsx
index 4975e39..c8282bf 100644
--- a/app/components/MessagesView.tsx
+++ b/app/components/MessagesView.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { Message, MessageProps, TransitionGroup } from "semantic-ui-react";
 
-import { injectState, MqttApiState, UiMessage, UiStore } from "@app/state/";
+import { injectState, StateBase, UiMessage, UiStore } from "@app/state/";
 
 @observer
 class MessageView extends React.Component<{
@@ -33,7 +33,7 @@ class MessageView extends React.Component<{
     }
 }
 
-class MessagesView extends React.Component<{ state: MqttApiState }> {
+class MessagesView extends React.Component<{ state: StateBase }> {
     render() {
         const { uiStore } = this.props.state;
         const messages = uiStore.messages.map((message) => (
diff --git a/app/components/RunSectionForm.tsx b/app/components/RunSectionForm.tsx
index f9aa0e4..c454d6d 100644
--- a/app/components/RunSectionForm.tsx
+++ b/app/components/RunSectionForm.tsx
@@ -1,7 +1,7 @@
 import { computed } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { DropdownItemProps, DropdownProps, Form, Grid, Header, Segment } from "semantic-ui-react";
+import { DropdownItemProps, DropdownProps, Form, Header, Segment } from "semantic-ui-react";
 
 import { Duration } from "@common/Duration";
 import log from "@common/logger";
diff --git a/app/index.tsx b/app/index.tsx
index 3b692d1..792d86d 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -3,12 +3,13 @@ import * as ReactDOM from "react-dom";
 import { AppContainer } from "react-hot-loader";
 
 import App from "@app/components/App";
-import { ProvideState, WebApiState } from "@app/state";
+import { ProvideState, StateBase } from "@app/state";
+import { WebApiState as StateClass } from "@app/state/web";
 // import log from "@common/logger";
 
 // Object.assign(log, { name: "sprinklers3/app", level: "debug" });
 
-const state = new WebApiState();
+const state: StateBase = new StateClass();
 state.start();
 
 const rootElem = document.getElementById("app");
diff --git a/app/state/StateBase.ts b/app/state/StateBase.ts
index f42d394..0f0d2cb 100644
--- a/app/state/StateBase.ts
+++ b/app/state/StateBase.ts
@@ -1,5 +1,5 @@
 import { ISprinklersApi } from "@common/sprinklers";
-import { UiMessage, UiStore } from "./ui";
+import { UiStore } from "./ui";
 
 export default abstract class StateBase {
     abstract readonly sprinklersApi: ISprinklersApi;