diff --git a/src/common/editor.ts b/src/common/editor.ts
index 8659536d..dc216c71 100644
--- a/src/common/editor.ts
+++ b/src/common/editor.ts
@@ -9,10 +9,21 @@ export type Decoration = {
   range: Range;
   options: { isWholeLine: boolean; linesDecorationsClassName: string };
 };
+
 export const executeActions = {
   regexp: /^(GET|DELETE|POST|PUT)\s\w+/,
   decorationClassName: 'action-execute-decoration',
 };
+
+export type SearchToken = {
+  qdsl: string;
+  actionPosition: Range;
+  qdslPosition: Range;
+  method: string;
+  index: string;
+  path: string;
+};
+
 export const searchTokensProvider = {
   // Set defaultToken to invalid to see what you do not tokenize yet
   defaultToken: 'invalid',
@@ -193,3 +204,42 @@ export const searchTokensProvider = {
     ],
   },
 };
+
+export const buildSearchToken = (lines: Array<{ lineNumber: number; lineContent: string }>) => {
+  const commands = lines.filter(({ lineContent }) => executeActions.regexp.test(lineContent));
+
+  return commands.map(({ lineContent, lineNumber }, index, commands) => {
+    const rawCmd = lineContent.split(/[/\s]+/);
+    const method = rawCmd[0]?.toUpperCase();
+    const indexName = rawCmd[1]?.startsWith('_') ? undefined : rawCmd[1];
+    const path = rawCmd.slice(indexName ? 2 : 1, rawCmd.length).join('/');
+    const endLineNumber = commands[index + 1]?.lineNumber
+      ? commands[index + 1]?.lineNumber - 1
+      : lines.length;
+
+    const qdsl = lines
+      .slice(lineNumber, endLineNumber)
+      .map(({ lineContent }) => lineContent)
+      .join('');
+    return {
+      qdsl,
+      method,
+      index: indexName,
+      path,
+      actionPosition: {
+        startLineNumber: lineNumber,
+        endLineNumber: lineNumber,
+        startColumn: 1,
+        endColumn: lineContent.length,
+      },
+      qdslPosition: qdsl
+        ? {
+            startLineNumber: lineNumber + 1,
+            startColumn: 1,
+            endLineNumber: endLineNumber,
+            endColumn: lines[endLineNumber - 1].lineContent.length,
+          }
+        : null,
+    } as SearchToken;
+  });
+};
diff --git a/src/layout/components/the-aside.vue b/src/layout/components/the-aside.vue
index 80e12a00..8ca8608e 100644
--- a/src/layout/components/the-aside.vue
+++ b/src/layout/components/the-aside.vue
@@ -42,12 +42,15 @@
 </template>
 
 <script setup lang="ts">
+import { ref, markRaw } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
 import { DataBase, Folders, LogoGithub, Settings, UserAvatar, ExpandAll } from '@vicons/carbon';
-import { useAppStore } from './../../store';
+import { useAppStore } from '../../store';
 import theAsideIcon from './the-aside-icon.vue';
 const router = useRouter();
 const route = useRoute();
 const appStore = useAppStore();
