Sep 30, 2025
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
 return response.data;
 };

 getToken = async (tokenName: string): Promise<TypesGen.APIKey> => {
 const response = await this.axios.get<TypesGen.APIKey>(
 `/api/v2/users/me/keys/tokens/${tokenName}`,
 );

 return response.data;
 };

 deleteToken = async (keyId: string): Promise<void> => {
 await this.axios.delete(`/api/v2/users/me/keys/${keyId}`);
 };
 return response.data;
 };

 updateToken = async (
 tokenName: string,
 params: TypesGen.UpdateTokenRequest,
 ): Promise<TypesGen.APIKey> => {
 const response = await this.axios.patch<TypesGen.APIKey>(
 `/api/v2/users/me/keys/tokens/${tokenName}`,
 params,
 );

 return response.data;
 };

 getTokenConfig = async (): Promise<TypesGen.TokenConfig> => {
 const response = await this.axios.get(
 "/api/v2/users/me/keys/tokens/tokenconfig",
 return response.data;
 };

 getScopeCatalog = async (): Promise<TypesGen.ScopeCatalog> => {
 const response = await this.axios.get<TypesGen.ScopeCatalog>(
 "/api/v2/auth/scopes",
 );

 return response.data;
 };

 getUsers = async (
 options: TypesGen.UsersRequest,
 signal?: AbortSignal,
diff --git a/site/src/api/queries/tokens.ts b/site/src/api/queries/tokens.ts
 import { API } from "api/api";
 import type { APIKeyWithOwner, TokensFilter } from "api/typesGenerated";
 import type { QueryOptions } from "react-query";

 export const tokens = (filter: TokensFilter) => {
 return {
 queryKey: ["tokens", filter.include_all],
 queryFn: () => API.getTokens(filter),
 } satisfies QueryOptions<APIKeyWithOwner[]>;
 };
diff --git a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
 "data-testid"?: string;
 }

 interface MultiSelectComboboxRef {
 exportinterface MultiSelectComboboxRef {
 selectedValue: Option[];
 input: HTMLInputElement;
 focus: () => void;
 reset: () => void;
 setInputValue: (
 value: string,
 options?: { focus?: boolean; open?: boolean },
 ) => void;
 }

 function transitionToGroupOption(options: Option[], groupBy?: string) {
 }: MultiSelectComboboxProps,
 ref,
 ) => {
 const inputRef = useRef<HTMLInputElement>(null);
 const [open, setOpen] = useState(false);
 const [onScrollbar, setOnScrollbar] = useState(false);
 const [isLoading, setIsLoading] = useState(false);
 const dropdownRef = useRef<HTMLDivElement>(null);
 const listRef = useRef<HTMLDivElement>(null);

 const [selected, setSelected] = useState<Option[]>(
 arrayDefaultOptions ?? [],
 );
 const [options, setOptions] = useState<GroupOption>(
 transitionToGroupOption(arrayDefaultOptions, groupBy),
 );
 const [inputValue, setInputValue] = useState("");
 const debouncedSearchTerm = useDebouncedValue(inputValue, delay || 500);
 const inputRef = useRef<HTMLInputElement>(null);
 const [open, setOpen] = useState(false);
 const [onScrollbar, setOnScrollbar] = useState(false);
 const [isLoading, setIsLoading] = useState(false);
 const dropdownRef = useRef<HTMLDivElement>(null);
 const listRef = useRef<HTMLDivElement>(null);

 const [selected, setSelected] = useState<Option[]>(
 arrayDefaultOptions ?? [],
 );
 const [options, setOptions] = useState<GroupOption>(
 transitionToGroupOption(arrayDefaultOptions, groupBy),
 );
 const [inputValue, setInputValueState] = useState("");
 const debouncedSearchTerm = useDebouncedValue(inputValue, delay || 500);

 const setComboboxInputValue = useCallback(
 (value: string, options?: { focus?: boolean; open?: boolean }) => {
 setInputValueState(value);
 if (options?.open === true) {
 setOpen(true);
 } else if (options?.open === false) {
 setOpen(false);
 } else if (value !== "" && !open) {
 setOpen(true);
 }
 if (options?.focus) {
 setTimeout(() => {
 inputRef.current?.focus();
 }, 0);
 }
 },
 [open],
 );

 const [previousValue, setPreviousValue] = useState<Option[]>(value || []);
 if (value && value !== previousValue) {
 setPreviousValue(value);
 setSelected(value);
 }

 useImperativeHandle(
 ref,
 () => ({
 selectedValue: [...selected],
 input: inputRef.current as HTMLInputElement,
 focus: () => inputRef?.current?.focus(),
 reset: () => setSelected([]),
 }),
 [selected],
 );
 useImperativeHandle(
 ref,
 () => ({
 selectedValue: [...selected],
 input: inputRef.current as HTMLInputElement,
 focus: () => inputRef?.current?.focus(),
 reset: () => setSelected([]),
 setInputValue: (value: string, options?: { focus?: boolean; open?: boolean }) => {
 setComboboxInputValue(value, options);
 },
 }),
 [selected, setComboboxInputValue],
 );

 const handleUnselect = useCallback(
 (option: Option) => {
 onMaxSelected?.(selected.length);
 return;
 }
 setInputValue("");
 setComboboxInputValue("");
 const newOptions = [...selected, { value, label: value }];
 setSelected(newOptions);
 onChange?.(newOptions);
 value={inputValue}
 disabled={disabled}
 onValueChange={(value) => {
 setInputValue(value);
 setInputValueState(value);
 inputProps?.onValueChange?.(value);
 }}
 onBlur={(event) => {
 onMaxSelected?.(selected.length);
 return;
 }
 setInputValue("");
 setComboboxInputValue("");
 const newOptions = [...selected, option];
 setSelected(newOptions);
 onChange?.(newOptions);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -536,6 +536,14 @@ class ApiMethods {
		return response.data;
		};

		getToken = async (tokenName: string): Promise<TypesGen.APIKey> => {
		const response = await this.axios.get<TypesGen.APIKey>(
		`/api/v2/users/me/keys/tokens/${tokenName}`,
		);

		return response.data;
		};

		deleteToken = async (keyId: string): Promise<void> => {
		await this.axios.delete(`/api/v2/users/me/keys/${keyId}`);
		};
Expand All		@@ -551,6 +559,18 @@ class ApiMethods {
		return response.data;
		};

		updateToken = async (
		tokenName: string,
		params: TypesGen.UpdateTokenRequest,
		): Promise<TypesGen.APIKey> => {
		const response = await this.axios.patch<TypesGen.APIKey>(
		`/api/v2/users/me/keys/tokens/${tokenName}`,
		params,
		);

		return response.data;
		};

		getTokenConfig = async (): Promise<TypesGen.TokenConfig> => {
		const response = await this.axios.get(
		"/api/v2/users/me/keys/tokens/tokenconfig",
Expand All		@@ -559,6 +579,14 @@ class ApiMethods {
		return response.data;
		};

		getScopeCatalog = async (): Promise<TypesGen.ScopeCatalog> => {
		const response = await this.axios.get<TypesGen.ScopeCatalog>(
		"/api/v2/auth/scopes",
		);

		return response.data;
		};

		getUsers = async (
		options: TypesGen.UsersRequest,
		signal?: AbortSignal,
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,10 @@
		import { API } from "api/api";
		import type { APIKeyWithOwner, TokensFilter } from "api/typesGenerated";
		import type { QueryOptions } from "react-query";

		export const tokens = (filter: TokensFilter) => {
		return {
		queryKey: ["tokens", filter.include_all],
		queryFn: () => API.getTokens(filter),
		} satisfies QueryOptions<APIKeyWithOwner[]>;
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -108,11 +108,15 @@ interface MultiSelectComboboxProps {
		"data-testid"?: string;
		}

		interface MultiSelectComboboxRef {
		exportinterface MultiSelectComboboxRef {
		selectedValue: Option[];
		input: HTMLInputElement;
		focus: () => void;
		reset: () => void;
		setInputValue: (
		value: string,
		options?: { focus?: boolean; open?: boolean },
		) => void;
		}

		function transitionToGroupOption(options: Option[], groupBy?: string) {
Expand DownExpand Up		@@ -211,38 +215,60 @@ export const MultiSelectCombobox = forwardRef<
		}: MultiSelectComboboxProps,
		ref,
		) => {
		const inputRef = useRef<HTMLInputElement>(null);
		const [open, setOpen] = useState(false);
		const [onScrollbar, setOnScrollbar] = useState(false);
		const [isLoading, setIsLoading] = useState(false);
		const dropdownRef = useRef<HTMLDivElement>(null);
		const listRef = useRef<HTMLDivElement>(null);

		const [selected, setSelected] = useState<Option[]>(
		arrayDefaultOptions ?? [],
		);
		const [options, setOptions] = useState<GroupOption>(
		transitionToGroupOption(arrayDefaultOptions, groupBy),
		);
		const [inputValue, setInputValue] = useState("");
		const debouncedSearchTerm = useDebouncedValue(inputValue, delay \|\| 500);
		const inputRef = useRef<HTMLInputElement>(null);
		const [open, setOpen] = useState(false);
		const [onScrollbar, setOnScrollbar] = useState(false);
		const [isLoading, setIsLoading] = useState(false);
		const dropdownRef = useRef<HTMLDivElement>(null);
		const listRef = useRef<HTMLDivElement>(null);

		const [selected, setSelected] = useState<Option[]>(
		arrayDefaultOptions ?? [],
		);
		const [options, setOptions] = useState<GroupOption>(
		transitionToGroupOption(arrayDefaultOptions, groupBy),
		);
		const [inputValue, setInputValueState] = useState("");
		const debouncedSearchTerm = useDebouncedValue(inputValue, delay \|\| 500);

		const setComboboxInputValue = useCallback(
		(value: string, options?: { focus?: boolean; open?: boolean }) => {
		setInputValueState(value);
		if (options?.open === true) {
		setOpen(true);
		} else if (options?.open === false) {
		setOpen(false);
		} else if (value !== "" && !open) {
		setOpen(true);
		}
		if (options?.focus) {
		setTimeout(() => {
		inputRef.current?.focus();
		}, 0);
		}
		},
		[open],
		);

		const [previousValue, setPreviousValue] = useState<Option[]>(value \|\| []);
		if (value && value !== previousValue) {
		setPreviousValue(value);
		setSelected(value);
		}

		useImperativeHandle(
		ref,
		() => ({
		selectedValue: [...selected],
		input: inputRef.current as HTMLInputElement,
		focus: () => inputRef?.current?.focus(),
		reset: () => setSelected([]),
		}),
		[selected],
		);
		useImperativeHandle(
		ref,
		() => ({
		selectedValue: [...selected],
		input: inputRef.current as HTMLInputElement,
		focus: () => inputRef?.current?.focus(),
		reset: () => setSelected([]),
		setInputValue: (value: string, options?: { focus?: boolean; open?: boolean }) => {
		setComboboxInputValue(value, options);
		},
		}),
		[selected, setComboboxInputValue],
		);

		const handleUnselect = useCallback(
		(option: Option) => {
Expand DownExpand Up		@@ -398,7 +424,7 @@ export const MultiSelectCombobox = forwardRef<
		onMaxSelected?.(selected.length);
		return;
		}
		setInputValue("");
		setComboboxInputValue("");
		const newOptions = [...selected, { value, label: value }];
		setSelected(newOptions);
		onChange?.(newOptions);
Expand DownExpand Up		@@ -554,7 +580,7 @@ export const MultiSelectCombobox = forwardRef<
		value={inputValue}
		disabled={disabled}
		onValueChange={(value) => {
		setInputValue(value);
		setInputValueState(value);
		inputProps?.onValueChange?.(value);
		}}
		onBlur={(event) => {
Expand DownExpand Up		@@ -663,7 +689,7 @@ export const MultiSelectCombobox = forwardRef<
		onMaxSelected?.(selected.length);
		return;
		}
		setInputValue("");
		setComboboxInputValue("");
		const newOptions = [...selected, option];
		setSelected(newOptions);
		onChange?.(newOptions);
Expand Down