lit-shell.js 1.1.0 → 1.2.1

package/dist/ui/lit-shell-terminal.js

@@ -2,7 +2,7 @@
  * lit-shell-terminal web component
  *
  * A ready-to-use terminal component that wraps xterm.js and
- * connects to a lit-shell server via WebSocket.
+ * connects to an lit-shell server via WebSocket.
  *
  * Usage:
  * ```html
@@ -24,6 +24,7 @@ import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { sharedStyles, buttonStyles, themeStyles } from './styles.js';
 import { TerminalClient } from '../client/terminal-client.js';
+import { VERSION } from '../version.js';
 let LitShellTerminal = class LitShellTerminal extends LitElement {
     constructor() {
         super(...arguments);
@@ -37,9 +38,19 @@ let LitShellTerminal = class LitShellTerminal extends LitElement {
         this.noHeader = false;
         this.autoConnect = false;
         this.autoSpawn = false;
+        // Docker container properties
+        this.container = '';
+        this.containerShell = '';
+        this.containerUser = '';
+        this.containerCwd = '';
+        // UI panel options
+        this.showConnectionPanel = false;
+        this.showSettings = false;
+        this.showStatusBar = false;
+        this.showTabs = false;
         // Terminal appearance
         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';
         // State
         this.client = null;
         this.terminal = null;
@@ -49,17 +60,89 @@ let LitShellTerminal = class LitShellTerminal extends LitElement {
         this.loading = false;
         this.error = null;
         this.sessionInfo = null;
+        // Connection panel state
+        this.containers = [];
+        this.serverInfo = null;
+        this.selectedContainer = '';
+        this.selectedShell = '/bin/sh';
+        this.connectionMode = 'local';
+        // Persistence options
+        this.orphanTimeout = 3600000; // 1 hour default
+        this.useTmux = false;
+        // Session multiplexing state
+        this.availableSessions = [];
+        this.selectedSessionId = '';
+        this.clientCount = 1;
+        // Settings state
+        this.settingsMenuOpen = false;
+        // Reconnect dialog state
+        this.showReconnectDialog = false;
+        this.reconnectSessionId = null;
+        // Mobile support state
+        this.isMobile = false;
+        this.showTouchKeyboard = true;
+        this.showExtraKeyRows = false;
+        // Status bar state
+        this.statusMessage = '';
+        this.statusType = 'info';
+        // Tab state
+        this.tabs = [];
+        this.activeTabId = '';
+        this.tabCounter = 0;
         // xterm.js module (loaded dynamically)
         this.xtermModule = null;
         this.fitAddonModule = null;
         this.resizeObserver = null;
+        // ==================== Touch Keyboard Methods ====================
+        // Modifier key state for touch keyboard
+        this.ctrlPressed = false;
+        this.altPressed = false;
     }
     connectedCallback() {
         super.connectedCallback();
+        // Set version as data attribute for easy inspection
+        this.setAttribute('data-version', VERSION);
+        // Detect mobile devices
+        this.detectMobile();
+        // Create initial tab if tabs are enabled
+        if (this.showTabs && this.tabs.length === 0) {
+            this.createTab();
+        }
         if (this.autoConnect && this.url) {
             this.connect();
         }
     }
+    /**
+     * Detect if running on a mobile device
+     */
+    detectMobile() {
+        // Check for touch capability
+        const hasTouch = navigator.maxTouchPoints > 0;
+        // Check for mobile-sized viewport
+        const isMobileWidth = window.matchMedia('(max-width: 768px)').matches;
+        // Check for mobile user agent (backup detection)
+        const mobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+        this.isMobile = hasTouch && (isMobileWidth || mobileUA);
+        this.updateMobileAttribute();
+        // Listen for viewport changes
+        window.matchMedia('(max-width: 768px)').addEventListener('change', (e) => {
+            if (navigator.maxTouchPoints > 0) {
+                this.isMobile = e.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();
@@ -89,35 +172,30 @@ let LitShellTerminal = class LitShellTerminal extends LitElement {
                 throw new Error('Failed to load xterm.js. Make sure it is available.');
             }
         }
-        // Load xterm.css into shadow DOM (CSS doesn't penetrate shadow boundaries)
-        await this.loadXtermStyles();
+        // Inject xterm CSS into shadow DOM (required because CSS doesn't cross shadow boundaries)
+        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;
-        // Check if styles are already loaded
+        // Check if already injected
         if (this.shadowRoot.querySelector('#xterm-styles'))
             return;
         try {
-            // Fetch xterm.css from CDN
+            // Fetch xterm CSS from CDN
             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();
             // Create style element and inject into shadow DOM
             const style = document.createElement('style');
             style.id = 'xterm-styles';
-            style.textContent = cssText;
-            this.shadowRoot.appendChild(style);
+            style.textContent = css;
+            this.shadowRoot.prepend(style);
         }
-        catch (error) {
-            console.warn('[lit-shell] Failed to load xterm.css:', error);
-            // Terminal will still work but may have visual issues
+        catch (e) {
+            console.warn('[lit-shell] Failed to load xterm CSS:', e);
         }
     }
     /**
@@ -149,27 +227,144 @@ let LitShellTerminal = class LitShellTerminal extends LitElement {
             });
             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 }));
             });
+            // Capture reference to this client for use in closures
+            const client = this.client;
             this.client.onData((data) => {
-                if (this.terminal) {
+                // Find the terminal that belongs to this client (for multi-tab support)
+                if (this.showTabs) {
+                    const tab = this.tabs.find((t) => t.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`);
+                // Find the tab that belongs to this client
+                if (this.showTabs) {
+                    const tab = this.tabs.find((t) => t.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`);
+                        }
+                        // Update component state if this is the active tab
+                        if (tab.id === this.activeTabId) {
+                            this.sessionActive = false;
+                            this.sessionInfo = null;
+                        }
+                        this.tabs = [...this.tabs]; // Trigger re-render
+                    }
+                }
+                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) => {
+                // Update tab-specific state
+                if (this.showTabs) {
+                    const tab = this.tabs.find((t) => t.client === client);
+                    if (tab) {
+                        tab.sessionInfo = info;
+                        tab.sessionActive = true;
+                        // Update label to show shell/container
+                        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 }));
             });
+            // Server info and container list handlers
+            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;
+                }
+            });
+            // Multiplexing event handlers
+            this.client.onSessionList((sessions) => {
+                this.availableSessions = sessions;
+                if (sessions.length > 0 && !this.selectedSessionId) {
+                    this.selectedSessionId = sessions[0].sessionId;
+                }
+            });
+            this.client.onClientJoined((sessionId, count) => {
+                // Update tab-specific state
+                if (this.showTabs) {
+                    const tab = this.tabs.find((t) => t.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) => {
+                // Update tab-specific state
+                if (this.showTabs) {
+                    const tab = this.tabs.find((t) => t.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) => {
+                // Update tab-specific state
+                if (this.showTabs) {
+                    const tab = this.tabs.find((t) => t.client === client && t.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');
+                }
+                // Refresh session list
+                client.requestSessionList();
+            });
+            // Reconnect dialog handler
+            this.client.onReconnectWithSession((sessionId) => {
+                this.reconnectSessionId = sessionId;
+                this.showReconnectDialog = true;
+            });
             await this.client.connect();
+            // Request session list after connecting
+            this.client.requestSessionList();
+            // Sync state to active tab
+            if (this.showTabs) {
+                this.syncStateToActiveTab();
+            }
         }
         catch (err) {
             this.error = err instanceof Error ? err.message : 'Connection failed';
@@ -208,17 +403,30 @@ let LitShellTerminal = class LitShellTerminal extends LitElement {
                 cols: this.terminal?.cols || this.cols,
                 rows: this.terminal?.rows || this.rows,
                 env: options?.env,
+                // Docker container options
+                container: options?.container || this.container || undefined,
+                containerShell: options?.containerShell || this.containerShell || undefined,
+                containerUser: options?.containerUser || this.containerUser || undefined,
+                containerCwd: options?.containerCwd || this.containerCwd || undefined,
             };
             const info = await this.client.spawn(spawnOptions);
             this.sessionActive = true;
             this.sessionInfo = info;
+            // Sync state to active tab
+            if (this.showTabs) {
+                this.syncStateToActiveTab();
+            }
+            // Refresh session list so other tabs can see this session
+            this.client.requestSessionList();
             // Focus terminal
             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;
@@ -232,7 +440,14 @@ let LitShellTerminal = class LitShellTerminal extends LitElement {
             return;
         await this.loadXterm();
         await this.updateComplete;
-        const container = this.shadowRoot?.querySelector('.terminal-container');
+        // Get the correct container (either single terminal or tab-specific)
+        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;
         // Get theme colors
@@ -269,33 +484,54 @@ let LitShellTerminal = class LitShellTerminal extends LitElement {
                 this.client.resize(cols, rows);
             }
         });
-        // Setup resize observer
-        this.resizeObserver = new ResizeObserver(() => {
-            if (this.fitAddon) {
-                this.fitAddon.fit();
-            }
-        });
+        // Setup resize observer for this container
+        if (!this.resizeObserver) {
+            this.resizeObserver = new ResizeObserver(() => {
+                // Fit all visible terminals
+                if (this.showTabs) {
+                    const activeTab = this.getActiveTab();
+                    if (activeTab?.fitAddon) {
+                        activeTab.fitAddon.fit();
+                    }
+                }
+                else if (this.fitAddon) {
+                    this.fitAddon.fit();
+                }
+            });
+        }
         this.resizeObserver.observe(container);
+        // Sync to active tab if in tab mode
+        if (this.showTabs) {
+            this.syncStateToActiveTab();
+        }
     }
     /**
      * Get terminal theme based on component theme
      */
     getTerminalTheme() {
-        // These will be overridden by CSS variables in the actual implementation
-        // For now, provide sensible defaults based on theme attribute
-        if (this.theme === 'light') {
+        // Determine effective theme (handle 'auto' by checking system preference)
+        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',
+                cursorAccent: '#ffffff',
                 selection: '#b4d5fe',
+                selectionForeground: '#1f2937',
             };
         }
+        // Dark theme
         return {
             background: '#1e1e1e',
             foreground: '#cccccc',
             cursor: '#ffffff',
+            cursorAccent: '#1e1e1e',
             selection: '#264f78',
+            selectionForeground: '#ffffff',
         };
     }
     /**
@@ -358,6 +594,755 @@ let LitShellTerminal = class LitShellTerminal extends LitElement {
         }
         this.fitAddon = null;
     }
+    // ==================== Tab Management Methods ====================
+    /**
+     * Get the active tab
+     */
+    getActiveTab() {
+        return this.tabs.find((t) => t.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];
+        // Switch to the new tab
+        this.switchTab(tab.id);
+        return tab;
+    }
+    /**
+     * Switch to a tab
+     */
+    switchTab(tabId) {
+        const tab = this.tabs.find((t) => t.id === tabId);
+        if (!tab)
+            return;
+        this.activeTabId = tabId;
+        // Sync state from tab to component (for backward compatibility with single-terminal code)
+        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;
+        // Focus the terminal and fit it
+        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((t) => t.id === tabId);
+        if (tabIndex === -1)
+            return;
+        const tab = this.tabs[tabIndex];
+        // Cleanup tab resources
+        if (tab.terminal) {
+            tab.terminal.dispose();
+        }
+        if (tab.client) {
+            tab.client.disconnect();
+        }
+        // Remove tab
+        this.tabs = this.tabs.filter((t) => t.id !== tabId);
+        // If we closed the active tab, switch to another
+        if (this.activeTabId === tabId && this.tabs.length > 0) {
+            // Switch to previous tab, or first if we were first
+            const newIndex = Math.max(0, tabIndex - 1);
+            this.switchTab(this.tabs[newIndex].id);
+        }
+        // If no tabs left, clear state
+        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;
+            // Trigger re-render
+            this.tabs = [...this.tabs];
+        }
+    }
+    /**
+     * Render the tab bar
+     */
+    renderTabBar() {
+        if (!this.showTabs)
+            return nothing;
+        return html `
+      <div class="tab-bar">
+        ${this.tabs.map((tab) => html `
+            <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
+            ? html `
+                    <button
+                      class="tab-close"
+                      @click=${(e) => {
+                e.stopPropagation();
+                this.closeTab(tab.id);
+            }}
+                      title="Close tab"
+                    >
+                      ×
+                    </button>
+                  `
+            : nothing}
+            </button>
+          `)}
+        <button class="tab-add" @click=${() => this.createTab()} title="New tab">
+          +
+        </button>
+      </div>
+    `;
+    }
+    // ==================== End Tab Management Methods ====================
+    /**
+     * Set status message
+     */
+    setStatus(message, type = 'info') {
+        this.statusMessage = message;
+        this.statusType = type;
+        // Auto-clear success/info messages after 5 seconds
+        if (type !== 'error') {
+            setTimeout(() => {
+                if (this.statusMessage === message) {
+                    this.statusMessage = '';
+                }
+            }, 5000);
+        }
+    }
+    /**
+     * Clear status message
+     */
+    clearStatus() {
+        this.statusMessage = '';
+        this.statusType = 'info';
+    }
+    /**
+     * Handle theme change
+     */
+    handleThemeChange(e) {
+        const select = e.target;
+        this.theme = select.value;
+        // Apply theme to xterm.js terminal
+        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;
+        // Re-fit the terminal after font size change
+        if (this.fitAddon) {
+            this.fitAddon.fit();
+        }
+    }
+    /**
+     * Handle connection mode change
+     */
+    handleModeChange(e) {
+        const select = e.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 {
+            // Initialize terminal UI if needed
+            await this.initTerminalUI();
+            const session = await this.client.join({
+                sessionId,
+                requestHistory,
+                historyLimit: 50000,
+            });
+            this.sessionActive = true;
+            this.sessionInfo = {
+                sessionId: session.sessionId,
+                shell: session.shell,
+                cwd: session.cwd,
+                cols: session.cols,
+                rows: session.rows,
+                createdAt: session.createdAt || new Date(),
+                container: session.container,
+            };
+            this.clientCount = session.clientCount;
+            // Sync state to active tab
+            if (this.showTabs) {
+                this.syncStateToActiveTab();
+            }
+            this.setStatus(`Joined session (${session.clientCount} clients)`, 'success');
+            // Focus terminal
+            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
+     */
+    async handlePanelConnect() {
+        if (!this.connected) {
+            await this.connect();
+        }
+        if (this.connected) {
+            if (this.connectionMode === 'join' && this.selectedSessionId) {
+                // Join existing session
+                await this.join(this.selectedSessionId);
+            }
+            else if (this.connectionMode === 'docker-attach' && this.selectedContainer) {
+                // Docker attach mode - connect to container's main process
+                const options = {
+                    container: this.selectedContainer,
+                    attachMode: true,
+                    orphanTimeout: this.orphanTimeout,
+                };
+                await this.spawn(options);
+            }
+            else {
+                // Spawn new session (local or docker exec)
+                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 || undefined;
+                }
+                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 {
+            // Initialize terminal UI if needed
+            await this.initTerminalUI();
+            // Join the previous session with history
+            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 nothing;
+        return html `
+      <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 nothing;
+        const runningContainers = this.containers.filter(c => c.state === 'running');
+        const acceptingSessions = this.availableSessions.filter(s => s.accepting);
+        return html `
+      <div class="connection-panel">
+        <div class="connection-panel-title">
+          <span>Connection</span>
+          ${this.availableSessions.length > 0
+            ? html `<span style="font-size: 11px; color: var(--ls-status-connected);">${this.availableSessions.length} session(s) available</span>`
+            : nothing}
+          ${this.serverInfo?.dockerEnabled
+            ? html `<span style="font-size: 11px; color: var(--ls-text-muted);">Docker enabled</span>`
+            : nothing}
+        </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
+            ? html `
+                    <option value="docker">Docker Exec (new shell)</option>
+                    <option value="docker-attach">Docker Attach (main process)</option>
+                  `
+            : nothing}
+              ${acceptingSessions.length > 0
+            ? html `<option value="join">Join Existing Session</option>`
+            : nothing}
+            </select>
+          </div>
+
+          ${this.connectionMode === 'join' ? html `
+            <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=${(e) => this.selectedSessionId = e.target.value}
+                ?disabled=${this.sessionActive}
+              >
+                ${acceptingSessions.length === 0
+            ? html `<option value="">No sessions available</option>`
+            : acceptingSessions.map(s => html `
+                      <option value=${s.sessionId}>
+                        ${s.label || s.sessionId.substring(0, 12)}
+                        (${s.type === 'local' ? s.shell : s.container || s.type})
+                        - ${s.clientCount} client(s)
+                      </option>
+                    `)}
+              </select>
+            </div>
+          ` : this.connectionMode === 'docker' || this.connectionMode === 'docker-attach' ? html `
+            <div class="form-group">
+              <label>Container</label>
+              <select
+                .value=${this.selectedContainer}
+                @change=${(e) => this.selectedContainer = e.target.value}
+                ?disabled=${this.sessionActive}
+              >
+                ${runningContainers.length === 0
+            ? html `<option value="">No containers running</option>`
+            : runningContainers.map(c => html `
+                      <option value=${c.name}>${c.name} (${c.image})</option>
+                    `)}
+              </select>
+            </div>
+          ` : nothing}
+
+          ${this.connectionMode !== 'join' && this.connectionMode !== 'docker-attach' ? html `
+            <div class="form-group">
+              <label>Shell</label>
+              <select
+                .value=${this.selectedShell}
+                @change=${(e) => this.selectedShell = e.target.value}
+                ?disabled=${this.sessionActive}
+              >
+                ${this.serverInfo?.allowedShells.length
+            ? this.serverInfo.allowedShells.map(s => html `<option value=${s}>${s}</option>`)
+            : html `
+                      <option value="/bin/bash">/bin/bash</option>
+                      <option value="/bin/sh">/bin/sh</option>
+                      <option value="/bin/zsh">/bin/zsh</option>
+                    `}
+              </select>
+            </div>
+          ` : nothing}
+
+          ${this.connectionMode === 'local' || this.connectionMode === 'docker' ? html `
+            <div class="form-group">
+              <label>Session Timeout</label>
+              <select
+                .value=${String(this.orphanTimeout)}
+                @change=${(e) => this.orphanTimeout = parseInt(e.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>
+          ` : nothing}
+
+          ${this.connectionMode === 'docker' ? html `
+            <div class="form-group">
+              <label style="display: flex; align-items: center; gap: 6px;">
+                <input
+                  type="checkbox"
+                  .checked=${this.useTmux}
+                  @change=${(e) => this.useTmux = e.target.checked}
+                  ?disabled=${this.sessionActive}
+                />
+                Use tmux (persist forever)
+              </label>
+            </div>
+          ` : nothing}
+
+          <div class="form-group">
+            ${!this.connected
+            ? html `<button class="btn-primary" @click=${this.handlePanelConnect} ?disabled=${this.loading}>
+                  ${this.loading ? 'Connecting...' : 'Connect'}
+                </button>`
+            : !this.sessionActive
+                ? html `<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>`
+                : html `<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 nothing;
+        return html `
+      <div class="settings-dropdown">
+        <button @click=${this.toggleSettingsMenu} title="Settings">
+          ⚙️
+        </button>
+        ${this.settingsMenuOpen ? html `
+          <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=${(e) => {
+            this.fontSize = parseInt(e.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>
+        ` : nothing}
+      </div>
+    `;
+    }
+    /**
+     * Send a special key sequence to the terminal
+     */
+    sendKey(key) {
+        if (!this.client || !this.sessionActive)
+            return;
+        // Apply modifiers if pressed
+        let sequence = key;
+        if (this.ctrlPressed) {
+            // Convert to control character (Ctrl+A = \x01, Ctrl+C = \x03, etc.)
+            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) {
+            // Alt/Meta sends ESC prefix
+            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; // Reset alt when ctrl toggled
+    }
+    /**
+     * Toggle Alt modifier
+     */
+    toggleAlt() {
+        this.altPressed = !this.altPressed;
+        this.ctrlPressed = false; // Reset ctrl when alt toggled
+    }
+    /**
+     * 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 nothing;
+        return html `
+      <!-- Toggle bar to show/hide keyboard -->
+      <div class="touch-keyboard-toggle">
+        <button @click=${this.toggleTouchKeyboard} title="${this.showTouchKeyboard ? 'Hide' : 'Show'} keyboard">
+          ${this.showTouchKeyboard ? '▼' : '▲'}
+        </button>
+      </div>
+
+      ${this.showTouchKeyboard ? html `
+        <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('\t')}>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 ? '▲ Less' : '▼ More'}
+            </button>
+          </div>
+        </div>
+      ` : nothing}
+    `;
+    }
+    // ==================== End Touch Keyboard Methods ====================
+    /**
+     * Render status bar
+     */
+    renderStatusBar() {
+        if (!this.showStatusBar)
+            return nothing;
+        return html `
+      <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 ? html `
+            <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>
+          ` : nothing}
+        </div>
+        <div class="status-bar-right">
+          ${this.statusMessage ? html `
+            <span class="${this.statusType === 'error' ? 'status-bar-error' : this.statusType === 'success' ? 'status-bar-success' : ''}">
+              ${this.statusType === 'error' ? '⚠️' : this.statusType === 'success' ? '✓' : ''}
+              ${this.statusMessage}
+            </span>
+            <button
+              style="background: none; border: none; cursor: pointer; padding: 0; font-size: 10px;"
+              @click=${this.clearStatus}
+              title="Dismiss"
+            >✕</button>
+          ` : nothing}
+        </div>
+      </div>
+    `;
+    }
     render() {
         return html `
       ${this.noHeader
@@ -368,39 +1353,74 @@ let LitShellTerminal = class LitShellTerminal extends LitElement {
                 <span>Terminal</span>
                 ${this.sessionInfo
                 ? html `<span style="font-weight: normal; font-size: 12px; color: var(--ls-text-muted)">
-                      ${this.sessionInfo.shell}
+                      ${this.sessionInfo.container
+                    ? `${this.sessionInfo.container} (${this.sessionInfo.shell})`
+                    : this.sessionInfo.shell}
                     </span>`
                 : nothing}
               </div>
               <div class="header-actions">
-                ${!this.connected
+                ${!this.showConnectionPanel ? html `
+                  ${!this.connected
                 ? html `<button @click=${this.connect} ?disabled=${this.loading}>
-                      ${this.loading ? 'Connecting...' : 'Connect'}
-                    </button>`
+                        ${this.loading ? 'Connecting...' : 'Connect'}
+                      </button>`
                 : !this.sessionActive
                     ? html `<button @click=${() => this.spawn()} ?disabled=${this.loading}>
-                      ${this.loading ? 'Spawning...' : 'Start'}
-                    </button>`
+                        ${this.loading ? 'Spawning...' : 'Start'}
+                      </button>`
                     : html `<button @click=${this.kill}>Stop</button>`}
+                ` : nothing}
                 <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>
+                ${this.renderSettingsDropdown()}
+                ${!this.showStatusBar ? html `
+                  <div class="status">
+                    <span class="status-dot ${this.connected ? 'connected' : ''}"></span>
+                    <span>${this.connected ? 'Connected' : 'Disconnected'}</span>
+                  </div>
+                ` : nothing}
               </div>
             </div>
           `}
 
-      <div class="terminal-container">
-        ${this.loading && !this.terminal
-            ? html `<div class="loading"><span class="loading-spinner">⏳</span> Loading...</div>`
-            : this.error && !this.terminal
-                ? html `<div class="error">❌ ${this.error}</div>`
-                : nothing}
-      </div>
+      ${this.renderConnectionPanel()}
+      ${this.renderTabBar()}
+
+      ${this.showTabs && this.tabs.length > 0
+            ? html `
+            <div class="terminals-wrapper">
+              ${this.tabs.map((tab) => html `
+                  <div
+                    class="tab-terminal-container ${tab.id === this.activeTabId ? 'active' : ''}"
+                    data-tab-id=${tab.id}
+                  >
+                    ${this.loading && tab.id === this.activeTabId && !tab.terminal
+                ? html `<div class="loading"><span class="loading-spinner">⏳</span> Loading...</div>`
+                : this.error && tab.id === this.activeTabId && !tab.terminal
+                    ? html `<div class="error">❌ ${this.error}</div>`
+                    : nothing}
+                  </div>
+                `)}
+            </div>
+          `
+            : html `
+            <div class="terminal-container">
+              ${this.loading && !this.terminal
+                ? html `<div class="loading"><span class="loading-spinner">⏳</span> Loading...</div>`
+                : this.error && !this.terminal
+                    ? html `<div class="error">❌ ${this.error}</div>`
+                    : nothing}
+            </div>
+          `}
+
+      ${this.renderStatusBar()}
+      ${this.renderTouchKeyboard()}
+      ${this.renderReconnectDialog()}
     `;
     }
 };
+/** lit-shell.js version */
+LitShellTerminal.VERSION = VERSION;
 LitShellTerminal.styles = [
     sharedStyles,
     themeStyles,
@@ -504,15 +1524,450 @@ LitShellTerminal.styles = [
       :host([no-header]) .header {
         display: none;
       }
-    `,
-];
-__decorate([
-    property({ type: String })
-], LitShellTerminal.prototype, "url", void 0);
-__decorate([
-    property({ type: String })
-], LitShellTerminal.prototype, "shell", void 0);
-__decorate([
+
+      /* 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;
+      }
+    `,
+];
+__decorate([
+    property({ type: String })
+], LitShellTerminal.prototype, "url", void 0);
+__decorate([
+    property({ type: String })
+], LitShellTerminal.prototype, "shell", void 0);
+__decorate([
     property({ type: String })
 ], LitShellTerminal.prototype, "cwd", void 0);
 __decorate([
@@ -533,6 +1988,30 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'auto-spawn' })
 ], LitShellTerminal.prototype, "autoSpawn", void 0);
+__decorate([
+    property({ type: String })
+], LitShellTerminal.prototype, "container", void 0);
+__decorate([
+    property({ type: String, attribute: 'container-shell' })
+], LitShellTerminal.prototype, "containerShell", void 0);
+__decorate([
+    property({ type: String, attribute: 'container-user' })
+], LitShellTerminal.prototype, "containerUser", void 0);
+__decorate([
+    property({ type: String, attribute: 'container-cwd' })
+], LitShellTerminal.prototype, "containerCwd", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-connection-panel' })
+], LitShellTerminal.prototype, "showConnectionPanel", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-settings' })
+], LitShellTerminal.prototype, "showSettings", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-status-bar' })
+], LitShellTerminal.prototype, "showStatusBar", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-tabs' })
+], LitShellTerminal.prototype, "showTabs", void 0);
 __decorate([
     property({ type: Number, attribute: 'font-size' })
 ], LitShellTerminal.prototype, "fontSize", void 0);
@@ -563,6 +2042,72 @@ __decorate([
 __decorate([
     state()
 ], LitShellTerminal.prototype, "sessionInfo", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "containers", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "serverInfo", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "selectedContainer", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "selectedShell", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "connectionMode", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "orphanTimeout", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "useTmux", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "availableSessions", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "selectedSessionId", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "clientCount", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "settingsMenuOpen", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "showReconnectDialog", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "reconnectSessionId", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "isMobile", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "showTouchKeyboard", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "showExtraKeyRows", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "statusMessage", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "statusType", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "tabs", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "activeTabId", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "ctrlPressed", void 0);
+__decorate([
+    state()
+], LitShellTerminal.prototype, "altPressed", void 0);
 LitShellTerminal = __decorate([
     customElement('lit-shell-terminal')
 ], LitShellTerminal);