diff --git a/site/src/pages/AgentsPage/components/ChatMessageInput/ChatMessageInput.stories.tsx b/site/src/pages/AgentsPage/components/ChatMessageInput/ChatMessageInput.stories.tsx
index e06a9da113..5acf42671c 100644
--- a/site/src/pages/AgentsPage/components/ChatMessageInput/ChatMessageInput.stories.tsx
+++ b/site/src/pages/AgentsPage/components/ChatMessageInput/ChatMessageInput.stories.tsx
@@ -76,6 +76,13 @@ const expectNoVisibleText = async (text: string) => {
 	});
 };
 
+const expectNoVisibleTextImmediately = (text: string) => {
+	const matches = within(document.body).queryAllByText(text);
+	expect(
+		matches.every((element) => element.getClientRects().length === 0),
+	).toBe(true);
+};
+
 const editorFromCanvas = (canvasElement: HTMLElement) => {
 	const canvas = within(canvasElement);
 	return canvas.getByTestId("chat-message-input");
@@ -192,6 +199,18 @@ export const SlashInsideUrlDoesNotOpen: Story = {
 	},
 };
 
+export const BackspaceClosesWithoutEmptyStateFlash: Story = {
+	play: async ({ canvasElement }) => {
+		const editor = await typeInEditor(canvasElement, "/");
+		await findVisibleText("/reviewer");
+		await userEvent.keyboard("{Backspace}");
+
+		expect(editor.textContent).toBe("");
+		expectNoVisibleTextImmediately("No personal skills found.");
+		await expectNoVisibleText("/reviewer");
+	},
+};
+
 export const EscapeClosesWithoutReplacing: Story = {
 	play: async ({ canvasElement }) => {
 		const editor = await typeInEditor(canvasElement, "/");
diff --git a/site/src/pages/AgentsPage/components/ChatMessageInput/PersonalSkillsTriggerMenu.tsx b/site/src/pages/AgentsPage/components/ChatMessageInput/PersonalSkillsTriggerMenu.tsx
index 0c8dba1394..ae0b509bbd 100644
--- a/site/src/pages/AgentsPage/components/ChatMessageInput/PersonalSkillsTriggerMenu.tsx
+++ b/site/src/pages/AgentsPage/components/ChatMessageInput/PersonalSkillsTriggerMenu.tsx
@@ -1,3 +1,4 @@
+import { useLayoutEffect, useState } from "react";
 import type * as TypesGen from "#/api/typesGenerated";
 import {
 	Command,
@@ -35,6 +36,15 @@ type PersonalSkillsTriggerMenuProps = {
 	onClose: () => void;
 };
 
+type PersonalSkillsMenuState = {
+	anchorRect: CaretAnchorRect;
+	query: string;
+	skills: readonly TypesGen.UserSkillMetadata[];
+	isLoading?: boolean;
+	isError?: boolean;
+	selectedIndex: number;
+};
+
 export const PersonalSkillsTriggerMenu = ({
 	open,
 	anchorRect,
@@ -47,34 +57,72 @@ export const PersonalSkillsTriggerMenu = ({
 	onSelect,
 	onClose,
 }: PersonalSkillsTriggerMenuProps) => {
+	const [lastOpenMenuState, setLastOpenMenuState] =
+		useState<PersonalSkillsMenuState | null>(null);
+	const isAnchoredOpen = open && anchorRect !== null;
+	const activeMenuState: PersonalSkillsMenuState | null = isAnchoredOpen
+		? {
+				anchorRect,
+				query,
+				skills,
+				isLoading,
+				isError,
+				selectedIndex,
+			}
+		: null;
+	const menuState = activeMenuState ?? lastOpenMenuState;
+	const menuAnchorRect = menuState?.anchorRect ?? null;
+	const menuSkills = menuState?.skills ?? [];
+	const menuSelectedIndex = menuState?.selectedIndex ?? -1;
+
+	useLayoutEffect(() => {
+		if (!isAnchoredOpen) {
+			return;
+		}
+		setLastOpenMenuState({
+			anchorRect,
+			query,
+			skills,
+			isLoading,
+			isError,
+			selectedIndex,
+		});
+	}, [
+		anchorRect,
+		isAnchoredOpen,
+		isError,
+		isLoading,
+		query,
+		selectedIndex,
+		skills,
+	]);
+
 	const handleHighlightedValueChange = (value: string) => {
-		const nextIndex = skills.findIndex((skill) => skill.name === value);
+		const nextIndex = menuSkills.findIndex((skill) => skill.name === value);
 		if (nextIndex >= 0) {
 			onSelectedIndexChange(nextIndex);
 		}
 	};
 
-	const shouldRender = open && anchorRect;
-
 	return (
 		<Popover
-			open={Boolean(shouldRender)}
+			open={isAnchoredOpen}
 			onOpenChange={(nextOpen) => {
 				if (!nextOpen) {
 					onClose();
 				}
 			}}
 		>
-			{shouldRender && (
+			{menuAnchorRect && (
 				<PopoverAnchor asChild>
 					<span
 						aria-hidden="true"
 						style={{
 							position: "fixed",
-							top: anchorRect.top,
-							left: anchorRect.left,
+							top: menuAnchorRect.top,
+							left: menuAnchorRect.left,
 							width: 1,
-							height: Math.max(anchorRect.height, MIN_ANCHOR_HEIGHT_PX),
+							height: Math.max(menuAnchorRect.height, MIN_ANCHOR_HEIGHT_PX),
 							pointerEvents: "none",
 						}}
 					/>
@@ -92,26 +140,26 @@ export const PersonalSkillsTriggerMenu = ({
 					shouldFilter={false}
 					loop={false}
 					onValueChange={handleHighlightedValueChange}
-					value={skills[selectedIndex]?.name ?? ""}
+					value={menuSkills[menuSelectedIndex]?.name ?? ""}
 				>
 					<CommandList className="max-h-72 border-t-0 mobile-full-width-dropdown-scroll-area">
-						{isLoading ? (
+						{menuState?.isLoading ? (
 							<CommandItem value="loading" disabled>
 								Loading personal skills...
 							</CommandItem>
-						) : isError ? (
+						) : menuState?.isError ? (
 							<CommandItem value="error" disabled>
 								Could not load personal skills. Close and type / again to retry.
 							</CommandItem>
-						) : skills.length === 0 ? (
+						) : menuSkills.length === 0 ? (
 							<CommandEmpty>
-								{query
+								{menuState?.query
 									? "No personal skills match that query."
 									: "No personal skills found."}
 							</CommandEmpty>
 						) : (
 							<CommandGroup heading="Personal skills">
-								{skills.map((skill) => (
+								{menuSkills.map((skill) => (
 									<CommandItem
 										key={skill.id}
 										value={skill.name}