feat(app): unified provider snapshot, resilient model selector, and UX polish

- Model selector is no longer disabled while providers load; opens immediately and streams available providers as they arrive - Selecting a non-default provider on mobile now works correctly - Provider icon added to model trigger in mobile preferences sheet - Thinking icon (brain) added to thinking trigger in mobile preferences - Model descriptions for OpenCode/Pi shown inline next to model name instead of in a tooltip - Running agents and draft screen share a single provider/model cache, eliminating duplicate network requests - Provider data is prefetched when entering a workspace so the model selector is instant on first open
2026-04-06 23:37:22 +07:00
parent a5aca2312b
commit c63240b18c
6 changed files with 165 additions and 135 deletions
@@ -0,0 +1,84 @@
+import { useCallback, useEffect, useMemo } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import type { ProviderSnapshotEntry } from "@server/server/agent/agent-sdk-types";
+import type { DaemonClient } from "@server/client/daemon-client";
+import { useHostRuntimeClient, useHostRuntimeIsConnected } from "@/runtime/host-runtime";
+import { useSessionForServer } from "./use-session-directory";
+import { queryClient as singletonQueryClient } from "@/query/query-client";
+
+export function providersSnapshotQueryKey(serverId: string | null) {
+  return ["providersSnapshot", serverId] as const;
+}
+
+interface UseProvidersSnapshotResult {
+  entries: ProviderSnapshotEntry[] | undefined;
+  isLoading: boolean;
+  isFetching: boolean;
+  supportsSnapshot: boolean;
+  refresh: () => void;
+}
+
+export function useProvidersSnapshot(serverId: string | null): UseProvidersSnapshotResult {
+  const queryClient = useQueryClient();
+  const client = useHostRuntimeClient(serverId ?? "");
+  const isConnected = useHostRuntimeIsConnected(serverId ?? "");
+  const supportsSnapshot = useSessionForServer(
+    serverId,
+    (session) => session?.serverInfo?.features?.providersSnapshot === true,
+  );
+
+  const queryKey = useMemo(() => providersSnapshotQueryKey(serverId), [serverId]);
+
+  const snapshotQuery = useQuery({
+    queryKey,
+    enabled: Boolean(supportsSnapshot && serverId && client && isConnected),
+    staleTime: 60_000,
+    queryFn: async () => {
+      if (!client) {
+        throw new Error("Host is not connected");
+      }
+      return client.getProvidersSnapshot();
+    },
+  });
+
+  useEffect(() => {
+    if (!supportsSnapshot || !client || !isConnected || !serverId) {
+      return;
+    }
+
+    return client.on("providers_snapshot_update", (message) => {
+      if (message.type !== "providers_snapshot_update") {
+        return;
+      }
+      queryClient.setQueryData(queryKey, {
+        entries: message.payload.entries,
+        generatedAt: message.payload.generatedAt,
+        requestId: "providers_snapshot_update",
+      });
+    });
+  }, [client, isConnected, serverId, queryClient, queryKey, supportsSnapshot]);
+
+  const refresh = useCallback(() => {
+    if (!client) {
+      return;
+    }
+    void client.refreshProvidersSnapshot();
+  }, [client]);
+
+  return {
+    entries: snapshotQuery.data?.entries ?? undefined,
+    isLoading: snapshotQuery.isLoading,
+    isFetching: snapshotQuery.isFetching,
+    supportsSnapshot,
+    refresh,
+  };
+}
+
+export function prefetchProvidersSnapshot(serverId: string, client: DaemonClient): void {
+  const queryKey = providersSnapshotQueryKey(serverId);
+  void singletonQueryClient.prefetchQuery({
+    queryKey,
+    staleTime: 60_000,
+    queryFn: () => client.getProvidersSnapshot(),
+  });
+}