@profoundlogic/coderflow-server 0.4.7 → 0.4.9

package/dist/web-ui/public/environments.html

@@ -263,6 +263,13 @@
           Instructions
         </button>
         <!-- Files tab removed - content moved to Build tab -->
+        <button class="content-tab" data-tab="connections" role="tab">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px; vertical-align: text-bottom;">
+            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+          </svg>
+          Connections
+        </button>
         <button class="content-tab" data-tab="env-vars" role="tab">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px; vertical-align: text-bottom;">
             <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
@@ -468,6 +475,7 @@
               </label>
             </div>
             <div class="card-body" id="server-config" hidden>
+              <div id="server-connection-banner" class="connection-banner" hidden></div>
               <div class="form-single-column" style="max-width: none;">
                 <div class="form-row">
                   <label for="server-name">Server Name</label>
@@ -717,6 +725,27 @@
 
         </div>
 
+        <!-- Connections Tab -->
+        <div id="tab-connections" class="tab-panel" role="tabpanel" hidden>
+          <div class="content-card">
+            <div class="card-header">
+              <h3>External Connections</h3>
+              <div class="card-header-actions">
+                <button class="btn-secondary btn-small" id="add-connection-btn">+ Add Connection</button>
+              </div>
+            </div>
+            <div class="card-body">
+              <div id="connections-list" class="connections-list">
+                <!-- Connections will be rendered here -->
+              </div>
+              <div id="connections-empty" class="connections-empty">
+                <p>No external connections configured.</p>
+                <p class="text-muted">Add connections to external servers (SQL Server, IBM i, SSH) to auto-configure containers with database access, SSH keys, and build tooling.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <!-- Tests Tab -->
         <div id="tab-tests" class="tab-panel" role="tabpanel" hidden>
           <div class="content-card tests-card">
@@ -2030,6 +2059,293 @@
       </div>
     </div>
 
