lit-shell.js 1.1.0 → 1.2.1

package/dist/ui/browser-bundle.js

@@ -10,6 +10,9 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 
+// src/version.ts
+var VERSION = "1.2.1";
+
 // node_modules/@lit/reactive-element/css-tag.js
 var t = globalThis;
 var e = t.ShadowRoot && (void 0 === t.ShadyCSS || t.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype;
@@ -748,6 +751,28 @@ var buttonStyles = i`
     opacity: 0.5;
     cursor: not-allowed;
   }
+
+  button.btn-primary,
+  .btn-primary {
+    background: var(--ls-status-connected);
+    color: #ffffff;
+  }
+
+  button.btn-primary:hover,
+  .btn-primary:hover {
+    background: #16a34a;
+  }
+
+  button.btn-danger,
+  .btn-danger {
+    background: var(--ls-status-disconnected);
+    color: #ffffff;
+  }
+
+  button.btn-danger:hover,
+  .btn-danger:hover {
+    background: #dc2626;
+  }
 `;
 
 // src/client/terminal-client.ts
@@ -760,6 +785,8 @@ var TerminalClient = class {
     this.serverInfo = null;
     this.reconnectAttempts = 0;
     this.reconnectTimeout = null;
+    this.previousSessionId = null;
+    this.isReconnecting = false;
     // Event handlers
     this.connectHandlers = [];
     this.disconnectHandlers = [];
@@ -776,6 +803,7 @@ var TerminalClient = class {
     this.clientJoinedHandlers = [];
     this.clientLeftHandlers = [];
     this.sessionClosedHandlers = [];
+    this.reconnectWithSessionHandlers = [];
     // Promise resolvers for spawn/join
     this.spawnResolve = null;
     this.spawnReject = null;
@@ -810,17 +838,25 @@ var TerminalClient = class {
         this.state = "connected";
         this.reconnectAttempts = 0;
         this.connectHandlers.forEach((handler) => handler());
+        if (this.isReconnecting && this.previousSessionId) {
+          this.checkPreviousSessionAndNotify();
+        }
+        this.isReconnecting = false;
         resolve();
       };
       this.ws.onclose = () => {
         const wasConnected = this.state === "connected";
         this.state = "disconnected";
+        if (this.sessionId) {
+          this.previousSessionId = this.sessionId;
+        }
         this.sessionId = null;
         this.sessionInfo = null;
         if (wasConnected) {
           this.disconnectHandlers.forEach((handler) => handler());
         }
         if (this.config.reconnect && this.reconnectAttempts < this.config.maxReconnectAttempts) {
+          this.isReconnecting = true;
           this.scheduleReconnect();
         }
       };
@@ -1295,6 +1331,51 @@ var TerminalClient = class {
   getServerInfo() {
     return this.serverInfo;
   }
+  /**
+   * Get previous session ID (available after disconnect)
+   */
+  getPreviousSessionId() {
+    return this.previousSessionId;
+  }
+  /**
+   * Clear previous session ID (call after user declines to rejoin)
+   */
+  clearPreviousSessionId() {
+    this.previousSessionId = null;
+  }
+  /**
+   * Called when reconnected and previous session is available
+   */
+  onReconnectWithSession(handler) {
+    this.reconnectWithSessionHandlers.push(handler);
+  }
+  /**
+   * Check if previous session exists and notify handlers
+   */
+  async checkPreviousSessionAndNotify() {
+    if (!this.previousSessionId)
+      return;
+    try {
+      const sessions = await this.listSessions();
+      const previousSession = sessions.find(
+        (s4) => s4.sessionId === this.previousSessionId
+      );
+      if (previousSession && previousSession.accepting) {
+        this.reconnectWithSessionHandlers.forEach((handler) => {
+          try {
+            handler(this.previousSessionId);
+          } catch (e5) {
+            console.error("[lit-shell] Error in reconnectWithSession handler:", e5);
+          }
+        });
+      } else {
+        this.previousSessionId = null;
+      }
+    } catch (e5) {
+      console.error("[lit-shell] Failed to check previous session:", e5);
+      this.previousSessionId = null;
+    }
+  }
 };
 
 // src/ui/lit-shell-terminal.ts
@@ -1310,8 +1391,16 @@ var LitShellTerminal = class extends i4 {
     this.noHeader = false;
     this.autoConnect = false;
     this.autoSpawn = false;
+    this.container = "";
+    this.containerShell = "";
+    this.containerUser = "";
+    this.containerCwd = "";
+    this.showConnectionPanel = false;
+    this.showSettings = false;
+    this.showStatusBar = false;
+    this.showTabs = false;
     this.fontSize = 14;
-    this.fontFamily = 'Menlo, Monaco, "Courier New", monospace';
+    this.fontFamily = '"Cascadia Mono", "Cascadia Code", Consolas, "Ubuntu Mono", "DejaVu Sans Mono", "Liberation Mono", Hack, "Fira Code", "JetBrains Mono", Menlo, Monaco, "Courier New", monospace';
     this.client = null;
     this.terminal = null;
     this.fitAddon = null;
@@ -1320,17 +1409,73 @@ var LitShellTerminal = class extends i4 {
     this.loading = false;
     this.error = null;
     this.sessionInfo = null;
+    this.containers = [];
+    this.serverInfo = null;
+    this.selectedContainer = "";
+    this.selectedShell = "/bin/sh";
+    this.connectionMode = "local";
+    this.orphanTimeout = 36e5;
+    this.useTmux = false;
+    this.availableSessions = [];
+    this.selectedSessionId = "";
+    this.clientCount = 1;
+    this.settingsMenuOpen = false;
+    this.showReconnectDialog = false;
+    this.reconnectSessionId = null;
+    this.isMobile = false;
+    this.showTouchKeyboard = true;
+    this.showExtraKeyRows = false;
+    this.statusMessage = "";
+    this.statusType = "info";
+    this.tabs = [];
+    this.activeTabId = "";
+    this.tabCounter = 0;
     // xterm.js module (loaded dynamically)
     this.xtermModule = null;
     this.fitAddonModule = null;
     this.resizeObserver = null;
+    this.ctrlPressed = false;
+    this.altPressed = false;
   }
   connectedCallback() {
     super.connectedCallback();
+    this.setAttribute("data-version", VERSION);
+    this.detectMobile();
+    if (this.showTabs && this.tabs.length === 0) {
+      this.createTab();
+    }
     if (this.autoConnect && this.url) {
       this.connect();
     }
   }
+  /**
+   * Detect if running on a mobile device
+   */
+  detectMobile() {
+    const hasTouch = navigator.maxTouchPoints > 0;
+    const isMobileWidth = window.matchMedia("(max-width: 768px)").matches;
+    const mobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent
+    );
+    this.isMobile = hasTouch && (isMobileWidth || mobileUA);
+    this.updateMobileAttribute();
+    window.matchMedia("(max-width: 768px)").addEventListener("change", (e5) => {
+      if (navigator.maxTouchPoints > 0) {
+        this.isMobile = e5.matches;
+        this.updateMobileAttribute();
+      }
+    });
+  }
+  /**
+   * Update mobile attribute for CSS targeting
+   */
+  updateMobileAttribute() {
+    if (this.isMobile) {
+      this.setAttribute("mobile", "");
+    } else {
+      this.removeAttribute("mobile");
+    }
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.cleanup();
@@ -1352,29 +1497,25 @@ var LitShellTerminal = class extends i4 {
         throw new Error("Failed to load xterm.js. Make sure it is available.");
       }
     }
-    await this.loadXtermStyles();
+    await this.injectXtermCSS();
   }
   /**
-   * Load xterm.css into the shadow DOM
-   * This is necessary because CSS loaded in the main document doesn't apply inside shadow DOM
+   * Inject xterm.js CSS into shadow DOM
    */
-  async loadXtermStyles() {
+  async injectXtermCSS() {
     if (!this.shadowRoot)
       return;
     if (this.shadowRoot.querySelector("#xterm-styles"))
       return;
     try {
       const response = await fetch("https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css");
-      if (!response.ok) {
-        throw new Error(`Failed to fetch xterm.css: ${response.status}`);
-      }
-      const cssText = await response.text();
+      const css = await response.text();
       const style = document.createElement("style");
       style.id = "xterm-styles";
-      style.textContent = cssText;
-      this.shadowRoot.appendChild(style);
-    } catch (error) {
-      console.warn("[lit-shell] Failed to load xterm.css:", error);
+      style.textContent = css;
+      this.shadowRoot.prepend(style);
+    } catch (e5) {
+      console.warn("[lit-shell] Failed to load xterm CSS:", e5);
     }
   }
   /**
@@ -1404,33 +1545,133 @@ var LitShellTerminal = class extends i4 {
       });
       this.client.onError((err) => {
         this.error = err.message;
+        this.setStatus(err.message, "error");
         this.dispatchEvent(
           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(
           new CustomEvent("spawned", { detail: { session: info }, bubbles: true, composed: true })
         );
       });
+      this.client.onServerInfo((info) => {
+        this.serverInfo = info;
+        if (info.dockerEnabled) {
+          this.connectionMode = "docker";
+          this.client?.requestContainerList();
+        }
+        this.selectedShell = info.defaultShell;
+      });
+      this.client.onContainerList((containers) => {
+        this.containers = containers;
+        if (containers.length > 0 && !this.selectedContainer) {
+          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();
+      });
+      this.client.onReconnectWithSession((sessionId) => {
+        this.reconnectSessionId = sessionId;
+        this.showReconnectDialog = true;
+      });
       await this.client.connect();
+      this.client.requestSessionList();
+      if (this.showTabs) {
+        this.syncStateToActiveTab();
+      }
     } catch (err) {
       this.error = err instanceof Error ? err.message : "Connection failed";
     } finally {
@@ -1464,16 +1705,27 @@ var LitShellTerminal = class extends i4 {
         cwd: options?.cwd || this.cwd || void 0,
         cols: this.terminal?.cols || this.cols,
         rows: this.terminal?.rows || this.rows,
-        env: options?.env
+        env: options?.env,
+        // Docker container options
+        container: options?.container || this.container || void 0,
+        containerShell: options?.containerShell || this.containerShell || void 0,
+        containerUser: options?.containerUser || this.containerUser || void 0,
+        containerCwd: options?.containerCwd || this.containerCwd || void 0
       };
       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();
       }
+      return info;
     } catch (err) {
       this.error = err instanceof Error ? err.message : "Failed to spawn session";
+      throw err;
     } finally {
       this.loading = false;
     }
@@ -1486,7 +1738,12 @@ var LitShellTerminal = 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();
@@ -1516,30 +1773,48 @@ var LitShellTerminal = 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
    */
   getTerminalTheme() {
-    if (this.theme === "light") {
+    let effectiveTheme = this.theme;
+    if (this.theme === "auto") {
+      effectiveTheme = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+    }
+    if (effectiveTheme === "light") {
       return {
         background: "#ffffff",
         foreground: "#1f2937",
         cursor: "#1f2937",
-        selection: "#b4d5fe"
+        cursorAccent: "#ffffff",
+        selection: "#b4d5fe",
+        selectionForeground: "#1f2937"
       };
     }
     return {
       background: "#1e1e1e",
       foreground: "#cccccc",
       cursor: "#ffffff",
-      selection: "#264f78"
+      cursorAccent: "#1e1e1e",
+      selection: "#264f78",
+      selectionForeground: "#ffffff"
     };
   }
   /**
@@ -1602,83 +1877,811 @@ var LitShellTerminal = class extends i4 {
     }
     this.fitAddon = null;
   }
-  render() {
+  // ==================== 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`
-      ${this.noHeader ? A : b2`
-            <div class="header">
-              <div class="header-title">
-                <span>Terminal</span>
-                ${this.sessionInfo ? b2`<span style="font-weight: normal; font-size: 12px; color: var(--ls-text-muted)">
-                      ${this.sessionInfo.shell}
-                    </span>` : A}
-              </div>
-              <div class="header-actions">
-                ${!this.connected ? b2`<button @click=${this.connect} ?disabled=${this.loading}>
-                      ${this.loading ? "Connecting..." : "Connect"}
-                    </button>` : !this.sessionActive ? b2`<button @click=${() => this.spawn()} ?disabled=${this.loading}>
-                      ${this.loading ? "Spawning..." : "Start"}
-                    </button>` : b2`<button @click=${this.kill}>Stop</button>`}
-                <button @click=${this.clear} ?disabled=${!this.sessionActive}>Clear</button>
-                <div class="status">
-                  <span class="status-dot ${this.connected ? "connected" : ""}"></span>
-                  <span>${this.connected ? "Connected" : "Disconnected"}</span>
-                </div>
-              </div>
-            </div>
-          `}
-
-      <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 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>
     `;
   }
-};
-LitShellTerminal.styles = [
-  sharedStyles,
-  themeStyles,
-  buttonStyles,
-  i`
-      :host {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        min-height: 200px;
-        border: 1px solid var(--ls-border);
-        border-radius: 4px;
-        overflow: hidden;
+  // ==================== End Tab Management Methods ====================
+  /**
+   * Set status message
+   */
+  setStatus(message, type = "info") {
+    this.statusMessage = message;
+    this.statusType = type;
+    if (type !== "error") {
+      setTimeout(() => {
+        if (this.statusMessage === message) {
+          this.statusMessage = "";
+        }
+      }, 5e3);
+    }
+  }
+  /**
+   * Clear status message
+   */
+  clearStatus() {
+    this.statusMessage = "";
+    this.statusType = "info";
+  }
+  /**
+   * Handle theme change
+   */
+  handleThemeChange(e5) {
+    const select = e5.target;
+    this.theme = select.value;
+    this.applyTerminalTheme();
+    this.dispatchEvent(new CustomEvent("theme-change", {
+      detail: { theme: this.theme },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  /**
+   * Apply current theme to xterm.js terminal
+   */
+  applyTerminalTheme() {
+    if (!this.terminal)
+      return;
+    const terminalTheme = this.getTerminalTheme();
+    this.terminal.options.theme = terminalTheme;
+  }
+  /**
+   * Apply current font size to xterm.js terminal
+   */
+  applyTerminalFontSize() {
+    if (!this.terminal)
+      return;
+    this.terminal.options.fontSize = this.fontSize;
+    if (this.fitAddon) {
+      this.fitAddon.fit();
+    }
+  }
+  /**
+   * Handle connection mode change
+   */
+  handleModeChange(e5) {
+    const select = e5.target;
+    this.connectionMode = select.value;
+    if ((this.connectionMode === "docker" || this.connectionMode === "docker-attach") && 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();
       }
-
-      .header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 8px 12px;
-        background: var(--ls-bg-header);
-        border-bottom: 1px solid var(--ls-border);
+      this.setStatus(`Joined session (${session.clientCount} clients)`, "success");
+      if (this.terminal) {
+        this.terminal.focus();
       }
-
-      .header-title {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        font-weight: 600;
+      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
+   */
+  async handlePanelConnect() {
+    if (!this.connected) {
+      await this.connect();
+    }
+    if (this.connected) {
+      if (this.connectionMode === "join" && this.selectedSessionId) {
+        await this.join(this.selectedSessionId);
+      } else if (this.connectionMode === "docker-attach" && this.selectedContainer) {
+        const options = {
+          container: this.selectedContainer,
+          attachMode: true,
+          orphanTimeout: this.orphanTimeout
+        };
+        await this.spawn(options);
+      } else {
+        const options = {
+          orphanTimeout: this.orphanTimeout,
+          useTmux: this.useTmux
+        };
+        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);
       }
+    }
+  }
+  /**
+   * Toggle settings menu
+   */
+  toggleSettingsMenu() {
+    this.settingsMenuOpen = !this.settingsMenuOpen;
+  }
+  /**
+   * Handle reconnect dialog - Yes button
+   */
+  async handleReconnectYes() {
+    if (!this.reconnectSessionId || !this.client)
+      return;
+    this.showReconnectDialog = false;
+    try {
+      await this.initTerminalUI();
+      await this.join(this.reconnectSessionId, true);
+      this.setStatus("Rejoined previous session", "success");
+    } catch (err) {
+      this.setStatus(`Failed to rejoin: ${err instanceof Error ? err.message : "Unknown error"}`, "error");
+    }
+    this.reconnectSessionId = null;
+    this.client?.clearPreviousSessionId();
+  }
+  /**
+   * Handle reconnect dialog - No button
+   */
+  handleReconnectNo() {
+    this.showReconnectDialog = false;
+    this.reconnectSessionId = null;
+    this.client?.clearPreviousSessionId();
+  }
+  /**
+   * Render reconnect dialog
+   */
+  renderReconnectDialog() {
+    if (!this.showReconnectDialog)
+      return A;
+    return b2`
+      <div class="reconnect-dialog-overlay">
+        <div class="reconnect-dialog">
+          <h3>Session Available</h3>
+          <p>Your previous session is still active. Would you like to rejoin?</p>
+          <div class="reconnect-dialog-buttons">
+            <button class="btn-primary" @click=${this.handleReconnectYes}>
+              Yes, Rejoin
+            </button>
+            <button class="btn-secondary" @click=${this.handleReconnectNo}>
+              No, Start New
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  /**
+   * Render connection panel
+   */
+  renderConnectionPanel() {
+    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.availableSessions.length > 0 ? b2`<span style="font-size: 11px; color: var(--ls-status-connected);">${this.availableSessions.length} session(s) available</span>` : A}
+          ${this.serverInfo?.dockerEnabled ? b2`<span style="font-size: 11px; color: var(--ls-text-muted);">Docker enabled</span>` : A}
+        </div>
+        <div class="connection-form">
+          <div class="form-group">
+            <label>Mode</label>
+            <select
+              .value=${this.connectionMode}
+              @change=${this.handleModeChange}
+              ?disabled=${this.sessionActive}
+            >
+              <option value="local">New Local Shell</option>
+              ${this.serverInfo?.dockerEnabled ? b2`
+                    <option value="docker">Docker Exec (new shell)</option>
+                    <option value="docker-attach">Docker Attach (main process)</option>
+                  ` : A}
+              ${acceptingSessions.length > 0 ? b2`<option value="join">Join Existing Session</option>` : A}
+            </select>
+          </div>
 
-      .header-actions {
-        display: flex;
-        gap: 8px;
-      }
+          ${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" || this.connectionMode === "docker-attach" ? b2`
+            <div class="form-group">
+              <label>Container</label>
+              <select
+                .value=${this.selectedContainer}
+                @change=${(e5) => this.selectedContainer = e5.target.value}
+                ?disabled=${this.sessionActive}
+              >
+                ${runningContainers.length === 0 ? b2`<option value="">No containers running</option>` : runningContainers.map((c4) => b2`
+                      <option value=${c4.name}>${c4.name} (${c4.image})</option>
+                    `)}
+              </select>
+            </div>
+          ` : A}
 
-      .status {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        font-size: 12px;
-        color: var(--ls-text-muted);
-      }
+          ${this.connectionMode !== "join" && this.connectionMode !== "docker-attach" ? 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}
 
-      .status-dot {
-        width: 8px;
+          ${this.connectionMode === "local" || this.connectionMode === "docker" ? b2`
+            <div class="form-group">
+              <label>Session Timeout</label>
+              <select
+                .value=${String(this.orphanTimeout)}
+                @change=${(e5) => this.orphanTimeout = parseInt(e5.target.value)}
+                ?disabled=${this.sessionActive}
+              >
+                <option value="60000">1 minute</option>
+                <option value="300000">5 minutes</option>
+                <option value="900000">15 minutes</option>
+                <option value="3600000">1 hour</option>
+                <option value="21600000">6 hours</option>
+                <option value="86400000">24 hours</option>
+                <option value="604800000">1 week</option>
+              </select>
+            </div>
+          ` : A}
+
+          ${this.connectionMode === "docker" ? b2`
+            <div class="form-group">
+              <label style="display: flex; align-items: center; gap: 6px;">
+                <input
+                  type="checkbox"
+                  .checked=${this.useTmux}
+                  @change=${(e5) => this.useTmux = e5.target.checked}
+                  ?disabled=${this.sessionActive}
+                />
+                Use tmux (persist forever)
+              </label>
+            </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.connectionMode === "join" && !this.selectedSessionId || (this.connectionMode === "docker" || this.connectionMode === "docker-attach") && !this.selectedContainer}>
+                  ${this.loading ? "Starting..." : this.connectionMode === "join" ? "Join Session" : this.connectionMode === "docker-attach" ? "Attach" : "Start Session"}
+                </button>` : b2`<button class="btn-danger" @click=${this.kill}>
+                  ${this.clientCount > 1 ? "Leave Session" : "Stop Session"}
+                </button>`}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  /**
+   * Render settings dropdown
+   */
+  renderSettingsDropdown() {
+    if (!this.showSettings)
+      return A;
+    return b2`
+      <div class="settings-dropdown">
+        <button @click=${this.toggleSettingsMenu} title="Settings">
+          ⚙️
+        </button>
+        ${this.settingsMenuOpen ? b2`
+          <div class="settings-menu">
+            <div class="settings-menu-item">
+              <span>Theme</span>
+              <select
+                .value=${this.theme}
+                @change=${this.handleThemeChange}
+              >
+                <option value="dark">Dark</option>
+                <option value="light">Light</option>
+                <option value="auto">Auto</option>
+              </select>
+            </div>
+            <div class="settings-divider"></div>
+            <div class="settings-menu-item">
+              <span>Font Size</span>
+              <select
+                .value=${String(this.fontSize)}
+                @change=${(e5) => {
+      this.fontSize = parseInt(e5.target.value);
+      this.applyTerminalFontSize();
+    }}
+              >
+                <option value="12">12px</option>
+                <option value="14">14px</option>
+                <option value="16">16px</option>
+                <option value="18">18px</option>
+              </select>
+            </div>
+            <div class="settings-divider"></div>
+            <div class="settings-menu-item" @click=${this.clear}>
+              <span>Clear Terminal</span>
+            </div>
+          </div>
+        ` : A}
+      </div>
+    `;
+  }
+  /**
+   * Send a special key sequence to the terminal
+   */
+  sendKey(key) {
+    if (!this.client || !this.sessionActive)
+      return;
+    let sequence = key;
+    if (this.ctrlPressed) {
+      if (key.length === 1 && key >= "a" && key <= "z") {
+        sequence = String.fromCharCode(key.charCodeAt(0) - 96);
+      } else if (key.length === 1 && key >= "A" && key <= "Z") {
+        sequence = String.fromCharCode(key.charCodeAt(0) - 64);
+      }
+      this.ctrlPressed = false;
+    }
+    if (this.altPressed) {
+      sequence = "\x1B" + sequence;
+      this.altPressed = false;
+    }
+    this.client.write(sequence);
+    this.terminal?.focus();
+  }
+  /**
+   * Send ANSI escape sequence
+   */
+  sendEscape(code) {
+    if (!this.client || !this.sessionActive)
+      return;
+    this.client.write("\x1B" + code);
+    this.terminal?.focus();
+  }
+  /**
+   * Send control character directly
+   */
+  sendCtrl(char) {
+    if (!this.client || !this.sessionActive)
+      return;
+    const code = char.toUpperCase().charCodeAt(0) - 64;
+    this.client.write(String.fromCharCode(code));
+    this.terminal?.focus();
+  }
+  /**
+   * Toggle Ctrl modifier
+   */
+  toggleCtrl() {
+    this.ctrlPressed = !this.ctrlPressed;
+    this.altPressed = false;
+  }
+  /**
+   * Toggle Alt modifier
+   */
+  toggleAlt() {
+    this.altPressed = !this.altPressed;
+    this.ctrlPressed = false;
+  }
+  /**
+   * Toggle extra key rows visibility
+   */
+  toggleExtraRows() {
+    this.showExtraKeyRows = !this.showExtraKeyRows;
+  }
+  /**
+   * Toggle touch keyboard visibility
+   */
+  toggleTouchKeyboard() {
+    this.showTouchKeyboard = !this.showTouchKeyboard;
+  }
+  /**
+   * Render touch keyboard for mobile
+   */
+  renderTouchKeyboard() {
+    if (!this.isMobile)
+      return A;
+    return b2`
+      <!-- Toggle bar to show/hide keyboard -->
+      <div class="touch-keyboard-toggle">
+        <button @click=${this.toggleTouchKeyboard} title="${this.showTouchKeyboard ? "Hide" : "Show"} keyboard">
+          ${this.showTouchKeyboard ? "\u25BC" : "\u25B2"}
+        </button>
+      </div>
+
+      ${this.showTouchKeyboard ? b2`
+        <div class="touch-keyboard">
+          <!-- Row 1: ESC, navigation, special -->
+          <div class="touch-keyboard-row">
+            <button class="touch-key" @click=${() => this.sendEscape("")}>ESC</button>
+            <button class="touch-key" @click=${() => this.sendKey("/")}>/</button>
+            <button class="touch-key" @click=${() => this.sendKey("-")}>-</button>
+            <button class="touch-key" @click=${() => this.sendEscape("[H")}>HOME</button>
+            <button class="touch-key" @click=${() => this.sendEscape("[A")}>↑</button>
+            <button class="touch-key" @click=${() => this.sendEscape("[F")}>END</button>
+            <button class="touch-key" @click=${() => this.sendEscape("[5~")}>PGUP</button>
+          </div>
+
+          <!-- Row 2: TAB, modifiers, arrows -->
+          <div class="touch-keyboard-row">
+            <button class="touch-key" @click=${() => this.sendKey("	")}>TAB</button>
+            <button class="touch-key toggle-btn ${this.ctrlPressed ? "active" : ""}" @click=${this.toggleCtrl}>CTRL</button>
+            <button class="touch-key toggle-btn ${this.altPressed ? "active" : ""}" @click=${this.toggleAlt}>ALT</button>
+            <button class="touch-key" @click=${() => this.sendEscape("[D")}>←</button>
+            <button class="touch-key" @click=${() => this.sendEscape("[B")}>↓</button>
+            <button class="touch-key" @click=${() => this.sendEscape("[C")}>→</button>
+            <button class="touch-key" @click=${() => this.sendEscape("[6~")}>PGDN</button>
+          </div>
+
+          <!-- Expandable extra rows -->
+          <div class="touch-keyboard-extra ${this.showExtraKeyRows ? "expanded" : ""}">
+            <!-- Row 3: Common control sequences -->
+            <div class="touch-keyboard-row">
+              <button class="touch-key danger" @click=${() => this.sendCtrl("C")}>^C</button>
+              <button class="touch-key" @click=${() => this.sendCtrl("D")}>^D</button>
+              <button class="touch-key" @click=${() => this.sendCtrl("Z")}>^Z</button>
+              <button class="touch-key" @click=${() => this.sendCtrl("L")}>^L</button>
+              <button class="touch-key" @click=${() => this.sendCtrl("A")}>^A</button>
+              <button class="touch-key" @click=${() => this.sendCtrl("E")}>^E</button>
+              <button class="touch-key" @click=${() => this.sendCtrl("R")}>^R</button>
+            </div>
+          </div>
+
+          <!-- Toggle for extra rows -->
+          <div class="touch-keyboard-row">
+            <button
+              class="touch-key wide"
+              @click=${this.toggleExtraRows}
+              title="${this.showExtraKeyRows ? "Hide" : "Show"} extra keys"
+            >
+              ${this.showExtraKeyRows ? "\u25B2 Less" : "\u25BC More"}
+            </button>
+          </div>
+        </div>
+      ` : A}
+    `;
+  }
+  // ==================== End Touch Keyboard Methods ====================
+  /**
+   * Render status bar
+   */
+  renderStatusBar() {
+    if (!this.showStatusBar)
+      return A;
+    return b2`
+      <div class="status-bar">
+        <div class="status-bar-left">
+          <span class="status-dot ${this.connected ? "connected" : ""}"></span>
+          <span>${this.connected ? this.sessionActive ? "Session active" : "Connected" : "Disconnected"}</span>
+          ${this.sessionInfo ? b2`
+            <span style="color: var(--ls-text-muted)">|</span>
+            <span>${this.sessionInfo.container || this.sessionInfo.shell}</span>
+            <span style="color: var(--ls-text-muted)">${this.sessionInfo.cols}x${this.sessionInfo.rows}</span>
+          ` : A}
+        </div>
+        <div class="status-bar-right">
+          ${this.statusMessage ? b2`
+            <span class="${this.statusType === "error" ? "status-bar-error" : this.statusType === "success" ? "status-bar-success" : ""}">
+              ${this.statusType === "error" ? "\u26A0\uFE0F" : this.statusType === "success" ? "\u2713" : ""}
+              ${this.statusMessage}
+            </span>
+            <button
+              style="background: none; border: none; cursor: pointer; padding: 0; font-size: 10px;"
+              @click=${this.clearStatus}
+              title="Dismiss"
+            >✕</button>
+          ` : A}
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    return b2`
+      ${this.noHeader ? A : b2`
+            <div class="header">
+              <div class="header-title">
+                <span>Terminal</span>
+                ${this.sessionInfo ? b2`<span style="font-weight: normal; font-size: 12px; color: var(--ls-text-muted)">
+                      ${this.sessionInfo.container ? `${this.sessionInfo.container} (${this.sessionInfo.shell})` : this.sessionInfo.shell}
+                    </span>` : A}
+              </div>
+              <div class="header-actions">
+                ${!this.showConnectionPanel ? b2`
+                  ${!this.connected ? b2`<button @click=${this.connect} ?disabled=${this.loading}>
+                        ${this.loading ? "Connecting..." : "Connect"}
+                      </button>` : !this.sessionActive ? b2`<button @click=${() => this.spawn()} ?disabled=${this.loading}>
+                        ${this.loading ? "Spawning..." : "Start"}
+                      </button>` : b2`<button @click=${this.kill}>Stop</button>`}
+                ` : A}
+                <button @click=${this.clear} ?disabled=${!this.sessionActive}>Clear</button>
+                ${this.renderSettingsDropdown()}
+                ${!this.showStatusBar ? b2`
+                  <div class="status">
+                    <span class="status-dot ${this.connected ? "connected" : ""}"></span>
+                    <span>${this.connected ? "Connected" : "Disconnected"}</span>
+                  </div>
+                ` : A}
+              </div>
+            </div>
+          `}
+
+      ${this.renderConnectionPanel()}
+      ${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()}
+      ${this.renderTouchKeyboard()}
+      ${this.renderReconnectDialog()}
+    `;
+  }
+};
+/** lit-shell.js version */
+LitShellTerminal.VERSION = VERSION;
+LitShellTerminal.styles = [
+  sharedStyles,
+  themeStyles,
+  buttonStyles,
+  i`
+      :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 200px;
+        border: 1px solid var(--ls-border);
+        border-radius: 4px;
+        overflow: hidden;
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 12px;
+        background: var(--ls-bg-header);
+        border-bottom: 1px solid var(--ls-border);
+      }
+
+      .header-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-weight: 600;
+      }
+
+      .header-actions {
+        display: flex;
+        gap: 8px;
+      }
+
+      .status {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 12px;
+        color: var(--ls-text-muted);
+      }
+
+      .status-dot {
+        width: 8px;
         height: 8px;
         border-radius: 50%;
         background: var(--ls-status-disconnected);
@@ -1736,6 +2739,441 @@ LitShellTerminal.styles = [
       :host([no-header]) .header {
         display: none;
       }
+
+      /* Connection panel */
+      .connection-panel {
+        padding: 12px;
+        background: var(--ls-bg-header);
+        border-bottom: 1px solid var(--ls-border);
+      }
+
+      .connection-panel-title {
+        font-weight: 600;
+        margin-bottom: 12px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .connection-form {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+        gap: 10px;
+        align-items: end;
+      }
+
+      .form-group {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .form-group label {
+        font-size: 11px;
+        text-transform: uppercase;
+        color: var(--ls-text-muted);
+        letter-spacing: 0.5px;
+      }
+
+      .form-group select,
+      .form-group input {
+        padding: 6px 10px;
+        border: 1px solid var(--ls-border);
+        border-radius: 4px;
+        background: var(--ls-bg);
+        color: var(--ls-text);
+        font-size: 13px;
+      }
+
+      .form-group select:focus,
+      .form-group input:focus {
+        outline: none;
+        border-color: var(--ls-status-connected);
+      }
+
+      /* Settings dropdown */
+      .settings-dropdown {
+        position: relative;
+      }
+
+      .settings-menu {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        margin-top: 4px;
+        min-width: 180px;
+        background: var(--ls-bg-header);
+        border: 1px solid var(--ls-border);
+        border-radius: 4px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+        z-index: 100;
+        padding: 8px 0;
+      }
+
+      .settings-menu-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 12px;
+        font-size: 13px;
+        cursor: pointer;
+      }
+
+      .settings-menu-item:hover {
+        background: var(--ls-btn-hover);
+      }
+
+      .settings-menu-item select {
+        padding: 4px 8px;
+        border: 1px solid var(--ls-border);
+        border-radius: 3px;
+        background: var(--ls-bg);
+        color: var(--ls-text);
+        font-size: 12px;
+      }
+
+      .settings-divider {
+        height: 1px;
+        background: var(--ls-border);
+        margin: 4px 0;
+      }
+
+      /* Status bar */
+      .status-bar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 4px 12px;
+        background: var(--ls-bg-header);
+        border-top: 1px solid var(--ls-border);
+        font-size: 12px;
+        color: var(--ls-text-muted);
+      }
+
+      .status-bar-left {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .status-bar-right {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .status-bar-error {
+        color: #ef4444;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .status-bar-success {
+        color: var(--ls-status-connected);
+      }
+
+      /* Tab bar styles */
+      .tab-bar {
+        display: flex;
+        align-items: center;
+        background: var(--ls-bg-header);
+        border-bottom: 1px solid var(--ls-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(--ls-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(--ls-text-muted);
+        font-size: 12px;
+        cursor: pointer;
+        white-space: nowrap;
+        transition: all 0.15s ease;
+      }
+
+      .tab:hover {
+        background: var(--ls-btn-hover);
+        color: var(--ls-text);
+      }
+
+      .tab.active {
+        color: var(--ls-text);
+        border-bottom-color: var(--ls-status-connected);
+        background: var(--ls-bg);
+      }
+
+      .tab-status {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: var(--ls-status-disconnected);
+      }
+
+      .tab-status.connected {
+        background: var(--ls-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(--ls-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(--ls-btn-hover);
+        color: var(--ls-text);
+      }
+
+      .tab-add {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border-radius: 4px;
+        background: none;
+        border: none;
+        color: var(--ls-text-muted);
+        font-size: 18px;
+        cursor: pointer;
+        margin-left: 4px;
+      }
+
+      .tab-add:hover {
+        background: var(--ls-btn-hover);
+        color: var(--ls-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(--ls-terminal-bg);
+        display: none;
+      }
+
+      .tab-terminal-container.active {
+        display: block;
+      }
+
+      .tab-terminal-container .xterm {
+        height: 100%;
+      }
+
+      /* Reconnect dialog */
+      .reconnect-dialog-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.7);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 1000;
+      }
+
+      .reconnect-dialog {
+        background: var(--ls-bg-header);
+        border: 1px solid var(--ls-border);
+        border-radius: 8px;
+        padding: 24px;
+        max-width: 320px;
+        text-align: center;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+      }
+
+      .reconnect-dialog h3 {
+        margin: 0 0 12px 0;
+        font-size: 16px;
+        color: var(--ls-text);
+      }
+
+      .reconnect-dialog p {
+        margin: 0 0 20px 0;
+        font-size: 14px;
+        color: var(--ls-text-muted);
+      }
+
+      .reconnect-dialog-buttons {
+        display: flex;
+        gap: 12px;
+        justify-content: center;
+      }
+
+      .reconnect-dialog-buttons button {
+        padding: 8px 20px;
+        border-radius: 4px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: background 0.15s ease;
+      }
+
+      .reconnect-dialog-buttons .btn-primary {
+        background: var(--ls-status-connected);
+        color: white;
+        border: none;
+      }
+
+      .reconnect-dialog-buttons .btn-primary:hover {
+        background: #1da34d;
+      }
+
+      .reconnect-dialog-buttons .btn-secondary {
+        background: transparent;
+        color: var(--ls-text-muted);
+        border: 1px solid var(--ls-border);
+      }
+
+      .reconnect-dialog-buttons .btn-secondary:hover {
+        background: var(--ls-btn-hover);
+        color: var(--ls-text);
+      }
+
+      /* Touch keyboard for mobile */
+      .touch-keyboard {
+        display: flex;
+        flex-direction: column;
+        background: var(--ls-bg-header);
+        border-top: 1px solid var(--ls-border);
+        padding: 4px;
+        gap: 4px;
+      }
+
+      .touch-keyboard-row {
+        display: flex;
+        gap: 4px;
+        justify-content: center;
+      }
+
+      .touch-key {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 40px;
+        height: 36px;
+        padding: 0 8px;
+        background: var(--ls-bg);
+        border: 1px solid var(--ls-border);
+        border-radius: 4px;
+        color: var(--ls-text);
+        font-size: 12px;
+        font-family: inherit;
+        cursor: pointer;
+        touch-action: manipulation;
+        user-select: none;
+        -webkit-user-select: none;
+        transition: background 0.1s ease;
+      }
+
+      .touch-key:active {
+        background: var(--ls-btn-hover);
+      }
+
+      .touch-key.wide {
+        min-width: 50px;
+      }
+
+      .touch-key.danger {
+        color: #ef4444;
+        border-color: #ef4444;
+      }
+
+      .touch-key.toggle-btn {
+        background: var(--ls-bg-header);
+        min-width: 30px;
+        font-size: 14px;
+      }
+
+      .touch-key.toggle-btn.active {
+        background: var(--ls-status-connected);
+        color: white;
+        border-color: var(--ls-status-connected);
+      }
+
+      .touch-keyboard-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 2px;
+        background: var(--ls-bg-header);
+        border-top: 1px solid var(--ls-border);
+      }
+
+      .touch-keyboard-toggle button {
+        background: none;
+        border: none;
+        color: var(--ls-text-muted);
+        font-size: 18px;
+        padding: 4px 12px;
+        cursor: pointer;
+      }
+
+      .touch-keyboard-toggle button:active {
+        color: var(--ls-text);
+      }
+
+      /* Extra key rows (collapsible) */
+      .touch-keyboard-extra {
+        overflow: hidden;
+        max-height: 0;
+        opacity: 0;
+        transition: max-height 0.2s ease, opacity 0.2s ease;
+      }
+
+      .touch-keyboard-extra.expanded {
+        max-height: 100px;
+        opacity: 1;
+      }
+
+      /* Hide touch keyboard on desktop */
+      :host(:not([mobile])) .touch-keyboard,
+      :host(:not([mobile])) .touch-keyboard-toggle {
+        display: none;
+      }
     `
 ];
 __decorateClass([
@@ -1765,6 +3203,30 @@ __decorateClass([
 __decorateClass([
   n4({ type: Boolean, attribute: "auto-spawn" })
 ], LitShellTerminal.prototype, "autoSpawn", 2);
+__decorateClass([
+  n4({ type: String })
+], LitShellTerminal.prototype, "container", 2);
+__decorateClass([
+  n4({ type: String, attribute: "container-shell" })
+], LitShellTerminal.prototype, "containerShell", 2);
+__decorateClass([
+  n4({ type: String, attribute: "container-user" })
+], LitShellTerminal.prototype, "containerUser", 2);
+__decorateClass([
+  n4({ type: String, attribute: "container-cwd" })
+], LitShellTerminal.prototype, "containerCwd", 2);
+__decorateClass([
+  n4({ type: Boolean, attribute: "show-connection-panel" })
+], LitShellTerminal.prototype, "showConnectionPanel", 2);
+__decorateClass([
+  n4({ type: Boolean, attribute: "show-settings" })
+], LitShellTerminal.prototype, "showSettings", 2);
+__decorateClass([
+  n4({ type: Boolean, attribute: "show-status-bar" })
+], LitShellTerminal.prototype, "showStatusBar", 2);
+__decorateClass([
+  n4({ type: Boolean, attribute: "show-tabs" })
+], LitShellTerminal.prototype, "showTabs", 2);
 __decorateClass([
   n4({ type: Number, attribute: "font-size" })
 ], LitShellTerminal.prototype, "fontSize", 2);
@@ -1795,11 +3257,78 @@ __decorateClass([
 __decorateClass([
   r5()
 ], LitShellTerminal.prototype, "sessionInfo", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "containers", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "serverInfo", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "selectedContainer", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "selectedShell", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "connectionMode", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "orphanTimeout", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "useTmux", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "availableSessions", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "selectedSessionId", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "clientCount", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "settingsMenuOpen", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "showReconnectDialog", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "reconnectSessionId", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "isMobile", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "showTouchKeyboard", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "showExtraKeyRows", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "statusMessage", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "statusType", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "tabs", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "activeTabId", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "ctrlPressed", 2);
+__decorateClass([
+  r5()
+], LitShellTerminal.prototype, "altPressed", 2);
 LitShellTerminal = __decorateClass([
   t3("lit-shell-terminal")
 ], LitShellTerminal);
 export {
   LitShellTerminal,
+  VERSION,
   buttonStyles,
   sharedStyles,
   themeStyles