x-shell.js 0.1.1 → 1.0.0-rc.1

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

@@ -37,6 +37,15 @@ let XShellTerminal = class XShellTerminal 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;
         // Terminal appearance
         this.fontSize = 14;
         this.fontFamily = 'Menlo, Monaco, "Courier New", monospace';
@@ -49,6 +58,17 @@ let XShellTerminal = class XShellTerminal 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 = 'docker';
+        // Settings state
+        this.settingsMenuOpen = false;
+        // Status bar state
+        this.statusMessage = '';
+        this.statusType = 'info';
         // xterm.js module (loaded dynamically)
         this.xtermModule = null;
         this.fitAddonModule = null;
@@ -89,6 +109,31 @@ let XShellTerminal = class XShellTerminal extends LitElement {
                 throw new Error('Failed to load xterm.js. Make sure it is available.');
             }
         }
+        // Inject xterm CSS into shadow DOM (required because CSS doesn't cross shadow boundaries)
+        await this.injectXtermCSS();
+    }
+    /**
+     * Inject xterm.js CSS into shadow DOM
+     */
+    async injectXtermCSS() {
+        if (!this.shadowRoot)
+            return;
+        // Check if already injected
+        if (this.shadowRoot.querySelector('#xterm-styles'))
+            return;
+        try {
+            // Fetch xterm CSS from CDN
+            const response = await fetch('https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css');
+            const css = await response.text();
+            // Create style element and inject into shadow DOM
+            const style = document.createElement('style');
+            style.id = 'xterm-styles';
+            style.textContent = css;
+            this.shadowRoot.prepend(style);
+        }
+        catch (e) {
+            console.warn('[x-shell] Failed to load xterm CSS:', e);
+        }
     }
     /**
      * Connect to the terminal server
@@ -119,6 +164,7 @@ let XShellTerminal = class XShellTerminal 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 }));
             });
             this.client.onData((data) => {
@@ -137,8 +183,24 @@ let XShellTerminal = class XShellTerminal extends LitElement {
             });
             this.client.onSpawned((info) => {
                 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;
+                }
+            });
             await this.client.connect();
         }
         catch (err) {
@@ -178,6 +240,11 @@ let XShellTerminal = class XShellTerminal 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;
@@ -186,9 +253,11 @@ let XShellTerminal = class XShellTerminal extends LitElement {
             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;
@@ -251,21 +320,29 @@ let XShellTerminal = class XShellTerminal extends LitElement {
      * 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',
         };
     }
     /**
@@ -328,6 +405,263 @@ let XShellTerminal = class XShellTerminal extends LitElement {
         }
         this.fitAddon = null;
     }
+    /**
+     * 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.client && this.connected) {
+            this.client.requestContainerList();
+        }
+    }
+    /**
+     * Handle connect from connection panel
+     */
+    async handlePanelConnect() {
+        if (!this.connected) {
+            await this.connect();
+        }
+        if (this.connected) {
+            const options = {};
+            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;
+    }
+    /**
+     * Render connection panel
+     */
+    renderConnectionPanel() {
+        if (!this.showConnectionPanel)
+            return nothing;
+        const runningContainers = this.containers.filter(c => c.state === 'running');
+        return html `
+      <div class="connection-panel">
+        <div class="connection-panel-title">
+          <span>Connection</span>
+          ${this.serverInfo?.dockerEnabled
+            ? html `<span style="font-size: 11px; color: var(--xs-status-connected);">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">Local Shell</option>
+              ${this.serverInfo?.dockerEnabled
+            ? html `<option value="docker">Docker Container</option>`
+            : nothing}
+            </select>
+          </div>
+
+          ${this.connectionMode === 'docker' ? 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}
+
+          <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>
+
+          <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.loading ? 'Starting...' : 'Start Session'}
+                </button>`
+                : html `<button class="btn-danger" @click=${this.kill}>
+                  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>
+    `;
+    }
+    /**
+     * 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(--xs-text-muted)">|</span>
+            <span>${this.sessionInfo.container || this.sessionInfo.shell}</span>
+            <span style="color: var(--xs-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
@@ -338,29 +672,38 @@ let XShellTerminal = class XShellTerminal extends LitElement {
                 <span>Terminal</span>
                 ${this.sessionInfo
                 ? html `<span style="font-weight: normal; font-size: 12px; color: var(--xs-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>
           `}
 
+      ${this.renderConnectionPanel()}
+
       <div class="terminal-container">
         ${this.loading && !this.terminal
             ? html `<div class="loading"><span class="loading-spinner">⏳</span> Loading...</div>`
@@ -368,6 +711,8 @@ let XShellTerminal = class XShellTerminal extends LitElement {
                 ? html `<div class="error">❌ ${this.error}</div>`
                 : nothing}
       </div>
+
+      ${this.renderStatusBar()}
     `;
     }
 };