+    <!-- Connection Add/Edit Modal -->
+    <div id="connection-modal" class="modal" hidden>
+      <div class="modal-content modal-large">
+        <div class="modal-header">
+          <h2 id="connection-modal-title">Add Connection</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <div id="connection-modal-error" class="modal-error" hidden></div>
+          <div class="form-single-column">
+            <!-- Name -->
+            <div class="form-row">
+              <label for="connection-name">Connection Name <span class="required">*</span></label>
+              <div class="input-with-toggle">
+                <input type="text" id="connection-name" class="form-input code-font" placeholder="e.g., dev-sqlserver" required>
+                <div class="btn-icon" style="visibility: hidden;"></div>
+              </div>
+            </div>
+            <!-- Description -->
+            <div class="form-row">
+              <label for="connection-description">Description</label>
+              <div class="input-with-toggle">
+                <input type="text" id="connection-description" class="form-input" placeholder="e.g., Development SQL Server">
+                <div class="btn-icon" style="visibility: hidden;"></div>
+              </div>
+            </div>
+            <!-- Available For -->
+            <div class="form-row">
+              <label>Available For <span class="required">*</span></label>
+              <div class="checkbox-group">
+                <label class="checkbox-label"><input type="checkbox" id="connection-available-tasks" value="tasks" checked> Tasks</label>
+                <label class="checkbox-label"><input type="checkbox" id="connection-available-deploy" value="deploy"> Deploy</label>
+              </div>
+            </div>
+            <!-- Type (radio, disabled on edit) -->
+            <div class="form-row" id="connection-type-row">
+              <label>Type <span class="required">*</span></label>
+              <div class="radio-group">
+                <label class="radio-label"><input type="radio" name="connection-type" value="sqlserver" id="connection-type-sqlserver" checked><span>SQL Server</span></label>
+                <label class="radio-label"><input type="radio" name="connection-type" value="ibmi" id="connection-type-ibmi"><span>IBM i</span></label>
+                <label class="radio-label"><input type="radio" name="connection-type" value="ssh" id="connection-type-ssh"><span>SSH</span></label>
+              </div>
+            </div>
+            <!-- Host -->
+            <div class="form-row">
+              <label for="connection-host">Host <span class="required">*</span></label>
+              <div class="input-with-toggle">
+                <input type="text" id="connection-host" class="form-input code-font" placeholder="myserver.mycompany.com">
+                <div class="btn-icon" style="visibility: hidden;"></div>
+              </div>
+              <span class="form-hint">Enter the fully qualified host name, e.g. myserver.mycompany.com</span>
+            </div>
+            <!-- Verify DB server certificate -->
+            <div class="form-row" id="connection-verify-cert-row">
+              <label class="checkbox-label">
+                <input type="checkbox" id="connection-verify-cert" checked>
+                Verify DB server certificate
+              </label>
+              <span class="form-hint" id="connection-verify-cert-warning" hidden style="color: var(--color-warning, #e6a700);">Disabling certificate verification exposes the connection to man-in-the-middle attacks. Only uncheck this if you understand the security implications.</span>
+            </div>
+            <!-- Database (SQL Server only) -->
+            <div class="form-row" id="connection-database-row">
+              <label for="connection-database">Database <span class="required">*</span></label>
+              <div class="input-with-toggle">
+                <input type="text" id="connection-database" class="form-input code-font">
+                <div class="btn-icon" style="visibility: hidden;"></div>
+              </div>
+            </div>
+            <!-- User -->
+            <div class="form-row">
+              <label for="connection-user">User <span class="required">*</span></label>
+              <div class="input-with-toggle">
+                <input type="text" id="connection-user" class="form-input code-font">
+                <div class="btn-icon" style="visibility: hidden;"></div>
+              </div>
+            </div>
+            <!-- Password (SQL Server always; IBM i only when sql/interactive features checked) -->
+            <div class="form-row" id="connection-password-row">
+              <label for="connection-password">
+                Password <span class="required">*</span>
+              </label>
+              <div class="input-with-toggle">
+                <input type="password" id="connection-password" class="form-input code-font">
+                <button type="button" class="btn-icon toggle-visibility" id="connection-password-toggle" title="Toggle visibility">
+                  <svg class="eye-open" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                    <circle cx="12" cy="12" r="3"></circle>
+                  </svg>
+                  <svg class="eye-closed" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
+                    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+                    <line x1="1" y1="1" x2="23" y2="23"></line>
+                  </svg>
+                </button>
+              </div>
+            </div>
+            <!-- IBM i Profile Helper (shown for IBM i, after user/password) -->
+            <div id="connection-ibmi-helper-row" hidden>
+              <a href="#" id="connection-ibmi-helper-link" class="help-link">How to set up IBM i user profile</a>
+            </div>
+            <!-- IBM i Features (hidden for SQL Server and SSH) -->
+            <div class="form-row" id="connection-features-row" hidden>
+              <label>IBM i Features <span class="required">*</span></label>
+              <div class="checkbox-group">
+                <label class="checkbox-label"><input type="checkbox" id="feature-sql" value="sql" checked> SQL</label>
+                <label class="checkbox-label"><input type="checkbox" id="feature-build" value="build"> Build objects</label>
+                <label class="checkbox-label"><input type="checkbox" id="feature-ssh" value="ssh"> SSH</label>
+                <label class="checkbox-label" hidden><input type="checkbox" id="feature-sync" value="sync"> Sync</label>
+                <label class="checkbox-label"><input type="checkbox" id="feature-interactive" value="interactive"> Agent interactive sessions</label>
+              </div>
+            </div>
+            <!-- Build Repo (shown when IBM i + Build) -->
+            <div class="form-row" id="connection-build-repo-row" hidden>
+              <label for="connection-build-repo">Build Repo <span class="required">*</span></label>
+              <select id="connection-build-repo" class="form-input"></select>
+              <span class="form-hint">Repository where codermake runs</span>
+            </div>
+            <!-- Build Directory (shown when IBM i + Build) -->
+            <div class="form-row" id="connection-build-path-row" hidden>
+              <label for="connection-build-path">Build Directory</label>
+              <input type="text" id="connection-build-path" class="form-input code-font" placeholder="Optional subdirectory path within repo">
+              <span class="form-hint">Subdirectory within the repo (leave blank for repo root)</span>
+            </div>
+            <!-- Build Library Prefix (shown when IBM i + Build + Tasks scope) -->
+            <div class="form-row" id="connection-build-library-prefix-row" hidden>
+              <label for="connection-build-library-prefix">Build Library Name Prefix <span class="required">*</span></label>
+              <input type="text" id="connection-build-library-prefix" class="form-input code-font" maxlength="5" value="AITSK" style="width: 120px;">
+              <span class="form-hint">Used as task build library name prefix</span>
+            </div>
+            <!-- SSH settings (when IBM i + SSH/Build feature, or SSH type) -->
+            <div id="connection-ssh-settings" hidden>
+              <div class="form-row">
+                <label>SSH Private Key <span class="required">*</span></label>
+                <div class="secret-value-group">
+                  <textarea id="connection-ssh-private-key" class="form-textarea code-font" rows="4" placeholder="Paste, import from file, or generate a keypair..."></textarea>
+                  <button type="button" class="btn-icon connection-ssh-key-toggle" title="Toggle visibility">
+                    <svg class="eye-open" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                      <circle cx="12" cy="12" r="3"></circle>
+                    </svg>
+                    <svg class="eye-closed" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
+                      <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+                      <line x1="1" y1="1" x2="23" y2="23"></line>
+                    </svg>
+                  </button>
+                </div>
+                <div class="textarea-actions">
+                  <button type="button" class="btn-secondary btn-small" id="connection-ssh-import-btn">Import from file...</button>
+                  <input type="file" id="connection-ssh-file-input" hidden>
+                  <button type="button" class="btn-secondary btn-small" id="connection-generate-keypair-btn">Generate Keypair</button>
+                </div>
+              </div>
+              <div class="form-row">
+                <label>SSH Public Key</label>
+                <div class="secret-value-group">
+                  <textarea id="connection-ssh-public-key" class="form-textarea code-font" rows="4" placeholder="Paste, import from file, or generate a keypair..."></textarea>
+                  <div class="btn-icon" style="visibility: hidden;"></div>
+                </div>
+                <div class="textarea-actions">
+                  <button type="button" class="btn-secondary btn-small" id="connection-ssh-pubkey-import-btn">Import from file...</button>
+                  <input type="file" id="connection-ssh-pubkey-file-input" hidden>
+                  <div id="connection-install-key-row" hidden>
+                    <button type="button" class="btn-secondary btn-small" id="connection-install-key-btn">Install Public Key on Remote</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- PUI settings (when Interactive) -->
+            <div id="connection-pui-settings" hidden>
+              <div class="form-row">
+                <label for="connection-pui-base-url">PUI Base URL <span class="required">*</span></label>
+                <div class="input-with-toggle">
+                  <input type="text" id="connection-pui-base-url" class="form-input code-font" placeholder="https://myibmi.mycompany.com:8080">
+                  <div class="btn-icon" style="visibility: hidden;"></div>
+                </div>
+                <span class="form-hint">Enter the fully qualified URL, e.g. https://myibmi.mycompany.com:8080</span>
+              </div>
+              <div class="form-row">
+                <label for="connection-pui-render-path">PUI Render Path</label>
+                <div class="input-with-toggle">
+                  <input type="text" id="connection-pui-render-path" class="form-input code-font" placeholder="/profoundui/genie">
+                  <div class="btn-icon" style="visibility: hidden;"></div>
+                </div>
+              </div>
+              <div class="form-row">
+                <label for="connection-pui-launch-path">PUI Launch Path</label>
+                <div class="input-with-toggle">
+                  <input type="text" id="connection-pui-launch-path" class="form-input code-font" placeholder="/profoundui/auth/genie">
+                  <div class="btn-icon" style="visibility: hidden;"></div>
+                </div>
+              </div>
+            </div>
+            <!-- Test buttons (edit mode only) -->
+            <div class="form-row" id="connection-test-row" hidden>
+              <div class="connection-test-actions">
+                <button type="button" class="btn-secondary btn-small" id="connection-test-sql-btn" hidden style="white-space: nowrap">Test SQL</button>
+                <button type="button" class="btn-secondary btn-small" id="connection-test-ssh-btn" hidden style="white-space: nowrap">Test SSH</button>
+                <span id="connection-test-spinner" class="status-text" hidden>Testing...</span>
+              </div>
+              <div id="connection-test-result" class="connection-test-result" hidden></div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="connection-modal-cancel-btn">Cancel</button>
+          <button type="button" class="btn-primary" id="connection-modal-save-btn">Save Connection</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Delete Connection Modal -->
+    <div id="delete-connection-modal" class="modal" hidden>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2>Delete Connection</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <p>Are you sure you want to delete this connection?</p>
+          <p><strong id="delete-connection-name"></strong></p>
+          <p class="text-muted">Containers will no longer have access to this external server.</p>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="delete-connection-cancel-btn">Cancel</button>
+          <button type="button" class="btn-danger" id="delete-connection-confirm-btn">Delete</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Install Public Key Modal -->
+    <div id="install-key-modal" class="modal" hidden>
+      <div class="modal-content" style="max-width: 480px;">
+        <div class="modal-header">
+          <h2>Install Public Key on Remote</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <p class="text-muted" style="margin-top: 0;">Enter the password for the remote host. It will only be used to install the public key and will not be saved.</p>
+          <div class="form-row">
+            <label for="install-key-password">Password <span class="required">*</span></label>
+            <div class="input-with-toggle">
+              <input type="password" id="install-key-password" class="form-input code-font">
+              <button type="button" class="btn-icon toggle-visibility" id="install-key-password-toggle" title="Toggle visibility">
+                <svg class="eye-open" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                  <circle cx="12" cy="12" r="3"></circle>
+                </svg>
+                <svg class="eye-closed" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
+                  <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+                  <line x1="1" y1="1" x2="23" y2="23"></line>
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div id="install-key-result" class="connection-test-result" hidden></div>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="install-key-cancel-btn">Cancel</button>
+          <button type="button" class="btn-primary" id="install-key-confirm-btn">Install Key</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- IBM i Profile Setup Helper Dialog -->
+    <div id="ibmi-helper-modal" class="modal" hidden>
+      <div class="modal-content">
+        <div class="modal-header">
+          <h2>IBM i User Profile Setup</h2>
+          <button type="button" class="modal-close" aria-label="Close">&times;</button>
+        </div>
+        <div class="modal-body">
+          <p>Run the following CL commands on the IBM i system as a sys admin:</p>
+          <div id="ibmi-helper-commands" class="code-block"></div>
+          <div class="helper-notes">
+            <p><strong>Notes:</strong></p>
+            <ul>
+              <li>Configure the user's JOBD or initial program to set the appropriate library list</li>
+              <li>For interactive sessions, make sure that PUISETENV is called as or from the user's initial program</li>
+              <li>SSH public key installation is handled separately via the connection UI</li>
+            </ul>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button type="button" class="btn-secondary" id="ibmi-helper-close-btn">Close</button>
+        </div>
+      </div>
+    </div>
+
     <!-- Profile Secret Configuration Modal -->
     <div id="profile-secret-modal" class="modal" hidden>
       <div class="modal-overlay"></div>