@profoundlogic/coderflow-server 0.2.6 → 0.2.8

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

@@ -138,19 +138,15 @@
             </svg>
             Agent Keepalive
           </button>
-          <button class="settings-nav-item" data-section="apikeys" role="tab">
+          <button class="settings-nav-item" data-section="ai-providers" 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">
-              <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path>
+              <path d="M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3z"></path>
+              <path d="M5 3v4"></path>
+              <path d="M3 5h4"></path>
+              <path d="M19 17v4"></path>
+              <path d="M17 19h4"></path>
             </svg>
-            API Keys
-          </button>
-          <button class="settings-nav-item" data-section="provider-auth" 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">
-              <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
-              <polyline points="10 17 15 12 10 7"></polyline>
-              <line x1="15" y1="12" x2="3" y2="12"></line>
-            </svg>
-            Provider Authentication
+            AI Providers
           </button>
           <button class="settings-nav-item" data-section="models" 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">
@@ -306,205 +302,26 @@
           </div>
         </div>
 
-        <!-- API Keys Settings -->
-        <div id="section-apikeys" class="settings-panel" role="tabpanel" hidden>
+        <!-- AI Providers Settings -->
+        <div id="section-ai-providers" class="settings-panel" role="tabpanel" hidden>
           <div class="content-card">
             <div class="card-header">
-              <h3>API Keys</h3>
+              <h3>AI Providers</h3>
             </div>
             <div class="card-body" style="padding-top: 8px;">
-              <div id="apikeys-inline-message" class="inline-message" hidden></div>
+              <div id="ai-providers-inline-message" class="inline-message" hidden></div>
               <p class="text-muted" style="margin-bottom: 16px;">
-                Configure provider API keys and optionally route Claude/Codex/Gemini through custom endpoints (for example Azure Foundry, Azure OpenAI, or gateway proxies).
+                Connect OAuth accounts and API key accounts in one place. The active account determines how credentials are injected into tasks.
               </p>
