coder · DanielleMaywood · Jul 1, 2026 · Jul 1, 2026 · Jul 1, 2026 · Jul 1, 2026
@@ -1409,7 +1409,7 @@ export const AgentChatInput: FC<AgentChatInputProps> = ({
 								placeholder={modelSelectorPlaceholder}
 								className="md:shrink"
 								dropdownSide="top"
-								dropdownAlign="center"
+								dropdownAlign="start"
 								enableMobileFullWidthDropdown
 							/>
 						)}

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { expect, fn, userEvent, within } from "storybook/test";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 import { ModelSelector, type ModelSelectorOption } from "./ModelSelector";
 import { MockModelSelectorOption } from "./modelSelectorFixtures";
 
@@ -42,7 +42,7 @@ const anthropicModels: ModelSelectorOption[] = [
 		provider: "anthropic",
 		model: "claude-3-5-haiku-20241022",
 		displayName: "Claude 3.5 Haiku",
-		contextLimit: 200_000,
+		contextLimit: 1_000_000,
 	},
 ];
 
@@ -140,7 +140,7 @@ export const NoOptions: Story = {
 };
 
 // ---------------------------------------------------------------------------
-// Play function – selection interaction
+// Play function, selection interaction
 // ---------------------------------------------------------------------------
 
 export const SelectsModel: Story = {
@@ -152,15 +152,75 @@ export const SelectsModel: Story = {
 	play: async ({ canvasElement, args }) => {
 		const canvas = within(canvasElement);
 
-		// Open the popover by clicking the trigger.
 		const trigger = canvas.getByRole("combobox");
 		await userEvent.click(trigger);
 
-		// The dropdown should appear with model options.
 		const listbox = await within(document.body).findByRole("listbox");
-		const option = within(listbox).getByText("GPT-4o Mini");
-		await userEvent.click(option);
+		await userEvent.click(within(listbox).getByText("GPT-4o Mini"));
 
 		expect(args.onValueChange).toHaveBeenCalledWith("openai/gpt-4o-mini");
 	},
 };
+
+export const FiltersModels: Story = {
+	args: {
+		options: allModels,
+		value: "openai/gpt-4o",
+		onValueChange: fn(),
+	},
+	play: async ({ canvasElement, args }) => {
+		const canvas = within(canvasElement);
+		const body = within(document.body);
+		const trigger = canvas.getByRole("combobox", { name: "GPT-4o" });
+
+		const openListbox = async () => {
+			await userEvent.click(trigger);
+			return body.findByRole("listbox");
+		};
+
+		const searchFor = async (
+			listbox: HTMLElement,
+			query: string,
+			expected: RegExp,
+		) => {
+			const input = body.getByPlaceholderText("Search...");
+			await userEvent.clear(input);
+			await userEvent.type(input, query);
+			await waitFor(() => {
+				expect(
+					within(listbox).getByRole("option", { name: expected }),
+				).toBeInTheDocument();
+				expect(
+					within(listbox).queryByRole("option", { name: /GPT-4o Mini/ }),
+				).not.toBeInTheDocument();
+			});
+		};
+
+		let listbox = await openListbox();
+		await searchFor(listbox, "anthropic", /Claude Sonnet 4/);
+		expect(
+			within(listbox).getByRole("option", { name: /Claude 3.5 Haiku/ }),
+		).toBeInTheDocument();
+
+		await searchFor(listbox, "claude-3-5-haiku-20241022", /Claude 3.5 Haiku/);
+
+		await searchFor(listbox, "1M", /Claude 3.5 Haiku/);
+
+		await userEvent.click(trigger);
+		await waitFor(() =>
+			expect(body.queryByRole("listbox")).not.toBeInTheDocument(),
+		);
+
+		listbox = await openListbox();
+		expect(
+			within(listbox).getByRole("option", { name: /GPT-4o Mini/ }),
+		).toBeInTheDocument();
+
+		await userEvent.click(
+			within(listbox).getByRole("option", { name: /Claude 3.5 Haiku/ }),
+		);
+		expect(args.onValueChange).toHaveBeenCalledWith(
+			"anthropic/claude-haiku-3.5",
+		);
+	},
+};
@@ -9,6 +9,14 @@ const mockModelOptions: readonly ModelSelectorOption[] = [
 		model: "gpt-4o-mini",
 		displayName: "GPT-4o mini",
 	},
+	{
+		...MockModelSelectorOption,
+		id: "claude-opus",
+		provider: "anthropic",
+		model: "claude-opus-4-1",
+		displayName: "Claude Opus 4.1",
+		contextLimit: 1_000_000,
+	},
 ];
 
 test("suppresses mouse-focus ring but keeps keyboard-focus ring on model selector trigger", () => {