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

package/dist/ui/browser-bundle.js

@@ -748,6 +748,28 @@ var buttonStyles = i`
     opacity: 0.5;
     cursor: not-allowed;
   }
+
+  button.btn-primary,
+  .btn-primary {
+    background: var(--xs-status-connected);
+    color: #ffffff;
+  }
+
+  button.btn-primary:hover,
+  .btn-primary:hover {
+    background: #16a34a;
+  }
+
+  button.btn-danger,
+  .btn-danger {
+    background: var(--xs-status-disconnected);
+    color: #ffffff;
+  }
+
+  button.btn-danger:hover,
+  .btn-danger:hover {
+    background: #dc2626;
+  }
 `;
 
 // src/client/terminal-client.ts
@@ -757,6 +779,7 @@ var TerminalClient = class {
     this.state = "disconnected";
     this.sessionId = null;
     this.sessionInfo = null;
+    this.serverInfo = null;
     this.reconnectAttempts = 0;
     this.reconnectTimeout = null;
     // Event handlers
@@ -766,6 +789,8 @@ var TerminalClient = class {
     this.exitHandlers = [];
     this.errorHandlers = [];
     this.spawnedHandlers = [];
+    this.serverInfoHandlers = [];
+    this.containerListHandlers = [];
     // Promise resolvers for spawn
     this.spawnResolve = null;
     this.spawnReject = null;
@@ -875,7 +900,8 @@ var TerminalClient = class {
           cwd: message.cwd,
           cols: message.cols,
           rows: message.rows,
-          createdAt: /* @__PURE__ */ new Date()
+          createdAt: /* @__PURE__ */ new Date(),
+          container: message.container
         };
         this.spawnedHandlers.forEach((handler) => handler(this.sessionInfo));
         if (this.spawnResolve) {
@@ -902,6 +928,13 @@ var TerminalClient = class {
           this.spawnReject = null;
         }
         break;
+      case "serverInfo":
+        this.serverInfo = message.info;
+        this.serverInfoHandlers.forEach((handler) => handler(message.info));
+        break;
+      case "containerList":
+        this.containerListHandlers.forEach((handler) => handler(message.containers));
+        break;
     }
   }
   /**
@@ -1026,6 +1059,31 @@ var TerminalClient = class {
   onSpawned(handler) {
     this.spawnedHandlers.push(handler);
   }
+  /**
+   * Called when server info is received
+   */
+  onServerInfo(handler) {
+    this.serverInfoHandlers.push(handler);
+    if (this.serverInfo) {
+      handler(this.serverInfo);
+    }
+  }
+  /**
+   * Called when container list is received
+   */
+  onContainerList(handler) {
+    this.containerListHandlers.push(handler);
+  }
+  /**
+   * Request list of available containers
+   */
+  requestContainerList() {
+    if (!this.ws || this.state !== "connected") {
+      console.error("[x-shell] Cannot request containers: not connected");
+      return;
+    }
+    this.ws.send(JSON.stringify({ type: "listContainers" }));
+  }
   // ==========================================
   // Getters
   // ==========================================
@@ -1059,6 +1117,12 @@ var TerminalClient = class {
   hasActiveSession() {
     return this.sessionId !== null;
   }
+  /**
+   * Get server info
+   */
+  getServerInfo() {
+    return this.serverInfo;
+  }
 };
 
 // src/ui/x-shell-terminal.ts
@@ -1074,6 +1138,13 @@ var XShellTerminal = 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.fontSize = 14;
     this.fontFamily = 'Menlo, Monaco, "Courier New", monospace';
     this.client = null;
@@ -1084,6 +1155,14 @@ var XShellTerminal = 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 = "docker";
+    this.settingsMenuOpen = false;
+    this.statusMessage = "";
+    this.statusType = "info";
     // xterm.js module (loaded dynamically)
     this.xtermModule = null;
     this.fitAddonModule = null;
@@ -1116,6 +1195,26 @@ var XShellTerminal = class extends i4 {
         throw new Error("Failed to load xterm.js. Make sure it is available.");
       }
     }
