Refactor command center and focus handling

packages/app/src/hooks/use-command-center.ts

@@ -0,0 +1,192 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { TextInput } from "react-native";
+import { router, usePathname } from "expo-router";
+import { useKeyboardNavStore } from "@/stores/keyboard-nav-store";
+import { useAggregatedAgents, type AggregatedAgent } from "@/hooks/use-aggregated-agents";
+import { useSessionStore } from "@/stores/session-store";
+import {
+  clearCommandCenterFocusRestoreElement,
+  takeCommandCenterFocusRestoreElement,
+} from "@/utils/command-center-focus-restore";
+import { focusWithRetries } from "@/utils/web-focus";
+
+function agentKey(agent: Pick<AggregatedAgent, "serverId" | "id">): string {
+  return `${agent.serverId}:${agent.id}`;
+}
+
+function isMatch(agent: AggregatedAgent, query: string): boolean {
+  if (!query) return true;
+  const q = query.toLowerCase();
+  const title = (agent.title ?? "New agent").toLowerCase();
+  const cwd = agent.cwd.toLowerCase();
+  const host = agent.serverLabel.toLowerCase();
+  return title.includes(q) || cwd.includes(q) || host.includes(q);
+}
+
+function sortAgents(left: AggregatedAgent, right: AggregatedAgent): number {
+  const leftAttention = left.requiresAttention ? 1 : 0;
+  const rightAttention = right.requiresAttention ? 1 : 0;
+  if (leftAttention !== rightAttention) return rightAttention - leftAttention;
+
+  const leftRunning = left.status === "running" ? 1 : 0;
+  const rightRunning = right.status === "running" ? 1 : 0;
+  if (leftRunning !== rightRunning) return rightRunning - leftRunning;
+
+  return right.lastActivityAt.getTime() - left.lastActivityAt.getTime();
+}
+
+function parseAgentKeyFromPathname(pathname: string): string | null {
+  const match = pathname.match(/^\/agent\/([^/]+)\/([^/]+)/);
+  if (!match) return null;
+  return `${match[1]}:${match[2]}`;
+}
+
+export function useCommandCenter() {
+  const pathname = usePathname();
+  const { agents } = useAggregatedAgents();
+  const open = useKeyboardNavStore((s) => s.commandCenterOpen);
+  const setOpen = useKeyboardNavStore((s) => s.setCommandCenterOpen);
+  const requestFocusChatInput = useKeyboardNavStore((s) => s.requestFocusChatInput);
+  const inputRef = useRef<TextInput>(null);
+  const didNavigateRef = useRef(false);
+  const prevOpenRef = useRef(open);
+  const [query, setQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const results = useMemo(() => {
+    const filtered = agents.filter((agent) => isMatch(agent, query));
+    filtered.sort(sortAgents);
+    return filtered;
+  }, [agents, query]);
+
+  const agentKeyFromPathname = useMemo(
+    () => parseAgentKeyFromPathname(pathname),
+    [pathname]
+  );
+
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  const handleSelect = useCallback(
+    (agent: AggregatedAgent) => {
+      didNavigateRef.current = true;
+      const session = useSessionStore.getState().sessions[agent.serverId];
+      session?.client?.clearAgentAttention(agent.id);
+
+      const shouldReplace = pathname.startsWith("/agent/");
+      const navigate = shouldReplace ? router.replace : router.push;
+
+      requestFocusChatInput(agentKey(agent));
+      // Don't restore focus back to the prior element after we navigate.
+      clearCommandCenterFocusRestoreElement();
+      setOpen(false);
+      navigate(`/agent/${agent.serverId}/${agent.id}` as any);
+    },
+    [pathname, requestFocusChatInput, setOpen]
+  );
+
+  useEffect(() => {
+    const prevOpen = prevOpenRef.current;
+    prevOpenRef.current = open;
+
+    if (!open) {
+      setQuery("");
+      setActiveIndex(0);
+
+      if (prevOpen && !didNavigateRef.current) {
+        const el = takeCommandCenterFocusRestoreElement();
+        const isFocused = () =>
+          Boolean(el) &&
+          typeof document !== "undefined" &&
+          document.activeElement === el;
+
+        const cancel = focusWithRetries({
+          focus: () => el?.focus(),
+          isFocused,
+          onTimeout: () => {
+            if (agentKeyFromPathname) {
+              requestFocusChatInput(agentKeyFromPathname);
+            }
+          },
+        });
+        return cancel;
+      }
+
+      return;
+    }
+
+    didNavigateRef.current = false;
+
+    const id = setTimeout(() => {
+      inputRef.current?.focus();
+    }, 0);
+    return () => clearTimeout(id);
+  }, [agentKeyFromPathname, open, requestFocusChatInput]);
+
+  useEffect(() => {
+    if (!open) return;
+    if (activeIndex >= results.length) {
+      setActiveIndex(results.length > 0 ? results.length - 1 : 0);
+    }
+  }, [activeIndex, open, results.length]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const handler = (event: KeyboardEvent) => {
+      const key = event.key;
+      if (
+        key !== "ArrowDown" &&
+        key !== "ArrowUp" &&
+        key !== "Enter" &&
+        key !== "Escape"
+      ) {
+        return;
+      }
+
+      if (key === "Escape") {
+        event.preventDefault();
+        handleClose();
+        return;
+      }
+
+      if (key === "Enter") {
+        if (results.length === 0) return;
+        event.preventDefault();
+        const index = Math.max(0, Math.min(activeIndex, results.length - 1));
+        handleSelect(results[index]!);
+        return;
+      }
+
+      if (key === "ArrowDown" || key === "ArrowUp") {
+        if (results.length === 0) return;
+        event.preventDefault();
+        setActiveIndex((current) => {
+          const delta = key === "ArrowDown" ? 1 : -1;
+          const next = current + delta;
+          if (next < 0) return results.length - 1;
+          if (next >= results.length) return 0;
+          return next;
+        });
+      }
+    };
+
+    // react-native-web can stop propagation on key events, so listen in capture phase.
+    window.addEventListener("keydown", handler, true);
+    return () => window.removeEventListener("keydown", handler, true);
+  }, [activeIndex, handleClose, handleSelect, open, results]);
+
+  return {
+    open,
+    inputRef,
+    query,
+    setQuery,
+    activeIndex,
+    setActiveIndex,
+    results,
+    handleClose,
+    handleSelect,
+  };
+}
+

