Refine agent list attention handling

2026-03-08 15:39:40 +07:00
parent 03e1915316
commit faa5aaab6f
21 changed files with 1178 additions and 390 deletions
@@ -0,0 +1,152 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AppState, Platform } from "react-native";
+import type { DaemonClient } from "@server/client/daemon-client";
+import {
+  shouldClearAgentAttention,
+  type AgentAttentionClearTrigger,
+} from "@/utils/agent-attention";
+
+type AttentionReason = "finished" | "error" | "permission" | null | undefined;
+
+interface UseAgentAttentionClearParams {
+  agentId: string | null | undefined;
+  client: DaemonClient | null;
+  isConnected: boolean;
+  requiresAttention: boolean | null | undefined;
+  attentionReason: AttentionReason;
+  isScreenFocused: boolean;
+}
+
+interface AgentAttentionClearController {
+  clearOnInputFocus: () => void;
+  clearOnPromptSend: () => void;
+  clearOnAgentBlur: () => void;
+}
+
+function getIsAppVisible(): boolean {
+  const isAppStateActive = AppState.currentState === "active";
+  if (Platform.OS !== "web") {
+    return isAppStateActive;
+  }
+  const documentVisible =
+    typeof document === "undefined" || document.visibilityState === "visible";
+  const windowFocused =
+    typeof document === "undefined" ||
+    typeof document.hasFocus !== "function" ||
+    document.hasFocus();
+  return isAppStateActive && documentVisible && windowFocused;
+}
+
+export function useAgentAttentionClear({
+  agentId,
+  client,
+  isConnected,
+  requiresAttention,
+  attentionReason,
+  isScreenFocused,
+}: UseAgentAttentionClearParams): AgentAttentionClearController {
+  const [isAppVisible, setIsAppVisible] = useState<boolean>(() => getIsAppVisible());
+  const deferredFocusEntryClearRef = useRef(false);
+  const prevRequiresAttentionRef = useRef(Boolean(requiresAttention));
+  const prevActivelyViewedRef = useRef(isScreenFocused && getIsAppVisible());
+  const prevScreenFocusedRef = useRef(false);
+  const prevAppVisibleRef = useRef(getIsAppVisible());
+
+  const clearAttention = useCallback(
+    (trigger: AgentAttentionClearTrigger) => {
+      const resolvedAgentId = agentId?.trim();
+      if (!client || !resolvedAgentId) {
+        return;
+      }
+      if (
+        !shouldClearAgentAttention({
+          agentId: resolvedAgentId,
+          isConnected,
+          requiresAttention,
+          attentionReason,
+          trigger,
+          hasDeferredFocusEntryClear: deferredFocusEntryClearRef.current,
+        })
+      ) {
+        return;
+      }
+      deferredFocusEntryClearRef.current = false;
+      client.clearAgentAttention(resolvedAgentId);
+    },
+    [agentId, attentionReason, client, isConnected, requiresAttention]
+  );
+
+  useEffect(() => {
+    const updateVisibility = () => {
+      setIsAppVisible(getIsAppVisible());
+    };
+
+    const appStateSubscription = AppState.addEventListener(
+      "change",
+      updateVisibility
+    );
+
+    if (Platform.OS === "web" && typeof document !== "undefined") {
+      document.addEventListener("visibilitychange", updateVisibility);
+      window.addEventListener("focus", updateVisibility);
+      window.addEventListener("blur", updateVisibility);
+
+      return () => {
+        appStateSubscription.remove();
+        document.removeEventListener("visibilitychange", updateVisibility);
+        window.removeEventListener("focus", updateVisibility);
+        window.removeEventListener("blur", updateVisibility);
+      };
+    }
+
+    return () => {
+      appStateSubscription.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!requiresAttention) {
+      deferredFocusEntryClearRef.current = false;
+    }
+  }, [requiresAttention]);
+
+  useEffect(() => {
+    const isActivelyViewed = isScreenFocused && isAppVisible;
+    if (
+      !prevRequiresAttentionRef.current &&
+      Boolean(requiresAttention) &&
+      prevActivelyViewedRef.current &&
+      isActivelyViewed
+    ) {
+      deferredFocusEntryClearRef.current = true;
+    }
+    prevRequiresAttentionRef.current = Boolean(requiresAttention);
+    prevActivelyViewedRef.current = isActivelyViewed;
+  }, [isAppVisible, isScreenFocused, requiresAttention]);
+
+  useEffect(() => {
+    const enteredScreenFocus =
+      !prevScreenFocusedRef.current && isScreenFocused && isAppVisible;
+    const resumedIntoFocusedAgent =
+      !prevAppVisibleRef.current && isAppVisible && isScreenFocused;
+
+    if (enteredScreenFocus || resumedIntoFocusedAgent) {
+      clearAttention("focus-entry");
+    }
+
+    prevScreenFocusedRef.current = isScreenFocused;
+    prevAppVisibleRef.current = isAppVisible;
+  }, [clearAttention, isAppVisible, isScreenFocused]);
+
+  return {
+    clearOnInputFocus: useCallback(() => {
+      clearAttention("input-focus");
+    }, [clearAttention]),
+    clearOnPromptSend: useCallback(() => {
+      clearAttention("prompt-send");
+    }, [clearAttention]),
+    clearOnAgentBlur: useCallback(() => {
+      clearAttention("agent-blur");
+    }, [clearAttention]),
+  };
+}
@@ -19,9 +19,12 @@ export interface AggregatedAgentsResult {
  refreshAll: () => void;
 }

