feat(frontend): migrate server-state from Zustand to TanStack Query + perf optimizations | ENG-202 & ENG-204

[LuD1161]

Summary

Migrate all frontend server-state from Zustand stores to TanStack Query, with performance optimizations across network, rendering, and bundle loading.

TanStack Query Migration

• Add TanStack Query foundation — QueryClient, org-scoped queryKeys factory, QueryClientProvider
• Create query hooks for all 13 server-state domains (workflows, runs, executions, components, integrations, MCP groups/servers, schedules, secrets, webhooks, API keys, artifacts, human input)
• Create queryOptions() shared factories for execution data consumed by both React hooks and Zustand store actions
• Migrate all pages and components from Zustand stores to TanStack Query hooks
• Delete 11 Zustand stores and their tests (-2,444 lines of boilerplate)
• Remaining Zustand stores (execution, timeline) are UI-only and route API calls through queryOptions() factories

Performance Improvements

Metric	Before	After	Change
Execute Tab DOM elements	2,091	1,444	-31%
Execute Tab API calls	10 (3 duplicate pairs)	8 (1 duplicate)	-20%
Cross-page cache reuse	None (refetch on every mount)	components + workflowsSummary served from cache	0 extra requests on navigation
N+1 queries (WorkflowList, MCP Library)	O(n) per-item fetches	Batch endpoints	O(1) requests
Static data refetching	Refetch every mount	staleTime: Infinity for components, templates, providers	Fetch once, cache forever
Terminal run refetching	Refetch on poll interval	staleTime: Infinity for completed/failed/cancelled runs	0 refetches for finished runs
CLS	0.00	0.00	Maintained

Bundle & Loading Optimizations

• All page routes use React.lazy() — initial bundle only loads shell + auth
• Manual Rollup chunks (vendor-react, vendor-radix, vendor-analytics) for stable browser caching
• Idle-time route prefetch via requestIdleCallback for all sidebar pages
• Idle-time data prefetch for components and workflowsSummary (gated on auth)
• Deferred loading for CommandPalette (~350KB lucide icons, loaded only on first open)
• Font preloading via <link rel="preload"> in index.html

4-Tier Stale Time Strategy

Tier	staleTime	Examples
Static	Infinity	Components, templates, integration providers
Default	30s	Schedules, webhooks, secrets, artifacts
Terminal-aware	Infinity when run is finished	Node I/O, results, run details for completed runs
Polling	0	Execution status, trace, events during live runs

Backend

• Add batch endpoints for workflow summaries and MCP group server counts (N+1 fix)

Documentation

• Add frontend/docs/performance.md — authoritative performance guidelines
• Add load testing audit report with per-page metrics
• Update frontend/docs/state.md with TanStack Query migration patterns
• Add performance-review agent skill

Test Plan

• 752 tests passing across 112 files (0 failures)
• Full Playwright-automated load audit across all 12 pages with medium-tier seed data (50 workflows, ~2K runs, ~45K traces)
• Verified TanStack Query cache state per page — correct stale times, cache hits on SPA navigation
• Verified API call counts per page — no unexpected duplicates or regressions
• Confirmed DOM element counts stable or improved across all pages
• Mobile/tablet responsive layout verified (iPhone 375x667, Tablet 768x1024)
• CLS = 0.00 maintained across all pages
• TypeScript strict compilation passing (tsc --build)
• Pre-commit (ESLint) and pre-push (tsc + tests) hooks passing

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:cf1cbeac16

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".