diff --git a/src/message_browser.html b/src/message_browser.html
new file mode 100755
index 0000000..b977924
--- /dev/null
+++ b/src/message_browser.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <title>Message Browser</title>
+        <link
+            href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
+            rel="stylesheet"
+        />
+        <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
+        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+        <!--need jquery-->
+
+        <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.slim.js"></script>
+        <link
+            href="https://cdn.bootcss.com/codemirror/5.19.0/codemirror.css"
+            rel="stylesheet"
+        />
+        <script src="https://cdn.bootcss.com/codemirror/5.19.0/codemirror.js"></script>
+        <link
+            href="https://cdn.bootcss.com/codemirror/5.19.0/theme/solarized.min.css"
+            rel="stylesheet"
+        />
+        <script src="https://cdn.bootcss.com/codemirror/5.19.0/mode/python/python.min.js"></script>
+    </head>
+    <!--edit ~/codelab_adapter/src/message_browser.html 实时生效-->
+    <body>
+        <!--标签页 不同message + console-->
+
+        <div class="container-fluid">
+            <div class="row-fluid">
+                <div class="span12"><h3>Message from codelab-adapter</h3></div>
+                <div
+                    style="margin-top:10px"
+                    class="alert alert-info"
+                    role="alert"
+                >
+                    新消息出现在顶部(往下滚动)
+                </div>
+                <div class="span12"><div id="console"></div></div>
+            </div>
+            <hr />
+            <div class="row-fluid" style="margin: 10px">
+                <div class="span12"><h3>Message to codelab-adapter</h3></div>
+                <div class="span12">
+                    <div class="tabbable" id="tabs-604082">
+                        <ul class="nav nav-tabs">
+                            <li class="active">
+                                <a href="#panel-456287" data-toggle="tab"
+                                    >eim</a
+                                >
+                            </li>
+                            <li>
+                                <a href="#panel-943211" data-toggle="tab"
+                                    >eim/python</a
+                                >
+                            </li>
+                            <li>
+                                <a href="#panel-943212" data-toggle="tab"
+                                    >REST API</a
+                                >
+                            </li>
+                        </ul>
+                        <div class="tab-content">
+                            <div class="tab-pane active" id="panel-456287">
+                                <div
+                                    style="margin-top:10px"
+                                    class="alert alert-info"
+                                    role="alert"
+                                >
+                                    可用于发送任何消息
+                                </div>
+                                <input
+                                    id="eim_input"
+                                    class="form-control form-control-lg"
+                                    type="text"
+                                    placeholder="input message"
+                                    style="margin-top:10px"
+                                    value="{&quot;topic&quot;:&quot;from_scratch/extensions&quot;,&quot;payload&quot;:{&quot;content&quot;: &quot;message&quot;, &quot;extension_id&quot;: &quot;eim&quot;}}"
+                                />
+                                <!--html 转义 https://www.sojson.com/rehtml-->
+                                <button
+                                    style="margin-top:5px"
+                                    class="btn btn-info"
+                                    type="button"
+                                    onclick="send_eim_message()"
+                                >
+                                    broadcast
+                                </button>
+                            </div>
+                            <div class="tab-pane" id="panel-943211">
+                                <div
+                                    style="margin-top:10px"
+                                    class="alert alert-info"
+                                    role="alert"
+                                >
+                                    使用时请打开extension_python_kernel插件
+                                </div>
+
+                                <div class="span12">
+                                    <div id="code_playgroud"></div>
+                                    <button
+                                        style="margin-top:5px"
+                                        class="btn btn-info"
+                                        type="button"
+                                        onclick="send_python_code()"
+                                    >
+                                        broadcast
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="tab-pane" id="panel-943212">
+                                <div
+                                    style="margin-top:10px"
+                                    class="alert alert-info"
+                                    role="alert"
+                                >
+                                        <pre>
+var xhr = new XMLHttpRequest();
+var url = "https://codelab-adapter.codelab.club:12358/api/message"
+xhr.open("POST", url, true);
+var sendData = {"topic":"from_scratch/extensions","payload":{"content": "REST API", "extension_id": "eim"}};
+xhr.setRequestHeader('content-type', 'application/json');
+xhr.send(JSON.stringify(sendData));
+                                        </pre>
+                                </div>
+
+                                <input
+                                    id="rest_input"
+                                    class="form-control form-control-lg"
+                                    type="text"
+                                    placeholder="input message"
+                                    style="margin-top:10px"
+                                    value="{&quot;topic&quot;:&quot;from_scratch/extensions&quot;,&quot;payload&quot;:{&quot;content&quot;: &quot;REST API&quot;, &quot;extension_id&quot;: &quot;eim&quot;}}"
+                                />
+                                <button
+                                    style="margin-top:5px"
+                                    class="btn btn-info"
+                                    type="button"
+                                    onclick="send_rest_api()"
+                                >
+                                    broadcast
+                                </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <script>
+            /*
+    const url = new URL(window.location.href);
+    var adapterHost = url.searchParams.get("adapter_host");
+    if (!adapterHost) {
+      var adapterHost = "codelab-adapter.codelab.club";
+    }
+
+    this.socket = io(`//${adapterHost}:12358` + "/test", {
+      transports: ["websocket"]
+    });
+    */
+            const SCRATCH_TOPIC = "from_scratch/extensions"
+            pythonCodeMirror = CodeMirror(
+                document.getElementById("code_playgroud"),
+                {
+                    lineNumbers: true,
+                    styleActiveLine: true,
+                    value: "print('hello world')",
+                    mode: "python"
+                }
+            );
+            var theme = "solarized dark";
+            pythonCodeMirror.setOption("theme", theme);
+
+            consoleCodeMirror = CodeMirror(document.getElementById("console"), {
+                //lineNumbers: true,
+                styleActiveLine: true,
+                value: "//Message from codelab-adapter",
+                mode: "javascript" //json
+            });
+            var theme = "solarized dark";
+            consoleCodeMirror.setOption("theme", theme);
+
+            // 监听外部事件
+            function put_console(codeMirror, message) {
+                var now = new Date().toLocaleString();
+                var newcode = ` ${now}  ${message}\n${codeMirror.getValue()}`;
+                codeMirror.setValue(newcode);
+                // window.codeMirror = consoleCodeMirror;
+            }
+            const url = new URL(window.location.href);
+            var adapterHost = url.searchParams.get("adapter_host"); // 支持树莓派(分布式使用)
+            if (!adapterHost) {
+              var adapterHost = url.hostname;
+            }
+
+            var socket = io(`//${adapterHost}:12358` + "/test", {
+              transports: ["websocket"]
+            });
+            // socket.emit("actuator", { topic: "eim", message: text.message });
+            socket.on("sensor", msg => {
+                console.log(msg);
+                put_console(consoleCodeMirror, JSON.stringify(msg.message));
+            });
+
+            function send_python_code() {
+                const extension_id = "eim/python";
+                const code = pythonCodeMirror.getValue();
+                const content = code;
+                console.log("python code:\n", code);
+                socket.emit("actuator", { topic: SCRATCH_TOPIC, payload: {content: content,extension_id: extension_id} });
+            }
+            function send_rest_api(){
+                var rest_input = document.getElementById("rest_input").value;
+                var xhr = new XMLHttpRequest();
+                var url = `//${adapterHost}:12358/api/message`
+                xhr.open("POST", url, true);
+                // var sendData = {topic: "eim", payload: "hello"};
+                xhr.setRequestHeader('content-type', 'application/json');
+                //xhr.send(JSON.stringify(sendData));
+                xhr.send(rest_input);
+            }
+
+            function send_eim_message() {
+                //
+                var payload = document.getElementById("eim_input").value;
+                window.message = payload;
+                console.log("eim payload", payload);
+                socket.emit("actuator", JSON.parse(payload));
+            }
+        </script>
+    </body>
+</html>
diff --git a/src/web_log_page.html b/src/web_log_page.html
new file mode 100755
index 0000000..fad49da
--- /dev/null
+++ b/src/web_log_page.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <title>view log</title>
+
+        <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.slim.js"></script>
+        <link
+            href="https://cdn.bootcss.com/codemirror/5.19.0/codemirror.css"
+            rel="stylesheet"
+        />
+        <script src="https://cdn.bootcss.com/codemirror/5.19.0/codemirror.js"></script>
+        <link
+            href="https://cdn.bootcss.com/codemirror/5.19.0/theme/solarized.min.css"
+            rel="stylesheet"
+        />
+    </head>
+    <body>
+        <h2><center>view log</center></h2>
+        <p><center style="margin: 15px">新消息出现在顶部(往下滚动)</center></p>
+        <p>grep: <input id="grep" type="text" name="FirstName" value="" /></p>
+        <div id="console"></div>
+        <script>
+            consoleCodeMirror = CodeMirror(document.getElementById("console"), {
+                //lineNumbers: true,
+                styleActiveLine: true,
+                value: "//Message from codelab-adapter",
+                mode: "javascript" //json
+            });
+            var theme = "solarized dark";
+            consoleCodeMirror.setOption("theme", theme);
+
+            // 监听外部事件
+            function put_console(codeMirror, message) {
+                var now = new Date().toLocaleString();
+                var newcode = ` ${now}  ${message}\n${codeMirror.getValue()}`;
+                codeMirror.setValue(newcode);
+                // window.codeMirror = consoleCodeMirror;
+            }
+
+            //  todo 与当前域名一致
+            const url = new URL(window.location.href);
+            var adapterHost = url.searchParams.get("adapter_host"); // 支持树莓派(分布式使用)
+            if (!adapterHost) {
+                var adapterHost = url.hostname;
+            }
+
+            socket = io(`//${adapterHost}:12358` + "/all_zmq_message", {
+                transports: ["websocket"]
+            });
+            // socket.emit("actuator", { topic: "eim", message: text.message });
+            socket.on("view_log", msg => {
+                // console.log(msg.message); // ok
+                var string_message = JSON.stringify(msg.message);
+                console.log(string_message);
+                var grep = document.getElementById("grep").value;
+                window.grep = grep;
+                window.string_message = string_message;
+                if (!grep) {
+                    // 如果没有grep条件，则打印全部
+                    put_console(consoleCodeMirror, string_message);
+                    return;
+                }
+
+                if (string_message.includes(grep)) {
+                    // 如果有grep条件，打印过滤之后的
+                    put_console(consoleCodeMirror, string_message);
+                    return;
+                }
+            });
+        </script>
+    </body>
+</html>
diff --git a/src/webui.html b/src/webui.html
new file mode 100755
index 0000000..ab36f1e
--- /dev/null
+++ b/src/webui.html
@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<!--
+vue: 
+    https://cn.vuejs.org/v2/guide/list.html
+
+websocket: 
+    https://codepen.io/louisjordan/pen/NggLBQ
+    https://www.jianshu.com/p/9d8b2e42328c
+-->
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <script src="/static/vue.min.js"></script>
+        <script src="/static/socket.io.slim.js"></script>
+        <link rel="stylesheet" href="/static/normalize.css" />
+        <link rel="stylesheet" href="/static/element-ui_2_12_0_index.css" />
+        <script src="/static/element-ui_2_12_0_index.js"></script>
+        <link rel="shortcut icon" href="/static/favicon.ico" />
+        <title>CodeLab Adapter Web UI</title>
+        <style>
+            * {
+                box-sizing: border-box;
+            }
+            body {
+                background-color: white;
+            }
+            section {
+                text-align: center;
+                min-width: 500px;
+            }
+            header {
+                padding: 20px 0;
+                background-color: #4e97fe;
+                color: white;
+                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+                box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.35);
+            }
+            header div.container {
+                width: 500px;
+                margin: 0 auto;
+            }
+            div.links {
+                display: flex;
+                justify-content: center;
+                margin-top: 15px;
+            }
+            div.link a {
+                font-size: 13px;
+                color: white;
+                margin: 0 12px;
+            }
+            div.extensions {
+                padding-top: 10px;
+            }
+            div.extension {
+                margin: 0 auto;
+                width: 500px;
+                padding: 5px 90px;
+                display: flex;
+                justify-content: space-between;
+            }
+        </style>
+    </head>
+    <body>
+        <section id="app">
+            <header>
+                <div class="container">
+                    <h2>CodeLab Adapter v2 Web UI</h2>
+                    <p>status: {{ status }}</p>
+                    <p>version: {{ version }}</p>
+                    <el-button round v-on:click="exit_adapter_app"
+                        >exit</el-button
+                    >
+                    <div class="links">
+                        <div class="link" v-for="(url, link_name) in links">
+                            <a target="_blank" :href="url">{{ link_name }}</a>
+                        </div>
+                    </div>
+                </div>
+            </header>
+            <div id="extension-list">
+                <div class="extensions">
+                    <div
+                        class="extension"
+                        v-for="(statu, extension) in extensions_statu"
+                    >
+                        <label for="extension">{{ extension }} </label>
+                        <el-switch
+                            id="extension"
+                            @change="check($event, extension)"
+                            v-model="extensions_statu[extension]"
+                        >
+                        </el-switch>
+                    </div>
+                </div>
+                <ul id="logs">
+                    <li v-for="log in logs.slice().reverse()" class="log">
+                        {{ log.event }}: {{ log.data }}
+                    </li>
+                </ul>
+            </div>
+        </section>
+        <script>
+            const ADAPTER_TOPIC = "adapter/extensions/data";
+            const SCRATCH_TOPIC = "scratch/extensions/command";
+            const EXTENSIONS_OPERATE_TOPIC = "core/extensions/operate";
+            const NODES_OPERATE_TOPIC = "core/nodes/operate";
+            const EXTENSIONS_STATUS_TOPIC = "core/extensions/status";
+            const ADAPTER_STATUS_TOPIC = "core/status";
+            const EXTENSIONS_STATUS_TRIGGER_TOPIC =
+                "core/extensions/status/trigger";
+            const EXTENSION_STATU_CHANGE_TOPIC = "core/extension/statu/change";
+            const NOTIFICATION_TOPIC = "core/notification";
+
+            const EXTENSION_ID = "eim";
+            const extensions_bar = new Vue({
+                el: "#app",
+                data: {
+                    logs: [],
+                    status: "disconnected", // connected
+                    version: "",
+                    //checkedExtensions: [],
+                    //extensions: ["extension_eim", "extension_eim2"],
+                    extensions_statu: {},
+                    links: {
+                        webdebug: "/webdebug",
+                        "view log": "/web_log_page",
+                        scratch3: "https://scratch3v2.codelab.club"
+                    }
+                },
+                methods: {
+                    exit_adapter_app: function(event) {
+                        let turn = "stop";
+                        const message = {
+                            topic: NODES_OPERATE_TOPIC,
+                            payload: {
+                                content: turn,
+                                extension_id: "adapter/app"
+                            }
+                        };
+                        this.socket.emit("actuator", message);
+                    },
+                    check: function(state, extension) {
+                        // console.log(`${e.target.value} ${e.target.checked}`);
+                        console.log(`${extension} ${state}`);
+                        const extension_name = extension;
+                        let turn;
+                        if (state === true) {
+                            turn = "start";
+                            console.log("start");
+                        } else {
+                            turn = "stop";
+                            console.log("stop");
+                        }
+
+                        const message = {
+                            topic: EXTENSIONS_OPERATE_TOPIC,
+                            payload: {
+                                content: turn,
+                                extension_id: EXTENSION_ID,
+                                extension_name: extension_name
+                            }
+                        };
+                        this.socket.emit("actuator", message);
+                    },
+                    connect() {
+                        const url = new URL(window.location.href);
+                        var adapterHost = url.searchParams.get("adapter_host"); // 支持树莓派(分布式使用)
+                        if (!adapterHost) {
+                            var adapterHost = url.hostname;
+                        }
+
+                        this.socket = io(`//${adapterHost}:12358` + "/test", {
+                            transports: ["websocket"]
+                        });
+
+                        this.socket.on("connect", () => {
+                            // 触发一次发布插件状态的请求
+
+                            const message = {
+                                topic: EXTENSIONS_STATUS_TRIGGER_TOPIC,
+                                payload: {
+                                    content: "EXTENSIONS_STATUS_TRIGGER_TOPIC"
+                                }
+                            };
+                            this.socket.emit("actuator", message);
+                            this.status = "connected!";
+                        });
+                        this.socket.on("disconnect", reason => {
+                            this.status = `disconnect! ${reason}`;
+                        });
+                        // onconnect: status
+                        // socket.emit("actuator", { topic: "eim", message: text.message });
+                        this.extensions_statu = {};
+                        const status_checked_map = { start: true, stop: false };
+                        this.socket.on("sensor", msg => {
+                            console.log("recv:", msg.message);
+                            if (
+                                msg.message.topic ===
+                                EXTENSION_STATU_CHANGE_TOPIC
+                            ) {
+                                // todo 开始主动获取一次
+                                // update extension status(start/stop  open/close)
+                                const extension_name =
+                                    msg.message.payload.extension_name;
+                                const content = msg.message.payload.content;
+                                this.extensions_statu[extension_name] =
+                                    status_checked_map[content];
+                                console.log(
+                                    `${extension_name} statu change to ${content}`
+                                );
+
+                                // update extension status. start/stop
+                            }
+
+                            if (msg.message.topic === EXTENSIONS_STATUS_TOPIC) {
+                                const content = msg.message.payload.content;
+                                this.extensions_statu = content;
+                            }
+                            if (msg.message.topic === NOTIFICATION_TOPIC) {
+                                const content = msg.message.payload.content;
+                                console.log("notification:", content);
+                                alert(content);
+                            }
+                            if (msg.message.topic === ADAPTER_STATUS_TOPIC) {
+                                const content = msg.message.payload.content;
+                                console.log("adapter info:", content);
+                                this.version = content.version;
+                            }
+
+                            /*
+              this.logs.push({
+                event: "receive message",
+                data: msg.message
+              });
+              */
+                        });
+                    }
+                },
+                created: function() {
+                    // init
+                    this.connect();
+                }
+            });
+        </script>
+    </body>
+</html>
