From e60a7640800b02f44cddf448eadabdeace6470b1 Mon Sep 17 00:00:00 2001
From: iwate <iwatesoftware@live.jp>
Date: Tue, 28 Apr 2020 17:33:07 +0900
Subject: [PATCH] move signalr&ipc code to vuex

---
 src/Aiplugs.PoshApp/Services/Git/GitWorker.cs |   7 +-
 .../Services/ScriptsService.cs                |   2 +-
 src/Aiplugs.PoshApp/Views/Shared/App.cshtml   |  13 +-
 .../Shared/Components/UpdateNotice.cshtml     |  22 +-
 src/Aiplugs.PoshApp/Views/Shared/Index.cshtml |  11 +-
 .../Views/Shared/Pages/Detail.cshtml          |  29 +-
 .../Views/Shared/Pages/List.cshtml            | 141 ++++----
 .../Shared/Pages/Parts/ParametersForm.cshtml  |  72 ++--
 .../Views/Shared/Pages/Singleton.cshtml       |  64 ++--
 .../Views/Shared/PowershellUI/Log.cshtml      |  40 +--
 .../Shared/PowershellUI/LogForError.cshtml    |  29 +-
 .../Views/Shared/PowershellUI/Progress.cshtml |  80 ++---
 .../Shared/PowershellUI/ProgressForGit.cshtml |  33 +-
 .../Views/Shared/PowershellUI/Prompt.cshtml   |  93 +++---
 .../PowershellUI/PromptForChoice.cshtml       |  37 +--
 .../PowershellUI/PromptForCredential.cshtml   |  67 +---
 .../Views/Shared/PowershellUI/Status.cshtml   |  63 ++--
 .../Views/Shared/Repositories/Index.cshtml    |  87 ++---
 .../Views/Shared/Repositories/Nav.cshtml      |  34 +-
 .../Views/Shared/Settings/Activation.cshtml   |  23 +-
 src/Aiplugs.PoshApp/wwwroot/js/main.js        |   4 +-
 src/Aiplugs.PoshApp/wwwroot/js/store/index.js |  19 +-
 src/Aiplugs.PoshApp/wwwroot/js/store/ipc.js   |  74 +++++
 .../wwwroot/js/store/signalr.js               | 307 ++++++++++++++++++
 24 files changed, 731 insertions(+), 620 deletions(-)
 create mode 100644 src/Aiplugs.PoshApp/wwwroot/js/store/ipc.js
 create mode 100644 src/Aiplugs.PoshApp/wwwroot/js/store/signalr.js

diff --git a/src/Aiplugs.PoshApp/Services/Git/GitWorker.cs b/src/Aiplugs.PoshApp/Services/Git/GitWorker.cs
index a944f64..0e4c9ba 100644
--- a/src/Aiplugs.PoshApp/Services/Git/GitWorker.cs
+++ b/src/Aiplugs.PoshApp/Services/Git/GitWorker.cs
@@ -90,13 +90,14 @@ public void Clone(CloneCommand cmd)
                     CredentialsProvider = new LibGit2Sharp.Handlers.CredentialsHandler(GetCredential)
                 });
             }
-            catch(Exception)
+            catch (Exception ex)
             {
-                if (_credentials.ContainsKey(cmd.Origin)) {
+                if (_credentials.ContainsKey(cmd.Origin))
+                {
                     _credentials.Remove(cmd.Origin);
                 }
                 Client.SendAsync("GitCloneFaild", cmd.Name).Wait();
-                throw;
+                throw ex;
             }
 
             Client.SendAsync("GitClone", cmd.Name).Wait();
diff --git a/src/Aiplugs.PoshApp/Services/ScriptsService.cs b/src/Aiplugs.PoshApp/Services/ScriptsService.cs
index 504f81c..d36a941 100644
--- a/src/Aiplugs.PoshApp/Services/ScriptsService.cs
+++ b/src/Aiplugs.PoshApp/Services/ScriptsService.cs
@@ -16,7 +16,7 @@ public class ScriptsService
             [ScriptType.List] = "param(\n\t[int]\n\t$Page,\n\n\t[int]\n\t$PageSize\n)\n",
             [ScriptType.Detail] = "param(\n\t[Parameter(ValueFromPipeline=$true,Mandatory=$true)]\n\t[PSObject]\n\t$InputObject\n)\n",
             [ScriptType.Singleton] = "",
-            [ScriptType.Action] = "param(\n\t[Parameter(ValueFromPipeline=$true)]\n\t[PSObject[]]\n\t$InputObject\n)\nprocess {\n\n}"
+            [ScriptType.Action] = "param(\n\t[Parameter(ValueFromPipeline=$true)]\n\t[PSObject[]]\n\t$InputObject\n)\n"
         };
         private readonly ConfigAccessor _configAccessor;
         private readonly LicenseService _license;
diff --git a/src/Aiplugs.PoshApp/Views/Shared/App.cshtml b/src/Aiplugs.PoshApp/Views/Shared/App.cshtml
index 60bd985..6e66509 100644
--- a/src/Aiplugs.PoshApp/Views/Shared/App.cshtml
+++ b/src/Aiplugs.PoshApp/Views/Shared/App.cshtml
@@ -51,14 +51,17 @@
     </v-app>
 </template>
 <script>
-    function checkForUpdates() {
-        ipcRenderer.send('check-for-updates');
-        setTimeout(checkForUpdates, 60 * 60 * 1000);
-    }
     Vue.component('App', {
         template: "#app-component",
+        methods: {
+            ...Vuex.mapActions('ipc', ['checkForUpdates']),
+        },
         mounted() {
-            checkForUpdates();
+            const update = () => {
+                this.checkForUpdates();
+            };
+            setTimeout(update, 60 * 60 * 1000);
+            update();
         }
     })
 </script>
\ No newline at end of file
diff --git a/src/Aiplugs.PoshApp/Views/Shared/Components/UpdateNotice.cshtml b/src/Aiplugs.PoshApp/Views/Shared/Components/UpdateNotice.cshtml
index e1f3aeb..19601a4 100644
--- a/src/Aiplugs.PoshApp/Views/Shared/Components/UpdateNotice.cshtml
+++ b/src/Aiplugs.PoshApp/Views/Shared/Components/UpdateNotice.cshtml
@@ -1,12 +1,12 @@
 <template id="update-notice-component">
-    <v-dialog v-model="dialog" max-width="600">
+    <v-dialog :value="updateAvailable" max-width="600" persistent>
         <v-card>
             <v-card-title>New version is released!</v-card-title>
             <v-divider></v-divider>
             <v-card-actions>
                 <v-spacer></v-spacer>
-                <v-btn text v-on:click="dialog=false">At later</v-btn>
-                <v-btn color="primary" v-on:click="install">Quit and Install now</v-btn>
+                <v-btn text v-on:click="clearUpdateAvailable">At later</v-btn>
+                <v-btn color="primary" v-on:click="quitAndInstall">Quit and Install now</v-btn>
             </v-card-actions>
         </v-card>
     </v-dialog>
