fix(site/src): include the selected list-only org when disambiguating…

… MCP picker options
ibetitsmike · Aug 19, 2026 · Aug 13, 2026 · Aug 13, 2026 · Aug 13, 2026 · Aug 13, 2026
commit adbe7c918b5bf9e941fee19c4383e051eacebdab
diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.stories.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.stories.tsx
@@ -63,6 +63,41 @@ export const CollidingDisplayNames: Story = {
 	},
 };
 
+// Collides with an option but is not itself selectable, mirroring a
+// deep link to a list-only organization.
+const listOnlyOrganization = {
+	...MockOrganization,
+	id: "org-t",
+	name: "org-t",
+	display_name: "Dev",
+};
+
+export const NonOptionValueDisambiguatesOptions: Story = {
+	args: {
+		value: listOnlyOrganization,
+		options: collidingDisplayNameOrganizations.slice(0, 1),
+		labelOrganizations: [
+			...collidingDisplayNameOrganizations.slice(0, 1),
+			listOnlyOrganization,
+		],
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		expect(
+			canvas.getByRole("button", { name: /Dev \(org-t\)/ }),
+		).toBeInTheDocument();
+		await userEvent.click(canvas.getByRole("button"));
+		await waitFor(() => {
+			expect(
+				screen.getByRole("option", { name: "Dev (org-a)" }),
+			).toBeInTheDocument();
+			expect(
+				screen.queryByRole("option", { name: /org-t/ }),
+			).not.toBeInTheDocument();
+		});
+	},
+};
+
 export const FallbackNameCollision: Story = {
 	args: {
 		value: null,

diff --git a/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx b/site/src/components/OrganizationAutocomplete/OrganizationAutocomplete.tsx
@@ -22,6 +22,10 @@ type OrganizationAutocompleteProps = {
 	value: Organization | null;
 	onChange: (organization: Organization | null) => void;
 	options: readonly Organization[];
+	// Collision set for disambiguation labels. Lets callers include
+	// organizations that are visible but not selectable, such as a
+	// selected organization missing from options. Defaults to options.
+	labelOrganizations?: readonly Organization[];
 	id?: string;
 	ariaLabel?: string;
 	required?: boolean;
@@ -49,12 +53,14 @@ export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
 	value,
 	onChange,
 	options,
+	labelOrganizations,
 	id,
 	ariaLabel,
 	required,
 	disabled,
 }) => {
 	const [open, setOpen] = useState(false);
+	const labelContext = labelOrganizations ?? options;
 
 	return (
 		<Popover open={open} onOpenChange={setOpen}>
@@ -77,7 +83,7 @@ export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
 								fallback={value.display_name}
 							/>
 							<span className="truncate">
-								{getOrganizationLabel(value, options)}
+								{getOrganizationLabel(value, labelContext)}
 							</span>
 						</>
 					) : (
@@ -112,7 +118,7 @@ export const OrganizationAutocomplete: FC<OrganizationAutocompleteProps> = ({
 										fallback={org.display_name}
 									/>
 									<span className="truncate">
-										{getOrganizationLabel(org, options)}
+										{getOrganizationLabel(org, labelContext)}
 									</span>
 									{value?.id === org.id && (
 										<CheckIcon className="ml-auto size-icon-sm shrink-0" />

diff --git a/site/src/pages/AISettingsPage/MCPServersPage/components/OrganizationPicker.tsx b/site/src/pages/AISettingsPage/MCPServersPage/components/OrganizationPicker.tsx
@@ -33,19 +33,29 @@ export const OrganizationPicker: FC<OrganizationPickerProps> = ({
 		return null;
 	}
 
+	// The selected organization can fall outside the selectable options,
+	// such as a deep link to an organization where servers are listable
+	// but not creatable, so include it when disambiguating labels.
+	const labelOrganizations = organizations.some(
+		(option) => option.id === organization.id,
+	)
+		? organizations
+		: [...organizations, organization];
+
 	return (
 		<div className={cn("flex w-72 flex-col gap-2", className)}>
 			<Label htmlFor={id}>Organization</Label>
 			<OrganizationAutocomplete
 				id={id}
-				ariaLabel={`Organization ${getOrganizationLabel(organization, organizations)}`}
+				ariaLabel={`Organization ${getOrganizationLabel(organization, labelOrganizations)}`}
 				value={organization}
 				onChange={(org) => {
 					if (org) {
 						onChange?.(org);
 					}
 				}}
 				options={organizations}
+				labelOrganizations={labelOrganizations}
 				required
 				disabled={disabled || !onChange || hasSingleSelectedOrganization}
 			/>