fix(models) Discord model picker doesn't list all models (#85138)

sjf · web-flow · commit 49e3f8c3ee02 · 2026-05-21T23:50:13.000-07:00
* Add pagination to the discord model picker

* Ensure current model is shown as selected in the picker when its first loaded
diff --git a/extensions/discord/src/monitor/model-picker.state.ts b/extensions/discord/src/monitor/model-picker.state.ts
@@ -28,6 +28,7 @@ const PICKER_ACTIONS = [
   "reset",
   "cancel",
   "recents",
+  "nav",
 ] as const;
 const PICKER_VIEWS = ["providers", "models", "recents"] as const;
 
@@ -362,3 +363,27 @@ export function getDiscordModelPickerModelPage(params: {
     provider,
   };
 }
+
+export function resolveDiscordModelPickerPageForModel(params: {
+  data: ModelsProviderData;
+  provider: string;
+  model: string;
+  pageSize?: number;
+}): number {
+  const provider = normalizeProviderId(params.provider);
+  const modelSet = params.data.byProvider.get(provider);
+  if (!modelSet) {
+    return 1;
+  }
+  const sorted = [...modelSet].toSorted();
+  const index = sorted.indexOf(params.model);
+  if (index < 0) {
+    return 1;
+  }
+  const pageSize = clampPageSize(
+    params.pageSize,
+    DISCORD_MODEL_PICKER_MODEL_PAGE_SIZE,
+    DISCORD_MODEL_PICKER_MODEL_PAGE_SIZE,
+  );
+  return Math.floor(index / pageSize) + 1;
+}
diff --git a/extensions/discord/src/monitor/model-picker.ts b/extensions/discord/src/monitor/model-picker.ts
@@ -14,6 +14,7 @@ export {
   loadDiscordModelPickerData,
   parseDiscordModelPickerCustomId,
   parseDiscordModelPickerData,
+  resolveDiscordModelPickerPageForModel,
 } from "./model-picker.state.js";
 export type {
   DiscordModelPickerAction,
diff --git a/extensions/discord/src/monitor/model-picker.view.ts b/extensions/discord/src/monitor/model-picker.view.ts
@@ -29,6 +29,7 @@ import {
 } from "./model-picker.state.js";
 
 const DISCORD_PROVIDER_BUTTON_LABEL_MAX_CHARS = 18;
+const DISCORD_MODEL_PICKER_PAGE_INDICATOR_CUSTOM_ID = "mdlpk:nav-indicator";
 
 type DiscordModelPickerButtonOptions = {
   label: string;
@@ -292,6 +293,63 @@ function buildProviderRows(params: {
   return rows;
 }
 
+function buildPaginationRow(params: {
+  command: DiscordModelPickerCommandContext;
+  userId: string;
+  view: "providers" | "models";
+  page: number;
+  totalPages: number;
+  hasPrev: boolean;
+  hasNext: boolean;
+  provider?: string;
+  runtime?: string;
+  providerPage?: number;
+  modelIndex?: number;
+}): Row<Button> | null {
+  if (params.totalPages <= 1) {
+    return null;
+  }
+  const prevButton = createModelPickerButton({
+    label: "◀ Prev",
+    style: ButtonStyle.Secondary,
+    disabled: !params.hasPrev,
+    customId: buildDiscordModelPickerCustomId({
+      command: params.command,
+      action: "nav",
+      view: params.view,
+      provider: params.provider,
+      runtime: params.runtime,
+      page: Math.max(1, params.page - 1),
+      providerPage: params.providerPage,
+      modelIndex: params.modelIndex,
+      userId: params.userId,
+    }),
+  });
+  const indicatorButton = createModelPickerButton({
+    label: `Page ${params.page}/${params.totalPages}`,
+    style: ButtonStyle.Secondary,
+    disabled: true,
+    customId: DISCORD_MODEL_PICKER_PAGE_INDICATOR_CUSTOM_ID,
+  });
+  const nextButton = createModelPickerButton({
+    label: "Next ▶",
+    style: ButtonStyle.Secondary,
+    disabled: !params.hasNext,
+    customId: buildDiscordModelPickerCustomId({
+      command: params.command,
+      action: "nav",
+      view: params.view,
+      provider: params.provider,
+      runtime: params.runtime,
+      page: Math.min(params.totalPages, params.page + 1),
+      providerPage: params.providerPage,
+      modelIndex: params.modelIndex,
+      userId: params.userId,
+    }),
+  });
+  return new Row([prevButton, indicatorButton, nextButton]);
+}
+
 function buildModelRows(params: {
   command: DiscordModelPickerCommandContext;
   userId: string;
@@ -415,6 +473,23 @@ function buildModelRows(params: {
     ]),
   );
 
+  const modelNavRow = buildPaginationRow({
+    command: params.command,
+    userId: params.userId,
+    view: "models",
+    page: params.modelPage.page,
+    totalPages: params.modelPage.totalPages,
+    hasPrev: params.modelPage.hasPrev,
+    hasNext: params.modelPage.hasNext,
+    provider: params.modelPage.provider,
+    runtime: stateRuntime,
+    providerPage: providerPage.page,
+    modelIndex: params.pendingModelIndex,
+  });
+  if (modelNavRow) {
+    rows.push(modelNavRow);
+  }
+
   const resolvedDefault = params.data.resolvedDefault;
   const shouldDisableReset =
     Boolean(parsedCurrentModel) &&
@@ -505,23 +580,40 @@ export function renderDiscordModelPickerProvidersView(
 ): DiscordModelPickerRenderedView {
   const page = getDiscordModelPickerProviderPage({ data: params.data, page: params.page });
   const parsedCurrent = parseCurrentModelRef(params.currentModel);
-  const rows = buildProviderRows({
+  const rows: DiscordModelPickerRow[] = buildProviderRows({
     command: params.command,
     userId: params.userId,
     page,
     currentProvider: parsedCurrent?.provider,
   });
 
+  const navRow = buildPaginationRow({
+    command: params.command,
+    userId: params.userId,
+    view: "providers",
+    page: page.page,
+    totalPages: page.totalPages,
+    hasPrev: page.hasPrev,
+    hasNext: page.hasNext,
+  });
+  if (navRow) {
+    rows.push(navRow);
+  }
+
   const detailLines = [
     formatCurrentModelLine(params.currentModel),
     `Select a provider (${page.totalItems} available).`,
   ];
+  const footer =
+    page.totalPages > 1
+      ? `Showing page ${page.page}/${page.totalPages} · ${page.totalItems} providers total`
+      : `All ${page.totalItems} providers shown`;
   return buildRenderedShell({
     layout: params.layout ?? "v2",
     title: "Model Picker",
     detailLines,
     rows,
-    footer: `All ${page.totalItems} providers shown`,
+    footer,
   });
 }
 
@@ -587,10 +679,17 @@ export function renderDiscordModelPickerModelsView(
       })} (press Submit)`
     : "Select a model, then press Submit.";
 
+  const detailLines = [formatCurrentModelLine(params.currentModel), `Default: ${defaultModel}`];
+  if (modelPage.totalPages > 1) {
+    detailLines.push(
+      `${modelPage.provider}: page ${modelPage.page}/${modelPage.totalPages} · ${modelPage.totalItems} models`,
+    );
+  }
+
   return buildRenderedShell({
     layout: params.layout ?? "v2",
     title: "Model Picker",
-    detailLines: [formatCurrentModelLine(params.currentModel), `Default: ${defaultModel}`],
+    detailLines,
     preRowText: pendingLine,
     rows,
     trailingRows: [buttonRow],
diff --git a/extensions/discord/src/monitor/native-command-model-picker-interaction.ts b/extensions/discord/src/monitor/native-command-model-picker-interaction.ts
@@ -258,6 +258,46 @@ export async function handleDiscordModelPickerInteraction(params: {
     return;
   }
 
+  if (parsed.action === "nav" && parsed.view === "providers") {
+    const rendered = renderDiscordModelPickerProvidersView({
+      command: parsed.command,
+      userId: parsed.userId,
+      data: pickerData,
+      page: parsed.page,
+      currentModel: currentModelRef,
+    });
+    await updatePicker(toDiscordModelPickerMessagePayload(rendered));
+    return;
+  }
+
+  if (parsed.action === "nav" && parsed.view === "models") {
+    const provider =
+      parsed.provider ??
+      splitDiscordModelRef(currentModelRef ?? "")?.provider ??
+      pickerData.resolvedDefault.provider;
+    const pendingModel = resolveDiscordModelPickerModelByIndex({
+      data: pickerData,
+      provider,
+      modelIndex: parsed.modelIndex,
+    });
+    const rendered = renderDiscordModelPickerModelsView({
+      command: parsed.command,
+      userId: parsed.userId,
+      data: pickerData,
+      provider,
+      page: parsed.page,
+      providerPage: parsed.providerPage ?? 1,
+      currentModel: currentModelRef,
+      currentRuntime,
+      ...(pendingModel ? { pendingModel: `${provider}/${pendingModel}` } : {}),
+      pendingModelIndex: parsed.modelIndex,
+      pendingRuntime: parsed.runtime,
+      quickModels,
+    });
+    await updatePicker(toDiscordModelPickerMessagePayload(rendered));
+    return;
+  }
+
   if (parsed.action === "back" && parsed.view === "models") {
     const provider =
       parsed.provider ??
diff --git a/extensions/discord/src/monitor/native-command-model-picker-ui.ts b/extensions/discord/src/monitor/native-command-model-picker-ui.ts
@@ -27,6 +27,7 @@ import {
 import {
   loadDiscordModelPickerData,
   renderDiscordModelPickerModelsView,
+  resolveDiscordModelPickerPageForModel,
   toDiscordModelPickerMessagePayload,
   type DiscordModelPickerCommandContext,
 } from "./model-picker.js";
@@ -311,18 +312,26 @@ export async function replyWithDiscordModelPickerProviders(params: {
     allowedModelRefs: buildDiscordModelPickerAllowedModelRefs(data),
     limit: 5,
   });
-  const currentProvider = splitDiscordModelRef(currentModel ?? "")?.provider;
+  const parsedCurrentRef = splitDiscordModelRef(currentModel ?? "");
   const initialProvider =
-    currentProvider && data.byProvider.has(currentProvider)
-      ? currentProvider
+    parsedCurrentRef && data.byProvider.has(parsedCurrentRef.provider)
+      ? parsedCurrentRef.provider
       : (data.providers[0] ?? data.resolvedDefault.provider);
+  const initialPage =
+    parsedCurrentRef && parsedCurrentRef.provider === initialProvider
+      ? resolveDiscordModelPickerPageForModel({
+          data,
+          provider: initialProvider,
+          model: parsedCurrentRef.model,
+        })
+      : 1;
 
   const rendered = renderDiscordModelPickerModelsView({
     command: params.command,
     userId: params.userId,
     data,
     provider: initialProvider,
-    page: 1,
+    page: initialPage,
     providerPage: 1,
     currentModel,
     currentRuntime,