-              <div class="apikeys-list">
-                <!-- Claude (Anthropic) -->
-                <div class="apikey-row">
-                  <div class="apikey-header">
-                    <span class="apikey-name">Claude</span>
-                    <span class="apikey-provider">Anthropic</span>
-                  </div>
-                  <div class="apikey-controls">
-                    <div class="apikey-input-group">
-                      <input type="password" id="apikey-claude" class="form-input code-font" placeholder="sk-ant-...">
-                      <button type="button" class="btn-icon apikey-toggle-visibility" data-target="apikey-claude" 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>
-                    <button type="button" class="btn-secondary btn-small apikey-test-btn" data-agent="claude">Test</button>
-                    <label class="toggle-switch" title="Enable for AI tasks">
-                      <input type="checkbox" id="apikey-claude-enabled">
-                      <span class="toggle-slider"></span>
-                    </label>
-                  </div>
-                  <div class="apikey-endpoint-section" data-agent="claude">
-                    <div class="apikey-endpoint-header">
-                      <span class="apikey-endpoint-label">Custom Endpoint</span>
-                      <label class="toggle-switch" title="Use a custom Claude endpoint">
-                        <input type="checkbox" id="apikey-claude-endpoint-enabled">
-                        <span class="toggle-slider"></span>
-                      </label>
-                    </div>
-                    <div class="apikey-endpoint-fields" id="apikey-claude-endpoint-fields" hidden>
-                      <label class="apikey-endpoint-field-label" for="apikey-claude-base-url">Base URL</label>
-                      <input
-                        type="text"
-                        id="apikey-claude-base-url"
-                        class="form-input code-font"
-                        placeholder="https://your-resource.services.ai.azure.com/anthropic"
-                      >
-                      <span class="form-hint apikey-endpoint-field-hint">
-                        Claude requests will use this base URL when API key task mode is enabled.
-                      </span>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Codex (OpenAI) -->
-                <div class="apikey-row">
-                  <div class="apikey-header">
-                    <span class="apikey-name">Codex</span>
-                    <span class="apikey-provider">OpenAI</span>
-                  </div>
-                  <div class="apikey-controls">
-                    <div class="apikey-input-group">
-                      <input type="password" id="apikey-codex" class="form-input code-font" placeholder="sk-...">
-                      <button type="button" class="btn-icon apikey-toggle-visibility" data-target="apikey-codex" 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>
-                    <button type="button" class="btn-secondary btn-small apikey-test-btn" data-agent="codex">Test</button>
-                    <label class="toggle-switch" title="Enable for AI tasks">
-                      <input type="checkbox" id="apikey-codex-enabled">
-                      <span class="toggle-slider"></span>
-                    </label>
-                  </div>
-                  <div class="apikey-endpoint-section" data-agent="codex">
-                    <div class="apikey-endpoint-header">
-                      <span class="apikey-endpoint-label">Custom Endpoint</span>
-                      <label class="toggle-switch" title="Use a custom Codex endpoint">
-                        <input type="checkbox" id="apikey-codex-endpoint-enabled">
-                        <span class="toggle-slider"></span>
-                      </label>
-                    </div>
-                    <div class="apikey-endpoint-fields" id="apikey-codex-endpoint-fields" hidden>
-                      <label class="apikey-endpoint-field-label" for="apikey-codex-base-url">Base URL</label>
-                      <input
-                        type="text"
-                        id="apikey-codex-base-url"
-                        class="form-input code-font"
-                        placeholder="https://your-resource.cognitiveservices.azure.com/openai"
-                      >
-                      <label class="apikey-endpoint-field-label" for="apikey-codex-api-version">API Version (optional)</label>
-                      <input
-                        type="text"
-                        id="apikey-codex-api-version"
-                        class="form-input code-font"
-                        placeholder="2025-04-01-preview"
-                      >
-                      <span class="form-hint apikey-endpoint-field-hint">
-                        Use a root OpenAI base URL. CoderFlow injects <code>api-version</code> as a query parameter when provided.
-                      </span>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Gemini (Google) -->
-                <div class="apikey-row">
-                  <div class="apikey-header">
-                    <span class="apikey-name">Gemini</span>
-                    <span class="apikey-provider">Google</span>
-                  </div>
-                  <div class="apikey-controls">
-                    <div class="apikey-input-group">
-                      <input type="password" id="apikey-gemini" class="form-input code-font" placeholder="AIza...">
-                      <button type="button" class="btn-icon apikey-toggle-visibility" data-target="apikey-gemini" 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>
-                    <button type="button" class="btn-secondary btn-small apikey-test-btn" data-agent="gemini">Test</button>
-                    <label class="toggle-switch" title="Enable for AI tasks">
-                      <input type="checkbox" id="apikey-gemini-enabled">
-                      <span class="toggle-slider"></span>
-                    </label>
-                  </div>
-                  <div class="apikey-endpoint-section" data-agent="gemini">
-                    <div class="apikey-endpoint-header">
-                      <span class="apikey-endpoint-label">Custom Endpoint</span>
-                      <label class="toggle-switch" title="Use a custom Gemini endpoint">
-                        <input type="checkbox" id="apikey-gemini-endpoint-enabled">
-                        <span class="toggle-slider"></span>
-                      </label>
-                    </div>
-                    <div class="apikey-endpoint-fields" id="apikey-gemini-endpoint-fields" hidden>
-                      <label class="apikey-endpoint-field-label" for="apikey-gemini-base-url">Base URL</label>
-                      <input
-                        type="text"
-                        id="apikey-gemini-base-url"
-                        class="form-input code-font"
-                        placeholder="https://generativelanguage.googleapis.com/v1beta"
-                      >
-                      <label class="apikey-endpoint-field-label" for="apikey-gemini-api-version">API Version (optional)</label>
-                      <input
-                        type="text"
-                        id="apikey-gemini-api-version"
-                        class="form-input code-font"
-                        placeholder="v1beta"
-                      >
-                      <span class="form-hint apikey-endpoint-field-hint">
-                        You can provide a root Gemini-compatible base URL or a <code>/models</code> path.
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="card-actions">
-              <button type="button" class="btn-primary" id="save-apikeys-btn">Save</button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Provider Authentication Settings -->
-        <div id="section-provider-auth" class="settings-panel" role="tabpanel" hidden>
-          <div class="content-card">
-            <div class="card-header">
-              <h3>Provider Authentication</h3>
-            </div>
-            <div class="card-body" style="padding-top: 8px;">
-              <div id="provider-auth-inline-message" class="inline-message" hidden></div>
-              <p class="text-muted" style="margin-bottom: 16px;">Sign in to AI provider accounts. Multiple accounts can be connected per provider.</p>
 
               <div class="provider-auth-list">
