Merge remote-tracking branch 'origin/master' into worktree/custom-deepseek-models

# Conflicts:
#	packages/client/ui-models/src/client/ModelsSection.module.css
#	packages/client/ui-models/src/client/ModelsSection.tsx

packages/client/ui-models/src/client/ModelsSection.module.css

@@ -40,7 +40,8 @@
 
 .rows {
   list-style: none;
-  margin: 0;
+  /* Extra air between the title/intro block and the first provider card. */
+  margin: 12px 0 0;
   padding: 0;
   display: flex;
   flex-direction: column;
@@ -120,6 +121,10 @@
   background: var(--dsw-alias-interactive-bg-hover);
 }
 
+.secondaryButton:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover-solid);
+}
+
 .dangerButton {
   box-sizing: border-box;
   display: inline-flex;
@@ -260,6 +265,9 @@
 }
 
 .addButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   align-self: flex-start;
 }
 
@@ -514,6 +522,20 @@ select.input {
   cursor: default;
 }
 
+/* Select variant of .input: replaces the OS arrow (which sits flush against
+   the right edge) with the shared 12px chevron inset like the composer's
+   .select chips; the right pad reserves its cell. */
+.selectInput {
+  appearance: none;
+  padding-right: 32px;
+  /* Data-URI SVGs cannot resolve CSS variables; #81858C is the caption gray
+     shared by both themes. */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2381858C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  background-size: 12px 12px;
+}
+
 .error {
   margin: 0;
   font-size: 12px;

packages/client/ui-models/src/client/ModelsSection.tsx

@@ -245,7 +245,7 @@ function Loaded({ injected }: { injected: ModelsSectionInjected }): ReactNode {
               <div className={styles['field']}>
                 <span className={styles['fieldLabel']}>{t('provider')}</span>
                 <select
-                  className={styles['input']}
+                  className={`${styles['input']} ${styles['selectInput']}`}
                   value={addTarget.provider}
                   aria-label={t('provider')}
                   onChange={(event) => {
@@ -287,6 +287,7 @@ function Loaded({ injected }: { injected: ModelsSectionInjected }): ReactNode {
                 setEditing(targetOf(first))
               }}
             >
+              {/* Same glyph as the composer's attach button. */}
               <IconPlusOutline16 size={14} />
               {t('add')}
             </button>

packages/client/ui-models/src/client/ProviderEditor.tsx

@@ -302,7 +302,7 @@ export function ProviderEditor(props: ProviderEditorProps): ReactNode {
             <div className={styles['field']}>
               <span className={styles['fieldLabel']}>{t('effort')}</span>
               <select
-                className={styles['input']}
+                className={`${styles['input']} ${styles['selectInput']}`}
                 value={stringAt(draft, effortField) ?? ''}
                 aria-label={t('effort')}
                 disabled={disabled}