@@ -474,6 +819,139 @@ XShellTerminal.styles = [
       :host([no-header]) .header {
         display: none;
       }
+
+      /* Connection panel */
+      .connection-panel {
+        padding: 12px;
+        background: var(--xs-bg-header);
+        border-bottom: 1px solid var(--xs-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(--xs-text-muted);
+        letter-spacing: 0.5px;
+      }
+
+      .form-group select,
+      .form-group input {
+        padding: 6px 10px;
+        border: 1px solid var(--xs-border);
+        border-radius: 4px;
+        background: var(--xs-bg);
+        color: var(--xs-text);
+        font-size: 13px;
+      }
+
+      .form-group select:focus,
+      .form-group input:focus {
+        outline: none;
+        border-color: var(--xs-status-connected);
+      }
+
+      /* Settings dropdown */
+      .settings-dropdown {
+        position: relative;
+      }
+
+      .settings-menu {
+        position: absolute;
+        top: 100%;
+        right: 0;
+        margin-top: 4px;
+        min-width: 180px;
+        background: var(--xs-bg-header);
+        border: 1px solid var(--xs-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(--xs-btn-hover);
+      }
+
+      .settings-menu-item select {
+        padding: 4px 8px;
+        border: 1px solid var(--xs-border);
+        border-radius: 3px;
+        background: var(--xs-bg);
+        color: var(--xs-text);
+        font-size: 12px;
+      }
+
+      .settings-divider {
+        height: 1px;
+        background: var(--xs-border);
+        margin: 4px 0;
+      }
+
+      /* Status bar */
+      .status-bar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 4px 12px;
+        background: var(--xs-bg-header);
+        border-top: 1px solid var(--xs-border);
+        font-size: 12px;
+        color: var(--xs-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(--xs-status-connected);
+      }
     `,
 ];
 __decorate([
@@ -503,6 +981,27 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: 'auto-spawn' })
 ], XShellTerminal.prototype, "autoSpawn", void 0);
+__decorate([
+    property({ type: String })
+], XShellTerminal.prototype, "container", void 0);
+__decorate([
+    property({ type: String, attribute: 'container-shell' })
+], XShellTerminal.prototype, "containerShell", void 0);
+__decorate([
+    property({ type: String, attribute: 'container-user' })
+], XShellTerminal.prototype, "containerUser", void 0);
+__decorate([
+    property({ type: String, attribute: 'container-cwd' })
+], XShellTerminal.prototype, "containerCwd", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-connection-panel' })
+], XShellTerminal.prototype, "showConnectionPanel", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-settings' })
+], XShellTerminal.prototype, "showSettings", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-status-bar' })
+], XShellTerminal.prototype, "showStatusBar", void 0);
 __decorate([
     property({ type: Number, attribute: 'font-size' })
 ], XShellTerminal.prototype, "fontSize", void 0);
@@ -533,6 +1032,30 @@ __decorate([
 __decorate([
     state()
 ], XShellTerminal.prototype, "sessionInfo", void 0);
+__decorate([
+    state()
+], XShellTerminal.prototype, "containers", void 0);
+__decorate([
+    state()
+], XShellTerminal.prototype, "serverInfo", void 0);
+__decorate([
+    state()
+], XShellTerminal.prototype, "selectedContainer", void 0);
+__decorate([
+    state()
+], XShellTerminal.prototype, "selectedShell", void 0);
+__decorate([
+    state()
+], XShellTerminal.prototype, "connectionMode", void 0);
+__decorate([
+    state()
+], XShellTerminal.prototype, "settingsMenuOpen", void 0);
+__decorate([
+    state()
+], XShellTerminal.prototype, "statusMessage", void 0);
+__decorate([
+    state()
+], XShellTerminal.prototype, "statusType", void 0);
 XShellTerminal = __decorate([
     customElement('x-shell-terminal')
 ], XShellTerminal);