@@ -14,20 +14,12 @@
 <script>
     Vue.component('updatenotice', {
         template: '#update-notice-component',
-        data() {
-            return {
-                dialog: false
-            }
+        computed: {
+            ...Vuex.mapState('ipc', ['updateAvailable'])
         },
         methods: {
-            install() {
-                ipcRenderer.send('quit-and-install');
-            }
-        },
-        mounted() {
-            ipcRenderer.on('update-available', (sender) => {
-                this.dialog = true;
-            });
+            ...Vuex.mapMutations('ipc', ['clearUpdateAvailable']),
+            ...Vuex.mapActions('ipc', ['quitAndInstall'])
         }
     })
 </script>
\ No newline at end of file
diff --git a/src/Aiplugs.PoshApp/Views/Shared/Index.cshtml b/src/Aiplugs.PoshApp/Views/Shared/Index.cshtml
index d48684f..28c14d1 100644
--- a/src/Aiplugs.PoshApp/Views/Shared/Index.cshtml
+++ b/src/Aiplugs.PoshApp/Views/Shared/Index.cshtml
@@ -24,16 +24,7 @@
     {
         <script>
             const { ipcRenderer } = require("electron");
-        </script>
-    }
-    else
-    {
-        <script>
-            const ipcRenderer = {
-                on: function() {},
-                send: function() {},
-                removeAllListeners: function() {},
-            }
+            window.ipcRenderer = ipcRenderer;
         </script>
     }
     <partial name="Components/ActivationNotice" />
diff --git a/src/Aiplugs.PoshApp/Views/Shared/Pages/Detail.cshtml b/src/Aiplugs.PoshApp/Views/Shared/Pages/Detail.cshtml
index 05a7609..34e28c6 100644
--- a/src/Aiplugs.PoshApp/Views/Shared/Pages/Detail.cshtml
+++ b/src/Aiplugs.PoshApp/Views/Shared/Pages/Detail.cshtml
@@ -1,46 +1,33 @@
 <template id="detail-page">
-    <section v-if="data" class="d-flex flex-column white" style="position: absolute; top:0; width:calc(100vw - 56px - 256px); height: calc(100vh - 24px); overflow:hidden;">
+    <section v-if="detailResult" class="d-flex flex-column white" style="position: absolute; top:0; width:calc(100vw - 56px - 256px); height: calc(100vh - 24px); overflow:hidden;">
         <header>
             <v-btn text v-on:click="$emit('close')">
                 <v-icon>mdi-arrow-right</v-icon>
             </v-btn>
-            <v-btn text v-for="action in actions" :key="action.id" v-on:click="invokeAction(action.id)">{{action.displayName || action.id}}</v-btn>
+            <v-btn text v-for="action in actions" :key="action.id" v-on:click="invokeAction({scriptId:action.id, input:[input]})">{{action.displayName || action.id}}</v-btn>
         </header>
         <div class="flex scroll-content">
-            <data-viewer :data="data"></data-viewer>
+            <data-viewer :data="detailResult"></data-viewer>
         </div>
     </section>
 </template>
 
-<script type="module">
-    import { parsePSDataCollection } from '/js/clixml.js'
+<script>
     Vue.component('detail-page', {
         template: '#detail-page',
         props: ['script', 'input'],
-        data() {
-            return {
-                data: null
-            }
-        },
         computed: {
+            ...Vuex.mapState('signalr', ['detailResult']),
             actions() {
                 const [repo, id] = this.script.split(':');
                 return this.$store.getters['scripts/findActions'](repo, id);
             }
         },
-        methods:{
-            invokeAction(name) {
-                this.$signalr.invoke('InvokeAction', name, null);
-            }
+        methods: {
+            ...Vuex.mapActions('signalr', ['invokeDetail', 'invokeAction'])
         },
         mounted() {
-            this.$signalr.on('DetailResult', json => {
-                this.data = parsePSDataCollection(JSON.parse(json));
-            })
-            this.$signalr.invoke('InvokeDetail', this.script, this.input);
-        },
-        beforeDestroy() {
-            this.$signalr.off('DetailResult')
+            this.invokeDetail({ scriptId: this.script, input: this.input });
         }
     })
 </script>
\ No newline at end of file
diff --git a/src/Aiplugs.PoshApp/Views/Shared/Pages/List.cshtml b/src/Aiplugs.PoshApp/Views/Shared/Pages/List.cshtml
index 7a01a38..dc9937f 100644
--- a/src/Aiplugs.PoshApp/Views/Shared/Pages/List.cshtml
+++ b/src/Aiplugs.PoshApp/Views/Shared/Pages/List.cshtml
@@ -3,24 +3,36 @@
         <header>
             <v-row class="pl-4 pr-4" style="width: 100%;">
                 <v-col cols="12" class="pt-0 pb-0">
-                    <parameters-form ref="form" :script="scriptId" :page="page" :page-size="pageSize" :loading="loading=='$run'" :disabled="disabled" v-on:run="run"></parameters-form>
+                    <parameters-form ref="form"
+                                     :script="scriptId"
+                                     :page="page"
+                                     :page-size="pageSize"
+                                     :loading="invoking=='$default'"
+                                     :disabled="disabled"
+                                     v-on:run="run">
+                    </parameters-form>
                 </v-col>
             </v-row>
             <v-row class="pl-4 pr-4">
-                <v-btn text v-for="action in actions" :key="action.name" :loading="loading==action.id" :disabled="disabled" v-on:click="invokeAction(action.id)" retain-focus-on-click>{{action.displayName || action.id}}</v-btn>
+                <v-btn text v-for="action in actions"
+                       :key="action.name"
+                       :loading="invoking==action.id"
+                       :disabled="disabled"
+                       v-on:click="invokeAction({ scriptId:action.id, input: selected.map(item => item.$clixml) })"
+                       retain-focus-on-click>{{action.displayName || action.id}}</v-btn>
             </v-row>
         </header>
         <v-divider></v-divider>
         <div class="flex scroll-content">
             <v-data-table v-model="selected"
-                          :headers="headers"
-                          :items="list"
+                          :headers="view.headers"
+                          :items="view.list"
                           :page.sync="page"
                           :items-per-page="pageSize"
                           item-key="$clixml"
                           hide-default-footer
                           show-select
-                          v-if="list.length > 0">
+                          v-if="view.list.length > 0">
                 <template v-slot:item.$poshapp_action="{ item }">
                     <v-btn icon text v-on:click="openDetail(item)">
                         <v-icon>mdi-fullscreen</v-icon>
@@ -28,8 +40,9 @@
                 </template>
             </v-data-table>
         </div>
+        <div class="text-center overline" v-if="view.list.length > 0">Total {{view.total}}</div>
         <div class="ma-auto" style="width: 80%;">
-            <v-pagination v-model="page" :length="total" v-if="list.length > 0"></v-pagination>
+            <v-pagination v-model="page" :length="view.pageCount" v-if="view.list.length > 0"></v-pagination>
         </div>
         <transition name="slide-x-reverse-transition">
             <detail-page :script="detailScriptId" :input="detailInput" v-if="detailScriptId" v-on:close="detailScriptId=null"></detail-page>
@@ -39,24 +52,20 @@
         </v-btn>
     </div>
 </template>
-<script type="module">
-    import { parsePSDataCollection, createCliXml } from '/js/clixml.js'
+<script>
     Vue.component('ListPage', {
         template: '#list-page-component',
         data() {
             return {
                 selected:[],
                 detailScriptId: null,
-                detailInput: null,
+                detailInput: null, 
                 page: 1,
                 pageSize: 10,
-                total: 0,
-                list: [],
-                headers: [],
-                loading: null,
             }
         }, 
         computed: {
+            ...Vuex.mapState('signalr', ['invoking','defaultResult']),
             scriptId() {
                 return `${this.$route.params.repo}:${this.$route.params.id}`;
             },
@@ -69,79 +78,53 @@
                 return this.$store.getters['scripts/findActions'](repo, id);
             },
             disabled() {
-                return !!this.loading
-            }
-        },
-        methods: {
-            ...Vuex.mapActions('toast', ['toast']),
-            ...Vuex.mapMutations('list', ['updateList','replaceData','setDetail']),
-            init() {
-                this.selected.splice(0);
-                this.list.splice(0);
-                this.headers.splice(0);
-                this.total = 0;
-                this.$signalr.on("DefaultResult", json => {
-                    this.loading = null;
-
-                    const data = parsePSDataCollection(JSON.parse(json));
-                    
-                    if (data.length == 0)
-                        return;
-
-                    let index = 0;
-                    let total = data.length;
-                    const pageSize = this.pageSize - 0;
+                return !!this.invoking
+            },
+            view() {
+                const data = this.defaultResult;
+                if (data == null) {
+                    return { list: [], headers:[], total: 0 }
+                }
 
-                    if (typeof data[index].value === 'number') {
-                        total = data[index].value;
-                        index++;
-                    }
+                let index = 0;
+                let total = data.length;
+                if (typeof data[index].value === 'number') {
+                    total = data[index].value;
+                    index++;
+                }
 
-                    const pageCount = ~~(total / pageSize) + Math.min(1, total % pageSize);
+                const pageCount = ~~(total / this.pageSize) + Math.min(1, total % this.pageSize);
 
-                    const dataset = data.slice(index);
+                const dataset = data.slice(index);
 
-                    const allKeys = Object.keys(dataset.reduce((o,d) => Object.assign(o,d.value),{}));
+                const allKeys = Object.keys(dataset.reduce((o,d) => Object.assign(o,d.value), {}));
                     
-                    const headers = allKeys.map(key => ({ text:key, value:key, sortable: false }));
+                const headers = allKeys.map(key => ({ text:key, value:key, sortable: false }));
                     
-                    if (this.detailId) {
-                        headers.unshift({text: '', value: '$poshapp_action', width: 64, sortable: false });
-                    }
+                if (this.detailId) {
+                    headers.unshift({text: '', value: '$poshapp_action', width: 64, sortable: false });
+                }
 
-                    this.pageSize = this.$refs.form.getPageSize();
-                    this.total = pageCount;
-                    this.headers.splice(0, this.headers.length, ...headers);
-                    this.list.splice(0, this.list.length, ...dataset.filter(d => typeof d.value == 'object').map(d => {
-                        d.value.$clixml = d.clixml;
-                        return d.value;
-                    }));
-                })
-                this.$signalr.on("ActionResult", (id, json) => {
-                    this.loading = null;
-                    const data = JSON.parse(json);
-                    this.toast({
-                        text: `${id} is succeeded` ,
-                        color: "info",
-                        top: true,
-                        right: true
-                    });
-                })
-                this.$signalr.on('UnitResult', () => {
-                    this.loading = null;
-                })
-            },
-            run(value) {
-                this.loading = '$run';
-                this.$signalr.invoke('Invoke', this.scriptId, value);
+                const list = dataset.filter(d => typeof d.value == 'object').map(d => {
+                    return Object.assign({ $clixml: d.clixml }, d.value);
+                });
+
+                return { list, headers, total, pageCount };
+            }
+        },
+        methods: {
+            ...Vuex.mapActions('signalr', ['invokeDefault', 'invokeAction', 'clearResult']),
+            init() {
+                this.clearResult();
+                this.selected.splice(0);
             },
-            invokeAction(id) {
-                this.loading = id;
-                this.$signalr.invoke('InvokeAction', id, this.selected.map(item => item.$clixml));
+            run({ value, page, pageSize }) {
+                this.invokeDefault({ scriptId: this.scriptId, input: value });
+                this.page = page;
+                this.pageSize = pageSize;
             },
             openDetail(item) {
-                const clixml = item.$clixml;
-                this.detailInput = clixml;
+                this.detailInput = item.$clixml;
                 this.detailScriptId = this.detailId;
             },
             gotoEditor() {
@@ -160,12 +143,6 @@
         beforeRouteUpdate (to, from, next) {
             this.init();  
             next();
-        },
-        beforeRouteLeave (to, from , next) {
-            this.$signalr.off('DefaultResult');
-            this.$signalr.off('ActionResult');
-            this.$signalr.off('UnitResult');
-            next();
         }
     })
 </script>
\ No newline at end of file
diff --git a/src/Aiplugs.PoshApp/Views/Shared/Pages/Parts/ParametersForm.cshtml b/src/Aiplugs.PoshApp/Views/Shared/Pages/Parts/ParametersForm.cshtml
index e89dffd..bd1fb6a 100644
--- a/src/Aiplugs.PoshApp/Views/Shared/Pages/Parts/ParametersForm.cshtml
+++ b/src/Aiplugs.PoshApp/Views/Shared/Pages/Parts/ParametersForm.cshtml
@@ -3,7 +3,7 @@
         <v-row>
             <v-col class="pb-0" v-for="p in parameters" :key="p.name" :md="colSize(p)">
                 <datetime-field
-                    v-model="p.value" 
+                    v-model="value[p.name]"
                     :label="p.name"
                     :hint="p.helpMessage"
                     :rules="rules(p)"
@@ -12,7 +12,7 @@
                     v-if="p.type == 'System.DateTimeOffset' || p.type == 'System.DateTime'">
                 </datetime-field>
                 <v-select
-                    v-model="p.value"
+                    v-model="value[p.name]"
                     :label="p.name"
                     :hint="p.helpMessage"
                     :items="validateSet(p)"
@@ -20,7 +20,7 @@
                     v-else-if="p.validateSet">
                 </v-select>
                 <v-switch
-                    v-model="p.value"
+                    v-model="value[p.name]"
                     :label="p.name"
                     :hint="p.helpMessage"
                     :rules="rules(p)"
@@ -29,7 +29,7 @@
                     v-else-if="p.type == 'System.Boolean'">
                 </v-switch>
                 <v-text-field 
-                    v-model="p.value" 
+                    v-model="value[p.name]" 
                     :label="p.name" 
                     :hint="p.helpMessage"
                     :type="inputType(p)" 
@@ -61,42 +61,37 @@
         },
         data() {
             return {
-                loadingParams: true, 
-                parameters: [],
                 valid: true,
+                value: { Page: this.page - 1, PageSize: this.pageSize }
             }
         },
         computed: {
+            ...Vuex.mapState('signalr', ['loadingParams', 'parameters']),
             disabledAll() {
                 return this.disabled || this.loadingParams
             }
         },
         watch: {
             page(value) {
-                this.setPage(value);
-                this.emitRun();
+                const page = value - 1;
+                if (this.value.Page != page) {
+                    this.value.Page = page;
+                    this.emitRun();
+                }
             },
             pageSize(value) {
-                this.setPageSize(value);
-                this.emitRun();
+                const pageSize = value - 0;
+                if (this.value.PageSize != pageSize) {
+                    this.value.PageSize = pageSize;
+                    this.emitRun();
+                }
             },
             script() {
-                this.getParameters();
+                this.invokeGetParameters({ scriptId: this.script });
             }
         },
         methods: {
-            setPage(value) {
-                const p = this.parameters.find(p => p.name == 'Page');
-                if (p) {
-                    this.$set(p, 'value', value - 1);
-                }
-            },
-            setPageSize(value) {
-                const p = this.parameters.find(p => p.name == 'PageSize');
-                if (p) {
-                    this.$set(p, 'value', value);
-                }
-            },
+            ...Vuex.mapActions('signalr', ['invokeGetParameters']),
             isNumberType(type) {
                 const numberTypes = ['System.Int32','System.Int64','System.Single','System.Double','System.Decimal'];
                 return numberTypes.includes(type);
@@ -145,37 +140,22 @@
             },
             getClixmls() {
                 return this.parameters.reduce((o, p) => {
-                    if (p.value !== undefined) {
-                        o[p.name] = createCliXml(p.type, p.value);
+                    if (this.value[p.name] !== undefined) {
+                        o[p.name] = createCliXml(p.type, this.value[p.name]);
                     }
                     return o;
                 }, {});
             },
-            getPageSize() {
-                const p = this.parameters.find(p => p.name == 'PageSize');
-                return p ? parseInt(p.value) : null;
-            },
             emitRun() {
-                this.$emit('run', this.getClixmls());
+                this.$emit('run', {
+                    value: this.getClixmls(),
+                    page: this.value.Page - 0 + 1,
+                    pageSize: this.value.PageSize - 0
+                });
             },
-            getParameters() {
-                this.loadingParams = true;
-                this.$signalr.invoke('GetParameters', this.script);
-            }
         },
         mounted() {
-            this.$signalr.on("GetParameters", parameters => {
-                this.parameters.splice(0, this.parameters.length, ...parameters);
-                this.setPage(this.page);
-                this.setPageSize(this.pageSize);
-                this.loadingParams = false;
-            })
-            this.$signalr.onconnected(() => {
-                this.getParameters();
-            })
-        },
-        beforeDestroy() {
-            this.$signalr.off('DetailResult')
+            this.invokeGetParameters({ scriptId: this.script });
         }
     })
 </script>
\ No newline at end of file
diff --git a/src/Aiplugs.PoshApp/Views/Shared/Pages/Singleton.cshtml b/src/Aiplugs.PoshApp/Views/Shared/Pages/Singleton.cshtml
index 324c6c3..454dce0 100644
--- a/src/Aiplugs.PoshApp/Views/Shared/Pages/Singleton.cshtml
+++ b/src/Aiplugs.PoshApp/Views/Shared/Pages/Singleton.cshtml
@@ -3,33 +3,37 @@
         <header>
             <v-row class="pl-4 pr-4" style="width: 100%;">
                 <v-col cols="12" class="pt-0 pb-0">
-                    <parameters-form ref="form" :script="scriptId" :loading="loading=='$run'" :disabled="disabled" v-on:run="run"></parameters-form>
+                    <parameters-form ref="form" 
+                                     :script="scriptId" 
+                                     :loading="invoking=='$default'" 
+                                     :disabled="disabled" 
+                                     v-on:run="run">
+                    </parameters-form>
                 </v-col>
             </v-row>
             <v-row class="pl-4 pr-4">
-                <v-btn text v-for="action in actions" :key="action.name" :loading="loading==action.id" :disabled="disabled" v-on:click="invokeAction(action.id)" retain-focus-on-click>{{action.displayName || action.id}}</v-btn>
+                <v-btn text v-for="action in actions" 
+                       :key="action.name" 
+                       :loading="invoking==action.id" 
+                       :disabled="disabled" 
+                       v-on:click="invokeAction({scriptId:action.id, input: null})" 
+                       retain-focus-on-click>{{action.displayName || action.id}}</v-btn>
             </v-row>
         </header>
         <v-divider></v-divider>
         <div class="flex scroll-content">
-            <data-viewer :data="data"></data-viewer>
+            <data-viewer :data="defaultResult"></data-viewer>
         </div>
         <v-btn fab dark text color="grey" style="position: absolute; bottom: 8px; right: 8px;" v-on:click="gotoEditor">
             <v-icon>mdi-xml</v-icon>
         </v-btn>
     </div>
 </template>
-<script type="module">
-    import { parsePSDataCollection } from '/js/clixml.js'
+<script>
     Vue.component('SingletonPage', {
         template: '#singleton-page-component',
-        data() {
-            return {
-                data: null,
-                loading: null
-            }
-        }, 
         computed: {
+            ...Vuex.mapState('signalr', ['invoking', 'defaultResult']),
             scriptId() {
                 return `${this.$route.params.repo}:${this.$route.params.id}`;
             },
@@ -38,38 +42,16 @@
                 return this.$store.getters['scripts/findActions'](repo, id);
             },
             disabled() {
-                return !!this.loading
+                return this.invoking != null
             }
         },
         methods: {
-            ...Vuex.mapActions('toast', ['toast']),
+            ...Vuex.mapActions('signalr', ['invokeDefault', 'invokeAction', 'clearResult']),
             init() {
-                this.data = null;
-                this.$signalr.on('DefaultResult', json => {
-                    this.loading = null;
-                    this.data = parsePSDataCollection(JSON.parse(json));
-                });
-                this.$signalr.on("ActionResult", (id, json) => {
-                    this.loading = null;
-                    const data = JSON.parse(json);
-                    this.toast({
-                        text: `${id} is succeeded` ,
-                        color: "info",
-                        top: true,
-                        right: true
-                    });
-                })
-                this.$signalr.on('UnitResult', () => {
-                    this.loading = null;
-                })
-            },
-            run(value) {
-                this.loading = '$run';
-                this.$signalr.invoke('Invoke', this.scriptId, value);
+                this.clearResult();
             },
-            invokeAction(id) {
-                this.loading = id;
-                this.$signalr.invoke('InvokeAction', id, null);
+            run({ value }) {
+                this.invokeDefault({ scriptId: this.scriptId, input: value });
             },
             gotoEditor() {
                 this.$router.push(`/scripts/${this.$route.params.repo}/${this.$route.params.id}`)
@@ -81,12 +63,6 @@
         beforeRouteUpdate (to, from, next) {
             this.init();  
             next();
-        },
-        beforeRouteLeave (to, from , next) {
-            this.$signalr.off('DefaultResult');
-            this.$signalr.off('ActionResult');
-            this.$signalr.off('UnitResult');
-            next();
         }
     })
 </script>   
\ No newline at end of file
diff --git a/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/Log.cshtml b/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/Log.cshtml
index fe5ebe8..a834e24 100644
--- a/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/Log.cshtml
+++ b/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/Log.cshtml
@@ -11,7 +11,7 @@
         </template>
         <div class="black d-flex flex-column overflow-y-auto no-scrollbar" style="width: 600px; height: 600px; scroll-behavior: smooth;">
             <div style="flex: 1;"></div>
-            <pre v-for="(message, index) in messages" :key="index"
+            <pre v-for="(message, index) in logMessages" :key="index"
                  v-text="message.text"
                  :class="resolveColor(message)" class="pl-4 pr-4" style="white-space:pre-wrap;"></pre>
             <div class="black text-right" ref="bottom" style="position:sticky;bottom:0;width:100%;">
@@ -25,16 +25,21 @@
 <script>
     Vue.component('powershelluilog', {
         template: '#powershell-ui-log-component',
-        props: {
-            max: {
-                type: Number,
-                default: 30
-            }
-        },
         data() {
             return {
                 dialog: false,
-                messages: []
+            }
+        },
+        computed: {
+            ...Vuex.mapState('signalr', ['logMessages'])
+        },
+        watch: {
+            logMessages() {
+                this.dialog = true;
+                Vue.nextTick()
+                    .then(() => {
+                        this.scrollDown();
+                    })
             }
         },
         methods: {
@@ -44,24 +49,9 @@
                 const backgroudColors = ['black', 'blue darken-4', 'green darken-4', 'cyan darken-4', 'red darken-4', 'pink darken-4', 'yellow darken-4', 'grey', 'grey darken-4', 'blue', 'green', 'cyan', 'red', 'pink', 'yellow', 'white']
                 return [...foregroundColors[color].split(' '), ...backgroudColors[bgColor].split(' ')]
             },
-            write(color, bgColor, text) {
-                if (this.messages.length > this.max) {
-                    this.messages.shift()
-                }
-                this.messages.push({color, bgColor, text})
-                this.dialog = true;
-                requestIdleCallback(() => {
-                    this.$refs.bottom.parentElement.parentElement.scrollTo(0, this.$refs.bottom.offsetTop)
-                })
+            scrollDown() {
+                this.$refs.bottom.parentElement.scrollTo(0, this.$refs.bottom.parentElement.scrollHeight)
             }
         },
-        mounted() {
-            this.$signalr.on("WriteWithColor", (color, bgColor, text) => {
-                this.write(color, bgColor, text);
-            })
-            this.$signalr.on("WriteWarningLine", message => {
-                this.write(6, 0, message);
-            })
-        }
     })
 </script>
\ No newline at end of file
diff --git a/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/LogForError.cshtml b/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/LogForError.cshtml
index 1b70bbd..d074fd3 100644
--- a/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/LogForError.cshtml
+++ b/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/LogForError.cshtml
@@ -1,14 +1,15 @@
 <template id="powershell-ui-log-error-component">
-    <v-dialog v-model="dialog" max-width="600px">
+    <v-dialog :value="logErrors != null" max-width="600px">
         <v-card>
             <v-card-title class="headline red--text">
                 Error
             </v-card-title>
-            <v-card-text class="overflow-y-auto" style="white-space: pre-wrap; max-height:70vh;">{{message}}</v-card-text>
+            <v-card-text class="overflow-y-auto"
+                         style="white-space: pre-wrap; max-height:70vh;">{{logErrors}}</v-card-text>
             <v-divider></v-divider>
             <v-card-actions>
                 <v-spacer></v-spacer>
-                <v-btn text v-on:click="dialog = false">
+                <v-btn text v-on:click="clearError">
                     CLOSE
                 </v-btn>
             </v-card-actions>
@@ -24,25 +25,11 @@
                 message: null
             }
         },
+        computed: {
+            ...Vuex.mapState('signalr', ['logErrors'])
+        },
         methods: {
-            format(text) {
-                return text.replace(/\r\n/g, '\n').split('\n').filter(line => !line.match(/^\s*$/)).join('\n');
-            }
+            ...Vuex.mapMutations('signalr', ['clearError'])
         },
-        mounted() {
-            this.$signalr.on("WriteErrorLine", value => {
-                if (this.dialog) {
-                    this.message += '\n\n' + this.format(value);
-                }
-                else {
-                    this.message = this.format(value);
-                    this.dialog = true;
-                }
-            })
-            this.$signalr.on("ParseError", value => {
-                this.message = value;
-                this.dialog = true;
-            })
-        }
     })
 </script>
