fix(settings): align model picker and restore metadata text

design-system/packages/ui/src/components/Combobox/Combobox.module.css

@@ -273,6 +273,10 @@
     padding: var(--bf-space-1);
   }
 
+  .searchField {
+    inline-size: 100%;
+  }
+
   .listbox {
     flex: 1 1 auto;
     min-block-size: 0;

design-system/packages/ui/src/components/Combobox/Combobox.tsx

@@ -502,6 +502,7 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
           aria-expanded={resolvedOpen}
           aria-label={designSystem.messages.searchOptions}
           autoComplete="off"
+          className={styles.searchField}
           clearLabel={designSystem.messages.clearSelection}
           onClear={() => {
             setQuery("");

design-system/packages/ui/tests/combobox.test.mjs

@@ -63,6 +63,10 @@ test("Combobox owns keyboard selection, IME safety, filtering, and custom values
 });
 
 test("Combobox styling uses public field, overlay, action, and motion tokens", async () => {
+  const source = await readFile(
+    new URL("../src/components/Combobox/Combobox.tsx", import.meta.url),
+    "utf8",
+  );
   const styles = await readFile(
     new URL("../src/components/Combobox/Combobox.module.css", import.meta.url),
     "utf8",
@@ -74,6 +78,8 @@ test("Combobox styling uses public field, overlay, action, and motion tokens", a
   assert.match(styles, /--bf-shadow-menu/);
   assert.match(styles, /position:\s*fixed/);
   assert.match(styles, /z-index:\s*var\(--bf-layer-popover\)/);
+  assert.match(source, /className=\{styles\.searchField\}/);
+  assert.match(styles, /\.searchField\s*\{[^}]*inline-size:\s*100%/);
   assert.doesNotMatch(styles, /data-popover-mode/);
   assert.doesNotMatch(styles, /#[0-9a-f]{3,8}/i);
 });

src/web-ui/src/infrastructure/config/components/ModelSettingsPage.presentation.test.ts

@@ -0,0 +1,15 @@
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+
+const source = readFileSync(
+  fileURLToPath(new URL('./ModelSettingsPage.tsx', import.meta.url)),
+  'utf8',
+);
+
+describe('ModelSettingsPage presentation', () => {
+  it('uses intentional separators instead of Unicode replacement characters', () => {
+    expect(source).not.toContain('\uFFFD');
+    expect(source.match(/\{' · '\}/g)).toHaveLength(2);
+  });
+});

src/web-ui/src/infrastructure/config/components/ModelSettingsPage.tsx

@@ -255,7 +255,7 @@ function dedupeSelectedModelDraftsByModelName(drafts: SelectedModelDraft[]): Sel
 
 /**
  * Compute the stored request URL from a base URL and provider format.
- * For gemini, stores the bare base (no /v1beta/models/... suffix) �
+ * For Gemini, stores the bare base without the /v1beta/models/... suffix;
  * the backend dynamically appends /v1beta/models/{model}:streamGenerateContent?alt=sse.
  */
 function resolveRequestUrl(baseUrl: string, provider: string, _modelName = ''): string {
@@ -2276,9 +2276,9 @@ const ModelSettingsPage: React.FC = () => {
                     <div className="bitfun-model-settings__selected-model-head-bottom">
                       <span className="bitfun-model-settings__selected-model-summary">
                         {categoryLabel}
-                        {' � '}
+                        {' · '}
                         {formatTokenCountShort(draft.contextWindow)} ctx
-                        {' � '}
+                        {' · '}
                         {formatReasoningSummary(draft, reasoningProjection)}
                       </span>
                     </div>
@@ -2496,7 +2496,7 @@ const ModelSettingsPage: React.FC = () => {
                           }));
                         }}
                         placeholder={t('form.baseUrl')}
-                        options={currentTemplate.baseUrlOptions.map(opt => ({ label: opt.url, value: opt.url, description: `${opt.format.toUpperCase()} � ${opt.note}` }))}
+                        options={currentTemplate.baseUrlOptions.map(opt => ({ label: opt.url, value: opt.url, description: `${opt.format.toUpperCase()} · ${opt.note}` }))}
                         size="sm"
                       />
                     )}
@@ -3609,7 +3609,7 @@ const ModelSettingsPage: React.FC = () => {
           </ConfigPageRow>
           <ConfigPageRow label={t('modelsDevCatalog.cachePath')} align="center" wide>
             <div className="bitfun-model-settings__catalog-path">
-              <code title={modelsDevStatus?.cache_path}>{modelsDevStatus?.cache_path || '�'}</code>
+              <code title={modelsDevStatus?.cache_path}>{modelsDevStatus?.cache_path || '—'}</code>
               <Tooltip content={t('modelsDevCatalog.reveal')}>
                 <IconButton
                   aria-label={t('modelsDevCatalog.reveal')}
@@ -3627,7 +3627,7 @@ const ModelSettingsPage: React.FC = () => {
           </ConfigPageRow>
           <ConfigPageRow label={t('modelsDevCatalog.revision')} align="center">
             <code className="bitfun-model-settings__catalog-revision" title={modelsDevStatus?.revision}>
-              {modelsDevStatus?.revision ? `${modelsDevStatus.revision.slice(0, 12)}�` : '�'}
+              {modelsDevStatus?.revision ? `${modelsDevStatus.revision.slice(0, 12)}…` : '—'}
             </code>
           </ConfigPageRow>
           <div className="bitfun-model-settings__catalog-offline-help" role="note">
@@ -3691,7 +3691,7 @@ const ModelSettingsPage: React.FC = () => {
             <ScrollArea className="bitfun-model-settings__subscription-logout-list">
               <ul>
                 {subscriptionLogoutRequest.affectedModels.map((model) => (
-                  <li key={model.id}>{model.name} � {model.model_name}</li>
+                  <li key={model.id}>{model.name} · {model.model_name}</li>
                 ))}
               </ul>
             </ScrollArea>