feat: add support for terminal experience

Author: fahadkhan-fk

src/components/agents/remotebg/TerminalManager.vue

@@ -13,9 +13,17 @@
         inline
         color="primary"
         @update:model-value="onShellChange"
-        @dblclick="onOptionDblClick"
         class="q-ml-sm q-gutter-lg"
       />
+      <div>
+        <q-btn
+          label="Edit Path"
+          color="primary"
+          @click="handleCustomEdit"
+          class="q-px-sm q-ml-lg q-pb-0 text-caption text-capitalize"
+          dense
+        />
+      </div>
     </div>
     <div class="terminal-wrapper">
       <div ref="xtermContainer" class="xterm-container"></div>
@@ -98,12 +106,17 @@ const shellOptions = computed<ShellOption[]>(() => {
       ]
     : [{ label: "Bash", value: "bash" }];
 
+  let customLabel = "Custom Shell";
+  if (loading.value && pendingCustomShell.value) {
+    customLabel = "Custom (Shell loading...)";
+  } else if (invalidCustomShell.value) {
+    customLabel = "Custom (Shell path doesn't exist)";
+  } else if (customShellPath.value) {
+    customLabel = `Custom (${customShellPath.value})`;
+  }
+
   base.push({
-    label: invalidCustomShell.value
-      ? "Custom (Shell path doesn't exist)"
-      : customShellPath.value
-        ? `Custom (${customShellPath.value})`
-        : "Custom Shell",
+    label: customLabel,
     value: "custom",
   });
 
@@ -180,6 +193,14 @@ function markSessionReadyAndResize() {
   started = true;
   loading.value = false;
 
+  if (pendingCustomShell.value) {
+    customShellPath.value = pendingCustomShell.value;
+    selectedShell.value = "custom";
+    showCustomShellDialog.value = false;
+    pendingCustomShell.value = null;
+    invalidCustomShell.value = false;
+  }
+
   void waitForLayout().then(() => {
     if (!term || !started) return;
     fit.fit();
@@ -237,14 +258,6 @@ function initWS(shell: string) {
       if (!started) {
         markSessionReadyAndResize();
       }
-
-      if (pendingCustomShell.value) {
-        customShellPath.value = pendingCustomShell.value;
-        selectedShell.value = "custom";
-        showCustomShellDialog.value = false;
-        pendingCustomShell.value = null;
-        invalidCustomShell.value = false;
-      }
     }
 
     if (msg.data?.done) {
@@ -285,12 +298,6 @@ function initWS(shell: string) {
   }, 50);
 }
 
-function onOptionDblClick() {
-  if (selectedShell.value === "custom") {
-    handleCustomEdit();
-  }
-}
-
 function handleCustomEdit() {
   showCustomShellDialog.value = true;
   customShellInput.value = customShellPath.value || "";

src/components/modals/coresettings/EditCoreSettings.vue

@@ -220,6 +220,19 @@
                     :rules="[(val) => val >= 0 || 'Minimum is 0']"
                   />
                 </q-card-section>
+                <q-card-section class="row items-start content-between">
+                  <div class="col-6">Terminal Experience</div>
+                  <div class="col-6">
+                    <q-option-group
+                      class="q-gutter-lg"
+                      v-model="settings.terminal_mode"
+                      :options="terminalModeOptions"
+                      type="radio"
+                      inline
+                      dense
+                    />
+                  </div>
+                </q-card-section>
                 <q-card-section class="row items-start content-between">
                   <div class="col-6">Windows Default Terminal</div>
                   <div class="col-6">
@@ -860,6 +873,12 @@ export default {
     hosted() {
       return this.$store.state.hosted;
     },
+    terminalModeOptions() {
+      return [
+        { label: "Use new terminal", value: "new" },
+        { label: "Use legacy terminal", value: "legacy" },
+      ];
+    },
     windowsShellOptions() {
       return [
         { label: "CMD", value: "cmd" },

src/views/RemoteBackground.vue

@@ -39,18 +39,20 @@
     <q-separator />
     <q-tab-panels v-model="tab">
       <q-tab-panel name="terminal" class="q-pa-none">
-        <!-- <iframe
+        <TerminalManager
+          v-if="terminalMode === 'new'"
+          :agent_id="agent_id"
+          :agentPlatform="$route.query.agentPlatform"
+        />
+        <iframe
+          v-else
           allow="clipboard-read; clipboard-write"
           :src="terminal"
           :style="{
             height: `${$q.screen.height - 30}px`,
             width: `${$q.screen.width}px`,
           }"
-        ></iframe> -->
-        <TerminalManager
-          :agent_id="agent_id"
-          :agentPlatform="$route.query.agentPlatform"
-        />
+        ></iframe>
       </q-tab-panel>
       <q-tab-panel name="processes" class="q-pa-none">
         <ProcessManager :agent_id="agent_id" />
@@ -102,7 +104,7 @@ import { ref, computed, onMounted } from "vue";
 import { useRoute } from "vue-router";
 import { useQuasar, useMeta } from "quasar";
 import { fetchAgentMeshCentralURLs } from "@/api/agents";
-import { fetchDashboardInfo } from "@/api/core";
+import { fetchCoreSettings, fetchDashboardInfo } from "@/api/core";
 
 // ui imports
 import ProcessManager from "@/components/agents/remotebg/ProcessManager.vue";
@@ -132,6 +134,7 @@ export default {
     const terminal = ref("");
     const file = ref("");
     const tab = ref("terminal");
+    const terminalMode = ref("legacy");
 
     const agent_id = computed(() => params.agent_id);
 
@@ -150,10 +153,17 @@ export default {
       $q.loadingBar.setDefaults({ size: "0px" });
     }
 
+    async function getCoreSettings() {
+      const settingsData = await fetchCoreSettings();
+      terminalMode.value =
+        settingsData?.terminal_mode === "new" ? "new" : "legacy";
+    }
+
     // vue lifecycle hooks
     onMounted(() => {
       getDashInfo();
       getMeshURLs();
+      getCoreSettings();
     });
 
     return {
@@ -163,6 +173,7 @@ export default {
       tab,
       agent_id,
       registryIcon,
+      terminalMode,
     };
   },
 };