\ No newline at end of file
diff --git a/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/Progress.cshtml b/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/Progress.cshtml
index 7b4cbd3..191b580 100644
--- a/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/Progress.cshtml
+++ b/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/Progress.cshtml
@@ -1,72 +1,32 @@
 <template id="powershell-ui-progress-component">
-    <span>
-        <span class="d-flex align-center" v-for="(progress, activityId) in progresses" :key="activityId" v-if="!dialog">
-            {{progress.activity}}
-            <v-progress-linear color="light-blue"
-                               height="10"
-                               striped
-                               :value="progress.percentComplete"
-                               style="width: 100px;">
-            </v-progress-linear>
-        </span>
-        <v-dialog v-model="dialog" max-width="600px">
-            <v-card>
-                <v-card-text>
-                    <v-list>
-                        <v-list-item v-for="(progress, activityId) in progresses" :key="activityId">
-                            <v-list-item-content>
-                                <v-list-item-title>{{progress.activity}}</v-list-item-title>
-                                <v-progress-linear color="light-blue"
-                                                   height="10"
-                                                   striped
-                                                   :value="progress.percentComplete">
-                                </v-progress-linear>
-                                <v-list-item-subtitle>{{progress.statusDescription}}: {{progress.currentOperation}}</v-list-item-subtitle>
-                            </v-list-item-content>
-                        </v-list-item>
-                    </v-list>
-                </v-card-text>
-                <v-divider></v-divider>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn text v-on:click="close=true">CLOSE</v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-    </span>
+    <v-dialog :value="progressesLength > 0" max-width="600px">
+        <v-card>
+            <v-card-text>
+                <v-list>
+                    <v-list-item v-for="(progress, activityId) in progresses" :key="activityId">
+                        <v-list-item-content>
+                            <v-list-item-title>{{progress.activity}}</v-list-item-title>
+                            <v-progress-linear color="light-blue"
+                                               height="10"
+                                               striped
+                                               :value="progress.percentComplete">
+                            </v-progress-linear>
+                            <v-list-item-subtitle>{{progress.statusDescription}}: {{progress.currentOperation}}</v-list-item-subtitle>
+                        </v-list-item-content>
+                    </v-list-item>
+                </v-list>
+            </v-card-text>
+        </v-card>
+    </v-dialog>
 </template>
 <script>
     Vue.component('powershelluiprogress', {
         template: '#powershell-ui-progress-component',
-        data() {
-            return {
-                close: false,
-                progresses: {},
-            }
-        },
         computed: {
-            dialog: {
-                get() {
-                    return this.progressesLength > 0 && !this.close;
-                },
-                set(value) {
-                    this.close = !value;
-                }
-            },
+            ...Vuex.mapState('signalr', ['progresses']),
             progressesLength() {
                 return Object.keys(this.progresses).filter(name => !name.startsWith('_')).length;
             }
-        },
-        mounted() {
-            this.$signalr.on('WriteProgress', (sourceId, progress) => {
-                this.$set(this.progresses, progress.activityId, progress);
-                if (progress.percentComplete == 100) {
-                    this.$delete(this.progresses, progress.activityId);
-                    if (this.progressesLength === 0) {
-                        this.close = false;
-                    }
-                }
-            })
         }
     })
 </script>
