Only show enabled providers in picker sidebar (#3168)

Co-authored-by: Julius Marminge <julius@mac.lan>

Author: juliusmarminge

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

@@ -105,6 +105,7 @@ import {
 import { proposedPlanTitle } from "../../proposedPlan";
 import { getProviderDisplayName, getProviderInteractionModeToggle } from "../../providerModels";
 import {
+  applyProviderInstanceSettings,
   deriveProviderInstanceEntries,
   resolveProviderDriverKindForInstanceSelection,
   sortProviderInstanceEntries,
@@ -662,8 +663,11 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
   // configured instance (default built-in + any custom `providerInstances.*`),
   // sorted default-first per driver kind for a stable picker order.
   const providerInstanceEntries = useMemo<ReadonlyArray<ProviderInstanceEntry>>(
-    () => sortProviderInstanceEntries(deriveProviderInstanceEntries(providerStatuses)),
-    [providerStatuses],
+    () =>
+      sortProviderInstanceEntries(
+        applyProviderInstanceSettings(deriveProviderInstanceEntries(providerStatuses), settings),
+      ),
+    [providerStatuses, settings],
   );
   const selectedProviderByThreadId = composerDraft.activeProvider ?? null;
   const threadProvider =

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

@@ -22,7 +22,11 @@ import {
 import { useSettings, useUpdateSettings } from "~/hooks/useSettings";
 import { cn } from "~/lib/utils";
 import { TooltipProvider } from "../ui/tooltip";
-import type { ProviderInstanceEntry } from "../../providerInstances";
+import {
+  isProviderInstancePickerReady,
+  isProviderInstancePickerVisible,
+  type ProviderInstanceEntry,
+} from "../../providerInstances";
 import { providerModelKey, sortProviderModelItems } from "../../modelOrdering";
 
 type ModelPickerItem = {
@@ -174,7 +178,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
   const readyInstanceSet = useMemo(() => {
     const ready = new Set<ProviderInstanceId>();
     for (const entry of instanceEntries) {
-      if (entry.status === "ready") {
+      if (isProviderInstancePickerReady(entry)) {
         ready.add(entry.instanceId);
       }
     }
@@ -231,12 +235,13 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
     return disabled;
   }, [instanceEntries, isLocked, matchesLockedProvider]);
   const sidebarInstanceEntries = useMemo(() => {
+    const enabledEntries = instanceEntries.filter(isProviderInstancePickerVisible);
     if (!isLocked) {
-      return instanceEntries;
+      return enabledEntries;
     }
     const available: ProviderInstanceEntry[] = [];
     const disabled: ProviderInstanceEntry[] = [];
-    for (const entry of instanceEntries) {
+    for (const entry of enabledEntries) {
       if (matchesLockedProvider(entry)) {
         available.push(entry);
       } else {
@@ -526,7 +531,6 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
             onSelectInstance={handleSelectInstance}
             instanceEntries={sidebarInstanceEntries}
             showFavorites
-            showComingSoon
             {...(lockedDisabledInstanceIds
               ? {
                   disabledInstanceIds: lockedDisabledInstanceIds,

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

@@ -1,11 +1,10 @@
 import { type ProviderInstanceId } from "@t3tools/contracts";
 import { memo, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Clock3Icon, SparklesIcon, StarIcon } from "lucide-react";
-import { Gemini, GithubCopilotIcon } from "../Icons";
+import { SparklesIcon, StarIcon } from "lucide-react";
 import { ProviderInstanceIcon } from "./ProviderInstanceIcon";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { cn } from "~/lib/utils";
-import type { ProviderInstanceEntry } from "../../providerInstances";
+import { isProviderInstancePickerReady, type ProviderInstanceEntry } from "../../providerInstances";
 
 /**
  * Build the hover tooltip for an instance button. Mirrors the old
@@ -14,17 +13,14 @@ import type { ProviderInstanceEntry } from "../../providerInstances";
  */
 function describeUnavailableInstance(entry: ProviderInstanceEntry): string {
   const label = entry.displayName;
-  if (entry.status === "ready") {
+  if (!entry.enabled || entry.status === "disabled") {
+    return `${label} — Disabled in settings.`;
+  }
+  if (entry.status === "ready" && entry.isAvailable) {
     return label;
   }
   const kind =
-    entry.status === "error"
-      ? "Unavailable"
-      : entry.status === "warning"
-        ? "Limited"
-        : entry.status === "disabled"
-          ? "Disabled in settings"
-          : "Not ready";
+    entry.status === "error" ? "Unavailable" : entry.status === "warning" ? "Limited" : "Not ready";
   const msg = entry.snapshot.message?.trim();
   return msg ? `${label} — ${kind}. ${msg}` : `${label} — ${kind}.`;
 }
@@ -34,7 +30,6 @@ const SELECTED_INDICATOR_CLASS =
 const BADGE_BASE_CLASS =
   "pointer-events-none absolute -right-0.5 top-0.5 z-10 flex size-3.5 items-center justify-center rounded-full bg-transparent shadow-sm ";
 const NEW_BADGE_CLASS = `${BADGE_BASE_CLASS} text-amber-600  dark:text-amber-300 `;
-const SOON_BADGE_CLASS = `${BADGE_BASE_CLASS} text-muted-foreground `;
 
 /** Opens toward the rail so the list stays readable (not over the model names). */
 const PICKER_TOOLTIP_SIDE = "left" as const;
@@ -53,8 +48,6 @@ export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: {
   instanceEntries: ReadonlyArray<ProviderInstanceEntry>;
   /** Render the favorites rail entry. Hidden for locked-provider instance switching. */
   showFavorites?: boolean;
-  /** Render non-configured coming-soon provider entries. Hidden in scoped rails. */
-  showComingSoon?: boolean;
   /** Instance ids shown in the rail but unavailable for the current picker context. */
   disabledInstanceIds?: ReadonlySet<ProviderInstanceId>;
   getDisabledInstanceTooltip?: (entry: ProviderInstanceEntry) => string;
@@ -69,7 +62,6 @@ export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: {
     props.onSelectInstance(instanceId);
   };
   const showFavorites = props.showFavorites ?? true;
-  const showComingSoon = props.showComingSoon ?? true;
   const [hoveredInstanceId, setHoveredInstanceId] = useState<ProviderInstanceId | null>(null);
   const sidebarContentRef = useRef<HTMLDivElement>(null);
   const [selectedIndicatorTop, setSelectedIndicatorTop] = useState<number | null>(null);
@@ -159,7 +151,7 @@ export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: {
 
           {/* Instance buttons (one per configured instance — built-in + custom) */}
           {props.instanceEntries.map((entry) => {
-            const isUnavailable = !entry.isAvailable || entry.status !== "ready";
+            const isUnavailable = !isProviderInstancePickerReady(entry);
             const isContextDisabled = props.disabledInstanceIds?.has(entry.instanceId) ?? false;
             const isDisabled = isUnavailable || isContextDisabled;
             const isSelected = props.selectedInstanceId === entry.instanceId;
@@ -251,76 +243,6 @@ export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: {
               </div>
             );
           })}
-
-          {showComingSoon ? (
-            <>
-              {/* Gemini button (coming soon) */}
-              <Tooltip>
-                <TooltipTrigger
-                  render={
-                    <span className="relative block w-full">
-                      <button
-                        className={cn(
-                          "relative isolate flex w-full aspect-square items-center justify-center rounded-md opacity-50 cursor-not-allowed transition-colors hover:bg-transparent",
-                        )}
-                        disabled
-                        type="button"
-                        data-model-picker-provider="gemini-coming-soon"
-                        aria-label="Gemini — coming soon"
-                      >
-                        <Gemini className="size-5 text-muted-foreground/85" aria-hidden />
-                        <span className={SOON_BADGE_CLASS} aria-hidden>
-                          <Clock3Icon className="size-2" />
-                        </span>
-                      </button>
-                    </span>
-                  }
-                />
-                <TooltipPopup
-                  side={PICKER_TOOLTIP_SIDE}
-                  sideOffset={PICKER_TOOLTIP_SIDE_OFFSET}
-                  align="center"
-                  className={PICKER_TOOLTIP_CLASS}
-                >
-                  Gemini — Coming soon
-                </TooltipPopup>
-              </Tooltip>
-              {/* Github Copilot button (coming soon) */}
-              <Tooltip>
-                <TooltipTrigger
-                  render={
-                    <span className="relative block w-full">
-                      <button
-                        className={cn(
-                          "relative isolate flex w-full aspect-square items-center justify-center rounded-md opacity-50 cursor-not-allowed transition-colors hover:bg-transparent",
-                        )}
-                        disabled
-                        type="button"
-                        data-model-picker-provider="github-copilot-coming-soon"
-                        aria-label="Github Copilot — coming soon"
-                      >
-                        <GithubCopilotIcon
-                          className="size-5 text-muted-foreground/85"
-                          aria-hidden
-                        />
-                        <span className={SOON_BADGE_CLASS} aria-hidden>
-                          <Clock3Icon className="size-2" />
-                        </span>
-                      </button>
-                    </span>
-                  }
-                />
-                <TooltipPopup
-                  side={PICKER_TOOLTIP_SIDE}
-                  sideOffset={PICKER_TOOLTIP_SIDE_OFFSET}
-                  align="center"
-                  className={PICKER_TOOLTIP_CLASS}
-                >
-                  Github Copilot — Coming soon
-                </TooltipPopup>
-              </Tooltip>
-            </>
-          ) : null}
         </div>
       </div>
     </div>

apps/web/src/components/settings/SettingsPanels.tsx

@@ -44,6 +44,7 @@ import {
   resolveAppModelSelectionState,
 } from "../../modelSelection";
 import {
+  applyProviderInstanceSettings,
   deriveProviderInstanceEntries,
   sortProviderInstanceEntries,
 } from "../../providerInstances";
@@ -495,7 +496,7 @@ export function GeneralSettingsPanel() {
   const textGenModel = textGenerationModelSelection.model;
   const textGenModelOptions = textGenerationModelSelection.options;
   const gitModelInstanceEntries = sortProviderInstanceEntries(
-    deriveProviderInstanceEntries(serverProviders),
+    applyProviderInstanceSettings(deriveProviderInstanceEntries(serverProviders), settings),
   );
   const textGenInstanceEntry = gitModelInstanceEntries.find(
     (entry) => entry.instanceId === textGenInstanceId,

apps/web/src/providerInstances.test.ts

@@ -1,7 +1,10 @@
 import { ProviderDriverKind, ProviderInstanceId, type ServerProvider } from "@t3tools/contracts";
 import { describe, expect, it } from "vite-plus/test";
 import {
+  applyProviderInstanceSettings,
   deriveProviderInstanceEntries,
+  isProviderInstancePickerReady,
+  isProviderInstancePickerVisible,
   resolveSelectableProviderInstance,
   resolveProviderDriverKindForInstanceSelection,
 } from "./providerInstances";
@@ -30,6 +33,79 @@ function provider(input: {
   };
 }
 
+describe("isProviderInstancePickerReady", () => {
+  it("rejects a disabled instance even while its last probe status is ready", () => {
+    const [entry] = deriveProviderInstanceEntries([
+      provider({
+        provider: ProviderDriverKind.make("codex"),
+        instanceId: "codex",
+        enabled: false,
+      }),
+    ]);
+
+    expect(entry?.status).toBe("ready");
+    expect(entry && isProviderInstancePickerReady(entry)).toBe(false);
+  });
+
+  it("accepts an enabled, available, ready instance", () => {
+    const [entry] = deriveProviderInstanceEntries([
+      provider({ provider: ProviderDriverKind.make("codex"), instanceId: "codex" }),
+    ]);
+
+    expect(entry && isProviderInstancePickerReady(entry)).toBe(true);
+  });
+});
+
+describe("isProviderInstancePickerVisible", () => {
+  it("keeps enabled instances in the rail and removes disabled instances", () => {
+    const [enabledEntry, disabledEntry] = deriveProviderInstanceEntries([
+      provider({ provider: ProviderDriverKind.make("codex"), instanceId: "codex" }),
+      provider({
+        provider: ProviderDriverKind.make("claudeAgent"),
+        instanceId: "claudeAgent",
+        enabled: false,
+      }),
+    ]);
+
+    expect(enabledEntry && isProviderInstancePickerVisible(enabledEntry)).toBe(true);
+    expect(disabledEntry && isProviderInstancePickerVisible(disabledEntry)).toBe(false);
+  });
+});
+
+describe("applyProviderInstanceSettings", () => {
+  it("uses settings when a streamed snapshot still reports a disabled default as enabled", () => {
+    const entries = deriveProviderInstanceEntries([
+      provider({ provider: ProviderDriverKind.make("codex"), instanceId: "codex" }),
+    ]);
+    const [entry] = applyProviderInstanceSettings(entries, {
+      providerInstances: {
+        [ProviderInstanceId.make("codex")]: {
+          driver: ProviderDriverKind.make("codex"),
+          enabled: false,
+        },
+      },
+      providers: {} as never,
+    });
+
+    expect(entry?.enabled).toBe(false);
+  });
+
+  it("treats a removed custom instance snapshot as disabled", () => {
+    const entries = deriveProviderInstanceEntries([
+      provider({
+        provider: ProviderDriverKind.make("claudeAgent"),
+        instanceId: "claude_work",
+      }),
+    ]);
+    const [entry] = applyProviderInstanceSettings(entries, {
+      providerInstances: {},
+      providers: {} as never,
+    });
+
+    expect(entry?.enabled).toBe(false);
+  });
+});
+
 describe("deriveProviderInstanceEntries", () => {
   it("uses explicit instance id and driver kind from the snapshot", () => {
     const snapshot = provider({

apps/web/src/providerInstances.ts

@@ -19,6 +19,7 @@ import {
   type ProviderInstanceId,
   type ServerProvider,
   type ServerProviderModel,
+  type ServerSettings,
   type ServerProviderState,
 } from "@t3tools/contracts";
 
@@ -51,6 +52,21 @@ export interface ProviderInstanceEntry {
   readonly models: ReadonlyArray<ServerProviderModel>;
 }
 
+/**
+ * Whether an instance can currently contribute models to an interactive picker.
+ *
+ * Disabling an instance updates `enabled` independently, while its previous
+ * `ready` probe status can remain in the streamed snapshot until reconciliation.
+ */
+export function isProviderInstancePickerReady(entry: ProviderInstanceEntry): boolean {
+  return entry.enabled && entry.isAvailable && entry.status === "ready";
+}
+
+/** Picker rails contain configured, enabled instances only. */
+export function isProviderInstancePickerVisible(entry: ProviderInstanceEntry): boolean {
+  return entry.enabled;
+}
+
 /**
  * Turn an instance id slug into a human-readable label. Splits on `_` / `-`
  * and camelCase boundaries and title-cases each token, so `codex_personal`
@@ -154,6 +170,35 @@ export function deriveProviderInstanceEntries(
   });
 }
 
+/**
+ * Overlay the current settings configuration onto streamed provider snapshots.
+ * Provider probes can briefly retain their previous `enabled` value after a
+ * settings write, so picker visibility must follow settings rather than waiting
+ * for probe reconciliation.
+ *
+ * Non-default instances only exist through `providerInstances`; if one is
+ * absent there, its streamed snapshot is stale (for example immediately after
+ * deletion) and is treated as disabled.
+ */
+export function applyProviderInstanceSettings(
+  entries: ReadonlyArray<ProviderInstanceEntry>,
+  settings: Pick<ServerSettings, "providerInstances" | "providers">,
+): ReadonlyArray<ProviderInstanceEntry> {
+  const legacyProviders = settings.providers as Readonly<
+    Record<string, { readonly enabled?: boolean } | undefined>
+  >;
+
+  return entries.map((entry) => {
+    const explicitInstance = settings.providerInstances?.[entry.instanceId];
+    const enabled = explicitInstance
+      ? (explicitInstance.enabled ?? true)
+      : entry.isDefault
+        ? (legacyProviders[entry.driverKind]?.enabled ?? entry.enabled)
+        : false;
+    return enabled === entry.enabled ? entry : { ...entry, enabled };
+  });
+}
+
 /**
  * Sort instance entries so the default instance of each driver kind appears
  * before any custom instances of the same kind. Within a kind, custom