Skip to content

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

Merged
LuD1161 merged 4 commits intomainfrom
LuD1161/tanstack-query-migrate
Feb 18, 2026
Merged

feat(frontend): migrate server-state from Zustand to TanStack Query + perf optimizations | ENG-202 & ENG-204#298
LuD1161 merged 4 commits intomainfrom
LuD1161/tanstack-query-migrate

Conversation

@LuD1161
Copy link
Contributor

@LuD1161 LuD1161 commented Feb 17, 2026

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

Copy link

@chatgpt-codex-connector chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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".

@LuD1161 LuD1161 changed the title feat(frontend): migrate server-state from Zustand to TanStack Query + perf optimizations feat(frontend): migrate server-state from Zustand to TanStack Query + perf optimizations | ENG-202 Feb 17, 2026
… domains

- Install @tanstack/react-query, add QueryClient and QueryClientProvider
- Create org-scoped query key factories in queryKeys.ts
- Create queryOptions() factories for execution data in executionQueryOptions.ts
- Add query hooks for all server-state domains: runs, workflows, executions,
  components, integrations, MCP groups/servers, schedules, secrets, webhooks,
  API keys, artifacts, and human input
- Export TerminalChunkResponse from api.ts for queryOptions type inference
- Add mcpGroupsApi service for N+1 batch endpoints

Signed-off-by: Aseem Shrey <LuD1161@users.noreply.github.com>
@LuD1161 LuD1161 force-pushed the LuD1161/tanstack-query-migrate branch from cf1cbea to 48e29f9 Compare February 18, 2026 02:45
@LuD1161 LuD1161 changed the title feat(frontend): migrate server-state from Zustand to TanStack Query + perf optimizations | ENG-202 feat(frontend): migrate server-state from Zustand to TanStack Query + perf optimizations | ENG-202 & ENG-204 Feb 18, 2026
@LuD1161 LuD1161 force-pushed the LuD1161/tanstack-query-migrate branch from 48e29f9 to 25b615b Compare February 18, 2026 02:52
…e Zustand stores

- Migrate all pages, components, and features from Zustand stores to query hooks
- Route execution/timeline Zustand stores through queryOptions() factories
- Delete 11 Zustand stores (apiKey, artifact, component, integration, mcpGroup,
  mcpServer, run, schedule, secret, webhook) and their tests
- Update remaining tests to work with TanStack Query patterns
- Fix N+1 query patterns on WorkflowList and MCP Library pages (backend batch endpoints)

Signed-off-by: Aseem Shrey <LuD1161@users.noreply.github.com>
…ackend batch endpoints

- Add idle-time prefetching for components and workflows via requestIdleCallback
- Optimize bundle with manual chunks, font preloading, and lazy route loading
- Add backend batch endpoints for workflow summaries and MCP group server counts
- Gate prefetch on auth state and align cache shapes to prevent mismatches
- Add VITE_DISABLE_DEVTOOLS env var

Signed-off-by: Aseem Shrey <LuD1161@users.noreply.github.com>
@LuD1161 LuD1161 force-pushed the LuD1161/tanstack-query-migrate branch from 25b615b to c46da6a Compare February 18, 2026 02:56
…d load testing audit

- Add frontend/docs/performance.md with query hook and rendering guidelines
- Update frontend/docs/state.md with TanStack Query migration patterns
- Add load testing audit report (2026-02-17)
- Add performance-review skill and rename load-audit to stress-test-frontend
- Update AGENTS.md with TanStack Query enforcement rules
- Update READMEs for hooks and stores

Signed-off-by: Aseem Shrey <LuD1161@users.noreply.github.com>
@LuD1161 LuD1161 force-pushed the LuD1161/tanstack-query-migrate branch from c46da6a to 75230bd Compare February 18, 2026 02:59
@LuD1161 LuD1161 merged commit cf77e6d into main Feb 18, 2026
3 checks passed
@LuD1161 LuD1161 deleted the LuD1161/tanstack-query-migrate branch February 18, 2026 03:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

Comments