Selects: our chevron in every engine

piweb/hf-design.patch

@@ -6571,7 +6571,7 @@ index 79c8282..97731f1 100644
      lang: "en",
      icons: [
 diff --git a/app/settings.css b/app/settings.css
-index f0e2e95..52a7d18 100644
+index f0e2e95..4d4f447 100644
 --- a/app/settings.css
 +++ b/app/settings.css
 @@ -35,14 +35,15 @@
@@ -8365,7 +8365,7 @@ index f0e2e95..52a7d18 100644
    background: var(--bg-panel);
    color: var(--text-muted);
    font-family: var(--font-mono);
-@@ -2256,9 +2461,8 @@
+@@ -2256,27 +2461,14 @@
    min-width: 0;
    height: 32px;
    padding: 0 10px;
@@ -8377,7 +8377,25 @@ index f0e2e95..52a7d18 100644
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
-@@ -2350,10 +2554,9 @@ select.mcp-add-input {
+   outline: none;
+ }
+ 
+-/* macOS draws the native arrow against the border, ignoring the padding: a chevron of
+-   our own, in the theme's dim text color, as far from the right edge as the text is from the left. */
+-select.mcp-add-input {
+-  appearance: none;
+-  padding-right: 30px;
+-  background-image:
+-    linear-gradient(45deg, transparent 40%, var(--text-dim) 40%, var(--text-dim) 60%, transparent 60%),
+-    linear-gradient(-45deg, transparent 40%, var(--text-dim) 40%, var(--text-dim) 60%, transparent 60%);
+-  background-size: 5px 5px;
+-  background-position: right 15px center, right 10px center;
+-  background-repeat: no-repeat;
+-}
+ 
+ .mcp-add-toggle {
+   display: flex;
+@@ -2350,10 +2542,9 @@ select.mcp-add-input {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
@@ -8391,7 +8409,7 @@ index f0e2e95..52a7d18 100644
  }
  
  /* Focus moves to the dialog itself when it opens (tabIndex -1); it is not a control, so no ring. */
-@@ -2366,7 +2569,7 @@ select.mcp-add-input {
+@@ -2366,7 +2557,7 @@ select.mcp-add-input {
    flex: 1 1 auto;
    gap: 12px;
    min-height: 0;
@@ -8400,7 +8418,7 @@ index f0e2e95..52a7d18 100644
    overflow: auto;
    overscroll-behavior: contain;
  }
-@@ -2399,7 +2602,7 @@ select.mcp-add-input {
+@@ -2399,7 +2590,7 @@ select.mcp-add-input {
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
@@ -8409,7 +8427,7 @@ index f0e2e95..52a7d18 100644
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-mono);
-@@ -2417,7 +2620,7 @@ select.mcp-add-input {
+@@ -2417,7 +2608,7 @@ select.mcp-add-input {
  .project-trust-error {
    flex-shrink: 0;
    max-height: 30vh;
@@ -8418,7 +8436,7 @@ index f0e2e95..52a7d18 100644
    overflow: auto;
    color: #ef4444;
    font-size: 12px;
-@@ -2437,19 +2640,20 @@ select.mcp-add-input {
+@@ -2437,19 +2628,20 @@ select.mcp-add-input {
    flex-shrink: 0;
    justify-content: flex-end;
    gap: 8px;
@@ -8446,7 +8464,7 @@ index f0e2e95..52a7d18 100644
  }
  
  .project-trust-button:disabled {
-@@ -2457,10 +2661,8 @@ select.mcp-add-input {
+@@ -2457,10 +2649,8 @@ select.mcp-add-input {
  }
  
  .project-trust-button.is-primary {
@@ -8459,7 +8477,7 @@ index f0e2e95..52a7d18 100644
  }
  
  .project-trust-button.is-primary:disabled {
-@@ -2534,7 +2736,7 @@ select.mcp-add-input {
+@@ -2534,7 +2724,7 @@ select.mcp-add-input {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border);
@@ -8468,7 +8486,7 @@ index f0e2e95..52a7d18 100644
    background: var(--bg);
  }
  
-@@ -2556,7 +2758,7 @@ select.mcp-add-input {
+@@ -2556,7 +2746,7 @@ select.mcp-add-input {
  .project-trust-mcp-tag {
    flex-shrink: 0;
    padding: 1px 5px;
@@ -8477,7 +8495,7 @@ index f0e2e95..52a7d18 100644
    background: rgba(120, 120, 120, 0.12);
    color: var(--text-dim);
    font-size: 10px;
-@@ -2577,7 +2779,7 @@ select.mcp-add-input {
+@@ -2577,7 +2767,7 @@ select.mcp-add-input {
    display: inline-block;
    margin: 2px 4px 0 0;
    padding: 0 4px;
@@ -10769,10 +10787,10 @@ index 0b8f66a..9a60b64 100644
  .sidebar-tool-button.is-active,
 diff --git a/app/ui.css b/app/ui.css
 new file mode 100644
-index 0000000..bf28dc3
+index 0000000..32e2abf
 --- /dev/null
 +++ b/app/ui.css
-@@ -0,0 +1,901 @@
+@@ -0,0 +1,935 @@
 +/* The shared components on Base UI (components/ui/*): menus, tooltips,
 +   popovers and the composer's suggestion list. Popups are portaled to <body>,
 +   so they stack by the positioner's z-index, above every pane. */
@@ -11674,6 +11692,40 @@ index 0000000..bf28dc3
 +}
 +/* Quiet, on the left, its icon on the folders' column. */
 +.directory-picker-new { margin-right: auto; padding-left: var(--popup-row-pad); }
++
++/* ---------------------------------------------------------------- selects
++   components/ui/select.tsx: a native select with Carbon's 12px chevron instead of the
++   engine's arrow (Chromium's sat 3px from the edge whatever the padding, after 4.5px of
++   its own before the text; Firefox and Safari placed theirs elsewhere). The chevron's ink
++   mirrors the text's padding (--select-pad; its ink starts 2.25px inside its box, the
++   text's 0.75px past the padding) and starts 6.25px after the text, as in the menu triggers.
++   The select keeps its own colours and border; the padding is set by the component. */
++.ui-select {
++  position: relative;
++  display: inline-flex;
++  flex: none;
++  min-width: 0;
++  max-width: 100%;
++  vertical-align: middle;
++}
++.ui-select.is-fill { display: flex; width: 100%; }
++.ui-select > select {
++  -webkit-appearance: none;
++  appearance: none;
++  flex: 1 1 auto;
++  min-width: 0;
++  cursor: pointer;
++}
++.ui-select > select:disabled { cursor: default; }
++.ui-select-chevron {
++  position: absolute;
++  top: 50%;
++  right: calc(var(--select-pad, 10px) + var(--select-border, 0px) - 1.5px);
++  color: var(--text-dim);
++  transform: translateY(-50%);
++  pointer-events: none;
++}
++.ui-select:has(> select:disabled) > .ui-select-chevron { opacity: 0.45; }
 diff --git a/components/AgentSessionPanel.tsx b/components/AgentSessionPanel.tsx
 index 8d51f3c..61fcf9e 100644
 --- a/components/AgentSessionPanel.tsx
@@ -11793,19 +11845,20 @@ index 8d51f3c..61fcf9e 100644
                }}
              />
 diff --git a/components/AgentsConfig.tsx b/components/AgentsConfig.tsx
-index 861a1c6..d5d466e 100644
+index 861a1c6..efd7e87 100644
 --- a/components/AgentsConfig.tsx
 +++ b/components/AgentsConfig.tsx
-@@ -38,6 +38,8 @@ import {
+@@ -38,6 +38,9 @@ import {
  } from "./SettingsUi";
  import { ModelSelector } from "./ModelSelector";
  import { projectTrustReloadKey } from "./settings-ui-helpers";
 +import { CarbonIcon } from "./CarbonIcon";
 +import * as Carbon from "./carbon/icons";
++import { NativeSelect } from "./ui/select";
  
  const TOOL_OPTIONS = ["read", "bash", "edit", "write", "grep", "find", "ls"];
  const THINKING_OPTIONS = ["", "off", "minimal", "low", "medium", "high", "xhigh", "max"] as const;
-@@ -67,7 +69,7 @@ const inputStyle: CSSProperties = {
+@@ -67,7 +70,7 @@ const inputStyle: CSSProperties = {
    height: 34,
    padding: "0 9px",
    border: "1px solid var(--border)",
@@ -11814,7 +11867,43 @@ index 861a1c6..d5d466e 100644
    background: "var(--bg)",
    color: "var(--text)",
    fontSize: 12,
-@@ -727,9 +729,7 @@ export function AgentsConfig({
+@@ -662,17 +665,20 @@ export function AgentsConfig({
+ 
+                   <Field label={t("agents.codemode")}>
+                     <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+-                      <select
++                      <NativeSelect
++                        pad={9}
++                        border={1}
++                        wrapperStyle={{ alignSelf: "flex-start" }}
+                         aria-label={t("agents.codemode")}
+                         value={draft.codemode ?? "off"}
+                         disabled={disabled}
+                         onChange={(event) => update("codemode", event.target.value as EditableProfile["codemode"])}
+-                        style={{ ...controlStyle, width: "auto", minWidth: 180, alignSelf: "flex-start" }}
++                        style={{ ...controlStyle, width: "auto", minWidth: 180 }}
+                       >
+                         <option value="inherit">{t("agents.codemode.inherit")}</option>
+                         <option value="on">{t("agents.codemode.on")}</option>
+                         <option value="off">{t("agents.codemode.off")}</option>
+-                      </select>
++                      </NativeSelect>
+                       <span style={{ color: "var(--text-dim)", fontSize: 11, lineHeight: 1.4 }}>
+                         {t("agents.codemodeHint")}
+                       </span>
+@@ -700,9 +706,9 @@ export function AgentsConfig({
+                       </div>
+                     </Field>
+                     <Field label={t("agents.thinking")}>
+-                      <select aria-label={t("agents.thinking")} value={draft.thinking ?? ""} disabled={disabled} onChange={(event) => update("thinking", (event.target.value || undefined) as EditableProfile["thinking"])} style={controlStyle}>
++                      <NativeSelect pad={9} border={1} fill aria-label={t("agents.thinking")} value={draft.thinking ?? ""} disabled={disabled} onChange={(event) => update("thinking", (event.target.value || undefined) as EditableProfile["thinking"])} style={controlStyle}>
+                         {THINKING_OPTIONS.map((value) => <option key={value || "default"} value={value}>{value || t("agents.inherit")}</option>)}
+-                      </select>
++                      </NativeSelect>
+                     </Field>
+                     <Field label={t("agents.maxTurns")}>
+                       <input aria-label={t("agents.maxTurns")} type="number" min={1} value={draft.maxTurns ?? ""} disabled={disabled} onChange={(event) => update("maxTurns", event.target.value ? Number(event.target.value) : undefined)} style={controlStyle} />
+@@ -727,9 +733,7 @@ export function AgentsConfig({
              className={savedOk ? "is-success" : undefined}
            >
              {savedOk && (
@@ -22587,8 +22676,64 @@ index e04cdc1..3bedf1f 100644
        const filePath = onOpenFile ? resolveLocalFileHref(href, cwd) : null;
        const openFile = onOpenFile;
        if (!filePath || !openFile) {
+diff --git a/components/McpAddServer.tsx b/components/McpAddServer.tsx
+index 2753f9e..4b272ca 100644
+--- a/components/McpAddServer.tsx
++++ b/components/McpAddServer.tsx
+@@ -40,6 +40,7 @@ import {
+   type McpAddSubmitBlock,
+ } from "./mcp-add-helpers";
+ import type { McpActionFailure, McpActionRequest } from "./mcp-config-helpers";
++import { NativeSelect } from "./ui/select";
+ 
+ type Translate = ReturnType<typeof useI18n>["t"];
+ export type McpAddActionRequest = Extract<McpActionRequest, { action: "add" }>;
+@@ -255,7 +256,7 @@ export function McpAddServer({
+ 
+       {parsed.ok && parsed.servers.length > 1 && (
+         <ConfigField label={t("mcp.add.serverLabel")}>
+-          <select
++          <NativeSelect fill
+             className="mcp-add-input"
+             aria-label={t("mcp.add.serverLabel")}
+             value={String(parsed.servers.indexOf(server ?? parsed.servers[0]))}
+@@ -264,7 +265,7 @@ export function McpAddServer({
+             {parsed.servers.map((item, index) => (
+               <option key={`${index}\0${item.name}`} value={index}>{revealHiddenCharacters(item.name)}</option>
+             ))}
+-          </select>
++          </NativeSelect>
+           <span className="mcp-config-line is-dim">{t("mcp.add.serverCount", { count: parsed.servers.length })}</span>
+         </ConfigField>
+       )}
+@@ -518,10 +519,10 @@ function McpAddFieldInput({
+             onChange={(event) => setReference(event.target.value)}
+           />
+         ) : field.kind === "select" ? (
+-          <select className="mcp-add-input" aria-label={label} value={value} {...invalid} onChange={(event) => setValue(event.target.value)}>
++          <NativeSelect fill className="mcp-add-input" aria-label={label} value={value} {...invalid} onChange={(event) => setValue(event.target.value)}>
+             {!field.options?.includes(value) && <option value="">{t("mcp.add.field.choose")}</option>}
+             {(field.options ?? []).map((option) => <option key={option} value={option}>{revealHiddenCharacters(option)}</option>)}
+-          </select>
++          </NativeSelect>
+         ) : (
+           <input
+             className="mcp-add-input"
+diff --git a/components/McpConfig.test.mjs b/components/McpConfig.test.mjs
+index 440f63e..529aea4 100644
+--- a/components/McpConfig.test.mjs
++++ b/components/McpConfig.test.mjs
+@@ -774,7 +774,7 @@ test("the exposure dropdown waits like a switch, and points at why it cannot be
+   // While any change is on its way it waits; the one for this server says it is saving.
+   const saving = validated({ view: { busy: "exposure:global\0docs" } });
+   assert.match(exposureSelect(saving).tag, /disabled=""/);
+-  assert.match(decode(saving), /<span class="mcp-exposure-choice"><select[^>]*>[\s\S]*?<\/select><span role="status" class="mcp-config-line is-dim">Saving…<\/span><\/span>/);
++  assert.match(decode(saving), /<span class="mcp-exposure-choice"><span class="ui-select"[^>]*><select[^>]*>[\s\S]*?<\/select><svg[^>]*class="ui-select-chevron"[\s\S]*?<\/svg><\/span><span role="status" class="mcp-config-line is-dim">Saving…<\/span><\/span>/);
+   assert.match(exposureSelect(validated({ view: { busy: "switch:global\0pw" } })).tag, /disabled=""/);
+   assert.doesNotMatch(exposureSelect(validated()).tag, /disabled/);
+   // Where no change may be written, it points at the note that says why.
 diff --git a/components/McpConfig.tsx b/components/McpConfig.tsx
-index 97e86ee..faf8050 100644
+index 97e86ee..b5af79b 100644
 --- a/components/McpConfig.tsx
 +++ b/components/McpConfig.tsx
 @@ -1,5 +1,6 @@
@@ -22598,7 +22743,15 @@ index 97e86ee..faf8050 100644
  import { useCallback, useEffect, useId, useRef, useState, type Ref } from "react";
  import type { McpExposure } from "@earendil-works/pi-coding-agent";
  import type {
-@@ -795,6 +796,7 @@ export function McpConfig({
+@@ -170,6 +171,7 @@ import {
+   type McpSignInRun,
+ } from "./mcp-sign-in-helpers";
+ import { projectTrustReloadKey } from "./settings-ui-helpers";
++import { NativeSelect } from "./ui/select";
+ 
+ type Translate = ReturnType<typeof useI18n>["t"];
+ 
+@@ -795,6 +797,7 @@ export function McpConfig({
          setAddFailure(null);
        }}
        onAddSubmit={(request) => void submitAdd(request)}
@@ -22606,7 +22759,7 @@ index 97e86ee..faf8050 100644
        onTest={(server) => void testServer(server)}
        onSignIn={(server) => void startSignIn(server)}
        onSignOut={(server) => void signOut(server)}
-@@ -850,6 +852,7 @@ export function McpConfigView({
+@@ -850,6 +853,7 @@ export function McpConfigView({
    onAddOpen = () => {},
    onAddDraftChange = () => {},
    onAddSubmit = () => {},
@@ -22614,7 +22767,7 @@ index 97e86ee..faf8050 100644
    onSelect,
    onRefresh,
    onCodemodeChange,
-@@ -896,6 +899,8 @@ export function McpConfigView({
+@@ -896,6 +900,8 @@ export function McpConfigView({
    onAddOpen?: () => void;
    onAddDraftChange?: (draft: McpAddDraft) => void;
    onAddSubmit?: (request: McpAddActionRequest) => void;
@@ -22623,7 +22776,7 @@ index 97e86ee..faf8050 100644
    onSelect: (key: string) => void;
    onRefresh: () => void;
    onCodemodeChange: (preference: McpCodemodePreference) => void;
-@@ -1099,6 +1104,15 @@ export function McpConfigView({
+@@ -1099,6 +1105,15 @@ export function McpConfigView({
                </>
              ) : null}
            </ConfigSidebarList>
@@ -22639,6 +22792,24 @@ index 97e86ee..faf8050 100644
            {data && (
              <ConfigListAction ref={addActionRef} active={adding} onClick={onAddOpen}>
                {t("mcp.add.action")}
+@@ -1620,7 +1635,7 @@ function McpServerDetail({
+               {server.exposure && (
+                 <>
+                   <span className="mcp-exposure-choice">
+-                    <select
++                    <NativeSelect
+                       className="mcp-add-input mcp-exposure-select"
+                       aria-label={t("mcp.exposure.label", { name })}
+                       aria-describedby={[exposureId, block ? noteId : null].filter(Boolean).join(" ")}
+@@ -1638,7 +1653,7 @@ function McpServerDetail({
+                             : t(MCP_EXPOSURE_SHORT_KEYS[exposure])}
+                         </option>
+                       ))}
+-                    </select>
++                    </NativeSelect>
+                     {busy === `exposure:${key}` && <span role="status" className="mcp-config-line is-dim">{t("i18n.saving")}</span>}
+                   </span>
+                   <span id={exposureId} className="mcp-config-line">{t(MCP_EXPOSURE_KEYS[server.exposure])}</span>
 diff --git a/components/MermaidBlock.test.mjs b/components/MermaidBlock.test.mjs
 index 45088d3..cf1df98 100644
 --- a/components/MermaidBlock.test.mjs
@@ -25027,7 +25198,7 @@ index bc635a4..5872f05 100644
 +  assert.equal(providerMatchesSearch("  ", oauth.id, oauth.name), true);
 +});
 diff --git a/components/ModelsConfig.tsx b/components/ModelsConfig.tsx
-index 3cfaabb..019cb48 100644
+index 3cfaabb..1a5c7e6 100644
 --- a/components/ModelsConfig.tsx
 +++ b/components/ModelsConfig.tsx
 @@ -14,9 +14,11 @@ import {
@@ -25042,16 +25213,17 @@ index 3cfaabb..019cb48 100644
    trackAddedModels,
    collectModelRenames,
    renameProviderEntry,
-@@ -56,6 +58,8 @@ import { providerBadgeLabel } from "./enabled-models-helpers";
+@@ -56,6 +58,9 @@ import { providerBadgeLabel } from "./enabled-models-helpers";
  import { OAuthPastePanel } from "./OAuthPastePanel";
  import { ProviderIcon } from "./ProviderIcon";
  import { ProviderUsageSummary } from "./ProviderUsageSummary";
 +import { CarbonIcon } from "./CarbonIcon";
 +import * as Carbon from "./carbon/icons";
++import { NativeSelect } from "./ui/select";
  
  // ── Types ─────────────────────────────────────────────────────────────────────
  
-@@ -93,6 +97,7 @@ interface ModelEntry {
+@@ -93,6 +98,7 @@ interface ModelEntry {
    id: string;
    name?: string;
    api?: string;
@@ -25059,7 +25231,7 @@ index 3cfaabb..019cb48 100644
    reasoning?: boolean;
    thinkingLevelMap?: Record<string, string | null>;
    input?: string[];
-@@ -186,7 +191,7 @@ const inputStyle = {
+@@ -186,7 +192,7 @@ const inputStyle = {
    padding: "6px 9px",
    background: "var(--bg-panel)",
    border: "1px solid var(--border)",
@@ -25068,7 +25240,7 @@ index 3cfaabb..019cb48 100644
    color: "var(--text)",
    fontSize: 12,
    outline: "none",
-@@ -260,17 +265,9 @@ function SecretTextInput({
+@@ -260,17 +266,9 @@ function SecretTextInput({
          }}
        >
          {visible ? (
@@ -25088,7 +25260,22 @@ index 3cfaabb..019cb48 100644
          )}
        </button>
      </div>
-@@ -415,7 +412,7 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
+@@ -284,11 +282,11 @@ function NumInput({ value, onChange, placeholder }: { value: string; onChange: (
+ function Select({ value, onChange, options, required }: { value: string; onChange: (v: string) => void; options: readonly string[]; required?: boolean }) {
+   const { t } = useI18n();
+   return (
+-    <select value={value} onChange={(e) => onChange(e.target.value)}
++    <NativeSelect pad={9} border={1} fill value={value} onChange={(e) => onChange(e.target.value)}
+       style={{ ...inputStyle, color: value ? "var(--text)" : "var(--text-dim)" }}>
+-       {!required && <option value="">— {t("i18n.default")} / none —</option>}
++      {!required && <option value="">— {t("i18n.default")} / none —</option>}
+       {options.map((o) => <option key={o} value={o}>{o}</option>)}
+-    </select>
++    </NativeSelect>
+   );
+ }
+ 
+@@ -415,7 +413,7 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
          <TextInput value={editingName} onChange={onEditingNameChange} placeholder="provider-name" mono />
          {editingName !== name && editingName.trim() && (
            <button onClick={() => onRename(editingName.trim())}
@@ -25097,7 +25284,7 @@ index 3cfaabb..019cb48 100644
               {t("i18n.rename")}
            </button>
          )}
-@@ -424,17 +421,11 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
+@@ -424,17 +422,11 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
        <Field label="Base URL">
          <TextInput value={provider.baseUrl ?? ""} onChange={(v) => set("baseUrl", v || undefined)}
            placeholder="https://api.example.com/v1" mono />
@@ -25116,7 +25303,7 @@ index 3cfaabb..019cb48 100644
        </Field>
  
        <Field label="API">
-@@ -446,9 +437,6 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
+@@ -446,9 +438,6 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
            headers={provider.headers}
            onChange={(headers) => set("headers", headers)}
          />
@@ -25126,7 +25313,7 @@ index 3cfaabb..019cb48 100644
        </Field>
  
        <div style={{ borderTop: "1px solid var(--border)", paddingTop: 14, display: "flex", flexDirection: "column", gap: 10 }}>
-@@ -457,7 +445,7 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
+@@ -457,7 +446,7 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
              onClick={handleDiscoverModels}
              disabled={discoveryState.phase === "loading"}
              style={{
@@ -25135,7 +25322,7 @@ index 3cfaabb..019cb48 100644
                background: "var(--bg-panel)", color: discoveryState.phase === "loading" ? "var(--text-dim)" : "var(--text-muted)",
                cursor: discoveryState.phase === "loading" ? "not-allowed" : "pointer", fontSize: 11,
              }}
-@@ -467,7 +455,7 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
+@@ -467,7 +456,7 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
          )}
  
          {discoveryState.phase === "error" && (
@@ -25144,7 +25331,7 @@ index 3cfaabb..019cb48 100644
              {discoveryState.message}
            </div>
          )}
-@@ -482,7 +470,7 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
+@@ -482,7 +471,7 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
                style={{ ...inputStyle, width: "100%", minWidth: 0 }}
              />
  
@@ -25153,7 +25340,7 @@ index 3cfaabb..019cb48 100644
                <label
                  style={{
                    minHeight: 32, padding: "5px 9px", display: "flex", alignItems: "center", gap: 8,
-@@ -541,7 +529,7 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
+@@ -541,7 +530,7 @@ function ProviderDetail({ name, editingName, provider, onChange, onEditingNameCh
                <button
                  onClick={addSelectedModels}
                  disabled={selectedCount === 0}
@@ -25162,7 +25349,7 @@ index 3cfaabb..019cb48 100644
                >
                  {selectedCount
                    ? t("models.discoveryAddSelectedCount", { count: selectedCount })
-@@ -563,10 +551,11 @@ type ThinkingLevel = typeof THINKING_LEVELS[number];
+@@ -563,10 +552,11 @@ type ThinkingLevel = typeof THINKING_LEVELS[number];
  
  const LEVEL_COLORS: Record<ThinkingLevel, string> = {
    off:     "var(--text-dim)",
@@ -25178,7 +25365,7 @@ index 3cfaabb..019cb48 100644
    xhigh:   "#fb923c",
    max:     "#ef4444",
  };
-@@ -629,7 +618,7 @@ function ThinkingLevelMapEditor({
+@@ -629,7 +619,7 @@ function ThinkingLevelMapEditor({
                alignItems: "center",
                gap: 8,
                padding: "5px 4px",
@@ -25187,7 +25374,7 @@ index 3cfaabb..019cb48 100644
                background: "transparent",
                border: "1px solid transparent",
              }}
-@@ -646,7 +635,7 @@ function ThinkingLevelMapEditor({
+@@ -646,7 +636,7 @@ function ThinkingLevelMapEditor({
                </span>
              </div>
  
@@ -25196,7 +25383,7 @@ index 3cfaabb..019cb48 100644
                <button
                  onClick={() => setLevel(level, "omit")}
                  style={{ ...btnBase, ...(state === "omit" ? btnActive : {}) }}
-@@ -661,7 +650,7 @@ function ThinkingLevelMapEditor({
+@@ -661,7 +651,7 @@ function ThinkingLevelMapEditor({
                </button>
              </div>
  
@@ -25205,7 +25392,7 @@ index 3cfaabb..019cb48 100644
                <button
                  onClick={() => setLevel(level, strVal || level)}
                  style={{ ...btnBase, ...(state === "string" ? btnActive : {}), borderRight: "1px solid var(--border)", flexShrink: 0 }}
-@@ -749,7 +738,7 @@ function HeaderListEditor({ headers, onChange }: {
+@@ -749,7 +739,7 @@ function HeaderListEditor({ headers, onChange }: {
      padding: "6px 9px",
      background: "none",
      border: "1px solid rgba(239,68,68,0.3)",
@@ -25214,7 +25401,7 @@ index 3cfaabb..019cb48 100644
      color: "#ef4444",
      cursor: "pointer",
      fontSize: 11,
-@@ -770,7 +759,7 @@ function HeaderListEditor({ headers, onChange }: {
+@@ -770,7 +760,7 @@ function HeaderListEditor({ headers, onChange }: {
          ...current,
          { id: nextRowIdRef.current++, name: "", value: "" },
        ])}
@@ -25223,7 +25410,7 @@ index 3cfaabb..019cb48 100644
          + Add header
        </button>
      </div>
-@@ -842,6 +831,8 @@ function ModelDetail({
+@@ -842,6 +832,8 @@ function ModelDetail({
    const [costDraft, setCostDraft] = useState<ModelCostDraft>(() => modelCostToDraft(model.cost));
    const costDraftRef = useRef(costDraft);
    const [advancedOpen, setAdvancedOpen] = useState(false);
@@ -25232,7 +25419,7 @@ index 3cfaabb..019cb48 100644
    const catalogRequestIdRef = useRef(0);
    const catalogUndoRef = useRef<ModelEntry | null>(null);
    const costTemplateRef = useRef(model.cost);
-@@ -885,17 +876,21 @@ function ModelDetail({
+@@ -885,17 +877,21 @@ function ModelDetail({
    })();
  
    useEffect(() => {
@@ -25256,7 +25443,7 @@ index 3cfaabb..019cb48 100644
      setTestState({ phase: "testing" });
      try {
        const res = await fetch("/api/models-config/test", {
-@@ -910,6 +905,7 @@ function ModelDetail({
+@@ -910,6 +906,7 @@ function ModelDetail({
          status?: number;
          responseText?: string;
        };
@@ -25264,7 +25451,7 @@ index 3cfaabb..019cb48 100644
        if (!res.ok || !d.ok) {
          setTestState({
            phase: "error",
-@@ -926,6 +922,7 @@ function ModelDetail({
+@@ -926,6 +923,7 @@ function ModelDetail({
          responseText: d.responseText,
        });
      } catch (e) {
@@ -25272,7 +25459,7 @@ index 3cfaabb..019cb48 100644
        setTestState({ phase: "error", message: e instanceof Error ? e.message : String(e) });
      }
    }, [model, provider, providerName, testState.phase]);
-@@ -937,7 +934,7 @@ function ModelDetail({
+@@ -937,7 +935,7 @@ function ModelDetail({
      setCatalogState({ phase: "loading" });
      try {
        const params = new URLSearchParams({ q: query, provider: providerName, limit: "50" });
@@ -25281,7 +25468,7 @@ index 3cfaabb..019cb48 100644
        const res = await fetch(`/api/models-config/catalog?${params}`);
        const data = await res.json() as { recommendation?: ModelCatalogRecommendation; error?: string };
        if (requestId !== catalogRequestIdRef.current) return;
-@@ -960,7 +957,7 @@ function ModelDetail({
+@@ -960,7 +958,7 @@ function ModelDetail({
        if (requestId !== catalogRequestIdRef.current) return;
        setCatalogState({ phase: "error", message: error instanceof Error ? error.message : String(error) });
      }
@@ -25290,7 +25477,7 @@ index 3cfaabb..019cb48 100644
  
    const undoCatalogFill = () => {
      const previous = catalogUndoRef.current;
-@@ -1023,6 +1020,7 @@ function ModelDetail({
+@@ -1023,6 +1021,7 @@ function ModelDetail({
    }
    compatibilityOverrideCount += remainingCompatKeys.size;
    const advancedSummaryParts = [
@@ -25298,7 +25485,7 @@ index 3cfaabb..019cb48 100644
      model.api ? `API: ${model.api}` : null,
      Object.keys(model.headers ?? {}).length
        ? t("models.headersSummary", { count: Object.keys(model.headers ?? {}).length })
-@@ -1053,9 +1051,9 @@ function ModelDetail({
+@@ -1053,9 +1052,9 @@ function ModelDetail({
                  height: 28,
                  padding: "0 8px",
                  border: `1px solid ${testState.phase === "error" ? "#fecaca" : testState.phase === "success" ? "#bbf7d0" : "var(--border)"}`,
@@ -25311,7 +25498,7 @@ index 3cfaabb..019cb48 100644
                  fontSize: 11,
                  display: "inline-flex",
                  alignItems: "center",
-@@ -1077,9 +1075,7 @@ function ModelDetail({
+@@ -1077,9 +1076,7 @@ function ModelDetail({
              className={testState.phase === "success" ? "is-success" : undefined}
            >
              {testState.phase === "success" && (
@@ -25322,7 +25509,7 @@ index 3cfaabb..019cb48 100644
              )}
               {testState.phase === "testing" ? t("i18n.checking") : testState.phase === "success" ? t("common.ok") : t("i18n.test")}
            </ConfigButton>
-@@ -1098,7 +1094,7 @@ function ModelDetail({
+@@ -1098,7 +1095,7 @@ function ModelDetail({
              onClick={() => void handleCatalogFill()}
              disabled={!model.id.trim() || catalogState.phase === "loading"}
              style={{
@@ -25331,7 +25518,7 @@ index 3cfaabb..019cb48 100644
                background: "var(--bg-panel)",
                color: !model.id.trim() || catalogState.phase === "loading" ? "var(--text-dim)" : "var(--text-muted)",
                cursor: !model.id.trim() || catalogState.phase === "loading" ? "not-allowed" : "pointer",
-@@ -1177,7 +1173,7 @@ function ModelDetail({
+@@ -1177,7 +1174,7 @@ function ModelDetail({
          </div>
  
          <div style={{ marginTop: 16 }}>
@@ -25340,7 +25527,7 @@ index 3cfaabb..019cb48 100644
              {t("models.costPerMillion")}
            </div>
            {costEditing ? (
-@@ -1229,24 +1225,16 @@ function ModelDetail({
+@@ -1229,24 +1226,16 @@ function ModelDetail({
                {advancedSummary}
              </span>
            </span>
@@ -25371,7 +25558,7 @@ index 3cfaabb..019cb48 100644
              <Field label={t("models.apiOverride")}>
                <Select value={model.api ?? ""} onChange={(v) => set("api", v || undefined)} options={API_OPTIONS} />
              </Field>
-@@ -1274,6 +1262,18 @@ function ModelDetail({
+@@ -1274,6 +1263,18 @@ function ModelDetail({
                    checked={effectiveCompat(provider, model)["supportsDeveloperRole"] !== false}
                    onChange={(v) => onChange(setCompatBool(model, "supportsDeveloperRole", v))}
                  />
@@ -25390,7 +25577,7 @@ index 3cfaabb..019cb48 100644
                  <div style={{ marginTop: 4 }}>
                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, marginBottom: 8 }}>
                      <SectionTitle>{t("models.thinkingLevelMap")}</SectionTitle>
-@@ -1495,7 +1495,7 @@ function OAuthDetail({ provider, onRefresh, enabledModels, contextSettings }: {
+@@ -1495,7 +1496,7 @@ function OAuthDetail({ provider, onRefresh, enabledModels, contextSettings }: {
                  <button
                    key={option.id}
                    onClick={() => submitSelection(loginState.token, option.id)}
@@ -25399,7 +25586,7 @@ index 3cfaabb..019cb48 100644
                  >
                    {option.label}
                  </button>
-@@ -1530,7 +1530,7 @@ function OAuthDetail({ provider, onRefresh, enabledModels, contextSettings }: {
+@@ -1530,7 +1531,7 @@ function OAuthDetail({ provider, onRefresh, enabledModels, contextSettings }: {
              <p style={{ margin: 0, fontSize: 12, color: "var(--text-muted)", lineHeight: 1.5 }}>
                Open the verification page and enter this code:
              </p>
@@ -25408,7 +25595,7 @@ index 3cfaabb..019cb48 100644
                {loginState.userCode}
              </div>
              <p style={{ margin: 0, fontSize: 11, color: "var(--text-dim)", lineHeight: 1.5 }}>
-@@ -1670,7 +1670,7 @@ function ApiKeyDetail({ provider, onRefresh, enabledModels, contextSettings }: {
+@@ -1670,7 +1671,7 @@ function ApiKeyDetail({ provider, onRefresh, enabledModels, contextSettings }: {
            style={{
              padding: "6px 12px",
              background: savedOk ? "#16a34a" : apiKey.trim() ? "var(--accent)" : "var(--bg-panel)",
@@ -25417,7 +25604,7 @@ index 3cfaabb..019cb48 100644
              color: savedOk ? "#fff" : apiKey.trim() ? "var(--accent-contrast)" : "var(--text-dim)",
              cursor: (saving || !apiKey.trim() || savedOk) ? "not-allowed" : "pointer",
              fontSize: 12, fontWeight: 600, flexShrink: 0,
-@@ -1678,9 +1678,7 @@ function ApiKeyDetail({ provider, onRefresh, enabledModels, contextSettings }: {
+@@ -1678,9 +1679,7 @@ function ApiKeyDetail({ provider, onRefresh, enabledModels, contextSettings }: {
            }}
          >
            {savedOk && (
@@ -25428,7 +25615,7 @@ index 3cfaabb..019cb48 100644
            )}
             {savedOk ? t("i18n.saved") : saving ? t("i18n.saving") : t("i18n.save")}
          </button>
-@@ -1718,8 +1716,8 @@ function AddProviderPicker({
+@@ -1718,8 +1717,8 @@ function AddProviderPicker({
  
    const q = search.trim().toLowerCase();
  
@@ -25439,7 +25626,7 @@ index 3cfaabb..019cb48 100644
    const showCustom = !q || "custom".includes(q) || "openai-compatible".includes(q) || "anthropic-compatible".includes(q);
  
    const totalCount = availableOAuth.length + availableApiKey.length + (showCustom ? 1 : 0);
-@@ -1729,7 +1727,7 @@ function AddProviderPicker({
+@@ -1729,7 +1728,7 @@ function AddProviderPicker({
      padding: "10px 12px",
      background: "var(--bg-panel)",
      border: "1px solid var(--border)",
@@ -25448,7 +25635,7 @@ index 3cfaabb..019cb48 100644
      boxSizing: "border-box",
      cursor: "pointer",
      minWidth: 0,
-@@ -1751,12 +1749,10 @@ function AddProviderPicker({
+@@ -1751,12 +1750,10 @@ function AddProviderPicker({
          onClose();
        }}
      >
@@ -25463,7 +25650,7 @@ index 3cfaabb..019cb48 100644
            <input
              ref={inputRef}
              value={search}
-@@ -1773,7 +1769,7 @@ function AddProviderPicker({
+@@ -1773,7 +1770,7 @@ function AddProviderPicker({
            ) : (
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(min(240px, 100%), 1fr))", gap: 8 }}>
                {showCustom && (
@@ -25472,7 +25659,7 @@ index 3cfaabb..019cb48 100644
                )}
                {showCustom && (
                  <button
-@@ -1786,16 +1782,14 @@ function AddProviderPicker({
+@@ -1786,16 +1783,14 @@ function AddProviderPicker({
                      <div style={{ fontSize: 12, fontWeight: 600, color: "var(--text)", lineHeight: 1.3, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>OpenAI / Anthropic compatible</div>
                       <div style={{ fontSize: 10, color: "var(--text-dim)", marginTop: 2 }}>{t("i18n.customEndpoint")}</div>
                    </div>
@@ -25492,7 +25679,7 @@ index 3cfaabb..019cb48 100644
                )}
                {availableOAuth.map((p) => (
                  <button key={p.id} onClick={() => { onSelectOAuth(p.id); onClose(); }}
-@@ -1812,7 +1806,7 @@ function AddProviderPicker({
+@@ -1812,7 +1807,7 @@ function AddProviderPicker({
                ))}
  
                {availableApiKey.length > 0 && (
@@ -25501,7 +25688,7 @@ index 3cfaabb..019cb48 100644
                )}
                {availableApiKey.map((p) => (
                  <button key={p.id} onClick={() => { onSelectApiKey(p.id); onClose(); }}
-@@ -2216,13 +2210,7 @@ export function ModelsConfig({ onClose, embedded = false, cwd = null }: {
+@@ -2216,13 +2211,7 @@ export function ModelsConfig({ onClose, embedded = false, cwd = null }: {
                        onClick={() => setSelection({ type: "provider", name: pName })}
                        active={isProviderSelected}
                      >
@@ -25516,7 +25703,7 @@ index 3cfaabb..019cb48 100644
                        <ConfigSidebarText className="is-grow">
                          {pName}
                        </ConfigSidebarText>
-@@ -2243,7 +2231,7 @@ export function ModelsConfig({ onClose, embedded = false, cwd = null }: {
+@@ -2243,7 +2232,7 @@ export function ModelsConfig({ onClose, embedded = false, cwd = null }: {
                               {m.id || t("i18n.newModel")}
                            </ConfigSidebarText>
                            {m.reasoning && (
@@ -25525,7 +25712,7 @@ index 3cfaabb..019cb48 100644
                            )}
                          </ConfigSidebarItem>
                        );
-@@ -2276,11 +2264,11 @@ export function ModelsConfig({ onClose, embedded = false, cwd = null }: {
+@@ -2276,11 +2265,11 @@ export function ModelsConfig({ onClose, embedded = false, cwd = null }: {
          </ConfigSplitView>
  
          {/* Footer */}
@@ -25539,7 +25726,7 @@ index 3cfaabb..019cb48 100644
            {!embedded && <ConfigButton onClick={onClose}>{t("i18n.cancel")}</ConfigButton>}
            <ConfigButton
              variant="primary"
-@@ -2289,10 +2277,7 @@ export function ModelsConfig({ onClose, embedded = false, cwd = null }: {
+@@ -2289,10 +2278,7 @@ export function ModelsConfig({ onClose, embedded = false, cwd = null }: {
              className={savedOk ? "is-success" : undefined}
            >
              {savedOk && (
@@ -32534,6 +32721,83 @@ index 0000000..5d2e784
 +    else if (also) (also as { current: T | null }).current = node;
 +  }, [also]);
 +}
+diff --git a/components/ui/select.test.mjs b/components/ui/select.test.mjs
+new file mode 100644
+index 0000000..668e391
+--- /dev/null
++++ b/components/ui/select.test.mjs
+@@ -0,0 +1,28 @@
++import assert from "node:assert/strict";
++import { readdirSync, readFileSync } from "node:fs";
++import test from "node:test";
++import { createJiti } from "jiti";
++
++const jiti = createJiti(import.meta.url, { jsx: { runtime: "automatic" }, tsconfigPaths: true });
++const React = await jiti.import("react");
++const { renderToStaticMarkup } = await jiti.import("react-dom/server");
++const { NativeSelect } = await jiti.import("./select.tsx");
++
++test("every select in the app is a NativeSelect, with our chevron instead of the engine's arrow", () => {
++  const dir = new URL("..", import.meta.url);
++  const raw = readdirSync(dir).filter((name) => name.endsWith(".tsx"))
++    .filter((name) => /<select\b/.test(readFileSync(new URL(name, dir), "utf8")));
++  assert.deepEqual(raw, [], "use components/ui/select.tsx's NativeSelect");
++});
++
++test("the chevron mirrors the text's padding and the select keeps its own attributes", () => {
++  const html = renderToStaticMarkup(React.createElement(NativeSelect, { pad: 9, fill: true, "aria-label": "Thinking", defaultValue: "b", style: { padding: "0 9px" } },
++    React.createElement("option", { value: "a" }, "A"), React.createElement("option", { value: "b" }, "B")));
++  assert.match(html, /^<span class="ui-select is-fill" style="--select-pad:9px">/);
++  assert.match(html, /<select aria-label="Thinking" style="padding:0 9px;padding-left:9px;padding-right:calc\(9px \+ 13.5px\)">/);
++  assert.match(html, /<option value="b" selected="">B<\/option><\/select><svg[^>]*class="[^"]*ui-select-chevron/);
++  const css = readFileSync(new URL("../../app/ui.css", import.meta.url), "utf8");
++  assert.match(css, /\.ui-select > select \{[^}]*appearance: none;/);
++  assert.match(css, /\.ui-select-chevron \{[^}]*right: calc\(var\(--select-pad, 10px\) \+ var\(--select-border, 0px\) - 1\.5px\);/);
++  assert.match(renderToStaticMarkup(React.createElement(NativeSelect, { pad: 9, border: 1 })), /style="--select-pad:9px;--select-border:1px"/);
++});
+diff --git a/components/ui/select.tsx b/components/ui/select.tsx
+new file mode 100644
+index 0000000..d1a6266
+--- /dev/null
++++ b/components/ui/select.tsx
+@@ -0,0 +1,37 @@
++import type { CSSProperties, SelectHTMLAttributes } from "react";
++import { CarbonIcon } from "../CarbonIcon";
++import * as Carbon from "../carbon/icons";
++
++/**
++ * A native select with Carbon's chevron instead of the engine's arrow: each engine places
++ * its own (Chromium 3px from the edge whatever the padding, after 4.5px of its own padding
++ * before the text; Firefox and Safari elsewhere again). The chevron's ink sits as far from
++ * the right edge as the text's from the left (`pad`, the text's padding, inside `border`),
++ * and 6.25px after the text, as in the menu triggers. Styled in app/ui.css (.ui-select).
++ */
++export function NativeSelect({
++  pad = 10,
++  border = 0,
++  fill = false,
++  wrapperStyle,
++  style,
++  children,
++  ...props
++}: SelectHTMLAttributes<HTMLSelectElement> & {
++  /** The text's padding from the left edge, in px; the chevron mirrors it. */
++  pad?: number;
++  /** The select's border width, in px, which the text sits inside too. */
++  border?: number;
++  /** Take the row's whole width, as a field does. */
++  fill?: boolean;
++  wrapperStyle?: CSSProperties;
++}) {
++  return (
++    <span className={`ui-select${fill ? " is-fill" : ""}`} style={{ "--select-pad": `${pad}px`, ...(border ? { "--select-border": `${border}px` } : {}), ...wrapperStyle } as CSSProperties}>
++      <select {...props} style={{ ...style, paddingLeft: pad, paddingRight: `calc(${pad}px + 13.5px)` }}>
++        {children}
++      </select>
++      <CarbonIcon icon={Carbon.ChevronDown} size={12} className="ui-select-chevron" />
++    </span>
++  );
++}
 diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
 new file mode 100644
 index 0000000..019f84d