perf(pr): PR panel paints from saved data and reads ahead on intent

apps/mobile/src/App.tsx

@@ -75,6 +75,7 @@ import {
 import { useMobileNavigationTheme } from "./lib/useMobileNavigationTheme";
 import { installUiRuntimeMemoryWarningGc } from "./lib/useUiRuntimeMemoryWarningGc";
 import { SubscriptionUsageCoordinator } from "./widgets/SubscriptionUsageCoordinator";
+import { PullRequestListWarmup } from "./features/pull-requests/PullRequestListWarmup";
 import { ConnectDeviceApprovalCoordinator } from "./features/connection/ConnectDeviceApprovalCoordinator";
 import { installSubscriptionUsageRefresh } from "./widgets/useSubscriptionUsage";
 import { GlobalVoiceInputControl } from "./features/voice-input/GlobalVoiceInputControl";
@@ -282,6 +283,7 @@ function AppContent() {
     <>
       <SplashScreenCoordinator />
       <SubscriptionUsageCoordinator />
+      <PullRequestListWarmup />
       <ConnectDeviceApprovalCoordinator />
       <GestureHandlerRootView className="flex-1">
         <KeyboardProvider statusBarTranslucent>

apps/mobile/src/features/pull-requests/PullRequestListWarmup.tsx

@@ -0,0 +1,36 @@
+import { useAtomMount, useAtomValue } from "@effect/atom-react";
+import type { EnvironmentId, PullRequestListInput } from "@t3tools/contracts";
+import { AsyncResult } from "effect/reactivity";
+
+import { useProjects } from "../../state/entities";
+import { mobilePreferencesAtom } from "../../state/preferences";
+import { composerPullRequests } from "../../state/pull-requests";
+import { useEnabledNavigationTabs } from "../layout/workspace/navigation-tabs";
+import { usePullRequestListTargets } from "./usePullRequestListControls";
+
+/** Fills an empty saved list for the scope the PRs tab opens on, so its first visit paints. */
+export function PullRequestListWarmup() {
+  // Until the saved filters load, the tab's scope is not known and a read could be wasted.
+  const loaded = AsyncResult.isSuccess(useAtomValue(mobilePreferencesAtom));
+  const enabled = useEnabledNavigationTabs().includes("pullRequests");
+  return loaded && enabled ? <WarmLists /> : null;
+}
+
+function WarmLists() {
+  const { targets } = usePullRequestListTargets("");
+  const projects = useProjects();
+  return targets
+    .filter((target) =>
+      projects.some(
+        (project) => project.environmentId === target.environmentId && !project.isScratch,
+      ),
+    )
+    .map((target) => <WarmList key={target.environmentId} target={target} />);
+}
+
+function WarmList(props: {
+  target: { readonly environmentId: EnvironmentId; readonly input: PullRequestListInput };
+}) {
+  useAtomMount(composerPullRequests.warmList(props.target));
+  return null;
+}

apps/mobile/src/features/pull-requests/PullRequestsScreen.tsx

@@ -30,16 +30,14 @@ import {
   type PullRequestFilterMenu,
 } from "./PullRequestListFilters";
 import { usePullRequestList } from "./usePullRequestList";
-import { usePullRequestListControls } from "./usePullRequestListControls";
+import { usePullRequestListTargets } from "./usePullRequestListControls";
 import { usePullRequestListActions } from "./usePullRequestListActions";
 import {
   filterPullRequestList,
   pullRequestListFacets,
-  pullRequestListInput,
   pullRequestListRowsAreEqual,
   scopedPullRequestListKey as pullRequestKey,
   type EnvironmentPullRequestListEntry,
-  withoutScratchProjectScope,
   pullRequestProjectChoices,
 } from "./pullRequestList";
 import { useDebouncedValue } from "../../state/queries";
@@ -121,11 +119,7 @@ export function PullRequestsScreen(
   const query = tab.searchMode === "resting" ? "" : debouncedQuery;
   const typedQuery = tab.searchMode === "resting" ? "" : tab.query;
   const typedDraft = parsePullRequestQuery(typedQuery).filters.draft;
-  const listControls = usePullRequestListControls();
-  const selectedEnvironmentId = listControls.environmentId;
-  const environmentId = environments.some((item) => item.environmentId === selectedEnvironmentId)
-    ? selectedEnvironmentId
-    : null;
+  const { listControls, environmentId, controls, targets } = usePullRequestListTargets(query);
   const selectDetail = useSelectWorkspaceDetail();
   const selectPullRequest = (item: EnvironmentPullRequestListEntry) => {
     Keyboard.dismiss();
@@ -140,28 +134,6 @@ export function PullRequestsScreen(
     selectDetail({ name: "PullRequest", params });
   };
   const allProjects = useProjects();
-  const savedControls = listControls.controlsFor(environmentId);
-  const controls = useMemo(
-    () => withoutScratchProjectScope(savedControls, allProjects),
-    [allProjects, savedControls],
-  );
-  const targets = useMemo(
-    () =>
-      environments
-        .filter(
-          (environment) =>
-            configs.get(environment.environmentId) !== undefined &&
-            (environmentId === null || environment.environmentId === environmentId) &&
-            (!controls.projectEnvironmentId ||
-              environment.environmentId === controls.projectEnvironmentId),
-        )
-        .sort((left, right) => left.environmentId.localeCompare(right.environmentId))
-        .map((environment) => ({
-          environmentId: environment.environmentId,
-          input: pullRequestListInput(controls, query),
-        })),
-    [environments, environmentId, configs, controls, query],
-  );
   const result = usePullRequestList(targets);
   const connectedTargets = targets.filter((target) =>
     environments.some(

apps/mobile/src/features/pull-requests/usePullRequestListControls.ts

@@ -1,8 +1,17 @@
 import { useAtomSet, useAtomValue } from "@effect/atom-react";
 import { AsyncResult } from "effect/reactivity";
+import { useMemo } from "react";
 
+import { useProjects } from "../../state/entities";
 import { mobilePreferencesAtom, updateMobilePreferencesAtom } from "../../state/preferences";
-import { DEFAULT_PR_LIST_CONTROLS, type PullRequestListControls } from "./pullRequestList";
+import { environmentServerConfigsAtom } from "../../state/server";
+import { useWorkspaceState } from "../../state/workspace";
+import {
+  DEFAULT_PR_LIST_CONTROLS,
+  pullRequestListInput,
+  withoutScratchProjectScope,
+  type PullRequestListControls,
+} from "./pullRequestList";
 
 export function usePullRequestListControls() {
   const preferences = useAtomValue(mobilePreferencesAtom);
@@ -45,3 +54,38 @@ function withEnvironmentControls(
 ): Record<string, PullRequestListControls> {
   return { ...saved, [environment]: controls };
 }
+
+/** The list reads for the saved controls; the PRs tab and its warm-up share these keys. */
+export function usePullRequestListTargets(query: string) {
+  const { environments } = useWorkspaceState();
+  const configs = useAtomValue(environmentServerConfigsAtom);
+  const allProjects = useProjects();
+  const listControls = usePullRequestListControls();
+  const selectedEnvironmentId = listControls.environmentId;
+  const environmentId = environments.some((item) => item.environmentId === selectedEnvironmentId)
+    ? selectedEnvironmentId
+    : null;
+  const savedControls = listControls.controlsFor(environmentId);
+  const controls = useMemo(
+    () => withoutScratchProjectScope(savedControls, allProjects),
+    [allProjects, savedControls],
+  );
+  const targets = useMemo(
+    () =>
+      environments
+        .filter(
+          (environment) =>
+            configs.get(environment.environmentId) !== undefined &&
+            (environmentId === null || environment.environmentId === environmentId) &&
+            (!controls.projectEnvironmentId ||
+              environment.environmentId === controls.projectEnvironmentId),
+        )
+        .sort((left, right) => left.environmentId.localeCompare(right.environmentId))
+        .map((environment) => ({
+          environmentId: environment.environmentId,
+          input: pullRequestListInput(controls, query),
+        })),
+    [environments, environmentId, configs, controls, query],
+  );
+  return { listControls, environmentId, controls, targets };
+}

apps/mobile/src/features/pull-requests/usePullRequestStack.ts

@@ -1,13 +1,17 @@
 import { threadPullRequestLinkMode } from "@t3tools/client-runtime/thread-pull-request-compatibility";
 import type { PullRequestDetail } from "@t3tools/contracts";
 import { sourceControlClients } from "@t3tools/client-runtime/source-control-clients";
+import { useAtomValue } from "@effect/atom-react";
+import { Atom } from "effect/reactivity";
 import { useMemo } from "react";
 import { useEnvironmentServerConfig, useNavigationThreadShells } from "../../state/entities";
 import { pullRequestStackAtom } from "../../state/pull-requests";
 import { useEnvironmentQuery } from "../../state/query";
 import { savedPullRequestStack } from "./pullRequestStack";
 import { pullRequestTarget, type PullRequestParams } from "./usePullRequestDiff";
 
+const NOT_ANSWERED = Atom.make(false);
+
 export function usePullRequestStack(params: PullRequestParams, pr: PullRequestDetail | null) {
   const target = pullRequestTarget(params);
   const config = useEnvironmentServerConfig(target.environmentId);
@@ -37,11 +41,14 @@ export function usePullRequestStack(params: PullRequestParams, pr: PullRequestDe
   const query = useEnvironmentQuery(
     supported ? pullRequestStackAtom({ ...target, input: reference }) : null,
   );
+  const answered = useAtomValue(
+    supported ? pullRequestStackAtom.answered({ ...target, input: reference }) : NOT_ANSWERED,
+  );
   const stack = query.isSuccess ? query.data : (query.data ?? saved);
   return {
     ...query,
     stack,
-    isFresh: supported && query.isSuccess && !query.isPending,
+    isFresh: supported && query.isSuccess && !query.isPending && answered,
     supportsStackActions: supported && pr?.capabilities.stackActions === true,
   };
 }

apps/web/src/components/AppSidebarLayout.tsx

@@ -39,6 +39,7 @@ import {
 } from "../panelAnimations";
 import { BackgroundThreadAnnouncer } from "./BackgroundThreadAnnouncer";
 import { HistorySwipeNavigation } from "./HistorySwipeNavigation";
+import { PullRequestListWarmup } from "./pullRequest/PullRequestListWarmup";
 import ThreadSidebar from "./Sidebar";
 import { SidebarBrandWidthProbe } from "./sidebar/SidebarChrome";
 import { isAppModalPage } from "./sidebar/mainAppLocation";
@@ -494,6 +495,7 @@ export function AppSidebarLayout({
         ) : null}
         {children}
         <BackgroundThreadAnnouncer />
+        <PullRequestListWarmup />
         <SidebarControl showSidebar={showSidebar} />
         {isElectron ? <HistorySwipeNavigation /> : null}
       </SidebarProvider>

apps/web/src/components/pullRequest/PullRequestDetailLayout.tsx

@@ -1,5 +1,5 @@
 import { ArrowLeftIcon, FileDiffIcon } from "lucide-react";
-import type { ComponentProps, ReactNode } from "react";
+import { useRef, type ComponentProps, type ReactNode } from "react";
 
 import { cn } from "~/lib/utils";
 
@@ -77,6 +77,8 @@ export function PullRequestDetailTabBar<Tab extends string>({
   inert?: boolean;
   children?: ReactNode;
 }) {
+  // A pointer passing over a tab is not intent; it must rest like a list row does.
+  const pointerIntent = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   return (
     <nav
       className="col-span-2 flex min-w-0 flex-wrap items-center gap-2 border-t border-border/60 px-4 py-2"
@@ -97,7 +99,15 @@ export function PullRequestDetailTabBar<Tab extends string>({
           <Toggle
             key={tab.value}
             value={tab.value}
-            onPointerEnter={onTabIntent ? () => onTabIntent(tab.value) : undefined}
+            onPointerEnter={
+              onTabIntent
+                ? () => {
+                    clearTimeout(pointerIntent.current);
+                    pointerIntent.current = setTimeout(() => onTabIntent(tab.value), 150);
+                  }
+                : undefined
+            }
+            onPointerLeave={onTabIntent ? () => clearTimeout(pointerIntent.current) : undefined}
             onFocus={onTabIntent ? () => onTabIntent(tab.value) : undefined}
           >
             {tab.label}

apps/web/src/components/pullRequest/PullRequestDetailPanel.permissions.browser.test.tsx

@@ -7,11 +7,13 @@ import {
   type PullRequestDetailView,
 } from "@t3tools/contracts";
 import { expect, it, vi } from "vite-plus/test";
+import { userEvent } from "vite-plus/test/browser";
 import { DraftId, useComposerDraftStore } from "~/composerDraftStore";
-import { act, render } from "../../../test/render";
+import { act, fakeTimers, render } from "../../../test/render";
 
-const { permissions } = vi.hoisted(() => ({
+const { permissions, reads } = vi.hoisted(() => ({
   permissions: { checkout: true, operate: true },
+  reads: { diff: [] as unknown[] },
 }));
 
 vi.mock(import("~/state/session"), async (original) => ({
@@ -51,6 +53,19 @@ vi.mock(import("~/state/usePullRequestStack"), async (original) => ({
     refresh: vi.fn(),
   })) as never,
 }));
+vi.mock(import("~/state/pullRequests"), async (original) => {
+  const actual = await original();
+  return {
+    ...actual,
+    pullRequestEnvironment: {
+      ...actual.pullRequestEnvironment,
+      diff: ((target: unknown) => {
+        reads.diff.push(target);
+        return actual.pullRequestEnvironment.diff(target as never);
+      }) as never,
+    },
+  };
+});
 vi.mock(import("~/state/use-atom-command"), async (original) => ({
   ...(await original()),
   useAtomCommand: (() => vi.fn()) as never,
@@ -133,6 +148,7 @@ const panel = (attach = false) => (
 function setup() {
   permissions.checkout = true;
   permissions.operate = true;
+  reads.diff = [];
   useComposerDraftStore.setState({ draftsByThreadKey: {} });
 }
 
@@ -162,3 +178,21 @@ it("can still add conflict resolution to an existing composer without checkout s
   expect(draft?.prompt).toContain("conflicts");
   expect(draft?.prompt).toContain(detail.url);
 });
+
+it("reads the first diff page once the pointer rests on the Code tab", async () => {
+  setup();
+  await using screen = await render(panel());
+  using _timers = fakeTimers({ now: 0 });
+  const code = screen.getByRole("button", { name: "Code", exact: true });
+  await expect.element(code).toBeVisible();
+
+  await userEvent.hover(code);
+  await act(() => vi.advanceTimersByTime(149));
+  expect(reads.diff).toEqual([]);
+  await act(() => vi.advanceTimersByTime(1));
+  // The page the Code tab reads first, keyed as the tab keys it, so a click paints from it.
+  expect(reads.diff).toContainEqual({
+    environmentId,
+    input: { projectId: detail.projectId, repository: detail.repository, number: detail.number },
+  });
+});

apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx

@@ -472,6 +472,13 @@ export function PullRequestDetailPanel({
   } else if (!tabMountState.tabs.has(tab)) {
     setTabMountState({ key: tabScopeKey, tabs: new Set(tabMountState.tabs).add(tab) });
   }
+  // A pointer on the Code tab reads the page it opens on; only intent costs the host a read.
+  const [codeIntentKey, setCodeIntentKey] = useState<string | null>(null);
+  useEnvironmentQuery(
+    codeIntentKey === pullRequestKey && !mountedTabs.has("code")
+      ? pullRequestEnvironment.diff({ environmentId, input: { ...reference } })
+      : null,
+  );
   // Each tab restores the condensed state its own scrolling left behind.
   const [condensedByTab, setCondensedByTab] = useState<
     Partial<Record<PullRequestDetailTab, boolean>>
@@ -1714,7 +1721,9 @@ export function PullRequestDetailPanel({
             value={tab}
             onValueChange={selectTab}
             onTabIntent={(item) => {
-              if (item === "code") void loadCodeTab();
+              if (item !== "code") return;
+              void loadCodeTab();
+              setCodeIntentKey(pullRequestKey);
             }}
           >
             {tab === "summary" ? (