\ No newline at end of file
diff --git a/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/ProgressForGit.cshtml b/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/ProgressForGit.cshtml
index 3114151..af27337 100644
--- a/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/ProgressForGit.cshtml
+++ b/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/ProgressForGit.cshtml
@@ -1,38 +1,13 @@
 <template id="powershell-ui-progress-for-git-component">
-    <span class="d-flex align-center" v-if="progress.length > 0">
-        {{name}}:{{text}}
+    <span class="d-flex align-center" v-if="gitClone != null">
+        {{gitClone.name}}:{{gitClone.progress}}
     </span>
 </template>
 <script>
     Vue.component('powershelluiprogressforgit', {
         template: '#powershell-ui-progress-for-git-component',
-        data() {
-            return {
-                name: null,
-                text: null,
-                progress: []
-            }
-        },
-        methods: {
-            shift() {
-                if (this.progress.length > 0) {
-                    this.text = this.progress.shift();
-                }
-            },
-            update() {
-                this.shift(); setTimeout(() => this.update(), 10);
-            }
-        },
-        mounted() {
-            this.$signalr.on('GitProgress', (name, progress) => {
-                this.name = name;
-                this.progress.push(progress);
-                if (this.text == null)
-                    this.update();
-            })
-            this.$signalr.on('GitClone', name => {
-                this.progress.push(null);
-            })
+        computed: {
+            ...Vuex.mapState('signalr', ['gitClone'])
         }
     })
 </script>
\ No newline at end of file
diff --git a/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/Prompt.cshtml b/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/Prompt.cshtml
index 82cb6d2..737aa9b 100644
--- a/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/Prompt.cshtml
+++ b/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/Prompt.cshtml
@@ -1,13 +1,13 @@
 <template id="powershell-ui-prompt-component">
-    <v-dialog v-model="dialog" max-width="600px" persistent>
-        <v-card>
+    <v-dialog :value="prompt != null" max-width="600px" persistent>
+        <v-card v-if="prompt != null">
             <v-card-title class="headline" primary-title>
-                {{caption}}
+                {{prompt.caption}}
             </v-card-title>
             <v-card-text>
-                <p style="white-space: pre-wrap">{{message}}</p>
+                <p style="white-space: pre-wrap">{{prompt.message}}</p>
                 <v-form ref="form" v-model="valid">
-                    <div v-for="(desc, index) in descriptions" :key="index">
+                    <div v-for="(desc, index) in prompt.descriptions" :key="index">
                         <v-text-field ref="fields"
                                       :label="desc.label||desc.name"
                                       :data-name="desc.name"
@@ -54,17 +54,19 @@
         template: '#powershell-ui-prompt-component',
         data() {
             return {
-                dialog: false,
-                caption: null,
-                message: null,
-                descriptions: [],
                 valid: false,
                 value: {},
                 menu: {},
                 textfieldTypes: ['System.String','System.Int32','System.Int64','System.Float','System.Double','System.Decimal']
             }
         },
+        computed: {
+            ...Vuex.mapState('signalr', ['prompt']),
+            ...Vuex.mapState('ipc', ['selectedDirectory', 'selectedFile'])
+        },
         methods: {
+            ...Vuex.mapActions('signalr', ['invokePrompt']),
+            ...Vuex.mapActions('ipc', ['selectDirectory', 'selectFile', 'clearSelected']),
             supportFileManager(desc) {
                 return desc.parameterTypeFullName === 'System.String' && desc.name.toLowerCase().endsWith('path');
             },
@@ -91,8 +93,8 @@
                 return result;
             },
             handlePrompt() {
-                const model = {};
-                for (let desc of this.descriptions) {
+                const input = {};
+                for (let desc of this.prompt.descriptions) {
                     let value = null;
                     if (desc.parameterTypeFullName == 'System.DateTime') {
                        value = new Date(this.value[desc.name]).toJSON();
@@ -100,51 +102,48 @@
                     else {
                        value = this.value[desc.name];
                     }
-                    model[desc.name] = createCliXml(desc.parameterTypeFullName, value);
+                    input[desc.name] = createCliXml(desc.parameterTypeFullName, value);
                 }
-                this.$signalr.invoke('Prompt', model);
+                this.invokePrompt({ input });
+                this.clearSelected();
+                this.$refs.form.reset();
                 this.dialog = false;
             },
             openDirManager(desc) {
-                if (desc.parameterTypeFullName.endsWith('[]') || desc.parameterTypeFullName.startsWith('IEnumerable')) {
-                    ipcRenderer.send('select-directories', desc.name);
-                }
-                else {
-                    ipcRenderer.send('select-directory', desc.name);
-                }
+                this.selectDirectory({ name: desc.name });
             }, 
             openFileManager(desc) {
-                if (desc.parameterTypeFullName.endsWith('[]') || desc.parameterTypeFullName.startsWith('IEnumerable')) {
-                    ipcRenderer.send('select-files', desc.name);
-                }
-                else {
-                    ipcRenderer.send('select-file', desc.name);
-                }
+                this.selectFile({ name: desc.name });
             }
         },
-        mounted() {
-            this.$signalr.on('Prompt', (caption, message, descriptions) => {
-                this.caption = caption;
-                this.message = message;
-                this.descriptions.splice(0, this.descriptions.length, ...descriptions);
-                for (let desc of this.descriptions) {
-                    this.$set(this.value, desc.name, desc.defaultValue);
+        watch: {
+            prompt(o) {
+                if (o != null) {
+                    for (let desc of o.descriptions) {
+                        this.$set(this.value, desc.name, desc.defaultValue);
+                    }
                 }
-                this.dialog = true;
-                this.$refs.form.reset();
-            })
-            ipcRenderer.on('select-directories-reply', (sender, path, name) => {
-                this.value[name] = path;
-            });
-            ipcRenderer.on('select-directory-reply', (sender, path, name) => {
-                this.value[name] = path;
-            });
-            ipcRenderer.on('select-files-reply', (sender, path, name) => {
-                this.value[name] = path;
-            });
-            ipcRenderer.on('select-file-reply', (sender, path, name) => {
-                this.value[name] = path;
-            });
+            },
+            selectedDirectory(o) {
+                if (this.prompt != null) {
+                    const keys = Object.keys(o).filter(key => !key.startsWith('_'));
+                    for (let desc of this.prompt.descriptions) {
+                        if (keys.includes(desc.name)) {
+                            this.$set(this.value, desc.name, o[desc.name]);
+                        }
+                    }
+                }
+            },
+            selectedFile(o) {
+                if (this.prompt != null) {
+                    const keys = Object.keys(o).filter(key => !key.startsWith('_'));
+                    for (let desc of this.prompt.descriptions) {
+                        if (keys.includes(desc.name)) {
+                            this.$set(this.value, desc.name, o[desc.name]);
+                        }
+                    }
+                }
+            }
         }
     })
 </script>
\ No newline at end of file
diff --git a/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/PromptForChoice.cshtml b/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/PromptForChoice.cshtml
index c3d3a76..e047b53 100644
--- a/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/PromptForChoice.cshtml
+++ b/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/PromptForChoice.cshtml
@@ -1,13 +1,13 @@
 <template id="powershell-ui-prompt-for-choice-component">
-    <v-dialog v-model="dialog" max-width="600px" persistent>
-        <v-card>
+    <v-dialog :value="promptForChoice != null" max-width="600px" persistent>
+        <v-card v-if="promptForChoice != null">
             <v-card-title class="headline" primary-title>
-                {{caption}}
+                {{promptForChoice.caption}}
             </v-card-title>
             <v-card-text>
-                <p style="white-space: pre-wrap">{{message}}</p>
+                <p style="white-space: pre-wrap">{{promptForChoice.message}}</p>
                 <table>
-                    <tr v-for="(choice, index) in choices" :key="index">
+                    <tr v-for="(choice, index) in promptForChoice.choices" :key="index">
                         <td>{{format(choice.label)}}</td>
                         <td>{{choice.helpMessage}}</td>
                     </tr>
@@ -16,9 +16,9 @@
             <v-divider></v-divider>
             <v-card-actions>
                 <v-spacer></v-spacer>
-                <v-btn text v-for="(choice, index) in choices"
+                <v-btn text v-for="(choice, index) in promptForChoice.choices"
                        :key="index"
-                       :color="index==defaultChoice?'primary':null"
+                       :color="index==promptForChoice.defaultChoice?'primary':null"
                        v-on:click="select(index)">
                     {{format(choice.label)}}
                 </v-btn>
@@ -29,32 +29,17 @@
 <script>
     Vue.component('powershelluipromptforchoice', {
         template: '#powershell-ui-prompt-for-choice-component',
-        data() {
-            return {
-                dialog: false,
-                caption: null,
-                message: null,
-                choices: [],
-                defaultChoice: 0
-            }
+        computed: {
+            ...Vuex.mapState('signalr', ['promptForChoice'])
         },
         methods: {
+            ...Vuex.mapActions('signalr', ['invokePromptForChoice']),
             format(label) {
                 return (label||'').replace(/&/, '');
             },
             select(index) {
-                this.$signalr.invoke('PromptForChoice', index);
-                this.dialog = false;
+                this.invokePromptForChoice({ index });
             }
-        },
-        mounted() {
-            this.$signalr.on('PromptForChoice', (caption, message, choices, defaultChoice) => {
-                this.caption = caption;
-                this.message = message;
-                this.choices.splice(0, this.choices.length, ...choices);
-                this.defaultChoice = defaultChoice;
-                this.dialog = true;
-            })
         }
     })
 </script>
\ No newline at end of file
diff --git a/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/PromptForCredential.cshtml b/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/PromptForCredential.cshtml
index 9ed4a68..0f3449c 100644
--- a/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/PromptForCredential.cshtml
+++ b/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/PromptForCredential.cshtml
@@ -1,12 +1,12 @@
 <template id="powershell-ui-prompt-for-credential-component">
-    <v-dialog v-model="dialog" max-width="600px" persistent>
-        <v-card>
+    <v-dialog :value="promptForCredential != null" max-width="600px" persistent>
+        <v-card v-if="promptForCredential != null">
             <v-card-title class="headline grey lighten-2" primary-title>
-                {{caption}}
+                {{promptForCredential.caption}}
             </v-card-title>
             <v-card-text>
                 <v-container>
-                    <p style="white-space: pre-wrap">{{message}}</p>
+                    <p style="white-space: pre-wrap">{{promptForCredential.message}}</p>
                     <v-form ref="form" v-model="valid">
                         <v-text-field label="Username"
                                       v-model="username"
@@ -39,60 +39,27 @@
         template: '#powershell-ui-prompt-for-credential-component',
         data() {
             return {
-                dialog: false,
-                caption: null,
-                message: null,
                 username: null,
                 password: null,
                 valid: false,
-                forGit: false,
             }
         },
+        computed: {
+            ...Vuex.mapState('signalr', ['promptForCredential']),
+        },
         methods: {
+            ...Vuex.mapActions('signalr', ['invokePromptForCredential', 'invokePromptForGitCredential']),
             async handlePromptForCredential() {
-                const methodName = this.forGit ? "PromptForGitCredential" : "PromptForCredential";
-                await this.$signalr.invoke(methodName, this.username, this.password);
-                this.dialog = false;
-                this.valid = true;
-            }
-        },
-        mounted() {
-            this.$signalr.on("PromptForCredential", (caption, message, userName, targetName) => {
-                this.dialog = true;
-                this.forGit = false;
-                this.caption = caption;
-                this.message = message;
-                this.$refs.form.reset();
-                this.username = userName;
-                this.password  = null;
-            })
-            this.$signalr.on("PromptForCredentialWithType", (caption, message, userName, targetName, allowedCredentialTypes) => {
-                this.dialog = true;
-                this.forGit = false;
-                this.caption = caption;
-                this.message = message;
-                this.$refs.form.reset();
-                this.username = userName;
-                this.password  = null;
-            })
-            this.$signalr.on("PromptForGitCredential", (url, usernameFromUrl) => {
-                this.dialog = true;
-                this.forGit = true;
-                this.caption = "Git Credential";
-                this.message = url;
-                this.$refs.form.reset();
-                this.username = usernameFromUrl;
+                const payload = { username: this.username, password: this.password };
+                if (this.promptForCredential.forGit) {
+                    await this.invokePromptForGitCredential(payload)
+                }
+                else {
+                    await this.invokePromptForCredential(payload)
+                }
+                this.username = null;
                 this.password = null;
-            })
-            this.$signalr.on("WriteDebugLine", value => {
-                console.log(value);
-            })
-            this.$signalr.on("WriteVerboseLine", value => {
-                console.log(value);
-            })
-            this.$signalr.on("WriteWarningLine", value => {
-                console.log(value);
-            })
+            }
         }
     })
 </script>
