x-shell.js 1.0.0 → 1.1.0

package/dist/ui/browser-bundle.js

@@ -791,9 +791,19 @@ var TerminalClient = class {
     this.spawnedHandlers = [];
     this.serverInfoHandlers = [];
     this.containerListHandlers = [];
-    // Promise resolvers for spawn
+    // Session multiplexing handlers
+    this.sessionListHandlers = [];
+    this.joinedHandlers = [];
+    this.leftHandlers = [];
+    this.clientJoinedHandlers = [];
+    this.clientLeftHandlers = [];
+    this.sessionClosedHandlers = [];
+    // Promise resolvers for spawn/join
     this.spawnResolve = null;
     this.spawnReject = null;
+    this.joinResolve = null;
+    this.joinReject = null;
+    this.listSessionsResolve = null;
     this.config = {
       url: config.url,
       reconnect: config.reconnect ?? true,
@@ -927,6 +937,11 @@ var TerminalClient = class {
           this.spawnResolve = null;
           this.spawnReject = null;
         }
+        if (this.joinReject) {
+          this.joinReject(error);
+          this.joinResolve = null;
+          this.joinReject = null;
+        }
         break;
       case "serverInfo":
         this.serverInfo = message.info;
@@ -935,6 +950,64 @@ var TerminalClient = class {
       case "containerList":
         this.containerListHandlers.forEach((handler) => handler(message.containers));
         break;
+      case "sessionList":
+        this.sessionListHandlers.forEach(
+          (handler) => handler(message.sessions)
+        );
+        if (this.listSessionsResolve) {
+          this.listSessionsResolve(message.sessions);
+          this.listSessionsResolve = null;
+        }
+        break;
+      case "joined":
+        const joinedSession = message.session;
+        const history = message.history;
+        this.sessionId = message.sessionId;
+        this.sessionInfo = {
+          sessionId: joinedSession.sessionId,
+          shell: joinedSession.shell,
+          cwd: joinedSession.cwd,
+          cols: joinedSession.cols,
+          rows: joinedSession.rows,
+          createdAt: joinedSession.createdAt,
+          container: joinedSession.container
+        };
+        this.joinedHandlers.forEach((handler) => handler(joinedSession, history));
+        if (this.joinResolve) {
+          this.joinResolve(joinedSession);
+          this.joinResolve = null;
+          this.joinReject = null;
+        }
+        break;
+      case "left":
+        const leftSessionId = message.sessionId;
+        if (this.sessionId === leftSessionId) {
+          this.sessionId = null;
+          this.sessionInfo = null;
+        }
+        this.leftHandlers.forEach((handler) => handler(leftSessionId));
+        break;
+      case "clientJoined":
+        this.clientJoinedHandlers.forEach(
+          (handler) => handler(message.sessionId, message.clientCount)
+        );
+        break;
+      case "clientLeft":
+        this.clientLeftHandlers.forEach(
+          (handler) => handler(message.sessionId, message.clientCount)
+        );
+        break;
+      case "sessionClosed":
+        const closedSessionId = message.sessionId;
+        const reason = message.reason;
+        if (this.sessionId === closedSessionId) {
+          this.sessionId = null;
+          this.sessionInfo = null;
+        }
+        this.sessionClosedHandlers.forEach(
+          (handler) => handler(closedSessionId, reason)
+        );
+        break;
     }
   }
   /**
@@ -947,7 +1020,7 @@ var TerminalClient = class {
         return;
       }
       if (this.sessionId) {
-        reject(new Error("Session already spawned. Call kill() first."));
+        reject(new Error("Session already active. Call kill() or leave() first."));
         return;
       }
       this.spawnResolve = resolve;
@@ -1002,7 +1075,7 @@ var TerminalClient = class {
     );
   }
   /**
-   * Kill the terminal session
+   * Kill the terminal session (close and terminate)
    */
   kill() {
     if (!this.ws || this.state !== "connected") {
@@ -1021,6 +1094,91 @@ var TerminalClient = class {
     this.sessionInfo = null;
   }
   // ==========================================
+  // Session Multiplexing Methods
+  // ==========================================
+  /**
+   * List available sessions
+   */
+  listSessions(filter) {
+    return new Promise((resolve, reject) => {
+      if (this.state !== "connected" || !this.ws) {
+        reject(new Error("Not connected to server"));
+        return;
+      }
+      this.listSessionsResolve = resolve;
+      this.ws.send(
+        JSON.stringify({
+          type: "listSessions",
+          filter
+        })
+      );
+    });
+  }
+  /**
+   * Join an existing session
+   */
+  join(options) {
+    return new Promise((resolve, reject) => {
+      if (this.state !== "connected" || !this.ws) {
+        reject(new Error("Not connected to server"));
+        return;
+      }
+      if (this.sessionId) {
+        reject(new Error("Already in a session. Call leave() first."));
+        return;
+      }
+      this.joinResolve = resolve;
+      this.joinReject = reject;
+      this.ws.send(
+        JSON.stringify({
+          type: "join",
+          options
+        })
+      );
+    });
+  }
+  /**
+   * Leave the current session without killing it
+   */
+  leave(sessionId) {
+    if (!this.ws || this.state !== "connected") {
+      console.error("[x-shell] Cannot leave: not connected");
+      return;
+    }
+    const targetSession = sessionId || this.sessionId;
+    if (!targetSession) {
+      console.error("[x-shell] Cannot leave: no active session");
+      return;
+    }
+    this.ws.send(
+      JSON.stringify({
+        type: "leave",
+        sessionId: targetSession
+      })
+    );
+    if (targetSession === this.sessionId) {
+      this.sessionId = null;
+      this.sessionInfo = null;
+    }
+  }
+  /**
+   * Request session list and trigger onSessionList handlers
+   * (Fire-and-forget version of listSessions)
+   */
+  requestSessionList(filter) {
+    this.listSessions(filter).then((sessions) => {
+      this.sessionListHandlers.forEach((handler) => {
+        try {
+          handler(sessions);
+        } catch (e5) {
+          console.error("[x-shell] Error in sessionList handler:", e5);
+        }
+      });
+    }).catch((err) => {
+      console.error("[x-shell] Failed to list sessions:", err);
+    });
+  }
+  // ==========================================
   // Event handlers
   // ==========================================
   /**
@@ -1074,6 +1232,42 @@ var TerminalClient = class {
   onContainerList(handler) {
     this.containerListHandlers.push(handler);
   }
+  /**
+   * Called when session list is received
+   */
+  onSessionList(handler) {
+    this.sessionListHandlers.push(handler);
+  }
+  /**
+   * Called when successfully joined a session
+   */
+  onJoined(handler) {
+    this.joinedHandlers.push(handler);
+  }
+  /**
+   * Called when left a session
+   */
+  onLeft(handler) {
+    this.leftHandlers.push(handler);
+  }
+  /**
+   * Called when another client joins the current session
+   */
+  onClientJoined(handler) {
+    this.clientJoinedHandlers.push(handler);
+  }
+  /**
+   * Called when another client leaves the current session
+   */
+  onClientLeft(handler) {
+    this.clientLeftHandlers.push(handler);
+  }
+  /**
+   * Called when the session is closed by owner or orphan timeout
+   */
+  onSessionClosed(handler) {
+    this.sessionClosedHandlers.push(handler);
+  }
   /**
    * Request list of available containers
    */
@@ -1145,6 +1339,7 @@ var XShellTerminal = class extends i4 {
     this.showConnectionPanel = false;
     this.showSettings = false;
     this.showStatusBar = false;
+    this.showTabs = false;
     this.fontSize = 14;
     this.fontFamily = 'Menlo, Monaco, "Courier New", monospace';
     this.client = null;
@@ -1159,10 +1354,16 @@ var XShellTerminal = class extends i4 {
     this.serverInfo = null;
     this.selectedContainer = "";
     this.selectedShell = "/bin/sh";
-    this.connectionMode = "docker";
+    this.connectionMode = "local";
+    this.availableSessions = [];
+    this.selectedSessionId = "";
+    this.clientCount = 1;
     this.settingsMenuOpen = false;
     this.statusMessage = "";
     this.statusType = "info";
+    this.tabs = [];
+    this.activeTabId = "";
+    this.tabCounter = 0;
     // xterm.js module (loaded dynamically)
     this.xtermModule = null;
     this.fitAddonModule = null;
@@ -1170,6 +1371,9 @@ var XShellTerminal = class extends i4 {
   }
   connectedCallback() {
     super.connectedCallback();
+    if (this.showTabs && this.tabs.length === 0) {
+      this.createTab();
+    }
     if (this.autoConnect && this.url) {
       this.connect();
     }
@@ -1248,23 +1452,55 @@ var XShellTerminal = class extends i4 {
           new CustomEvent("error", { detail: { error: err }, bubbles: true, composed: true })
         );
       });
+      const client = this.client;
       this.client.onData((data) => {
-        if (this.terminal) {
+        if (this.showTabs) {
+          const tab = this.tabs.find((t4) => t4.client === client);
+          if (tab?.terminal) {
+            tab.terminal.write(data);
+          }
+        } else if (this.terminal) {
           this.terminal.write(data);
         }
       });
       this.client.onExit((code) => {
-        this.sessionActive = false;
-        this.sessionInfo = null;
-        if (this.terminal) {
-          this.terminal.writeln("");
-          this.terminal.writeln(`\x1B[1;33m[Process exited with code: ${code}]\x1B[0m`);
+        if (this.showTabs) {
+          const tab = this.tabs.find((t4) => t4.client === client);
+          if (tab) {
+            tab.sessionActive = false;
+            tab.sessionInfo = null;
+            if (tab.terminal) {
+              tab.terminal.writeln("");
+              tab.terminal.writeln(`\x1B[1;33m[Process exited with code: ${code}]\x1B[0m`);
+            }
+            if (tab.id === this.activeTabId) {
+              this.sessionActive = false;
+              this.sessionInfo = null;
+            }
+            this.tabs = [...this.tabs];
+          }
+        } else {
+          this.sessionActive = false;
+          this.sessionInfo = null;
+          if (this.terminal) {
+            this.terminal.writeln("");
+            this.terminal.writeln(`\x1B[1;33m[Process exited with code: ${code}]\x1B[0m`);
+          }
         }
         this.dispatchEvent(
           new CustomEvent("exit", { detail: { exitCode: code }, bubbles: true, composed: true })
         );
       });
       this.client.onSpawned((info) => {
+        if (this.showTabs) {
+          const tab = this.tabs.find((t4) => t4.client === client);
+          if (tab) {
+            tab.sessionInfo = info;
+            tab.sessionActive = true;
+            tab.label = info.container || info.shell.split("/").pop() || "Terminal";
+            this.tabs = [...this.tabs];
+          }
+        }
         this.sessionInfo = info;
         this.setStatus(`Session started: ${info.container || info.shell}`, "success");
         this.dispatchEvent(
@@ -1285,7 +1521,55 @@ var XShellTerminal = class extends i4 {
           this.selectedContainer = containers[0].name;
         }
       });
+      this.client.onSessionList((sessions) => {
+        this.availableSessions = sessions;
+        if (sessions.length > 0 && !this.selectedSessionId) {
+          this.selectedSessionId = sessions[0].sessionId;
+        }
+      });
+      this.client.onClientJoined((sessionId, count) => {
+        if (this.showTabs) {
+          const tab = this.tabs.find((t4) => t4.client === client);
+          if (tab) {
+            tab.clientCount = count;
+            this.tabs = [...this.tabs];
+          }
+        }
+        this.clientCount = count;
+        this.setStatus(`Client joined (${count} total)`, "info");
+      });
+      this.client.onClientLeft((sessionId, count) => {
+        if (this.showTabs) {
+          const tab = this.tabs.find((t4) => t4.client === client);
+          if (tab) {
+            tab.clientCount = count;
+            this.tabs = [...this.tabs];
+          }
+        }
+        this.clientCount = count;
+        this.setStatus(`Client left (${count} remaining)`, "info");
+      });
+      this.client.onSessionClosed((sessionId, reason) => {
+        if (this.showTabs) {
+          const tab = this.tabs.find((t4) => t4.client === client && t4.sessionInfo?.sessionId === sessionId);
+          if (tab) {
+            tab.sessionActive = false;
+            tab.sessionInfo = null;
+            this.tabs = [...this.tabs];
+          }
+        }
+        if (this.sessionInfo?.sessionId === sessionId) {
+          this.sessionActive = false;
+          this.sessionInfo = null;
+          this.setStatus(`Session closed: ${reason}`, "info");
+        }
+        client.requestSessionList();
+      });
       await this.client.connect();
+      this.client.requestSessionList();
+      if (this.showTabs) {
+        this.syncStateToActiveTab();
+      }
     } catch (err) {
       this.error = err instanceof Error ? err.message : "Connection failed";
     } finally {
@@ -1329,6 +1613,10 @@ var XShellTerminal = class extends i4 {
       const info = await this.client.spawn(spawnOptions);
       this.sessionActive = true;
       this.sessionInfo = info;
+      if (this.showTabs) {
+        this.syncStateToActiveTab();
+      }
+      this.client.requestSessionList();
       if (this.terminal) {
         this.terminal.focus();
       }
@@ -1348,7 +1636,12 @@ var XShellTerminal = class extends i4 {
       return;
     await this.loadXterm();
     await this.updateComplete;
-    const container = this.shadowRoot?.querySelector(".terminal-container");
+    let container = null;
+    if (this.showTabs && this.activeTabId) {
+      container = this.shadowRoot?.querySelector(`.tab-terminal-container[data-tab-id="${this.activeTabId}"]`) ?? null;
+    } else {
+      container = this.shadowRoot?.querySelector(".terminal-container") ?? null;
+    }
     if (!container)
       return;
     const terminalTheme = this.getTerminalTheme();
@@ -1378,12 +1671,22 @@ var XShellTerminal = class extends i4 {
         this.client.resize(cols, rows);
       }
     });
-    this.resizeObserver = new ResizeObserver(() => {
-      if (this.fitAddon) {
-        this.fitAddon.fit();
-      }
-    });
+    if (!this.resizeObserver) {
+      this.resizeObserver = new ResizeObserver(() => {
+        if (this.showTabs) {
+          const activeTab = this.getActiveTab();
+          if (activeTab?.fitAddon) {
+            activeTab.fitAddon.fit();
+          }
+        } else if (this.fitAddon) {
+          this.fitAddon.fit();
+        }
+      });
+    }
     this.resizeObserver.observe(container);
+    if (this.showTabs) {
+      this.syncStateToActiveTab();
+    }
   }
   /**
    * Get terminal theme based on component theme
@@ -1472,6 +1775,141 @@ var XShellTerminal = class extends i4 {
     }
     this.fitAddon = null;
   }
+  // ==================== Tab Management Methods ====================
+  /**
+   * Get the active tab
+   */
+  getActiveTab() {
+    return this.tabs.find((t4) => t4.id === this.activeTabId);
+  }
+  /**
+   * Create a new tab
+   */
+  createTab(label) {
+    this.tabCounter++;
+    const tab = {
+      id: `tab-${this.tabCounter}`,
+      label: label || `Terminal ${this.tabCounter}`,
+      client: null,
+      terminal: null,
+      fitAddon: null,
+      connected: false,
+      sessionActive: false,
+      sessionInfo: null,
+      clientCount: 1,
+      containerEl: null
+    };
+    this.tabs = [...this.tabs, tab];
+    this.switchTab(tab.id);
+    return tab;
+  }
+  /**
+   * Switch to a tab
+   */
+  switchTab(tabId) {
+    const tab = this.tabs.find((t4) => t4.id === tabId);
+    if (!tab)
+      return;
+    this.activeTabId = tabId;
+    this.client = tab.client;
+    this.terminal = tab.terminal;
+    this.fitAddon = tab.fitAddon;
+    this.connected = tab.connected;
+    this.sessionActive = tab.sessionActive;
+    this.sessionInfo = tab.sessionInfo;
+    this.clientCount = tab.clientCount;
+    this.updateComplete.then(() => {
+      if (tab.terminal) {
+        tab.terminal.focus();
+      }
+      if (tab.fitAddon) {
+        tab.fitAddon.fit();
+      }
+    });
+  }
+  /**
+   * Close a tab
+   */
+  closeTab(tabId) {
+    const tabIndex = this.tabs.findIndex((t4) => t4.id === tabId);
+    if (tabIndex === -1)
+      return;
+    const tab = this.tabs[tabIndex];
+    if (tab.terminal) {
+      tab.terminal.dispose();
+    }
+    if (tab.client) {
+      tab.client.disconnect();
+    }
+    this.tabs = this.tabs.filter((t4) => t4.id !== tabId);
+    if (this.activeTabId === tabId && this.tabs.length > 0) {
+      const newIndex = Math.max(0, tabIndex - 1);
+      this.switchTab(this.tabs[newIndex].id);
+    }
+    if (this.tabs.length === 0) {
+      this.activeTabId = "";
+      this.client = null;
+      this.terminal = null;
+      this.fitAddon = null;
+      this.connected = false;
+      this.sessionActive = false;
+      this.sessionInfo = null;
+    }
+  }
+  /**
+   * Update the active tab's state from component state
+   */
+  syncStateToActiveTab() {
+    const tab = this.getActiveTab();
+    if (tab) {
+      tab.client = this.client;
+      tab.terminal = this.terminal;
+      tab.fitAddon = this.fitAddon;
+      tab.connected = this.connected;
+      tab.sessionActive = this.sessionActive;
+      tab.sessionInfo = this.sessionInfo;
+      tab.clientCount = this.clientCount;
+      this.tabs = [...this.tabs];
+    }
+  }
+  /**
+   * Render the tab bar
+   */
+  renderTabBar() {
+    if (!this.showTabs)
+      return A;
+    return b2`
+      <div class="tab-bar">
+        ${this.tabs.map(
+      (tab) => b2`
+            <button
+              class="tab ${tab.id === this.activeTabId ? "active" : ""}"
+              @click=${() => this.switchTab(tab.id)}
+            >
+              <span class="tab-status ${tab.sessionActive ? "connected" : ""}"></span>
+              <span>${tab.label}</span>
+              ${this.tabs.length > 1 ? b2`
+                    <button
+                      class="tab-close"
+                      @click=${(e5) => {
+        e5.stopPropagation();
+        this.closeTab(tab.id);
+      }}
+                      title="Close tab"
+                    >
+                      ×
+                    </button>
+                  ` : A}
+            </button>
+          `
+    )}
+        <button class="tab-add" @click=${() => this.createTab()} title="New tab">
+          +
+        </button>
+      </div>
+    `;
+  }
+  // ==================== End Tab Management Methods ====================
   /**
    * Set status message
    */
@@ -1535,6 +1973,70 @@ var XShellTerminal = class extends i4 {
     if (this.connectionMode === "docker" && this.client && this.connected) {
       this.client.requestContainerList();
     }
+    if (this.connectionMode === "join" && this.client && this.connected) {
+      this.client.requestSessionList();
+    }
+  }
+  /**
+   * Refresh session list
+   */
+  refreshSessions() {
+    if (this.client && this.connected) {
+      this.client.requestSessionList();
+    }
+  }
+  /**
+   * Join an existing session
+   */
+  async join(sessionId, requestHistory = true) {
+    if (!this.client || !this.connected) {
+      throw new Error("Not connected to server");
+    }
+    this.loading = true;
+    this.error = null;
+    try {
+      await this.initTerminalUI();
+      const session = await this.client.join({
+        sessionId,
+        requestHistory,
+        historyLimit: 5e4
+      });
+      this.sessionActive = true;
+      this.sessionInfo = {
+        sessionId: session.sessionId,
+        shell: session.shell,
+        cwd: session.cwd,
+        cols: session.cols,
+        rows: session.rows,
+        createdAt: session.createdAt || /* @__PURE__ */ new Date(),
+        container: session.container
+      };
+      this.clientCount = session.clientCount;
+      if (this.showTabs) {
+        this.syncStateToActiveTab();
+      }
+      this.setStatus(`Joined session (${session.clientCount} clients)`, "success");
+      if (this.terminal) {
+        this.terminal.focus();
+      }
+      return session;
+    } catch (err) {
+      this.error = err instanceof Error ? err.message : "Failed to join session";
+      throw err;
+    } finally {
+      this.loading = false;
+    }
+  }
+  /**
+   * Leave current session without killing it
+   */
+  leave() {
+    if (this.client && this.sessionInfo) {
+      this.client.leave(this.sessionInfo.sessionId);
+      this.sessionActive = false;
+      this.sessionInfo = null;
+      this.setStatus("Left session", "info");
+    }
   }
   /**
    * Handle connect from connection panel
@@ -1544,14 +2046,18 @@ var XShellTerminal = class extends i4 {
       await this.connect();
     }
     if (this.connected) {
-      const options = {};
-      if (this.connectionMode === "docker" && this.selectedContainer) {
-        options.container = this.selectedContainer;
-        options.containerShell = this.selectedShell || "/bin/sh";
+      if (this.connectionMode === "join" && this.selectedSessionId) {
+        await this.join(this.selectedSessionId);
       } else {
-        options.shell = this.selectedShell || void 0;
+        const options = {};
+        if (this.connectionMode === "docker" && this.selectedContainer) {
+          options.container = this.selectedContainer;
+          options.containerShell = this.selectedShell || "/bin/sh";
+        } else {
+          options.shell = this.selectedShell || void 0;
+        }
+        await this.spawn(options);
       }
-      await this.spawn(options);
     }
   }
   /**
@@ -1567,11 +2073,13 @@ var XShellTerminal = class extends i4 {
     if (!this.showConnectionPanel)
       return A;
     const runningContainers = this.containers.filter((c4) => c4.state === "running");
+    const acceptingSessions = this.availableSessions.filter((s4) => s4.accepting);
     return b2`
       <div class="connection-panel">
         <div class="connection-panel-title">
           <span>Connection</span>
-          ${this.serverInfo?.dockerEnabled ? b2`<span style="font-size: 11px; color: var(--xs-status-connected);">Docker enabled</span>` : A}
+          ${this.availableSessions.length > 0 ? b2`<span style="font-size: 11px; color: var(--xs-status-connected);">${this.availableSessions.length} session(s) available</span>` : A}
+          ${this.serverInfo?.dockerEnabled ? b2`<span style="font-size: 11px; color: var(--xs-text-muted);">Docker enabled</span>` : A}
         </div>
         <div class="connection-form">
           <div class="form-group">
@@ -1581,12 +2089,37 @@ var XShellTerminal = class extends i4 {
               @change=${this.handleModeChange}
               ?disabled=${this.sessionActive}
             >
-              <option value="local">Local Shell</option>
-              ${this.serverInfo?.dockerEnabled ? b2`<option value="docker">Docker Container</option>` : A}
+              <option value="local">New Local Shell</option>
+              ${this.serverInfo?.dockerEnabled ? b2`<option value="docker">New Docker Session</option>` : A}
+              ${acceptingSessions.length > 0 ? b2`<option value="join">Join Existing Session</option>` : A}
             </select>
           </div>
 
-          ${this.connectionMode === "docker" ? b2`
+          ${this.connectionMode === "join" ? b2`
+            <div class="form-group">
+              <label style="display: flex; justify-content: space-between; align-items: center;">
+                <span>Session</span>
+                <button
+                  style="font-size: 10px; padding: 2px 6px;"
+                  @click=${this.refreshSessions}
+                  ?disabled=${!this.connected}
+                >Refresh</button>
+              </label>
+              <select
+                .value=${this.selectedSessionId}
+                @change=${(e5) => this.selectedSessionId = e5.target.value}
+                ?disabled=${this.sessionActive}
+              >
+                ${acceptingSessions.length === 0 ? b2`<option value="">No sessions available</option>` : acceptingSessions.map((s4) => b2`
+                      <option value=${s4.sessionId}>
+                        ${s4.label || s4.sessionId.substring(0, 12)}
+                        (${s4.type === "local" ? s4.shell : s4.container || s4.type})
+                        - ${s4.clientCount} client(s)
+                      </option>
+                    `)}
+              </select>
+            </div>
+          ` : this.connectionMode === "docker" ? b2`
             <div class="form-group">
               <label>Container</label>
               <select
@@ -1601,28 +2134,30 @@ var XShellTerminal = class extends i4 {
             </div>
           ` : A}
 
-          <div class="form-group">
-            <label>Shell</label>
-            <select
-              .value=${this.selectedShell}
-              @change=${(e5) => this.selectedShell = e5.target.value}
-              ?disabled=${this.sessionActive}
-            >
-              ${this.serverInfo?.allowedShells.length ? this.serverInfo.allowedShells.map((s4) => b2`<option value=${s4}>${s4}</option>`) : b2`
-                    <option value="/bin/bash">/bin/bash</option>
-                    <option value="/bin/sh">/bin/sh</option>
-                    <option value="/bin/zsh">/bin/zsh</option>
-                  `}
-            </select>
-          </div>
+          ${this.connectionMode !== "join" ? b2`
+            <div class="form-group">
+              <label>Shell</label>
+              <select
+                .value=${this.selectedShell}
+                @change=${(e5) => this.selectedShell = e5.target.value}
+                ?disabled=${this.sessionActive}
+              >
+                ${this.serverInfo?.allowedShells.length ? this.serverInfo.allowedShells.map((s4) => b2`<option value=${s4}>${s4}</option>`) : b2`
+                      <option value="/bin/bash">/bin/bash</option>
+                      <option value="/bin/sh">/bin/sh</option>
+                      <option value="/bin/zsh">/bin/zsh</option>
+                    `}
+              </select>
+            </div>
+          ` : A}
 
           <div class="form-group">
             ${!this.connected ? b2`<button class="btn-primary" @click=${this.handlePanelConnect} ?disabled=${this.loading}>
                   ${this.loading ? "Connecting..." : "Connect"}
-                </button>` : !this.sessionActive ? b2`<button class="btn-primary" @click=${this.handlePanelConnect} ?disabled=${this.loading}>
-                  ${this.loading ? "Starting..." : "Start Session"}
+                </button>` : !this.sessionActive ? b2`<button class="btn-primary" @click=${this.handlePanelConnect} ?disabled=${this.loading || this.connectionMode === "join" && !this.selectedSessionId}>
+                  ${this.loading ? "Starting..." : this.connectionMode === "join" ? "Join Session" : "Start Session"}
                 </button>` : b2`<button class="btn-danger" @click=${this.kill}>
-                  Stop Session
+                  ${this.clientCount > 1 ? "Leave Session" : "Stop Session"}
                 </button>`}
           </div>
         </div>
@@ -1742,10 +2277,26 @@ var XShellTerminal = class extends i4 {
           `}
 
       ${this.renderConnectionPanel()}
-
-      <div class="terminal-container">
-        ${this.loading && !this.terminal ? b2`<div class="loading"><span class="loading-spinner">⏳</span> Loading...</div>` : this.error && !this.terminal ? b2`<div class="error">❌ ${this.error}</div>` : A}
-      </div>
+      ${this.renderTabBar()}
+
+      ${this.showTabs && this.tabs.length > 0 ? b2`
+            <div class="terminals-wrapper">
+              ${this.tabs.map(
+      (tab) => b2`
+                  <div
+                    class="tab-terminal-container ${tab.id === this.activeTabId ? "active" : ""}"
+                    data-tab-id=${tab.id}
+                  >
+                    ${this.loading && tab.id === this.activeTabId && !tab.terminal ? b2`<div class="loading"><span class="loading-spinner">⏳</span> Loading...</div>` : this.error && tab.id === this.activeTabId && !tab.terminal ? b2`<div class="error">❌ ${this.error}</div>` : A}
+                  </div>
+                `
+    )}
+            </div>
+          ` : b2`
+            <div class="terminal-container">
+              ${this.loading && !this.terminal ? b2`<div class="loading"><span class="loading-spinner">⏳</span> Loading...</div>` : this.error && !this.terminal ? b2`<div class="error">❌ ${this.error}</div>` : A}
+            </div>
+          `}
 
       ${this.renderStatusBar()}
     `;
@@ -1987,6 +2538,135 @@ XShellTerminal.styles = [
       .status-bar-success {
         color: var(--xs-status-connected);
       }
+
+      /* Tab bar styles */
+      .tab-bar {
+        display: flex;
+        align-items: center;
+        background: var(--xs-bg-header);
+        border-bottom: 1px solid var(--xs-border);
+        padding: 0 4px;
+        gap: 2px;
+        min-height: 32px;
+        overflow-x: auto;
+      }
+
+      .tab-bar::-webkit-scrollbar {
+        height: 4px;
+      }
+
+      .tab-bar::-webkit-scrollbar-thumb {
+        background: var(--xs-border);
+        border-radius: 2px;
+      }
+
+      .tab {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 12px;
+        background: transparent;
+        border: none;
+        border-bottom: 2px solid transparent;
+        color: var(--xs-text-muted);
+        font-size: 12px;
+        cursor: pointer;
+        white-space: nowrap;
+        transition: all 0.15s ease;
+      }
+
+      .tab:hover {
+        background: var(--xs-btn-hover);
+        color: var(--xs-text);
+      }
+
+      .tab.active {
+        color: var(--xs-text);
+        border-bottom-color: var(--xs-status-connected);
+        background: var(--xs-bg);
+      }
+
+      .tab-status {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--xs-status-disconnected);
+      }
+
+      .tab-status.connected {
+        background: var(--xs-status-connected);
+      }
+
+      .tab-close {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+        border-radius: 3px;
+        background: none;
+        border: none;
+        color: var(--xs-text-muted);
+        font-size: 14px;
+        cursor: pointer;
+        opacity: 0;
+        transition: opacity 0.15s ease;
+      }
+
+      .tab:hover .tab-close {
+        opacity: 1;
+      }
+
+      .tab-close:hover {
+        background: var(--xs-btn-hover);
+        color: var(--xs-text);
+      }
+
+      .tab-add {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border-radius: 4px;
+        background: none;
+        border: none;
+        color: var(--xs-text-muted);
+        font-size: 18px;
+        cursor: pointer;
+        margin-left: 4px;
+      }
+
+      .tab-add:hover {
+        background: var(--xs-btn-hover);
+        color: var(--xs-text);
+      }
+
+      /* Multi-terminal container */
+      .terminals-wrapper {
+        flex: 1;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .tab-terminal-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        padding: 4px;
+        background: var(--xs-terminal-bg);
+        display: none;
+      }
+
+      .tab-terminal-container.active {
+        display: block;
+      }
+
+      .tab-terminal-container .xterm {
+        height: 100%;
+      }
     `
 ];
 __decorateClass([
@@ -2037,6 +2717,9 @@ __decorateClass([
 __decorateClass([
   n4({ type: Boolean, attribute: "show-status-bar" })
 ], XShellTerminal.prototype, "showStatusBar", 2);
+__decorateClass([
+  n4({ type: Boolean, attribute: "show-tabs" })
+], XShellTerminal.prototype, "showTabs", 2);
 __decorateClass([
   n4({ type: Number, attribute: "font-size" })
 ], XShellTerminal.prototype, "fontSize", 2);
@@ -2082,6 +2765,15 @@ __decorateClass([
 __decorateClass([
   r5()
 ], XShellTerminal.prototype, "connectionMode", 2);
+__decorateClass([
+  r5()
+], XShellTerminal.prototype, "availableSessions", 2);
+__decorateClass([
+  r5()
+], XShellTerminal.prototype, "selectedSessionId", 2);
+__decorateClass([
+  r5()
+], XShellTerminal.prototype, "clientCount", 2);
 __decorateClass([
   r5()
 ], XShellTerminal.prototype, "settingsMenuOpen", 2);
@@ -2091,6 +2783,12 @@ __decorateClass([
 __decorateClass([
   r5()
 ], XShellTerminal.prototype, "statusType", 2);
+__decorateClass([
+  r5()
+], XShellTerminal.prototype, "tabs", 2);
+__decorateClass([
+  r5()
+], XShellTerminal.prototype, "activeTabId", 2);
 XShellTerminal = __decorateClass([
   t3("x-shell-terminal")
 ], XShellTerminal);