fix: shared terminals issues

Author: Vierre3

app/components/TerminalPanel.vue

@@ -121,6 +121,10 @@ watch(isSharing, (sharing) => {
         sessions.value = [];
         splitId.value = null;
         savedPairsMap.clear();
+        // Re-ensure a session in case the panel is already visible.
+        // sharedTerminals watcher (immediate) will populate sessions if there are existing
+        // terminals; ensureSession only creates a new local one if nothing else does.
+        nextTick(() => ensureSession());
     }
 });
 

app/composables/useShare.ts

@@ -384,8 +384,17 @@ export function useShare() {
 }
 
 // --- Event callbacks (set by index.vue or other consumers) ---
-export let onShareClosed: (() => void) | null = null;
-export let onRelayTerminalCreate: ((msg: any) => void) | null = null;
-export let onRelayTerminalInput: ((msg: any) => void) | null = null;
-export let onRelayTerminalResize: ((msg: any) => void) | null = null;
-export let onRelayTerminalClose: ((msg: any) => void) | null = null;
+// Use module-internal variables + setter functions.
+// Direct assignment to ES module namespace objects is read-only in production builds,
+// so we expose setters that mutate the internal bindings.
+let onShareClosed: (() => void) | null = null;
+let onRelayTerminalCreate: ((msg: any) => void) | null = null;
+let onRelayTerminalInput: ((msg: any) => void) | null = null;
+let onRelayTerminalResize: ((msg: any) => void) | null = null;
+let onRelayTerminalClose: ((msg: any) => void) | null = null;
+
+export function setOnShareClosed(cb: (() => void) | null) { onShareClosed = cb; }
+export function setOnRelayTerminalCreate(cb: ((msg: any) => void) | null) { onRelayTerminalCreate = cb; }
+export function setOnRelayTerminalInput(cb: ((msg: any) => void) | null) { onRelayTerminalInput = cb; }
+export function setOnRelayTerminalResize(cb: ((msg: any) => void) | null) { onRelayTerminalResize = cb; }
+export function setOnRelayTerminalClose(cb: ((msg: any) => void) | null) { onRelayTerminalClose = cb; }

app/pages/index.vue

@@ -44,7 +44,9 @@
                 <div class="header-actions">
                     <button @click="saveActivePane" class="btn"
                         :class="{ 'btn-press': savePressing, 'btn-success': saveSuccess }"
-                        :disabled="!activePane?.filePath">Save</button>
+                        :disabled="!activePane?.filePath">
+                        {{ saveSuccess ? 'Saved' : 'Save' }}
+                    </button>
                     <button @click="showShare = true" class="btn share-btn"
                         :class="{ 'btn-sharing': isSharing }"
                         :title="isSharing ? (isGuest ? 'Connected to session' : 'Sharing active') : 'Share session'">
@@ -648,76 +650,73 @@ async function autoJoinShare(sid: string) {
 }
 
 // Register callbacks for share lifecycle + relay terminal handling