\ No newline at end of file
diff --git a/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/Status.cshtml b/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/Status.cshtml
index d402177..9e2b2fb 100644
--- a/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/Status.cshtml
+++ b/src/Aiplugs.PoshApp/Views/Shared/PowershellUI/Status.cshtml
@@ -3,15 +3,15 @@
         <span :title="text" class="d-flex align-center">
             <v-icon small :class="color">{{icon}}</v-icon>
         </span>
-        <v-dialog v-model="dialog" width="600">
+        <v-dialog :value="status === 'close'" width="600">
             <v-card>
                 <v-card-title>Connectioin Error</v-card-title>
                 <v-card-text>
-                    Cannot connect poshapp backend service.
+                    Cannot connect POSH App backend service.
                 </v-card-text>
                 <v-card-actions>
                     <v-spacer></v-spacer>
-                    <v-btn text v-on:click="dialog=false">OK</v-btn>
+                    <v-btn text v-on:click="reconnect">Reconnect</v-btn>
                 </v-card-actions>
             </v-card>
         </v-dialog>
@@ -22,38 +22,37 @@
         template: '#powershell-ui-status-component',
         data() {
             return {
-                text: null,
-                color: [],
-                icon: 'md mdi-circle-off-outline',
                 dialog: false
             }
         },
