fix: shared terminals

Author: Vierre3

app/components/ShareModal.vue

@@ -41,7 +41,7 @@
                             <input class="field-input share-link" :value="shareUrl" readonly
                                 @click="($event.target as HTMLInputElement).select()" />
                             <button class="dialog-btn copy" @click="copyLink" :class="{ copied }">
-                                {{ copied ? 'Copied!' : 'Copy' }}
+                                {{ copied ? 'Copied' : 'Copy' }}
                             </button>
                         </div>
 

app/components/TerminalPanel.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-const { isSharing, sharedTerminals } = useShare();
+const { isSharing, sharedTerminals, addSharedTerminal } = useShare();
 
 const props = defineProps<{
     rootPath: string;
@@ -95,16 +95,17 @@ function createSessions(count: number): TerminalSession[] {
     return arr;
 }
 
-const sessions = ref<TerminalSession[]>(createSessions(1));
+// In share mode, start empty — sharedTerminals watcher will populate sessions
+const sessions = ref<TerminalSession[]>(isSharing.value ? [] : createSessions(1));
 
 // Track server terminal IDs we've already registered (to avoid duplicates on terminal-added)
 const knownShareIds = new Set<string>();
 
 // activeId = left terminal in split (or the single visible terminal)
-const activeId = ref(sessions.value[0]!.id);
+const activeId = ref(sessions.value[0]?.id ?? '');
 const splitId = ref<string | null>(null);
 // focusedId = which terminal is highlighted/selected in sidebar
-const focusedId = ref(sessions.value[0]!.id);
+const focusedId = ref(sessions.value[0]?.id ?? '');
 const splitRatio = ref(50);
 
 // Map: terminalId → { left, right } for ALL saved (non-active) split pairs
@@ -125,7 +126,7 @@ watch(isSharing, (sharing) => {
 
 watch(sharedTerminals, (list) => {
     if (!isSharing.value) return;
-    // Add new terminals
+    // Add new terminals we don't have yet
     for (const t of list) {
         if (!knownShareIds.has(t.id)) {
             knownShareIds.add(t.id);
@@ -137,26 +138,25 @@ watch(sharedTerminals, (list) => {
             }
         }
     }
-    // Remove gone terminals
-    const activeIds = new Set(list.map((t: any) => t.id));
+    // Remove terminals no longer on server
+    const serverIds = new Set(list.map((t: any) => t.id));
     const before = sessions.value.length;
     sessions.value = sessions.value.filter(s => {
-        if (s.shareTerminalId && !activeIds.has(s.shareTerminalId)) {
+        if (s.shareTerminalId && !serverIds.has(s.shareTerminalId)) {
             knownShareIds.delete(s.shareTerminalId);
             return false;
         }
         return true;
     });
     if (sessions.value.length !== before) {
-        // Re-select if active was removed
         if (!sessions.value.find(s => s.id === activeId.value) && sessions.value.length > 0) {
             activeId.value = sessions.value[0]!.id;
             focusedId.value = activeId.value;
         } else if (sessions.value.length === 0) {
             emit("close");
         }
     }
-}, { deep: true });
+}, { deep: true, immediate: true });
 
 watch(() => props.initialTerminalHeight, (val) => {
     if (val !== undefined) panelHeight.value = val;
@@ -179,6 +179,8 @@ function onShareCreated(localId: string, serverTerminalId: string) {
     if (s) {
         s.shareTerminalId = serverTerminalId;
         knownShareIds.add(serverTerminalId);
+        // Add to sharedTerminals so terminal-removed can clean it up
+        addSharedTerminal(serverTerminalId, s.name);
     }
 }
 
@@ -520,10 +522,13 @@ function resetSessions(count: number, splitIndex: number, savedPairsData?: [numb
 
 function ensureSession() {
     if (sessions.value.length === 0) {
+        // In share mode, if the server already has terminals they'll appear via the watcher.
+        // Only create a new local session if there are genuinely no shared terminals yet.
+        if (isSharing.value && sharedTerminals.value.length > 0) return;
         nextId = 1;
         epoch = Date.now();
         savedPairsMap.clear();
-        sessions.value = createSessions(1);
+        sessions.value = isSharing.value ? [{ id: `t${epoch}-${nextId++}`, name: 'Terminal 1' }] : createSessions(1);
         activeId.value = sessions.value[0]!.id;
         focusedId.value = activeId.value;
         splitId.value = null;

app/composables/useShare.ts

@@ -147,6 +147,13 @@ export function useShare() {
         }
     }
 
+    // --- Add a terminal to sharedTerminals (called by creator after terminal-ready) ---
+    function addSharedTerminal(id: string, name: string): void {
+        if (!sharedTerminals.value.find((t: any) => t.id === id)) {
+            sharedTerminals.value = [...sharedTerminals.value, { id, name }];
+        }
+    }
+
     // --- Host: refresh info ---
     async function refreshInfo(): Promise<void> {
         if (!shareId.value) return;
@@ -208,11 +215,14 @@ export function useShare() {
                     allowTerminal.value = msg.allowTerminal;
                 }
                 break;
-            case "terminal-added":
-                if (msg.terminal && !sharedTerminals.value.find((t: any) => t.id === msg.terminal.id)) {
+            case "terminal-added": {
+                // Skip if we are the creator — TerminalPanel.onShareCreated will add it via addSharedTerminal
+                const myId = guestId.value || "host";
+                if (msg.terminal && msg.creatorId !== myId && !sharedTerminals.value.find((t: any) => t.id === msg.terminal.id)) {
                     sharedTerminals.value = [...sharedTerminals.value, msg.terminal];
                 }
                 break;
+            }
             case "terminal-removed":
                 sharedTerminals.value = sharedTerminals.value.filter((t: any) => t.id !== msg.terminalId);
                 break;
@@ -350,6 +360,7 @@ export function useShare() {
         updateSettings,
         refreshInfo,
         getShareTerminalWsUrl,
+        addSharedTerminal,
         sendRelayMessage,
         cleanup,
     };

server/routes/_share-terminal.ts

@@ -68,11 +68,11 @@ export default defineWebSocketHandler({
                     cols: data.cols || 80,
                     rows: data.rows || 24,
                 }));
-                addActiveTerminal(auth.shareId, terminalId, name);
+                addActiveTerminal(auth.shareId, terminalId, name, auth.guestId || "host");
                 peer.send(JSON.stringify({ type: "terminal-ready", terminalId, name }));
             } else {
                 // Direct mode: create SSH shell channel on this server
-                createDirectTerminal(auth.shareId, session, terminalId, name, data, peer);
+                createDirectTerminal(auth.shareId, session, terminalId, name, auth.guestId || "host", data, peer);
             }
         } else if (data.type === "subscribe") {
             const { terminalId } = data;
@@ -139,7 +139,7 @@ function cleanupPeer(peer: any): void {
     peerAuth.delete(peer.id);
 }
 
-async function createDirectTerminal(shareId: string, session: any, terminalId: string, name: string, data: any, peer: any): Promise<void> {
+async function createDirectTerminal(shareId: string, session: any, terminalId: string, name: string, creatorId: string, data: any, peer: any): Promise<void> {
     if (!session.hostSessionId) {
         peer.send(JSON.stringify({ type: "output", terminalId, data: "\r\n\x1b[31m[No SSH session]\x1b[0m\r\n" }));
         return;
@@ -155,7 +155,7 @@ async function createDirectTerminal(shareId: string, session: any, terminalId: s
             }
 
             directTerminals.set(terminalId, { shareId, sshConn: conn, stream });
-            addActiveTerminal(shareId, terminalId, name);
+            addActiveTerminal(shareId, terminalId, name, creatorId);
 
             // Mute initial MOTD
             let muted = true;

server/utils/share.ts

@@ -135,11 +135,11 @@ export function updateShareRootPath(shareId: string, rootPath: string): void {
     session.rootPath = rootPath;
 }
 
-export function addActiveTerminal(shareId: string, terminalId: string, name: string): void {
+export function addActiveTerminal(shareId: string, terminalId: string, name: string, creatorId?: string): void {
     const session = shares.get(shareId);
     if (!session) return;
     session.activeTerminals.set(terminalId, name);
-    broadcastControl(shareId, { type: "terminal-added", terminal: { id: terminalId, name } });
+    broadcastControl(shareId, { type: "terminal-added", terminal: { id: terminalId, name }, creatorId });
 }
 
 export function removeActiveTerminal(shareId: string, terminalId: string): void {