packages/app/src/hooks/use-global-keyboard-nav.ts

@@ -4,6 +4,7 @@ import { usePathname, useRouter } from "expo-router";
 import { getIsTauri } from "@/constants/layout";
 import { useKeyboardNavStore } from "@/stores/keyboard-nav-store";
 import { parseSidebarAgentKey } from "@/utils/sidebar-shortcuts";
+import { setCommandCenterFocusRestoreElement } from "@/utils/command-center-focus-restore";
 
 export function useGlobalKeyboardNav({
   enabled,
@@ -137,7 +138,7 @@ export function useGlobalKeyboardNav({
             (target instanceof HTMLElement ? target : null);
           const active = document.activeElement;
           const activeEl = active instanceof HTMLElement ? active : null;
-          s.setFocusRestoreElement(
+          setCommandCenterFocusRestoreElement(
             (targetEl as HTMLElement | null) ?? activeEl ?? null
           );
         }

packages/app/src/hooks/use-sidebar-agent-sections.ts

@@ -1,7 +1,6 @@
-import { useEffect, useMemo } from "react";
-import { useQueries, type UseQueryOptions } from "@tanstack/react-query";
+import { useEffect, useMemo, useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
 import {
-  CHECKOUT_STATUS_STALE_TIME,
   checkoutStatusQueryKey,
   type CheckoutStatusPayload,
 } from "@/hooks/use-checkout-status-query";
@@ -23,32 +22,32 @@ export interface SidebarSectionData {
 }
 
 export function useSidebarAgentSections(agents: AggregatedAgent[]): SidebarSectionData[] {
-  const checkoutCacheQueries = useQueries({
-    queries: agents.map(
-      (agent): UseQueryOptions<CheckoutStatusPayload> => ({
-        queryKey: checkoutStatusQueryKey(agent.serverId, agent.cwd),
-        enabled: false,
-        staleTime: CHECKOUT_STATUS_STALE_TIME,
-        queryFn: async (): Promise<CheckoutStatusPayload> => {
-          throw new Error("checkout status cache-only query should not run");
-        },
-      })
-    ),
-  });
+  const queryClient = useQueryClient();
+  const [checkoutCacheBump, setCheckoutCacheBump] = useState(0);
+
+  // Re-render when checkout status cache updates so grouping can switch from cwd→remote.
+  useEffect(() => {
+    const unsubscribe = queryClient.getQueryCache().subscribe((event) => {
+      const queryKey = event?.query?.queryKey;
+      if (!Array.isArray(queryKey) || queryKey[0] !== "checkoutStatus") {
+        return;
+      }
+      setCheckoutCacheBump((v) => v + 1);
+    });
+    return unsubscribe;
+  }, [queryClient]);
 
   const remoteUrlByAgentKey = useMemo(() => {
     const result = new Map<string, string | null>();
-    for (let i = 0; i < agents.length; i++) {
-      const agent = agents[i];
-      if (!agent) {
-        continue;
-      }
-      const checkout = checkoutCacheQueries[i]?.data ?? null;
-      const remoteUrl = checkout?.remoteUrl ?? null;
-      result.set(`${agent.serverId}:${agent.id}`, remoteUrl);
+    for (const agent of agents) {
+      const checkout =
+        queryClient.getQueryData<CheckoutStatusPayload>(
+          checkoutStatusQueryKey(agent.serverId, agent.cwd)
+        ) ?? null;
+      result.set(`${agent.serverId}:${agent.id}`, checkout?.remoteUrl ?? null);
     }
     return result;
-  }, [agents, checkoutCacheQueries]);
+  }, [agents, checkoutCacheBump, queryClient]);
 
   const projectOrder = useSectionOrderStore((state) => state.projectOrder);
   const setProjectOrder = useSectionOrderStore((state) => state.setProjectOrder);
@@ -100,4 +99,3 @@ export function useSidebarAgentSections(agents: AggregatedAgent[]): SidebarSecti
 
   return sections;
 }
-