-        mounted() {
-            this.$signalr.onclose(err => {
-                this.text = "Close";
-                this.icon = "md mdi-circle-off-outline";
-                this.color.splice(0, 1, 'red--text');
-            })
-            this.$signalr.onreconnecting(err => {
-                this.text = "Reconnecting...";
-                this.icon = "mdi-dots-horizontal";
-                this.color.splice(0, 1, 'red--text');
-            })
-            this.$signalr.onreconnected(connectedId => {
-                this.text = "Connected";
-                this.icon = "mdi-circle-outline";
-                this.color.splice(0);
-            })
-            this.$signalr.start().then(() => {
-                this.text = "Connected";
-                this.icon = "mdi-circle-outline";
-                this.color.splice(0);
-            }).catch(() => {
-                this.text = "Faild";
-                this.icon = "md mdi-circle-off-outline";
-                this.color.splice(0, 1, 'red--text');
-                this.dialog = true;
-            })
+        computed: {
+            ...Vuex.mapState('signalr', ['status']),
+            text() {
+                switch (this.status) {
+                    case 'connected': return 'Connected';
+                    case 'connecting': return 'Connecting...';
+                    case 'reconnecting': return 'Reconnecting...';
+                    case 'faild': return 'Faild';
+                    case 'close': return 'Close';
+                    default: return 'Unknown';
+                }
+            },
+            icon() {
+                switch (this.status) {
+                    case 'connected': return 'mdi-circle-outline';
+                    case 'connecting': return 'mdi-dots-horizontal';
+                    case 'reconnecting': return 'mdi-dots-horizontal';
+                    case 'faild': return 'md mdi-circle-off-outline';
+                    case 'close': return 'md mdi-circle-off-outline';
+                    default: return 'md mdi-circle-off-outline';
+                }
+            },
+            color() {
+                return this.status !== 'connected' ? ['red--text'] : [];
+            }
+        },
+        methods: {
+            ...Vuex.mapActions('signalr',['reconnect'])
         }
     })
 </script>
\ No newline at end of file
diff --git a/src/Aiplugs.PoshApp/Views/Shared/Repositories/Index.cshtml b/src/Aiplugs.PoshApp/Views/Shared/Repositories/Index.cshtml
index dc07808..17cc178 100644
--- a/src/Aiplugs.PoshApp/Views/Shared/Repositories/Index.cshtml
+++ b/src/Aiplugs.PoshApp/Views/Shared/Repositories/Index.cshtml
@@ -5,7 +5,7 @@
         <v-dialog v-model="resetDialog" width="600" v-if="modified">
             <template v-slot:activator="{on}">
                 <v-btn text color="primary" v-on="on">
-                    Remove Modified <v-chip x-small color="primary">{{status.length}}</v-chip>
+                    Remove Modified <v-chip x-small color="primary">{{gitStatus.length}}</v-chip>
                 </v-btn>
             </template>
             <v-card>
@@ -15,7 +15,7 @@
                 <v-card-text>
                     <table>
                         <tbody>
-                            <tr v-for="(item, index) in status" :key="index">
+                            <tr v-for="(item, index) in gitStatus" :key="index">
                                 <td>{{item.state}}</td>
                                 <td>{{item.script}}</td>
                             </tr>
@@ -29,11 +29,11 @@
                 </v-card-actions>
             </v-card>
         </v-dialog>
-        <span v-if="message">{{message}}</span>
-        <v-data-table :headers="headers" :items="items" item-key="commit" single-expand show-expand hide-default-footer>
+        <span v-if="gitLogMessage">{{gitLogMessage}}</span>
+        <v-data-table :headers="headers" :items="gitLog.logs" item-key="commit" single-expand show-expand hide-default-footer v-if="gitLog != null">
             <template v-slot:item.tag="{item}">
-                <v-chip v-if="item.commit == origin" color="primary">ORIGIN</v-chip>
-                <v-chip v-if="item.commit == local">LOCAL</v-chip>
+                <v-chip v-if="item.commit == gitLog.origin" color="primary">ORIGIN</v-chip>
+                <v-chip v-if="item.commit == gitLog.local">LOCAL</v-chip>
             </template>
             <template v-slot:item.commit="{item}">
                 {{item.commit.substring(0,7)}}
@@ -59,90 +59,49 @@
             return {
                 expanded: [],
                 headers: [
-                    { text: '',       value:'tag', sortable: false },
-                    { text: 'Commit', value:'commit', sortable: false },
-                    { text: 'Message', value:'messageShort', sortable: false },
+                    { text: '', value: 'tag', sortable: false },
+                    { text: 'Commit', value: 'commit', sortable: false },
+                    { text: 'Message', value: 'messageShort', sortable: false },
                     { text: '', value: 'data-table-expand' },
-                    { text: 'Author', value:'author', sortable: false },
-                    { text: 'Time', value:'when', sortable: false },
+                    { text: 'Author', value: 'author', sortable: false },
+                    { text: 'Time', value: 'when', sortable: false },
                 ],
-                items: [],
-                origin: null,
-                local: null,
-                message: null,
-                status: [],
                 resetDialog: false,
             }
         },
         computed: {
+            ...Vuex.mapState('signalr', ['gitLog', 'gitLogMessage', 'gitStatus']),
             updatable() {
-                return this.origin
-                    && this.origin != this.local
-                    && this.items.findIndex(item => item.commit == this.origin) < this.items.findIndex(item => item.commit == this.local)
+                return this.gitLog
+                    && this.gitLog.origin != this.gitLog.local
+                    && this.gitLog.logs.findIndex(item => item.commit == this.origin) < this.gitLog.logs.findIndex(item => item.commit == this.local)
             },
             modified() {
-                return this.status.length > 0;
+                return this.gitStatus.length > 0;
             }
         },
         methods: {
-            init() {
-                this.$signalr.on('GitLog', (name, logs, origin, local) => {
-                    if (this.$route.params.id == name) {
-                        this.items.splice(0, this.items.length, ...logs);
-                        this.origin = origin;
-                        this.local = local;
-                        this.message = !origin ? 'This repository does not have remote origin/master branch.' : null;
-                    }
-                })
-                this.$signalr.on('GitLogNotFound', name => {
-                    if (this.$route.params.id == name) {
-                        this.items.splice(0);
-                        this.status.splice(0);
-                        this.origin = null;
-                        this.local = null;
-                        this.message = 'This repository have not initialized git.'
-                    }
-                })
-                this.$signalr.on('GitFetchProgress', (name, progress) => {
-                    if (this.$route.params.id == name) {
-                        this.message = progress
-                    }
-                })
-                this.$signalr.on('GitStatus', (name, status) => {
-                    if (this.$route.params.id == name) {
-                        this.status.splice(0, this.status.length, ...status);
-                    }
-                })
-            },
+            ...Vuex.mapActions('signalr', ['invokeGitLog', 'invokeGitForcePull', 'invokeGitReset']),
+            ...Vuex.mapActions('ipc', ['openRepositoryDir']),
             getLog(repositoryName) {
-                this.$signalr.invoke('GitLog', repositoryName);
+                this.invokeGitLog({ repositoryName });
             },
             handleOpen() {
-                ipcRenderer.send('open-repository-dir', this.$route.params.id);
+                this.openRepositoryDir({ repositoryName: this.$route.params.id });
             },
             handleUpdate() {
-                this.$signalr.invoke('GitForcePull', this.$route.params.id);
+                this.invokeGitForcePull({ repositoryName: this.$route.params.id });
             },
             handleReset() {
-                this.$signalr.invoke('GitReset', this.$route.params.id);
+                this.invokeGitReset({ repositoryName: this.$route.params.id });
             }
         },
         mounted() {
-            this.init();
-            this.$signalr.onconnected(() => {
-                this.getLog(this.$route.params.id)
-            }) 
+            this.getLog(this.$route.params.id);
         },
         beforeRouteUpdate (to, from, next) {
             this.getLog(to.params.id)
             next();
         },
-        beforeRouteLeave (to, from , next) {
-            this.$signalr.off('GitLog');
-            this.$signalr.off('GitLogNotFound');
-            this.$signalr.off('GitFetchProgress');
-            this.$signalr.off('GitStatus');
-            next();
-        }
     })
 </script>
\ No newline at end of file
diff --git a/src/Aiplugs.PoshApp/Views/Shared/Repositories/Nav.cshtml b/src/Aiplugs.PoshApp/Views/Shared/Repositories/Nav.cshtml
index 4eeebec..0298ba0 100644
--- a/src/Aiplugs.PoshApp/Views/Shared/Repositories/Nav.cshtml
+++ b/src/Aiplugs.PoshApp/Views/Shared/Repositories/Nav.cshtml
@@ -52,7 +52,7 @@
                             </v-text-field>
                             <div class="d-flex align-center">
                                 <v-text-field label="Directory Path"
-                                              v-model="path"
+                                              :value="path"
                                               :rules="pathRules"
                                               :disabled="readonlyPath"
                                               readonly
