diff --git a/packages/app/src/components/prompt-input/slash-popover.tsx b/packages/app/src/components/prompt-input/slash-popover.tsx
index 554a15bb7..259883d61 100644
--- a/packages/app/src/components/prompt-input/slash-popover.tsx
+++ b/packages/app/src/components/prompt-input/slash-popover.tsx
@@ -53,18 +53,15 @@ export const PromptPopover: Component<PromptPopoverProps> = (props) => {
             >
               <For each={props.atFlat.slice(0, 10)}>
                 {(item) => {
-                  const active = props.atActive === props.atKey(item)
-                  const shared = {
-                    "w-full flex items-center gap-x-2 rounded-md px-2 py-0.5": true,
-                    "bg-surface-raised-base-hover": active,
-                  }
+                  const key = props.atKey(item)
 
                   if (item.type === "agent") {
                     return (
                       <button
-                        classList={shared}
+                        class="w-full flex items-center gap-x-2 rounded-md px-2 py-0.5"
+                        classList={{ "bg-surface-raised-base-hover": props.atActive === key }}
                         onClick={() => props.onAtSelect(item)}
-                        onMouseEnter={() => props.setAtActive(props.atKey(item))}
+                        onMouseEnter={() => props.setAtActive(key)}
                       >
                         <Icon name="brain" size="small" class="text-icon-info-active shrink-0" />
                         <span class="text-14-regular text-text-strong whitespace-nowrap">@{item.name}</span>
@@ -78,9 +75,10 @@ export const PromptPopover: Component<PromptPopoverProps> = (props) => {
 
                   return (
                     <button
-                      classList={shared}
+                      class="w-full flex items-center gap-x-2 rounded-md px-2 py-0.5"
+                      classList={{ "bg-surface-raised-base-hover": props.atActive === key }}
                       onClick={() => props.onAtSelect(item)}
-                      onMouseEnter={() => props.setAtActive(props.atKey(item))}
+                      onMouseEnter={() => props.setAtActive(key)}
                     >
                       <FileIcon node={{ path: item.path, type: "file" }} class="shrink-0 size-4" />
                       <div class="flex items-center text-14-regular min-w-0">