-                <!-- Claude (Anthropic) -->
                 <div class="provider-auth-section" data-provider="claude">
                   <div class="provider-auth-header-row">
                     <div class="provider-auth-title">
                       <span class="provider-name">Claude</span>
                       <span class="provider-company">Anthropic</span>
                     </div>
-                    <button class="btn-primary btn-small" id="provider-claude-add-btn">
+                    <button class="btn-primary btn-small ai-provider-add-btn" id="provider-claude-add-btn">
                       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px; vertical-align: -1px;">
                         <line x1="12" y1="5" x2="12" y2="19"></line>
                         <line x1="5" y1="12" x2="19" y2="12"></line>
@@ -517,14 +334,13 @@
                   </div>
                 </div>
 
-                <!-- Codex (OpenAI) -->
                 <div class="provider-auth-section" data-provider="codex">
                   <div class="provider-auth-header-row">
                     <div class="provider-auth-title">
                       <span class="provider-name">Codex</span>
                       <span class="provider-company">OpenAI</span>
                     </div>
-                    <button class="btn-primary btn-small" id="provider-codex-add-btn">
+                    <button class="btn-primary btn-small ai-provider-add-btn" id="provider-codex-add-btn">
                       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px; vertical-align: -1px;">
                         <line x1="12" y1="5" x2="12" y2="19"></line>
                         <line x1="5" y1="12" x2="19" y2="12"></line>
@@ -537,14 +353,13 @@
                   </div>
                 </div>
 
-                <!-- Gemini (Google) -->
                 <div class="provider-auth-section" data-provider="gemini">
                   <div class="provider-auth-header-row">
                     <div class="provider-auth-title">
                       <span class="provider-name">Gemini</span>
                       <span class="provider-company">Google</span>
                     </div>
-                    <button class="btn-primary btn-small" id="provider-gemini-add-btn">
+                    <button class="btn-primary btn-small ai-provider-add-btn" id="provider-gemini-add-btn">
                       <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px; vertical-align: -1px;">
                         <line x1="12" y1="5" x2="12" y2="19"></line>
                         <line x1="5" y1="12" x2="19" y2="12"></line>
@@ -893,71 +708,162 @@
     </div>
   </main>
 
-  <!-- Provider Sign-In Flow Modal -->
-  <div id="provider-signin-modal" class="modal" hidden>
+  <!-- AI Provider Add Account Modal -->
+  <div id="ai-provider-add-modal" class="modal" hidden>
     <div class="modal-overlay"></div>
     <div class="modal-content">
       <div class="modal-header">
-        <h2 id="provider-signin-title">Sign in with Provider</h2>
+        <h2 id="ai-provider-add-title">Add Account</h2>
         <button type="button" class="modal-close" aria-label="Close">&times;</button>
       </div>
       <div class="modal-body">
-        <div class="signin-steps">
-          <div class="signin-step">
-            <span class="step-number">1</span>
-            <span class="step-text">Open the secure sign-in page</span>
-          </div>
-          <button class="btn-primary" id="provider-signin-open-btn" style="width: 100%; margin: 8px 0 16px 0;">
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 8px; vertical-align: -2px;">
-              <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
-              <polyline points="15 3 21 3 21 9"></polyline>
-              <line x1="10" y1="14" x2="21" y2="3"></line>
-            </svg>
-            Open Sign-In Page
-          </button>
-
-          <div class="signin-step">
-            <span class="step-number">2</span>
-            <span class="step-text" id="provider-signin-instructions">
-              Complete sign-in and copy the authorization code
-            </span>
-          </div>
+        <div class="ai-provider-add-tabs">
+          <button type="button" class="ai-provider-tab active" data-tab="oauth">OAuth Sign-In</button>
+          <button type="button" class="ai-provider-tab" data-tab="api-key">API Key</button>
+        </div>
 