@@ -102,7 +102,6 @@
             return {
                 openNewDialog: false,
                 name: null,
-                path: null,
                 origin: null,
                 readonlyOrigin: false,
                 readonlyPath: false,
@@ -124,13 +123,19 @@
             }
         },
         computed: {
+            ...Vuex.mapState('ipc', ['selectedDirectory']),
+            ...Vuex.mapState('signalr', ['connectionId']),
             ...Vuex.mapState('repositories', ['repositories']),
             ...Vuex.mapGetters('activation', ['exceededFreePlanForRepositories']),
+            path() {
+                return this.selectedDirectory.repository;
+            },
             deleteDialog() {
                 return this.deleteTarget != null;
             }
         },
         methods: {
+            ...Vuex.mapActions('ipc', ['selectDirectory']),   
             ...Vuex.mapActions('repositories', ['loadRepositories', 'createRepository', 'updateRepository', 'deleteRepository']),   
             ...Vuex.mapMutations('activation', ['showActivationNotice']),
             async handleDelete() {
@@ -145,7 +150,7 @@
                     name: this.name,
                     path: this.path,
                     origin: this.origin,
-                    connectionId: this.$signalr.connectionId
+                    connectionId: this.connectionId
                 };
                 await this.createOrUpdate(payload);
                 this.openNewDialog = false;
@@ -168,7 +173,6 @@
             clearDialogModel() {
                 this.repositoryId = null;
                 this.name = null;
-                this.path = null;
                 this.origin = null;
                 this.readonlyPath = false;
                 this.readonlyOrigin = false;
@@ -178,7 +182,6 @@
                 if (data) {
                     this.repositoryId = data.name;
                     this.name = data.name;
-                    this.path = data.path;
                     this.origin = data.origin;
                     this.readonlyPath = true;
                     this.readonlyOrigin = !!this.origin;
@@ -204,26 +207,11 @@
                 this.deleteTarget = repository;
             },
             openFileManager() {
-                ipcRenderer.send('select-repository-path');
+                this.selectDirectory({ name: 'repository' });
             }
         },
-        async mounted() {
-            await this.loadRepositories();
-            ipcRenderer.on('select-repository-path-reply', (sender, path) => {
-                this.path = path;
-            });
-            this.$signalr.on('GitCloneFaild', name => {
-                this.deleteRepository({ name });
-            });
-        },
-        beforeRouteLeave(to, from, next) {
-            const len = Math.min(to.path.length, from.path.length)
-            const sameRoute = to.path.substring(0, len) === from.path.substring(0, len);
-            if (!sameRoute) {
-                ipcRenderer.removeAllListeners('select-repository-path-reply');
-                this.$signalr.off('GitCloneFaild');
-            }
-            next();
+        mounted() {
+            this.loadRepositories();
         }
     })
 </script>
\ No newline at end of file
diff --git a/src/Aiplugs.PoshApp/Views/Shared/Settings/Activation.cshtml b/src/Aiplugs.PoshApp/Views/Shared/Settings/Activation.cshtml
index 5ae0682..cdcf0fd 100644
--- a/src/Aiplugs.PoshApp/Views/Shared/Settings/Activation.cshtml
+++ b/src/Aiplugs.PoshApp/Views/Shared/Settings/Activation.cshtml
@@ -101,22 +101,31 @@
         },
         methods: {
             ...Vuex.mapActions('activation', ['activate', 'refleshActivationCode']),
+            ...Vuex.mapActions('ipc', ['copyTo']),
             openEx() {
                 ipcRenderer.send("open-activation");
             },
             async copyRequestCode() {
-                await ipcRenderer.send("copy-to", this.requestCode);
+                await this.copyTo(this.requestCode);
                 alert("Copied!");
             },
             async handleReflesh() {
-                this.loading = true;
-                await this.refleshActivationCode();
-                this.loading = false;
+                try {
+                    this.loading = true;
+                    await this.refleshActivationCode();
+                }
+                finally {
+                    this.loading = false;
+                }
             },
             async handleActivation() {
-                this.loading = true;
-                await this.activate(this.activationCode);
-                this.loading = false;
+                try {
+                    this.loading = true;
+                    await this.activate(this.activationCode);
+                }
+                finally {
+                    this.loading = false;
+                }
             }
         }
     })