-export function useAggregatedAgents(): AggregatedAgentsResult {
+export function useAggregatedAgents(options?: {
+  includeArchived?: boolean;
+}): AggregatedAgentsResult {
  const { daemons } = useDaemonRegistry();
  const runtime = getHostRuntimeStore();
+  const includeArchived = options?.includeArchived ?? false;
  const runtimeVersion = useSyncExternalStore(
    (onStoreChange) => runtime.subscribeAll(onStoreChange),
    () => runtime.getVersion(),
@@ -55,7 +58,7 @@ export function useAggregatedAgents(): AggregatedAgentsResult {
      }
      const serverLabel = serverLabelById.get(serverId) ?? serverId;
      for (const agent of agents.values()) {
-        if (agent.archivedAt) {
+        if (!includeArchived && agent.archivedAt) {
          continue;
        }
        const nextAgent: AggregatedAgent = {
@@ -112,7 +115,7 @@ export function useAggregatedAgents(): AggregatedAgentsResult {
      isInitialLoad,
      isRevalidating,
    };
-  }, [daemons, runtime, runtimeVersion, sessionAgents]);
+  }, [daemons, includeArchived, runtime, runtimeVersion, sessionAgents]);

  return {
    ...result,
@@ -0,0 +1,79 @@
+import { describe, expect, it } from "vitest";
+import { __private__ } from "./use-all-agents-list";
+import type { Agent } from "@/stores/session-store";
+
+function makeAgent(input?: Partial<Agent>): Agent {
+  const timestamp = new Date("2026-03-08T10:00:00.000Z");
+  return {
+    serverId: "server-1",
+    id: input?.id ?? "agent-1",
+    provider: input?.provider ?? "codex",
+    status: input?.status ?? "idle",
+    createdAt: input?.createdAt ?? timestamp,
+    updatedAt: input?.updatedAt ?? timestamp,
+    lastUserMessageAt: input?.lastUserMessageAt ?? null,
+    lastActivityAt: input?.lastActivityAt ?? timestamp,
+    capabilities: input?.capabilities ?? {
+      supportsStreaming: true,
+      supportsSessionPersistence: true,
+      supportsDynamicModes: true,
+      supportsMcpServers: true,
+      supportsReasoningStream: true,
+      supportsToolInvocations: true,
+    },
+    currentModeId: input?.currentModeId ?? null,
+    availableModes: input?.availableModes ?? [],
+    pendingPermissions: input?.pendingPermissions ?? [],
+    persistence: input?.persistence ?? null,
+    runtimeInfo: input?.runtimeInfo,
+    lastUsage: input?.lastUsage,
+    lastError: input?.lastError ?? null,
+    title: input?.title ?? "Agent",
+    cwd: input?.cwd ?? "/tmp/project",
+    model: input?.model ?? null,
+    thinkingOptionId: input?.thinkingOptionId,
+    requiresAttention: input?.requiresAttention ?? false,
+    attentionReason: input?.attentionReason ?? null,
+    attentionTimestamp: input?.attentionTimestamp ?? null,
+    archivedAt: input?.archivedAt ?? null,
+    labels: input?.labels ?? {},
+    projectPlacement: input?.projectPlacement ?? null,
+  };
+}
+
+describe("useAllAgentsList", () => {
+  it("excludes archived agents by default", () => {
+    const visibleAgent = makeAgent({ id: "visible" });
+    const archivedAgent = makeAgent({
+      id: "archived",
+      archivedAt: new Date("2026-03-08T11:00:00.000Z"),
+    });
+
+    const result = __private__.buildAllAgentsList({
+      agents: [visibleAgent, archivedAgent],
+      serverId: "server-1",
+      serverLabel: "Local",
+      includeArchived: false,
+    });
+
+    expect(result.map((agent) => agent.id)).toEqual(["visible"]);
+  });
+
+  it("includes archived agents when requested", () => {
+    const visibleAgent = makeAgent({ id: "visible" });
+    const archivedAgent = makeAgent({
+      id: "archived",
+      archivedAt: new Date("2026-03-08T11:00:00.000Z"),
+    });
+
+    const result = __private__.buildAllAgentsList({
+      agents: [visibleAgent, archivedAgent],
+      serverId: "server-1",
+      serverLabel: "Local",
+      includeArchived: true,
+    });
+
+    expect(result.map((agent) => agent.id)).toEqual(["visible", "archived"]);
+    expect(result[1]?.archivedAt).toEqual(archivedAgent.archivedAt);
+  });
+});
@@ -35,8 +35,44 @@ function toAggregatedAgent(params: {
  };
 }

+function buildAllAgentsList(params: {
+  agents: Iterable<Agent>;
+  serverId: string;
+  serverLabel: string;
+  includeArchived: boolean;
+}): AggregatedAgent[] {
+  const list: AggregatedAgent[] = [];
+
+  for (const agent of params.agents) {
+    const aggregated = toAggregatedAgent({
+      source: agent,
+      serverId: params.serverId,
+      serverLabel: params.serverLabel,
+    });
+    if (!params.includeArchived && aggregated.archivedAt) {
+      continue;
+    }
+    list.push(aggregated);
+  }
+
+  list.sort((left, right) => {
+    const leftRunning = left.status === "running";
+    const rightRunning = right.status === "running";
+    if (leftRunning && !rightRunning) {
+      return -1;
+    }
+    if (!leftRunning && rightRunning) {
+      return 1;
+    }
+    return right.lastActivityAt.getTime() - left.lastActivityAt.getTime();
+  });
+
+  return list;
+}
+
 export function useAllAgentsList(options?: {
  serverId?: string | null;
+  includeArchived?: boolean;
 }): AggregatedAgentsResult {
  const { daemons } = useDaemonRegistry();
  const runtime = getHostRuntimeStore();
@@ -47,6 +83,7 @@ export function useAllAgentsList(options?: {
      ? value.trim()
      : null;
  }, [options?.serverId]);
+  const includeArchived = options?.includeArchived ?? false;

  const liveAgents = useSessionStore((state) =>
    serverId ? state.sessions[serverId]?.agents ?? null : null
@@ -66,34 +103,13 @@ export function useAllAgentsList(options?: {
    }
    const serverLabel =
      daemons.find((daemon) => daemon.serverId === serverId)?.label ?? serverId;
-    const list: AggregatedAgent[] = [];
-
-    for (const agent of liveAgents.values()) {
-      const aggregated = toAggregatedAgent({
-        source: agent,
-        serverId,
-        serverLabel,
-      });
-      if (aggregated.archivedAt) {
-        continue;
-      }
-      list.push(aggregated);
-    }
-
-    list.sort((left, right) => {
-      const leftRunning = left.status === "running";
-      const rightRunning = right.status === "running";
-      if (leftRunning && !rightRunning) {
-        return -1;
-      }
-      if (!leftRunning && rightRunning) {
-        return 1;
-      }
-      return right.lastActivityAt.getTime() - left.lastActivityAt.getTime();
+    return buildAllAgentsList({
+      agents: liveAgents.values(),
+      serverId,
+      serverLabel,
+      includeArchived,
    });
-
-    return list;
-  }, [daemons, liveAgents, serverId]);
+  }, [daemons, includeArchived, liveAgents, serverId]);

  const isDirectoryLoading = Boolean(serverId && isHostRuntimeDirectoryLoading(snapshot));
  const isInitialLoad = isDirectoryLoading && agents.length === 0;
@@ -107,3 +123,8 @@ export function useAllAgentsList(options?: {
    refreshAll,
  };
 }
+
+export const __private__ = {
+  buildAllAgentsList,
+  toAggregatedAgent,
+};