+    await this.injectXtermCSS();
+  }
+  /**
+   * Inject xterm.js CSS into shadow DOM
+   */
+  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");
+      const css = await response.text();
+      const style = document.createElement("style");
+      style.id = "xterm-styles";
+      style.textContent = css;
+      this.shadowRoot.prepend(style);
+    } catch (e5) {
+      console.warn("[x-shell] Failed to load xterm CSS:", e5);
+    }
   }
   /**
    * Connect to the terminal server
@@ -1144,6 +1243,7 @@ var XShellTerminal = 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 })
         );
@@ -1166,10 +1266,25 @@ var XShellTerminal = class extends i4 {
       });
       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 })
         );
       });
+      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) {
       this.error = err instanceof Error ? err.message : "Connection failed";
@@ -1204,7 +1319,12 @@ var XShellTerminal = 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;
@@ -1212,8 +1332,10 @@ var XShellTerminal = class extends i4 {
       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;
     }
@@ -1267,19 +1389,27 @@ var XShellTerminal = class extends i4 {
    * 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"
     };
   }
   /**
@@ -1342,6 +1472,245 @@ var XShellTerminal = class extends i4 {
     }
     this.fitAddon = null;
   }
+  /**
+   * 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.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 || void 0;
+      }
+      await this.spawn(options);
+    }
+  }
+  /**
+   * Toggle settings menu
+   */
+  toggleSettingsMenu() {
+    this.settingsMenuOpen = !this.settingsMenuOpen;
+  }
+  /**
+   * Render connection panel
+   */
+  renderConnectionPanel() {
+    if (!this.showConnectionPanel)
+      return A;
+    const runningContainers = this.containers.filter((c4) => c4.state === "running");
+    return b2`
+      <div class="connection-panel">
+        <div class="connection-panel-title">
+          <span>Connection</span>
+          ${this.serverInfo?.dockerEnabled ? b2`<span style="font-size: 11px; color: var(--xs-status-connected);">Docker enabled</span>` : A}
+        </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 ? b2`<option value="docker">Docker Container</option>` : A}
+            </select>
+          </div>
+
+          ${this.connectionMode === "docker" ? 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}
+
+          <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>
+
+          <div class="form-group">
+            ${!this.connected ? b2`<button class="btn-primary" @click=${this.handlePanelConnect} ?disabled=${this.loading}>
+                  ${this.loading ? "Connecting..." : "Connect"}
+                </button>` : !this.sessionActive ? b2`<button class="btn-primary" @click=${this.handlePanelConnect} ?disabled=${this.loading}>
+                  ${this.loading ? "Starting..." : "Start Session"}
+                </button>` : b2`<button class="btn-danger" @click=${this.kill}>
+                  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>
+    `;
+  }
+  /**
+   * 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(--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>
+          ` : 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`
@@ -1349,27 +1718,36 @@ var XShellTerminal = class extends i4 {
               <div class="header-title">
                 <span>Terminal</span>
                 ${this.sessionInfo ? b2`<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>` : 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>`}
+                ${!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>
-                <div class="status">
-                  <span class="status-dot ${this.connected ? "connected" : ""}"></span>
-                  <span>${this.connected ? "Connected" : "Disconnected"}</span>
-                </div>
+                ${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()}
+
       <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()}
     `;
   }
 };
@@ -1476,6 +1854,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);
+      }
     `
 ];
 __decorateClass([
@@ -1505,6 +2016,27 @@ __decorateClass([
 __decorateClass([
   n4({ type: Boolean, attribute: "auto-spawn" })
 ], XShellTerminal.prototype, "autoSpawn", 2);
+__decorateClass([
+  n4({ type: String })
+], XShellTerminal.prototype, "container", 2);
+__decorateClass([
+  n4({ type: String, attribute: "container-shell" })
+], XShellTerminal.prototype, "containerShell", 2);
+__decorateClass([
+  n4({ type: String, attribute: "container-user" })
+], XShellTerminal.prototype, "containerUser", 2);
+__decorateClass([
+  n4({ type: String, attribute: "container-cwd" })
+], XShellTerminal.prototype, "containerCwd", 2);
+__decorateClass([
+  n4({ type: Boolean, attribute: "show-connection-panel" })
+], XShellTerminal.prototype, "showConnectionPanel", 2);
+__decorateClass([
+  n4({ type: Boolean, attribute: "show-settings" })
+], XShellTerminal.prototype, "showSettings", 2);
+__decorateClass([
+  n4({ type: Boolean, attribute: "show-status-bar" })
+], XShellTerminal.prototype, "showStatusBar", 2);
 __decorateClass([
   n4({ type: Number, attribute: "font-size" })
 ], XShellTerminal.prototype, "fontSize", 2);
@@ -1535,6 +2067,30 @@ __decorateClass([
 __decorateClass([
   r5()
 ], XShellTerminal.prototype, "sessionInfo", 2);
+__decorateClass([
+  r5()
+], XShellTerminal.prototype, "containers", 2);
+__decorateClass([
+  r5()
+], XShellTerminal.prototype, "serverInfo", 2);
+__decorateClass([
+  r5()
+], XShellTerminal.prototype, "selectedContainer", 2);
+__decorateClass([
+  r5()
+], XShellTerminal.prototype, "selectedShell", 2);
+__decorateClass([
+  r5()
+], XShellTerminal.prototype, "connectionMode", 2);
+__decorateClass([
+  r5()
+], XShellTerminal.prototype, "settingsMenuOpen", 2);
+__decorateClass([
+  r5()
+], XShellTerminal.prototype, "statusMessage", 2);
+__decorateClass([
+  r5()
+], XShellTerminal.prototype, "statusType", 2);
 XShellTerminal = __decorateClass([
   t3("x-shell-terminal")
 ], XShellTerminal);