diff --git a/src/Aiplugs.PoshApp/wwwroot/js/main.js b/src/Aiplugs.PoshApp/wwwroot/js/main.js
index 7600fa6..0b22b9a 100644
--- a/src/Aiplugs.PoshApp/wwwroot/js/main.js
+++ b/src/Aiplugs.PoshApp/wwwroot/js/main.js
@@ -3,11 +3,11 @@ import router from './router.js';
 
 Vue.prototype.$signalr = new signalR.HubConnectionBuilder().withUrl("/poshapp").withAutomaticReconnect().build();
 Vue.prototype.$signalr.onconnected = function (callback) {
-    const f = () => { 
+    const f = () => {
         if (this.state === 'Connected') { callback(); }
         else { setTimeout(f, 10); }
     }; f();
-}
+};
 
 const app = new Vue({
     el: '#app',
diff --git a/src/Aiplugs.PoshApp/wwwroot/js/store/index.js b/src/Aiplugs.PoshApp/wwwroot/js/store/index.js
index b2a9b67..5c0eb92 100644
--- a/src/Aiplugs.PoshApp/wwwroot/js/store/index.js
+++ b/src/Aiplugs.PoshApp/wwwroot/js/store/index.js
@@ -1,8 +1,10 @@
-import list from './list.js'
-import toast from './toast.js'
-import scripts from './scripts.js'
-import repositories from './repositories.js'
-import activation from './activation.js'
+import list from './list.js';
+import toast from './toast.js';
+import scripts from './scripts.js';
+import repositories from './repositories.js';
+import activation from './activation.js';
+import signalr, { signalRPlugin } from './signalr.js';
+import ipc, { ipcPlugin } from './ipc.js';
 
 export default new Vuex.Store({
     modules: {
@@ -10,6 +12,9 @@ export default new Vuex.Store({
         toast,
         scripts,
         repositories,
-        activation
-    }
+        activation,
+        signalr,
+        ipc
+    },
+    plugins: [signalRPlugin, ipcPlugin]
 });
diff --git a/src/Aiplugs.PoshApp/wwwroot/js/store/ipc.js b/src/Aiplugs.PoshApp/wwwroot/js/store/ipc.js
new file mode 100644
index 0000000..1a50c90
--- /dev/null
+++ b/src/Aiplugs.PoshApp/wwwroot/js/store/ipc.js
@@ -0,0 +1,74 @@
+if (!window.ipcRenderer) {
+    window.ipcRenderer = {
+        on: function () { },
+        send: function () { },
+        removeAllListeners: function () { },
+    };
+}
+export default {
+    namespaced: true,
+    state: {
+        updateAvailable: false,
+        selectedDirectory: {},
+        selectedFile: {}
+    },
+    mutations: {
+        setUpdateAvailable(state) {
+            state.updateAvailable = true;
+        },
+        clearUpdateAvailable(state) {
+            state.updateAvailable = false;
+        },
+        setSelectedDirectory(state, { name, path }) {
+            Vue.set(state.selectedDirectory, name, path);
+        },
+        clearSelectedDirectory(state) {
+            state.selectedDirectory = {};
+        },
+        setSelectedFile(state, { name, path }) {
+            Vue.set(state.selectedFile, name, path);
+        },
+        clearSelectedFile(state) {
+            state.selectedFile = {};
+        }
+    },
+    actions: {
+        checkForUpdates() {
+            ipcRenderer.send('check-for-updates');
+        },
+        quitAndInstall() {
+            ipcRenderer.send('quit-and-install');
+        },
+        clearSelected({ commit }) {
+            commit('clearSelectedDirectory');
+            commit('clearSelectedFile');
+        },
+        selectDirectory(_, { name }) {
+            ipcRenderer.send('select-directory', name);
+        },
+        selectFile(_, { name }) {
+            ipcRenderer.send('select-file', name);
+        },
+        openActivation() {
+            ipcRenderer.send('open-activation'); 
+        },
+        copyTo(_, text) {
+            ipcRenderer.send('copy-to', text);
+        },
+        openRepositoryDir(_, { repositoryName }) {
+            ipcRenderer.send('open-repository-dir', repositoryName);
+        }
+    }
+};
+
+export function ipcPlugin(store) {
+    ipcRenderer.on('update-available', sender => {
+        store.commit('ipc/setUpdateAvailable');
+    });
+    ipcRenderer.on('select-directory-reply', (sender, path, name) => {
+        store.commit('ipc/setSelectedDirectory', { path, name });
+    });
+    ipcRenderer.on('select-file-reply', (sender, path, name) => {
+        store.commit('ipc/setSelectedFile', { path, name });
+    });
+}
diff --git a/src/Aiplugs.PoshApp/wwwroot/js/store/signalr.js b/src/Aiplugs.PoshApp/wwwroot/js/store/signalr.js
new file mode 100644
index 0000000..898b246
--- /dev/null
+++ b/src/Aiplugs.PoshApp/wwwroot/js/store/signalr.js
@@ -0,0 +1,307 @@
+import { parsePSDataCollection } from '/js/clixml.js';
+const signalr = new signalR.HubConnectionBuilder().withUrl("/poshapp").withAutomaticReconnect().build();
+let init = signalr.start();
+
+export default {
+    namespaced: true,
+    state: {
+        connectionId: null,
+        status: 'connecting',
+        invoking: null,
+        loadingParams: false,
+        defaultResult: null,
+        detailResult: null,
+        parameters: [],
+        logMessages: [],
+        logErrors: null,
+        progresses: {},
+        prompt: null,
+        promptForChoice: null,
+        promptForCredential: null,
+        gitClone: null,
+        gitLog: null,
+        gitLogMessage: null,
+        gitStatus: []
+    },
+    mutations: {
+        setInvoking(state, name = '$default') {
+            state.invoking = name;
+        },
+        clearInvoking(state) {
+            state.invoking = null;
+        },
+        setLoadingParams(state) {
+            state.loadingParams = true;
+        },
+        clearLoadingParams(state) {
+            state.loadingParams = false;
+        },
+        setDefaultResult(state, result) {
+            state.defaultResult = result;
+        },
+        setDetailResult(state, result) {
+            state.detailResult = result;
+        },
+        setParameters(state, parameters) {
+            state.parameters.splice(0, state.parameters.length, ...parameters);
+        },
+        writeHost(state, { color, bgColor, text }) {
+            if (state.logMessages.length > 30) {
+                state.logMessages.shift();
+            }
+            state.logMessages.push({ color, bgColor, text });
+        },
+        writeWarning(state, { message }) {
+            state.logMessages.push({
+                color: 6,
+                bgColor: 0,
+                text: message
+            });
+        },
+        writeError(state, { message }) {
+            const text = message.replace(/\r\n/g, '\n').split('\n').filter(line => !line.match(/^\s*$/)).join('\n');
+            if (state.logErrors !== null) {
+                state.logErrors += '\n\n' + text;
+            }
+            else {
+                state.logErrors = text;
+            }
+        },
+        clearError(state) {
+            state.logErrors = null;
+        },
+        writeDebug(state, { message }) {
+            state.logMessages.push({
+                color: 15,
+                bgColor: 0,
+                text: message
+            });
+        },
+        writeVerbose(state, { message }) {
+            state.logMessages.push({
+                color: 15,
+                bgColor: 0,
+                text: message
+            });
+        },
+        writeInformation(state, { }) {
+            state.logMessages.push({
+                color: 15,
+                bgColor: 0,
+                text: message
+            });
+        },
+        writeProgress(state, { progress }) {
+            Vue.set(state.progresses, progress.activityId.toString(), progress);
+            if (progress.percentComplete === 100) {
+                Vue.delete(state.progresses, progress.activityId);
+            }
+        },
+        setPrompt(state, { caption, message, descriptions }) {
+            state.prompt = { caption, message, descriptions };
+        },
+        clearPrompt(state) {
+            state.prompt = null;
+        },
+        setPromptForChoice(state, { caption, message, choices, defaultChoice }) {
+            state.promptForChoice = { caption, message, choices, defaultChoice };
+        },
+        clearPromptForChoice(state) {
+            state.promptForChoice = null;
+        },
+        setPromptForCredential(state, { caption, message, userName, targetName, allowedCredentialTypes, forGit }) {
+            state.promptForCredential = { caption, message, userName, targetName, allowedCredentialTypes, forGit };
+        },
+        clearPromptForCredential(state) {
+            state.promptForCredential = null;
+        },
+        setGitProgress(state, { name, progress }) {
+            state.gitClone = { name, progress };
+        },
+        setGitClone(state, { name }) {
+            state.gitClone = null;
+        },
+        setGitCloneFaild(state, { name }) {
+            state.gitClone = null;
+        },
+        setGitLog(state, { name, logs, origin, local }) {
+            state.gitLog = { name, logs, origin, local };
+            state.gitLogMessage = !origin ? 'This repository does not have remote origin/master branch.' : null;
+        },
+        clearGitLog(state) {
+            state.gitLog = null;
+            state.gitLogMessage = null;
+        },
+        setGitLogNotFound(state, { name }) {
+            state.gitLogMessage = 'This repository have not initialized git.';
+        },
+        setGitFetchProgress(state, { name, progress }) {
+            state.gitLogMessage = progress;
+        },
+        setGitStatus(state, { name, status }) {
+            state.gitStatus.splice(0, state.gitStatus.length, ...status);
+        },
+        setStatus(state, { status, connectionId }) {
+            state.status = status;
+            state.connectionId = connectionId;
+        }
+    },
+    actions: {
+        clearResult({ commit }) {
+            commit('setDefaultResult', null);
+            commit('setDetailResult', null);
+        },
+        async invokeDefault({ commit }, { scriptId, input }) {
+            commit('setInvoking');
+            await signalr.invoke('Invoke', scriptId, input);
+        },
+        async invokeDetail({ commit },{ scriptId, input }) {
+            commit('setInvoking');
+            await signalr.invoke('InvokeDetail', scriptId, input);
+        },
+        async invokeAction({ commit }, { scriptId, input }) {
+            commit('setInvoking', scriptId);
+            await signalr.invoke('InvokeAction', scriptId, input);
+        },
+        async invokeGetParameters({ commit }, { scriptId }) {
+            commit('setParameters', []);
+            commit('setLoadingParams', []);
+            await init;
+            await signalr.invoke('GetParameters', scriptId);
+        },
+        async invokePrompt({ commit }, { input }) {
+            commit('clearPrompt');
+            await signalr.invoke('Prompt', input);
+        },
+        async invokePromptForChoice({ commit }, { index }) {
+            commit('clearPromptForChoice');
+            await signalr.invoke('PromptForChoice', index);
+        },
+        async invokePromptForCredential({ commit }, { username, password }) {
+            commit('clearPromptForCredential');
+            await signalr.invoke('PromptForCredential', username, password);
+        },
+        async invokePromptForGitCredential({ commit }, { username, password }) {
+            commit('clearPromptForCredential');
+            await signalr.invoke('PromptForGitCredential', username, password);
+        },
+        async invokeGitLog({ commit }, { repositoryName }) {
+            commit('clearGitLog');
+            await init;
+            await signalr.invoke('GitLog', repositoryName);
+        },
+        async invokeGitForcePull(_, { repositoryName }) {
+            await signalr.invoke('GitForcePull', repositoryName);
+        },
+        async invokeGitReset(_, { repositoryName }) {
+            await signalr.invoke('GitReset', repositoryName);
+        },
+        async reconnect({ commit }) {
+            if (signalr.state === 'Disconnected') {
+                init = signalr.start();
+            }
+            else if (signalr.state === 'Connected') {
+                commit('signalr/setStatus', { status: 'connected', connectionId: signalr.connectionId });
+            }
+        }
+    }
+};
+
+export function signalRPlugin(store) {
+    signalr.on('UnitResult', () => {
+        store.commit('signalr/clearInvoking');
+    });
+    signalr.on('DefaultResult', json => {
+        store.commit('signalr/clearInvoking');
+        store.commit('signalr/setDefaultResult', parsePSDataCollection(JSON.parse(json)));
+    });
+    signalr.on('DetailResult', json => {
+        store.commit('signalr/clearInvoking');
+        store.commit('signalr/setDetailResult', parsePSDataCollection(JSON.parse(json)));
+    });
+    signalr.on('ActionResult', (id, json) => {
+        store.commit('signalr/clearInvoking');
+        store.dispatch('toast/toast', {
+            text: `${id} is succeeded`,
+            color: "info",
+            top: true,
+            right: true
+        });
+    });
+    signalr.on('GetParameters', parameters => {
+        store.commit('signalr/clearLoadingParams');
+        store.commit('signalr/setParameters', parameters);
+    });
+    signalr.on('WriteWithColor', (color, bgColor, text) => {
+        store.commit('signalr/writeHost', { color, bgColor, text });
+    });
+    signalr.on('WriteWarningLine', message => {
+        store.commit('signalr/writeWarning', { message });
+    });
+    signalr.on('WriteErrorLine', message => {
+        store.commit('signalr/writeError', { message });
+    });
+    signalr.on('WriteDebugLine', message => {
+        store.commit('signalr/writeDebug', { message });
+    });
+    signalr.on('WriteVerboseLine', message => {
+        store.commit('signalr/writeVerbose', { message });
+    });
+    signalr.on('WriteProgress', (sourceId, progress) => {
+        store.commit('signalr/writeProgress', { progress });
+    });
+    signalr.on('ParseError', message => {
+        store.commit('signalr/writeError', { message });
+    });
+    signalr.on('Prompt', (caption, message, descriptions) => {
+        store.commit('signalr/setPrompt', { caption, message, descriptions });
+    });
+    signalr.on('PromptForChoice', (caption, message, choices, defaultChoice) => {
+        store.commit('signalr/setPromptForChoice', { caption, message, choices, defaultChoice });
+    });
+    signalr.on('PromptForCredential', (caption, message, userName, targetName) => {
+        store.commit('signalr/setPromptForCredential', { caption, message, userName, targetName, allowedCredentialTypes: null, forGit: false });
+    });
+    signalr.on('PromptForCredentialWithType', (caption, message, userName, targetName, allowedCredentialTypes) => {
+        store.commit('signalr/setPromptForCredential', { caption, message, userName, targetName, allowedCredentialTypes, forGit: false });
+    });
+    signalr.on('PromptForGitCredential', (url, usernameFromUrl) => {
+        store.commit('signalr/setPromptForCredential', { caption: url, message: url, userName: usernameFromUrl, targetName: null, allowedCredentialTypes: null, forGit: true });
+    });
+    signalr.on('GitProgress', (name, progress) => {
+        store.commit('signalr/setGitProgress', { name, progress });
+    });
+    signalr.on('GitClone', name => {
+        store.commit('signalr/setGitClone', { name });
+    });
+    signalr.on('GitCloneFaild', name => {
+        store.commit('signalr/setGitCloneFaild', { name });
+    });
+    signalr.on('GitLog', (name, logs, origin, local) => {
+        store.commit('signalr/setGitLog', { name, logs, origin, local });
+    });
+    signalr.on('GitLogNotFound', name => {
+        store.commit('signalr/setGitLogNotFound', { name });
+    });
+    signalr.on('GitFetchProgress', (name, progress) => {
+        store.commit('signalr/setGitFetchProgress', { name, progress });
+    });
+    signalr.on('GitStatus', (name, status) => {
+        store.commit('signalr/setGitStatus', { name, status });
+    });
+
+    signalr.onclose(err => {
+        store.commit('signalr/setStatus', { status: 'close' });
+    });
+    signalr.onreconnecting(err => {
+        store.commit('signalr/setStatus', { status: 'reconnecting' });
+    });
+    signalr.onreconnected(connectedId => {
+        store.commit('signalr/setStatus', { status: 'connected', connectionId: signalr.connectionId });
+    });
+    init.then(() => {
+        store.commit('signalr/setStatus', { status: 'connected', connectionId: signalr.connectionId });
+    }).catch(() => {
+        store.commit('signalr/setStatus', { status: 'faild' });
+    });
+}
\ No newline at end of file