-import { onShareClosed as _onShareClosedSetter, onRelayTerminalCreate as _rtcSetter, onRelayTerminalInput as _rtiSetter, onRelayTerminalResize as _rtrSetter, onRelayTerminalClose as _rtclSetter } from '~/composables/useShare';
+import { setOnShareClosed, setOnRelayTerminalCreate, setOnRelayTerminalInput, setOnRelayTerminalResize, setOnRelayTerminalClose } from '~/composables/useShare';
 // Map of relay terminalId → local WebSocket (desktop host bridges guest terminals to local PTY)
 const relayTerminalWs = new Map<string, WebSocket>();
 
 if (import.meta.client) {
-    (async () => {
-        const mod = await import('~/composables/useShare');
-        mod.onShareClosed = () => {
-            resetToFolderSelector();
-        };
+    setOnShareClosed(() => {
+        resetToFolderSelector();
+    });
 
-        // Desktop host relay: guest creates a terminal → spawn local terminal, pipe I/O through relay WS
-        mod.onRelayTerminalCreate = (msg: any) => {
-            const { terminalId, cwd, cols, rows } = msg;
-            const { getLocalWsUrl, getSessionId } = useApi();
-            const { sendRelayMessage } = useShare();
-            // Connect to the local terminal WS (bypasses share routing to avoid loop)
-            const localWs = new WebSocket(getLocalWsUrl());
-            relayTerminalWs.set(terminalId, localWs);
-
-            localWs.onopen = () => {
-                localWs.send(JSON.stringify({
-                    type: "create",
-                    cwd: cwd || rootPath.value,
-                    cols: cols || 80,
-                    rows: rows || 24,
-                    sessionId: getSessionId(),
-                }));
-            };
-
-            localWs.onmessage = (ev) => {
-                try {
-                    const data = JSON.parse(ev.data);
-                    if (data.type === "output") {
-                        sendRelayMessage({ type: "terminal-output", terminalId, data: data.data });
-                    } else if (data.type === "exit") {
-                        sendRelayMessage({ type: "terminal-exit", terminalId, code: data.code ?? 0 });
-                        localWs.close();
-                        relayTerminalWs.delete(terminalId);
-                    }
-                } catch {}
-            };
-
-            localWs.onclose = () => {
-                relayTerminalWs.delete(terminalId);
-            };
+    // Desktop host relay: guest creates a terminal → spawn local terminal, pipe I/O through relay WS
+    setOnRelayTerminalCreate((msg: any) => {
+        const { terminalId, cwd, cols, rows } = msg;
+        const { getLocalWsUrl, getSessionId } = useApi();
+        const { sendRelayMessage } = useShare();
+        // Connect to the local terminal WS (bypasses share routing to avoid loop)
+        const localWs = new WebSocket(getLocalWsUrl());
+        relayTerminalWs.set(terminalId, localWs);
+
+        localWs.onopen = () => {
+            localWs.send(JSON.stringify({
+                type: "create",
+                cwd: cwd || rootPath.value,
+                cols: cols || 80,
+                rows: rows || 24,
+                sessionId: getSessionId(),
+            }));
         };
 
-        mod.onRelayTerminalInput = (msg: any) => {
-            const ws = relayTerminalWs.get(msg.terminalId);
-            if (ws && ws.readyState === WebSocket.OPEN) {
-                ws.send(JSON.stringify({ type: "input", data: msg.data }));
-            }
+        localWs.onmessage = (ev) => {
+            try {
+                const data = JSON.parse(ev.data);
+                if (data.type === "output") {
+                    sendRelayMessage({ type: "terminal-output", terminalId, data: data.data });
+                } else if (data.type === "exit") {
+                    sendRelayMessage({ type: "terminal-exit", terminalId, code: data.code ?? 0 });
+                    localWs.close();
+                    relayTerminalWs.delete(terminalId);
+                }
+            } catch {}
         };
 
-        mod.onRelayTerminalResize = (msg: any) => {
-            const ws = relayTerminalWs.get(msg.terminalId);
-            if (ws && ws.readyState === WebSocket.OPEN) {
-                ws.send(JSON.stringify({ type: "resize", cols: msg.cols, rows: msg.rows }));
-            }
+        localWs.onclose = () => {
+            relayTerminalWs.delete(terminalId);
         };
+    });
 
-        mod.onRelayTerminalClose = (msg: any) => {
-            const ws = relayTerminalWs.get(msg.terminalId);
-            if (ws) {
-                ws.close();
-                relayTerminalWs.delete(msg.terminalId);
-            }
-        };
-    })();
+    setOnRelayTerminalInput((msg: any) => {
+        const ws = relayTerminalWs.get(msg.terminalId);
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ type: "input", data: msg.data }));
+        }
+    });
+
+    setOnRelayTerminalResize((msg: any) => {
+        const ws = relayTerminalWs.get(msg.terminalId);
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            ws.send(JSON.stringify({ type: "resize", cols: msg.cols, rows: msg.rows }));
+        }
+    });
+
+    setOnRelayTerminalClose((msg: any) => {
+        const ws = relayTerminalWs.get(msg.terminalId);
+        if (ws) {
+            ws.close();
+            relayTerminalWs.delete(msg.terminalId);
+        }
+    });
 }
 
 const editorAreaRef = ref<{ splitRatio: number; focusPane: (id: string) => void } | null>(null);

server/routes/_share-terminal.ts

@@ -82,6 +82,9 @@ export default defineWebSocketHandler({
             let subs = peerTerminals.get(peer.id);
             if (!subs) { subs = new Set(); peerTerminals.set(peer.id, subs); }
             subs.add(terminalId);
+            // Confirm subscription so the client knows it's active and can handle input/resize
+            const name = session.activeTerminals.get(terminalId) || "";
+            peer.send(JSON.stringify({ type: "terminal-ready", terminalId, name }));
         } else if (data.type === "input") {
             const { terminalId, data: inputData } = data;
             if (typeof terminalId !== "string" || typeof inputData !== "string") return;