+const { setConnectPanel } = appStore;
 
 const mainNavList = ref([
   {
@@ -113,7 +116,7 @@ const navClick = (item: RouteItem) => {
     window.electronAPI.openGitHub();
   } else {
     if (route.path === item.path) {
-      appStore.setConnectPannel();
+      setConnectPanel();
     } else {
       router.push({
         path: item.path,
diff --git a/src/store/appStore.ts b/src/store/appStore.ts
index 295b328b..a825159f 100644
--- a/src/store/appStore.ts
+++ b/src/store/appStore.ts
@@ -10,7 +10,11 @@ export enum LanguageType {
   EN_US = 'enUS',
 }
 export const useAppStore = defineStore('app', {
-  state: () => {
+  state: (): {
+    themeType: ThemeType;
+    languageType: LanguageType;
+    connectPanel: boolean;
+  } => {
     return {
       themeType: ThemeType.AUTO,
       languageType: LanguageType.AUTO,
@@ -19,7 +23,7 @@ export const useAppStore = defineStore('app', {
   },
   persist: true,
   actions: {
-    setConnectPannel() {
+    setConnectPanel() {
       this.connectPanel = !this.connectPanel;
     },
     getEditorTheme() {
diff --git a/src/store/connectionStore.ts b/src/store/connectionStore.ts
index b6295b57..fefccfb3 100644
--- a/src/store/connectionStore.ts
+++ b/src/store/connectionStore.ts
@@ -45,10 +45,10 @@ const buildPath = (index: string | undefined, path: string | undefined) => {
 };
 
 export const useConnectionStore = defineStore('connectionStore', {
-  state(): {
+  state: (): {
     connections: Connection[];
     established: Established;
-  } {
+  } => {
     return {
       connections: [],
       established: null,
@@ -69,7 +69,7 @@ export const useConnectionStore = defineStore('connectionStore', {
       return await client.get(undefined, 'format=json');
     },
     saveConnection(connection: Connection) {
-      const index = this.connections.findIndex(item => item.id === connection.id);
+      const index = this.connections.findIndex(({ id }: Connection) => id === connection.id);
       if (index >= 0) {
         this.connections[index] = connection;
       } else {
@@ -78,7 +78,7 @@ export const useConnectionStore = defineStore('connectionStore', {
       storeAPI.set('connections', pureObject(this.connections));
     },
     removeConnection(connection: Connection) {
-      this.connections = this.connections.filter(item => item.id !== connection.id);
+      this.connections = this.connections.filter(({ id }: Connection) => id !== connection.id);
       storeAPI.set('connections', pureObject(this.connections));
     },
     async establishConnection(connection: Connection) {
@@ -112,7 +112,9 @@ export const useConnectionStore = defineStore('connectionStore', {
     selectIndex(indexName: string) {
       this.established = {
         ...this.established,
-        activeIndex: this.established?.indices.find(({ index }) => index === indexName),
+        activeIndex: this.established?.indices.find(
+          ({ index }: { index: string }) => index === indexName,
+        ),
       } as Established;
     },
     async searchQDSL({
diff --git a/src/views/connect/index.vue b/src/views/connect/index.vue
index 2dad7a65..1073bade 100644
--- a/src/views/connect/index.vue
+++ b/src/views/connect/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="connect-container">
-    <div v-if="isPannelOpen" class="connect-list">
+    <div v-if="connectPanel" class="connect-list">
       <div class="add-connect" @click="addConnect">
         <n-icon size="28">
           <Add />
@@ -22,6 +22,8 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import { storeToRefs } from 'pinia';
 import { Add } from '@vicons/carbon';
 import ConnectModal from './components/connect-dialog.vue';
 import connectList from './components/connect-list.vue';
@@ -30,15 +32,15 @@ import Editor from '../editor/index.vue';
 import { useAppStore } from '../../store';
 
 const appStore = useAppStore();
+const { setConnectPanel } = appStore;
+const { connectPanel } = storeToRefs(appStore);
+
 // DOM
 const connectModalRef = ref();
-const isPannelOpen = computed(() => {
-  return appStore.connectPannel;
-});
 
 onMounted(() => {
-  if (!appStore.connectPannel) {
-    appStore.setConnectPannel();
+  if (!connectPanel.value) {
+    setConnectPanel();
   }
 });
 
diff --git a/src/views/editor/index.vue b/src/views/editor/index.vue
index e2052e0e..cd6b38d1 100644
--- a/src/views/editor/index.vue
+++ b/src/views/editor/index.vue
@@ -7,10 +7,18 @@
 <script setup lang="ts">
 import * as monaco from 'monaco-editor';
 import { storeToRefs } from 'pinia';
-import { ref, onMounted, watch } from 'vue';
-import { CustomError, Decoration, executeActions, searchTokensProvider } from '../../common';
-import { useAppStore, useSourceFileStore, useConnectionStore, ThemeType } from '../../store';
+import { onMounted, ref, watch } from 'vue';
+import { useMessage } from 'naive-ui';
+import {
+  buildSearchToken,
+  CustomError,
+  Decoration,
+  SearchToken,
+  searchTokensProvider,
+} from '../../common';
+import { useAppStore, useConnectionStore, useSourceFileStore } from '../../store';
 import { useLang } from '../../lang';
+
 type Editor = ReturnType<typeof monaco.editor.create>;
 
 const appStore = useAppStore();
@@ -68,52 +76,73 @@ monaco.languages.setMonarchTokensProvider(
   searchTokensProvider as monaco.languages.IMonarchLanguage,
 );
 
+// https://github.com/tjx666/adobe-devtools/commit/8055d8415ed3ec5996880b3a4ee2db2413a71c61
+let displayEditor: Editor | null = null;
+let queryEditor: Editor | null = null;
+// DOM
+const queryEditorRef = ref();
+const displayEditorRef = ref();
+
+let searchTokens: SearchToken[] = [];
+
+const getActionMarksDecorations = (searchTokens: SearchToken[]): Array<Decoration> => {
+  return searchTokens
+    .map(({ actionPosition }) => ({
+      id: actionPosition.startLineNumber,
+      range: actionPosition,
+      options: { isWholeLine: true, linesDecorationsClassName: executionGutterClass },
+    }))
+    .filter(Boolean)
+    .sort((a, b) => (a as Decoration).id - (b as Decoration).id) as Array<Decoration>;
+};
+
+const refreshActionMarks = (editor: Editor, searchTokens: SearchToken[]) => {
+  const freshedDecorations = getActionMarksDecorations(searchTokens);
+  // @See https://github.com/Microsoft/monaco-editor/issues/913#issuecomment-396537569
+  executeDecorations = editor.deltaDecorations(
+    executeDecorations as Array<string>,
+    freshedDecorations,
+  ) as unknown as Decoration[];
+};
+const buildCodeLens = (searchTokens: SearchToken[]) => {
+  return searchTokens.map(({ actionPosition }, index) => {
+    return {
+      range: actionPosition,
+      id: 'AutoIndent',
+      command: {
+        id: 'AutoIndent',
+        title: 'Auto Indent',
+        arguments: [index],
+      },
+    };
+  });
+};
+
 monaco.languages.registerCodeLensProvider('search', {
   provideCodeLenses: () => {
     const model = queryEditor?.getModel();
     if (!model) {
-      console.log('no model');
       return;
     }
-    const codeLens: monaco.languages.CodeLens[] = [];
-    for (let i = 1; i <= model.getLineCount(); i++) {
-      const lineContent = model.getLineContent(i);
-      console.log(
-        'loop lineContent',
-        lineContent,
-        'index',
-        i,
-        'model.getLineCount()',
-        model.getLineCount(),
-      );
-      if (executeActions.regexp.test(lineContent)) {
-        codeLens.push({
-          range: new monaco.Range(i, 1, i, 1),
-          id: `AutoIndent-${i}`,
-          command: {
-            id: `AutoIndent-${i}`,
-            title: 'Auto Indent',
-            arguments: [i],
-          },
-        });
-      }
-    }
-    return { lenses: codeLens, dispose: () => {} };
+
+    const lines = Array.from({ length: model.getLineCount() }, (_, i) => ({
+      lineNumber: i + 1,
+      lineContent: model.getLineContent(i + 1),
+    }));
+
+    searchTokens = buildSearchToken(lines);
+
+    refreshActionMarks(queryEditor!, searchTokens);
+
+    return { lenses: buildCodeLens(searchTokens), dispose: () => {} };
   },
+
   resolveCodeLens: (model, codeLens) => {
     return codeLens;
   },
 });
 
-// https://github.com/tjx666/adobe-devtools/commit/8055d8415ed3ec5996880b3a4ee2db2413a71c61
-let displayEditor: Editor | null = null;
-let queryEditor: Editor | null = null;
-// DOM
-const queryEditorRef = ref();
-const displayEditorRef = ref();
-
 const executionGutterClass = 'execute-button-decoration';
-const executeDecorationType = 'action-execute-decoration.search';
 
 let executeDecorations: Array<Decoration | string> = [];
 
@@ -124,68 +153,19 @@ watch(themeType, () => {
   displayEditor?.updateOptions({ theme: vsTheme });
 });
 
-const getActionMarksDecorations = (editor: Editor): Array<Decoration> => {
-  // Get the model of the editor
-  const model = editor.getModel();
-  // Tokenize the entire content of the model
-  const tokens = monaco.editor.tokenize(model!.getValue(), model!.getLanguageId());
-  return tokens
-    .map(
-      (line, lineIndex) =>
-        line.some(({ type }) => type === executeDecorationType) && {
-          id: lineIndex + 1,
-          range: new monaco.Range(lineIndex + 1, 1, lineIndex + 1, 1),
-          options: { isWholeLine: true, linesDecorationsClassName: executionGutterClass },
-        },
-    )
-    .filter(Boolean)
-    .sort((a, b) => (a as Decoration).id - (b as Decoration).id) as Array<Decoration>;
-};
-
-const refreshActionMarks = (editor: Editor) => {
-  const freshedDecorations = getActionMarksDecorations(editor);
-  // @See https://github.com/Microsoft/monaco-editor/issues/913#issuecomment-396537569
-  executeDecorations = editor.deltaDecorations(
-    executeDecorations as Array<string>,
-    freshedDecorations,
-  ) as unknown as Decoration[];
-};
-
-const getAction = (editor: Editor, startLine: number) => {
-  const model = editor.getModel();
-  if (!model) {
-    return;
-  }
-  const commands = model.getLineContent(startLine).split(/[\/\s]+/);
-  const method = commands[0]?.toUpperCase();
-  const index = commands[1]?.startsWith('_') ? undefined : commands[1];
-  const path = commands.slice(index ? 2 : 1, commands.length).join('/');
-
-  let qdsl = '';
-  // Get  non-comment payload
-  for (let lineNumber = startLine + 1; lineNumber <= model.getLineCount(); lineNumber++) {
-    const lineContent = model.getLineContent(lineNumber);
-    if (lineContent.trim() === '') {
-      break;
-    }
-    if (lineContent.trim().startsWith('//')) {
-      continue;
-    }
-    qdsl += lineContent;
-  }
-
-  return { qdsl, method, index, path };
-};
-
 const executeQueryAction = async (
   queryEditor: Editor,
   displayEditor: Editor,
   position: { column: number; lineNumber: number },
 ) => {
-  const action = getAction(queryEditor, position.lineNumber);
+  const action = searchTokens.find(
+    ({ actionPosition }) => actionPosition.startLineNumber === position.lineNumber,
+  );
+
   if (!action) {
     return;
   }
+
   try {
     if (!established.value) {
       message.error(lang.t('editor.establishedRequired'), {
@@ -219,8 +199,6 @@ const setupQueryEditor = (code: string) => {
     language: 'search',
   });
 
-  // Register language injection rule
-  queryEditor.onKeyUp(event => queryEditor && refreshActionMarks(queryEditor));
   queryEditor.onMouseDown(({ event, target }) => {
     if (
       event.leftButton &&