synthos 0.7.1 → 0.8.0

package/required-pages/settings.html

@@ -4,7 +4,7 @@
     <title>SynthOS - Settings</title>
     <script id="theme-info" src="/api/theme-info.js" data-locked="true"></script>
     <link id="theme-css" rel="stylesheet" href="/api/theme.css" data-locked="true">
-    <style>.settings-title{font-size:22px;font-weight:700;min-height:var(--header-min-height);padding:var(--header-padding-vertical) var(--header-padding-horizontal);line-height:var(--header-line-height);display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border-radius:12px 12px 0 0;width:100%;box-shadow:0 6px 25px var(--accent-glow);letter-spacing:2px;text-shadow:0 2px 10px rgba(0,0,0,.3)}.settings-container{display:flex;flex-direction:column;width:100%;flex-grow:1;background:rgba(15,15,35,.8);border-radius:0 0 12px 12px;border:1px solid rgba(138,43,226,.2);border-top:none;overflow:hidden}.accordion-section{display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;border-bottom:1px solid var(--border-color)}.accordion-section:last-child{border-bottom:none}.accordion-section.active{flex-shrink:1;flex-grow:1;min-height:0}.accordion-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 25px;background:none;border:none;color:var(--text-primary);font-size:15px;font-weight:600;cursor:pointer;transition:background .3s;letter-spacing:.5px;flex-shrink:0}.accordion-header:hover{background:rgba(138,43,226,.05)}.accordion-section.active .accordion-header{background:rgba(138,43,226,.08)}.accordion-chevron{font-size:11px;color:var(--text-secondary);transition:transform .3s}.accordion-section.active .accordion-chevron{transform:rotate(180deg)}.accordion-body{display:none;flex-direction:column;flex-grow:1;min-height:0;overflow:hidden}.accordion-section.active .accordion-body{display:flex}.accordion-content{display:flex;flex-direction:column;gap:15px;overflow-y:auto;padding:20px 25px;flex-grow:1}.button-row{display:flex;justify-content:flex-end;padding:15px 25px;border-top:1px solid var(--border-color);flex-shrink:0}.apply-btn{padding:12px 30px;border:none;border-radius:12px;font-size:15px;background:linear-gradient(135deg,var(--accent-primary) 0,var(--accent-secondary) 50%,var(--accent-tertiary) 100%);color:#fff;cursor:pointer;transition:.3s;font-weight:600;letter-spacing:1px;box-shadow:0 4px 20px rgba(102,126,234,.4)}.apply-btn:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(102,126,234,.6)}.apply-btn:active{transform:translateY(0)}.form-group{display:flex;flex-direction:column;width:100%}.form-group label{display:block;margin-bottom:8px;color:var(--text-secondary);font-weight:600;font-size:14px}.form-group input,.form-group select,.form-group textarea{width:100%;padding:14px 18px;border-radius:12px;border:1px solid var(--border-color);background:rgba(15,15,35,.8);color:var(--text-primary);font-size:14px;transition:.3s;box-shadow:inset 0 2px 10px rgba(0,0,0,.3)}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:0;border-color:rgba(183,148,246,.6);box-shadow:inset 0 2px 10px rgba(0,0,0,.3),0 0 20px var(--accent-glow)}.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(183,148,246,.5)}.form-group textarea{resize:vertical;min-height:100px}.form-group select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b794f6' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}.form-group select option{background:var(--bg-tertiary);color:var(--text-primary);padding:10px}.info-text{color:rgba(183,148,246,.7);font-size:13px;line-height:1.6;text-align:center;padding:15px;background:rgba(15,15,35,.4);border-radius:10px;border:1px solid var(--border-color)}.info-text a{color:var(--accent-tertiary);text-decoration:none;transition:.3s;font-weight:500}.info-text a:hover{color:var(--text-secondary);text-shadow:0 0 10px var(--accent-glow)}.config-required-banner{padding:12px 20px;background:rgba(255,180,50,.12);border:1px solid rgba(255,180,50,.3);border-radius:10px;color:rgba(255,200,100,.9);font-size:13px;font-weight:500;text-align:center;line-height:1.5}.model-card{border:1px solid var(--border-color);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:12px;background:rgba(15,15,35,.3)}.model-card-title{font-size:14px;font-weight:700;color:var(--text-primary);letter-spacing:.5px;margin:0}.filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.filter-btn{padding:6px 14px;border-radius:20px;border:1px solid var(--border-color);background:0 0;color:var(--text-secondary);font-size:13px;cursor:pointer;transition:.2s;white-space:nowrap;flex-shrink:0}.filter-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.filter-btn.active{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border-color:transparent}.services-grid{display:grid;grid-template-columns:1fr;gap:12px}.service-card{border-radius:12px;border:1px solid var(--border-color);background:rgba(15,15,35,.5);padding:18px;transition:.3s}.service-card:hover{border-color:rgba(138,43,226,.3)}.service-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.service-card-name{font-size:15px;font-weight:600;color:var(--text-primary)}.service-card-category{font-size:11px;color:var(--text-secondary);background:rgba(138,43,226,.15);padding:2px 8px;border-radius:10px}.service-card-desc{font-size:13px;color:var(--text-secondary);line-height:1.5;margin-bottom:12px}.service-card-fields{display:flex;flex-direction:column;gap:8px}.service-card-fields input{width:100%;padding:10px 14px;border-radius:8px;border:1px solid var(--border-color);background:rgba(15,15,35,.8);color:var(--text-primary);font-size:13px;transition:.3s;box-shadow:inset 0 2px 8px rgba(0,0,0,.2)}.service-card-fields input:focus{outline:0;border-color:rgba(183,148,246,.6);box-shadow:inset 0 2px 8px rgba(0,0,0,.2),0 0 15px var(--accent-glow)}.service-card-fields input::placeholder{color:rgba(183,148,246,.5)}.toggle-switch{position:relative;width:44px;height:24px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:rgba(100,100,100,.4);border-radius:24px;transition:.3s}.toggle-slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}.toggle-switch input:checked+.toggle-slider{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary))}.toggle-switch input:checked+.toggle-slider:before{transform:translateX(20px)}.light-mode .settings-container{background:rgba(255,255,255,.8)}.light-mode .accordion-header:hover{background:rgba(118,75,162,.05)}.light-mode .accordion-section.active .accordion-header{background:rgba(118,75,162,.06)}.light-mode .form-group input,.light-mode .form-group select,.light-mode .form-group textarea{background:rgba(255,255,255,.8);box-shadow:inset 0 2px 10px rgba(118,75,162,.05)}.light-mode .form-group input:focus,.light-mode .form-group select:focus,.light-mode .form-group textarea:focus{box-shadow:inset 0 2px 10px rgba(118,75,162,.05),0 0 20px var(--accent-glow)}.light-mode .form-group input::placeholder,.light-mode .form-group textarea::placeholder{color:rgba(107,79,138,.5)}.light-mode .info-text{color:rgba(107,79,138,.7);background:rgba(255,255,255,.4)}.light-mode .config-required-banner{background:rgba(200,150,50,.1);border-color:rgba(200,150,50,.3);color:rgba(160,120,30,.9)}.light-mode .model-card{background:rgba(255,255,255,.3)}.light-mode .service-card{background:rgba(255,255,255,.5)}.light-mode .service-card-fields input{background:rgba(255,255,255,.8);box-shadow:inset 0 2px 8px rgba(118,75,162,.05)}.light-mode .service-card-fields input:focus{box-shadow:inset 0 2px 8px rgba(118,75,162,.05),0 0 15px var(--accent-glow)}.light-mode .service-card-fields input::placeholder{color:rgba(107,79,138,.5)}.model-card.disabled{opacity:0.35;pointer-events:none;user-select:none;transition:opacity .3s}.wizard-hidden{display:none !important}.more-settings-link{display:inline-block;color:var(--accent-tertiary);font-size:13px;cursor:pointer;text-decoration:none;padding:4px 0;transition:.3s;user-select:none}.more-settings-link:hover{color:var(--text-secondary);text-shadow:0 0 10px var(--accent-glow)}.light-mode .model-card.disabled{opacity:0.35}.accordion-section.disabled .accordion-header{opacity:0.35;pointer-events:none;cursor:default}.apply-btn:disabled{opacity:0.35;pointer-events:none;cursor:default}.connector-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.connector-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 12px;border-radius:14px;border:1px solid var(--border-color);background:linear-gradient(160deg,rgba(30,30,60,.6),rgba(20,20,50,.8));cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;gap:8px}.connector-tile:hover{transform:translateY(-3px);box-shadow:0 6px 20px var(--accent-glow);border-color:var(--accent-primary)}.connector-tile.configured{background:linear-gradient(160deg,rgba(60,30,90,.6),rgba(40,20,70,.8));border-color:var(--accent-secondary);box-shadow:0 2px 12px var(--accent-glow)}.connector-tile-name{font-size:14px;font-weight:600;color:var(--text-primary)}.connector-category{font-size:11px;color:var(--text-secondary);background:rgba(138,43,226,.15);padding:2px 8px;border-radius:10px}.search-input{flex:1;min-width:100px;padding:6px 14px;border-radius:20px;border:1px solid var(--border-color);background:rgba(15,15,35,.8);color:var(--text-primary);font-size:13px;transition:.3s}.search-input:focus{outline:0;border-color:rgba(183,148,246,.6)}.search-input::placeholder{color:rgba(183,148,246,.5)}.filter-buttons-container{display:flex;gap:8px;flex-wrap:nowrap}.conn-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000}.conn-modal-content{background:rgba(20,20,50,.95);border:1px solid var(--border-color);border-radius:16px;padding:28px;max-width:420px;width:90%;display:flex;flex-direction:column;gap:16px;box-shadow:0 8px 40px rgba(0,0,0,.5)}.conn-modal-title{font-size:18px;font-weight:700;color:var(--text-primary)}.conn-modal-desc{font-size:13px;color:var(--text-secondary);line-height:1.5}.conn-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}.conn-modal-btn{padding:12px 24px;border:none;border-radius:12px;font-size:14px;background:linear-gradient(135deg,var(--accent-primary) 0,var(--accent-secondary) 50%,var(--accent-tertiary) 100%);color:#fff;cursor:pointer;transition:.3s;font-weight:600;letter-spacing:.5px;box-shadow:0 4px 20px rgba(102,126,234,.4)}.conn-modal-btn:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(102,126,234,.6)}.conn-modal-btn.cancel{background:rgba(100,100,100,.4);box-shadow:none}.conn-modal-btn.cancel:hover{background:rgba(100,100,100,.6);transform:translateY(-1px)}.conn-modal-btn.remove{background:rgba(180,50,50,.6);box-shadow:none}.conn-modal-btn.remove:hover{background:rgba(200,60,60,.8);transform:translateY(-1px)}.light-mode .connector-tile{background:linear-gradient(160deg,rgba(240,235,255,.8),rgba(250,248,255,.9))}.light-mode .connector-tile.configured{background:linear-gradient(160deg,rgba(220,200,255,.8),rgba(235,220,255,.9))}.light-mode .search-input{background:rgba(255,255,255,.8)}.light-mode .search-input::placeholder{color:rgba(107,79,138,.5)}.light-mode .conn-modal-content{background:rgba(250,248,255,.98)}</style>
+    <style>.settings-title{font-size:22px;font-weight:700;min-height:var(--header-min-height);padding:var(--header-padding-vertical) var(--header-padding-horizontal);line-height:var(--header-line-height);display:flex;align-items:center;justify-content:center;box-sizing:border-box;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border-radius:12px 12px 0 0;width:100%;box-shadow:0 6px 25px var(--accent-glow);letter-spacing:2px;text-shadow:0 2px 10px rgba(0,0,0,.3)}.settings-container{display:flex;flex-direction:column;width:100%;flex-grow:1;background:rgba(15,15,35,.8);border-radius:0 0 12px 12px;border:1px solid rgba(138,43,226,.2);border-top:none;overflow:hidden}.accordion-section{display:flex;flex-direction:column;flex-shrink:0;overflow:hidden;border-bottom:1px solid var(--border-color)}.accordion-section:last-child{border-bottom:none}.accordion-section.active{flex-shrink:1;flex-grow:1;min-height:0}.accordion-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:16px 25px;background:none;border:none;color:var(--text-primary);font-size:15px;font-weight:600;cursor:pointer;transition:background .3s;letter-spacing:.5px;flex-shrink:0}.accordion-header:hover{background:rgba(138,43,226,.05)}.accordion-section.active .accordion-header{background:rgba(138,43,226,.08)}.accordion-chevron{font-size:11px;color:var(--text-secondary);transition:transform .3s}.accordion-section.active .accordion-chevron{transform:rotate(180deg)}.accordion-body{display:none;flex-direction:column;flex-grow:1;min-height:0;overflow:hidden}.accordion-section.active .accordion-body{display:flex}.accordion-content{display:flex;flex-direction:column;gap:15px;overflow-y:auto;padding:20px 25px;flex-grow:1}.button-row{display:flex;justify-content:flex-end;padding:15px 25px;border-top:1px solid var(--border-color);flex-shrink:0}.apply-btn{padding:12px 30px;border:none;border-radius:12px;font-size:15px;background:linear-gradient(135deg,var(--accent-primary) 0,var(--accent-secondary) 50%,var(--accent-tertiary) 100%);color:#fff;cursor:pointer;transition:.3s;font-weight:600;letter-spacing:1px;box-shadow:0 4px 20px rgba(102,126,234,.4)}.apply-btn:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(102,126,234,.6)}.apply-btn:active{transform:translateY(0)}.form-group{display:flex;flex-direction:column;width:100%}.form-group label{display:block;margin-bottom:8px;color:var(--text-secondary);font-weight:600;font-size:14px}.form-group input,.form-group select,.form-group textarea{width:100%;padding:14px 18px;border-radius:12px;border:1px solid var(--border-color);background:rgba(15,15,35,.8);color:var(--text-primary);font-size:14px;transition:.3s;box-shadow:inset 0 2px 10px rgba(0,0,0,.3)}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:0;border-color:rgba(183,148,246,.6);box-shadow:inset 0 2px 10px rgba(0,0,0,.3),0 0 20px var(--accent-glow)}.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(183,148,246,.5)}.form-group textarea{resize:vertical;min-height:100px}.form-group select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b794f6' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center}.form-group select option{background:var(--bg-tertiary);color:var(--text-primary);padding:10px}.info-text{color:rgba(183,148,246,.7);font-size:13px;line-height:1.6;text-align:center;padding:15px;background:rgba(15,15,35,.4);border-radius:10px;border:1px solid var(--border-color)}.info-text a{color:var(--accent-tertiary);text-decoration:none;transition:.3s;font-weight:500}.info-text a:hover{color:var(--text-secondary);text-shadow:0 0 10px var(--accent-glow)}.config-required-banner{padding:12px 20px;background:rgba(255,180,50,.12);border:1px solid rgba(255,180,50,.3);border-radius:10px;color:rgba(255,200,100,.9);font-size:13px;font-weight:500;text-align:center;line-height:1.5}.model-card{border:1px solid var(--border-color);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:12px;background:rgba(15,15,35,.3)}.model-card-title{font-size:14px;font-weight:700;color:var(--text-primary);letter-spacing:.5px;margin:0}.filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.filter-btn{padding:6px 14px;border-radius:20px;border:1px solid var(--border-color);background:0 0;color:var(--text-secondary);font-size:13px;cursor:pointer;transition:.2s;white-space:nowrap;flex-shrink:0}.filter-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.filter-btn.active{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;border-color:transparent}.services-grid{display:grid;grid-template-columns:1fr;gap:12px}.service-card{border-radius:12px;border:1px solid var(--border-color);background:rgba(15,15,35,.5);padding:18px;transition:.3s}.service-card:hover{border-color:rgba(138,43,226,.3)}.service-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.service-card-name{font-size:15px;font-weight:600;color:var(--text-primary)}.service-card-category{font-size:11px;color:var(--text-secondary);background:rgba(138,43,226,.15);padding:2px 8px;border-radius:10px}.service-card-desc{font-size:13px;color:var(--text-secondary);line-height:1.5;margin-bottom:12px}.service-card-fields{display:flex;flex-direction:column;gap:8px}.service-card-fields input{width:100%;padding:10px 14px;border-radius:8px;border:1px solid var(--border-color);background:rgba(15,15,35,.8);color:var(--text-primary);font-size:13px;transition:.3s;box-shadow:inset 0 2px 8px rgba(0,0,0,.2)}.service-card-fields input:focus{outline:0;border-color:rgba(183,148,246,.6);box-shadow:inset 0 2px 8px rgba(0,0,0,.2),0 0 15px var(--accent-glow)}.service-card-fields input::placeholder{color:rgba(183,148,246,.5)}.toggle-switch{position:relative;width:44px;height:24px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:rgba(100,100,100,.4);border-radius:24px;transition:.3s}.toggle-slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}.toggle-switch input:checked+.toggle-slider{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary))}.toggle-switch input:checked+.toggle-slider:before{transform:translateX(20px)}.light-mode .settings-container{background:rgba(255,255,255,.8)}.light-mode .accordion-header:hover{background:rgba(118,75,162,.05)}.light-mode .accordion-section.active .accordion-header{background:rgba(118,75,162,.06)}.light-mode .form-group input,.light-mode .form-group select,.light-mode .form-group textarea{background:rgba(255,255,255,.8);box-shadow:inset 0 2px 10px rgba(118,75,162,.05)}.light-mode .form-group input:focus,.light-mode .form-group select:focus,.light-mode .form-group textarea:focus{box-shadow:inset 0 2px 10px rgba(118,75,162,.05),0 0 20px var(--accent-glow)}.light-mode .form-group input::placeholder,.light-mode .form-group textarea::placeholder{color:rgba(107,79,138,.5)}.light-mode .info-text{color:rgba(107,79,138,.7);background:rgba(255,255,255,.4)}.light-mode .config-required-banner{background:rgba(200,150,50,.1);border-color:rgba(200,150,50,.3);color:rgba(160,120,30,.9)}.light-mode .model-card{background:rgba(255,255,255,.3)}.light-mode .service-card{background:rgba(255,255,255,.5)}.light-mode .service-card-fields input{background:rgba(255,255,255,.8);box-shadow:inset 0 2px 8px rgba(118,75,162,.05)}.light-mode .service-card-fields input:focus{box-shadow:inset 0 2px 8px rgba(118,75,162,.05),0 0 15px var(--accent-glow)}.light-mode .service-card-fields input::placeholder{color:rgba(107,79,138,.5)}.model-card.disabled{opacity:0.35;pointer-events:none;user-select:none;transition:opacity .3s}.wizard-hidden{display:none !important}.more-settings-link{display:inline-block;color:var(--accent-tertiary);font-size:13px;cursor:pointer;text-decoration:none;padding:4px 0;transition:.3s;user-select:none}.more-settings-link:hover{color:var(--text-secondary);text-shadow:0 0 10px var(--accent-glow)}.light-mode .model-card.disabled{opacity:0.35}.accordion-section.disabled .accordion-header{opacity:0.35;pointer-events:none;cursor:default}.apply-btn:disabled{opacity:0.35;pointer-events:none;cursor:default}.connector-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.connector-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 12px;border-radius:14px;border:1px solid var(--border-color);background:linear-gradient(160deg,rgba(30,30,60,.6),rgba(20,20,50,.8));cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;gap:8px}.connector-tile:hover{transform:translateY(-3px);box-shadow:0 6px 20px var(--accent-glow);border-color:var(--accent-primary)}.connector-tile.configured{background:linear-gradient(160deg,rgba(60,30,90,.6),rgba(40,20,70,.8));border-color:var(--accent-secondary);box-shadow:0 2px 12px var(--accent-glow)}.connector-tile-name{font-size:14px;font-weight:600;color:var(--text-primary)}.connector-category{font-size:11px;color:var(--text-secondary);background:rgba(138,43,226,.15);padding:2px 8px;border-radius:10px}.search-input{margin-left:auto;width:180px;min-width:120px;flex-shrink:0;padding:6px 14px;border-radius:20px;border:1px solid var(--border-color);background:rgba(15,15,35,.8);color:var(--text-primary);font-size:13px;transition:.3s}.search-input:focus{outline:0;border-color:rgba(183,148,246,.6)}.search-input::placeholder{color:rgba(183,148,246,.5)}.filter-buttons-container{display:flex;gap:8px;flex-shrink:1;min-width:0;overflow:hidden;flex-wrap:nowrap}.conn-modal-content{background:rgba(20,20,50,.95);border:1px solid var(--border-color);border-radius:16px;padding:28px;max-width:520px;width:90%;max-height:85vh;display:flex;flex-direction:column;gap:16px;box-shadow:0 8px 40px rgba(0,0,0,.5);overflow-y:auto}.conn-modal-title{font-size:18px;font-weight:700;color:var(--text-primary)}.conn-modal-desc{font-size:13px;color:var(--text-secondary);line-height:1.5}.conn-modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}.conn-modal-btn{padding:12px 24px;border:none;border-radius:12px;font-size:14px;background:linear-gradient(135deg,var(--accent-primary) 0,var(--accent-secondary) 50%,var(--accent-tertiary) 100%);color:#fff;cursor:pointer;transition:.3s;font-weight:600;letter-spacing:.5px;box-shadow:0 4px 20px rgba(102,126,234,.4)}.conn-modal-btn:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(102,126,234,.6)}.conn-modal-btn.cancel{background:rgba(100,100,100,.4);box-shadow:none}.conn-modal-btn.cancel:hover{background:rgba(100,100,100,.6);transform:translateY(-1px)}.conn-modal-btn.remove{background:rgba(180,50,50,.6);box-shadow:none}.conn-modal-btn.remove:hover{background:rgba(200,60,60,.8);transform:translateY(-1px)}.light-mode .connector-tile{background:linear-gradient(160deg,rgba(240,235,255,.8),rgba(250,248,255,.9))}.light-mode .connector-tile.configured{background:linear-gradient(160deg,rgba(220,200,255,.8),rgba(235,220,255,.9))}.light-mode .search-input{background:rgba(255,255,255,.8)}.light-mode .search-input::placeholder{color:rgba(107,79,138,.5)}.more-dropdown{position:relative;flex-shrink:0}.more-btn{position:relative}.more-menu{position:absolute;top:100%;left:0;margin-top:4px;min-width:150px;max-height:250px;overflow-y:auto;border-radius:8px;padding:4px 0;box-shadow:0 8px 30px rgba(0,0,0,.4);display:none;border:1px solid var(--border-color);background:rgba(30,30,50,.95);z-index:100}.more-menu.show{display:block}.more-menu-item{padding:8px 16px;font-size:13px;cursor:pointer;color:var(--text-primary);transition:background .15s;white-space:nowrap}.more-menu-item:hover{background:linear-gradient(135deg,rgba(102,126,234,.3) 0,rgba(118,75,162,.3) 100%)}.more-menu-item.active{background:linear-gradient(135deg,rgba(102,126,234,.2) 0,rgba(118,75,162,.2) 100%);color:var(--accent-tertiary)}.conn-tooltip{position:fixed;padding:8px 12px;background:var(--bg-tertiary,#0f0f23);color:var(--text-secondary,#b794f6);border:1px solid var(--border-color,rgba(138,43,226,0.3));border-radius:8px;font-size:12px;line-height:1.5;max-width:260px;pointer-events:none;z-index:10000;box-shadow:0 4px 16px rgba(0,0,0,.4);opacity:0;transition:opacity .15s}.conn-tooltip.visible{opacity:1}.light-mode .more-menu{background:rgba(255,255,255,.97);box-shadow:0 8px 30px rgba(0,0,0,.15)}.light-mode .conn-modal-content{background:rgba(250,248,255,.98)}.agent-toggle-row{display:flex;align-items:center;gap:10px}.agent-list{display:flex;flex-direction:column;gap:0;max-height:400px;overflow-y:auto;border:1px solid var(--border-color);border-radius:12px}.agent-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .15s}.agent-row:last-child{border-bottom:none}.agent-row:hover{background:rgba(138,43,226,.06)}.agent-row.selected{background:rgba(138,43,226,.1)}.agent-row-info{flex:1;min-width:0;display:flex;align-items:center;gap:10px}.agent-row-name{font-size:14px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.agent-row-desc{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}.agent-row-badge{font-size:11px;color:var(--text-secondary);background:rgba(138,43,226,.15);padding:2px 8px;border-radius:10px;white-space:nowrap;flex-shrink:0}.agent-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.agent-status-dot.connected{background:#4ade80}.agent-status-dot.disconnected{background:rgba(100,100,100,.5)}.agent-row-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.agent-chat-panel{border:1px solid var(--border-color);border-radius:12px;margin-top:12px;overflow:hidden;display:none}.agent-chat-panel.open{display:flex;flex-direction:column}.agent-chat-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:rgba(138,43,226,.08);font-size:13px;font-weight:600;color:var(--text-primary)}.agent-chat-close{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:16px;padding:0 4px}.agent-chat-close:hover{color:var(--text-primary)}.agent-chat-messages{max-height:250px;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px;font-size:13px}.agent-chat-msg{padding:8px 12px;border-radius:10px;max-width:85%;line-height:1.5;word-wrap:break-word;white-space:pre-wrap}.agent-chat-msg.user{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;align-self:flex-end}.agent-chat-msg.agent{background:rgba(15,15,35,.4);color:var(--text-primary);align-self:flex-start;border:1px solid var(--border-color)}.agent-chat-msg.error{background:rgba(180,50,50,.2);color:rgba(255,150,150,.9);align-self:center;font-size:12px}.agent-chat-msg.status{color:var(--text-secondary);align-self:center;font-size:12px;font-style:italic}.agent-chat-input-row{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border-color)}.agent-chat-input{flex:1;padding:10px 14px;border-radius:10px;border:1px solid var(--border-color);background:rgba(15,15,35,.8);color:var(--text-primary);font-size:13px}.agent-chat-input:focus{outline:0;border-color:rgba(183,148,246,.6)}.agent-chat-input::placeholder{color:rgba(183,148,246,.5)}.agent-chat-send{padding:10px 18px;border:none;border-radius:10px;font-size:13px;background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:#fff;cursor:pointer;font-weight:600;transition:.2s}.agent-chat-send:hover{transform:translateY(-1px)}.agent-chat-send:disabled{opacity:.5;pointer-events:none}.light-mode .agent-list{border-color:rgba(118,75,162,.15)}.light-mode .agent-row:hover{background:rgba(118,75,162,.05)}.light-mode .agent-row.selected{background:rgba(118,75,162,.08)}.light-mode .agent-chat-msg.agent{background:rgba(255,255,255,.6)}.light-mode .agent-chat-input{background:rgba(255,255,255,.8)}</style>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/14.1.1/marked.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.1.0/mermaid.min.js"></script>
@@ -136,13 +136,17 @@
 
             <div class="accordion-section" data-section="connectors">
                 <button class="accordion-header">
-                    <span>Connectors</span>
+                    <span>Connectors <span style="display:inline-block;margin-left:6px;padding:1px 7px;font-size:10px;font-weight:600;letter-spacing:.5px;border-radius:6px;background:var(--accent-tertiary, #8a2be2);color:#fff;vertical-align:middle;line-height:16px;text-transform:uppercase;">Preview</span></span>
                     <span class="accordion-chevron">&#9662;</span>
                 </button>
                 <div class="accordion-body">
                     <div class="accordion-content">
                         <div class="filter-bar" id="connectorFilterBar">
                             <div class="filter-buttons-container" id="connectorFilterButtons"></div>
+                            <div class="more-dropdown" id="connMoreDropdown" style="display:none;">
+                                <button class="filter-btn more-btn" id="connMoreBtn">More &#9662;</button>
+                                <div class="more-menu" id="connMoreMenu"></div>
+                            </div>
                             <input type="text" class="search-input" id="connectorSearch" placeholder="Search connectors...">
                         </div>
                         <div class="connector-grid" id="connectorGrid"></div>
@@ -150,13 +154,119 @@
                 </div>
             </div>
 
+            <div class="accordion-section" data-section="agents">
+                <button class="accordion-header">
+                    <span>Agents <span style="display:inline-block;margin-left:6px;padding:1px 7px;font-size:10px;font-weight:600;letter-spacing:.5px;border-radius:6px;background:var(--accent-tertiary, #8a2be2);color:#fff;vertical-align:middle;line-height:16px;text-transform:uppercase;">Preview</span></span>
+                    <span class="accordion-chevron">&#9662;</span>
+                </button>
+                <div class="accordion-body">
+                    <div class="accordion-content">
+                        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
+                            <div style="font-size:13px;color:var(--text-secondary);">Configure agents (A2A or OpenClaw) that your pages can communicate with.</div>
+                            <button class="conn-modal-btn" id="addAgentBtn" style="padding:8px 18px;font-size:13px;">+ Add Agent</button>
+                        </div>
+                        <div class="agent-list" id="agentList"></div>
+                        <div id="agentEmptyState" style="display:none;text-align:center;padding:30px;color:var(--text-secondary);font-size:14px;">
+                            No agents configured yet. Click "+ Add Agent" to get started.
+                        </div>
+                        <div class="agent-chat-panel" id="agentChatPanel">
+                            <div class="agent-chat-header">
+                                <span id="agentChatTitle">Chat with Agent</span>
+                                <button class="agent-chat-close" id="agentChatClose">&times;</button>
+                            </div>
+                            <div class="agent-chat-messages" id="agentChatMessages"></div>
+                            <div class="agent-chat-input-row">
+                                <input type="text" class="agent-chat-input" id="agentChatInput" placeholder="Type a test message...">
+                                <button class="agent-chat-send" id="agentChatSendBtn">Send</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
         </div>
         <div id="loadingOverlay" class="loading-overlay"><div class="spinner"></div></div>
     </div>
-    <div class="conn-modal-overlay" id="connectorModal" style="display:none;">
+    <div class="modal-overlay" id="agentModal" style="display:none;">
+        <div class="conn-modal-content">
+            <div class="conn-modal-title" id="agentModalTitle">Add Agent</div>
+            <div id="agentFormGroup">
+                <div class="form-group" style="margin-bottom:10px;">
+                    <label>Agent Type</label>
+                    <div style="display:flex;gap:8px;">
+                        <button class="filter-btn active" id="agentTypeA2A">A2A Agent</button>
+                        <button class="filter-btn" id="agentTypeOpenClaw">OpenClaw Agent</button>
+                    </div>
+                </div>
+                <div class="form-group" style="margin-bottom:10px;">
+                    <label for="agentUrl">Agent URL</label>
+                    <div style="display:flex;gap:8px;">
+                        <input type="text" id="agentUrl" placeholder="https://example.com" style="flex:1;">
+                        <button class="conn-modal-btn" id="agentDiscoverBtn" style="padding:10px 16px;white-space:nowrap;font-size:13px;">Discover</button>
+                    </div>
+                    <div id="agentUrlHint" style="font-size:11px;color:var(--text-secondary);margin-top:4px;">Enter a URL and click Discover to auto-fill from the agent card, or fill in the fields manually.</div>
+                </div>
+                <div class="form-group" id="agentTokenGroup" style="margin-bottom:10px;display:none;">
+                    <label for="agentToken">Token</label>
+                    <input type="password" id="agentToken" placeholder="Gateway authentication token">
+                </div>
+                <div class="form-group" id="agentSessionKeyGroup" style="margin-bottom:10px;display:none;">
+                    <label for="agentSessionKey">Default Session Key</label>
+                    <input type="text" id="agentSessionKey" placeholder="e.g. agent:main:main">
+                </div>
+                <div id="agentSshTunnelGroup" style="display:none;margin-bottom:10px;">
+                    <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;cursor:pointer;" id="agentSshTunnelToggleHeader">
+                        <span style="font-size:12px;color:var(--text-secondary);" id="agentSshTunnelArrow">&#9654;</span>
+                        <label style="margin:0;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-secondary);">SSH Tunnel</label>
+                        <label class="toggle-switch" style="margin-left:auto;" onclick="event.stopPropagation();">
+                            <input type="checkbox" id="agentSshTunnelEnabled">
+                            <span class="toggle-slider"></span>
+                        </label>
+                    </div>
+                    <div id="agentSshTunnelFields" style="display:none;padding-left:4px;">
+                        <div class="form-group" style="margin-bottom:8px;">
+                            <label for="agentSshCommand" style="font-size:12px;">SSH Command</label>
+                            <input type="text" id="agentSshCommand" placeholder="ssh -p 22 -N -L 18789:127.0.0.1:43901 root@0.0.0.0">
+                        </div>
+                        <div class="form-group" style="margin-bottom:8px;">
+                            <label for="agentSshPassword" style="font-size:12px;">Password</label>
+                            <input type="password" id="agentSshPassword" placeholder="SSH password">
+                        </div>
+                    </div>
+                </div>
+                <div class="form-group" style="margin-bottom:10px;">
+                    <label for="agentName">Name</label>
+                    <input type="text" id="agentName" placeholder="My Agent">
+                </div>
+                <div class="form-group" style="margin-bottom:10px;">
+                    <label for="agentDescription">Description</label>
+                    <textarea id="agentDescription" placeholder="Describe what this agent does and when to use it..." style="min-height:60px;"></textarea>
+                </div>
+                <div id="agentSkillsPreview" style="display:none;padding:10px;border-radius:8px;border:1px solid var(--border-color);background:rgba(15,15,35,.3);margin-bottom:10px;">
+                    <div style="font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:4px;">Discovered Skills</div>
+                    <div id="agentSkillsList" style="font-size:12px;color:var(--text-secondary);"></div>
+                </div>
+            </div>
+            <div class="conn-modal-actions">
+                <button class="conn-modal-btn" id="agentSaveBtn">Save</button>
+                <button class="conn-modal-btn cancel" id="agentCancelBtn">Cancel</button>
+                <button class="conn-modal-btn remove" id="agentRemoveBtn" style="display:none;">Remove</button>
+            </div>
+        </div>
+    </div>
+    <div class="modal-overlay" id="connectorModal" style="display:none;">
         <div class="conn-modal-content">
             <div class="conn-modal-title" id="connectorModalTitle"></div>
             <div class="conn-modal-desc" id="connectorModalDesc"></div>
+            <div id="connectorOnboarding" style="display:none;">
+                <a id="connectorOnboardingLink" href="#" target="_blank"
+                   style="color:var(--accent-tertiary);font-size:13px;font-weight:500;text-decoration:none;transition:.3s;">
+                   Get your API key &#8594;
+                </a>
+                <ol id="connectorOnboardingSteps"
+                    style="font-size:13px;color:var(--text-secondary);margin:8px 0 0;padding-left:20px;line-height:1.8;">
+                </ol>
+            </div>
             <div id="connectorApiKeyGroup" class="form-group">
                 <label for="connectorApiKey">API Key</label>
                 <input type="password" id="connectorApiKey" placeholder="Enter your API key">
@@ -231,46 +341,223 @@ document.querySelectorAll('.accordion-header').forEach(function(header) {
 // --- URL param: open requested tab ---
 var params = new URLSearchParams(window.location.search);
 var tabParam = params.get('tab');
-if (tabParam && ['general', 'models', 'connectors'].indexOf(tabParam) !== -1) {
+if (tabParam && ['general', 'models', 'connectors', 'agents'].indexOf(tabParam) !== -1) {
     openSection(tabParam);
 }
 
 // --- Connectors logic ---
 var connectorList = [], activeConnectorCategory = 'All', currentConnectorId = null;
+var connVisibleCats = [], connOverflowCats = [];
+
+// MRU: most-recently-used categories get priority for visible slots
+var connMru = (function() {
+    try { return JSON.parse(localStorage.getItem('synthos_connMru')) || []; }
+    catch(e) { return []; }
+})();
+function connMruTouch(cat) {
+    if (cat === 'All' || cat === 'Enabled') return;
+    connMru = connMru.filter(function(c) { return c !== cat; });
+    connMru.unshift(cat);
+    if (connMru.length > 20) connMru.length = 20;
+    try { localStorage.setItem('synthos_connMru', JSON.stringify(connMru)); } catch(e) {}
+}
 
-function loadConnectors() {
-    fetch('/api/connectors').then(function(r) { return r.json(); }).then(function(list) {
-        connectorList = list;
-        renderConnectorFilterBar();
-        renderConnectorGrid();
+function getAllConnectorCategories() {
+    var cats = new Set();
+    connectorList.forEach(function(c) { cats.add(c.category); });
+    return Array.from(cats).sort();
+}
+
+function calculateConnectorVisibleCats() {
+    var allCats = getAllConnectorCategories();
+    var filterBar = document.getElementById('connectorFilterBar');
+    var searchEl = document.getElementById('connectorSearch');
+    var moreDropdown = document.getElementById('connMoreDropdown');
+    if (!filterBar) return;
+
+    var availableWidth = filterBar.offsetWidth - (searchEl.offsetWidth + 8) - 16;
+
+    // Measure button widths
+    var temp = document.createElement('button');
+    temp.className = 'filter-btn';
+    temp.style.visibility = 'hidden';
+    temp.style.position = 'absolute';
+    document.body.appendChild(temp);
+
+    // Measure "All" button
+    temp.textContent = 'All';
+    var allBtnWidth = temp.offsetWidth + 8;
+
+    // Measure "Enabled" button (always shown)
+    temp.textContent = 'Enabled';
+    var enabledBtnWidth = temp.offsetWidth + 8;
+
+    // Measure "More" button
+    temp.textContent = 'More \u25BE';
+    var moreBtnWidth = temp.offsetWidth + 8;
+
+    // Measure each category button
+    var catWidths = {};
+    allCats.forEach(function(cat) {
+        temp.textContent = cat;
+        catWidths[cat] = temp.offsetWidth + 8;
+    });
+    document.body.removeChild(temp);
+
+    // Sort categories: MRU first, then alphabetical
+    var sorted = allCats.slice().sort(function(a, b) {
+        var ai = connMru.indexOf(a);
+        var bi = connMru.indexOf(b);
+        var aInMru = ai !== -1;
+        var bInMru = bi !== -1;
+        if (aInMru && !bInMru) return -1;
+        if (!aInMru && bInMru) return 1;
+        if (aInMru && bInMru) return ai - bi;
+        return a.localeCompare(b);
     });
+
+    connVisibleCats = [];
+    connOverflowCats = [];
+    var usedWidth = allBtnWidth + enabledBtnWidth;
+    var overflowing = false;
+
+    for (var i = 0; i < sorted.length; i++) {
+        var cat = sorted[i];
+        var remaining = sorted.length - i;
+        // When we'd start overflowing, reserve space for the More button
+        var widthIfAdded = usedWidth + catWidths[cat];
+        if (!overflowing && remaining > 1) widthIfAdded += moreBtnWidth;
+
+        if (!overflowing && usedWidth + catWidths[cat] <= availableWidth - (remaining > 1 ? moreBtnWidth : 0)) {
+            connVisibleCats.push(cat);
+            usedWidth += catWidths[cat];
+        } else {
+            overflowing = true;
+            connOverflowCats.push(cat);
+        }
+    }
+
+    // If only one overflow, try to fit it without the More button
+    if (connOverflowCats.length === 1) {
+        if (usedWidth + catWidths[connOverflowCats[0]] <= availableWidth) {
+            connVisibleCats.push(connOverflowCats.pop());
+        }
+    }
 }
 
 function renderConnectorFilterBar() {
+    calculateConnectorVisibleCats();
     var container = document.getElementById('connectorFilterButtons');
+    var moreDropdown = document.getElementById('connMoreDropdown');
+    var moreBtn = document.getElementById('connMoreBtn');
+    var moreMenu = document.getElementById('connMoreMenu');
     container.innerHTML = '';
-    var cats = new Set();
-    connectorList.forEach(function(c) { cats.add(c.category); });
-    var sorted = Array.from(cats).sort();
-    ['All'].concat(sorted).forEach(function(cat) {
+    moreMenu.innerHTML = '';
+
+    // "All" button
+    var allBtn = document.createElement('button');
+    allBtn.className = 'filter-btn' + (activeConnectorCategory === 'All' ? ' active' : '');
+    allBtn.textContent = 'All';
+    allBtn.addEventListener('click', function() { setConnectorCategory('All'); });
+    container.appendChild(allBtn);
+
+    // "Enabled" button (fixed, always visible)
+    var enabledBtn = document.createElement('button');
+    enabledBtn.className = 'filter-btn' + (activeConnectorCategory === 'Enabled' ? ' active' : '');
+    enabledBtn.textContent = 'Enabled';
+    enabledBtn.addEventListener('click', function() { setConnectorCategory('Enabled'); });
+    container.appendChild(enabledBtn);
+
+    // Visible category buttons
+    connVisibleCats.forEach(function(cat) {
         var btn = document.createElement('button');
         btn.className = 'filter-btn' + (activeConnectorCategory === cat ? ' active' : '');
         btn.textContent = cat;
-        btn.addEventListener('click', function() {
-            activeConnectorCategory = cat;
-            renderConnectorFilterBar();
-            renderConnectorGrid();
-        });
+        btn.addEventListener('click', function() { setConnectorCategory(cat); });
         container.appendChild(btn);
     });
+
+    // Overflow dropdown
+    if (connOverflowCats.length > 0) {
+        moreDropdown.style.display = '';
+        moreBtn.className = 'filter-btn more-btn' + (connOverflowCats.indexOf(activeConnectorCategory) !== -1 ? ' active' : '');
+        connOverflowCats.forEach(function(cat) {
+            var item = document.createElement('div');
+            item.className = 'more-menu-item' + (activeConnectorCategory === cat ? ' active' : '');
+            item.textContent = cat;
+            item.addEventListener('click', function() {
+                setConnectorCategory(cat);
+                moreMenu.classList.remove('show');
+            });
+            moreMenu.appendChild(item);
+        });
+    } else {
+        moreDropdown.style.display = 'none';
+    }
+}
+
+function setConnectorCategory(cat) {
+    activeConnectorCategory = cat;
+    connMruTouch(cat);
+    renderConnectorFilterBar();
+    renderConnectorGrid();
 }
 
+function loadConnectors() {
+    fetch('/api/connectors').then(function(r) { return r.json(); }).then(function(list) {
+        connectorList = list;
+        renderConnectorFilterBar();
+        renderConnectorGrid();
+    });
+}
+
+// --- Connector tooltip ---
+var connTip = document.createElement('div');
+connTip.className = 'conn-tooltip';
+document.body.appendChild(connTip);
+var connTipTimer = null;
+
+function showConnTip(el, text) {
+    clearTimeout(connTipTimer);
+    connTip.textContent = text;
+    connTip.style.display = 'block';
+    connTip.classList.remove('visible');
+    var r = el.getBoundingClientRect();
+    var tw = connTip.offsetWidth;
+    var th = connTip.offsetHeight;
+    // Position below the tile by default
+    var left = r.left + (r.width / 2) - (tw / 2);
+    var top = r.bottom + 6;
+    // Clamp horizontal
+    if (left < 4) left = 4;
+    if (left + tw > window.innerWidth - 4) left = window.innerWidth - tw - 4;
+    // Flip above if it would go off bottom
+    if (top + th > window.innerHeight - 4) {
+        top = r.top - th - 6;
+    }
+    connTip.style.left = left + 'px';
+    connTip.style.top = top + 'px';
+    void connTip.offsetWidth;
+    connTip.classList.add('visible');
+}
+
+function hideConnTip() {
+    clearTimeout(connTipTimer);
+    connTip.classList.remove('visible');
+    connTip.style.display = 'none';
+}
+hideConnTip();
+
 function renderConnectorGrid() {
     var grid = document.getElementById('connectorGrid');
     var searchTerm = (document.getElementById('connectorSearch').value || '').toLowerCase();
     grid.innerHTML = '';
     connectorList.filter(function(c) {
-        if (activeConnectorCategory !== 'All' && c.category !== activeConnectorCategory) return false;
+        if (activeConnectorCategory === 'Enabled') {
+            if (!c.configured) return false;
+        } else if (activeConnectorCategory !== 'All' && c.category !== activeConnectorCategory) {
+            return false;
+        }
         if (searchTerm && c.name.toLowerCase().indexOf(searchTerm) === -1) return false;
         return true;
     }).forEach(function(c) {
@@ -278,6 +565,11 @@ function renderConnectorGrid() {
         tile.className = 'connector-tile' + (c.configured ? ' configured' : '');
         tile.addEventListener('click', function() { openConnectorModal(c.id); });
 
+        tile.addEventListener('mouseenter', function() {
+            connTipTimer = setTimeout(function() { showConnTip(tile, c.description); }, 400);
+        });
+        tile.addEventListener('mouseleave', hideConnTip);
+
         var name = document.createElement('div');
         name.className = 'connector-tile-name';
         name.textContent = c.name;
@@ -300,6 +592,19 @@ function openConnectorModal(id) {
         currentConnectorDetail = detail;
         document.getElementById('connectorModalTitle').textContent = detail.name;
         document.getElementById('connectorModalDesc').textContent = detail.description;
+
+        var onboardingEl = document.getElementById('connectorOnboarding');
+        if (detail.onboarding && detail.onboarding.url) {
+            document.getElementById('connectorOnboardingLink').href = detail.onboarding.url;
+            var stepsOl = document.getElementById('connectorOnboardingSteps');
+            stepsOl.innerHTML = (detail.onboarding.steps || []).map(function(s) {
+                return '<li>' + s + '</li>';
+            }).join('');
+            onboardingEl.style.display = '';
+        } else {
+            onboardingEl.style.display = 'none';
+        }
+
         document.getElementById('connectorEnabled').checked = detail.enabled;
         document.getElementById('connectorRemoveBtn').style.display = (detail.configured || detail.hasKey) ? '' : 'none';
 
@@ -381,8 +686,11 @@ function closeConnectorModal() {
 
 document.getElementById('connectorCancelBtn').addEventListener('click', closeConnectorModal);
 
+var connectorModalMouseDownTarget = null;
+document.getElementById('connectorModal').addEventListener('mousedown', function(e) { connectorModalMouseDownTarget = e.target; });
 document.getElementById('connectorModal').addEventListener('click', function(e) {
-    if (e.target === this) closeConnectorModal();
+    if (e.target === this && connectorModalMouseDownTarget === this) closeConnectorModal();
+    connectorModalMouseDownTarget = null;
 });
 
 document.getElementById('connectorSaveBtn').addEventListener('click', function() {
@@ -454,6 +762,24 @@ document.getElementById('connectorRemoveBtn').addEventListener('click', function
 
 document.getElementById('connectorSearch').addEventListener('input', renderConnectorGrid);
 
+// More dropdown toggle
+document.getElementById('connMoreBtn').addEventListener('click', function(e) {
+    e.stopPropagation();
+    document.getElementById('connMoreMenu').classList.toggle('show');
+});
+document.addEventListener('click', function() {
+    document.getElementById('connMoreMenu').classList.remove('show');
+});
+
+// Resize observer — recalculate visible categories when filter bar resizes
+var connFilterBar = document.getElementById('connectorFilterBar');
+if (connFilterBar && typeof ResizeObserver !== 'undefined') {
+    var connResizeObserver = new ResizeObserver(function() {
+        if (connectorList.length > 0) renderConnectorFilterBar();
+    });
+    connResizeObserver.observe(connFilterBar);
+}
+
 // Detect OAuth success/error from URL params
 var connectedParam = params.get('connected');
 var errorParam = params.get('error');
@@ -474,6 +800,475 @@ if (errorParam) {
     history.replaceState(null, '', cleanUrl2);
 }
 
+// --- Agents logic ---
+var agentList = [], currentAgentId = null, currentAgentSkills = null, currentAgentCapabilities = null;
+var currentAgentType = 'a2a';
+var chatAgentId = null;
+
+function loadAgents() {
+    fetch('/api/agents').then(function(r) { return r.json(); }).then(function(list) {
+        agentList = list;
+        renderAgentList();
+    });
+}
+
+function renderAgentList() {
+    var listEl = document.getElementById('agentList');
+    var emptyState = document.getElementById('agentEmptyState');
+    listEl.innerHTML = '';
+    listEl.style.display = agentList.length === 0 ? 'none' : '';
+    emptyState.style.display = agentList.length === 0 ? '' : 'none';
+
+    agentList.forEach(function(a) {
+        var row = document.createElement('div');
+        row.className = 'agent-row';
+
+        // Status dot (openclaw only)
+        if (a.provider === 'openclaw') {
+            var dot = document.createElement('div');
+            dot.className = 'agent-status-dot ' + (a.connected ? 'connected' : 'disconnected');
+            dot.title = a.connected ? 'Connected' : 'Disconnected';
+            row.appendChild(dot);
+        }
+
+        // Info section
+        var info = document.createElement('div');
+        info.className = 'agent-row-info';
+
+        var nameEl = document.createElement('div');
+        nameEl.className = 'agent-row-name';
+        nameEl.textContent = a.name;
+
+        var descEl = document.createElement('div');
+        descEl.className = 'agent-row-desc';
+        descEl.textContent = a.description || '';
+
+        info.appendChild(nameEl);
+        info.appendChild(descEl);
+        row.appendChild(info);
+
+        // Badge
+        var badge = document.createElement('div');
+        badge.className = 'agent-row-badge';
+        badge.textContent = a.provider === 'openclaw' ? 'OpenClaw' : 'A2A';
+        row.appendChild(badge);
+
+        // Actions
+        var actions = document.createElement('div');
+        actions.className = 'agent-row-actions';
+
+        // Chat or Reconnect button (depending on connection state)
+        var isDisconnected = a.provider === 'openclaw' && a.enabled !== false && !a.connected;
+        var chatBtn = document.createElement('button');
+        chatBtn.className = 'filter-btn';
+        chatBtn.style.fontSize = '12px';
+        chatBtn.style.padding = '4px 10px';
+        if (isDisconnected) {
+            chatBtn.textContent = 'Reconnect';
+            chatBtn.addEventListener('click', (function(agent) {
+                return function(e) {
+                    e.stopPropagation();
+                    chatBtn.disabled = true;
+                    chatBtn.textContent = 'Connecting...';
+                    fetch('/api/agents/' + encodeURIComponent(agent.id) + '/connect', { method: 'POST' })
+                        .then(function() { loadAgents(); })
+                        .catch(function() { chatBtn.disabled = false; chatBtn.textContent = 'Reconnect'; });
+                };
+            })(a));
+        } else {
+            chatBtn.textContent = 'Chat';
+            chatBtn.addEventListener('click', function(e) {
+                e.stopPropagation();
+                openAgentChat(a);
+            });
+        }
+        actions.appendChild(chatBtn);
+
+        // Edit button
+        var editBtn = document.createElement('button');
+        editBtn.className = 'filter-btn';
+        editBtn.textContent = 'Edit';
+        editBtn.style.fontSize = '12px';
+        editBtn.style.padding = '4px 10px';
+        editBtn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            openAgentEditModal(a);
+        });
+        actions.appendChild(editBtn);
+
+        // Enable/disable toggle
+        var toggleLabel = document.createElement('label');
+        toggleLabel.className = 'toggle-switch';
+        var toggleInput = document.createElement('input');
+        toggleInput.type = 'checkbox';
+        toggleInput.checked = a.enabled !== false;
+        toggleInput.addEventListener('click', function(e) { e.stopPropagation(); });
+        toggleInput.addEventListener('change', (function(agentId, inp) {
+            return function() {
+                fetch('/api/agents/' + encodeURIComponent(agentId), {
+                    method: 'PATCH',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ enabled: inp.checked })
+                }).then(function() { loadAgents(); });
+            };
+        })(a.id, toggleInput));
+        var toggleSlider = document.createElement('span');
+        toggleSlider.className = 'toggle-slider';
+        toggleLabel.appendChild(toggleInput);
+        toggleLabel.appendChild(toggleSlider);
+        actions.appendChild(toggleLabel);
+
+        row.appendChild(actions);
+        listEl.appendChild(row);
+    });
+}
+
+// --- Agent quick chat ---
+function openAgentChat(agent) {
+    chatAgentId = agent.id;
+    document.getElementById('agentChatTitle').textContent = 'Chat with ' + agent.name;
+    document.getElementById('agentChatMessages').innerHTML = '';
+    document.getElementById('agentChatInput').value = '';
+    var panel = document.getElementById('agentChatPanel');
+    panel.classList.add('open');
+    document.getElementById('agentChatInput').focus();
+}
+
+function closeAgentChat() {
+    chatAgentId = null;
+    document.getElementById('agentChatPanel').classList.remove('open');
+}
+
+function addChatMsg(role, text) {
+    var msgs = document.getElementById('agentChatMessages');
+    var div = document.createElement('div');
+    div.className = 'agent-chat-msg ' + role;
+    div.textContent = text;
+    msgs.appendChild(div);
+    msgs.scrollTop = msgs.scrollHeight;
+    return div;
+}
+
+function sendAgentChatMessage() {
+    if (!chatAgentId) return;
+    var input = document.getElementById('agentChatInput');
+    var message = input.value.trim();
+    if (!message) return;
+
+    input.value = '';
+    addChatMsg('user', message);
+
+    var sendBtn = document.getElementById('agentChatSendBtn');
+    sendBtn.disabled = true;
+    sendBtn.textContent = '...';
+
+    // Check if agent supports streaming
+    var agent = agentList.find(function(a) { return a.id === chatAgentId; });
+    var supportsStreaming = agent && agent.capabilities && agent.capabilities.streaming;
+
+    if (supportsStreaming) {
+        // Use streaming
+        var responseDiv = addChatMsg('agent', '');
+        var responseText = '';
+
+        fetch('/api/agents/' + encodeURIComponent(chatAgentId) + '/stream', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message: message })
+        }).then(function(res) {
+            if (!res.ok) return res.json().then(function(d) { throw new Error(d.error || 'Send failed'); });
+            var reader = res.body.getReader();
+            var decoder = new TextDecoder();
+            var buffer = '';
+            function pump() {
+                return reader.read().then(function(result) {
+                    if (result.done) { sendBtn.disabled = false; sendBtn.textContent = 'Send'; return; }
+                    buffer += decoder.decode(result.value, { stream: true });
+                    var lines = buffer.split('\n');
+                    buffer = lines.pop() || '';
+                    for (var i = 0; i < lines.length; i++) {
+                        var line = lines[i];
+                        if (line.indexOf('data: ') === 0) {
+                            var data = line.substring(6);
+                            if (data === '[DONE]') { sendBtn.disabled = false; sendBtn.textContent = 'Send'; return; }
+                            try {
+                                var evt = JSON.parse(data);
+                                if (evt.kind === 'text' && evt.data) {
+                                    responseText += evt.data;
+                                    responseDiv.textContent = responseText;
+                                    document.getElementById('agentChatMessages').scrollTop = document.getElementById('agentChatMessages').scrollHeight;
+                                } else if (evt.kind === 'error') {
+                                    addChatMsg('error', 'Error: ' + (evt.data || 'Unknown error'));
+                                    sendBtn.disabled = false; sendBtn.textContent = 'Send';
+                                    return;
+                                }
+                            } catch (e) {}
+                        }
+                    }
+                    return pump();
+                });
+            }
+            return pump();
+        }).catch(function(err) {
+            if (!responseText) responseDiv.remove();
+            addChatMsg('error', 'Error: ' + err.message);
+            sendBtn.disabled = false; sendBtn.textContent = 'Send';
+        });
+    } else {
+        // Non-streaming
+        addChatMsg('status', 'Waiting for response...');
+        fetch('/api/agents/' + encodeURIComponent(chatAgentId) + '/send', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ message: message })
+        }).then(function(r) {
+            if (!r.ok) return r.json().then(function(d) { throw new Error(d.error || 'Send failed'); });
+            return r.json();
+        }).then(function(result) {
+            // Remove "waiting" status
+            var msgs = document.getElementById('agentChatMessages');
+            var last = msgs.lastElementChild;
+            if (last && last.classList.contains('status')) last.remove();
+            addChatMsg('agent', result.text || JSON.stringify(result.raw, null, 2));
+        }).catch(function(err) {
+            var msgs = document.getElementById('agentChatMessages');
+            var last = msgs.lastElementChild;
+            if (last && last.classList.contains('status')) last.remove();
+            addChatMsg('error', 'Error: ' + err.message);
+        }).finally(function() {
+            sendBtn.disabled = false; sendBtn.textContent = 'Send';
+        });
+    }
+}
+
+document.getElementById('agentChatClose').addEventListener('click', closeAgentChat);
+document.getElementById('agentChatSendBtn').addEventListener('click', sendAgentChatMessage);
+document.getElementById('agentChatInput').addEventListener('keydown', function(e) {
+    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendAgentChatMessage(); }
+});
+
+function setAgentType(type) {
+    currentAgentType = type;
+    document.getElementById('agentTypeA2A').className = 'filter-btn' + (type === 'a2a' ? ' active' : '');
+    document.getElementById('agentTypeOpenClaw').className = 'filter-btn' + (type === 'openclaw' ? ' active' : '');
+    document.getElementById('agentTokenGroup').style.display = type === 'openclaw' ? '' : 'none';
+    document.getElementById('agentSessionKeyGroup').style.display = type === 'openclaw' ? '' : 'none';
+    document.getElementById('agentSshTunnelGroup').style.display = type === 'openclaw' ? '' : 'none';
+    document.getElementById('agentUrlHint').textContent = type === 'openclaw'
+        ? 'Enter the gateway HTTP URL and token, then click Discover to verify connectivity.'
+        : 'Enter a URL and click Discover to auto-fill from the agent card, or fill in the fields manually.';
+}
+
+function resetAgentModal() {
+    currentAgentId = null;
+    currentAgentSkills = null;
+    currentAgentCapabilities = null;
+    setAgentType('a2a');
+    document.getElementById('agentUrl').value = '';
+    document.getElementById('agentToken').value = '';
+    document.getElementById('agentSessionKey').value = '';
+    document.getElementById('agentName').value = '';
+    document.getElementById('agentDescription').value = '';
+    document.getElementById('agentSkillsPreview').style.display = 'none';
+    document.getElementById('agentSkillsList').innerHTML = '';
+    document.getElementById('agentRemoveBtn').style.display = 'none';
+    // Reset SSH tunnel fields
+    document.getElementById('agentSshTunnelEnabled').checked = false;
+    document.getElementById('agentSshCommand').value = '';
+    document.getElementById('agentSshPassword').value = '';
+    document.getElementById('agentSshTunnelFields').style.display = 'none';
+    document.getElementById('agentSshTunnelArrow').innerHTML = '&#9654;';
+}
+
+function openAgentAddModal() {
+    resetAgentModal();
+    document.getElementById('agentModalTitle').textContent = 'Add Agent';
+    document.getElementById('agentModal').style.display = 'flex';
+}
+
+function openAgentEditModal(agent) {
+    resetAgentModal();
+    currentAgentId = agent.id;
+    setAgentType(agent.provider || 'a2a');
+    document.getElementById('agentModalTitle').textContent = 'Edit Agent';
+    document.getElementById('agentUrl').value = agent.url || '';
+    document.getElementById('agentName').value = agent.name || '';
+    document.getElementById('agentDescription').value = agent.description || '';
+    // Token is stripped by the server — show placeholder in edit mode for openclaw
+    if (agent.provider === 'openclaw') {
+        document.getElementById('agentToken').placeholder = '(token saved — leave blank to keep)';
+        document.getElementById('agentSessionKey').value = agent.sessionKey || '';
+        // Populate SSH tunnel fields (password is stripped by server)
+        if (agent.sshTunnel) {
+            document.getElementById('agentSshTunnelEnabled').checked = !!agent.sshTunnel.enabled;
+            document.getElementById('agentSshCommand').value = agent.sshTunnel.command || '';
+            document.getElementById('agentSshPassword').placeholder = '(password saved — leave blank to keep)';
+            if (agent.sshTunnel.enabled) {
+                document.getElementById('agentSshTunnelFields').style.display = '';
+                document.getElementById('agentSshTunnelArrow').innerHTML = '&#9660;';
+            }
+        }
+    }
+    document.getElementById('agentRemoveBtn').style.display = '';
+    document.getElementById('agentModal').style.display = 'flex';
+}
+
+function closeAgentModal() {
+    document.getElementById('agentModal').style.display = 'none';
+    resetAgentModal();
+}
+
+function renderSkillsList(skills) {
+    var container = document.getElementById('agentSkillsList');
+    var wrapper = document.getElementById('agentSkillsPreview');
+    if (!skills || skills.length === 0) {
+        wrapper.style.display = 'none';
+        container.innerHTML = '';
+        return;
+    }
+    wrapper.style.display = '';
+    container.innerHTML = skills.map(function(s) {
+        var label = s.name || s.id || 'Skill';
+        var desc = s.description ? ' — ' + s.description : '';
+        return '<span style="display:inline-block;padding:2px 8px;margin:2px;border-radius:8px;background:rgba(138,43,226,.15);font-size:11px;">' + label + desc + '</span>';
+    }).join('');
+}
+
+document.getElementById('agentTypeA2A').addEventListener('click', function() { setAgentType('a2a'); });
+document.getElementById('agentTypeOpenClaw').addEventListener('click', function() { setAgentType('openclaw'); });
+
+// SSH Tunnel collapsible section
+document.getElementById('agentSshTunnelToggleHeader').addEventListener('click', function() {
+    var fields = document.getElementById('agentSshTunnelFields');
+    var arrow = document.getElementById('agentSshTunnelArrow');
+    var isOpen = fields.style.display !== 'none';
+    fields.style.display = isOpen ? 'none' : '';
+    arrow.innerHTML = isOpen ? '&#9654;' : '&#9660;';
+});
+document.getElementById('agentSshTunnelEnabled').addEventListener('change', function() {
+    if (this.checked) {
+        document.getElementById('agentSshTunnelFields').style.display = '';
+        document.getElementById('agentSshTunnelArrow').innerHTML = '&#9660;';
+    }
+});
+
+document.getElementById('addAgentBtn').addEventListener('click', function(e) {
+    e.stopPropagation();
+    openAgentAddModal();
+});
+document.getElementById('agentCancelBtn').addEventListener('click', closeAgentModal);
+
+var agentModalMouseDownTarget = null;
+document.getElementById('agentModal').addEventListener('mousedown', function(e) { agentModalMouseDownTarget = e.target; });
+document.getElementById('agentModal').addEventListener('click', function(e) {
+    if (e.target === this && agentModalMouseDownTarget === this) closeAgentModal();
+    agentModalMouseDownTarget = null;
+});
+
+document.getElementById('agentDiscoverBtn').addEventListener('click', function() {
+    var url = document.getElementById('agentUrl').value.trim();
+    if (!url) return;
+    var btn = this;
+    btn.disabled = true;
+    btn.textContent = 'Discovering...';
+
+    var body = { url: url, type: currentAgentType };
+    if (currentAgentType === 'openclaw') {
+        var token = document.getElementById('agentToken').value.trim();
+        if (!token) { alert('Token is required for OpenClaw discovery.'); btn.disabled = false; btn.textContent = 'Discover'; return; }
+        body.token = token;
+    }
+
+    fetch('/api/agents/discover', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+    }).then(function(r) {
+        if (!r.ok) return r.json().then(function(d) { throw new Error(d.error || 'Discovery failed'); });
+        return r.json();
+    }).then(function(result) {
+        var nameEl = document.getElementById('agentName');
+        var descEl = document.getElementById('agentDescription');
+        if (!nameEl.value.trim() && result.name) nameEl.value = result.name;
+        if (!descEl.value.trim() && result.description) descEl.value = result.description;
+        if (result.skills) {
+            currentAgentSkills = result.skills;
+            renderSkillsList(currentAgentSkills);
+        }
+        if (result.capabilities) {
+            currentAgentCapabilities = result.capabilities;
+        }
+        if (currentAgentType === 'openclaw' && result.verified) {
+            alert('Gateway verified successfully!');
+        }
+    }).catch(function(err) {
+        alert('Discovery failed: ' + err.message);
+    }).finally(function() {
+        btn.disabled = false;
+        btn.textContent = 'Discover';
+    });
+});
+
+document.getElementById('agentSaveBtn').addEventListener('click', function() {
+    var name = document.getElementById('agentName').value.trim();
+    var url = document.getElementById('agentUrl').value.trim();
+    var description = document.getElementById('agentDescription').value.trim();
+    if (!name) { alert('Name is required.'); return; }
+    if (!url) { alert('Agent URL is required.'); return; }
+    if (!description) { alert('Description is required — explain what this agent does so pages know when to use it.'); return; }
+
+    var body = {
+        url: url,
+        name: name,
+        description: description,
+        enabled: true,
+        provider: currentAgentType
+    };
+    if (currentAgentId) body.id = currentAgentId;
+    if (currentAgentSkills) body.skills = currentAgentSkills;
+    if (currentAgentCapabilities) body.capabilities = currentAgentCapabilities;
+
+    // Include token for openclaw agents
+    if (currentAgentType === 'openclaw') {
+        var token = document.getElementById('agentToken').value.trim();
+        if (token) body.token = token;
+        // For new openclaw agents, token is required
+        if (!token && !currentAgentId) { alert('Token is required for OpenClaw agents.'); return; }
+        // Set streaming capability by default for openclaw
+        if (!body.capabilities) body.capabilities = { streaming: true };
+        var sessionKey = document.getElementById('agentSessionKey').value.trim();
+        if (sessionKey) body.sessionKey = sessionKey;
+
+        // SSH tunnel config
+        var sshEnabled = document.getElementById('agentSshTunnelEnabled').checked;
+        var sshCommand = document.getElementById('agentSshCommand').value.trim();
+        var sshPassword = document.getElementById('agentSshPassword').value;
+        if (sshEnabled || sshCommand) {
+            body.sshTunnel = {
+                enabled: sshEnabled,
+                command: sshCommand
+            };
+            // Only include password if provided (otherwise server preserves existing)
+            if (sshPassword) body.sshTunnel.password = sshPassword;
+        }
+    }
+
+    fetch('/api/agents', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+    }).then(function(r) {
+        if (r.ok) { closeAgentModal(); loadAgents(); }
+    });
+});
+
+document.getElementById('agentRemoveBtn').addEventListener('click', function() {
+    if (!currentAgentId) return;
+    fetch('/api/agents/' + encodeURIComponent(currentAgentId), { method: 'DELETE' }).then(function(r) {
+        if (r.ok) { closeAgentModal(); loadAgents(); }
+    });
+});
+
 // --- Save logic ---
 function saveAllSettings() {
     var builderApiKey = document.getElementById('serviceApiKey-builder').value;
@@ -574,7 +1369,8 @@ document.getElementById('provider-chat').addEventListener('change', function() {
 // --- Provider signup instructions ---
 var providerInstructions = {
     'Anthropic': 'Sign up at <a href="https://platform.claude.com" target="_blank">platform.claude.com</a>, then get your key at <a href="https://console.anthropic.com/settings/keys" target="_blank">console.anthropic.com/settings/keys</a>.',
-    'OpenAI': 'Sign up at <a href="https://auth.openai.com/create-account" target="_blank">auth.openai.com/create-account</a>, then get your key at <a href="https://platform.openai.com/api-keys" target="_blank">platform.openai.com/api-keys</a>.'
+    'OpenAI': 'Sign up at <a href="https://auth.openai.com/create-account" target="_blank">auth.openai.com/create-account</a>, then get your key at <a href="https://platform.openai.com/api-keys" target="_blank">platform.openai.com/api-keys</a>.',
+    'FireworksAI': 'Sign up at <a href="https://fireworks.ai" target="_blank">fireworks.ai</a>, then get your key at <a href="https://fireworks.ai/account/api-keys" target="_blank">fireworks.ai/account/api-keys</a>.'
 };
 
 // --- "More settings" toggle state (works for all users) ---
@@ -761,6 +1557,7 @@ Promise.all([
     document.getElementById('theme').value = currentTheme;
 
     loadConnectors();
+    loadAgents();
 
     var isFirstRun = params.get('firstRun') === '1';
 
@@ -804,6 +1601,7 @@ Promise.all([
         // Disable other accordion tabs
         document.querySelector('.accordion-section[data-section="general"]').classList.add('disabled');
         document.querySelector('.accordion-section[data-section="connectors"]').classList.add('disabled');
+        document.querySelector('.accordion-section[data-section="agents"]').classList.add('disabled');
 
         // Clear any existing values so wizard starts fresh
         document.getElementById('provider-builder').value = '';