diff --git a/packages/client/src/components/hermes/chat/DrawerPanel.vue b/packages/client/src/components/hermes/chat/DrawerPanel.vue
index 7ef025d..a25e63f 100644
--- a/packages/client/src/components/hermes/chat/DrawerPanel.vue
+++ b/packages/client/src/components/hermes/chat/DrawerPanel.vue
@@ -63,7 +63,7 @@ function handleClose() {
           <FilesPanel />
         </div>
         <div v-show="activeTab === 'terminal'" class="drawer-pane">
-          <TerminalPanel />
+          <TerminalPanel :visible="activeTab === 'terminal' && show" />
         </div>
       </div>
     </div>
diff --git a/packages/client/src/components/hermes/chat/TerminalPanel.vue b/packages/client/src/components/hermes/chat/TerminalPanel.vue
index 46e9f14..c64a09c 100644
--- a/packages/client/src/components/hermes/chat/TerminalPanel.vue
+++ b/packages/client/src/components/hermes/chat/TerminalPanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from "vue";
+import { ref, onUnmounted, computed, watch } from "vue";
 import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { WebLinksAddon } from "@xterm/addon-web-links";
@@ -12,6 +12,8 @@ import type { ITheme } from "@xterm/xterm";
 const { t } = useI18n();
 const message = useMessage();
 
+const props = defineProps<{ visible?: boolean }>();
+
 // ─── Terminal themes ────────────────────────────────────────────
 
 const TERMINAL_THEMES: Record<string, { label: string; theme: ITheme }> = {
@@ -164,10 +166,8 @@ function connect() {
   ws = new WebSocket(url);
 
   ws.onopen = () => {
-    reconnectAttempts = 0;
     isConnecting.value = false;
     connectionError.value = null;
-    // Server auto-creates the first session
   };
 
   ws.onmessage = (event) => {
@@ -210,6 +210,7 @@ function send(data: object | string) {
 function handleControl(msg: any) {
   switch (msg.type) {
     case "created":
+      reconnectAttempts = 0;
       sessions.value.push({
         id: msg.id,
         shell: msg.shell,
@@ -376,9 +377,14 @@ function formatTime(ts: number) {
 
 // ─── Lifecycle ──────────────────────────────────────────────────
 
-onMounted(() => {
-  connect();
-});
+let hasConnected = false;
+
+watch(() => props.visible, (visible) => {
+  if (visible && !hasConnected && !ws) {
+    hasConnected = true;
+    connect();
+  }
+}, { immediate: true });
 
 onUnmounted(() => {
   unmountActiveTerminal();