fix(ai-providers): avoid nested model filter controls

src/components/providers/OpenAISection/OpenAISection.tsx

@@ -360,45 +360,50 @@ export function OpenAISection({
           className={styles.modelMultiSelectWrapper}
           ref={isFloating ? floatingDropdownRef : topDropdownRef}
         >
-          <button
-            type="button"
-            className={styles.modelSelectedTags}
-            onClick={toggleDropdown}
-            disabled={actionsDisabled}
-          >
+          <div className={styles.modelSelectedTags}>
             {selectedModels.size === 0 ? (
-              <span className={styles.modelSelectPlaceholder}>
-                {t('ai_providers.model_search_placeholder')}
-              </span>
+              <button
+                type="button"
+                className={styles.modelSelectButton}
+                onClick={toggleDropdown}
+                disabled={actionsDisabled}
+              >
+                <span className={styles.modelSelectPlaceholder}>
+                  {t('ai_providers.model_search_placeholder')}
+                </span>
+                <span className={styles.modelSelectArrow}>▼</span>
+              </button>
             ) : (
               <>
                 {Array.from(selectedModels).map((name) => (
                   <span key={`top-${name}`} className={styles.modelFilterTag}>
                     <span className={styles.modelTagName}>{name}</span>
-                    <span
-                      role="button"
-                      tabIndex={0}
+                    <button
+                      type="button"
                       className={styles.modelTagRemove}
+                      disabled={actionsDisabled}
+                      aria-label={`${t('common.delete')} ${name}`}
                       onClick={(e) => {
                         e.stopPropagation();
                         toggleModelSelection(name);
                       }}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          toggleModelSelection(name);
-                        }
-                      }}
                     >
                       ×
-                    </span>
+                    </button>
                   </span>
                 ))}
+                <button
+                  type="button"
+                  className={styles.modelSelectArrowButton}
+                  onClick={toggleDropdown}
+                  disabled={actionsDisabled}
+                  aria-label={t('ai_providers.model_search_placeholder')}
+                >
+                  <span className={styles.modelSelectArrow}>▼</span>
+                </button>
               </>
             )}
-            <span className={styles.modelSelectArrow}>▼</span>
-          </button>
+          </div>
 
           {isActiveToolbar && isDropdownOpen && (
             <div className={dropdownClassName} style={{ maxHeight: `${dropdownLayout.maxHeight}px` }}>

src/pages/AiProvidersPage.module.scss

@@ -210,7 +210,6 @@
   border: 1px solid var(--border-primary);
   border-radius: 6px;
   background: var(--bg-secondary);
-  cursor: pointer;
   transition: all 0.15s ease;
   min-height: 32px;
 
@@ -220,6 +219,24 @@
   }
 }
 
+.modelSelectButton {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
 .modelSelectPlaceholder {
   font-size: 13px;
   color: var(--text-tertiary);
@@ -267,6 +284,40 @@
   &:hover {
     background: var(--bg-tertiary);
   }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
+.modelSelectArrowButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-tertiary);
+  cursor: pointer;
+  flex-shrink: 0;
+
+  &:hover {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .modelSelectArrow {
+    margin-left: 0;
+  }
 }
 
 .modelSelectArrow {