perf(app): streamline server-function requests

Move growing lookup payloads to POST, batch good metadata reads, trim picker catalogs from block solve responses, and give app-shell polling a single cache-backed owner.

Author: ApocDev

app/src/components/app-live-queries.test.tsx

@@ -1,9 +1,15 @@
 // @vitest-environment jsdom
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClient, QueryClientProvider, useQuery } from "@tanstack/react-query";
 import { act, cleanup, render } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test";
 
 import { AppLiveQueries } from "./app-live-queries.tsx";
+import {
+  bridgeStatusSubscription,
+  logisticsContextSubscription,
+  researchHorizonSubscription,
+  undoStatusSubscription,
+} from "../lib/live-query-options.ts";
 
 const fns = vi.hoisted(() => ({
   bridge: vi.fn(),
@@ -30,6 +36,14 @@ afterEach(() => {
 });
 
 describe("AppLiveQueries", () => {
+  function StatusSubscribers() {
+    useQuery(bridgeStatusSubscription);
+    useQuery(researchHorizonSubscription);
+    useQuery(logisticsContextSubscription);
+    useQuery(undoStatusSubscription);
+    return null;
+  }
+
   it("owns one interval at each live-status cadence", async () => {
     const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
     render(
@@ -53,4 +67,30 @@ describe("AppLiveQueries", () => {
     expect(fns.logistics).toHaveBeenCalledTimes(2);
     expect(fns.undo).toHaveBeenCalledTimes(2);
   });
+
+  it("lets later responsive-layout subscribers reuse the fresh poll result", async () => {
+    const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+    render(
+      <QueryClientProvider client={client}>
+        <AppLiveQueries />
+      </QueryClientProvider>,
+    );
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    render(
+      <QueryClientProvider client={client}>
+        <StatusSubscribers />
+      </QueryClientProvider>,
+    );
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(fns.bridge).toHaveBeenCalledTimes(1);
+    expect(fns.horizon).toHaveBeenCalledTimes(1);
+    expect(fns.logistics).toHaveBeenCalledTimes(1);
+    expect(fns.undo).toHaveBeenCalledTimes(1);
+  });
 });

app/src/components/app-live-queries.tsx

@@ -1,8 +1,12 @@
 import { useQuery } from "@tanstack/react-query";
 
-import { bridgeStatusFn } from "../server/bridge/fns";
-import { logisticsContextFn, researchHorizonFn } from "../server/factorio";
-import { undoStatusFn } from "../server/undo";
+import {
+  bridgeStatusQuery,
+  LIVE_QUERY_INTERVALS,
+  logisticsContextQuery,
+  researchHorizonQuery,
+  undoStatusQuery,
+} from "../lib/live-query-options";
 
 /**
  * Single owner for the app-shell's recurring status reads. Desktop and mobile
@@ -13,24 +17,20 @@ import { undoStatusFn } from "../server/undo";
  */
 export function AppLiveQueries() {
   useQuery({
-    queryKey: ["bridgeStatus"],
-    queryFn: () => bridgeStatusFn(),
-    refetchInterval: 2000,
+    ...bridgeStatusQuery,
+    refetchInterval: LIVE_QUERY_INTERVALS.bridge,
   });
   useQuery({
-    queryKey: ["researchHorizon"],
-    queryFn: () => researchHorizonFn(),
-    refetchInterval: 4000,
+    ...researchHorizonQuery,
+    refetchInterval: LIVE_QUERY_INTERVALS.horizon,
   });
   useQuery({
-    queryKey: ["logisticsContext"],
-    queryFn: () => logisticsContextFn(),
-    refetchInterval: 5000,
+    ...logisticsContextQuery,
+    refetchInterval: LIVE_QUERY_INTERVALS.logistics,
   });
   useQuery({
-    queryKey: ["undoStatus"],
-    queryFn: () => undoStatusFn(),
-    refetchInterval: 5000,
+    ...undoStatusQuery,
+    refetchInterval: LIVE_QUERY_INTERVALS.undo,
   });
 
   return null;

app/src/components/block/fuel-picker-dialog.tsx

@@ -1,40 +1,43 @@
-import { useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Star } from "lucide-react";
-import { setFavoriteFuelFn } from "../../server/factorio";
+import { fuelPickerOptionsFn, setFavoriteFuelFn } from "../../server/factorio";
 import { Badge } from "#/components/ui/badge.tsx";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "#/components/ui/dialog.tsx";
 import { Icon } from "../../lib/icons";
 import { fmtJ } from "./format.ts";
 import { rowBtn } from "./styles.ts";
+import { Skeleton } from "#/components/ui/skeleton.tsx";
 
 /** Fuel picker — choose what a SOLID burner burns (energy value shown to
  * compare), with the favorite star (#18). Favorites are app-level prefs;
  * toggling one refetches the solve so its ☆ updates without touching the
  * block's picks. Fluid burners never open this: unfiltered ones draw from the
  * shared fluid-fuel pool and filtered ones are pinned to one fluid (#25). */
 export function FuelPickerDialog({
+  recipe,
   recipeDisplay,
-  fuels,
+  machine,
   current,
   onPick,
   onClose,
 }: {
+  recipe: string;
   recipeDisplay: string;
-  fuels: {
-    name: string;
-    display: string | null;
-    kind: string;
-    fuelValueJ: number | null;
-    favorite: boolean;
-  }[];
+  machine: string;
   /** the fuel the current solve burns for this recipe */
   current: string | null;
   onPick: (fuel: string) => void;
   onClose: () => void;
 }) {
   const qc = useQueryClient();
+  const fuels = useQuery({
+    queryKey: ["fuelOptions", recipe, machine],
+    queryFn: () => fuelPickerOptionsFn({ data: { recipe, machine } }),
+    staleTime: 60_000,
+  });
   const toggleFavorite = (fuel: string, isFav: boolean) => {
     void setFavoriteFuelFn({ data: { fuel, clear: isFav } }).then(() => {
+      void qc.invalidateQueries({ queryKey: ["fuelOptions"] });
       void qc.invalidateQueries({ queryKey: ["solve"] });
     });
   };
@@ -50,7 +53,14 @@ export function FuelPickerDialog({
           <DialogTitle className="truncate">Fuel for {recipeDisplay}</DialogTitle>
         </DialogHeader>
         <div className="min-h-0 flex-1 overflow-auto p-2">
-          {fuels.map((f) => {
+          {fuels.isLoading && (
+            <div className="space-y-1.5 p-2">
+              <Skeleton className="h-9 w-full" />
+              <Skeleton className="h-9 w-full" />
+              <Skeleton className="h-9 w-3/4" />
+            </div>
+          )}
+          {fuels.data?.map((f) => {
             const cur = current === f.name;
             return (
               <button
@@ -82,7 +92,7 @@ export function FuelPickerDialog({
               </button>
             );
           })}
-          {!fuels.length && (
+          {fuels.data?.length === 0 && (
             <div className="px-2 py-1 text-sm text-muted-foreground">
               no fuels for this machine's categories
             </div>

app/src/components/block/solve-view.ts

@@ -4,7 +4,8 @@
 import type { computeBlock } from "../../server/block-compute.server.ts";
 import type { ResolvedLogistics } from "../../lib/logistics";
 
-type CoreSolveResult = Awaited<ReturnType<typeof computeBlock>>;
+type ComputedBlockResult = Awaited<ReturnType<typeof computeBlock>>;
+type CoreSolveResult = Omit<ComputedBlockResult, "recipes">;
 
 /** The editor enriches authoritative core rows with lazy presentation-only
  * module hints. They are deliberately absent from `computeBlock` itself. */

app/src/components/block/sushi-planner.tsx

@@ -5,7 +5,8 @@ import { planSushi, type ResolvedLogistics, type SushiFlow } from "../../lib/log
 import { constantCombinatorBlueprint, encodeBlueprint } from "../../lib/blueprint";
 import { fmtSpoilTime, Icon, useSpoilables } from "../../lib/icons";
 import { toast } from "../../lib/toast-store";
-import { bridgeBlueprintFn, bridgeStatusFn, sushiTraceInfoFn } from "../../server/bridge/fns";
+import { bridgeStatusSubscription } from "../../lib/live-query-options";
+import { bridgeBlueprintFn, sushiTraceInfoFn } from "../../server/bridge/fns";
 import { fmtCount } from "./format.ts";
 import { Button } from "#/components/ui/button.tsx";
 import { Callout } from "#/components/ui/callout.tsx";
@@ -127,12 +128,7 @@ export function SushiPlanner({
   // only the block-inputs section ships ACTIVE (imports are what's injected from
   // outside, so they're what needs gating); outputs and intermediates free-flow,
   // their set-points parked in disabled sections as flippable reference.
-  const bridge = useQuery({
-    queryKey: ["bridgeStatus"],
-    queryFn: () => bridgeStatusFn(),
-    enabled: open,
-    refetchInterval: 3000,
-  });
+  const bridge = useQuery(bridgeStatusSubscription);
   const peer = bridge.data?.lastPeer ?? null;
   const connected = peer != null && Date.now() - peer.lastSeenMs < FRESH_MS;
   // the mod's ALT+B loop tracer pushes its measurement here — offer, don't overwrite

app/src/components/bridge-card.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { AlertTriangle, RefreshCw } from "lucide-react";
-import { bridgeRequestSyncFn, bridgeStatusFn } from "../server/bridge/fns";
+import { bridgeRequestSyncFn } from "../server/bridge/fns";
+import { bridgeStatusSubscription } from "../lib/live-query-options";
 import { Button } from "#/components/ui/button.tsx";
 import { Callout } from "#/components/ui/callout.tsx";
 import { Card, CardHeader, CardTitle } from "#/components/ui/card.tsx";
@@ -14,10 +15,7 @@ const FRESH_MS = 6000;
 
 /** Live UDP bridge status from the app-shell query owner. */
 export function BridgeCard() {
-  const status = useQuery({
-    queryKey: ["bridgeStatus"],
-    queryFn: () => bridgeStatusFn(),
-  });
+  const status = useQuery(bridgeStatusSubscription);
   const s = status.data;
   const peer = s?.lastPeer ?? null;
   const connected = peer != null && Date.now() - peer.lastSeenMs < FRESH_MS;

app/src/components/bridge-indicator.test.tsx

@@ -22,8 +22,9 @@ vi.mock("../server/bridge/fns", () => ({ bridgeStatusFn: bridgeStatus }));
 afterEach(cleanup);
 beforeEach(() => bridgeStatus.mockReset());
 
-function renderIndicator() {
+async function renderIndicator() {
   const client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  client.setQueryData(["bridgeStatus"], await bridgeStatus());
   return render(
     <QueryClientProvider client={client}>
       <BridgeIndicator />
@@ -42,7 +43,7 @@ describe("BridgeIndicator", () => {
       appProtocolVersion: 4,
       lastPeer: { lastSeenMs: Date.now(), protocolVersion: 4, player: "jim" },
     });
-    const { findByText, findByRole, getByTestId } = renderIndicator();
+    const { findByText, findByRole, getByTestId } = await renderIndicator();
     expect(await findByText("game linked")).toBeTruthy();
     expect(dot(getByTestId("bridge-link")).className).toContain("bg-success");
     fireEvent.focus(getByTestId("bridge-link"));
@@ -57,7 +58,7 @@ describe("BridgeIndicator", () => {
       appProtocolVersion: 4,
       lastPeer: { lastSeenMs: Date.now(), protocolVersion: 3, player: "jim" },
     });
-    const { findByText, getByTestId } = renderIndicator();
+    const { findByText, getByTestId } = await renderIndicator();
     expect(await findByText("mod mismatch")).toBeTruthy();
     expect(dot(getByTestId("bridge-link")).className).toContain("bg-destructive");
   });
@@ -70,7 +71,7 @@ describe("BridgeIndicator", () => {
       appProtocolVersion: 4,
       lastPeer: null,
     });
-    const { findByText, getByTestId } = renderIndicator();
+    const { findByText, getByTestId } = await renderIndicator();
     expect(await findByText("no game")).toBeTruthy();
     expect(dot(getByTestId("bridge-link")).className).toContain("bg-warning");
   });
@@ -83,7 +84,7 @@ describe("BridgeIndicator", () => {
       appProtocolVersion: 4,
       lastPeer: { lastSeenMs: Date.now() - 60_000, protocolVersion: 4, player: "jim" },
     });
-    const { findByText } = renderIndicator();
+    const { findByText } = await renderIndicator();
     expect(await findByText("no game")).toBeTruthy();
   });
 
@@ -96,7 +97,7 @@ describe("BridgeIndicator", () => {
       appProtocolVersion: 4,
       lastPeer: null,
     });
-    const { findByText, findByRole, getByTestId } = renderIndicator();
+    const { findByText, findByRole, getByTestId } = await renderIndicator();
     expect(await findByText("bridge error")).toBeTruthy();
     fireEvent.focus(getByTestId("bridge-link"));
     expect((await findByRole("tooltip")).textContent).toContain("EADDRINUSE");

app/src/components/bridge-indicator.tsx

@@ -1,6 +1,6 @@
 import { Link } from "@tanstack/react-router";
 import { useQuery } from "@tanstack/react-query";
-import { bridgeStatusFn } from "../server/bridge/fns";
+import { bridgeStatusSubscription } from "../lib/live-query-options";
 import { Tooltip } from "#/components/ui/tooltip.tsx";
 
 /** Treat the mod as connected if we've heard from it within this window (its
@@ -12,10 +12,7 @@ const FRESH_MS = 6000;
  * ["bridgeStatus"] query owned by AppLiveQueries, which also starts the UDP
  * listener and keeps the bridge live on every page. */
 export function BridgeIndicator() {
-  const status = useQuery({
-    queryKey: ["bridgeStatus"],
-    queryFn: () => bridgeStatusFn(),
-  });
+  const status = useQuery(bridgeStatusSubscription);
   const s = status.data;
   const peer = s?.lastPeer ?? null;
   const connected = peer != null && Date.now() - peer.lastSeenMs < FRESH_MS;

app/src/components/drift-modal.tsx

@@ -3,7 +3,7 @@ import { AlertTriangle, Check, Loader2, RefreshCw, X, type LucideIcon } from "lu
 import { Link } from "@tanstack/react-router";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { factorioRunningFn, modDriftFn, startDataSyncFn, syncStateFn } from "../server/factorio";
-import { bridgeStatusFn } from "../server/bridge/fns";
+import { bridgeStatusSubscription } from "../lib/live-query-options";
 import { driftModal, useDriftModalOpen } from "../lib/drift-store";
 import { type StepStatus, stepStatuses, stepsForRun } from "../lib/sync-steps";
 import { DriftChanges } from "./drift-changes";
@@ -70,10 +70,7 @@ export function DriftModal() {
     queryFn: () => syncStateFn(),
     refetchInterval: (q) => (RUNNING.has(q.state.data?.phase ?? "") ? 1000 : false),
   });
-  const bridge = useQuery({
-    queryKey: ["bridgeStatus"],
-    queryFn: () => bridgeStatusFn(),
-  });
+  const bridge = useQuery(bridgeStatusSubscription);
   // Proactively check whether the game is running while the prompt is open, so we
   // can warn and block the sync (it would just fail on the engine's instance lock).
   const gameRunning = useQuery({

app/src/components/horizon-menu.tsx

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
 import { Clock } from "lucide-react";
-import { researchHorizonFn } from "../server/factorio";
+import { researchHorizonSubscription } from "../lib/live-query-options";
 import { HorizonHelpButton } from "./horizon-help";
 import { HorizonPicker, horizonLabel } from "./horizon-picker";
 import { Button } from "#/components/ui/button.tsx";
@@ -18,10 +18,7 @@ import {
  * opens a dialog to change it (Now / Future / Up to target). */
 export function HorizonMenu() {
   const [open, setOpen] = useState(false);
-  const h = useQuery({
-    queryKey: ["researchHorizon"],
-    queryFn: () => researchHorizonFn(),
-  });
+  const h = useQuery(researchHorizonSubscription);
   const label = h.data ? horizonLabel(h.data) : "…";
 
   return (