From 6a97519afacb44b374e282c80c94c069eb53e97b Mon Sep 17 00:00:00 2001
From: jnjpng <jinjpeng@gmail.com>
Date: Tue, 30 Dec 2025 16:35:03 -0800
Subject: [PATCH] fix: slash command menu scrolling on keypress  (#430)

---
 src/cli/components/AgentInfoBar.tsx        | 22 +++++++++++++---------
 src/cli/hooks/useAutocompleteNavigation.ts |  8 +++++++-
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/cli/components/AgentInfoBar.tsx b/src/cli/components/AgentInfoBar.tsx
index 083fecb..faf91a1 100644
--- a/src/cli/components/AgentInfoBar.tsx
+++ b/src/cli/components/AgentInfoBar.tsx
@@ -1,6 +1,6 @@
 import { Box, Text } from "ink";
 import Link from "ink-link";
-import { useMemo } from "react";
+import { memo, useMemo } from "react";
 import { DEFAULT_AGENT_NAME } from "../../constants";
 import { settingsManager } from "../../settings-manager";
 import { colors } from "./colors";
@@ -12,9 +12,9 @@ interface AgentInfoBarProps {
 }
 
 /**
- * Shows agent info bar with current agent details and useful links
+ * Shows agent info bar with current agent details and useful links.
  */
-export function AgentInfoBar({
+export const AgentInfoBar = memo(function AgentInfoBar({
   agentId,
   agentName,
   serverUrl,
@@ -50,18 +50,22 @@ export function AgentInfoBar({
         ) : (
           <Text color="gray"> (type /pin to pin agent)</Text>
         )}
+        <Text dimColor> · {agentId}</Text>
       </Box>
       <Box>
-        <Text dimColor>{agentId}</Text>
         {isCloudUser && (
           <>
-            <Text dimColor> · </Text>
             <Link url={`https://app.letta.com/agents/${agentId}`}>
-              <Text color={colors.link.text}>Open in ADE ↗</Text>
+              <Text>Open in ADE ↗ </Text>
             </Link>
-            <Text dimColor> · </Text>
+          </>
+        )}
+      </Box>
+      <Box>
+        {isCloudUser && (
+          <>
             <Link url="https://app.letta.com/settings/organization/usage">
-              <Text color={colors.link.text}>View usage ↗</Text>
+              <Text>View usage ↗ </Text>
             </Link>
           </>
         )}
@@ -69,4 +73,4 @@ export function AgentInfoBar({
       </Box>
     </Box>
   );
-}
+});
diff --git a/src/cli/hooks/useAutocompleteNavigation.ts b/src/cli/hooks/useAutocompleteNavigation.ts
index 8910430..051be89 100644
--- a/src/cli/hooks/useAutocompleteNavigation.ts
+++ b/src/cli/hooks/useAutocompleteNavigation.ts
@@ -38,6 +38,7 @@ export function useAutocompleteNavigation<T>({
 }: UseAutocompleteNavigationOptions<T>): UseAutocompleteNavigationResult {
   const [selectedIndex, setSelectedIndex] = useState(0);
   const prevMatchCountRef = useRef(0);
+  const prevIsActiveRef = useRef(false);
 
   // Reset selected index when matches change significantly
   useEffect(() => {
@@ -48,9 +49,14 @@ export function useAutocompleteNavigation<T>({
   }, [matches.length]);
 
   // Notify parent about active state changes (only if manageActiveState is true)
+  // Only fire callback when the boolean active state actually changes (not on every match count change)
   useEffect(() => {
     if (manageActiveState) {
-      onActiveChange?.(matches.length > 0);
+      const isActive = matches.length > 0;
+      if (isActive !== prevIsActiveRef.current) {
+        prevIsActiveRef.current = isActive;
+        onActiveChange?.(isActive);
+      }
     }
   }, [matches.length, onActiveChange, manageActiveState]);