Group chat models by provider and clarify install settings

- Replace provider submenus with grouped model sections in the picker
- Update settings copy for auth and custom model provider scope
- Adjust picker tests for the new grouped layout

Author: BunsDev

apps/web/src/components/chat/ProviderModelPicker.browser.tsx

@@ -50,7 +50,7 @@ describe("ProviderModelPicker", () => {
     document.body.innerHTML = "";
   });
 
-  it("shows provider submenus when provider switching is allowed", async () => {
+  it("shows both Codex and Anthropic model groups when provider switching is allowed", async () => {
     const mounted = await mountPicker({
       provider: "claudeAgent",
       model: "claude-opus-4-6",
@@ -64,7 +64,9 @@ describe("ProviderModelPicker", () => {
         const text = document.body.textContent ?? "";
         expect(text).toContain("Codex");
         expect(text).toContain("Anthropic");
-        expect(text).not.toContain("Claude Sonnet 4.6");
+        expect(text).toContain("GPT-5 Codex");
+        expect(text).toContain("Claude Sonnet 4.6");
+        expect(text).toContain("Claude Haiku 4.5");
       });
     } finally {
       await mounted.cleanup();

apps/web/src/components/chat/ProviderModelPicker.tsx

@@ -7,14 +7,12 @@ import { Button } from "../ui/button";
 import {
   Menu,
   MenuGroup,
+  MenuGroupLabel,
   MenuItem,
   MenuPopup,
   MenuRadioGroup,
   MenuRadioItem,
   MenuSeparator as MenuDivider,
-  MenuSub,
-  MenuSubPopup,
-  MenuSubTrigger,
   MenuTrigger,
 } from "../ui/menu";
 import { ClaudeAI, CursorIcon, Gemini, Icon, OpenAI, OpenCodeIcon } from "../Icons";
@@ -48,6 +46,10 @@ function providerIconClassName(
   return provider === "claudeAgent" ? "text-[#d97757]" : fallbackClassName;
 }
 
+function getProviderLabel(provider: ProviderKind): string {
+  return AVAILABLE_PROVIDER_OPTIONS.find((option) => option.value === provider)?.label ?? provider;
+}
+
 export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
   provider: ProviderKind;
   model: ModelSlug;
@@ -122,6 +124,9 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
       <MenuPopup align="start">
         {props.lockedProvider !== null ? (
           <MenuGroup>
+            <MenuGroupLabel className="px-2 pb-1 pt-2 text-[11px] uppercase tracking-[0.08em]">
+              {getProviderLabel(props.lockedProvider)} · locked for this thread
+            </MenuGroupLabel>
             <MenuRadioGroup
               value={props.model}
               onValueChange={(value) => handleModelChange(props.lockedProvider!, value)}
@@ -139,39 +144,36 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
           </MenuGroup>
         ) : (
           <>
-            {AVAILABLE_PROVIDER_OPTIONS.map((option) => {
+            {AVAILABLE_PROVIDER_OPTIONS.map((option, index) => {
               const OptionIcon = PROVIDER_ICON_BY_PROVIDER[option.value];
               return (
-                <MenuSub key={option.value}>
-                  <MenuSubTrigger>
+                <MenuGroup key={option.value}>
+                  {index > 0 ? <MenuDivider /> : null}
+                  <MenuGroupLabel className="flex items-center gap-2 px-2 pb-1 pt-2 text-[11px] uppercase tracking-[0.08em]">
                     <OptionIcon
                       aria-hidden="true"
                       className={cn(
                         "size-4 shrink-0",
                         providerIconClassName(option.value, "text-muted-foreground/85"),
                       )}
                     />
-                    {option.label}
-                  </MenuSubTrigger>
-                  <MenuSubPopup className="[--available-height:min(24rem,70vh)]">
-                    <MenuGroup>
-                      <MenuRadioGroup
-                        value={props.provider === option.value ? props.model : ""}
-                        onValueChange={(value) => handleModelChange(option.value, value)}
+                    <span>{option.label}</span>
+                  </MenuGroupLabel>
+                  <MenuRadioGroup
+                    value={props.provider === option.value ? props.model : ""}
+                    onValueChange={(value) => handleModelChange(option.value, value)}
+                  >
+                    {props.modelOptionsByProvider[option.value].map((modelOption) => (
+                      <MenuRadioItem
+                        key={`${option.value}:${modelOption.slug}`}
+                        value={modelOption.slug}
+                        onClick={() => setIsMenuOpen(false)}
                       >
-                        {props.modelOptionsByProvider[option.value].map((modelOption) => (
-                          <MenuRadioItem
-                            key={`${option.value}:${modelOption.slug}`}
-                            value={modelOption.slug}
-                            onClick={() => setIsMenuOpen(false)}
-                          >
-                            {modelOption.name}
-                          </MenuRadioItem>
-                        ))}
-                      </MenuRadioGroup>
-                    </MenuGroup>
-                  </MenuSubPopup>
-                </MenuSub>
+                        {modelOption.name}
+                      </MenuRadioItem>
+                    ))}
+                  </MenuRadioGroup>
+                </MenuGroup>
               );
             })}
             {UNAVAILABLE_PROVIDER_OPTIONS.length > 0 && <MenuDivider />}

apps/web/src/routes/_chat.settings.tsx

@@ -78,7 +78,8 @@ const INSTALL_PROVIDER_SETTINGS: readonly InstallProviderSettings[] = [
     binaryPlaceholder: "Codex binary path",
     binaryDescription: (
       <>
-        Leave blank to use <code>codex</code> from your PATH.
+        Leave blank to use <code>codex</code> from your PATH. Authentication normally uses{" "}
+        <code>codex login</code> unless your Codex config points at a custom model provider.
       </>
     ),
     homePathKey: "codexHomePath",
@@ -92,7 +93,8 @@ const INSTALL_PROVIDER_SETTINGS: readonly InstallProviderSettings[] = [
     binaryPlaceholder: "Claude binary path",
     binaryDescription: (
       <>
-        Leave blank to use <code>claude</code> from your PATH.
+        Leave blank to use <code>claude</code> from your PATH. Authentication uses{" "}
+        <code>claude auth login</code>.
       </>
     ),
   },
@@ -673,7 +675,7 @@ function SettingsRouteView() {
 
               <SettingsRow
                 title="Custom models"
-                description="Add custom model slugs for supported providers."
+                description="Add custom model slugs for Codex or Anthropic. The chat picker groups models by provider."
                 resetAction={
                   totalCustomModels > 0 ? (
                     <SettingResetButton
@@ -805,7 +807,7 @@ function SettingsRouteView() {
             <SettingsSection title="Advanced">
               <SettingsRow
                 title="Provider installs"
-                description="Override the CLI used for new sessions."
+                description="Override the CLI binaries and auth homes used for new sessions."
                 resetAction={
                   isInstallSettingsDirty ? (
                     <SettingResetButton