-          <!-- Secure redirect notice for URL-copy flow (Codex/Gemini) -->
-          <div id="provider-signin-localhost-notice" class="secure-redirect-notice" hidden>
-            <div class="secure-redirect-header">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
-                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+        <div id="ai-provider-tab-oauth" class="ai-provider-tab-content active">
+          <div class="signin-steps">
+            <div class="signin-step">
+              <span class="step-number">1</span>
+              <span class="step-text">Open the secure sign-in page</span>
+            </div>
+            <button class="btn-primary" id="provider-signin-open-btn" style="width: 100%; margin: 8px 0 16px 0;">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 8px; vertical-align: -2px;">
+                <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+                <polyline points="15 3 21 3 21 9"></polyline>
+                <line x1="10" y1="14" x2="21" y2="3"></line>
               </svg>
-              <span>Secure Local Redirect</span>
+              Open Sign-In Page
+            </button>
+
+            <div class="signin-step">
+              <span class="step-number">2</span>
+              <span class="step-text" id="provider-signin-instructions">
+                Complete sign-in and copy the authorization code
+              </span>
+            </div>
+
+            <div id="provider-signin-localhost-notice" class="secure-redirect-notice" hidden>
+              <div class="secure-redirect-header">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+                  <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+                </svg>
+                <span>Secure Local Redirect</span>
+              </div>
+              <p>After signing in, your browser will redirect to a local address. The page won't load; this is expected. Copy the full URL from your browser address bar.</p>
+            </div>
+
+            <div class="form-row" style="margin-top: 12px; grid-template-columns: auto 1fr; gap: 8px;">
+              <label for="provider-signin-input" id="provider-signin-label">Authorization Code or URL</label>
+              <input type="text" id="provider-signin-input" class="form-input code-font" placeholder="Paste code or URL here">
+            </div>
+
+            <div class="signin-step" style="margin-top: 16px;">
+              <span class="step-number">3</span>
+              <span class="step-text">Name this account</span>
             </div>
-            <p>After signing in, your browser will redirect to a local address. The page won't load &mdash; this is expected. This secure method keeps your authorization tokens private.</p>
-            <div class="secure-redirect-instruction">
-              <strong>Copy the complete URL</strong> from your browser's address bar and paste it below.
+            <div class="form-row" style="margin-top: 8px; grid-template-columns: auto 1fr; gap: 8px;">
+              <label for="provider-signin-label-input">Account Label</label>
+              <input type="text" id="provider-signin-label-input" class="form-input" placeholder="e.g., Production, Team Account">
             </div>
           </div>
+        </div>
 
-          <div class="form-row" style="margin-top: 12px; grid-template-columns: auto 1fr; gap: 8px;">
-            <label for="provider-signin-input" id="provider-signin-label">Authorization Code or URL</label>
-            <input type="text" id="provider-signin-input" class="form-input code-font"
-                   placeholder="Paste code or URL here">
+        <div id="ai-provider-tab-api-key" class="ai-provider-tab-content">
+          <div class="form-single-column" style="max-width: 100%;">
+            <div class="form-row">
+              <label for="ai-provider-api-key-label">Account Label</label>
+              <input type="text" id="ai-provider-api-key-label" class="form-input" placeholder="e.g., Production Key">
+            </div>
+            <div class="form-row">
+              <label for="ai-provider-api-key-input">API Key</label>
+              <div class="apikey-input-group">
+                <input type="password" id="ai-provider-api-key-input" class="form-input code-font" placeholder="Paste API key">
+                <button type="button" class="btn-icon apikey-toggle-visibility" data-target="ai-provider-api-key-input" title="Toggle visibility">
+                  <svg class="eye-open" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <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" 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 class="form-row">
+              <label for="ai-provider-api-key-endpoint-enabled">Custom Endpoint</label>
+              <label class="toggle-switch">
+                <input type="checkbox" id="ai-provider-api-key-endpoint-enabled">
+                <span class="toggle-slider"></span>
+              </label>
+            </div>
+            <div id="ai-provider-api-key-endpoint-fields" class="apikey-endpoint-fields" hidden>
+              <label class="apikey-endpoint-field-label" for="ai-provider-api-key-base-url">Base URL</label>
+              <input type="text" id="ai-provider-api-key-base-url" class="form-input code-font" placeholder="https://your-endpoint.example.com">
+              <label class="apikey-endpoint-field-label" for="ai-provider-api-key-api-version">API Version (optional)</label>
+              <input type="text" id="ai-provider-api-key-api-version" class="form-input code-font" placeholder="2025-04-01-preview">
+            </div>
           </div>
+        </div>
+      </div>
+      <div class="modal-actions">
+        <button type="button" class="btn-secondary" id="ai-provider-add-cancel-btn">Cancel</button>
+        <button type="button" class="btn-primary" id="ai-provider-add-submit-btn">Complete Sign-In</button>
+      </div>
+    </div>
+  </div>
 
-          <div class="signin-step" style="margin-top: 16px;">
-            <span class="step-number">3</span>
-            <span class="step-text">Name this account</span>
+  <!-- Edit API Key Modal -->
+  <div id="ai-provider-edit-api-key-modal" class="modal" hidden>
+    <div class="modal-overlay"></div>
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2>Edit API Key Account</h2>
+        <button type="button" class="modal-close" aria-label="Close">&times;</button>
+      </div>
+      <div class="modal-body">
+        <div class="form-single-column" style="max-width: 100%;">
+          <div class="form-row">
+            <label for="ai-provider-edit-label">Account Label</label>
+            <input type="text" id="ai-provider-edit-label" class="form-input" placeholder="e.g., Production Key">
+          </div>
+          <div class="form-row">
+            <label for="ai-provider-edit-api-key">API Key</label>
+            <div class="apikey-input-group">
+              <input type="password" id="ai-provider-edit-api-key" class="form-input code-font" placeholder="Leave blank to keep existing">
+              <button type="button" class="btn-icon apikey-toggle-visibility" data-target="ai-provider-edit-api-key" title="Toggle visibility">
+                <svg class="eye-open" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <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" 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 class="form-row">
+            <label for="ai-provider-edit-endpoint-enabled">Custom Endpoint</label>
+            <label class="toggle-switch">
+              <input type="checkbox" id="ai-provider-edit-endpoint-enabled">
+              <span class="toggle-slider"></span>
+            </label>
           </div>
-          <div class="form-row" style="margin-top: 8px; grid-template-columns: auto 1fr; gap: 8px;">
-            <label for="provider-signin-label-input">Account Label</label>
-            <input type="text" id="provider-signin-label-input" class="form-input"
-                   placeholder="e.g., Production, Development, Team">
+          <div id="ai-provider-edit-endpoint-fields" class="apikey-endpoint-fields" hidden>
+            <label class="apikey-endpoint-field-label" for="ai-provider-edit-base-url">Base URL</label>
+            <input type="text" id="ai-provider-edit-base-url" class="form-input code-font" placeholder="https://your-endpoint.example.com">
+            <label class="apikey-endpoint-field-label" for="ai-provider-edit-api-version">API Version (optional)</label>
+            <input type="text" id="ai-provider-edit-api-version" class="form-input code-font" placeholder="2025-04-01-preview">
           </div>
         </div>
       </div>
       <div class="modal-actions">
-        <button type="button" class="btn-secondary" id="provider-signin-cancel-btn">Cancel</button>
-        <button type="button" class="btn-primary" id="provider-signin-submit-btn">Complete Sign-In</button>
+        <button type="button" class="btn-secondary" id="ai-provider-edit-cancel-btn">Cancel</button>
+        <button type="button" class="btn-primary" id="ai-provider-edit-save-btn">Save</button>
       </div>
     </div>
   </div>