diff --git a/.claude/skills/performance-review/SKILL.md b/.claude/skills/performance-review/SKILL.md
new file mode 100644
index 00000000..fd78dc2d
--- /dev/null
+++ b/.claude/skills/performance-review/SKILL.md
@@ -0,0 +1,91 @@
+---
+name: performance-review
+description: Review frontend code changes for performance anti-patterns and guideline compliance. Checks query hooks, stale times, bundle impact, rendering patterns, and Zustand selectors.
+user_invocable: true
+---
+
+# Frontend Performance Review
+
+**Reference:** `frontend/docs/performance.md`
+
+---
+
+## When to Invoke
+
+- Before submitting a PR that adds or modifies query hooks, page components, Zustand stores, or real-time features
+- When the user asks for a "performance review" or "perf check"
+- As part of the component-development workflow for new pages
+
+## Agent Instructions
+
+When invoked, perform the following checks in order. Report PASS/FAIL/WARN for each. Group failures by severity: **CRITICAL** (must fix before merge), **WARNING** (should fix), **INFO** (consider).
+
+### Step 1: Identify Scope
+
+Read the diff or the files specified by the user. If no files specified, use `git diff --name-only` to find changed frontend files. Identify which categories apply: query hooks, page routes, stores, real-time, bundle.
+
+### Step 2: Query Hook Checks
+
+1. Search for `useState` + `useEffect` + `api.` within 20 lines of each other in changed files. If found: **CRITICAL** — should be a TanStack Query hook.
+2. Check that new `useQuery` calls reference a key from `queryKeys.ts`, not an inline array. If inline: **CRITICAL**.
+3. Check that new query hook files are named `use<Domain>Queries.ts` and placed in `src/hooks/queries/`. If misplaced: **WARNING**.
+4. Check that `useMutation` calls include `onSuccess` with `queryClient.invalidateQueries()`. If missing: **WARNING**.
+5. Check for `skipToken` usage on conditional queries vs. `enabled: false`. Flag `enabled: false` without `skipToken` as **WARNING**.
+
+### Step 3: Stale Time Audit
+
+1. For each new `useQuery`, check if `staleTime` is set explicitly or inherits the 30s default appropriately.
+2. Cross-reference the data type: if the query fetches components, templates, or providers — flag missing `staleTime: Infinity` as **CRITICAL**.
+3. For execution queries, verify they use `executionQueryOptions.ts` factories rather than inline values. Flag inconsistency as **WARNING**.
+4. For queries on terminal runs, verify `terminalStaleTime()` is used rather than a hardcoded number.
+
+### Step 4: Bundle Impact
+
+1. For each new page added to `App.tsx`: verify it uses `React.lazy(() => import(...))`. Static imports are **CRITICAL**.
+2. Verify new sidebar pages are added to `routePrefetchMap` in `src/lib/prefetch-routes.ts`. Missing entry is **WARNING**.
+3. If a new conditionally-visible component imports a library > 100KB (check for `@xterm`, `posthog-js`, `lucide-react` barrel imports): flag as **WARNING** — consider deferred load pattern.
+
+### Step 5: Rendering Checks
+
+1. Search for `const [*, set*] = useState` followed by `set*` inside a `useEffect` that references query data — **CRITICAL** (should use `useMemo`).
+2. Look for derived data calculations inline in JSX without `useMemo` involving array operations (filter, sort, reduce) — **WARNING**.
+3. Check for `React.memo` usage on new components in `timeline/` or `workflow/` directories that re-render frequently — **INFO** if missing.
+
+### Step 6: Zustand Store Checks
+
+1. Search for `const store = use<X>Store()` or destructuring from `use<X>Store()` without a selector — full store subscription. **WARNING**.
+2. For new stores using `persist`, verify `partialize` is present. Missing is **WARNING**.
+3. For new `persist` stores, verify action functions are excluded from `partialize`.
+
+### Step 7: Generate Report
+
+Format the output as follows:
+
+```
+## Performance Review: [description of scope]
+
+### Critical (must fix before merge)
+- [file:line] Description of issue. See: performance.md § [section]
+
+### Warnings (should fix)
+- [file:line] Description of issue. See: performance.md § [section]
+
+### Info (consider)
+- [file:line] Description. See: performance.md § [section]
+
+### Passed Checks
+- [n] query hooks using TanStack Query correctly
+- [n] page routes using React.lazy
+- [n] Zustand selectors properly scoped
+- staleTime: appropriate tiers applied
+
+### Summary
+[1-2 sentences on overall performance hygiene of the change]
+```
+
+## Rules
+
+- This is a **review only** — do NOT make code changes unless the user explicitly asks
+- Always cite the file and line number for each finding
+- Always reference `frontend/docs/performance.md` for the relevant pattern section
+- If no frontend files are in the diff, report "No frontend changes detected" and exit
diff --git a/.claude/skills/load-audit/SKILL.md b/.claude/skills/stress-test-frontend/SKILL.md
similarity index 95%
rename from .claude/skills/load-audit/SKILL.md
rename to .claude/skills/stress-test-frontend/SKILL.md
index 01b60f27..8b42cbfa 100644
--- a/.claude/skills/load-audit/SKILL.md
+++ b/.claude/skills/stress-test-frontend/SKILL.md
@@ -1,5 +1,5 @@
 ---
-name: load-audit
+name: stress-test-frontend
 description: Run a frontend load testing audit. Seeds data, tests all pages via Chrome DevTools MCP, records network calls, TanStack queries, DOM sizes, and generates a timestamped report.
 user_invocable: true
 ---
@@ -13,7 +13,7 @@ user_invocable: true
 
 ## Agent Instructions
 
-When the user invokes `/load-audit`, perform a full frontend load testing audit:
+When the user invokes `/stress-test-frontend`, perform a full frontend load testing audit:
 
 ### 1. Setup
 
diff --git a/AGENTS.md b/AGENTS.md
index 4363dbc1..efcfeec4 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -98,6 +98,35 @@ bun --cwd backend run db:studio            # View data
 4. **E2E Tests**: Mandatory for significant features. Place in `e2e-tests/` folder.
 5. **GitHub CLI**: Use `gh` for all GitHub operations (issues, PRs, actions, releases). Never use browser automation for GitHub tasks.
 
+### Frontend: Read Before Writing Code
+
+Before writing ANY frontend code that fetches data or adds a page, you MUST read these files first:
+
+1. `frontend/docs/state.md` — Decision guide: TanStack Query vs Zustand, hook patterns, anti-patterns
+2. `frontend/docs/performance.md` — Stale time tiers, bundle splitting, prefetch patterns, query key architecture
+3. `frontend/src/lib/queryKeys.ts` — Existing query key factories (add new keys here, never inline)
+4. Browse `frontend/src/hooks/queries/` — Follow existing hook naming conventions (`use<Domain>Queries.ts`)
+
+### Frontend Data Fetching (Mandatory)
+
+6. **All API data must use TanStack Query hooks** in `frontend/src/hooks/queries/`. Never use `useState` + `useEffect` to fetch backend data — this is the single most important frontend rule.
+7. **Query keys** go in `frontend/src/lib/queryKeys.ts` (org-scoped, factory functions).
+8. **After mutations**, invalidate the relevant query cache via `queryClient.invalidateQueries()` — do not manually update local state.
+9. **Derive data** from query results using `useMemo`, not by copying into separate `useState`.
+10. **Zustand stores** are for client-only UI state (canvas, timeline, auth). Never store API data in Zustand.
+
+See `frontend/docs/state.md` for patterns, anti-patterns, and the full decision guide.
+
+### Frontend Performance (Mandatory)
+
+See `frontend/docs/performance.md` for the complete reference with code examples.
+
+11. **Every new page must use `React.lazy()`** in `App.tsx`. Add the route to `routePrefetchMap` in `src/lib/prefetch-routes.ts`.
+12. **Set `staleTime: Infinity` for static/reference data** (components, templates, providers). The 30s default is wrong for them.
+13. **Use `skipToken` for conditional queries** instead of `enabled: false` alone. See `useRunQueries.ts`.
+14. **Granular Zustand selectors**: `useStore((s) => s.field)`, never `const store = useStore()`.
+15. **No N+1 queries**: never call a query hook inside `.map()`. Use a batched endpoint (see `useMcpGroupsWithServers`).
+
 ---
 
 ## Architecture
@@ -140,6 +169,16 @@ When tasks match a skill, load it: `cat .claude/skills/<name>/SKILL.md`
 <description>Creating components (inline/docker). Dynamic ports, retry policies, PTY patterns, IsolatedContainerVolume.</description>
 <location>project</location>
 </skill>
+<skill>
+<name>performance-review</name>
+<description>Review code changes for frontend performance anti-patterns. Checks stale times, bundle splitting, Zustand selectors, N+1 queries, and React rendering.</description>
+<location>project</location>
+</skill>
+<skill>
+<name>stress-test-frontend</name>
+<description>Run a frontend load testing audit. Seeds data, tests all pages via Chrome DevTools MCP, records network calls, TanStack queries, DOM sizes, and generates a timestamped report.</description>
+<location>project</location>
+</skill>
 </available_skills>
 
 </skills_system>
diff --git a/backend/src/mcp-groups/mcp-groups.controller.ts b/backend/src/mcp-groups/mcp-groups.controller.ts
index 63bc1f6d..2af6e26d 100644
--- a/backend/src/mcp-groups/mcp-groups.controller.ts
+++ b/backend/src/mcp-groups/mcp-groups.controller.ts
@@ -45,9 +45,16 @@ export class McpGroupsController {
   @Get()
   @ApiOperation({ summary: 'List all MCP groups' })
   @ApiQuery({ name: 'enabled', required: false, type: Boolean })
+  @ApiQuery({ name: 'includeServers', required: false, type: Boolean })
   @ApiOkResponse({ type: [McpGroupResponse] })
-  async listGroups(@Query('enabled') enabled?: string): Promise<McpGroupResponse[]> {
+  async listGroups(
+    @Query('enabled') enabled?: string,
+    @Query('includeServers') includeServers?: string,
+  ): Promise<McpGroupResponse[]> {
     const enabledOnly = enabled === 'true';
+    if (includeServers === 'true') {
+      return this.mcpGroupsService.listGroupsWithServers(enabledOnly);
+    }
     return this.mcpGroupsService.listGroups(enabledOnly);
   }
 
diff --git a/backend/src/mcp-groups/mcp-groups.repository.ts b/backend/src/mcp-groups/mcp-groups.repository.ts
index 59602f21..3b2a4352 100644
--- a/backend/src/mcp-groups/mcp-groups.repository.ts
+++ b/backend/src/mcp-groups/mcp-groups.repository.ts
@@ -123,6 +123,60 @@ export class McpGroupsRepository {
 
   // Group-Server relationship methods
 
+  async findAllServersGrouped(): Promise<
+    Map<
+      string,
+      (McpServerRecord & { recommended: boolean; defaultSelected: boolean; toolCount: number })[]
+    >
+  > {
+    const query = sql`
+      SELECT
+        gs.group_id,
+        s.id,
+        s.name,
+        s.description,
+        s.transport_type,
+        s.endpoint,
+        s.command,
+        s.args,
+        s.headers,
+        s.enabled,
+        s.health_check_url,
+        s.last_health_check,
+        s.last_health_status,
+        s.group_id AS server_group_id,
+        s.organization_id,
+        s.created_by,
+        s.created_at,
+        s.updated_at,
+        gs.recommended,
+        gs.default_selected,
+        COALESCE(tc.tool_count, 0) as tool_count
+      FROM mcp_group_servers gs
+      INNER JOIN mcp_servers s ON gs.server_id = s.id
+      LEFT JOIN (
+        SELECT server_id, COUNT(id) as tool_count
+        FROM mcp_server_tools
+        GROUP BY server_id
+      ) tc ON tc.server_id = s.id
+      ORDER BY gs.group_id, CASE WHEN gs.recommended THEN 0 ELSE 1 END ASC, s.name
+    `;
+
+    const result = await this.db.execute(query);
+    const grouped = new Map<
+      string,
+      (McpServerRecord & { recommended: boolean; defaultSelected: boolean; toolCount: number })[]
+    >();
+    for (const row of result.rows as any[]) {
+      const groupId = row.group_id;
+      if (!grouped.has(groupId)) {
+        grouped.set(groupId, []);
+      }
+      grouped.get(groupId)!.push(row);
+    }
+    return grouped;
+  }
+
   async findServersByGroup(
     groupId: string,
   ): Promise<
diff --git a/backend/src/mcp-groups/mcp-groups.service.ts b/backend/src/mcp-groups/mcp-groups.service.ts
index 3d9b2f5e..20132ba1 100644
--- a/backend/src/mcp-groups/mcp-groups.service.ts
+++ b/backend/src/mcp-groups/mcp-groups.service.ts
@@ -106,6 +106,19 @@ export class McpGroupsService implements OnModuleInit {
     return groups.map((g) => this.mapGroupToResponse(g));
   }
 
+  async listGroupsWithServers(
+    enabledOnly = false,
+  ): Promise<(McpGroupResponse & { servers: McpGroupServerResponse[] })[]> {
+    const [groups, serversMap] = await Promise.all([
+      this.repository.findAll(enabledOnly ? { enabled: true } : {}),
+      this.repository.findAllServersGrouped(),
+    ]);
+    return groups.map((g) => ({
+      ...this.mapGroupToResponse(g),
+      servers: (serversMap.get(g.id) ?? []).map((s) => this.mapGroupServerToResponse(s)),
+    }));
+  }
+
   listTemplates(): GroupTemplateDto[] {
     return this.seedingService.getAllTemplates();
   }
diff --git a/backend/src/workflows/repository/workflow.repository.ts b/backend/src/workflows/repository/workflow.repository.ts
index 264c3f92..387ca000 100644
--- a/backend/src/workflows/repository/workflow.repository.ts
+++ b/backend/src/workflows/repository/workflow.repository.ts
@@ -16,6 +16,7 @@ export interface WorkflowSummaryRecord {
   description: string | null;
   organizationId: string | null;
   lastRun: Date | null;
+  latestRunStatus: string | null;
   runCount: number;
   nodeCount: number;
   createdAt: Date;
@@ -152,6 +153,12 @@ export class WorkflowRepository {
       description: workflowsTable.description,
       organizationId: workflowsTable.organizationId,
       lastRun: workflowsTable.lastRun,
+      latestRunStatus: sql<string | null>`(
+        SELECT wr.status FROM workflow_runs wr
+        WHERE wr.workflow_id = ${workflowsTable.id}
+        ORDER BY wr.created_at DESC
+        LIMIT 1
+      )`.as('latest_run_status'),
       runCount: workflowsTable.runCount,
       nodeCount: sql<number>`coalesce(jsonb_array_length(${workflowsTable.graph}->'nodes'), 0)`.as(
         'node_count',
diff --git a/backend/src/workflows/workflows.service.ts b/backend/src/workflows/workflows.service.ts
index cfd922a5..3f461595 100644
--- a/backend/src/workflows/workflows.service.ts
+++ b/backend/src/workflows/workflows.service.ts
@@ -54,6 +54,7 @@ export interface WorkflowSummaryResponse {
   description: string | null;
   organizationId: string | null;
   lastRun: string | null;
+  latestRunStatus: string | null;
   runCount: number;
   nodeCount: number;
   createdAt: string;
@@ -560,6 +561,7 @@ export class WorkflowsService {
     return records.map((record) => ({
       ...record,
       lastRun: record.lastRun?.toISOString() ?? null,
+      latestRunStatus: record.latestRunStatus ?? null,
       createdAt: record.createdAt.toISOString(),
       updatedAt: record.updatedAt.toISOString(),
     }));
diff --git a/bun.lock b/bun.lock
index b440ecb4..93d63984 100644
--- a/bun.lock
+++ b/bun.lock
@@ -128,6 +128,8 @@
         "@radix-ui/react-tooltip": "^1.2.8",
         "@shipsec/backend-client": "workspace:*",
         "@shipsec/shared": "workspace:*",
+        "@tanstack/react-query": "^5.90.21",
+        "@tanstack/react-query-devtools": "^5.91.3",
         "@uiw/react-markdown-preview": "^5.1.5",
         "ai": "^5.0.76",
         "ansi_up": "^6.0.6",
@@ -1054,6 +1056,14 @@
 
     "@tailwindcss/typography": ["@tailwindcss/typography@0.5.19", "", { "dependencies": { "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg=="],
 
+    "@tanstack/query-core": ["@tanstack/query-core@5.90.20", "", {}, "sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg=="],
+
+    "@tanstack/query-devtools": ["@tanstack/query-devtools@5.93.0", "", {}, "sha512-+kpsx1NQnOFTZsw6HAFCW3HkKg0+2cepGtAWXjiiSOJJ1CtQpt72EE2nyZb+AjAbLRPoeRmPJ8MtQd8r8gsPdg=="],
+
+    "@tanstack/react-query": ["@tanstack/react-query@5.90.21", "", { "dependencies": { "@tanstack/query-core": "5.90.20" }, "peerDependencies": { "react": "^18 || ^19" } }, "sha512-0Lu6y5t+tvlTJMTO7oh5NSpJfpg/5D41LlThfepTixPYkJ0sE2Jj0m0f6yYqujBwIXlId87e234+MxG3D3g7kg=="],
+
+    "@tanstack/react-query-devtools": ["@tanstack/react-query-devtools@5.91.3", "", { "dependencies": { "@tanstack/query-devtools": "5.93.0" }, "peerDependencies": { "@tanstack/react-query": "^5.90.20", "react": "^18 || ^19" } }, "sha512-nlahjMtd/J1h7IzOOfqeyDh5LNfG0eULwlltPEonYy0QL+nqrBB+nyzJfULV+moL7sZyxc2sHdNJki+vLA9BSA=="],
+
     "@temporalio/activity": ["@temporalio/activity@1.14.1", "", { "dependencies": { "@temporalio/client": "1.14.1", "@temporalio/common": "1.14.1", "abort-controller": "^3.0.0" } }, "sha512-wG2fTNgomhcKOzPY7mqhKqe8scawm4BvUYdgX1HJouHmVNRgtZurf2xQWJZQOTxWrsXfdoYqzohZLzxlNtcC5A=="],
 
     "@temporalio/client": ["@temporalio/client@1.14.1", "", { "dependencies": { "@grpc/grpc-js": "^1.12.4", "@temporalio/common": "1.14.1", "@temporalio/proto": "1.14.1", "abort-controller": "^3.0.0", "long": "^5.2.3", "uuid": "^11.1.0" } }, "sha512-AfWSA0LYzBvDLFiFgrPWqTGGq1NGnF3d4xKnxf0PGxSmv5SLb/aqQ9lzHg4DJ5UNkHO4M/NwzdxzzoaR1J5F8Q=="],
diff --git a/frontend/.env.example b/frontend/.env.example
index 8089b93e..d9951e87 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -26,3 +26,7 @@ VITE_LOGO_DEV_PUBLIC_KEY=
 # Leave empty to hide Dashboards navigation link
 # For dev/prod: http://localhost/analytics (nginx in dev/prod)
 VITE_OPENSEARCH_DASHBOARDS_URL=http://localhost/analytics
+
+# Dev Tools
+# Set to 'true' to hide TanStack Query devtools in development mode
+# VITE_DISABLE_DEVTOOLS=true
diff --git a/frontend/README.md b/frontend/README.md
index 9da70932..d1315fe2 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -3,10 +3,12 @@
 React 19 + Vite UI for building and monitoring security workflows with real-time execution visibility.
 
 ## Prerequisites
+
 - Bun latest (see root `README.md` for install instructions)
 - Infrastructure services running (`just dev` from repo root)
 
 ## Development Commands
+
 ```bash
 # Install workspace dependencies (run once from repo root)
 bun install
@@ -18,23 +20,25 @@ bun dev
 bun run typecheck
 bun run lint
 
-# Run component/unit tests (Vitest + Testing Library)
-bun run test
+# Run component/unit tests (Bun test runner + Testing Library)
+bun test
 ```
 
 ## Architecture Overview
 
 ### Core Technologies
+
 - **React 19** with TypeScript for component development
 - **Vite** for fast development and building
 - **ReactFlow** for visual workflow editor
 - **xterm.js** for real-time terminal display
 - **Clerk** for authentication and user management
-- **Zustand** for execution timeline state management
-- **React Query** for server state management
+- **TanStack Query** (`@tanstack/react-query`) for all server state — strict stale-time conventions; see `docs/performance.md`
+- **Zustand** for client-only UI state (canvas, timeline, auth)
 - **Tailwind CSS** with shadcn/ui components
 
 ### Key Features
+
 - **Visual Workflow Builder**: Drag-and-drop workflow canvas with ReactFlow
 - **Real-time Terminal Display**: xterm.js integration for live terminal output
 - **Execution Timeline**: Interactive timeline with playback controls and seeking
@@ -46,21 +50,26 @@ bun run test
 ## Key Concepts
 
 ### State Management
-- **Timeline Store**: `src/store/executionTimelineStore.ts` - Zustand-based execution timeline state
-- **API State**: React Query for server state synchronization
-- **Component State**: Local React state with hooks for UI interactions
+
+- **Server State**: TanStack Query hooks in `src/hooks/queries/` — all API data fetching, caching, and mutations. See `docs/state.md` for patterns.
+- **Client UI State**: Zustand stores in `src/store/` — canvas, timeline playback, auth session
+- **Component State**: Local `useState` for UI-only state scoped to one component
+- **Derived State**: `useMemo` to filter/transform data from query hooks
 
 ### Real-time Features
+
 - **Terminal Streaming**: `src/hooks/useTerminalStream.ts` - Real-time terminal output via SSE
 - **Timeline Synchronization**: `src/hooks/useTimelineTerminalStream.ts` - Terminal playback synchronized to timeline position
 - **Live Updates**: WebSocket integration for workflow status changes
 
 ### API Integration
+
 - **Generated Client**: `@shipsec/backend-client` - Auto-generated TypeScript API client
 - **Service Layer**: `src/services/` - Centralized API communication and error handling
 - **Authentication**: Clerk-based auth with organization scoping
 
 ## Project Structure
+
 ```
 src/
 ├── components/
@@ -77,30 +86,51 @@ src/
 ├── store/
 │   └── executionTimelineStore.ts  # Timeline state management
 ├── hooks/
-│   ├── useTerminalStream.ts       # Terminal streaming
+│   ├── queries/                     # TanStack Query hooks (all API data)
+│   │   ├── useWorkflowQueries.ts    # Workflow list/summary
+│   │   ├── useScheduleQueries.ts    # Schedule CRUD
+│   │   ├── useComponentQueries.ts   # Component catalogue
+│   │   └── ...                      # One file per domain
+│   ├── usePrefetchOnIdle.ts         # Idle-time cache warming
+│   ├── useTerminalStream.ts         # Terminal streaming
 │   ├── useTimelineTerminalStream.ts # Timeline synchronization
-│   └── useWorkflowStream.ts       # Workflow status updates
+│   └── useWorkflowStream.ts         # Workflow status updates
 ├── services/
 │   └── api.ts                     # API service layer
-└── lib/                          # Utilities and helpers
+├── lib/
+│   ├── queryClient.ts             # TanStack Query client config
+│   ├── queryKeys.ts               # Org-scoped query key factories
+│   └── utils.ts                   # Utilities and helpers
 ```
 
 ## Component Development
 
 ### UI Components
+
 - Use shadcn/ui components from `src/components/ui/`
 - Follow Tailwind CSS conventions for styling
 - Implement proper TypeScript interfaces for props
-- Use React.memo for performance optimization
+- Use `React.memo` for hot-path components (timeline, canvas). See `docs/performance.md` for when to memoize
 
 ### Workflow Components
+
 - Extend ReactFlow node types for custom workflow nodes
 - Implement proper data flow between nodes
 - Use Zod schemas for input/output validation
 - Support both design-time and execution-time rendering
 
+## Agent Skills
+
+The following Claude Code skills are available for frontend work:
+
+- `/performance-review` — Audit code changes for performance anti-patterns (stale times, bundle splitting, Zustand selectors, N+1 queries)
+- `/stress-test-frontend` — Run a full load testing audit: seed data, test all pages via Chrome DevTools, measure network calls and DOM sizes
+- `/component-development` — Guide for creating inline/docker components with dynamic ports, retry policies, PTY patterns
+
 ## Where To Read More
+
 - **[Architecture Overview](../docs/architecture.md)** - Complete system design and component interactions
 - **[Component Development](../docs/component-development.md)** - Building custom security components
 - **[Getting Started](../docs/getting-started.md)** - Development setup and first workflow
-- **[Analytics](../docs/analytics.md)** - PostHog integration and privacy
\ No newline at end of file
+- **[Performance Guidelines](docs/performance.md)** - Query caching, bundle splitting, rendering, Zustand selectors
+- **[Analytics](../docs/analytics.md)** - PostHog integration and privacy
diff --git a/frontend/docs/audits/load-audit-2026-02-17T21-11.md b/frontend/docs/audits/load-audit-2026-02-17T21-11.md
new file mode 100644
index 00000000..f1edafdc
--- /dev/null
+++ b/frontend/docs/audits/load-audit-2026-02-17T21-11.md
@@ -0,0 +1,519 @@
+# Frontend Load Testing Audit Report
+
+**Date:** 2026-02-17
+**Branch:** `LuD1161/tanstack-query-migrate`
+**Seed Tier:** Medium (50 workflows, ~2000 runs, ~45K traces, ~17K node I/O, ~45K agent events)
+**Environment:** Nginx reverse proxy (localhost:80 → Vite dev server), no CPU/network throttling
+**Seed Duration:** 15.4s
+**Testing Plan:** See `frontend/docs/load-testing-plan.md`
+**Previous Report:** `load-audit-2026-02-18T00-00.md`
+**Browser Automation:** Playwright MCP (Chrome DevTools MCP unavailable due to browser conflict)
+
+---
+
+## 1. Workflow List Page (`/`)
+
+### 1.1 Performance Metrics
+
+| Metric                 | Value    | Previous | Rating |
+| ---------------------- | -------- | -------- | ------ |
+| **TTFB**               | 227 ms   | 54 ms    | GOOD   |
+| **FCP**                | 5,736 ms | N/A      | POOR   |
+| **CLS**                | 0.00     | 0.00     | GOOD   |
+| **DOM Interactive**    | 236 ms   | N/A      | GOOD   |
+| **DOM Content Loaded** | 5,657 ms | N/A      | —      |
+
+> **Note:** LCP was not captured via Playwright (PerformanceObserver lost on cross-origin navigation). Previous audit measured LCP at 4,893ms via Chrome DevTools trace. TTFB difference (227ms vs 54ms) is attributable to Playwright automation overhead. CLS remains excellent at 0.00 — no layout shifts.
+
+### 1.2 API Requests
+
+| #   | Endpoint                    | Status |
+| --- | --------------------------- | ------ |
+| 1   | `/api/v1/workflows/summary` | 200 OK |
+| 2   | `/api/v1/components`        | 200 OK |
+
+**Observations:**
+
+- Only **2 API calls** on the list page — efficient (unchanged from previous)
+- All **50 workflows** loaded in a single request — no pagination
+- Both responses use gzip compression via nginx
+
+### 1.3 TanStack Query Cache
+
+| Query Key                          | Status  | Stale Time | Is Stale | Data     |
+| ---------------------------------- | ------- | ---------- | -------- | -------- |
+| `["components","local-dev"]`       | success | null       | false    | object   |
+| `["workflowsSummary","local-dev"]` | success | 60s        | false    | 50 items |
+
+**Observations:**
+
+- `components` staleTime now shows `null` (was 600s in previous audit) — likely using `queryClient` default or `Infinity`
+- Workflows summary remains at 60s — appropriate
+- **Clean cache — no ghost queries on this page**
+
+### 1.4 DOM Size: **1,529 elements** (unchanged from previous)
+
+---
+
+## 2. Workflow Detail Page — Design Tab (`/workflows/:id`)
+
+### 2.1 API Requests on SPA Navigation
+
+| #   | Endpoint                           | Notes                                           |
+| --- | ---------------------------------- | ----------------------------------------------- |
+| 1   | `/api/v1/workflows/summary`        | **Served from TanStack cache** (not re-fetched) |
+| 2   | `/api/v1/components`               | **Served from TanStack cache** (not re-fetched) |
+| 3   | `/api/v1/secrets`                  | New fetch — 0 items                             |
+| 4   | `/api/v1/schedules`                | New fetch — 30 items                            |
+| 5   | `/api/v1/workflows/:id`            | Full workflow with graph — large payload        |
+| 6   | `/api/v1/schedules?workflowId=:id` | Workflow-specific schedules — 0 items           |
+
+**Observations:**
+
+- **6 API calls** — same as previous (4 new + 2 cached from prefetch)
+- Cache reuse for `workflows/summary` and `components` is working correctly
+
+### 2.2 TanStack Query Cache — 7 queries
+
+| Query Key                                     | Status      | Stale Time | Is Stale | Data      | Issue?          |
+| --------------------------------------------- | ----------- | ---------- | -------- | --------- | --------------- |
+| `["components","local-dev"]`                  | success     | null       | false    | object    |                 |
+| `["workflowsSummary","local-dev"]`            | success     | 60s        | false    | 50 items  |                 |
+| `["secrets","local-dev"]`                     | success     | 300s       | false    | 0 items   |                 |
+| `["schedules","local-dev",{}]`                | success     | 60s        | false    | 30 items  |                 |
+| `["schedules","local-dev",{workflowId}]`      | success     | 60s        | false    | 0 items   |                 |
+| **`["runs","local-dev","__disabled__"]`**     | **PENDING** | 30s        | false    | undefined | **Ghost query** |
+| **`["workflow","local-dev","__disabled__"]`** | **PENDING** | 60s        | false    | undefined | **Ghost query** |
+
+### FINDINGS — Ghost Queries (PERSIST from previous audit):
+
+1. **`["runs","local-dev","__disabled__"]`** — status=pending + fetchStatus=idle. Disabled sentinel key sitting in cache.
+2. **`["workflow","local-dev","__disabled__"]`** — Same pattern.
+
+### 2.3 DOM Size: **1,667 elements** (unchanged from previous)
+
+---
+
+## 3. Workflow Detail Page — Execute Tab (`/workflows/:id/runs/:runId`)
+
+### 3.1 API Requests on Execute Tab
+
+| #   | Endpoint                                        | Notes            |
+| --- | ----------------------------------------------- | ---------------- |
+| 1   | `/api/v1/workflows/runs?workflowId=:id&limit=5` | Run selector     |
+| 2   | `/api/v1/workflows/runs/:runId/events`          | Event timeline   |
+| 3   | `/api/v1/workflows/runs/:runId/dataflows`       | Node I/O data    |
+| 4   | `/api/v1/workflows/runs/:runId/status`          | Run status       |
+| 5   | `/api/v1/workflows/:id/versions/:versionId`     | Workflow version |
+| 6   | `/api/v1/workflows/runs/:runId/stream`          | Live SSE stream  |
+| 7   | `/api/v1/workflows/runs/:runId/events`          | **DUPLICATE**    |
+| 8   | `/api/v1/workflows/runs/:runId/logs?limit=500`  | Logs             |
+
+### FINDING: API calls reduced from 10 → 8 (IMPROVEMENT)
+
+Previous audit showed 10 API calls with 3 pairs of duplicates (`events`, `dataflows`, `status`). This audit shows **8 calls** with only **1 duplicate** (`events` called 2x). The duplicate calls for `dataflows` and `status` have been eliminated.
+
+### 3.2 TanStack Query Cache — 7 queries
+
+| Query Key                                | Status  | Stale Time | Is Stale | Notes             |
+| ---------------------------------------- | ------- | ---------- | -------- | ----------------- |
+| `["components","local-dev"]`             | success | null       | false    |                   |
+| `["workflowsSummary","local-dev"]`       | success | 60s        | false    |                   |
+| `["secrets","local-dev"]`                | success | 300s       | false    |                   |
+| `["schedules","local-dev",{}]`           | success | 60s        | false    |                   |
+| `["schedules","local-dev",{workflowId}]` | success | 60s        | false    |                   |
+| `["runs","local-dev","__disabled__"]`    | PENDING | 30s        | false    | Ghost             |
+| `["runs","local-dev",":workflowId"]`     | success | 30s        | false    | Actively fetching |
+
+- Ghost query `["runs","__disabled__"]` persists
+- Ghost `["workflow","__disabled__"]` gone from execute tab (was present in previous audit)
+
+### 3.3 DOM Size: **1,444 elements** — down from 2,091 (MAJOR IMPROVEMENT, -31%)
+
+### 3.4 Console Warnings
+
+- **186+ React Flow warnings** about edges referencing nodes not found — cosmetic but noisy
+
+---
+
+## 4. Mobile & Tablet Responsiveness
+
+### 4.1 iPhone (375x667)
+
+- Sidebar collapses correctly to hamburger menu ("Open menu" button)
+- Table shows only **Name** and **Nodes** columns — Status, Last Run, Last Updated hidden
+- Long workflow names truncated with ellipsis (e.g., "Content Publisher – User He...")
+- "New" button visible in top bar
+- **DOM Size: 1,524 elements** (was 1,529 desktop — minimal difference)
+- **All 50 workflows rendered** — no virtual scrolling on mobile
+
+### 4.2 Tablet (768x1024)
+
+- Sidebar visible with full navigation links
+- Table shows **Name**, **Nodes**, and **Status** columns
+- Status badges slightly clipped at right edge — minor layout issue
+- **DOM Size: 1,529 elements** (same as desktop)
+
+### 4.3 Comparison with Previous Audit
+
+- Mobile layout unchanged — same column hiding behavior
+- Sidebar collapse works correctly at both breakpoints
+- No new responsive regressions
+
+---
+
+## 5. Schedules Page (`/schedules`)
+
+### 5.1 API Requests
+
+| #   | Endpoint                    | Status |
+| --- | --------------------------- | ------ |
+| 1   | `/api/v1/workflows/summary` | 200 OK |
+| 2   | `/api/v1/components`        | 200 OK |
+| 3   | `/api/v1/schedules`         | 200 OK |
+
+- **3 API calls total** — clean, no duplicates
+- 30 schedules loaded in a single request
+
+### 5.2 TanStack Query Cache
+
+| Query Key                                     | Status      | Stale Time | Is Stale | Data      |
+| --------------------------------------------- | ----------- | ---------- | -------- | --------- |
+| `["components","local-dev"]`                  | success     | null       | false    | object    |
+| `["workflowsSummary","local-dev"]`            | success     | 60s        | false    | 50 items  |
+| `["schedules","local-dev",{}]`                | success     | 60s        | false    | 30 items  |
+| **`["workflow","local-dev","__disabled__"]`** | **PENDING** | 60s        | false    | undefined |
+
+- Ghost query `["workflow","__disabled__"]` persists across page navigations — confirmed global issue
+
+### 5.3 DOM Size: **1,455 elements** (was 1,452 — negligible change)
+
+---
+
+## 6. Webhooks Page (`/webhooks`)
+
+### 6.1 API Requests
+
+| #   | Endpoint                          | Status |
+| --- | --------------------------------- | ------ |
+| 1   | `/api/v1/workflows/summary`       | 200 OK |
+| 2   | `/api/v1/components`              | 200 OK |
+| 3   | `/api/v1/webhooks/configurations` | 200 OK |
+
+- **3 API calls total** — all fast
+- 25 webhooks loaded — no pagination
+
+### 6.2 TanStack Query Cache
+
+| Query Key                          | Status  | Stale Time | Is Stale | Data     |
+| ---------------------------------- | ------- | ---------- | -------- | -------- |
+| `["components","local-dev"]`       | success | null       | false    | object   |
+| `["workflowsSummary","local-dev"]` | success | 60s        | false    | 50 items |
+| `["webhooks","local-dev",null]`    | success | 60s        | false    | 25 items |
+
+- **Clean cache — no ghost queries**
+
+### 6.3 DOM Size: **1,181 elements** (was 1,178 — negligible change)
+
+---
+
+## 7. Action Center Page (`/action-center`)
+
+### 7.1 API Requests
+
+| #   | Endpoint                              | Status |
+| --- | ------------------------------------- | ------ |
+| 1   | `/api/v1/workflows/summary`           | 200 OK |
+| 2   | `/api/v1/components`                  | 200 OK |
+| 3   | `/api/v1/human-inputs?status=pending` | 200 OK |
+
+- **3 API calls total**
+- 28 pending human input items loaded
+
+### 7.2 TanStack Query Cache
+
+| Query Key                                          | Status  | Stale Time | Is Stale | Data     |
+| -------------------------------------------------- | ------- | ---------- | -------- | -------- |
+| `["components","local-dev"]`                       | success | null       | false    | object   |
+| `["workflowsSummary","local-dev"]`                 | success | 60s        | false    | 50 items |
+| `["humanInputs","local-dev",{"status":"pending"}]` | success | 30s        | false    | 28 items |
+
+- Clean cache, no issues
+
+### 7.3 DOM Size: **1,026 elements** (was 1,023 — negligible change)
+
+---
+
+## 8. Artifact Library Page (`/artifacts`)
+
+### 8.1 API Requests
+
+| #   | Endpoint                    | Status |
+| --- | --------------------------- | ------ |
+| 1   | `/api/v1/workflows/summary` | 200 OK |
+| 2   | `/api/v1/components`        | 200 OK |
+| 3   | `/api/v1/artifacts`         | 200 OK |
+
+- **3 API calls total**
+- 50 artifacts loaded — no pagination
+
+### 8.2 TanStack Query Cache
+
+| Query Key                              | Status  | Stale Time | Is Stale | Data     |
+| -------------------------------------- | ------- | ---------- | -------- | -------- |
+| `["components","local-dev"]`           | success | null       | false    | object   |
+| `["workflowsSummary","local-dev"]`     | success | 60s        | false    | 50 items |
+| `["artifactLibrary","local-dev",null]` | success | 30s        | false    | 50 items |
+
+- Clean cache, no issues
+
+### 8.3 DOM Size: **1,523 elements** (was 1,520 — negligible change)
+
+---
+
+## 9. Manage Section
+
+### 9.1 Secrets Page (`/secrets`)
+
+| #   | Endpoint                    | Status |
+| --- | --------------------------- | ------ |
+| 1   | `/api/v1/workflows/summary` | 200 OK |
+| 2   | `/api/v1/components`        | 200 OK |
+| 3   | `/api/v1/secrets`           | 200 OK |
+
+- **3 API calls**, 0 secrets returned
+- **Query:** `["secrets","local-dev"]` — success, 300s stale time (appropriate)
+- **DOM Size:** **225 elements** (was 222)
+
+### 9.2 API Keys Page (`/api-keys`)
+
+| #   | Endpoint                    | Status |
+| --- | --------------------------- | ------ |
+| 1   | `/api/v1/workflows/summary` | 200 OK |
+| 2   | `/api/v1/components`        | 200 OK |
+| 3   | `/api/v1/api-keys`          | 200 OK |
+
+- **3 API calls**, 0 API keys returned
+- **Query:** `["apiKeys","local-dev"]` — success, 60s stale time
+- **DOM Size:** **215 elements** (was 212)
+
+### 9.3 MCP Library Page (`/mcp-library`)
+
+| #   | Endpoint                                 | Status |
+| --- | ---------------------------------------- | ------ |
+| 1   | `/api/v1/workflows/summary`              | 200 OK |
+| 2   | `/api/v1/components`                     | 200 OK |
+| 3   | `/api/v1/mcp-groups/templates`           | 200 OK |
+| 4   | `/api/v1/mcp-servers`                    | 200 OK |
+| 5   | `/api/v1/mcp-servers/tools`              | 200 OK |
+| 6   | `/api/v1/mcp-groups?includeServers=true` | 200 OK |
+
+- **6 API calls** — most of any non-detail page
+- `mcp-servers/tools` returns **268 items** — largest item count from any single endpoint
+
+**TanStack Query Cache:**
+
+| Query Key                                 | Status  | Stale Time | Is Stale | Data      |
+| ----------------------------------------- | ------- | ---------- | -------- | --------- |
+| `["mcpGroupTemplates","local-dev"]`       | success | 300s       | false    | 1 item    |
+| `["mcpServers","local-dev"]`              | success | 120s       | false    | 30 items  |
+| `["mcpServers","local-dev","tools"]`      | success | 120s       | false    | 268 items |
+| `["mcpGroups","local-dev","withServers"]` | success | 30s        | false    | 10 items  |
+
+- **DOM Size:** **524 elements** (was 521)
+
+### 9.4 Analytics Settings Page (`/analytics-settings`)
+
+| #   | Endpoint                    | Status |
+| --- | --------------------------- | ------ |
+| 1   | `/api/v1/workflows/summary` | 200 OK |
+| 2   | `/api/v1/components`        | 200 OK |
+
+- **2 API calls** — no page-specific API calls
+- Only `components` and `workflowsSummary` (both prefetched)
+- **No page-specific TanStack queries**
+- **DOM Size:** **252 elements** (was 249)
+
+---
+
+## 10. Integrations Page (`/integrations`) — NEW PAGE
+
+> This page was not included in the previous audit.
+
+### 10.1 API Requests
+
+| #   | Endpoint                        | Status |
+| --- | ------------------------------- | ------ |
+| 1   | `/api/v1/workflows/summary`     | 200 OK |
+| 2   | `/api/v1/components`            | 200 OK |
+| 3   | `/api/v1/integrations`          | 200 OK |
+| 4   | `/api/v1/integrations/provider` | 200 OK |
+
+- **4 API calls** — 2 page-specific
+
+### 10.2 TanStack Query Cache — 5 entries
+
+| Query Key                                           | Status      | Stale Time | Is Stale | Data      | Issue?          |
+| --------------------------------------------------- | ----------- | ---------- | -------- | --------- | --------------- |
+| `["components","local-dev"]`                        | success     | null       | false    | object    |                 |
+| `["workflowsSummary","local-dev"]`                  | success     | 60s        | false    | 50 items  |                 |
+| `["integrations","local-dev"]`                      | success     | 60s        | false    | object    |                 |
+| `["integrations","local-dev","providers"]`          | success     | 300s       | false    | object    |                 |
+| **`["providerConfig","local-dev","__disabled__"]`** | **PENDING** | 300s       | false    | undefined | **Ghost query** |
+
+### FINDING — New Ghost Query:
+
+- **`["providerConfig","local-dev","__disabled__"]`** — Same `__disabled__` sentinel pattern as other ghost queries. Created when no specific provider is selected.
+
+### 10.3 DOM Size: **279 elements**
+
+---
+
+## 11. Cross-Page Analysis
+
+### 11.1 DOM Element Count Comparison
+
+| Page                                       | DOM Elements | Previous  | Change   | Rating       |
+| ------------------------------------------ | ------------ | --------- | -------- | ------------ |
+| Workflow Detail Design                     | 1,667        | 1,667     | —        | Heavy        |
+| Workflow List (`/`)                        | 1,529        | 1,529     | —        | Heavy        |
+| Artifact Library (`/artifacts`)            | 1,523        | 1,520     | +3       | Heavy        |
+| Schedules (`/schedules`)                   | 1,455        | 1,452     | +3       | Heavy        |
+| **Workflow Execute Tab**                   | **1,444**    | **2,091** | **-647** | **IMPROVED** |
+| Webhooks (`/webhooks`)                     | 1,181        | 1,178     | +3       | Moderate     |
+| Action Center (`/action-center`)           | 1,026        | 1,023     | +3       | Moderate     |
+| MCP Library (`/mcp-library`)               | 524          | 521       | +3       | Light        |
+| Integrations (`/integrations`) — NEW       | 279          | —         | NEW      | Light        |
+| Analytics Settings (`/analytics-settings`) | 252          | 249       | +3       | Minimal      |
+| Secrets (`/secrets`)                       | 225          | 222       | +3       | Minimal      |
+| API Keys (`/api-keys`)                     | 215          | 212       | +3       | Minimal      |
+
+> The +3 DOM element increase across all pages likely reflects a minor template/layout change (possibly a new wrapper element in AppLayout).
+
+### 11.2 API Call Count per Page
+
+| Page                   | API Calls | Previous | Change |
+| ---------------------- | --------- | -------- | ------ |
+| Workflow Execute Tab   | 8         | 10       | **-2** |
+| MCP Library            | 6         | 6        | —      |
+| Workflow Detail Design | 6         | 6        | —      |
+| Integrations (NEW)     | 4         | —        | NEW    |
+| Schedules              | 3         | 3        | —      |
+| Webhooks               | 3         | 3        | —      |
+| Action Center          | 3         | 3        | —      |
+| Artifact Library       | 3         | 3        | —      |
+| Secrets                | 3         | 3        | —      |
+| API Keys               | 3         | 3        | —      |
+| Workflow List          | 2         | 2        | —      |
+| Analytics Settings     | 2         | 2        | —      |
+
+### 11.3 Shared Queries Across All Pages
+
+Every page loads `["components","local-dev"]` and `["workflowsSummary","local-dev"]` via `usePrefetchOnIdle`. This is consistent and efficient — the prefetch works correctly across all navigation paths.
+
+### 11.4 Pages Without Pagination
+
+| Page             | Items Loaded    | Pagination? |
+| ---------------- | --------------- | ----------- |
+| Workflow List    | 50 workflows    | **No**      |
+| Schedules        | 30 schedules    | **No**      |
+| Webhooks         | 25 webhooks     | **No**      |
+| Action Center    | 28 human inputs | **No**      |
+| Artifact Library | 50 artifacts    | **No**      |
+| MCP Servers      | 30 servers      | **No**      |
+| MCP Tools        | 268 tools       | **No**      |
+
+> No changes — still no server-side pagination on any list page.
+
+### 11.5 Ghost Query Summary
+
+| Ghost Query Key                                 | Pages Where Found       | Status  |
+| ----------------------------------------------- | ----------------------- | ------- |
+| `["runs","local-dev","__disabled__"]`           | Design tab, Execute tab | PERSIST |
+| `["workflow","local-dev","__disabled__"]`       | Design tab, Schedules   | PERSIST |
+| `["providerConfig","local-dev","__disabled__"]` | Integrations (NEW)      | NEW     |
+
+---
+
+## 12. Comparison with Previous Audit (2026-02-18T00-00)
+
+### Improvements
+
+| #   | Area                       | Previous                   | Current        | Change                           |
+| --- | -------------------------- | -------------------------- | -------------- | -------------------------------- |
+| 1   | **Execute Tab DOM**        | 2,091 elements             | 1,444 elements | **-31% (647 fewer elements)**    |
+| 2   | **Execute Tab API calls**  | 10 (3 dups)                | 8 (1 dup)      | **2 fewer duplicate calls**      |
+| 3   | **Execute Tab duplicates** | events/dataflows/status x2 | events x2 only | `dataflows` and `status` deduped |
+| 4   | **CLS**                    | 0.00                       | 0.00           | Maintained excellent             |
+
+### Regressions
+
+None observed.
+
+### Unchanged Issues
+
+| #   | Issue                                            | Severity |
+| --- | ------------------------------------------------ | -------- |
+| 1   | Ghost queries (`__disabled__` sentinel)          | MEDIUM   |
+| 2   | No pagination on any list page                   | MEDIUM   |
+| 3   | Remaining duplicate `events` call on Execute tab | MEDIUM   |
+| 4   | No virtual scrolling for heavy pages             | LOW      |
+| 5   | React Flow edge warnings (186+)                  | LOW      |
+
+### New Findings
+
+| #   | Finding                                                                                   | Severity |
+| --- | ----------------------------------------------------------------------------------------- | -------- |
+| 1   | New ghost query on Integrations page: `providerConfig/__disabled__`                       | MEDIUM   |
+| 2   | `components` staleTime now shows `null` (was 600s) — possibly using `Infinity` or default | INFO     |
+| 3   | Integrations page audited for first time — 4 API calls, clean except ghost query          | INFO     |
+
+---
+
+## 13. Summary of Findings
+
+### What's Working Well
+
+1. **TanStack Query caching** — `components` and `workflowsSummary` properly cached and reused across SPA navigations
+2. **Prefetch on idle** — `usePrefetchOnIdle` correctly pre-fetches on every page
+3. **Execute tab improvements** — DOM elements reduced by 31%, duplicate API calls reduced from 3 pairs to 1
+4. **CLS = 0.00** — no layout shifts, excellent UX
+5. **Mobile responsive layout** — sidebar collapses, table columns adapt appropriately
+6. **Gzip compression** active on all API responses via nginx
+7. **Run selector pagination** — uses `limit=5`, efficient
+8. **No unnecessary refetches** on SPA navigation
+
+### Issues Found
+
+| #   | Severity   | Finding                                                | Details                                                                                                               |
+| --- | ---------- | ------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- |
+| 1   | **MEDIUM** | Ghost queries persist across navigations               | `runs/__disabled__`, `workflow/__disabled__` still present. New: `providerConfig/__disabled__` on Integrations page.  |
+| 2   | **MEDIUM** | No pagination on ANY list page                         | Workflows (50), schedules (30), webhooks (25), artifacts (50), human inputs (28), MCP servers (30), MCP tools (268).  |
+| 3   | **MEDIUM** | Remaining duplicate `events` API call on Execute tab   | Down from 3 duplicate pairs to 1 — `events` still called 2x on tab switch.                                            |
+| 4   | **LOW**    | No virtual scrolling for heavy pages                   | Execute tab 1,444 DOM elements (improved), Workflow List 1,529, Design tab 1,667. Could cause scroll jank on mobile.  |
+| 5   | **LOW**    | React Flow edge warnings (186+)                        | Edges reference non-existent nodes — cosmetic but pollutes console.                                                   |
+| 6   | **LOW**    | `components` staleTime shows null                      | Was 600s (10 min) in previous audit. Behavior may be unchanged if using `Infinity` or a default, but worth verifying. |
+| 7   | **INFO**   | MCP tools payload: 268 items                           | Largest item count. Well-cached at 120s stale time.                                                                   |
+| 8   | **INFO**   | Analytics Settings has no page-specific queries        | Only prefetched queries load.                                                                                         |
+| 9   | **INFO**   | Tablet layout: Status badges slightly clipped at 768px | Minor layout issue with status column at tablet breakpoint.                                                           |
+
+### Stale Time Configuration Summary (Current)
+
+| Query               | Stale Time        | Previous | Assessment                         |
+| ------------------- | ----------------- | -------- | ---------------------------------- |
+| `components`        | null (default/∞?) | 600s     | Changed — verify intended behavior |
+| `workflowsSummary`  | 60s               | 60s      | Good                               |
+| `workflow` (detail) | 60s               | 60s      | Good                               |
+| `secrets`           | 300s              | 300s     | Appropriate                        |
+| `mcpGroupTemplates` | 300s              | 300s     | Appropriate                        |
+| `schedules`         | 60s               | 60s      | Good                               |
+| `mcpServers`        | 120s              | 120s     | Good                               |
+| `mcpServers/tools`  | 120s              | 120s     | Good                               |
+| `mcpGroups`         | 30s               | 30s      | Acceptable                         |
+| `runs`              | 30s               | 30s      | Good for live data                 |
+| `webhooks`          | 60s               | 60s      | Good                               |
+| `artifactLibrary`   | 30s               | 30s      | Acceptable                         |
+| `humanInputs`       | 30s               | 30s      | Good                               |
+| `apiKeys`           | 60s               | 60s      | Good                               |
+| `providerConfig`    | 300s              | —        | New — appropriate                  |
+| `integrations`      | 60s               | —        | New — good                         |
diff --git a/frontend/docs/performance.md b/frontend/docs/performance.md
new file mode 100644
index 00000000..ec2a3977
--- /dev/null
+++ b/frontend/docs/performance.md
@@ -0,0 +1,666 @@
+# Frontend Performance Guidelines
+
+Authoritative reference for all performance patterns in the ShipSec Studio frontend. Every new feature, page, and query hook must follow these guidelines.
+
+**Enforcement:** Rules 11-15 in `AGENTS.md` are mandatory. This document provides the detail and rationale.
+
+**Agent skills:** Use `/performance-review` to audit code changes against these guidelines. Use `/stress-test-frontend` to run a full load testing audit with Chrome DevTools.
+
+---
+
+## TL;DR: Mandatory Checklist
+
+Scan this before shipping any frontend change.
+
+### Data Fetching
+
+- **DO** use TanStack Query hooks in `src/hooks/queries/` for all API data
+- **DON'T** use `useState` + `useEffect` to fetch backend data
+- **DO** add query keys to `src/lib/queryKeys.ts` using factory functions
+- **DON'T** construct query keys inline in components
+- **DO** set `staleTime: Infinity` for static reference data (components, templates, providers)
+- **DO** use `skipToken` for conditional queries instead of `enabled: false` with `undefined` queryFn
+- **DO** use `select` transforms for sorting/filtering instead of `useMemo` in the component
+- **DON'T** fetch a list then loop to fetch each item — use a batched endpoint
+- **DO** add frequently-used queries to `usePrefetchOnIdle.ts`
+- **DO** use `queryOptions()` factories when a query is shared between hooks and imperative code
+
+### Bundle & Loading
+
+- **DO** add new page routes as `React.lazy()` imports in `App.tsx`
+- **DON'T** statically import page-level components in `App.tsx`
+- **DO** add new sidebar pages to `routePrefetchMap` in `src/lib/prefetch-routes.ts`
+- **DO** use deferred load pattern for rarely-visible components that import large libraries
+
+### Rendering
+
+- **DO** derive data from query results using `useMemo`, not by copying into `useState`
+- **DO** use granular Zustand selectors: `useStore((s) => s.field)`
+- **DON'T** destructure from a full store call: `const store = useStore()`
+- **DO** consider `React.memo` for components on hot render paths (timeline, canvas edges)
+- **DON'T** memoize every component — only hot paths with stable, comparable props
+
+### Cache
+
+- **DO** invalidate query cache after mutations via `queryClient.invalidateQueries()`
+- **DON'T** manually update local state after mutations
+
+---
+
+## Pattern Catalog
+
+### 1. TanStack Query Configuration
+
+**Source:** `src/lib/queryClient.ts`
+
+```typescript
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1, // One retry on failure, prevents retry thrashing
+      refetchOnWindowFocus: false, // App uses SSE/polling for live data
+      staleTime: 30_000, // 30s default — cached data served fresh for 30s
+    },
+  },
+});
+```
+
+**Rules:**
+
+- Do NOT create a second QueryClient. One instance in `queryClient.ts`.
+- `refetchOnWindowFocus` is off because the app uses real-time SSE/polling for live data. Tab-focus refetch would create redundant requests during execution monitoring.
+- Override stale time per-query only when you have a specific reason (see Section 3).
+
+---
+
+### 2. Query Key Architecture
+
+#### 2.1 Org-scoped factory functions
+
+**Source:** `src/lib/queryKeys.ts`
+
+Every key includes `getOrgScope()` which reads from `authStore` imperatively (outside React). This provides multi-tenant cache isolation without threading org IDs as props.
+
+```typescript
+const getOrgScope = () => useAuthStore.getState().organizationId || '__no-org__';
+
+export const queryKeys = {
+  components: { all: () => ['components', getOrgScope()] as const },
+  workflows: {
+    list: () => ['workflows', getOrgScope()] as const,
+    summary: () => ['workflowsSummary', getOrgScope()] as const,
+    detail: (id: string) => ['workflow', getOrgScope(), id] as const,
+  },
+  runs: {
+    byWorkflow: (workflowId: string) => ['runs', getOrgScope(), workflowId] as const,
+    global: () => ['runs', getOrgScope(), '__global__'] as const,
+    detail: (runId: string) => ['runs', getOrgScope(), 'detail', runId] as const,
+  },
+  // ... see queryKeys.ts for the full list
+};
+```
+
+**Hierarchy enables bulk invalidation:** invalidating `['workflows']` prefix invalidates all workflow queries simultaneously.
+
+**Rule:** Never construct query keys inline in a component. Always import from `queryKeys.ts`.
+
+#### 2.2 queryOptions() shared factories
+
+**Source:** `src/lib/executionQueryOptions.ts`
+
+`queryOptions()` from TanStack Query wraps key + queryFn + staleTime into a single object consumable by both `useQuery()` (React) and `queryClient.fetchQuery()` (imperative). This ensures a single in-flight promise — no duplicate requests.
+
+```typescript
+// Shared options — used by both useExecutionNodeIO hook AND executionStore actions
+export const executionNodeIOOptions = (runId: string, isTerminal?: boolean) =>
+  queryOptions({
+    queryKey: queryKeys.executions.nodeIO(runId),
+    queryFn: () => api.executions.listNodeIO(runId),
+    staleTime: isTerminal ? Infinity : 10_000,
+    gcTime: isTerminal ? 10 * 60_000 : 30_000,
+  });
+```
+
+**When:** Use for queries accessed from both React components AND store actions/callbacks.
+
+**Anti-pattern:** Duplicating the queryKey in two places causes cache misses.
+
+---
+
+### 3. Stale Time Strategy
+
+Four tiers of staleness, from coldest to hottest:
+
+#### Tier A — Static reference data (`staleTime: Infinity, gcTime: Infinity`)
+
+Data that only changes on admin action, not user action. Fetched once, cached forever.
+
+```typescript
+// src/hooks/queries/useComponentQueries.ts
+export function useComponents() {
+  return useQuery({
+    queryKey: queryKeys.components.all(),
+    queryFn: fetchComponentIndex,
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
+}
+```
+
+**Applies to:** `useComponents`, `useIntegrationProviders`, `useMcpGroupTemplates`
+
+#### Tier B — Default (30s, inherits global)
+
+User-owned entities that change occasionally. No override needed.
+
+**Applies to:** schedules, webhooks, secrets, workflow runs list, artifacts
+
+#### Tier C — Terminal-run Infinity (`terminalStaleTime` pattern)
+
+Runs in terminal state (COMPLETED, FAILED, CANCELLED) will never change. Once detected, staleTime becomes Infinity.
+
+```typescript
+// src/hooks/queries/useRunQueries.ts
+export function terminalStaleTime(runId: string | null | undefined, defaultMs: number): number {
+  if (!runId) return defaultMs;
+  const cached = getRunByIdFromCache(runId);
+  if (cached && TERMINAL_STATUSES.includes(cached.status)) return Infinity;
+  return defaultMs;
+}
+```
+
+**Used by:** `executionNodeIOOptions`, `executionResultOptions`, `executionRunOptions`
+
+#### Tier D — Polling-backed (`staleTime: 0`)
+
+Execution status and trace during live runs — must always be fresh. Polling refetches on every interval.
+
+```typescript
+// src/lib/executionQueryOptions.ts
+export const executionStatusOptions = (runId: string) =>
+  queryOptions({
+    queryKey: queryKeys.executions.status(runId),
+    queryFn: () => api.executions.getStatus(runId),
+    staleTime: 0, // Always stale — poll backing
+    gcTime: 30_000,
+    retry: false,
+  });
+```
+
+**Applies to:** `executionStatusOptions`, `executionTraceOptions`, `executionEventsOptions`, `executionDataFlowsOptions`
+
+#### Full stale time reference
+
+| Query                            | staleTime                        | gcTime                     |
+| -------------------------------- | -------------------------------- | -------------------------- |
+| `useComponents`                  | `Infinity`                       | `Infinity`                 |
+| `useMcpGroupTemplates`           | `Infinity`                       | `Infinity`                 |
+| `useIntegrationProviders`        | `Infinity`                       | `Infinity`                 |
+| `useMcpServers`                  | `120_000`                        | default                    |
+| `useMcpAllTools`                 | `120_000`                        | default                    |
+| `useWorkflowsSummary`            | `60_000`                         | default                    |
+| `useWorkflow`                    | `60_000`                         | default                    |
+| `useSchedules`                   | `60_000`                         | default                    |
+| `useIntegrationConnections`      | `60_000`                         | default                    |
+| `useWorkflowsList`               | `30_000`                         | default                    |
+| `useWorkflowRuns`                | `30_000`                         | default                    |
+| `useArtifactLibrary`             | `30_000`                         | default                    |
+| `executionNodeIOOptions`         | `isTerminal ? Infinity : 10_000` | `isTerminal ? 10min : 30s` |
+| `executionResultOptions`         | `isTerminal ? Infinity : 30_000` | `isTerminal ? 10min : 30s` |
+| `executionRunOptions`            | `isTerminal ? Infinity : 30_000` | `isTerminal ? 10min : 30s` |
+| `executionTerminalChunksOptions` | `10_000`                         | `30_000`                   |
+| `executionStatusOptions`         | `0`                              | `30_000`                   |
+| `executionTraceOptions`          | `0`                              | `30_000`                   |
+| `executionEventsOptions`         | `0`                              | `30_000`                   |
+| `executionDataFlowsOptions`      | `0`                              | `30_000`                   |
+
+---
+
+### 4. Bundle Splitting & Code Loading
+
+#### 4.1 Manual Rollup chunks
+
+**Source:** `vite.config.ts`
+
+Groups vendor libraries into stable named chunks. The browser can cache `vendor-react` across app updates.
+
+```typescript
+manualChunks: {
+  'vendor-react': ['react', 'react-dom', 'react-router-dom'],
+  'vendor-radix': [
+    '@radix-ui/react-accordion', '@radix-ui/react-avatar',
+    '@radix-ui/react-checkbox', '@radix-ui/react-dialog',
+    // ... 13 Radix primitives
+  ],
+  'vendor-analytics': ['posthog-js'],
+},
+```
+
+**Rule:** When adding a new Radix primitive, add it to `vendor-radix`. When adding a large new vendor library, consider creating a new chunk.
+
+#### 4.2 React.lazy for all page routes
+
+**Source:** `src/App.tsx`
+
+Every page component uses `React.lazy()`. The initial bundle only contains `AppLayout`, auth providers, and routing infrastructure.
+
+```typescript
+const WorkflowList = lazy(() =>
+  import('@/pages/WorkflowList').then((m) => ({ default: m.WorkflowList })),
+);
+```
+
+**Rule:** Every new page MUST use this pattern. Never add a page as a static import in App.tsx.
+
+#### 4.3 Suspense with PageSkeleton fallback
+
+**Source:** `src/App.tsx`
+
+A single `<Suspense fallback={<PageSkeleton />}>` wraps all routes. `PageSkeleton` renders placeholder content sized to match real page dimensions, preventing layout shift (CLS = 0).
+
+**Rule:** Do not add per-page Suspense boundaries with empty fallbacks.
+
+#### 4.4 Deferred chunk load (CommandPalette pattern)
+
+**Source:** `src/App.tsx`
+
+CommandPalette imports lucide-react's entire icon barrel (~350KB). It's lazy-loaded AND deferred — only mounts after the user opens it for the first time.
+
+```typescript
+function CommandPaletteProvider({ children }: { children: React.ReactNode }) {
+  const isOpen = useCommandPaletteStore((state) => state.isOpen);
+  const [hasOpened, setHasOpened] = useState(false);
+
+  useEffect(() => {
+    if (isOpen && !hasOpened) setHasOpened(true);
+  }, [isOpen, hasOpened]);
+
+  return (
+    <>
+      {children}
+      {hasOpened && (
+        <Suspense fallback={null}>
+          <CommandPalette />
+        </Suspense>
+      )}
+    </>
+  );
+}
+```
+
+**When to apply:** Components that (a) are rarely used on first load, (b) import a large library, (c) are always hidden initially. NOT for components visible on first render.
+
+#### 4.5 Idle-time and hover route chunk prefetch
+
+**Source:** `src/lib/prefetch-routes.ts`, `src/components/layout/AppLayout.tsx`
+
+`prefetchIdleRoutes()` downloads all sidebar route chunks during `requestIdleCallback`. `prefetchRoute(href)` downloads a single chunk on sidebar link hover.
+
+```typescript
+const routePrefetchMap: Record<string, PrefetchFn> = {
+  '/': () => void import('@/pages/WorkflowList'),
+  '/schedules': () => void import('@/pages/SchedulesPage'),
+  '/webhooks': () => void import('@/pages/WebhooksPage'),
+  // ... all sidebar routes
+};
+
+export function prefetchIdleRoutes(): void {
+  const prefetch = () => Object.values(routePrefetchMap).forEach((fn) => fn());
+  if (typeof window.requestIdleCallback === 'function') {
+    window.requestIdleCallback(prefetch, { timeout: 10_000 });
+  } else {
+    setTimeout(prefetch, 3_000);
+  }
+}
+```
+
+**Rule:** When adding a new sidebar-linked page, add it to `routePrefetchMap`.
+
+#### 4.6 Idle-time data prefetch
+
+**Source:** `src/hooks/usePrefetchOnIdle.ts`
+
+Called once in `AppLayout`. Uses `requestIdleCallback` (5s timeout fallback) to warm the cache for high-value queries.
+
+```typescript
+export function usePrefetchOnIdle() {
+  const { isAuthenticated } = useAuth();
+  useEffect(() => {
+    if (!isAuthenticated) return;
+    const prefetch = () => {
+      queryClient.prefetchQuery({
+        queryKey: queryKeys.components.all(),
+        queryFn: fetchComponentIndex,
+        staleTime: Infinity,
+        gcTime: Infinity,
+      });
+      queryClient.prefetchQuery({
+        queryKey: queryKeys.workflows.summary(),
+        queryFn: () => api.workflows.listSummary(),
+        staleTime: 60_000,
+      });
+    };
+    if (typeof window.requestIdleCallback === 'function') {
+      const id = window.requestIdleCallback(prefetch, { timeout: 5_000 });
+      return () => window.cancelIdleCallback(id);
+    }
+    const timer = setTimeout(prefetch, 2_000);
+    return () => clearTimeout(timer);
+  }, [isAuthenticated]);
+}
+```
+
+**When to add:** If your query is used on almost every page and has `staleTime >= 30s`, consider adding it here.
+
+---
+
+### 5. React Rendering Optimization
+
+#### 5.1 useMemo for derived data
+
+**Enforced in AGENTS.md rule 9.**
+
+When you need to filter, sort, or transform query data, use `useMemo`. Never copy query results into `useState`.
+
+```typescript
+// BAD: Derived state in useState causes extra renders and stale data
+const [sorted, setSorted] = useState([]);
+useEffect(() => setSorted([...data].sort(...)), [data]);
+
+// GOOD: useMemo recalculates only when data changes
+const sorted = useMemo(() => [...(data ?? [])].sort(...), [data]);
+```
+
+#### 5.2 React.memo on hot-path components
+
+`memo()` prevents re-renders when parent re-renders but props haven't changed.
+
+**Apply to:** Components that (a) render frequently due to parent state changes, (b) have expensive render logic, (c) receive stable, comparable props.
+
+**Current usage:** `DataFlowEdge` (canvas edge — re-renders during timeline playback), `MarkdownView` (large markdown content).
+
+**When NOT to:** Don't memoize every component. Only components on hot paths in the timeline or canvas.
+
+#### 5.3 select transforms in useQuery
+
+The `select` option transforms cached data before returning it to the component. The transform runs only when cached data changes, not on every render.
+
+```typescript
+// src/hooks/queries/useIntegrationQueries.ts
+export function useIntegrationProviders() {
+  return useQuery({
+    queryKey: queryKeys.integrations.providers(),
+    queryFn: () => api.integrations.listProviders(),
+    staleTime: Infinity,
+    gcTime: Infinity,
+    select: sortProviders, // Sort runs once when data changes, not on every re-render
+  });
+}
+```
+
+**When:** Use `select` for sorting, filtering, or shape-mapping operations that would otherwise go in `useMemo` in a component.
+
+---
+
+### 6. Zustand Store Optimization
+
+#### 6.1 Granular per-field selectors
+
+Call `useStore((s) => s.specificField)` rather than `useStore()`. Zustand only re-renders when the selected value changes.
+
+```typescript
+// BAD: subscribes to the whole store, re-renders on any field change
+const store = useWorkflowUiStore();
+const { mode, inspectorTab } = store;
+
+// GOOD: two subscriptions, each re-renders only when its field changes
+const mode = useWorkflowUiStore((s) => s.mode);
+const inspectorTab = useWorkflowUiStore((s) => s.inspectorTab);
+```
+
+**Rule:** Never destructure from a full store call.
+
+#### 6.2 subscribeWithSelector middleware
+
+**Source:** `src/store/executionTimelineStore.ts`
+
+Enables subscribing to a store slice outside React with equality comparison. Used for cross-store coordination.
+
+```typescript
+// executionStore subscribes to only specific fields of executionTimelineStore
+useExecutionTimelineStore.subscribe(
+  (state) => ({ currentTime: state.currentTime, playbackMode: state.playbackMode }),
+  (selected) => {
+    /* only runs when currentTime or playbackMode change */
+  },
+);
+```
+
+**When:** Use when one store needs to react to state changes in another store.
+
+#### 6.3 persist with partialize
+
+**Source:** `src/store/workflowUiStore.ts`
+
+`persist` serializes store slices to localStorage. `partialize` limits which fields are persisted.
+
+**Rule:** Always provide `partialize`. Never persist the whole store including action functions.
+
+#### 6.4 Dynamic import for cross-store lazy coupling
+
+**Source:** `src/store/executionStore.ts`, `src/store/executionTimelineStore.ts`
+
+Mutually-referenced stores use `await import('./executionTimelineStore')` inside action functions to avoid circular imports at module evaluation time.
+
+**When:** Use when Store A and Store B genuinely need to call each other's actions.
+
+---
+
+### 7. Real-time & Streaming
+
+#### 7.1 SSE + polling hybrid with adaptive rate
+
+**Source:** `src/store/executionStore.ts`
+
+During workflow execution, the app tries SSE first. If unavailable, it falls back to polling. When SSE is active, polling interval is extended (2s → 5s) as a backup.
+
+**Rule:** New real-time features should follow SSE-first + polling-fallback, not polling-only.
+
+#### 7.2 N+1 query avoidance
+
+**Source:** `src/hooks/queries/useMcpGroupQueries.ts`
+
+When a page needs groups AND their servers, use the batched `useMcpGroupsWithServers()` endpoint instead of looping `useMcpGroupServers(groupId)`.
+
+**Rule:** If you find yourself calling a query hook inside a `.map()`, you have an N+1 problem. Request a batched endpoint from the backend.
+
+#### 7.3 Terminal chunk cap
+
+**Source:** `src/store/executionStore.ts`
+
+`MAX_TERMINAL_CHUNKS = 500` limits memory consumption for long-running processes. Uses `slice(-MAX_TERMINAL_CHUNKS)` to trim.
+
+---
+
+### 8. Cache Manipulation Patterns
+
+#### 8.1 Manual setQueryData cache upsert
+
+**Source:** `src/hooks/queries/useRunQueries.ts`
+
+`upsertRunInCache()` calls `queryClient.setQueryData()` to inject or update a run in all matching cache entries. SSE events immediately reflect in the UI without waiting for a refetch.
+
+```typescript
+export function upsertRunInCache(run: ExecutionRun) {
+  const upsert = (old: RunsPage | undefined): RunsPage => {
+    if (!old) return { runs: [run], hasMore: false };
+    const existingIndex = old.runs.findIndex((r) => r.id === run.id);
+    if (existingIndex === -1) {
+      return { ...old, runs: sortRuns([...old.runs, run]) };
+    }
+    const updated = [...old.runs];
+    updated[existingIndex] = { ...updated[existingIndex], ...run, status: run.status };
+    return { ...old, runs: sortRuns(updated) };
+  };
+  // Update workflow-scoped, global, and detail caches
+  queryClient.setQueryData<RunsPage>(queryKeys.runs.byWorkflow(run.workflowId), upsert);
+  queryClient.setQueryData<RunsPage>(queryKeys.runs.global(), upsert);
+  queryClient.setQueryData(queryKeys.runs.detail(run.id), run);
+}
+```
+
+**When:** Use after receiving real-time updates you trust. For optimistic updates that need rollback, use TanStack Query's `onMutate` pattern instead.
+
+#### 8.2 Paginated load-more with cache append
+
+**Source:** `src/hooks/queries/useRunQueries.ts`
+
+`fetchMoreRuns()` reads existing cache to determine offset, fetches the next page, and appends with `setQueryData`. Previously loaded runs are preserved.
+
+```typescript
+export async function fetchMoreRuns(workflowId: string | null | undefined) {
+  const existing = queryClient.getQueryData<RunsPage>(queryKey);
+  if (!existing || !existing.hasMore) return;
+
+  const offset = existing.runs.length;
+  const response = await api.executions.listRuns({ limit: LOAD_MORE_LIMIT, offset });
+  const normalized = rawRuns.map(normalizeRun);
+
+  queryClient.setQueryData<RunsPage>(queryKey, (old) => {
+    const existingIds = new Set(old.runs.map((r) => r.id));
+    const newRuns = normalized.filter((r) => !existingIds.has(r.id));
+    return {
+      runs: sortRuns([...old.runs, ...newRuns]),
+      hasMore: rawRuns.length >= LOAD_MORE_LIMIT,
+    };
+  });
+}
+```
+
+---
+
+## Anti-Patterns Reference
+
+### 1. useState + useEffect for API data
+
+```typescript
+// BAD: Extra renders, no dedup, no caching, no error retry
+const [data, setData] = useState([]);
+useEffect(() => {
+  api.things.list().then(setData);
+}, []);
+
+// GOOD: TanStack Query hook
+const { data = [] } = useThings();
+```
+
+### 2. Inline query keys
+
+```typescript
+// BAD: Cache misses, invalidation doesn't work
+useQuery({ queryKey: ['workflows', orgId], ... });
+
+// GOOD: Factory from queryKeys.ts
+useQuery({ queryKey: queryKeys.workflows.list(), ... });
+```
+
+### 3. Full Zustand store subscription
+
+```typescript
+// BAD: Re-renders on every store update
+const { mode, inspectorTab } = useWorkflowUiStore();
+
+// GOOD: Per-field selectors
+const mode = useWorkflowUiStore((s) => s.mode);
+```
+
+### 4. N+1 queries (fetching in a loop)
+
+```typescript
+// BAD: O(n) network requests
+groups.map((g) => useMcpGroupServers(g.id)); // Also invalid — hooks in loops
+
+// GOOD: Batched endpoint
+const { data } = useMcpGroupsWithServers();
+```
+
+### 5. Copying query data into useState
+
+```typescript
+// BAD: Stale data, double renders
+const { data } = useWorkflows();
+const [sorted, setSorted] = useState([]);
+useEffect(() => setSorted(sortBy(data)), [data]);
+
+// GOOD: useMemo
+const sorted = useMemo(() => sortBy(data ?? []), [data]);
+```
+
+### 6. Static import of a lazy chunk
+
+```typescript
+// BAD: Bloats initial bundle
+import { WorkflowList } from '@/pages/WorkflowList';
+
+// GOOD: Dynamic import
+const WorkflowList = lazy(() => import('@/pages/WorkflowList').then(...));
+```
+
+### 7. Missing staleTime for static data
+
+```typescript
+// BAD: Refetches components every 30s (they rarely change)
+useQuery({ queryKey: queryKeys.components.all(), queryFn: fetchComponentIndex });
+
+// GOOD: Infinite cache for static reference data
+useQuery({
+  queryKey: queryKeys.components.all(),
+  queryFn: fetchComponentIndex,
+  staleTime: Infinity,
+  gcTime: Infinity,
+});
+```
+
+---
+
+## New Feature Checklist
+
+Run through this before submitting a PR:
+
+### Data Fetching
+
+- [ ] All API data goes through a TanStack Query hook in `src/hooks/queries/`
+- [ ] Query key added to `queryKeys.ts` using factory function pattern
+- [ ] `staleTime` set appropriately (Infinity for static, 30s for user data, 0 for polling)
+- [ ] `skipToken` used for conditional queries (not `enabled: false` with undefined queryFn)
+- [ ] `select` transform used if data needs sorting/filtering before component use
+- [ ] Static/reference data considered for `usePrefetchOnIdle.ts`
+- [ ] Batched endpoint used if fetching list + per-item details
+
+### Bundle
+
+- [ ] New page routes use `React.lazy()` in `App.tsx` (not static import)
+- [ ] New sidebar pages added to `routePrefetchMap` in `src/lib/prefetch-routes.ts`
+- [ ] Rarely-visible heavy components use deferred load pattern (see CommandPalette)
+
+### Rendering
+
+- [ ] `useMemo` used for derived data from query results (not `useState`)
+- [ ] Zustand selectors select per-field, not the full store
+- [ ] `React.memo` considered for components that render frequently with stable props
+
+### Cache
+
+- [ ] Mutations call `queryClient.invalidateQueries()` after success
+- [ ] Real-time updates use `upsertRunInCache()` pattern, not forcing a refetch
+
+---
+
+## Known Gaps
+
+These are deliberate omissions, not oversights. Do not add them without discussing first.
+
+- **Virtual scrolling:** No virtual list library is installed. For long lists, use load-more pagination (see `fetchMoreRuns` pattern).
+- **Image optimization:** No Next.js Image or similar. Not needed currently (no image-heavy pages).
+- **Error boundaries:** No React ErrorBoundary components. Errors propagate to TanStack Query's `isError` state.
+- **Service Worker / offline:** No PWA setup. All data requires network.
diff --git a/frontend/docs/state.md b/frontend/docs/state.md
index 51acbb3a..bf471bad 100644
--- a/frontend/docs/state.md
+++ b/frontend/docs/state.md
@@ -1,41 +1,243 @@
 # Frontend State & Data Flow
 
-ShipSec Studio’s UI relies on a handful of focused Zustand stores and shared Zod schemas. This guide explains how they interact with the backend contract and when to touch each layer.
+ShipSec Studio's UI separates **server state** (data from the backend) from **client state** (UI-only concerns). Server state is managed exclusively through **TanStack Query** (`@tanstack/react-query`). Client-only state uses **Zustand** stores or local React state.
+
+## Golden Rule
+
+> **Never use `useState` + `useEffect` to fetch API data.** Always create or reuse a TanStack Query hook in `src/hooks/queries/`.
 
 ## Shared Types
+
 - All schemas originate in `@shipsec/shared`. Import directly rather than re-declaring shapes.
 - `src/schemas/*` re-exports shared schemas or wraps them with UI-specific helpers. Any contract change starts with `docs/execution-contract.md` → shared package → frontend schema update.
 
-## Core Stores
+---
+
+## Server State: TanStack Query
+
+All data fetched from the backend flows through TanStack Query hooks located in `src/hooks/queries/`.
+
+### Query Client Configuration
+
+`src/lib/queryClient.ts` configures sensible defaults:
+
+```typescript
+new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1, // One retry on failure
+      refetchOnWindowFocus: false, // No refetch on tab focus
+      staleTime: 30_000, // 30s default stale time
+    },
+  },
+});
+```
+
+### Query Key Conventions
+
+All query keys live in `src/lib/queryKeys.ts` and follow these rules:
+
+1. **Org-scoped**: Every key includes the current `organizationId` for multi-tenant isolation.
+2. **Factory functions**: Keys are functions that return `readonly` tuples for type safety.
+3. **Hierarchical**: Broader keys enable bulk invalidation (e.g., `['schedules']` invalidates all schedule queries).
+
+```typescript
+// src/lib/queryKeys.ts
+export const queryKeys = {
+  secrets: { all: () => ['secrets', getOrgScope()] as const },
+  components: { all: () => ['components', getOrgScope()] as const },
+  workflows: {
+    list: () => ['workflows', getOrgScope()] as const,
+    summary: () => ['workflowsSummary', getOrgScope()] as const,
+    detail: (id) => ['workflow', getOrgScope(), id] as const,
+  },
+  integrations: {
+    providers: () => ['integrationProviders', getOrgScope()] as const,
+    providerConfig: (id) => ['providerConfig', getOrgScope(), id] as const,
+  },
+  schedules: { all: (filters?) => ['schedules', getOrgScope(), filters] as const },
+  webhooks: { all: (filters?) => ['webhooks', getOrgScope(), filters] as const },
+  humanInputs: { all: (filters?) => ['humanInputs', getOrgScope(), filters] as const },
+  mcpGroups: {
+    all: () => ['mcpGroups', getOrgScope()] as const,
+    servers: (groupId) => ['mcpGroupServers', getOrgScope(), groupId] as const,
+  },
+  executions: {
+    nodeIO: (runId) => ['executionNodeIO', getOrgScope(), runId] as const,
+    result: (runId) => ['executionResult', getOrgScope(), runId] as const,
+    run: (runId) => ['executionRun', getOrgScope(), runId] as const,
+  },
+  // ... see queryKeys.ts for the full list
+};
+```
+
+### Query Hook Files
+
+| Hook file                  | What it covers                                                                                                                               |
+| -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `useComponentQueries.ts`   | Component catalogue (`useComponents`)                                                                                                        |
+| `useWorkflowQueries.ts`    | Workflow list, summary, detail, runtime inputs (`useWorkflowsList`, `useWorkflowsSummary`, `useWorkflow`, `useWorkflowRuntimeInputs`)        |
+| `useScheduleQueries.ts`    | Schedules CRUD (`useSchedules`, `useCreateSchedule`, etc.)                                                                                   |
+| `useWebhookQueries.ts`     | Webhooks CRUD + deliveries (`useWebhooks`, `useWebhook`, `useWebhookDeliveries`, `useCreateWebhook`, `useUpdateWebhook`, `useDeleteWebhook`) |
+| `useSecretQueries.ts`      | Secrets management (`useSecrets`)                                                                                                            |
+| `useApiKeyQueries.ts`      | API key management (`useApiKeys`)                                                                                                            |
+| `useMcpGroupQueries.ts`    | MCP groups, servers, templates (`useMcpGroups`, `useMcpGroupServers`, `useMcpGroupTemplates`)                                                |
+| `useHumanInputQueries.ts`  | Human input / action center (`useHumanInputs`)                                                                                               |
+| `useExecutionQueries.ts`   | Execution data (`useExecutionNodeIO`, `useExecutionResult`, `useExecutionRun`)                                                               |
+| `useRunQueries.ts`         | Workflow runs (`useRuns`, `useRunDetail`)                                                                                                    |
+| `useArtifactQueries.ts`    | Artifacts library + per-run artifacts                                                                                                        |
+| `useIntegrationQueries.ts` | Integration providers, connections, provider config (`useIntegrationProviders`, `useIntegrationConnections`, `useProviderConfig`)            |
+
+### Writing a New Query Hook
+
+```typescript
+// src/hooks/queries/useExampleQueries.ts
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '@/services/api';
+import { queryKeys } from '@/lib/queryKeys';
+
+// 1. Add keys to queryKeys.ts first:
+//    examples: { all: (filters?) => ['examples', getOrgScope(), filters] as const }
+
+// 2. Read hook — wraps useQuery
+export function useExamples(filters?: { status?: string }) {
+  return useQuery({
+    queryKey: queryKeys.examples.all(filters as Record<string, unknown>),
+    queryFn: () => api.examples.list(filters),
+    staleTime: 15_000, // Override default if needed
+  });
+}
+
+// 3. Mutation hook — wraps useMutation + invalidates cache
+export function useDeleteExample() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => api.examples.delete(id),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['examples'] });
+    },
+  });
+}
+```
+
+### Cache Invalidation Patterns
+
+```typescript
+// Invalidate all queries under a domain (broad)
+queryClient.invalidateQueries({ queryKey: ['schedules'] });
+
+// Invalidate a specific query (narrow)
+queryClient.invalidateQueries({ queryKey: queryKeys.schedules.all({ workflowId }) });
+```
+
+After mutations (create, update, delete), always invalidate the relevant queries rather than manually updating local state.
+
+### Prefetch on Idle
+
+`src/hooks/usePrefetchOnIdle.ts` warms the cache for commonly-needed data (components, workflow summaries) during browser idle time. This is called once in `AppLayout` so data is ready before the user navigates.
 
-| Store | File | What it owns |
-| --- | --- | --- |
-| `useWorkflowStore` | `src/store/workflowStore.ts` | In-flight builder graph (nodes, edges, metadata) and persistence hooks. |
-| `useWorkflowUiStore` | `src/store/workflowUiStore.ts` | Canvas UI toggles, panel sizing, minimap state. |
-| `useComponentStore` | `src/store/componentStore.ts` | Cached component catalogue fetched via `api.components.list()`. Maintains slug ↔︎ id index. |
-| `useExecutionStore` | `src/store/executionStore.ts` | Workflow run lifecycle, SSE stream wiring, log/event aggregation. |
-| `useRunStore` | `src/store/runStore.ts` | Workflow-scoped run metadata cache with per-workflow fetching/invalidation hooks. |
-| `useExecutionTimelineStore` | `src/store/executionTimelineStore.ts` | Timeline playback state and selection derived from `useRunStore`. |
-| `useSecretStore` | `src/store/secretStore.ts` | Secret summaries + optimistic updates for the Secret Fetch UX. |
+```typescript
+// Runs during requestIdleCallback with a 5s timeout fallback
+queryClient.prefetchQuery({
+  queryKey: queryKeys.components.all(),
+  queryFn: fetchComponentIndex,
+  staleTime: 10 * 60_000,
+});
+```
 
-Stores expose selectors (e.g. `getComponent`, `getNodeLogs`) to avoid manual traversal in components. Prefer selectors and derived helpers over duplicating logic inside React components.
+When adding a new high-traffic query, consider adding it to the prefetch list.
+
+---
+
+## Client State: Zustand
+
+Zustand stores handle **client-only UI state** that has no backend equivalent. They must never duplicate server data.
+
+| Store                       | File                                  | What it owns                                                            |
+| --------------------------- | ------------------------------------- | ----------------------------------------------------------------------- |
+| `useWorkflowStore`          | `src/store/workflowStore.ts`          | In-flight builder graph (nodes, edges, metadata) and persistence hooks. |
+| `useWorkflowUiStore`        | `src/store/workflowUiStore.ts`        | Canvas UI toggles, panel sizing, minimap state.                         |
+| `useExecutionStore`         | `src/store/executionStore.ts`         | Workflow run lifecycle, SSE stream wiring, log/event aggregation.       |
+| `useExecutionTimelineStore` | `src/store/executionTimelineStore.ts` | Timeline playback state and selected run/node.                          |
+| `useAuthStore`              | `src/store/authStore.ts`              | Auth session, org/user IDs (used by queryKeys for org scoping).         |
+
+Stores expose selectors (e.g. `getNodeLogs`) to avoid manual traversal in components. Prefer selectors and derived helpers over duplicating logic inside React components.
+
+---
+
+## Decision Guide: Where Does State Go?
+
+| Question                                    | Answer                                                |
+| ------------------------------------------- | ----------------------------------------------------- |
+| Does it come from the backend API?          | **TanStack Query hook** in `src/hooks/queries/`       |
+| Is it UI-only and shared across components? | **Zustand store** in `src/store/`                     |
+| Is it UI-only and scoped to one component?  | **Local `useState`**                                  |
+| Is it derived from query data?              | **`useMemo`** in the component, fed by the query hook |
+
+---
+
+## Anti-Patterns (Do Not Do)
+
+```typescript
+// BAD: Manual fetch with useState + useEffect
+const [data, setData] = useState([]);
+const [loading, setLoading] = useState(true);
+useEffect(() => {
+  api.things
+    .list()
+    .then(setData)
+    .finally(() => setLoading(false));
+}, []);
+
+// GOOD: TanStack Query hook
+const { data = [], isLoading } = useThings();
+```
+
+```typescript
+// BAD: Manual cache / dedup / TTL logic
+const lastFetchRef = useRef(0);
+if (Date.now() - lastFetchRef.current < 30_000) return;
+
+// GOOD: staleTime handles this automatically
+useQuery({ queryKey: ..., queryFn: ..., staleTime: 30_000 });
+```
+
+```typescript
+// BAD: Optimistic local state after mutation
+setItems((prev) => prev.filter((i) => i.id !== deletedId));
+
+// GOOD: Invalidate and let the query refetch
+queryClient.invalidateQueries({ queryKey: ['items'] });
+```
+
+---
 
 ## Execution Monitoring Pipeline
+
 1. `RunWorkflowDialog` invokes `useExecutionStore.startExecution`, which calls `api.executions.start()` (wrapping `POST /workflows/{id}/run`).
 2. `monitorRun` seeds a poll + optional SSE stream (`api.executions.stream`). Responses are validated with `ExecutionStatusResponseSchema` and `TraceStreamEnvelopeSchema`.
 3. `mergeEvents` dedupes trace events by id; `deriveNodeStates` converts those events into canvas node badges (see `WorkflowNode.tsx`). Separate helpers (`mergeLogEntries`) handle raw Loki log lines for the log viewer.
 4. `useRunStore.fetchRuns` calls `api.executions.listRuns` scoped to the requested workflow and exposes cached metadata to `RunSelector`, inspectors, and `useExecutionTimelineStore`.
 
 When the backend contract expands (new trace fields, statuses), update:
+
 - `docs/execution-contract.md`
 - `@shipsec/shared` schemas
 - Store merge helpers/tests under `src/store/__tests__`
 
 ## API Layer Expectations
-- `src/services/api.ts` is the only place that touches the generated client. All responses are parsed through Zod before hitting stores.
-- New endpoints should be added to `api.ts` first, with lightweight unit coverage if parsing logic branches.
+
+- `src/services/api.ts` is the only place that touches the generated client. All responses are parsed through Zod before hitting query hooks.
+- New endpoints should be added to `api.ts` first, then wrapped in a query hook in `src/hooks/queries/`.
+
+## Performance Optimizations
+
+For the complete performance reference — bundle splitting, stale time strategy, idle prefetch, rendering optimization, Zustand selectors, and anti-patterns — see **[`docs/performance.md`](./performance.md)**.
+
+TL;DR: TanStack Query handles deduplication via query keys. Vite manual chunks separate vendor libraries. All page routes use `React.lazy()`. Static data uses `staleTime: Infinity`.
 
 ## Testing Strategy
+
 - Store tests live in `src/store/__tests__/*.test.ts`. Mock `api` to emulate backend behaviour.
-- Use `bun --cwd frontend run test` for Jest-style tests with Testing Library.
+- Use `bun test` for tests with Testing Library.
 - Aim to cover merge/diff logic or any selector that massages data so runtime regressions surface quickly.
diff --git a/frontend/docs/ui.md b/frontend/docs/ui.md
index fda1ebc7..dde37948 100644
--- a/frontend/docs/ui.md
+++ b/frontend/docs/ui.md
@@ -3,14 +3,16 @@
 ShipSec Studio’s UI is composed of three primary layers: layout scaffolding, workflow canvas primitives, and a shadcn-based component library. Use this guide when adding new surfaces or extending the canvas.
 
 ## Layout Skeleton
+
 - `src/components/layout/TopBar.tsx` – Navigation + run/save controls. Keep it dumb; business logic belongs in stores/hooks.
 - `src/components/layout/Sidebar.tsx` – Component catalogue browser. Pull metadata through `useComponentStore`.
 - `src/components/layout/BottomPanel.tsx` – Tabs for Logs, Results, and History. Connects to execution/timeline stores.
 - `src/components/timeline/*` – Run history timeline cards and filters.
 
-Keep layout components stateless and rely on Zustand selectors to avoid re-renders.
+Keep layout components stateless. Use TanStack Query hooks for API data and Zustand selectors for client-only UI state to avoid re-renders.
 
 ## Workflow Canvas
+
 - `src/components/workflow/Canvas.tsx` orchestrates React Flow nodes/edges, selection state, and drop handlers.
 - Node rendering (`WorkflowNode.tsx`) defers status colouring to `nodeStyles.ts` so badges stay consistent.
 - Configuration UI lives in `ConfigPanel.tsx` and `ParameterField.tsx`. Parameter metadata comes from backend component definitions.
@@ -19,17 +21,21 @@ Keep layout components stateless and rely on Zustand selectors to avoid re-rende
 When introducing new node visuals, extend `nodeStyles.ts` first and keep Lucide icons + Tailwind tokens centralized.
 
 ## UI Component Library
+
 - Shared primitives sit under `src/components/ui` and follow shadcn patterns (component + `*.styles.ts` when necessary).
 - Tailwind tokens rely on CSS variables defined in `src/index.css`. Do not hard-code colours—introduce a new variable instead.
 - Use `tailwind-merge` helpers for conditional classnames.
 
 ## Accessibility & UX
+
 - All actionable elements require focus styles. Reuse existing `buttonVariants`/`badgeVariants`.
 - Provide aria labels for icon-only buttons (see `ComponentBadge.tsx` for reference).
 - The canvas should remain keyboard navigable: ensure tab index is maintained when adding overlays or drawers.
 
 ## Visual Testing Checklist
+
 Before shipping UI changes:
+
 1. `bun --cwd frontend run lint` (includes Tailwind ordering rules).
 2. `bun --cwd frontend run test` – ensure component snapshots/hooks pass.
 3. Manual run through: load workflow, execute, verify logs stream and timeline updates.
diff --git a/frontend/index.html b/frontend/index.html
index c8b9ebb8..dfc7c74e 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -44,6 +44,20 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
+
+    <!-- Non-blocking font loading (print-media trick) -->
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
+      media="print"
+      onload="this.media='all'"
+    />
+    <noscript>
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
+      />
+    </noscript>
     
     <!-- Icons & Favicon -->
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
diff --git a/frontend/package.json b/frontend/package.json
index daae1f07..f85e6a52 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -68,6 +68,8 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@shipsec/backend-client": "workspace:*",
     "@shipsec/shared": "workspace:*",
+    "@tanstack/react-query": "^5.90.21",
+    "@tanstack/react-query-devtools": "^5.91.3",
     "@uiw/react-markdown-preview": "^5.1.5",
     "ai": "^5.0.76",
     "ansi_up": "^6.0.6",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index cd833a1b..c679e206 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,12 @@
-import { lazy, Suspense } from 'react';
+import { lazy, Suspense, useState, useEffect } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { QueryClientProvider } from '@tanstack/react-query';
+const ReactQueryDevtools = lazy(() =>
+  import('@tanstack/react-query-devtools').then((mod) => ({
+    default: mod.ReactQueryDevtools,
+  })),
+);
+import { queryClient } from '@/lib/queryClient';
 import { ToastProvider } from '@/components/ui/toast-provider';
 import { AppLayout } from '@/components/layout/AppLayout';
 import { AuthProvider } from '@/auth/auth-context';
@@ -7,7 +14,9 @@ import { useAuthStoreIntegration } from '@/auth/store-integration';
 import { ProtectedRoute } from '@/components/auth/ProtectedRoute';
 import { AnalyticsRouterListener } from '@/features/analytics/AnalyticsRouterListener';
 import { PostHogClerkBridge } from '@/features/analytics/PostHogClerkBridge';
-import { CommandPalette, useCommandPaletteKeyboard } from '@/features/command-palette';
+import { useCommandPaletteKeyboard } from '@/features/command-palette/useCommandPaletteKeyboard';
+import { useCommandPaletteStore } from '@/store/commandPaletteStore';
+import { Skeleton } from '@/components/ui/skeleton';
 
 // Lazy-loaded page components
 const WorkflowList = lazy(() =>
@@ -56,6 +65,35 @@ const AnalyticsSettingsPage = lazy(() =>
   import('@/pages/AnalyticsSettingsPage').then((m) => ({ default: m.AnalyticsSettingsPage })),
 );
 
+// Lazy-load CommandPalette — it pulls in the entire lucide-react barrel (~350KB)
+const CommandPalette = lazy(() =>
+  import('@/features/command-palette/CommandPalette').then((m) => ({
+    default: m.CommandPalette,
+  })),
+);
+
+function PageSkeleton() {
+  return (
+    <div className="flex-1 flex flex-col">
+      <div className="h-[52px] border-b flex items-center px-4 gap-4">
+        <Skeleton className="h-8 w-8 rounded-lg" />
+        <Skeleton className="h-5 w-48" />
+      </div>
+      <div className="flex-1 p-6 space-y-4">
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-5/6" />
+        <Skeleton className="h-32 w-full rounded-lg" />
+        <div className="grid grid-cols-3 gap-4">
+          <Skeleton className="h-24 rounded-lg" />
+          <Skeleton className="h-24 rounded-lg" />
+          <Skeleton className="h-24 rounded-lg" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
 function AuthIntegration({ children }: { children: React.ReactNode }) {
   useAuthStoreIntegration();
   return <>{children}</>;
@@ -63,10 +101,23 @@ function AuthIntegration({ children }: { children: React.ReactNode }) {
 
 function CommandPaletteProvider({ children }: { children: React.ReactNode }) {
   useCommandPaletteKeyboard();
+  const isOpen = useCommandPaletteStore((state) => state.isOpen);
+  const [hasOpened, setHasOpened] = useState(false);
+
+  useEffect(() => {
+    if (isOpen && !hasOpened) {
+      setHasOpened(true);
+    }
+  }, [isOpen, hasOpened]);
+
   return (
     <>
       {children}
-      <CommandPalette />
+      {hasOpened && (
+        <Suspense fallback={null}>
+          <CommandPalette />
+        </Suspense>
+      )}
     </>
   );
 }
@@ -75,73 +126,74 @@ function App() {
   return (
     <AuthProvider>
       <AuthIntegration>
-        <ToastProvider>
-          <BrowserRouter>
-            <CommandPaletteProvider>
-              {/* Analytics wiring */}
-              <AnalyticsRouterListener />
-              <PostHogClerkBridge />
-              <AppLayout>
-                <ProtectedRoute>
-                  <Suspense
-                    fallback={
-                      <div className="flex items-center justify-center h-full">
-                        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
-                      </div>
-                    }
-                  >
-                    <Routes>
-                      <Route path="/" element={<WorkflowList />} />
-                      <Route
-                        path="/workflows/:id"
-                        element={
-                          <ProtectedRoute>
-                            <WorkflowBuilder />
-                          </ProtectedRoute>
-                        }
-                      />
-                      <Route
-                        path="/workflows/:id/runs"
-                        element={
-                          <ProtectedRoute>
-                            <WorkflowBuilder />
-                          </ProtectedRoute>
-                        }
-                      />
-                      <Route
-                        path="/workflows/:id/runs/:runId"
-                        element={
-                          <ProtectedRoute>
-                            <WorkflowBuilder />
-                          </ProtectedRoute>
-                        }
-                      />
-                      <Route path="/secrets" element={<SecretsManager />} />
-                      <Route path="/api-keys" element={<ApiKeysManager />} />
-                      <Route path="/integrations" element={<IntegrationsManager />} />
-                      <Route path="/webhooks" element={<WebhooksPage />} />
-                      <Route path="/webhooks/new" element={<WebhookEditorPage />} />
-                      <Route path="/webhooks/:id" element={<WebhookEditorPage />} />
-                      <Route path="/webhooks/:id/deliveries" element={<WebhookEditorPage />} />
-                      <Route path="/webhooks/:id/settings" element={<WebhookEditorPage />} />
-                      <Route path="/schedules" element={<SchedulesPage />} />
-                      <Route path="/action-center" element={<ActionCenterPage />} />
-                      <Route path="/analytics-settings" element={<AnalyticsSettingsPage />} />
-                      <Route path="/artifacts" element={<ArtifactLibrary />} />
-                      <Route path="/mcp-library" element={<McpLibraryPage />} />
-                      <Route path="/runs/:runId" element={<RunRedirect />} />
-                      <Route
-                        path="/integrations/callback/:provider"
-                        element={<IntegrationCallback />}
-                      />
-                      <Route path="*" element={<NotFound />} />
-                    </Routes>
-                  </Suspense>
-                </ProtectedRoute>
-              </AppLayout>
-            </CommandPaletteProvider>
-          </BrowserRouter>
-        </ToastProvider>
+        <QueryClientProvider client={queryClient}>
+          <ToastProvider>
+            <BrowserRouter>
+              <CommandPaletteProvider>
+                {/* Analytics wiring */}
+                <AnalyticsRouterListener />
+                <PostHogClerkBridge />
+                <AppLayout>
+                  <ProtectedRoute>
+                    <Suspense fallback={<PageSkeleton />}>
+                      <Routes>
+                        <Route path="/" element={<WorkflowList />} />
+                        <Route
+                          path="/workflows/:id"
+                          element={
+                            <ProtectedRoute>
+                              <WorkflowBuilder />
+                            </ProtectedRoute>
+                          }
+                        />
+                        <Route
+                          path="/workflows/:id/runs"
+                          element={
+                            <ProtectedRoute>
+                              <WorkflowBuilder />
+                            </ProtectedRoute>
+                          }
+                        />
+                        <Route
+                          path="/workflows/:id/runs/:runId"
+                          element={
+                            <ProtectedRoute>
+                              <WorkflowBuilder />
+                            </ProtectedRoute>
+                          }
+                        />
+                        <Route path="/secrets" element={<SecretsManager />} />
+                        <Route path="/api-keys" element={<ApiKeysManager />} />
+                        <Route path="/integrations" element={<IntegrationsManager />} />
+                        <Route path="/webhooks" element={<WebhooksPage />} />
+                        <Route path="/webhooks/new" element={<WebhookEditorPage />} />
+                        <Route path="/webhooks/:id" element={<WebhookEditorPage />} />
+                        <Route path="/webhooks/:id/deliveries" element={<WebhookEditorPage />} />
+                        <Route path="/webhooks/:id/settings" element={<WebhookEditorPage />} />
+                        <Route path="/schedules" element={<SchedulesPage />} />
+                        <Route path="/action-center" element={<ActionCenterPage />} />
+                        <Route path="/analytics-settings" element={<AnalyticsSettingsPage />} />
+                        <Route path="/artifacts" element={<ArtifactLibrary />} />
+                        <Route path="/mcp-library" element={<McpLibraryPage />} />
+                        <Route path="/runs/:runId" element={<RunRedirect />} />
+                        <Route
+                          path="/integrations/callback/:provider"
+                          element={<IntegrationCallback />}
+                        />
+                        <Route path="*" element={<NotFound />} />
+                      </Routes>
+                    </Suspense>
+                  </ProtectedRoute>
+                </AppLayout>
+              </CommandPaletteProvider>
+            </BrowserRouter>
+          </ToastProvider>
+          {import.meta.env.DEV && import.meta.env.VITE_DISABLE_DEVTOOLS !== 'true' && (
+            <Suspense fallback={null}>
+              <ReactQueryDevtools />
+            </Suspense>
+          )}
+        </QueryClientProvider>
       </AuthIntegration>
     </AuthProvider>
   );
diff --git a/frontend/src/auth/store-integration.ts b/frontend/src/auth/store-integration.ts
index ae522130..e6092eb6 100644
--- a/frontend/src/auth/store-integration.ts
+++ b/frontend/src/auth/store-integration.ts
@@ -1,6 +1,7 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useAuth, useAuthProvider } from './auth-context';
 import { useAuthStore } from '../store/authStore';
+import { queryClient } from '@/lib/queryClient';
 
 /**
  * Hook to integrate the new auth system with the existing Zustand store
@@ -10,6 +11,25 @@ export function useAuthStoreIntegration() {
   const { user, token, isAuthenticated, isLoading, error } = useAuth();
   const authProvider = useAuthProvider();
   const { setAuthContext, clear: clearStore } = useAuthStore();
+  const organizationId = useAuthStore((s) => s.organizationId);
+  const prevOrgRef = useRef(organizationId);
+
+  // Clear query cache on logout
+  useEffect(() => {
+    if (!isAuthenticated) {
+      queryClient.cancelQueries();
+      queryClient.clear();
+    }
+  }, [isAuthenticated]);
+
+  // Clear query cache on org change
+  useEffect(() => {
+    if (prevOrgRef.current !== organizationId) {
+      queryClient.cancelQueries();
+      queryClient.clear();
+      prevOrgRef.current = organizationId;
+    }
+  }, [organizationId]);
 
   useEffect(() => {
     if (isLoading) {
diff --git a/frontend/src/components/artifacts/RunArtifactsPanel.tsx b/frontend/src/components/artifacts/RunArtifactsPanel.tsx
index 2953fef3..b2d99de9 100644
--- a/frontend/src/components/artifacts/RunArtifactsPanel.tsx
+++ b/frontend/src/components/artifacts/RunArtifactsPanel.tsx
@@ -1,7 +1,9 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Download, RefreshCw, Copy, ExternalLink } from 'lucide-react';
 import type { ArtifactMetadata } from '@shipsec/shared';
-import { useArtifactStore } from '@/store/artifactStore';
+import { useQueryClient } from '@tanstack/react-query';
+import { useRunArtifacts, useDownloadArtifact } from '@/hooks/queries/useArtifactQueries';
+import { queryKeys } from '@/lib/queryKeys';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { getRemoteUploads } from '@/utils/artifacts';
@@ -29,10 +31,13 @@ interface RunArtifactsPanelProps {
 }
 
 export function RunArtifactsPanel({ runId }: RunArtifactsPanelProps) {
-  const entry = useArtifactStore((state) => (runId ? state.runArtifacts[runId] : undefined));
-  const fetchRunArtifacts = useArtifactStore((state) => state.fetchRunArtifacts);
-  const downloadArtifact = useArtifactStore((state) => state.downloadArtifact);
-  const downloading = useArtifactStore((state) => state.downloading);
+  const queryClient = useQueryClient();
+  const {
+    data: artifacts = [],
+    isLoading: isLoadingArtifacts,
+    error,
+  } = useRunArtifacts(runId ?? undefined);
+  const downloadArtifactMutation = useDownloadArtifact();
   const [copiedId, setCopiedId] = useState<string | null>(null);
   const [copiedRemoteUri, setCopiedRemoteUri] = useState<string | null>(null);
 
@@ -48,11 +53,11 @@ export function RunArtifactsPanel({ runId }: RunArtifactsPanelProps) {
     }
   }, []);
 
-  useEffect(() => {
+  const handleRefresh = useCallback(() => {
     if (runId) {
-      void fetchRunArtifacts(runId);
+      void queryClient.invalidateQueries({ queryKey: queryKeys.artifacts.byRun(runId) });
     }
-  }, [runId, fetchRunArtifacts]);
+  }, [runId, queryClient]);
 
   const content = useMemo(() => {
     if (!runId) {
@@ -63,7 +68,7 @@ export function RunArtifactsPanel({ runId }: RunArtifactsPanelProps) {
       );
     }
 
-    if (!entry || entry.loading) {
+    if (isLoadingArtifacts) {
       return (
         <div className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
           Loading artifacts…
@@ -71,16 +76,11 @@ export function RunArtifactsPanel({ runId }: RunArtifactsPanelProps) {
       );
     }
 
-    if (entry.error) {
+    if (error) {
       return (
         <div className="flex flex-1 flex-col items-center justify-center gap-3 text-sm text-destructive">
-          <span>{entry.error}</span>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={() => fetchRunArtifacts(runId, true)}
-          >
+          <span>{error instanceof Error ? error.message : String(error)}</span>
+          <Button type="button" variant="outline" size="sm" onClick={handleRefresh}>
             <RefreshCw className="mr-2 h-4 w-4" />
             Retry
           </Button>
@@ -88,7 +88,7 @@ export function RunArtifactsPanel({ runId }: RunArtifactsPanelProps) {
       );
     }
 
-    if (entry.artifacts.length === 0) {
+    if (artifacts.length === 0) {
       return (
         <div className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
           No artifacts were saved for this run.
@@ -109,11 +109,13 @@ export function RunArtifactsPanel({ runId }: RunArtifactsPanelProps) {
             </tr>
           </thead>
           <tbody>
-            {entry.artifacts.map((artifact) => (
+            {artifacts.map((artifact: ArtifactMetadata) => (
               <ArtifactRow
                 key={artifact.id}
                 artifact={artifact}
-                onDownload={() => downloadArtifact(artifact, { runId })}
+                onDownload={() =>
+                  downloadArtifactMutation.mutate({ artifact, runId: runId ?? undefined })
+                }
                 onCopy={() => handleCopy(artifact.id)}
                 copied={copiedId === artifact.id}
                 onCopyRemoteUri={async (uri: string) => {
@@ -128,7 +130,10 @@ export function RunArtifactsPanel({ runId }: RunArtifactsPanelProps) {
                   }
                 }}
                 copiedRemoteUri={copiedRemoteUri}
-                isDownloading={Boolean(downloading[artifact.id])}
+                isDownloading={
+                  downloadArtifactMutation.isPending &&
+                  downloadArtifactMutation.variables?.artifact.id === artifact.id
+                }
               />
             ))}
           </tbody>
@@ -137,19 +142,20 @@ export function RunArtifactsPanel({ runId }: RunArtifactsPanelProps) {
     );
   }, [
     runId,
-    entry,
-    fetchRunArtifacts,
-    downloadArtifact,
-    downloading,
+    artifacts,
+    isLoadingArtifacts,
+    error,
+    handleRefresh,
+    downloadArtifactMutation,
     handleCopy,
     copiedId,
     copiedRemoteUri,
   ]);
 
   const handleDownloadAll = () => {
-    if (!entry || !entry.artifacts.length) return;
-    entry.artifacts.forEach((artifact) => {
-      downloadArtifact(artifact, { runId: runId || undefined });
+    if (!artifacts.length) return;
+    artifacts.forEach((artifact: ArtifactMetadata) => {
+      downloadArtifactMutation.mutate({ artifact, runId: runId ?? undefined });
     });
   };
 
@@ -167,15 +173,15 @@ export function RunArtifactsPanel({ runId }: RunArtifactsPanelProps) {
             type="button"
             variant="ghost"
             size="sm"
-            onClick={() => fetchRunArtifacts(runId, true)}
-            disabled={entry?.loading}
+            onClick={handleRefresh}
+            disabled={isLoadingArtifacts}
             className="gap-2"
           >
             <RefreshCw className="h-4 w-4" />
             Refresh
           </Button>
         ) : null}
-        {entry?.artifacts && entry.artifacts.length > 0 && (
+        {artifacts.length > 0 && (
           <Button
             type="button"
             variant="ghost"
diff --git a/frontend/src/components/inputs/SecretSelect.tsx b/frontend/src/components/inputs/SecretSelect.tsx
index 23f0c95a..c0bb7f04 100644
--- a/frontend/src/components/inputs/SecretSelect.tsx
+++ b/frontend/src/components/inputs/SecretSelect.tsx
@@ -1,10 +1,10 @@
-import { useEffect } from 'react';
 import { KeyRound, ExternalLink } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 import { cn } from '@/lib/utils';
 import { getSecretLabel, getSecretDescription } from '@/api/secrets';
 import { LeanSelect, type SelectOption } from './LeanSelect';
-import { useSecretStore } from '@/store/secretStore';
+import { useSecrets } from '@/hooks/queries/useSecretQueries';
+import { useQueryClient } from '@tanstack/react-query';
 
 interface SecretSelectProps {
   value?: string;
@@ -28,18 +28,10 @@ export function SecretSelect({
   onRefresh,
   clearable = true,
 }: SecretSelectProps) {
-  const secrets = useSecretStore((state) => state.secrets);
-  const loading = useSecretStore((state) => state.loading);
-  const fetchSecrets = useSecretStore((state) => state.fetchSecrets);
-  const refreshSecrets = useSecretStore((state) => state.refresh);
+  const { data: secrets = [], isLoading: loading } = useSecrets();
+  const queryClient = useQueryClient();
   const navigate = useNavigate();
 
-  useEffect(() => {
-    fetchSecrets().catch((error) => {
-      console.error('Failed to load secrets:', error);
-    });
-  }, [fetchSecrets]);
-
   const options: SelectOption[] = secrets.map((s) => ({
     label: getSecretLabel(s),
     value: s.id,
@@ -59,7 +51,7 @@ export function SecretSelect({
       : undefined;
 
   const handleRefresh = async () => {
-    await refreshSecrets();
+    await queryClient.invalidateQueries({ queryKey: ['secrets'] });
     onRefresh?.();
   };
 
diff --git a/frontend/src/components/layout/AppLayout.tsx b/frontend/src/components/layout/AppLayout.tsx
index 564c4d25..42d82d9a 100644
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -38,6 +38,8 @@ import { useThemeStore } from '@/store/themeStore';
 import { cn } from '@/lib/utils';
 import { setMobilePlacementSidebarClose } from '@/components/layout/sidebar-state';
 import { useCommandPaletteStore } from '@/store/commandPaletteStore';
+import { usePrefetchOnIdle } from '@/hooks/usePrefetchOnIdle';
+import { prefetchIdleRoutes, prefetchRoute } from '@/lib/prefetch-routes';
 
 interface AppLayoutProps {
   children: React.ReactNode;
@@ -64,6 +66,12 @@ function useIsMobile(breakpoint = 768) {
 }
 
 export function AppLayout({ children }: AppLayoutProps) {
+  usePrefetchOnIdle();
+
+  // Prefetch all route chunks during idle time
+  useEffect(() => {
+    prefetchIdleRoutes();
+  }, []);
   const isMobile = useIsMobile();
   const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
   const [, setIsHovered] = useState(false);
@@ -479,6 +487,7 @@ export function AppLayout({ children }: AppLayoutProps) {
                   <Link
                     key={item.href}
                     to={item.href}
+                    onMouseEnter={() => prefetchRoute(item.href)}
                     onClick={(e) => {
                       // If modifier key is held (CMD+click, Ctrl+click), link opens in new tab
                       // Don't update sidebar state in this case
@@ -572,6 +581,7 @@ export function AppLayout({ children }: AppLayoutProps) {
                     <Link
                       key={item.href}
                       to={item.href}
+                      onMouseEnter={() => prefetchRoute(item.href)}
                       onClick={(e) => {
                         if (e.metaKey || e.ctrlKey || e.shiftKey) {
                           return;
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index b9fcd66b..92d2cdfe 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState, useMemo, useRef } from 'react';
 import * as LucideIcons from 'lucide-react';
-import { useComponentStore } from '@/store/componentStore';
+import { useComponents } from '@/hooks/queries/useComponentQueries';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import {
@@ -201,7 +201,8 @@ interface SidebarProps {
 }
 
 export function Sidebar({ canManageWorkflows = true }: SidebarProps) {
-  const { getAllComponents, fetchComponents, loading, error } = useComponentStore();
+  const { data: componentIndex, isLoading: loading, error: componentsError } = useComponents();
+  const error = componentsError?.message ?? null;
   const [searchQuery, setSearchQuery] = useState('');
   const [viewMode, setViewMode] = useState<ViewMode>('list');
   const theme = useThemeStore((state) => state.theme);
@@ -228,15 +229,8 @@ export function Sidebar({ canManageWorkflows = true }: SidebarProps) {
   const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const isScrollingRef = useRef(false);
 
-  // Fetch components on mount
-  useEffect(() => {
-    fetchComponents().catch((error) => {
-      console.error('Failed to load components', error);
-    });
-  }, [fetchComponents]);
-
   const showDemoComponents = useWorkflowUiStore((state) => state.showDemoComponents);
-  const allComponents = getAllComponents();
+  const allComponents = componentIndex ? Object.values(componentIndex.byId) : [];
 
   // Helper to identify demo components
   const isDemoComponent = (component: ComponentMetadata) => {
diff --git a/frontend/src/components/schedules/ScheduleEditorDrawer.tsx b/frontend/src/components/schedules/ScheduleEditorDrawer.tsx
index 50dd4f4d..b90b4ab9 100644
--- a/frontend/src/components/schedules/ScheduleEditorDrawer.tsx
+++ b/frontend/src/components/schedules/ScheduleEditorDrawer.tsx
@@ -1,5 +1,4 @@
 import { useEffect, useMemo, useState } from 'react';
-import type { components } from '@shipsec/backend-client';
 import type { WorkflowSchedule, ScheduleOverlapPolicy } from '@shipsec/shared';
 import { Button } from '@/components/ui/button';
 import {
@@ -23,12 +22,11 @@ import {
 import { Badge } from '@/components/ui/badge';
 import { Loader2, Plus, Trash2 } from 'lucide-react';
 import { api } from '@/services/api';
+import { useWorkflow } from '@/hooks/queries/useWorkflowQueries';
 import { cn } from '@/lib/utils';
 
 const ENTRY_COMPONENT_ID = 'core.workflow.entrypoint';
 
-type WorkflowResponseDto = components['schemas']['WorkflowResponseDto'];
-
 type RuntimeInputType = 'file' | 'text' | 'number' | 'json' | 'array' | 'string';
 type NormalizedRuntimeInputType = Exclude<RuntimeInputType, 'string'>;
 
@@ -154,10 +152,30 @@ export function ScheduleEditorDrawer({
     overlapPolicy: 'skip',
     catchupWindowSeconds: '0',
   }));
-  const [workflowDetail, setWorkflowDetail] = useState<WorkflowResponseDto | null>(null);
-  const [workflowCache, setWorkflowCache] = useState<Record<string, WorkflowResponseDto>>({});
-  const [workflowLoading, setWorkflowLoading] = useState(false);
-  const [runtimeInputs, setRuntimeInputs] = useState<RuntimeInputDefinition[]>([]);
+  // --- Workflow detail query (replaces manual fetch + workflowCache) ---
+  const {
+    data: workflowDetail,
+    isLoading: workflowLoading,
+    error: workflowError,
+  } = useWorkflow(open && form.workflowId ? form.workflowId : undefined);
+
+  // Propagate workflow load error to form
+  useEffect(() => {
+    if (workflowError) {
+      setFormError(
+        workflowError instanceof Error ? workflowError.message : 'Unable to load workflow details',
+      );
+    }
+  }, [workflowError]);
+
+  const runtimeInputs = useMemo<RuntimeInputDefinition[]>(() => {
+    if (!workflowDetail) return [];
+    const entryNode = workflowDetail.graph.nodes.find(
+      (node: any) => node.type === ENTRY_COMPONENT_ID,
+    );
+    return normalizeRuntimeInputs((entryNode?.data as any)?.config?.runtimeInputs);
+  }, [workflowDetail]);
+
   const [runtimeValues, setRuntimeValues] = useState<Record<string, unknown>>({});
   const [runtimeErrors, setRuntimeErrors] = useState<Record<string, string>>({});
   const [uploading, setUploading] = useState<Record<string, boolean>>({});
@@ -191,10 +209,6 @@ export function ScheduleEditorDrawer({
     setPendingOverrideNode('');
     setFormError(null);
     setFormSeed((seed) => seed + 1);
-    if (!baseWorkflowId) {
-      setWorkflowDetail(null);
-      setRuntimeInputs([]);
-    }
   };
 
   useEffect(() => {
@@ -208,51 +222,6 @@ export function ScheduleEditorDrawer({
     [workflowOptions, form.workflowId],
   );
 
-  useEffect(() => {
-    if (!open) return;
-    if (!form.workflowId) {
-      setWorkflowDetail(null);
-      setRuntimeInputs([]);
-      return;
-    }
-    const cached = workflowCache[form.workflowId];
-    if (cached) {
-      setWorkflowDetail(cached);
-      setRuntimeInputs(
-        normalizeRuntimeInputs(
-          (cached.graph.nodes.find((node) => node.type === ENTRY_COMPONENT_ID)?.data?.config as any)
-            ?.runtimeInputs,
-        ),
-      );
-      return;
-    }
-    let cancelled = false;
-    setWorkflowLoading(true);
-    (async () => {
-      try {
-        const detail = await api.workflows.get(form.workflowId);
-        if (cancelled) return;
-        setWorkflowCache((prev) => ({ ...prev, [detail.id]: detail }));
-        setWorkflowDetail(detail);
-        const entryNode = detail.graph.nodes.find((node) => node.type === ENTRY_COMPONENT_ID);
-        setRuntimeInputs(normalizeRuntimeInputs((entryNode?.data as any)?.config?.runtimeInputs));
-      } catch (error) {
-        if (!cancelled) {
-          setFormError(error instanceof Error ? error.message : 'Unable to load workflow details');
-          setWorkflowDetail(null);
-          setRuntimeInputs([]);
-        }
-      } finally {
-        if (!cancelled) {
-          setWorkflowLoading(false);
-        }
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [form.workflowId, open, workflowCache]);
-
   const workflowNodes = useMemo(() => {
     if (!workflowDetail) return [];
     return workflowDetail.graph.nodes.filter((node) => node.type !== ENTRY_COMPONENT_ID);
diff --git a/frontend/src/components/timeline/AgentTracePanel.tsx b/frontend/src/components/timeline/AgentTracePanel.tsx
index 8e93b7d1..1c523110 100644
--- a/frontend/src/components/timeline/AgentTracePanel.tsx
+++ b/frontend/src/components/timeline/AgentTracePanel.tsx
@@ -12,8 +12,9 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { useExecutionTimelineStore } from '@/store/executionTimelineStore';
 import { useWorkflowUiStore } from '@/store/workflowUiStore';
-import { useRunStore } from '@/store/runStore';
-import { api, API_V1_URL, getApiAuthHeaders } from '@/services/api';
+import { getRunByIdFromCache } from '@/hooks/queries/useRunQueries';
+import { useExecutionResult } from '@/hooks/queries/useExecutionQueries';
+import { API_V1_URL, getApiAuthHeaders } from '@/services/api';
 import { cn } from '@/lib/utils';
 import type {
   AgentNodeOutput,
@@ -70,50 +71,26 @@ interface AgentTracePanelProps {
 }
 
 export function AgentTracePanel({ runId }: AgentTracePanelProps) {
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [outputs, setOutputs] = useState<Record<string, AgentNodeOutput>>({});
   const selectedNodeId = useExecutionTimelineStore((state) => state.selectedNodeId);
   const selectNode = useExecutionTimelineStore((state) => state.selectNode);
   const timelineEvents = useExecutionTimelineStore((state) => state.events);
   const setInspectorTab = useWorkflowUiStore((state) => state.setInspectorTab);
   const { runId: liveRunId, status: executionStatus } = useWorkflowExecution();
 
-  useEffect(() => {
-    let cancelled = false;
-    if (!runId) {
-      setOutputs({});
-      setError(null);
-      return;
-    }
-
-    const fetchResult = async () => {
-      setLoading(true);
-      setError(null);
-      try {
-        const result = await api.executions.getResult(runId);
-        if (cancelled) return;
-        const typed = result as WorkflowRunResult;
-        setOutputs(typed.result?.outputs ?? {});
-      } catch (err) {
-        if (cancelled) return;
-        console.error('Failed to load agent outputs', err);
-        setError(err instanceof Error ? err.message : 'Failed to load agent outputs');
-        setOutputs({});
-      } finally {
-        if (!cancelled) {
-          setLoading(false);
-        }
-      }
-    };
-
-    void fetchResult();
-    return () => {
-      cancelled = true;
-    };
-  }, [runId]);
-
-  const selectedRun = useRunStore((state) => (runId ? state.getRunById(runId) : undefined));
+  const {
+    data: resultData,
+    isLoading: loading,
+    error: queryError,
+    refetch: refetchResult,
+  } = useExecutionResult(runId);
+  const error = queryError?.message ?? null;
+  const outputs = useMemo(() => {
+    if (!resultData) return {};
+    const typed = resultData as WorkflowRunResult;
+    return typed.result?.outputs ?? {};
+  }, [resultData]);
+
+  const selectedRun = runId ? getRunByIdFromCache(runId) : undefined;
   const runStatus = selectedRun?.status ?? null;
   const executionStatusUpper = executionStatus?.toUpperCase();
   const fallbackStatus =
@@ -200,7 +177,7 @@ export function AgentTracePanel({ runId }: AgentTracePanelProps) {
       <div className="h-full flex flex-col items-center justify-center gap-2 px-6 text-center">
         <p className="text-sm font-medium text-destructive">Failed to load agent trace.</p>
         <p className="text-xs text-muted-foreground">{error}</p>
-        <Button size="sm" variant="outline" onClick={() => setOutputs({})}>
+        <Button size="sm" variant="outline" onClick={() => refetchResult()}>
           Retry
         </Button>
       </div>
diff --git a/frontend/src/components/timeline/ExecutionInspector.tsx b/frontend/src/components/timeline/ExecutionInspector.tsx
index fbc208e8..119fb18d 100644
--- a/frontend/src/components/timeline/ExecutionInspector.tsx
+++ b/frontend/src/components/timeline/ExecutionInspector.tsx
@@ -28,9 +28,8 @@ import { useExecutionStore } from '@/store/executionStore';
 import { useWorkflowExecution } from '@/hooks/useWorkflowExecution';
 import { useWorkflowUiStore } from '@/store/workflowUiStore';
 import { useWorkflowStore } from '@/store/workflowStore';
-import { useArtifactStore } from '@/store/artifactStore';
 import { useToast } from '@/components/ui/use-toast';
-import { useRunStore } from '@/store/runStore';
+import { useWorkflowRuns } from '@/hooks/queries/useRunQueries';
 import { cn } from '@/lib/utils';
 import type { ExecutionLog } from '@/schemas/execution';
 import { RunArtifactsPanel } from '@/components/artifacts/RunArtifactsPanel';
@@ -117,12 +116,10 @@ export function ExecutionInspector({ onRerunRun }: ExecutionInspectorProps = {})
   const { id: workflowId, currentVersion: currentWorkflowVersion } = useWorkflowStore(
     (state) => state.metadata,
   );
-  const workflowCacheKey = workflowId ?? '__global__';
-  const scopedRuns = useRunStore((state) => state.cache[workflowCacheKey]?.runs);
-  const runs = scopedRuns ?? [];
+  const { data: runsPage, isLoading: isLoadingRuns } = useWorkflowRuns(workflowId);
+  const runs = runsPage?.runs ?? [];
   const { status, runStatus, stopExecution, runId: liveRunId } = useWorkflowExecution();
   const { inspectorTab, setInspectorTab } = useWorkflowUiStore();
-  const fetchRunArtifacts = useArtifactStore((state) => state.fetchRunArtifacts);
   const { getDisplayLogs, setLogMode } = useExecutionStore();
   const [logModal, setLogModal] = useState<{ open: boolean; message: string; title: string }>({
     open: false,
@@ -226,12 +223,6 @@ export function ExecutionInspector({ onRerunRun }: ExecutionInspectorProps = {})
     }
   }, [selectedRun, toast]);
 
-  useEffect(() => {
-    if (selectedRunId && inspectorTab === 'artifacts') {
-      void fetchRunArtifacts(selectedRunId);
-    }
-  }, [selectedRunId, inspectorTab, fetchRunArtifacts]);
-
   useEffect(() => {
     // Switch log mode based on timeline playback mode
     if (playbackMode === 'live') {
@@ -262,7 +253,11 @@ export function ExecutionInspector({ onRerunRun }: ExecutionInspectorProps = {})
       <aside className="flex h-full min-h-0 w-full flex-col overflow-hidden bg-background">
         {/* Header - Run Selector */}
         <div className="border-b px-3 py-2.5 flex items-center justify-between gap-2">
-          <RunSelector onRerun={onRerunRun} />
+          <RunSelector
+            onRerun={onRerunRun}
+            runsPage={runsPage ?? null}
+            isLoadingRuns={isLoadingRuns}
+          />
           <div className="flex items-center gap-2">
             {runStatus?.progress &&
               selectedRunId === liveRunId &&
diff --git a/frontend/src/components/timeline/NodeIOInspector.tsx b/frontend/src/components/timeline/NodeIOInspector.tsx
index b57e0c0d..e3dd5359 100644
--- a/frontend/src/components/timeline/NodeIOInspector.tsx
+++ b/frontend/src/components/timeline/NodeIOInspector.tsx
@@ -1,6 +1,7 @@
-import { useEffect, useState, useRef } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { api } from '@/services/api';
 import { useExecutionTimelineStore } from '@/store/executionTimelineStore';
+import { useExecutionNodeIO } from '@/hooks/queries/useExecutionQueries';
 import { Card } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Loader2, AlertCircle, CheckCircle2, XCircle, Clock } from 'lucide-react';
@@ -29,10 +30,7 @@ export function NodeIOInspector() {
   const selectedRunId = useExecutionTimelineStore((state) => state.selectedRunId);
   const selectedNodeId = useExecutionTimelineStore((state) => state.selectedNodeId);
 
-  const [loading, setLoading] = useState(false);
   const [loadingDetail, setLoadingDetail] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [nodeIOList, setNodeIOList] = useState<NodeIO[]>([]);
   const [selectedNodeIO, setSelectedNodeIO] = useState<NodeIO | null>(null);
   const [fullViewModal, setFullViewModal] = useState<{
     open: boolean;
@@ -44,54 +42,31 @@ export function NodeIOInspector() {
     content: '',
   });
 
-  // Track the previous run ID to detect actual run changes
-  const previousRunIdRef = useRef<string | null>(null);
+  const {
+    data: rawNodeIOData,
+    isLoading: loading,
+    error: queryError,
+  } = useExecutionNodeIO(selectedRunId);
+  const error = queryError?.message ?? null;
 
-  useEffect(() => {
-    const isNewRun = selectedRunId !== previousRunIdRef.current;
-
-    // Only reset completely when switching to a different run
-    if (isNewRun) {
-      setSelectedNodeIO(null);
-      setError(null);
-      setNodeIOList([]);
-      previousRunIdRef.current = selectedRunId;
-    }
-
-    if (!selectedRunId) {
-      return;
-    }
-
-    const fetchNodeIO = async () => {
-      setLoading(true);
-      setError(null);
-      try {
-        const data = await api.executions.listNodeIO(selectedRunId);
-        // Cast the API response to match our interface, ensuring required fields are present
-        const nodes = (data.nodes || []).map((n: any) => ({
-          ...n,
-          nodeRef: n.nodeRef || 'unknown',
-          componentId: n.componentId || 'unknown',
-          status: n.status || 'running',
-          startedAt: n.startedAt || null,
-          completedAt: n.completedAt || null,
-          durationMs: n.durationMs ?? null,
-          inputs: n.inputs || null,
-          outputs: n.outputs || null,
-          inputsTruncated: !!n.inputsTruncated,
-          outputsTruncated: !!n.outputsTruncated,
-          errorMessage: n.errorMessage || null,
-        })) as NodeIO[];
-        setNodeIOList(nodes);
-      } catch (err: any) {
-        setError(err.message || 'Failed to fetch node I/O');
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchNodeIO();
-  }, [selectedRunId]);
+  const nodeIOList = useMemo(() => {
+    if (!rawNodeIOData) return [];
+    const nodes = (rawNodeIOData.nodes || []) as any[];
+    return nodes.map((n: any) => ({
+      ...n,
+      nodeRef: n.nodeRef || 'unknown',
+      componentId: n.componentId || 'unknown',
+      status: n.status || 'running',
+      startedAt: n.startedAt || null,
+      completedAt: n.completedAt || null,
+      durationMs: n.durationMs ?? null,
+      inputs: n.inputs || null,
+      outputs: n.outputs || null,
+      inputsTruncated: !!n.inputsTruncated,
+      outputsTruncated: !!n.outputsTruncated,
+      errorMessage: n.errorMessage || null,
+    })) as NodeIO[];
+  }, [rawNodeIOData]);
 
   useEffect(() => {
     if (selectedNodeId) {
diff --git a/frontend/src/components/timeline/ReviewInspector.tsx b/frontend/src/components/timeline/ReviewInspector.tsx
index 7497d61e..5f086bb0 100644
--- a/frontend/src/components/timeline/ReviewInspector.tsx
+++ b/frontend/src/components/timeline/ReviewInspector.tsx
@@ -8,7 +8,7 @@ import { useExecutionTimelineStore } from '@/store/executionTimelineStore';
 import { useExecutionStore } from '@/store/executionStore';
 import { useWorkflowUiStore } from '@/store/workflowUiStore';
 import { useWorkflowStore } from '@/store/workflowStore';
-import { useRunStore } from '@/store/runStore';
+import { useWorkflowRuns } from '@/hooks/queries/useRunQueries';
 import { cn } from '@/lib/utils';
 import { RunArtifactsPanel } from '@/components/artifacts/RunArtifactsPanel';
 
@@ -20,9 +20,8 @@ const formatTime = (timestamp: string) => {
 export function ReviewInspector() {
   const { selectedRunId, playbackMode, isPlaying } = useExecutionTimelineStore();
   const { id: workflowId } = useWorkflowStore((state) => state.metadata);
-  const workflowCacheKey = workflowId ?? '__global__';
-  const scopedRuns = useRunStore((state) => state.cache[workflowCacheKey]?.runs);
-  const runs = scopedRuns ?? [];
+  const { data: runsPage, isLoading: isLoadingRuns } = useWorkflowRuns(workflowId);
+  const runs = runsPage?.runs ?? [];
   const displayLogs = useExecutionStore((state) => state.getDisplayLogs());
   const { inspectorTab, setInspectorTab } = useWorkflowUiStore();
 
@@ -50,7 +49,7 @@ export function ReviewInspector() {
     <aside className="h-full w-[360px] border-l bg-muted/30 backdrop-blur flex flex-col overflow-y-auto min-h-0">
       <div className="border-b p-3 space-y-3 bg-background/70">
         <div className="flex items-center justify-between">
-          <RunSelector />
+          <RunSelector runsPage={runsPage ?? null} isLoadingRuns={isLoadingRuns} />
         </div>
         {selectedRun && (
           <div className="rounded-md border bg-background px-3 py-2 text-xs space-y-1">
diff --git a/frontend/src/components/timeline/RunBreadcrumbs.tsx b/frontend/src/components/timeline/RunBreadcrumbs.tsx
index 406b172b..ac2f22c5 100644
--- a/frontend/src/components/timeline/RunBreadcrumbs.tsx
+++ b/frontend/src/components/timeline/RunBreadcrumbs.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { GitBranch, ArrowLeft } from 'lucide-react';
-import { api } from '@/services/api';
+import { useExecutionRun } from '@/hooks/queries/useExecutionQueries';
 import { cn } from '@/lib/utils';
 
 interface RunInfo {
@@ -25,37 +25,20 @@ interface RunBreadcrumbsProps {
  */
 export function RunBreadcrumbs({ currentRun, className, variant = 'inline' }: RunBreadcrumbsProps) {
   const navigate = useNavigate();
-  const [parentRun, setParentRun] = useState<RunInfo | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (!currentRun?.parentRunId) {
-      setParentRun(null);
-      return;
-    }
+  const { data: parentRunData, isLoading: loading } = useExecutionRun(
+    currentRun?.parentRunId ?? null,
+  );
 
-    const fetchParentRun = async () => {
-      setLoading(true);
-      try {
-        const run = await api.executions.getRun(currentRun.parentRunId!);
-        if (run) {
-          setParentRun({
-            id: run.id as string,
-            workflowId: run.workflowId as string,
-            workflowName: (run as any).workflowName || 'Parent Workflow',
-            parentRunId: (run as any).parentRunId,
-            parentNodeRef: (run as any).parentNodeRef,
-          });
-        }
-      } catch (err) {
-        console.error('Failed to fetch parent run:', err);
-      } finally {
-        setLoading(false);
-      }
+  const parentRun = useMemo<RunInfo | null>(() => {
+    if (!parentRunData) return null;
+    return {
+      id: parentRunData.id as string,
+      workflowId: parentRunData.workflowId as string,
+      workflowName: (parentRunData as any).workflowName || 'Parent Workflow',
+      parentRunId: (parentRunData as any).parentRunId,
+      parentNodeRef: (parentRunData as any).parentNodeRef,
     };
-
-    fetchParentRun();
-  }, [currentRun?.parentRunId]);
+  }, [parentRunData]);
 
   // Only show breadcrumbs if this is a child run
   if (!currentRun?.parentRunId) {
diff --git a/frontend/src/components/timeline/RunInfoDisplay.tsx b/frontend/src/components/timeline/RunInfoDisplay.tsx
index 3d9c701b..9953251c 100644
--- a/frontend/src/components/timeline/RunInfoDisplay.tsx
+++ b/frontend/src/components/timeline/RunInfoDisplay.tsx
@@ -2,7 +2,7 @@ import { Badge } from '@/components/ui/badge';
 import { formatDuration, formatStartTime } from '@/utils/timeFormat';
 import { getTriggerDisplay } from '@/utils/triggerDisplay';
 import { getStatusBadgeClassFromStatus } from '@/utils/statusBadgeStyles';
-import type { ExecutionRun } from '@/store/runStore';
+import type { ExecutionRun } from '@/hooks/queries/useRunQueries';
 import { isRunLive } from '@/features/workflow-builder/utils/executionRuns';
 import { cn } from '@/lib/utils';
 import { Wifi } from 'lucide-react';
diff --git a/frontend/src/components/timeline/RunSelector.tsx b/frontend/src/components/timeline/RunSelector.tsx
index 05b1c552..c6df4000 100644
--- a/frontend/src/components/timeline/RunSelector.tsx
+++ b/frontend/src/components/timeline/RunSelector.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo, useCallback } from 'react';
-import { ChevronDown, Play, Clock, Wifi, RefreshCw, Link2 } from 'lucide-react';
+import { ChevronDown, Play, Clock, Wifi, RefreshCw, Link2, Loader2 } from 'lucide-react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -13,7 +13,13 @@ import {
 import { useExecutionTimelineStore } from '@/store/executionTimelineStore';
 import { useExecutionStore } from '@/store/executionStore';
 import { useWorkflowStore } from '@/store/workflowStore';
-import { useRunStore, type ExecutionRun } from '@/store/runStore';
+import {
+  useWorkflowRuns,
+  fetchMoreRuns as fetchMoreRunsFn,
+  type ExecutionRun,
+} from '@/hooks/queries/useRunQueries';
+import { useQueryClient } from '@tanstack/react-query';
+import { queryKeys } from '@/lib/queryKeys';
 import { useWorkflowUiStore } from '@/store/workflowUiStore';
 import { cn } from '@/lib/utils';
 import { useToast } from '@/components/ui/use-toast';
@@ -43,27 +49,37 @@ type TriggerFilter = 'all' | 'manual' | 'schedule';
 
 interface RunSelectorProps {
   onRerun?: (runId: string) => void;
+  /** Pre-fetched runs from parent to avoid duplicate useWorkflowRuns calls */
+  runsPage?: { runs: ExecutionRun[]; hasMore: boolean } | null;
+  isLoadingRuns?: boolean;
 }
 
-export function RunSelector({ onRerun }: RunSelectorProps = {}) {
+export function RunSelector({
+  onRerun,
+  runsPage: externalRunsPage,
+  isLoadingRuns: externalIsLoading,
+}: RunSelectorProps = {}) {
   const [isOpen, setIsOpen] = useState(false);
   const [triggerFilter, setTriggerFilter] = useState<TriggerFilter>('all');
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
   const navigate = useNavigate();
   const location = useLocation();
   const { id: routeWorkflowId, runId: routeRunId } = useParams<{ id?: string; runId?: string }>();
   const { toast } = useToast();
-  const { selectedRunId, playbackMode, selectRun, switchToLiveMode } = useExecutionTimelineStore();
+  const { selectedRunId, playbackMode, selectRun } = useExecutionTimelineStore();
   const workflowMetadata = useWorkflowStore((state) => state.metadata);
   const workflowId = workflowMetadata.id;
   const targetWorkflowId = routeWorkflowId ?? workflowId;
   const currentWorkflowVersion = workflowMetadata.currentVersion;
-  const workflowCacheKey = targetWorkflowId ?? '__global__';
-  const scopedRuns = useRunStore((state) => state.cache[workflowCacheKey]?.runs);
-  const runs = scopedRuns ?? [];
-  const fetchRuns = useRunStore((state) => state.fetchRuns);
-  const fetchMoreRuns = useRunStore((state) => state.fetchMoreRuns);
-  const isLoadingRuns = useRunStore((state) => state.cache[workflowCacheKey]?.isLoading) ?? false;
-  const hasMoreRuns = useRunStore((state) => state.cache[workflowCacheKey]?.hasMore) ?? true;
+  const queryClient = useQueryClient();
+  // Skip internal fetch when parent provides data — avoids duplicate network requests
+  const { data: internalRunsData, isLoading: internalIsLoading } = useWorkflowRuns(
+    externalRunsPage !== undefined ? undefined : targetWorkflowId,
+  );
+  const runsData = externalRunsPage ?? internalRunsData;
+  const isLoadingRuns = externalIsLoading ?? internalIsLoading;
+  const runs = runsData?.runs ?? [];
+  const hasMoreRuns = runsData?.hasMore ?? true;
 
   const mode = useWorkflowUiStore((state) => state.mode);
 
@@ -122,13 +138,7 @@ export function RunSelector({ onRerun }: RunSelectorProps = {}) {
     [filteredRunsByTrigger],
   );
 
-  // Load runs on mount
-  useEffect(() => {
-    if (!targetWorkflowId) {
-      return;
-    }
-    fetchRuns({ workflowId: targetWorkflowId }).catch(() => undefined);
-  }, [fetchRuns, targetWorkflowId]);
+  // Runs auto-fetched by useWorkflowRuns()
 
   // Auto-load a live run if it exists and nothing is selected
   useEffect(() => {
@@ -188,13 +198,10 @@ export function RunSelector({ onRerun }: RunSelectorProps = {}) {
     const interval = window.setInterval(() => {
       // Poll runs while in execution mode; skip navigation churn in design
       if (mode === 'execution') {
-        // Read current cache size directly from the store to avoid stale closure
-        const currentCount = useRunStore.getState().cache[workflowCacheKey]?.runs?.length ?? 0;
-        fetchRuns({
-          workflowId: targetWorkflowId,
-          force: true,
-          limit: Math.max(currentCount, 5),
-        }).catch(() => undefined);
+        const queryKey = targetWorkflowId
+          ? queryKeys.runs.byWorkflow(targetWorkflowId)
+          : queryKeys.runs.global();
+        queryClient.invalidateQueries({ queryKey });
       }
     }, 10000);
     return () => window.clearInterval(interval);
@@ -202,7 +209,7 @@ export function RunSelector({ onRerun }: RunSelectorProps = {}) {
     targetWorkflowId,
     currentLiveRunId,
     liveRuns.length,
-    fetchRuns,
+    queryClient,
     routeWorkflowId,
     workflowId,
     mode,
@@ -257,7 +264,8 @@ export function RunSelector({ onRerun }: RunSelectorProps = {}) {
 
   const handleSwitchToLive = () => {
     if (currentLiveRunId) {
-      switchToLiveMode();
+      // Use selectRun with 'live' mode — it already calls loadTimeline internally.
+      // Don't also call switchToLiveMode() which would trigger a second loadTimeline.
       void selectRun(currentLiveRunId, 'live');
       navigateToRun(currentLiveRunId);
       setIsOpen(false);
@@ -466,13 +474,25 @@ export function RunSelector({ onRerun }: RunSelectorProps = {}) {
                   variant="ghost"
                   size="sm"
                   className="w-full text-xs text-muted-foreground"
-                  disabled={isLoadingRuns}
-                  onClick={(event) => {
+                  disabled={isLoadingMore}
+                  onClick={async (event) => {
                     event.preventDefault();
-                    fetchMoreRuns(targetWorkflowId);
+                    setIsLoadingMore(true);
+                    try {
+                      await fetchMoreRunsFn(targetWorkflowId);
+                    } finally {
+                      setIsLoadingMore(false);
+                    }
                   }}
                 >
-                  {isLoadingRuns ? 'Loading…' : 'Load more runs'}
+                  {isLoadingMore ? (
+                    <>
+                      <Loader2 className="h-3 w-3 mr-1 animate-spin" />
+                      Loading…
+                    </>
+                  ) : (
+                    'Load more runs'
+                  )}
                 </Button>
               ) : (
                 <p className="text-center text-xs text-muted-foreground py-1">
diff --git a/frontend/src/components/workflow/Canvas.tsx b/frontend/src/components/workflow/Canvas.tsx
index 9265b31d..ad745c38 100644
--- a/frontend/src/components/workflow/Canvas.tsx
+++ b/frontend/src/components/workflow/Canvas.tsx
@@ -30,7 +30,7 @@ import { ConfigPanel } from './ConfigPanel';
 import { ValidationDock } from './ValidationDock';
 import { DataFlowEdge } from '../timeline/DataFlowEdge';
 import { validateConnection } from '@/utils/connectionValidation';
-import { useComponentStore } from '@/store/componentStore';
+import { useComponents } from '@/hooks/queries/useComponentQueries';
 import { useExecutionStore } from '@/store/executionStore';
 import { useWorkflowStore } from '@/store/workflowStore';
 import { track, Events } from '@/features/analytics/events';
@@ -134,7 +134,14 @@ export function Canvas({
   const [reactFlowInstance, setReactFlowInstance] = useState<any>(null);
   const [selectedNode, setSelectedNode] = useState<Node<NodeData> | null>(null);
   const canvasContainerRef = useRef<HTMLDivElement>(null);
-  const { getComponent } = useComponentStore();
+  const { data: componentIndex } = useComponents();
+  const getComponent = (ref: string) => {
+    if (!componentIndex || !ref) return null;
+    if (componentIndex.byId[ref]) return componentIndex.byId[ref];
+    const idFromSlug = componentIndex.slugIndex[ref];
+    if (idFromSlug && componentIndex.byId[idFromSlug]) return componentIndex.byId[idFromSlug];
+    return null;
+  };
   const { nodeStates } = useExecutionStore();
   const { markDirty } = useWorkflowStore();
   const { dataFlows, selectedNodeId, selectNode, selectEvent } = useExecutionTimelineStore();
diff --git a/frontend/src/components/workflow/ConfigPanel.tsx b/frontend/src/components/workflow/ConfigPanel.tsx
index 2278fedb..eb9fba6b 100644
--- a/frontend/src/components/workflow/ConfigPanel.tsx
+++ b/frontend/src/components/workflow/ConfigPanel.tsx
@@ -28,7 +28,7 @@ import {
 } from '@/components/ui/select';
 import { Badge } from '@/components/ui/badge';
 import { cn } from '@/lib/utils';
-import { useComponentStore } from '@/store/componentStore';
+import { useComponents } from '@/hooks/queries/useComponentQueries';
 import { ParameterFieldWrapper } from './ParameterField';
 import { WebhookDetails } from './WebhookDetails';
 import { SecretSelect } from '@/components/inputs/SecretSelect';
@@ -47,7 +47,7 @@ import {
 } from '@/utils/portUtils';
 import { API_V1_URL, api } from '@/services/api';
 import { useWorkflowStore } from '@/store/workflowStore';
-import { useApiKeyStore } from '@/store/apiKeyStore';
+import { useApiKeys, useApiKeyUiStore } from '@/hooks/queries/useApiKeyQueries';
 import type { WorkflowSchedule } from '@shipsec/shared';
 import { useOptionalWorkflowSchedulesContext } from '@/features/workflow-builder/contexts/useWorkflowSchedulesContext';
 import { formatScheduleTimestamp, scheduleStatusVariant } from './schedules-utils';
@@ -298,7 +298,14 @@ export function ConfigPanel({
   onViewSchedules,
 }: ConfigPanelProps) {
   const isMobile = useIsMobile();
-  const { getComponent, loading } = useComponentStore();
+  const { data: componentIndex, isLoading: loading } = useComponents();
+  const getComponent = (ref: string) => {
+    if (!componentIndex || !ref) return null;
+    if (componentIndex.byId[ref]) return componentIndex.byId[ref];
+    const idFromSlug = componentIndex.slugIndex[ref];
+    if (idFromSlug && componentIndex.byId[idFromSlug]) return componentIndex.byId[idFromSlug];
+    return null;
+  };
   const { getEdges, getNodes } = useReactFlow();
   const fallbackWorkflowId = useWorkflowStore((state) => state.metadata.id);
   const workflowId = workflowIdProp ?? fallbackWorkflowId;
@@ -307,13 +314,9 @@ export function ConfigPanel({
 
   // Get API key for curl command
 
-  const lastCreatedKey = useApiKeyStore((state) => state.lastCreatedKey);
-  const fetchApiKeys = useApiKeyStore((state) => state.fetchApiKeys);
-
-  // Fetch API keys on mount if not already loaded
-  useEffect(() => {
-    fetchApiKeys().catch(console.error);
-  }, [fetchApiKeys]);
+  const lastCreatedKey = useApiKeyUiStore((state) => state.lastCreatedKey);
+  // API keys are auto-fetched by useApiKeys() used elsewhere; just ensure they're loaded
+  useApiKeys();
 
   // Use lastCreatedKey (full key) if available, otherwise null (will show placeholder)
   const activeApiKey = lastCreatedKey || null;
@@ -380,7 +383,7 @@ export function ConfigPanel({
   const isToolMode = Boolean(
     (nodeData.config as any)?.isToolMode || (nodeData.config as any)?.mode === 'tool',
   );
-  const component = getComponent(componentRef);
+  const component = componentRef ? getComponent(componentRef) : null;
 
   if (!component) {
     if (loading) {
diff --git a/frontend/src/components/workflow/McpGroupConfig.tsx b/frontend/src/components/workflow/McpGroupConfig.tsx
index 6633d9e5..bec77c72 100644
--- a/frontend/src/components/workflow/McpGroupConfig.tsx
+++ b/frontend/src/components/workflow/McpGroupConfig.tsx
@@ -1,10 +1,12 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Loader2, Server, CheckCircle2, AlertCircle } from 'lucide-react';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
-import { mcpGroupsApi, type McpGroupServerResponse } from '@/services/mcpGroupsApi';
+import { useMcpGroups, useMcpGroupServers } from '@/hooks/queries/useMcpGroupQueries';
+import type { McpGroupServerResponse } from '@/services/mcpGroupsApi';
+import { useQueryClient } from '@tanstack/react-query';
 
 interface McpGroupConfigProps {
   /** Group slug to fetch servers for */
@@ -30,41 +32,16 @@ export function McpGroupConfig({
   onChange,
   disabled = false,
 }: McpGroupConfigProps) {
-  const [servers, setServers] = useState<McpGroupServerResponse[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const queryClient = useQueryClient();
+  const { data: groups = [] } = useMcpGroups();
+  const group = useMemo(() => groups.find((g) => g.slug === groupSlug), [groups, groupSlug]);
+  const { data: rawServers = [], isLoading, error: queryError } = useMcpGroupServers(group?.id);
+  const servers = useMemo(() => rawServers.filter((s) => s.enabled), [rawServers]);
+  const error = queryError?.message ?? null;
+
   const [selectedServers, setSelectedServers] = useState<Set<string>>(new Set(value));
   const [isRefreshing, setIsRefreshing] = useState(false);
 
-  // Fetch group servers on mount
-  const fetchServers = async () => {
-    try {
-      setIsLoading(true);
-      setError(null);
-
-      // First, find the group by slug
-      const groups = await mcpGroupsApi.listGroups();
-      const group = groups.find((g) => g.slug === groupSlug);
-
-      if (!group) {
-        throw new Error(`Group "${groupSlug}" not found`);
-      }
-
-      // Then fetch the servers
-      const groupServers = await mcpGroupsApi.getGroupServers(group.id);
-      setServers(groupServers.filter((s) => s.enabled));
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load group servers');
-      setServers([]);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchServers();
-  }, [groupSlug]);
-
   // Sync external value changes to local state
   useEffect(() => {
     setSelectedServers(new Set(value));
@@ -98,7 +75,10 @@ export function McpGroupConfig({
 
     setIsRefreshing(true);
     try {
-      await fetchServers();
+      await queryClient.invalidateQueries({ queryKey: ['mcpGroups'] });
+      if (group?.id) {
+        await queryClient.invalidateQueries({ queryKey: ['mcpGroupServers'] });
+      }
     } finally {
       setIsRefreshing(false);
     }
diff --git a/frontend/src/components/workflow/McpLibraryConfig.tsx b/frontend/src/components/workflow/McpLibraryConfig.tsx
index 7e423178..d6edf220 100644
--- a/frontend/src/components/workflow/McpLibraryConfig.tsx
+++ b/frontend/src/components/workflow/McpLibraryConfig.tsx
@@ -4,7 +4,8 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
-import { useMcpServerStore } from '@/store/mcpServerStore';
+import { useMcpServers, useMcpAllTools } from '@/hooks/queries/useMcpServerQueries';
+import { useQueryClient } from '@tanstack/react-query';
 
 interface McpLibraryConfigProps {
   /** Currently selected server IDs */
@@ -23,7 +24,10 @@ interface McpLibraryConfigProps {
  * Fetches available servers from /api/v1/mcp-servers.
  */
 export function McpLibraryConfig({ value, onChange, disabled = false }: McpLibraryConfigProps) {
-  const { servers, tools, isLoading, error, fetchServers, fetchAllTools } = useMcpServerStore();
+  const { data: servers = [], isLoading, error: serversError } = useMcpServers();
+  const { data: tools = [] } = useMcpAllTools();
+  const queryClient = useQueryClient();
+  const error = serversError?.message ?? null;
 
   // Filter out servers that belong to MCP groups - only show custom/individual servers
   const customServers = servers.filter((s) => !s.groupId);
@@ -31,12 +35,6 @@ export function McpLibraryConfig({ value, onChange, disabled = false }: McpLibra
   const [selectedServers, setSelectedServers] = useState<Set<string>>(new Set(value));
   const [isRefreshing, setIsRefreshing] = useState(false);
 
-  // Fetch servers and tools on mount
-  useEffect(() => {
-    fetchServers();
-    fetchAllTools();
-  }, [fetchServers, fetchAllTools]);
-
   // Sync external value changes to local state
   useEffect(() => {
     setSelectedServers(new Set(value));
@@ -70,7 +68,10 @@ export function McpLibraryConfig({ value, onChange, disabled = false }: McpLibra
 
     setIsRefreshing(true);
     try {
-      await Promise.all([fetchServers({ force: true }), fetchAllTools()]);
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['mcpServers'] }),
+        queryClient.invalidateQueries({ queryKey: ['mcpAllTools'] }),
+      ]);
     } finally {
       setIsRefreshing(false);
     }
diff --git a/frontend/src/components/workflow/McpLibraryToolSelector.tsx b/frontend/src/components/workflow/McpLibraryToolSelector.tsx
index 49b7cdbf..8f950a1e 100644
--- a/frontend/src/components/workflow/McpLibraryToolSelector.tsx
+++ b/frontend/src/components/workflow/McpLibraryToolSelector.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { ChevronDown, ChevronRight, Server, Wrench, RefreshCw, AlertCircle } from 'lucide-react';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { cn } from '@/lib/utils';
-import { useMcpServerStore } from '@/store/mcpServerStore';
+import { useMcpServers, useMcpAllTools } from '@/hooks/queries/useMcpServerQueries';
+import { useQueryClient } from '@tanstack/react-query';
 
 interface McpLibraryToolSelectorProps {
   /** Whether Custom MCPs is enabled (controls visibility) */
@@ -34,26 +35,24 @@ export function McpLibraryToolSelector({
   onServerExclusionChange,
   onToolExclusionChange,
 }: McpLibraryToolSelectorProps) {
-  const { servers, tools, isLoading, error, fetchServers, fetchAllTools } = useMcpServerStore();
+  const { data: servers = [], isLoading, error: serversError } = useMcpServers();
+  const { data: tools = [] } = useMcpAllTools();
+  const queryClient = useQueryClient();
+  const error = serversError?.message ?? null;
 
   const [expanded, setExpanded] = useState<ExpandedState>({});
   const [isRefreshing, setIsRefreshing] = useState(false);
 
-  // Fetch servers and tools on mount
-  useEffect(() => {
-    if (enabled) {
-      fetchServers();
-      fetchAllTools();
-    }
-  }, [enabled, fetchServers, fetchAllTools]);
-
   // Only show enabled servers
   const enabledServers = servers.filter((s) => s.enabled);
 
   const handleRefresh = async () => {
     setIsRefreshing(true);
     try {
-      await Promise.all([fetchServers({ force: true }), fetchAllTools()]);
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ['mcpServers'] }),
+        queryClient.invalidateQueries({ queryKey: ['mcpAllTools'] }),
+      ]);
     } finally {
       setIsRefreshing(false);
     }
diff --git a/frontend/src/components/workflow/ParameterField.tsx b/frontend/src/components/workflow/ParameterField.tsx
index 44e4c7ea..f35aef4a 100644
--- a/frontend/src/components/workflow/ParameterField.tsx
+++ b/frontend/src/components/workflow/ParameterField.tsx
@@ -16,10 +16,12 @@ import { SecretSelect } from '@/components/inputs/SecretSelect';
 import { LeanSelect, type SelectOption } from '@/components/inputs/LeanSelect';
 import type { Parameter } from '@/schemas/component';
 import type { InputMapping } from '@/schemas/node';
-import { useSecretStore } from '@/store/secretStore';
-import { useIntegrationStore } from '@/store/integrationStore';
+import { useSecrets } from '@/hooks/queries/useSecretQueries';
+import { useIntegrationConnections } from '@/hooks/queries/useIntegrationQueries';
+import { useArtifactLibrary } from '@/hooks/queries/useArtifactQueries';
+import { useWorkflowsList } from '@/hooks/queries/useWorkflowQueries';
 import { getCurrentUserId } from '@/lib/currentUser';
-import { useArtifactStore } from '@/store/artifactStore';
+import { useQueryClient } from '@tanstack/react-query';
 import { env } from '@/config/env';
 import { api } from '@/services/api';
 import { useWorkflowStore } from '@/store/workflowStore';
@@ -59,19 +61,19 @@ export function ParameterField({
   const [jsonError, setJsonError] = useState<string | null>(null);
   const navigate = useNavigate();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const queryClient = useQueryClient();
 
-  const secrets = useSecretStore((state) => state.secrets);
-  const secretsError = useSecretStore((state) => state.error);
-  const fetchSecrets = useSecretStore((state) => state.fetchSecrets);
-  const refreshSecrets = useSecretStore((state) => state.refresh);
-
-  const integrationConnections = useIntegrationStore((state) => state.connections);
-  const fetchIntegrationConnections = useIntegrationStore((state) => state.fetchConnections);
-  const integrationLoading = useIntegrationStore((state) => state.loadingConnections);
-  const integrationError = useIntegrationStore((state) => state.error);
+  const { data: secrets = [], error: secretsQueryError } = useSecrets();
+  const secretsError = secretsQueryError?.message ?? null;
 
   const currentUserId = useMemo(() => getCurrentUserId(), []);
-  const hasFetchedConnectionsRef = useRef(false);
+  const {
+    data: integrationConnections = [],
+    isLoading: integrationLoading,
+    error: integrationQueryError,
+  } = useIntegrationConnections(currentUserId);
+  const integrationError = integrationQueryError?.message ?? null;
+
   const autoSelectedConnectionRef = useRef(false);
 
   const authModeFromParameters: 'manual' | 'connection' = useMemo(() => {
@@ -101,9 +103,21 @@ export function ParameterField({
     [integrationConnections],
   );
 
-  const [workflowOptions, setWorkflowOptions] = useState<{ id: string; name: string }[]>([]);
-  const [workflowOptionsLoading, setWorkflowOptionsLoading] = useState(false);
-  const [workflowOptionsError, setWorkflowOptionsError] = useState<string | null>(null);
+  const {
+    data: rawWorkflowList = [],
+    isLoading: workflowListLoading,
+    error: workflowListError,
+  } = useWorkflowsList();
+  const workflowOptions = useMemo(
+    () =>
+      rawWorkflowList
+        .filter((w) => w.id !== currentBuilderWorkflowId)
+        .map((w) => ({ id: w.id, name: w.name }))
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [rawWorkflowList, currentBuilderWorkflowId],
+  );
+  const workflowOptionsLoading = workflowListLoading;
+  const workflowOptionsError = workflowListError?.message ?? null;
   const [workflowPortSyncError, setWorkflowPortSyncError] = useState<string | null>(null);
 
   const selectedWorkflowId =
@@ -132,37 +146,6 @@ export function ParameterField({
     [onUpdateParameter],
   );
 
-  useEffect(() => {
-    if (!isWorkflowSelector) return;
-
-    let cancelled = false;
-    setWorkflowOptionsLoading(true);
-    setWorkflowOptionsError(null);
-
-    api.workflows
-      .list()
-      .then((workflows) => {
-        if (cancelled) return;
-        const options = workflows
-          .filter((workflow) => workflow.id !== currentBuilderWorkflowId)
-          .map((workflow) => ({ id: workflow.id, name: workflow.name }))
-          .sort((a, b) => a.name.localeCompare(b.name));
-        setWorkflowOptions(options);
-      })
-      .catch((error) => {
-        if (cancelled) return;
-        setWorkflowOptionsError(error instanceof Error ? error.message : String(error));
-      })
-      .finally(() => {
-        if (cancelled) return;
-        setWorkflowOptionsLoading(false);
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [isWorkflowSelector, currentBuilderWorkflowId]);
-
   useEffect(() => {
     if (!isWorkflowSelector) return;
     if (!selectedWorkflowId) return;
@@ -174,19 +157,6 @@ export function ParameterField({
     void syncCallWorkflowPorts(selectedWorkflowId);
   }, [isWorkflowSelector, selectedWorkflowId, parameters, syncCallWorkflowPorts]);
 
-  useEffect(() => {
-    if (!isConnectionSelector) {
-      return;
-    }
-    if (hasFetchedConnectionsRef.current) {
-      return;
-    }
-    hasFetchedConnectionsRef.current = true;
-    fetchIntegrationConnections(currentUserId).catch((error) => {
-      console.error('Failed to load integration connections', error);
-    });
-  }, [isConnectionSelector, fetchIntegrationConnections, currentUserId]);
-
   useEffect(() => {
     if (!isConnectionSelector || integrationLoading) {
       return;
@@ -224,7 +194,7 @@ export function ParameterField({
 
   const handleRefreshConnections = async () => {
     try {
-      await fetchIntegrationConnections(currentUserId, true);
+      await queryClient.invalidateQueries({ queryKey: ['integrationConnections'] });
     } catch (error) {
       console.error('Failed to refresh integration connections', error);
     }
@@ -235,15 +205,6 @@ export function ParameterField({
   // Secret IDs are resolved to actual values at runtime by the worker
   // and selecting from store is mandatory to ensure security and portability.
 
-  useEffect(() => {
-    if (parameter.type !== 'secret') {
-      return;
-    }
-    fetchSecrets().catch((error) => {
-      console.error('Failed to load secrets', error);
-    });
-  }, [parameter.type, fetchSecrets]);
-
   useEffect(() => {
     if (parameter.type !== 'secret' || isReceivingInput) {
       return;
@@ -705,7 +666,7 @@ export function ParameterField({
             }}
             disabled={isReceivingInput || disableForGithubConnection}
             onRefresh={() => {
-              void refreshSecrets();
+              void queryClient.invalidateQueries({ queryKey: ['secrets'] });
             }}
           />
 
@@ -817,34 +778,21 @@ function ArtifactSelector({
   onChange: (value: string | undefined) => void;
 }) {
   const [pickerOpen, setPickerOpen] = useState(false);
-  const [hasRequestedLibrary, setHasRequestedLibrary] = useState(false);
-  const fetchLibrary = useArtifactStore((state) => state.fetchLibrary);
-  const libraryLoading = useArtifactStore((state) => state.libraryLoading);
-  const libraryError = useArtifactStore((state) => state.libraryError);
-  const library = useArtifactStore((state) => state.library);
-  const runArtifacts = useArtifactStore((state) => state.runArtifacts);
-
-  useEffect(() => {
-    if (pickerOpen && !hasRequestedLibrary) {
-      setHasRequestedLibrary(true);
-      void fetchLibrary();
-    }
-  }, [pickerOpen, hasRequestedLibrary, fetchLibrary]);
+  const queryClient = useQueryClient();
+  const {
+    data: library = [],
+    isLoading: libraryLoading,
+    error: libraryQueryError,
+  } = useArtifactLibrary();
+  const libraryError = libraryQueryError?.message ?? null;
 
   const knownArtifacts = useMemo(() => {
     const map = new Map<string, ArtifactMetadata>();
     for (const artifact of library) {
       map.set(artifact.id, artifact);
     }
-    Object.values(runArtifacts).forEach((entry) => {
-      entry?.artifacts.forEach((artifact) => {
-        if (!map.has(artifact.id)) {
-          map.set(artifact.id, artifact);
-        }
-      });
-    });
     return map;
-  }, [library, runArtifacts]);
+  }, [library]);
 
   const selectedArtifact = value ? (knownArtifacts.get(value) ?? null) : null;
 
@@ -912,7 +860,7 @@ function ArtifactSelector({
         libraryLoading={libraryLoading}
         libraryError={libraryError}
         artifacts={library}
-        onRefresh={fetchLibrary}
+        onRefresh={() => queryClient.invalidateQueries({ queryKey: ['artifactLibrary'] })}
       />
     </div>
   );
diff --git a/frontend/src/components/workflow/ValidationDock.tsx b/frontend/src/components/workflow/ValidationDock.tsx
index 4688541c..461374d5 100644
--- a/frontend/src/components/workflow/ValidationDock.tsx
+++ b/frontend/src/components/workflow/ValidationDock.tsx
@@ -1,8 +1,8 @@
 import { useMemo, useState, useEffect } from 'react';
 import { AlertCircle, CheckCircle2, ChevronDown, ChevronUp, X } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { useSecretStore, type SecretStore } from '@/store/secretStore';
-import { useComponentStore } from '@/store/componentStore';
+import { useSecrets } from '@/hooks/queries/useSecretQueries';
+import { useComponents } from '@/hooks/queries/useComponentQueries';
 import { getNodeValidationWarnings } from '@/utils/connectionValidation';
 import type { Node, Edge } from 'reactflow';
 import type { NodeData, FrontendNodeData } from '@/schemas/node';
@@ -41,7 +41,14 @@ function useIsMobile(breakpoint = 768) {
 }
 
 export function ValidationDock({ nodes, edges, mode, onNodeClick }: ValidationDockProps) {
-  const { getComponent } = useComponentStore();
+  const { data: componentIndex } = useComponents();
+  const getComponent = (ref: string) => {
+    if (!componentIndex || !ref) return null;
+    if (componentIndex.byId[ref]) return componentIndex.byId[ref];
+    const idFromSlug = componentIndex.slugIndex[ref];
+    if (idFromSlug && componentIndex.byId[idFromSlug]) return componentIndex.byId[idFromSlug];
+    return null;
+  };
   const [isExpanded, setIsExpanded] = useState(false);
   const [isMobileSheetOpen, setIsMobileSheetOpen] = useState(false);
   const isMobile = useIsMobile();
@@ -49,7 +56,7 @@ export function ValidationDock({ nodes, edges, mode, onNodeClick }: ValidationDo
   // Only show validation in design mode
   const isDesignMode = mode === 'design';
 
-  const secrets = useSecretStore((state: SecretStore) => state.secrets);
+  const { data: secrets = [] } = useSecrets();
 
   const validationIssues = useMemo<ValidationIssue[]>(() => {
     if (!isDesignMode) return [];
@@ -82,7 +89,7 @@ export function ValidationDock({ nodes, edges, mode, onNodeClick }: ValidationDo
     });
 
     return issues;
-  }, [nodes, edges, getComponent, isDesignMode, secrets]);
+  }, [nodes, edges, componentIndex, isDesignMode, secrets]);
 
   const totalIssues = validationIssues.length;
   const hasIssues = totalIssues > 0;
diff --git a/frontend/src/components/workflow/WorkflowWebhooksPanel.tsx b/frontend/src/components/workflow/WorkflowWebhooksPanel.tsx
index a4fbab23..63020c35 100644
--- a/frontend/src/components/workflow/WorkflowWebhooksPanel.tsx
+++ b/frontend/src/components/workflow/WorkflowWebhooksPanel.tsx
@@ -1,12 +1,12 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useMemo } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { Loader2, Plus, X, Copy, Check, Globe } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
-import { api } from '@/services/api';
+import { useWebhooks } from '@/hooks/queries/useWebhookQueries';
 import type { WebhookConfiguration } from '@shipsec/shared';
 import { WebhookDetails } from './WebhookDetails';
-import { useApiKeyStore } from '@/store/apiKeyStore';
+import { useApiKeyUiStore } from '@/hooks/queries/useApiKeyQueries';
 import type { Node as ReactFlowNode } from 'reactflow';
 import type { FrontendNodeData } from '@/schemas/node';
 
@@ -35,39 +35,18 @@ export function WorkflowWebhooksSidebar({
 }: WorkflowWebhooksSidebarProps) {
   const navigate = useNavigate();
   const location = useLocation();
-  const { lastCreatedKey } = useApiKeyStore();
-  const [webhooks, setWebhooks] = useState<WebhookConfiguration[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
+  const lastCreatedKey = useApiKeyUiStore((state) => state.lastCreatedKey);
+  const { data: allWebhooks = [], isLoading, error: queryError } = useWebhooks();
+  const webhooks = useMemo(
+    () =>
+      workflowId
+        ? allWebhooks.filter((w: WebhookConfiguration) => w.workflowId === workflowId)
+        : [],
+    [allWebhooks, workflowId],
+  );
+  const error = queryError?.message ?? null;
   const [copiedId, setCopiedId] = useState<string | null>(null);
 
-  useEffect(() => {
-    const fetchWebhooks = async () => {
-      // Skip fetching if no workflowId (unsaved workflow)
-      if (!workflowId) {
-        setIsLoading(false);
-        setWebhooks([]);
-        return;
-      }
-
-      setIsLoading(true);
-      setError(null);
-      try {
-        const allWebhooks = await api.webhooks.list();
-        // Filter webhooks for this workflow
-        const filtered = allWebhooks.filter(
-          (w: WebhookConfiguration) => w.workflowId === workflowId,
-        );
-        setWebhooks(filtered);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load webhooks');
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchWebhooks();
-  }, [workflowId]);
-
   const handleCopy = async (text: string, id: string) => {
     try {
       await navigator.clipboard.writeText(text);
diff --git a/frontend/src/components/workflow/__tests__/WorkflowNode.text-block.test.tsx b/frontend/src/components/workflow/__tests__/WorkflowNode.text-block.test.tsx
index ceeaa6ad..130d919a 100644
--- a/frontend/src/components/workflow/__tests__/WorkflowNode.text-block.test.tsx
+++ b/frontend/src/components/workflow/__tests__/WorkflowNode.text-block.test.tsx
@@ -1,9 +1,7 @@
-import { describe, it, beforeEach, afterEach, expect } from 'bun:test';
+import { describe, it, afterEach, expect, mock } from 'bun:test';
 import { render, screen, cleanup } from '@testing-library/react';
 import { ReactFlowProvider } from 'reactflow';
 import { MemoryRouter } from 'react-router-dom';
-import { WorkflowNode } from '../WorkflowNode';
-import { useComponentStore } from '@/store/componentStore';
 
 const noopStorage = {
   getItem: () => null,
@@ -76,16 +74,24 @@ const textBlockMetadata = {
   examples: [],
 };
 
-describe('WorkflowNode – text block rendering', () => {
-  beforeEach(() => {
-    useComponentStore.setState({
-      components: { 'core.ui.text': textBlockMetadata },
+mock.module('@/hooks/queries/useComponentQueries', () => ({
+  useComponents: () => ({
+    data: {
+      byId: { 'core.ui.text': textBlockMetadata },
       slugIndex: { 'text-block': 'core.ui.text' },
-      loading: false,
-      error: null,
-    });
-  });
+    },
+    isLoading: false,
+    error: null,
+  }),
+  useComponent: () => ({ data: null }),
+  useAllComponents: () => ({ data: [] }),
+  getComponentFromCache: () => null,
+}));
 
+// Import WorkflowNode after mock.module so the mock is in place
+const { WorkflowNode } = await import('../WorkflowNode');
+
+describe('WorkflowNode – text block rendering', () => {
   afterEach(() => {
     cleanup();
   });
diff --git a/frontend/src/components/workflow/node/McpGroupServersDisplay.tsx b/frontend/src/components/workflow/node/McpGroupServersDisplay.tsx
index 03bef9f3..dd18e1df 100644
--- a/frontend/src/components/workflow/node/McpGroupServersDisplay.tsx
+++ b/frontend/src/components/workflow/node/McpGroupServersDisplay.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useState } from 'react';
+import { useMemo } from 'react';
 import { Wrench, CheckCircle2, AlertCircle, HelpCircle, Loader2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Badge } from '@/components/ui/badge';
-import { mcpGroupsApi, type McpGroupServerResponse } from '@/services/mcpGroupsApi';
+import { useMcpGroups, useMcpGroupServers } from '@/hooks/queries/useMcpGroupQueries';
 
 interface McpGroupServersDisplayProps {
   groupSlug: string;
@@ -20,29 +20,10 @@ export function McpGroupServersDisplay({
   enabledServers,
   position = 'top',
 }: McpGroupServersDisplayProps) {
-  const [servers, setServers] = useState<McpGroupServerResponse[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchGroupServers = async () => {
-      try {
-        setIsLoading(true);
-        const groups = await mcpGroupsApi.listGroups();
-        const group = groups.find((g) => g.slug === groupSlug);
-
-        if (group) {
-          const groupServers = await mcpGroupsApi.getGroupServers(group.id);
-          setServers(groupServers.filter((s) => s.enabled));
-        }
-      } catch (err) {
-        console.error('Failed to load group servers:', err);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchGroupServers();
-  }, [groupSlug]);
+  const { data: groups = [] } = useMcpGroups();
+  const group = useMemo(() => groups.find((g) => g.slug === groupSlug), [groups, groupSlug]);
+  const { data: rawServers = [], isLoading } = useMcpGroupServers(group?.id);
+  const servers = useMemo(() => rawServers.filter((s) => s.enabled), [rawServers]);
 
   // Filter to only enabled servers that are selected
   const selectedServers = servers.filter((s) => enabledServers.includes(s.serverId));
diff --git a/frontend/src/components/workflow/node/McpServersDisplay.tsx b/frontend/src/components/workflow/node/McpServersDisplay.tsx
index 020a047b..13ae635b 100644
--- a/frontend/src/components/workflow/node/McpServersDisplay.tsx
+++ b/frontend/src/components/workflow/node/McpServersDisplay.tsx
@@ -1,7 +1,7 @@
 import { Wrench, CheckCircle2, AlertCircle, HelpCircle } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Badge } from '@/components/ui/badge';
-import { useMcpServerStore } from '@/store/mcpServerStore';
+import { useMcpServers } from '@/hooks/queries/useMcpServerQueries';
 
 interface McpServersDisplayProps {
   enabledServers: string[];
@@ -20,7 +20,7 @@ export function McpServersDisplay({
   position = 'bottom',
   compact = true,
 }: McpServersDisplayProps) {
-  const { servers } = useMcpServerStore();
+  const { data: servers = [] } = useMcpServers();
 
   if (enabledServers.length === 0) {
     return null;
diff --git a/frontend/src/components/workflow/node/ParametersDisplay.tsx b/frontend/src/components/workflow/node/ParametersDisplay.tsx
index 73dbfdff..b8608a24 100644
--- a/frontend/src/components/workflow/node/ParametersDisplay.tsx
+++ b/frontend/src/components/workflow/node/ParametersDisplay.tsx
@@ -1,6 +1,6 @@
 import { KeyRound } from 'lucide-react';
 import { cn } from '@/lib/utils';
-import { useSecretStore } from '@/store/secretStore';
+import { useSecrets } from '@/hooks/queries/useSecretQueries';
 import { getSecretLabel } from '@/api/secrets';
 import type { ParametersDisplayProps } from './types';
 
@@ -13,7 +13,7 @@ export function ParametersDisplay({
   nodeParameters,
   position = 'bottom',
 }: ParametersDisplayProps) {
-  const secrets = useSecretStore((state) => state.secrets);
+  const { data: secrets = [] } = useSecrets();
 
   // Show required parameters and important select parameters (like mode)
   // Exclude nested parameters (those with visibleWhen) like schemaType
diff --git a/frontend/src/components/workflow/node/WorkflowNode.tsx b/frontend/src/components/workflow/node/WorkflowNode.tsx
index 796a5cd8..fffdec5d 100644
--- a/frontend/src/components/workflow/node/WorkflowNode.tsx
+++ b/frontend/src/components/workflow/node/WorkflowNode.tsx
@@ -24,7 +24,7 @@ import { cn } from '@/lib/utils';
 import { MarkdownView } from '@/components/ui/markdown';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
-import { useComponentStore } from '@/store/componentStore';
+import { useComponents } from '@/hooks/queries/useComponentQueries';
 import { useExecutionStore } from '@/store/executionStore';
 import { useExecutionTimelineStore, type NodeVisualState } from '@/store/executionTimelineStore';
 import { useWorkflowStore } from '@/store/workflowStore';
@@ -43,11 +43,11 @@ import {
   isCredentialInput,
 } from '@/utils/portUtils';
 import { WebhookDetails } from '../WebhookDetails';
-import { useApiKeyStore } from '@/store/apiKeyStore';
+import { useApiKeyUiStore } from '@/hooks/queries/useApiKeyQueries';
 import { API_V1_URL } from '@/services/api';
 import { useNavigate, useParams } from 'react-router-dom';
 import { useEntryPointActions } from '../entry-point-context';
-import { useSecretStore } from '@/store/secretStore';
+import { useSecrets } from '@/hooks/queries/useSecretQueries';
 import { getSecretLabel } from '@/api/secrets';
 import { useIsMobile } from '@/hooks/useIsMobile';
 
@@ -79,8 +79,15 @@ const TOOL_MODE_ONLY_COMPONENTS = new Set([
  */
 export const WorkflowNode = ({ data, selected, id }: NodeProps<NodeData>) => {
   // Store hooks
-  const { getComponent, loading } = useComponentStore();
-  const secrets = useSecretStore((state) => state.secrets);
+  const { data: componentIndex, isLoading: loading } = useComponents();
+  const getComponent = (ref: string) => {
+    if (!componentIndex || !ref) return null;
+    if (componentIndex.byId[ref]) return componentIndex.byId[ref];
+    const idFromSlug = componentIndex.slugIndex[ref];
+    if (idFromSlug && componentIndex.byId[idFromSlug]) return componentIndex.byId[idFromSlug];
+    return null;
+  };
+  const { data: secrets = [] } = useSecrets();
   const { getNodes, getEdges, setNodes, deleteElements } = useReactFlow();
   const updateNodeInternals = useUpdateNodeInternals();
   const { nodeStates, selectedRunId, selectNode, isPlaying, playbackMode, isLiveFollowing } =
@@ -91,7 +98,7 @@ export const WorkflowNode = ({ data, selected, id }: NodeProps<NodeData>) => {
   const prefetchTerminal = useExecutionStore((state) => state.prefetchTerminal);
   const terminalSession = useExecutionStore((state) => state.getTerminalSession(id, 'pty'));
   const theme = useThemeStore((state) => state.theme);
-  const { lastCreatedKey } = useApiKeyStore();
+  const lastCreatedKey = useApiKeyUiStore((state) => state.lastCreatedKey);
   // @ts-expect-error - FIXME: Check actual store structure
   const workflowIdFromStore = useWorkflowStore((state) => state.workflow?.id);
   const {
@@ -147,7 +154,7 @@ export const WorkflowNode = ({ data, selected, id }: NodeProps<NodeData>) => {
   // Cast to access extended frontend fields
   const nodeData = data as FrontendNodeData;
   const componentRef: string | undefined = nodeData.componentId ?? nodeData.componentSlug;
-  const component = getComponent(componentRef);
+  const component = componentRef ? getComponent(componentRef) : null;
   const isTextBlock = component?.id === 'core.ui.text';
   const isEntryPoint = component?.id === 'core.workflow.entrypoint';
   const isDarkMode = theme === 'dark';
diff --git a/frontend/src/features/command-palette/CommandPalette.tsx b/frontend/src/features/command-palette/CommandPalette.tsx
index 61f15963..a9742001 100644
--- a/frontend/src/features/command-palette/CommandPalette.tsx
+++ b/frontend/src/features/command-palette/CommandPalette.tsx
@@ -4,11 +4,11 @@ import * as LucideIcons from 'lucide-react';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 import { useCommandPaletteStore } from '@/store/commandPaletteStore';
 import { useThemeStore } from '@/store/themeStore';
-import { useComponentStore } from '@/store/componentStore';
+import { useComponents } from '@/hooks/queries/useComponentQueries';
+import { useWorkflowsList } from '@/hooks/queries/useWorkflowQueries';
 import { useWorkflowUiStore } from '@/store/workflowUiStore';
 import { useWorkflowStore } from '@/store/workflowStore';
 import { usePlacementStore } from '@/components/layout/sidebar-state';
-import { api } from '@/services/api';
 import { cn } from '@/lib/utils';
 import {
   Workflow,
@@ -28,7 +28,6 @@ import {
   Puzzle,
 } from 'lucide-react';
 import { env } from '@/config/env';
-import type { WorkflowMetadataNormalized } from '@/schemas/workflow';
 import { WorkflowMetadataSchema } from '@/schemas/workflow';
 import type { ComponentMetadata } from '@/schemas/component';
 
@@ -90,15 +89,12 @@ export function CommandPalette() {
   const navigate = useNavigate();
   const location = useLocation();
   const { theme, startTransition } = useThemeStore();
-  const { fetchComponents, loading: componentsLoading } = useComponentStore();
-  // Subscribe to components from store to trigger re-renders when they load
-  const storeComponents = useComponentStore((state) => state.components);
+  const { data: componentIndex, isLoading: componentsLoading } = useComponents();
+  const storeComponents = componentIndex?.byId ?? {};
   const mode = useWorkflowUiStore((state) => state.mode);
+  const { data: rawWorkflows = [], isLoading: isLoadingWorkflows } = useWorkflowsList();
   const [query, setQuery] = useState('');
   const [selectedIndex, setSelectedIndex] = useState(0);
-  const [workflows, setWorkflows] = useState<WorkflowMetadataNormalized[]>([]);
-  const [isLoadingWorkflows, setIsLoadingWorkflows] = useState(false);
-  const [componentsFetched, setComponentsFetched] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
 
@@ -120,34 +116,12 @@ export function CommandPalette() {
     }
   }, [isOpen]);
 
-  // Load workflows when palette opens
-  useEffect(() => {
-    if (isOpen && workflows.length === 0) {
-      setIsLoadingWorkflows(true);
-      api.workflows
-        .list()
-        .then((data) => {
-          const normalized = data.map((w) => WorkflowMetadataSchema.parse(w));
-          setWorkflows(normalized);
-        })
-        .catch(() => {
-          // Silent fail - workflows just won't appear in search
-        })
-        .finally(() => {
-          setIsLoadingWorkflows(false);
-        });
-    }
-  }, [isOpen, workflows.length]);
+  const workflows = useMemo(
+    () => rawWorkflows.map((w) => WorkflowMetadataSchema.parse(w)),
+    [rawWorkflows],
+  );
 
-  // Fetch components when palette opens (if not already fetched)
-  useEffect(() => {
-    if (isOpen && !componentsFetched && Object.keys(storeComponents).length === 0) {
-      setComponentsFetched(true);
-      fetchComponents().catch(() => {
-        // Silent fail
-      });
-    }
-  }, [isOpen, componentsFetched, storeComponents, fetchComponents]);
+  // Components are auto-fetched by useComponents() - no manual fetch needed
 
   // Get all components (filtered same as Sidebar)
   // Depend on storeComponents to re-render when they're loaded
diff --git a/frontend/src/features/workflow-builder/WorkflowBuilder.tsx b/frontend/src/features/workflow-builder/WorkflowBuilder.tsx
index eaecaf23..ec98a494 100644
--- a/frontend/src/features/workflow-builder/WorkflowBuilder.tsx
+++ b/frontend/src/features/workflow-builder/WorkflowBuilder.tsx
@@ -30,12 +30,14 @@ import { HistoryDebugger } from '@/features/workflow-builder/components/HistoryD
 import { useToast } from '@/components/ui/use-toast';
 import { useExecutionStore } from '@/store/executionStore';
 import { useWorkflowStore } from '@/store/workflowStore';
-import { useComponentStore } from '@/store/componentStore';
+import { useComponents } from '@/hooks/queries/useComponentQueries';
 import { useWorkflowUiStore } from '@/store/workflowUiStore';
 import { useExecutionTimelineStore } from '@/store/executionTimelineStore';
 import { useWorkflowExecutionLifecycle } from '@/features/workflow-builder/hooks/useWorkflowExecutionLifecycle';
 import { api, API_BASE_URL } from '@/services/api';
-import { useRunStore } from '@/store/runStore';
+import { getRunByIdFromCache } from '@/hooks/queries/useRunQueries';
+import { queryClient } from '@/lib/queryClient';
+import { queryKeys } from '@/lib/queryKeys';
 import {
   deserializeNodes,
   deserializeEdges,
@@ -150,8 +152,7 @@ function WorkflowBuilderContent() {
   } = useWorkflowUiStore();
 
   const selectedRunId = useExecutionTimelineStore((state) => state.selectedRunId);
-  const getRunById = useRunStore((state) => state.getRunById);
-  const selectedRun = selectedRunId ? getRunById(selectedRunId) : null;
+  const selectedRun = selectedRunId ? (getRunByIdFromCache(selectedRunId) ?? null) : null;
   const isMobile = useIsMobile();
 
   // Undo/redo history management
@@ -315,7 +316,14 @@ function WorkflowBuilderContent() {
     },
     [onEdgesChangeBase, markDirty, mode, captureSnapshot],
   );
-  const { getComponent } = useComponentStore();
+  const { data: componentIndex } = useComponents();
+  const getComponent = (ref: string) => {
+    if (!componentIndex || !ref) return null;
+    if (componentIndex.byId[ref]) return componentIndex.byId[ref];
+    const idFromSlug = componentIndex.slugIndex[ref];
+    if (idFromSlug && componentIndex.byId[idFromSlug]) return componentIndex.byId[idFromSlug];
+    return null;
+  };
   const createEntryPointNode = useCallback((): ReactFlowNode<FrontendNodeData> => {
     const component = getComponent(ENTRY_COMPONENT_ID);
     const slug = component?.slug ?? ENTRY_COMPONENT_SLUG;
@@ -371,10 +379,12 @@ function WorkflowBuilderContent() {
       workflowRoutePrefix: builderRoutePrefix,
     });
 
+  // Use route param `id` for queries — available immediately, unlike metadata.id
+  // which requires a useEffect cycle to propagate from route → store.
   const { mostRecentRunId, fetchRuns, resetHistoricalTracking } = useWorkflowExecutionLifecycle({
-    workflowId,
+    workflowId: isNewWorkflow ? 'new' : (id ?? null),
     metadata: {
-      id: metadata.id,
+      id: metadata.id ?? id ?? null,
       currentVersionId: metadata.currentVersionId,
     },
     routeRunId,
@@ -645,13 +655,18 @@ function WorkflowBuilderContent() {
         // Skip runs fetch entirely in design mode to avoid the slow /workflows/runs call
         // Runs will be fetched on-demand when the user switches to execution mode
         try {
-          const cachedRuns = useRunStore.getState().cache[workflow.id]?.runs;
+          const cachedRunsPage = queryClient.getQueryData<{ runs: any[]; hasMore: boolean }>(
+            queryKeys.runs.byWorkflow(workflow.id),
+          );
           const runs = openedInExecutionMode
-            ? (cachedRuns ??
+            ? (cachedRunsPage?.runs ??
               (await fetchRuns({ workflowId: workflow.id }).then(
-                () => useRunStore.getState().cache[workflow.id]?.runs ?? [],
+                () =>
+                  queryClient.getQueryData<{ runs: any[]; hasMore: boolean }>(
+                    queryKeys.runs.byWorkflow(workflow.id),
+                  )?.runs ?? [],
               )))
-            : (cachedRuns ?? []);
+            : (cachedRunsPage?.runs ?? []);
 
           if (runs && runs.length > 0) {
             const latestRun = runs[0];
diff --git a/frontend/src/features/workflow-builder/hooks/useDesignWorkflowPersistence.ts b/frontend/src/features/workflow-builder/hooks/useDesignWorkflowPersistence.ts
index c808cce5..c585a0ee 100644
--- a/frontend/src/features/workflow-builder/hooks/useDesignWorkflowPersistence.ts
+++ b/frontend/src/features/workflow-builder/hooks/useDesignWorkflowPersistence.ts
@@ -7,8 +7,11 @@ import { serializeWorkflowForCreate, serializeWorkflowForUpdate } from '@/utils/
 import { cloneNodes, cloneEdges, type GraphSnapshot } from './useWorkflowGraphControllers';
 import { track, Events } from '@/features/analytics/events';
 import { getNodeValidationWarnings } from '@/utils/connectionValidation';
-import { useComponentStore } from '@/store/componentStore';
-import { useSecretStore } from '@/store/secretStore';
+import { getComponentFromCache } from '@/hooks/queries/useComponentQueries';
+import { useSecrets } from '@/hooks/queries/useSecretQueries';
+import { queryClient } from '@/lib/queryClient';
+import { queryKeys } from '@/lib/queryKeys';
+import type { SecretSummary } from '@/schemas/secret';
 
 interface WorkflowMetadataShape {
   id: string | null;
@@ -85,17 +88,9 @@ export function useDesignWorkflowPersistence({
   const [lastSavedMetadata, setLastSavedMetadata] = useState<SavedMetadata | null>(null);
   const [hasGraphChanges, setHasGraphChanges] = useState(false);
   const [hasMetadataChanges, setHasMetadataChanges] = useState(false);
-  const secretsInitialized = useSecretStore((state) => state.initialized);
-  const secretsLoading = useSecretStore((state) => state.loading);
-  const fetchSecrets = useSecretStore((state) => state.fetchSecrets);
 
-  useEffect(() => {
-    if (!secretsInitialized && !secretsLoading) {
-      fetchSecrets().catch((error) => {
-        console.error('Failed to preload secrets:', error);
-      });
-    }
-  }, [fetchSecrets, secretsInitialized, secretsLoading]);
+  // Preload secrets via TanStack Query (replaces manual Zustand fetch)
+  useSecrets();
 
   useEffect(() => {
     const currentSignature = computeGraphSignature(designNodes, designEdges);
@@ -159,16 +154,16 @@ export function useDesignWorkflowPersistence({
         return;
       }
 
-      // --- NEW: VALIDATION CHECK ---
-      const getComponent = useComponentStore.getState().getComponent;
-      await useSecretStore.getState().fetchSecrets();
-      const secrets = useSecretStore.getState().secrets;
+      // --- VALIDATION CHECK ---
+      // Ensure secrets are fresh in TanStack Query cache
+      await queryClient.refetchQueries({ queryKey: queryKeys.secrets.all() });
+      const secrets = queryClient.getQueryData<SecretSummary[]>(queryKeys.secrets.all()) ?? [];
       const allIssues: string[] = [];
 
       designNodes.forEach((node) => {
         const nodeData = node.data as any;
         const componentRef = nodeData.componentId ?? nodeData.componentSlug;
-        const component = getComponent(componentRef);
+        const component = getComponentFromCache(componentRef);
 
         if (!component) return;
 
diff --git a/frontend/src/features/workflow-builder/hooks/useWorkflowExecutionLifecycle.ts b/frontend/src/features/workflow-builder/hooks/useWorkflowExecutionLifecycle.ts
index 32cb091d..0ec40d9d 100644
--- a/frontend/src/features/workflow-builder/hooks/useWorkflowExecutionLifecycle.ts
+++ b/frontend/src/features/workflow-builder/hooks/useWorkflowExecutionLifecycle.ts
@@ -5,7 +5,14 @@ import type { FrontendNodeData } from '@/schemas/node';
 import { api } from '@/services/api';
 import { deserializeNodes, deserializeEdges } from '@/utils/workflowSerializer';
 import { cloneNodes, cloneEdges, type GraphSnapshot } from './useWorkflowGraphControllers';
-import { useRunStore } from '@/store/runStore';
+import {
+  useWorkflowRuns,
+  upsertRunInCache,
+  getRunByIdFromCache,
+  invalidateRunsForWorkflow,
+} from '@/hooks/queries/useRunQueries';
+import { queryClient } from '@/lib/queryClient';
+import { queryKeys } from '@/lib/queryKeys';
 import { useExecutionTimelineStore } from '@/store/executionTimelineStore';
 import { useExecutionStore } from '@/store/executionStore';
 import { normalizeRunSummary, isRunLive } from '@/features/workflow-builder/utils/executionRuns';
@@ -75,12 +82,29 @@ export function useWorkflowExecutionLifecycle({
   setExecutionEdges,
   setExecutionDirty,
 }: UseWorkflowExecutionLifecycleOptions): UseWorkflowExecutionLifecycleResult {
-  const fetchRuns = useRunStore((state) => state.fetchRuns);
-  const refreshRuns = useRunStore((state) => state.refreshRuns);
-  const getRunById = useRunStore((state) => state.getRunById);
-  const upsertRun = useRunStore((state) => state.upsertRun);
-  const workflowCacheKey = workflowId ?? '__global__';
-  const workflowRuns = useRunStore((state) => state.cache[workflowCacheKey]?.runs ?? EMPTY_RUNS);
+  // TanStack Query: only enable fetching when in execution mode or navigating to a specific run.
+  // Use workflowId (from route param) rather than metadata.id (from store) to avoid a render
+  // cycle delay that leaves the query disabled on first mount.
+  const shouldFetchRuns =
+    Boolean(workflowId) && workflowId !== 'new' && (mode === 'execution' || Boolean(routeRunId));
+  const { data: runsPage, refetch: refetchRuns } = useWorkflowRuns(
+    shouldFetchRuns ? workflowId : undefined,
+  );
+  const workflowRuns = runsPage?.runs ?? EMPTY_RUNS;
+
+  // Provide a fetchRuns function that matches the old store API for external consumers
+  const fetchRuns = useCallback(async (params: { workflowId: string; force?: boolean }) => {
+    if (params.force) {
+      invalidateRunsForWorkflow(params.workflowId);
+    }
+    // Refetch the workflow-scoped query for the passed workflowId, not whatever
+    // query this hook instance is currently bound to (which may be global/disabled
+    // when in design mode).
+    return queryClient.refetchQueries({
+      queryKey: queryKeys.runs.byWorkflow(params.workflowId),
+    });
+  }, []);
+
   const [historicalVersionId, setHistoricalVersionId] = useState<string | null>(null);
   const prevRunIdRef = useRef<string | null>(null);
   const prevVersionIdRef = useRef<string | null>(null);
@@ -106,15 +130,9 @@ export function useWorkflowExecutionLifecycle({
       useExecutionTimelineStore.getState().reset();
       return;
     }
-
-    // Only fetch runs when in execution mode or navigating to a specific run.
-    // In design mode (the default when opening /workflows/:id), runs aren't
-    // needed — they'll be fetched on-demand when the user switches to the runs
-    // tab or executes the workflow.
-    if (mode === 'execution' || routeRunId) {
-      fetchRuns({ workflowId: metadata.id }).catch(() => undefined);
-    }
-  }, [fetchRuns, metadata.id, mode, routeRunId]);
+    // Run fetching is now handled by useWorkflowRuns via the `shouldFetchRuns` enabled flag.
+    // This effect only handles the timeline reset when metadata.id is cleared.
+  }, [metadata.id]);
 
   useEffect(() => {
     if (!metadata.id || !routeRunId) {
@@ -136,12 +154,13 @@ export function useWorkflowExecutionLifecycle({
     let cancelled = false;
 
     const ensureRouteRun = async () => {
-      let targetRun = getRunById(routeRunId);
+      let targetRun = getRunByIdFromCache(routeRunId);
 
       if (!targetRun) {
         try {
-          await refreshRuns(metadata.id!);
-          targetRun = getRunById(routeRunId);
+          invalidateRunsForWorkflow(metadata.id!);
+          await refetchRuns();
+          targetRun = getRunByIdFromCache(routeRunId);
         } catch (error) {
           console.error('Failed to refresh runs for route:', error);
         }
@@ -152,7 +171,7 @@ export function useWorkflowExecutionLifecycle({
           const runDetails = await api.executions.getRun(routeRunId);
           if (cancelled) return;
           const normalized = normalizeRunSummary(runDetails);
-          upsertRun(normalized);
+          upsertRunInCache(normalized);
           targetRun = normalized;
         } catch (error) {
           if (cancelled) return;
@@ -179,10 +198,15 @@ export function useWorkflowExecutionLifecycle({
       }
 
       // Mark as processed BEFORE calling selectRun to prevent loops
+      // and StrictMode double-fires
       lastProcessedRouteRunIdRef.current = routeRunId;
 
+      // Re-check cancelled after async work above (StrictMode cleanup may have fired)
+      if (cancelled) return;
+
       try {
         await selectRun(routeRunId, isRunLive(targetRun) ? 'live' : 'replay');
+        if (cancelled) return;
         setMode('execution');
         if (isRunLive(targetRun)) {
           useExecutionStore.getState().monitorRun(routeRunId, targetRun.workflowId);
@@ -201,10 +225,8 @@ export function useWorkflowExecutionLifecycle({
     builderRoutePrefix,
     metadata.id,
     navigate,
-    refreshRuns,
+    refetchRuns,
     routeRunId,
-    getRunById,
-    upsertRun,
     toast,
     setMode,
     selectRun,
@@ -251,7 +273,7 @@ export function useWorkflowExecutionLifecycle({
       return;
     }
 
-    let run = getRunById(targetRunId);
+    let run = getRunByIdFromCache(targetRunId);
     if (!run) {
       run = workflowRuns.find((candidate) => candidate.id === targetRunId);
     }
@@ -313,7 +335,7 @@ export function useWorkflowExecutionLifecycle({
           const runDetails = await api.executions.getRun(targetRunId);
           if (latestTargetRunIdRef.current !== targetRunId) return;
           runToUse = normalizeRunSummary(runDetails);
-          upsertRun(runToUse);
+          upsertRunInCache(runToUse);
         } catch (error) {
           if (latestTargetRunIdRef.current !== targetRunId) return;
           console.error('[VersionLoad] Failed to fetch run details:', error);
@@ -338,7 +360,7 @@ export function useWorkflowExecutionLifecycle({
           const runDetails = await api.executions.getRun(targetRunId);
           if (latestTargetRunIdRef.current !== targetRunId) return;
           runToUse = normalizeRunSummary(runDetails);
-          upsertRun(runToUse);
+          upsertRunInCache(runToUse);
         } catch (error) {
           if (latestTargetRunIdRef.current !== targetRunId) return;
           console.error('[VersionLoad] Failed to fetch run details for version resolution:', error);
@@ -442,8 +464,6 @@ export function useWorkflowExecutionLifecycle({
     executionLoadedSnapshotRef,
     preservedExecutionStateRef,
     setExecutionDirty,
-    getRunById,
-    upsertRun,
     toast,
   ]);
 
diff --git a/frontend/src/features/workflow-builder/hooks/useWorkflowImportExport.ts b/frontend/src/features/workflow-builder/hooks/useWorkflowImportExport.ts
index 28dbcaae..d7665339 100644
--- a/frontend/src/features/workflow-builder/hooks/useWorkflowImportExport.ts
+++ b/frontend/src/features/workflow-builder/hooks/useWorkflowImportExport.ts
@@ -13,8 +13,10 @@ import {
 import type { FrontendNodeData } from '@/schemas/node';
 import type { Node as ReactFlowNode, Edge as ReactFlowEdge } from 'reactflow';
 import { api } from '@/services/api';
-import { useSecretStore } from '@/store/secretStore';
-import { useComponentStore } from '@/store/componentStore';
+import { queryClient } from '@/lib/queryClient';
+import { queryKeys } from '@/lib/queryKeys';
+import { getComponentFromCache } from '@/hooks/queries/useComponentQueries';
+import type { SecretSummary } from '@/schemas/secret';
 interface WorkflowMetadataShape {
   id: string | null;
   name: string;
@@ -136,24 +138,19 @@ export function useWorkflowImportExport({
       // Validate secret references
       const removedSecrets: { param: string; node: string; secretId: string }[] = [];
       try {
-        await useSecretStore.getState().fetchSecrets();
-        const secrets = useSecretStore.getState().secrets;
+        await queryClient.refetchQueries({ queryKey: queryKeys.secrets.all() });
+        const secrets = queryClient.getQueryData<SecretSummary[]>(queryKeys.secrets.all()) ?? [];
         const secretIds = new Set(secrets.map((s) => s.id));
 
-        const componentStore = useComponentStore.getState();
-        if (Object.keys(componentStore.components).length === 0) {
-          await componentStore.fetchComponents();
-        }
-        const components = useComponentStore.getState().components;
+        // Ensure components are loaded in TanStack Query cache
+        await queryClient.refetchQueries({ queryKey: queryKeys.components.all() });
 
         resolvedNodes.forEach((node) => {
           const data = node.data as FrontendNodeData;
           const componentRef = data.componentId || data.componentSlug;
           if (!componentRef) return;
 
-          const component =
-            componentStore.getComponent(componentRef) ||
-            Object.values(components).find((c) => c.slug === componentRef);
+          const component = getComponentFromCache(componentRef);
 
           if (!component || !component.parameters) return;
 
diff --git a/frontend/src/features/workflow-builder/hooks/useWorkflowSchedules.ts b/frontend/src/features/workflow-builder/hooks/useWorkflowSchedules.ts
index 0ed5a36a..b3d13f9e 100644
--- a/frontend/src/features/workflow-builder/hooks/useWorkflowSchedules.ts
+++ b/frontend/src/features/workflow-builder/hooks/useWorkflowSchedules.ts
@@ -1,6 +1,8 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
 import type { WorkflowSchedule } from '@shipsec/shared';
 import { api } from '@/services/api';
+import { useSchedules } from '@/hooks/queries/useScheduleQueries';
+import { useQueryClient } from '@tanstack/react-query';
 
 type ToastVariant = 'default' | 'destructive' | 'warning' | 'success';
 
@@ -39,58 +41,22 @@ export function useWorkflowSchedules({
   workflowId,
   toast,
 }: UseWorkflowSchedulesOptions): UseWorkflowSchedulesResult {
-  const [schedules, setSchedules] = useState<WorkflowSchedule[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const queryClient = useQueryClient();
+  const {
+    data: schedules = [],
+    isLoading,
+    error: queryError,
+  } = useSchedules(workflowId ? { workflowId } : undefined);
+  const error = queryError?.message ?? null;
+
   const [scheduleEditorOpen, setScheduleEditorOpen] = useState(false);
   const [scheduleEditorMode, setScheduleEditorMode] = useState<'create' | 'edit'>('create');
   const [editingSchedule, setEditingSchedule] = useState<WorkflowSchedule | null>(null);
   const [schedulePanelExpanded, setSchedulePanelExpanded] = useState(false);
 
-  const lastFetchRef = useRef<{ workflowId: string; time: number } | null>(null);
-  const inflightRef = useRef<{ workflowId: string; promise: Promise<void> } | null>(null);
-
   const refreshSchedules = useCallback(async () => {
-    if (!workflowId) {
-      setSchedules([]);
-      setError(null);
-      return;
-    }
-    // Deduplicate: return inflight promise only if it's for the same workflowId
-    if (inflightRef.current && inflightRef.current.workflowId === workflowId) {
-      return inflightRef.current.promise;
-    }
-    // Skip if same workflowId was fetched within 5 seconds
-    const now = Date.now();
-    if (
-      lastFetchRef.current &&
-      lastFetchRef.current.workflowId === workflowId &&
-      now - lastFetchRef.current.time < 5000
-    ) {
-      return;
-    }
-    setIsLoading(true);
-    const promise = (async () => {
-      try {
-        const list = await api.schedules.list({ workflowId });
-        setSchedules(list);
-        setError(null);
-        lastFetchRef.current = { workflowId, time: Date.now() };
-      } catch (err) {
-        console.error('Failed to load workflow schedules', err);
-        setError(err instanceof Error ? err.message : 'Failed to load schedules');
-      } finally {
-        setIsLoading(false);
-        inflightRef.current = null;
-      }
-    })();
-    inflightRef.current = { workflowId, promise };
-    return promise;
-  }, [workflowId]);
-
-  useEffect(() => {
-    void refreshSchedules();
-  }, [refreshSchedules]);
+    await queryClient.invalidateQueries({ queryKey: ['schedules'] });
+  }, [queryClient]);
 
   const openScheduleDrawer = useCallback(
     (mode: 'create' | 'edit', schedule?: WorkflowSchedule | null) => {
@@ -110,16 +76,9 @@ export function useWorkflowSchedules({
   );
 
   const handleScheduleSaved = useCallback(
-    (schedule: WorkflowSchedule, _mode: 'create' | 'edit') => {
+    (_schedule: WorkflowSchedule, _mode: 'create' | 'edit') => {
       setScheduleEditorOpen(false);
       setEditingSchedule(null);
-      setSchedules((prev) => {
-        const exists = prev.find((item) => item.id === schedule.id);
-        if (exists) {
-          return prev.map((item) => (item.id === schedule.id ? schedule : item));
-        }
-        return [...prev, schedule];
-      });
       void refreshSchedules();
     },
     [refreshSchedules],
diff --git a/frontend/src/features/workflow-builder/utils/executionRuns.ts b/frontend/src/features/workflow-builder/utils/executionRuns.ts
index fa2cf206..5a2caded 100644
--- a/frontend/src/features/workflow-builder/utils/executionRuns.ts
+++ b/frontend/src/features/workflow-builder/utils/executionRuns.ts
@@ -1,6 +1,6 @@
 import { TERMINAL_STATUSES } from '@shipsec/shared';
 import type { ExecutionStatus } from '@/schemas/execution';
-import type { ExecutionRun } from '@/store/runStore';
+import type { ExecutionRun } from '@/hooks/queries/useRunQueries';
 
 /** @deprecated Use TERMINAL_STATUSES from @shipsec/shared instead */
 export const TERMINAL_RUN_STATUSES = TERMINAL_STATUSES;
diff --git a/frontend/src/hooks/README.md b/frontend/src/hooks/README.md
index ea48a14f..dce77d60 100644
--- a/frontend/src/hooks/README.md
+++ b/frontend/src/hooks/README.md
@@ -2,47 +2,54 @@
 
 Custom React hooks for reusable state logic and side effects.
 
-## Real-time Hooks
+## Query Hooks (`queries/`)
 
-- **useTerminalStream.ts** - Server-Sent Events for real-time terminal output
-- **useTimelineTerminalStream.ts** - Terminal playback synchronized to timeline position
-- **useWorkflowStream.ts** - WebSocket connections for live workflow status updates
-- **useEventStream.ts** - Execution event processing and timeline generation
+**All server-state data fetching uses TanStack Query hooks.** See `frontend/docs/state.md` for the full pattern.
 
-## API Hooks
+| File                       | Hooks                                                                                                                                    |
+| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `useComponentQueries.ts`   | `useComponents` — Component catalogue with slug/id index                                                                                 |
+| `useWorkflowQueries.ts`    | `useWorkflowsList`, `useWorkflowsSummary`, `useWorkflow`, `useWorkflowRuntimeInputs` — Workflow metadata, detail + inputs                |
+| `useScheduleQueries.ts`    | `useSchedules`, `useCreateSchedule`, `useUpdateSchedule`, `usePauseSchedule`, `useResumeSchedule`, `useRunSchedule`, `useDeleteSchedule` |
+| `useWebhookQueries.ts`     | `useWebhooks`, `useWebhook`, `useWebhookDeliveries`, `useCreateWebhook`, `useUpdateWebhook`, `useDeleteWebhook`                          |
+| `useSecretQueries.ts`      | `useSecrets` — Secret summaries                                                                                                          |
+| `useApiKeyQueries.ts`      | `useApiKeys` — API key management                                                                                                        |
+| `useMcpGroupQueries.ts`    | `useMcpGroups`, `useMcpGroupServers`, `useMcpGroupTemplates`, `useSyncMcpGroupTemplates`                                                 |
+| `useHumanInputQueries.ts`  | `useHumanInputs`, `useInvalidateHumanInputs` — Action center                                                                             |
+| `useExecutionQueries.ts`   | `useExecutionNodeIO`, `useExecutionResult`, `useExecutionRun` — Execution data                                                           |
+| `useRunQueries.ts`         | `useRuns`, `useRunDetail`                                                                                                                |
+| `useArtifactQueries.ts`    | `useArtifactLibrary`, `useRunArtifacts`                                                                                                  |
+| `useIntegrationQueries.ts` | `useIntegrationProviders`, `useIntegrationConnections`, `useProviderConfig`                                                              |
 
-- **useWorkflows.ts** - Workflow CRUD operations and caching
-- **useWorkflowRuns.ts** - Workflow run execution and status tracking
-- **useComponents.ts** - Component catalog and metadata
-- **useFiles.ts** - File upload, download, and management
-- **useSecrets.ts** - Secrets management and credential access
+### Adding a New Query Hook
 
-## UI Hooks
+1. Add query keys to `src/lib/queryKeys.ts`
+2. Create `src/hooks/queries/use<Domain>Queries.ts`
+3. Export `use<Domain>` for reads (wraps `useQuery`)
+4. Export `use<Action><Domain>` for writes (wraps `useMutation` + invalidates cache)
+5. Import and use in your component — never call `api.*` directly in components
 
-- **useDebounce.ts** - Input debouncing for search and filtering
-- **useLocalStorage.ts** - Local storage persistence
-- **useKeyboardShortcuts.ts** - Global keyboard shortcut handling
-- **useModal.ts** - Modal state management
-- **useToast.ts** - Toast notification system
+## Prefetch Hook
 
-## Real-time Data Flow
+- **usePrefetchOnIdle.ts** — Warms TanStack Query cache during browser idle time. Called once in `AppLayout`. Add high-traffic queries here for instant page loads.
 
-```typescript
-// Terminal streaming with timeline synchronization
-const { chunks, isConnected, error } = useTimelineTerminalStream(runId, timelinePosition);
+## Real-time Hooks
 
-// Live workflow status updates
-const { run, isRunning, progress } = useWorkflowStream(runId);
+- **useTerminalStream.ts** — Server-Sent Events for real-time terminal output
+- **useTimelineTerminalStream.ts** — Terminal playback synchronized to timeline position
+- **useWorkflowStream.ts** — WebSocket connections for live workflow status updates
+- **useEventStream.ts** — Execution event processing and timeline generation
+
+## UI Hooks
 
-// Event-driven timeline updates
-const { events, timeline } = useEventStream(runId);
-```
+- **useDebounce.ts** — Input debouncing for search and filtering
+- **useLocalStorage.ts** — Local storage persistence
+- **useKeyboardShortcuts.ts** — Global keyboard shortcut handling
 
 ## Best Practices
 
-- Implement proper cleanup in useEffect hooks
-- Handle connection errors and reconnection logic
-- Use React Query for API data synchronization
+- Use TanStack Query hooks for all API data — never `useState` + `useEffect` for fetching
+- Implement proper cleanup in useEffect hooks (real-time streams only)
+- Use `useMemo` to derive/filter/transform data from query hooks
 - Debounce user inputs to prevent excessive API calls
-- Implement loading and error states for all async operations
-- Use TypeScript generics for reusable hook logic
\ No newline at end of file
+- Use TypeScript generics for reusable hook logic
diff --git a/frontend/src/hooks/queries/useApiKeyQueries.ts b/frontend/src/hooks/queries/useApiKeyQueries.ts
new file mode 100644
index 00000000..b690a91b
--- /dev/null
+++ b/frontend/src/hooks/queries/useApiKeyQueries.ts
@@ -0,0 +1,74 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '@/services/api';
+import { queryKeys } from '@/lib/queryKeys';
+import type { components } from '@shipsec/backend-client';
+import { create } from 'zustand';
+
+type ApiKeyResponseDto = components['schemas']['ApiKeyResponseDto'];
+type CreateApiKeyDto = components['schemas']['CreateApiKeyDto'];
+type UpdateApiKeyDto = components['schemas']['UpdateApiKeyDto'];
+
+// Tiny Zustand store just for the ephemeral lastCreatedKey (client-only state)
+interface ApiKeyUiState {
+  lastCreatedKey: string | null;
+  setLastCreatedKey: (key: string | null) => void;
+  clearLastCreatedKey: () => void;
+}
+
+export const useApiKeyUiStore = create<ApiKeyUiState>((set) => ({
+  lastCreatedKey: null,
+  setLastCreatedKey: (key) => set({ lastCreatedKey: key }),
+  clearLastCreatedKey: () => set({ lastCreatedKey: null }),
+}));
+
+export function useApiKeys() {
+  return useQuery({
+    queryKey: queryKeys.apiKeys.all(),
+    queryFn: () => api.apiKeys.list(),
+    staleTime: 60_000,
+    select: (data: ApiKeyResponseDto[]) =>
+      [...data].sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()),
+  });
+}
+
+export function useCreateApiKey() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (input: CreateApiKeyDto) => api.apiKeys.create(input),
+    onSuccess: (created) => {
+      useApiKeyUiStore.getState().setLastCreatedKey(created.plainKey || null);
+      qc.invalidateQueries({ queryKey: queryKeys.apiKeys.all() });
+    },
+  });
+}
+
+export function useUpdateApiKey() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, input }: { id: string; input: UpdateApiKeyDto }) =>
+      api.apiKeys.update(id, input),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: queryKeys.apiKeys.all() });
+    },
+  });
+}
+
+export function useRevokeApiKey() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => api.apiKeys.revoke(id),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: queryKeys.apiKeys.all() });
+    },
+  });
+}
+
+export function useDeleteApiKey() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => api.apiKeys.delete(id),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: queryKeys.apiKeys.all() });
+    },
+  });
+}
diff --git a/frontend/src/hooks/queries/useArtifactQueries.ts b/frontend/src/hooks/queries/useArtifactQueries.ts
new file mode 100644
index 00000000..c6d3bb85
--- /dev/null
+++ b/frontend/src/hooks/queries/useArtifactQueries.ts
@@ -0,0 +1,56 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import type { ArtifactMetadata } from '@shipsec/shared';
+import { api, type ArtifactListFilters } from '@/services/api';
+import { queryKeys } from '@/lib/queryKeys';
+import { terminalStaleTime } from '@/hooks/queries/useRunQueries';
+
+export function useRunArtifacts(runId: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.artifacts.byRun(runId!),
+    queryFn: async () => {
+      const response = await api.executions.getArtifacts(runId!);
+      return response.artifacts ?? [];
+    },
+    enabled: !!runId,
+    staleTime: terminalStaleTime(runId ?? null, 30_000),
+  });
+}
+
+export function useArtifactLibrary(filters?: ArtifactListFilters) {
+  return useQuery({
+    queryKey: queryKeys.artifacts.library(filters as Record<string, unknown>),
+    queryFn: async () => {
+      const response = await api.artifacts.list(filters);
+      return (response.artifacts ?? []) as ArtifactMetadata[];
+    },
+    staleTime: 30_000,
+  });
+}
+
+export function useDownloadArtifact() {
+  return useMutation({
+    mutationFn: async ({ artifact, runId }: { artifact: ArtifactMetadata; runId?: string }) => {
+      const blob = runId
+        ? await api.executions.downloadArtifact(runId, artifact.id)
+        : await api.artifacts.download(artifact.id);
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = artifact.name || `artifact-${artifact.id}`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+    },
+  });
+}
+
+export function useDeleteArtifact() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (artifactId: string) => api.artifacts.delete(artifactId),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['artifactLibrary'] });
+    },
+  });
+}
diff --git a/frontend/src/hooks/queries/useComponentQueries.ts b/frontend/src/hooks/queries/useComponentQueries.ts
new file mode 100644
index 00000000..d711c752
--- /dev/null
+++ b/frontend/src/hooks/queries/useComponentQueries.ts
@@ -0,0 +1,97 @@
+import { useQuery } from '@tanstack/react-query';
+import { api } from '@/services/api';
+import { queryKeys } from '@/lib/queryKeys';
+import { queryClient } from '@/lib/queryClient';
+import { ComponentMetadata } from '@/schemas/component';
+
+interface ComponentIndex {
+  byId: Record<string, ComponentMetadata>;
+  slugIndex: Record<string, string>;
+}
+
+function buildIndexes(components: any[]): ComponentIndex {
+  const byId: Record<string, ComponentMetadata> = {};
+  const slugIndex: Record<string, string> = {};
+
+  components.forEach((component) => {
+    if (!component?.id || !component?.slug || !component?.name) return;
+
+    const metadata: ComponentMetadata = {
+      id: component.id,
+      slug: component.slug,
+      name: component.name,
+      version: component.version || '1.0.0',
+      type: component.type || 'process',
+      category: component.category || 'transform',
+      categoryConfig: component.categoryConfig || {
+        label: component.category || 'Other',
+        color: '#666',
+        description: '',
+        emoji: '\u{1F4E6}',
+        icon: 'Box',
+      },
+      description: component.description || '',
+      documentation: component.documentation || null,
+      documentationUrl: component.documentationUrl || null,
+      icon: component.icon || null,
+      logo: component.logo || null,
+      author: component.author || null,
+      isLatest: component.isLatest ?? true,
+      deprecated: component.deprecated ?? false,
+      example: component.example || null,
+      runner: component.runner || { kind: 'inline' },
+      inputs: component.inputs || [],
+      outputs: component.outputs || [],
+      parameters: component.parameters || [],
+      examples: component.examples || [],
+      toolProvider: component.toolProvider || null,
+      toolSchema: component.toolSchema ?? null,
+    };
+
+    byId[metadata.id] = metadata;
+    slugIndex[metadata.slug] = metadata.id;
+  });
+
+  return { byId, slugIndex };
+}
+
+/** Shared queryFn so prefetch and useComponents produce the same cache shape */
+export async function fetchComponentIndex(): Promise<ComponentIndex> {
+  const raw = await api.components.list();
+  return buildIndexes(raw);
+}
+
+export function useComponents() {
+  return useQuery({
+    queryKey: queryKeys.components.all(),
+    queryFn: fetchComponentIndex,
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
+}
+
+/** Get a component by ID or slug from the query cache */
+export function getComponentFromCache(ref?: string | null): ComponentMetadata | null {
+  const data = queryClient.getQueryData<ComponentIndex>(queryKeys.components.all());
+  if (!data || !ref) return null;
+  if (data.byId[ref]) return data.byId[ref];
+  const idFromSlug = data.slugIndex[ref];
+  if (idFromSlug && data.byId[idFromSlug]) return data.byId[idFromSlug];
+  return null;
+}
+
+/** Hook to get a single component by ref (ID or slug) */
+export function useComponent(ref?: string | null) {
+  const { data } = useComponents();
+  if (!data || !ref) return null;
+  if (data.byId[ref]) return data.byId[ref];
+  const idFromSlug = data.slugIndex[ref];
+  if (idFromSlug && data.byId[idFromSlug]) return data.byId[idFromSlug];
+  return null;
+}
+
+/** Hook to get all components as an array */
+export function useAllComponents() {
+  const { data } = useComponents();
+  return data ? Object.values(data.byId) : [];
+}
diff --git a/frontend/src/hooks/queries/useExecutionQueries.ts b/frontend/src/hooks/queries/useExecutionQueries.ts
new file mode 100644
index 00000000..8b8b60d9
--- /dev/null
+++ b/frontend/src/hooks/queries/useExecutionQueries.ts
@@ -0,0 +1,41 @@
+import { useQuery, skipToken } from '@tanstack/react-query';
+import { queryKeys } from '@/lib/queryKeys';
+import {
+  executionNodeIOOptions,
+  executionResultOptions,
+  executionRunOptions,
+} from '@/lib/executionQueryOptions';
+import { terminalStaleTime } from '@/hooks/queries/useRunQueries';
+
+export function useExecutionNodeIO(runId: string | null) {
+  const isTerminal = runId ? terminalStaleTime(runId, 10_000) === Infinity : false;
+  return useQuery({
+    ...(runId ? executionNodeIOOptions(runId, isTerminal) : {}),
+    queryKey: queryKeys.executions.nodeIO(runId ?? ''),
+    queryFn: runId ? executionNodeIOOptions(runId, isTerminal).queryFn : skipToken,
+    enabled: !!runId,
+    ...(!runId && { gcTime: 0 }),
+  });
+}
+
+export function useExecutionResult(runId: string | null) {
+  const isTerminal = runId ? terminalStaleTime(runId, 30_000) === Infinity : false;
+  return useQuery({
+    ...(runId ? executionResultOptions(runId, isTerminal) : {}),
+    queryKey: queryKeys.executions.result(runId ?? ''),
+    queryFn: runId ? executionResultOptions(runId, isTerminal).queryFn : skipToken,
+    enabled: !!runId,
+    ...(!runId && { gcTime: 0 }),
+  });
+}
+
+export function useExecutionRun(runId: string | null | undefined) {
+  const isTerminal = runId ? terminalStaleTime(runId, 30_000) === Infinity : false;
+  return useQuery({
+    ...(runId ? executionRunOptions(runId, isTerminal) : {}),
+    queryKey: queryKeys.executions.run(runId ?? ''),
+    queryFn: runId ? executionRunOptions(runId, isTerminal).queryFn : skipToken,
+    enabled: !!runId,
+    ...(!runId && { gcTime: 0 }),
+  });
+}
diff --git a/frontend/src/hooks/queries/useHumanInputQueries.ts b/frontend/src/hooks/queries/useHumanInputQueries.ts
new file mode 100644
index 00000000..a876a195
--- /dev/null
+++ b/frontend/src/hooks/queries/useHumanInputQueries.ts
@@ -0,0 +1,21 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { api } from '@/services/api';
+import { queryKeys } from '@/lib/queryKeys';
+
+interface HumanInputFilters {
+  status?: 'pending' | 'resolved' | 'expired' | 'cancelled';
+}
+
+export function useHumanInputs(filters?: HumanInputFilters) {
+  const apiFilters = { status: filters?.status };
+  return useQuery({
+    queryKey: queryKeys.humanInputs.all(apiFilters as Record<string, unknown>),
+    queryFn: () => api.humanInputs.list(apiFilters),
+    staleTime: 30_000,
+  });
+}
+
+export function useInvalidateHumanInputs() {
+  const qc = useQueryClient();
+  return () => qc.invalidateQueries({ queryKey: ['humanInputs'] });
+}
diff --git a/frontend/src/hooks/queries/useIntegrationQueries.ts b/frontend/src/hooks/queries/useIntegrationQueries.ts
new file mode 100644
index 00000000..9f70caa5
--- /dev/null
+++ b/frontend/src/hooks/queries/useIntegrationQueries.ts
@@ -0,0 +1,68 @@
+import { useQuery, useMutation, useQueryClient, skipToken } from '@tanstack/react-query';
+import { api } from '@/services/api';
+import { queryKeys } from '@/lib/queryKeys';
+import type { components } from '@shipsec/backend-client';
+
+type IntegrationProvider = components['schemas']['IntegrationProviderResponse'];
+type IntegrationConnection = components['schemas']['IntegrationConnectionResponse'];
+
+function sortProviders(providers: IntegrationProvider[]) {
+  return [...providers].sort((a, b) => a.name.localeCompare(b.name));
+}
+
+function sortConnections(connections: IntegrationConnection[]) {
+  return [...connections].sort((a, b) => a.providerName.localeCompare(b.providerName));
+}
+
+export function useIntegrationProviders() {
+  return useQuery({
+    queryKey: queryKeys.integrations.providers(),
+    queryFn: () => api.integrations.listProviders(),
+    staleTime: Infinity,
+    gcTime: Infinity,
+    select: sortProviders,
+  });
+}
+
+export function useIntegrationConnections(userId: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.integrations.connections(userId),
+    queryFn: () => api.integrations.listConnections(userId!),
+    enabled: !!userId,
+    staleTime: 60_000,
+    select: sortConnections,
+  });
+}
+
+export function useProviderConfig(providerId: string | undefined, enabled = true) {
+  const isEnabled = !!providerId && enabled;
+  return useQuery({
+    queryKey: queryKeys.integrations.providerConfig(providerId || ''),
+    queryFn: isEnabled ? () => api.integrations.getProviderConfig(providerId!) : skipToken,
+    enabled: isEnabled,
+    staleTime: 30_000,
+    ...(isEnabled ? {} : { gcTime: 0 }),
+  });
+}
+
+export function useRefreshConnection() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, userId }: { id: string; userId: string }) =>
+      api.integrations.refreshConnection(id, userId),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['integrationConnections'] });
+    },
+  });
+}
+
+export function useDisconnectIntegration() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, userId }: { id: string; userId: string }) =>
+      api.integrations.disconnect(id, userId),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['integrationConnections'] });
+    },
+  });
+}
diff --git a/frontend/src/hooks/queries/useMcpGroupQueries.ts b/frontend/src/hooks/queries/useMcpGroupQueries.ts
new file mode 100644
index 00000000..d42e6c1b
--- /dev/null
+++ b/frontend/src/hooks/queries/useMcpGroupQueries.ts
@@ -0,0 +1,75 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { mcpGroupsApi } from '@/services/mcpGroupsApi';
+import { queryKeys } from '@/lib/queryKeys';
+
+export function useMcpGroups() {
+  return useQuery({
+    queryKey: queryKeys.mcpGroups.all(),
+    queryFn: () => mcpGroupsApi.listGroups(),
+    staleTime: 30_000,
+  });
+}
+
+/** Fetch groups with embedded servers — avoids N+1 per-group server queries */
+export function useMcpGroupsWithServers() {
+  return useQuery({
+    queryKey: [...queryKeys.mcpGroups.all(), 'withServers'] as const,
+    queryFn: () => mcpGroupsApi.listGroupsWithServers(),
+    staleTime: 30_000,
+  });
+}
+
+export function useMcpGroupServers(groupId: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.mcpGroups.servers(groupId!),
+    queryFn: () => mcpGroupsApi.getGroupServers(groupId!),
+    enabled: !!groupId,
+    staleTime: 30_000,
+  });
+}
+
+export function useDeleteMcpGroup() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (groupId: string) => mcpGroupsApi.deleteGroup(groupId),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: queryKeys.mcpGroups.all() });
+    },
+  });
+}
+
+export function useImportMcpGroupTemplate() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      slug,
+      serverCacheTokens,
+    }: {
+      slug: string;
+      serverCacheTokens?: Record<string, string>;
+    }) => mcpGroupsApi.importTemplate(slug, serverCacheTokens),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: queryKeys.mcpGroups.all() });
+      qc.invalidateQueries({ queryKey: queryKeys.mcpGroups.templates() });
+    },
+  });
+}
+
+export function useMcpGroupTemplates() {
+  return useQuery({
+    queryKey: queryKeys.mcpGroups.templates(),
+    queryFn: () => mcpGroupsApi.listTemplates(),
+    staleTime: Infinity,
+    gcTime: Infinity,
+  });
+}
+
+export function useSyncMcpGroupTemplates() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: () => mcpGroupsApi.syncTemplates(),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: queryKeys.mcpGroups.templates() });
+    },
+  });
+}
diff --git a/frontend/src/hooks/queries/useMcpServerQueries.ts b/frontend/src/hooks/queries/useMcpServerQueries.ts
new file mode 100644
index 00000000..092deee4
--- /dev/null
+++ b/frontend/src/hooks/queries/useMcpServerQueries.ts
@@ -0,0 +1,211 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import type { CreateMcpServer, UpdateMcpServer } from '@shipsec/shared';
+import { getApiAuthHeaders, API_BASE_URL } from '@/services/api';
+import { mcpDiscoveryApi } from '@/services/mcpDiscoveryApi';
+import { queryKeys } from '@/lib/queryKeys';
+
+// Re-export types that consumers need
+export interface McpServerResponse {
+  id: string;
+  name: string;
+  description?: string | null;
+  transportType: 'http' | 'stdio';
+  endpoint?: string | null;
+  command?: string | null;
+  args?: string[] | null;
+  hasHeaders: boolean;
+  headerKeys?: string[] | null;
+  enabled: boolean;
+  healthCheckUrl?: string | null;
+  lastHealthCheck?: string | null;
+  lastHealthStatus?: import('@shipsec/shared').McpHealthStatus | null;
+  createdAt: string;
+  updatedAt: string;
+  groupId?: string | null;
+}
+
+export interface McpToolResponse {
+  id: string;
+  toolName: string;
+  description?: string | null;
+  inputSchema?: Record<string, unknown> | null;
+  serverId: string;
+  serverName: string;
+  enabled: boolean;
+  discoveredAt: string;
+}
+
+async function apiRequest<T>(path: string, options: RequestInit = {}): Promise<T> {
+  const headers = await getApiAuthHeaders();
+  const { signal, ...restOptions } = options;
+  const response = await fetch(`${API_BASE_URL}${path}`, {
+    ...restOptions,
+    signal,
+    headers: {
+      ...headers,
+      'Content-Type': 'application/json',
+      ...options.headers,
+    },
+  });
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ message: 'Request failed' }));
+    throw new Error(error.message || `Request failed: ${response.status}`);
+  }
+  if (response.status === 204) return undefined as T;
+  return response.json();
+}
+
+export function useMcpServers() {
+  return useQuery({
+    queryKey: queryKeys.mcpServers.all(),
+    queryFn: () => apiRequest<McpServerResponse[]>('/api/v1/mcp-servers'),
+    staleTime: 120_000,
+  });
+}
+
+export function useMcpAllTools() {
+  return useQuery({
+    queryKey: queryKeys.mcpServers.tools(),
+    queryFn: () => apiRequest<McpToolResponse[]>('/api/v1/mcp-servers/tools'),
+    staleTime: 120_000,
+  });
+}
+
+export function useCreateMcpServer() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (input: CreateMcpServer) =>
+      apiRequest<McpServerResponse>('/api/v1/mcp-servers', {
+        method: 'POST',
+        body: JSON.stringify(input),
+      }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: queryKeys.mcpServers.all() });
+    },
+  });
+}
+
+export function useUpdateMcpServer() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, input }: { id: string; input: UpdateMcpServer }) =>
+      apiRequest<McpServerResponse>(`/api/v1/mcp-servers/${id}`, {
+        method: 'PATCH',
+        body: JSON.stringify(input),
+      }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: queryKeys.mcpServers.all() });
+    },
+  });
+}
+
+export function useDeleteMcpServer() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => apiRequest(`/api/v1/mcp-servers/${id}`, { method: 'DELETE' }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: queryKeys.mcpServers.all() });
+      qc.invalidateQueries({ queryKey: queryKeys.mcpServers.tools() });
+    },
+  });
+}
+
+export function useToggleMcpServer() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) =>
+      apiRequest<McpServerResponse>(`/api/v1/mcp-servers/${id}/toggle`, {
+        method: 'POST',
+      }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: queryKeys.mcpServers.all() });
+    },
+  });
+}
+
+export function useTestMcpConnection() {
+  return useMutation({
+    mutationFn: (id: string) =>
+      apiRequest<{ success: boolean; message?: string; toolCount?: number }>(
+        `/api/v1/mcp-servers/${id}/test`,
+        { method: 'POST' },
+      ),
+  });
+}
+
+export function useFetchServerTools() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (serverId: string) =>
+      apiRequest<McpToolResponse[]>(`/api/v1/mcp-servers/${serverId}/tools`),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: queryKeys.mcpServers.tools() });
+    },
+  });
+}
+
+export function useToggleMcpTool() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ serverId, toolId }: { serverId: string; toolId: string }) =>
+      apiRequest<McpToolResponse>(`/api/v1/mcp-servers/${serverId}/tools/${toolId}/toggle`, {
+        method: 'POST',
+      }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: queryKeys.mcpServers.tools() });
+    },
+  });
+}
+
+export function useDiscoverMcpTools() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      serverId,
+      servers,
+      image,
+    }: {
+      serverId: string;
+      servers: McpServerResponse[];
+      image?: string;
+    }) => {
+      const server = servers.find((s) => s.id === serverId);
+      if (!server) throw new Error(`Server ${serverId} not found`);
+
+      const { workflowId } = await mcpDiscoveryApi.discover({
+        transport: server.transportType,
+        name: server.name,
+        endpoint: server.endpoint ?? undefined,
+        command: server.command ?? undefined,
+        args: server.args ?? undefined,
+        image,
+      });
+
+      const maxAttempts = 60;
+      const pollInterval = 1000;
+      for (let attempt = 0; attempt < maxAttempts; attempt++) {
+        const status = await mcpDiscoveryApi.getStatus(workflowId);
+        if (status.status === 'completed' && status.tools) {
+          return status.tools.map((tool) => ({
+            id: `${serverId}-${tool.name}`,
+            toolName: tool.name,
+            description: tool.description ?? null,
+            inputSchema: tool.inputSchema ?? null,
+            serverId,
+            serverName: server.name,
+            enabled: true,
+            discoveredAt: new Date().toISOString(),
+          })) as McpToolResponse[];
+        }
+        if (status.status === 'failed') {
+          throw new Error(status.error ?? 'Discovery failed');
+        }
+        await new Promise((resolve) => setTimeout(resolve, pollInterval));
+      }
+      throw new Error('Discovery timed out after 60 seconds');
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: queryKeys.mcpServers.tools() });
+    },
+  });
+}
diff --git a/frontend/src/hooks/queries/useRunQueries.ts b/frontend/src/hooks/queries/useRunQueries.ts
new file mode 100644
index 00000000..e87a22e8
--- /dev/null
+++ b/frontend/src/hooks/queries/useRunQueries.ts
@@ -0,0 +1,211 @@
+import { useQuery, skipToken } from '@tanstack/react-query';
+import { api } from '@/services/api';
+import { queryKeys } from '@/lib/queryKeys';
+import { queryClient } from '@/lib/queryClient';
+import type { ExecutionStatus } from '@/schemas/execution';
+import {
+  TERMINAL_STATUSES,
+  type ExecutionTriggerType,
+  type ExecutionInputPreview,
+} from '@shipsec/shared';
+
+export interface ExecutionRun {
+  id: string;
+  workflowId: string;
+  organizationId?: string;
+  workflowName: string;
+  status: ExecutionStatus;
+  startTime: string;
+  endTime?: string;
+  duration?: number;
+  nodeCount: number;
+  eventCount: number;
+  createdAt: string;
+  isLive: boolean;
+  workflowVersionId: string | null;
+  workflowVersion: number | null;
+  triggerType: ExecutionTriggerType;
+  triggerSource: string | null;
+  triggerLabel: string | null;
+  inputPreview: ExecutionInputPreview;
+  parentRunId?: string | null;
+  parentNodeRef?: string | null;
+}
+
+const INITIAL_LIMIT = 5;
+const LOAD_MORE_LIMIT = 20;
+
+const TRIGGER_LABELS: Record<ExecutionTriggerType, string> = {
+  manual: 'Manual run',
+  schedule: 'Scheduled run',
+  api: 'API run',
+  webhook: 'Webhook trigger',
+};
+
+const normalizeRun = (run: any): ExecutionRun => {
+  const startTime = typeof run.startTime === 'string' ? run.startTime : new Date().toISOString();
+  const rawEndTime = typeof run.endTime === 'string' ? run.endTime : undefined;
+  const status = (
+    typeof run.status === 'string' ? run.status.toUpperCase() : 'FAILED'
+  ) as ExecutionStatus;
+  const isActiveStatus = !TERMINAL_STATUSES.includes(status);
+
+  const derivedDuration =
+    typeof run.duration === 'number'
+      ? run.duration
+      : rawEndTime && !isActiveStatus
+        ? new Date(rawEndTime).getTime() - new Date(startTime).getTime()
+        : Math.max(0, Date.now() - new Date(startTime).getTime());
+
+  const triggerType = (run.triggerType as ExecutionTriggerType) ?? 'manual';
+  const triggerLabelRaw = typeof run.triggerLabel === 'string' ? run.triggerLabel.trim() : '';
+
+  return {
+    id: String(run.id ?? ''),
+    workflowId: String(run.workflowId ?? ''),
+    organizationId: typeof run.organizationId === 'string' ? run.organizationId : undefined,
+    workflowName: String(run.workflowName ?? 'Untitled workflow'),
+    status,
+    startTime,
+    endTime: rawEndTime,
+    duration: Number.isFinite(derivedDuration) ? derivedDuration : undefined,
+    nodeCount: typeof run.nodeCount === 'number' ? run.nodeCount : 0,
+    eventCount: typeof run.eventCount === 'number' ? run.eventCount : 0,
+    createdAt: startTime,
+    isLive: isActiveStatus,
+    workflowVersionId: typeof run.workflowVersionId === 'string' ? run.workflowVersionId : null,
+    workflowVersion: typeof run.workflowVersion === 'number' ? run.workflowVersion : null,
+    triggerType,
+    triggerSource: typeof run.triggerSource === 'string' ? run.triggerSource : null,
+    triggerLabel: triggerLabelRaw.length > 0 ? triggerLabelRaw : TRIGGER_LABELS[triggerType],
+    inputPreview: (run.inputPreview as ExecutionInputPreview) ?? {
+      runtimeInputs: {},
+      nodeOverrides: {},
+    },
+    parentRunId: typeof run.parentRunId === 'string' ? run.parentRunId : null,
+    parentNodeRef: typeof run.parentNodeRef === 'string' ? run.parentNodeRef : null,
+  };
+};
+
+const sortRuns = (runs: ExecutionRun[]): ExecutionRun[] =>
+  [...runs].sort((a, b) => new Date(b.startTime).getTime() - new Date(a.startTime).getTime());
+
+interface RunsPage {
+  runs: ExecutionRun[];
+  hasMore: boolean;
+}
+
+export function useWorkflowRuns(workflowId: string | null | undefined) {
+  const isEnabled = !!workflowId && workflowId !== 'new';
+
+  return useQuery({
+    queryKey: queryKeys.runs.byWorkflow(workflowId ?? ''),
+    ...(isEnabled ? {} : { gcTime: 0 }),
+    queryFn: isEnabled
+      ? async (): Promise<RunsPage> => {
+          // On refetch (e.g. polling), preserve the number of runs already loaded
+          // so that "Load more" results aren't lost when the query is invalidated.
+          const qk = queryKeys.runs.byWorkflow(workflowId);
+          const existing = queryClient.getQueryData<RunsPage>(qk);
+          const limit = existing ? Math.max(INITIAL_LIMIT, existing.runs.length) : INITIAL_LIMIT;
+          const response = await api.executions.listRuns({
+            limit,
+            workflowId,
+          });
+          const rawRuns = response.runs ?? [];
+          return {
+            runs: sortRuns(rawRuns.map(normalizeRun)),
+            hasMore: rawRuns.length >= limit,
+          };
+        }
+      : skipToken,
+    staleTime: 30_000,
+  });
+}
+
+export async function fetchMoreRuns(workflowId: string | null | undefined) {
+  const queryKey = workflowId ? queryKeys.runs.byWorkflow(workflowId) : queryKeys.runs.global();
+
+  const existing = queryClient.getQueryData<RunsPage>(queryKey);
+  if (!existing || !existing.hasMore) return;
+
+  const offset = existing.runs.length;
+  const response = await api.executions.listRuns({
+    limit: LOAD_MORE_LIMIT,
+    offset,
+    workflowId: workflowId ?? undefined,
+  });
+  const rawRuns = response.runs ?? [];
+  const normalized = rawRuns.map(normalizeRun);
+
+  queryClient.setQueryData<RunsPage>(queryKey, (old) => {
+    if (!old) return { runs: sortRuns(normalized), hasMore: rawRuns.length >= LOAD_MORE_LIMIT };
+    const existingIds = new Set(old.runs.map((r: ExecutionRun) => r.id));
+    const newRuns = normalized.filter((r: ExecutionRun) => !existingIds.has(r.id));
+    return {
+      runs: sortRuns([...old.runs, ...newRuns]),
+      hasMore: rawRuns.length >= LOAD_MORE_LIMIT,
+    };
+  });
+}
+
+/** Upsert a single run into all matching cache entries */
+export function upsertRunInCache(run: ExecutionRun) {
+  const upsert = (old: RunsPage | undefined): RunsPage => {
+    if (!old) return { runs: [run], hasMore: false };
+    const existingIndex = old.runs.findIndex((r) => r.id === run.id);
+    if (existingIndex === -1) {
+      return { ...old, runs: sortRuns([...old.runs, run]) };
+    }
+    const updated = [...old.runs];
+    updated[existingIndex] = { ...updated[existingIndex], ...run, status: run.status };
+    return { ...old, runs: sortRuns(updated) };
+  };
+
+  // Update workflow-scoped cache
+  const wfKey = queryKeys.runs.byWorkflow(run.workflowId);
+  if (queryClient.getQueryData(wfKey)) {
+    queryClient.setQueryData<RunsPage>(wfKey, upsert);
+  }
+
+  // Update global cache
+  const globalKey = queryKeys.runs.global();
+  if (queryClient.getQueryData(globalKey)) {
+    queryClient.setQueryData<RunsPage>(globalKey, upsert);
+  }
+
+  // Update detail cache
+  queryClient.setQueryData(queryKeys.runs.detail(run.id), run);
+}
+
+/** Invalidate all run queries for a workflow */
+export function invalidateRunsForWorkflow(workflowId: string) {
+  queryClient.invalidateQueries({ queryKey: queryKeys.runs.byWorkflow(workflowId) });
+  queryClient.invalidateQueries({ queryKey: queryKeys.runs.global() });
+}
+
+/**
+ * Returns Infinity if the run is in a terminal state (cached), otherwise defaultMs.
+ * Searches both detail cache AND list caches via getRunByIdFromCache.
+ */
+export function terminalStaleTime(runId: string | null | undefined, defaultMs: number): number {
+  if (!runId) return defaultMs;
+  const cached = getRunByIdFromCache(runId);
+  if (cached && TERMINAL_STATUSES.includes(cached.status)) return Infinity;
+  return defaultMs;
+}
+
+/** Get a run by ID from any cache entry */
+export function getRunByIdFromCache(runId: string): ExecutionRun | undefined {
+  // Check detail cache first
+  const detail = queryClient.getQueryData<ExecutionRun>(queryKeys.runs.detail(runId));
+  if (detail) return detail;
+
+  // Search through all run query caches
+  const queries = queryClient.getQueriesData<RunsPage>({ queryKey: ['runs'] });
+  for (const [, data] of queries) {
+    const found = data?.runs?.find((r) => r.id === runId);
+    if (found) return found;
+  }
+  return undefined;
+}
diff --git a/frontend/src/hooks/queries/useScheduleQueries.ts b/frontend/src/hooks/queries/useScheduleQueries.ts
new file mode 100644
index 00000000..3e67b4a3
--- /dev/null
+++ b/frontend/src/hooks/queries/useScheduleQueries.ts
@@ -0,0 +1,91 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import type { ScheduleStatus } from '@shipsec/shared';
+import { api } from '@/services/api';
+import { queryKeys } from '@/lib/queryKeys';
+
+type StatusFilter = ScheduleStatus | 'all';
+
+interface ScheduleQueryFilters {
+  workflowId?: string | null;
+  status?: StatusFilter;
+}
+
+function buildApiFilters(filters?: ScheduleQueryFilters) {
+  return {
+    workflowId: filters?.workflowId ?? undefined,
+    status:
+      filters?.status && filters.status !== 'all' ? (filters.status as ScheduleStatus) : undefined,
+  };
+}
+
+export function useSchedules(filters?: ScheduleQueryFilters) {
+  const apiFilters = buildApiFilters(filters);
+  return useQuery({
+    queryKey: queryKeys.schedules.all(apiFilters as Record<string, unknown>),
+    queryFn: () => api.schedules.list(apiFilters),
+    staleTime: 60_000,
+  });
+}
+
+export function usePauseSchedule() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => api.schedules.pause(id),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['schedules'] });
+    },
+  });
+}
+
+export function useResumeSchedule() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => api.schedules.resume(id),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['schedules'] });
+    },
+  });
+}
+
+export function useRunSchedule() {
+  return useMutation({
+    mutationFn: (id: string) => api.schedules.runNow(id),
+  });
+}
+
+export function useDeleteSchedule() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => api.schedules.delete(id),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['schedules'] });
+    },
+  });
+}
+
+export function useCreateSchedule() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (payload: Parameters<typeof api.schedules.create>[0]) =>
+      api.schedules.create(payload),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['schedules'] });
+    },
+  });
+}
+
+export function useUpdateSchedule() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      id,
+      payload,
+    }: {
+      id: string;
+      payload: Parameters<typeof api.schedules.update>[1];
+    }) => api.schedules.update(id, payload),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['schedules'] });
+    },
+  });
+}
diff --git a/frontend/src/hooks/queries/useSecretQueries.ts b/frontend/src/hooks/queries/useSecretQueries.ts
new file mode 100644
index 00000000..a4156133
--- /dev/null
+++ b/frontend/src/hooks/queries/useSecretQueries.ts
@@ -0,0 +1,61 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { api } from '@/services/api';
+import { queryKeys } from '@/lib/queryKeys';
+import type {
+  SecretSummary,
+  CreateSecretInput,
+  UpdateSecretInput,
+  RotateSecretInput,
+} from '@/schemas/secret';
+
+export function useSecrets() {
+  return useQuery({
+    queryKey: queryKeys.secrets.all(),
+    queryFn: () => api.secrets.list(),
+    staleTime: 5 * 60_000,
+    refetchOnWindowFocus: true,
+    select: (data: SecretSummary[]) => [...data].sort((a, b) => a.name.localeCompare(b.name)),
+  });
+}
+
+export function useCreateSecret() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (input: CreateSecretInput) => api.secrets.create(input),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: queryKeys.secrets.all() });
+    },
+  });
+}
+
+export function useUpdateSecret() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, input }: { id: string; input: UpdateSecretInput }) =>
+      api.secrets.update(id, input),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: queryKeys.secrets.all() });
+    },
+  });
+}
+
+export function useRotateSecret() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, input }: { id: string; input: RotateSecretInput }) =>
+      api.secrets.rotate(id, input),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: queryKeys.secrets.all() });
+    },
+  });
+}
+
+export function useDeleteSecret() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => api.secrets.delete(id),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: queryKeys.secrets.all() });
+    },
+  });
+}
diff --git a/frontend/src/hooks/queries/useWebhookQueries.ts b/frontend/src/hooks/queries/useWebhookQueries.ts
new file mode 100644
index 00000000..3d053b68
--- /dev/null
+++ b/frontend/src/hooks/queries/useWebhookQueries.ts
@@ -0,0 +1,96 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import type { WebhookConfiguration } from '@shipsec/shared';
+import { api } from '@/services/api';
+import { API_V1_URL, getApiAuthHeaders } from '@/services/api';
+import { queryKeys } from '@/lib/queryKeys';
+
+export function useWebhooks() {
+  return useQuery({
+    queryKey: queryKeys.webhooks.all(),
+    queryFn: () => api.webhooks.list(),
+    staleTime: 60_000,
+  });
+}
+
+export function useWebhook(id: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.webhooks.detail(id || ''),
+    queryFn: () => api.webhooks.get(id!),
+    enabled: !!id,
+    staleTime: 30_000,
+  });
+}
+
+export function useWebhookDeliveries(webhookId: string | undefined) {
+  return useQuery({
+    queryKey: ['webhookDeliveries', webhookId] as const,
+    queryFn: () => api.webhooks.listDeliveries(webhookId!),
+    enabled: !!webhookId,
+    staleTime: 60_000,
+  });
+}
+
+export function useDeleteWebhook() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => api.webhooks.delete(id),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['webhooks'] });
+    },
+  });
+}
+
+export function useCreateWebhook() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (payload: Partial<WebhookConfiguration>) => api.webhooks.create(payload),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['webhooks'] });
+    },
+  });
+}
+
+export function useUpdateWebhook() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, payload }: { id: string; payload: Partial<WebhookConfiguration> }) =>
+      api.webhooks.update(id, payload),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['webhooks'] });
+    },
+  });
+}
+
+export function useRegenerateWebhookPath() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async (id: string) => {
+      const headers = await getApiAuthHeaders();
+      const response = await fetch(`${API_V1_URL}/webhooks/configurations/${id}/regenerate-path`, {
+        method: 'POST',
+        headers: { ...headers, 'Content-Type': 'application/json' },
+      });
+      if (!response.ok) throw new Error('Failed to regenerate webhook path');
+      return response.json() as Promise<{ id: string; webhookPath: string; url: string }>;
+    },
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['webhooks'] });
+    },
+  });
+}
+
+export function useTestWebhookScript() {
+  return useMutation({
+    mutationFn: (dto: {
+      parsingScript: string;
+      testPayload: Record<string, unknown>;
+      testHeaders?: Record<string, string>;
+      webhookId?: string;
+    }) =>
+      api.webhooks.testScript({
+        script: dto.parsingScript,
+        payload: dto.testPayload,
+        headers: dto.testHeaders ?? {},
+      }),
+  });
+}
diff --git a/frontend/src/hooks/queries/useWorkflowQueries.ts b/frontend/src/hooks/queries/useWorkflowQueries.ts
new file mode 100644
index 00000000..6b4ad424
--- /dev/null
+++ b/frontend/src/hooks/queries/useWorkflowQueries.ts
@@ -0,0 +1,37 @@
+import { useQuery, skipToken } from '@tanstack/react-query';
+import { api } from '@/services/api';
+import { queryKeys } from '@/lib/queryKeys';
+
+export function useWorkflowsSummary() {
+  return useQuery({
+    queryKey: queryKeys.workflows.summary(),
+    queryFn: () => api.workflows.listSummary(),
+    staleTime: 60_000,
+  });
+}
+
+export function useWorkflowsList() {
+  return useQuery({
+    queryKey: queryKeys.workflows.list(),
+    queryFn: () => api.workflows.list(),
+    staleTime: 30_000,
+  });
+}
+
+export function useWorkflow(workflowId: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.workflows.detail(workflowId ?? ''),
+    queryFn: workflowId ? () => api.workflows.get(workflowId) : skipToken,
+    staleTime: 60_000,
+    ...(workflowId ? {} : { gcTime: 0 }),
+  });
+}
+
+export function useWorkflowRuntimeInputs(workflowId: string | undefined) {
+  return useQuery({
+    queryKey: queryKeys.workflows.runtimeInputs(workflowId ?? ''),
+    queryFn: workflowId ? () => api.workflows.getRuntimeInputs(workflowId) : skipToken,
+    staleTime: 30_000,
+    ...(workflowId ? {} : { gcTime: 0 }),
+  });
+}
diff --git a/frontend/src/hooks/usePrefetchOnIdle.ts b/frontend/src/hooks/usePrefetchOnIdle.ts
new file mode 100644
index 00000000..f0d47112
--- /dev/null
+++ b/frontend/src/hooks/usePrefetchOnIdle.ts
@@ -0,0 +1,44 @@
+import { useEffect } from 'react';
+import { queryClient } from '@/lib/queryClient';
+import { queryKeys } from '@/lib/queryKeys';
+import { api } from '@/services/api';
+import { fetchComponentIndex } from '@/hooks/queries/useComponentQueries';
+import { useAuth } from '@/auth/useAuth';
+
+/**
+ * Prefetch commonly-needed data during browser idle time.
+ * Place this once in AppLayout so data is warm before the user navigates.
+ */
+export function usePrefetchOnIdle() {
+  const { isAuthenticated } = useAuth();
+
+  useEffect(() => {
+    if (!isAuthenticated) return;
+
+    const prefetch = () => {
+      // Components – used on almost every workflow page
+      queryClient.prefetchQuery({
+        queryKey: queryKeys.components.all(),
+        queryFn: fetchComponentIndex,
+        staleTime: Infinity,
+        gcTime: Infinity,
+      });
+
+      // Workflows summary – used by schedules, webhooks, artifacts pages
+      queryClient.prefetchQuery({
+        queryKey: queryKeys.workflows.summary(),
+        queryFn: () => api.workflows.listSummary(),
+        staleTime: 60_000,
+      });
+    };
+
+    if (typeof window.requestIdleCallback === 'function') {
+      const id = window.requestIdleCallback(prefetch, { timeout: 5_000 });
+      return () => window.cancelIdleCallback(id);
+    }
+
+    // Fallback for browsers without requestIdleCallback
+    const timer = setTimeout(prefetch, 2_000);
+    return () => clearTimeout(timer);
+  }, [isAuthenticated]);
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b642dd89..9662f16f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -578,4 +576,11 @@ table tbody tr:hover {
 
 .animate-highlight-fade {
   animation: highlight-fade 2s ease-out;
+}
+
+/* Navigation progress bar animation */
+@keyframes nprogress-indeterminate {
+  0%   { transform: translateX(-100%); opacity: 1; }
+  60%  { transform: translateX(60%);   opacity: 1; }
+  100% { transform: translateX(100%);  opacity: 0; }
 }
\ No newline at end of file
diff --git a/frontend/src/lib/executionQueryOptions.ts b/frontend/src/lib/executionQueryOptions.ts
new file mode 100644
index 00000000..24bcf331
--- /dev/null
+++ b/frontend/src/lib/executionQueryOptions.ts
@@ -0,0 +1,87 @@
+import { queryOptions } from '@tanstack/react-query';
+import { api } from '@/services/api';
+import { queryKeys } from '@/lib/queryKeys';
+
+/**
+ * queryOptions() factories for execution endpoints.
+ *
+ * Consumable by both React hooks (useQuery) and imperative code
+ * (queryClient.fetchQuery) — same key = shared in-flight promise.
+ *
+ * NOTE: Logs are intentionally excluded. Log scrubbing produces moving
+ * time windows that create high-cardinality keys with poor cache reuse.
+ */
+
+// --- Polling-backed (staleTime: 0, retry: false) ---
+
+export const executionStatusOptions = (runId: string) =>
+  queryOptions({
+    queryKey: queryKeys.executions.status(runId),
+    queryFn: () => api.executions.getStatus(runId),
+    staleTime: 0,
+    gcTime: 30_000,
+    retry: false,
+  });
+
+export const executionTraceOptions = (runId: string) =>
+  queryOptions({
+    queryKey: queryKeys.executions.trace(runId),
+    queryFn: () => api.executions.getTrace(runId),
+    staleTime: 0,
+    gcTime: 30_000,
+    retry: false,
+  });
+
+// --- Timeline data (fetched once per loadTimeline, live updates via SSE) ---
+
+export const executionEventsOptions = (runId: string) =>
+  queryOptions({
+    queryKey: queryKeys.executions.events(runId),
+    queryFn: () => api.executions.getEvents(runId),
+    staleTime: 5_000,
+    gcTime: 30_000,
+    retry: false,
+  });
+
+export const executionDataFlowsOptions = (runId: string) =>
+  queryOptions({
+    queryKey: queryKeys.executions.dataFlows(runId),
+    queryFn: () => api.executions.getDataFlows(runId),
+    staleTime: 5_000,
+    gcTime: 30_000,
+    retry: false,
+  });
+
+// --- On-demand, cacheable ---
+
+export const executionTerminalChunksOptions = (runId: string, nodeRef: string, stream: string) =>
+  queryOptions({
+    queryKey: queryKeys.executions.terminalChunks(runId, nodeRef, stream),
+    queryFn: () => api.executions.getTerminalChunks(runId, { nodeRef, stream }),
+    staleTime: 10_000,
+    gcTime: 30_000,
+  });
+
+export const executionNodeIOOptions = (runId: string, isTerminal?: boolean) =>
+  queryOptions({
+    queryKey: queryKeys.executions.nodeIO(runId),
+    queryFn: () => api.executions.listNodeIO(runId),
+    staleTime: isTerminal ? Infinity : 10_000,
+    gcTime: isTerminal ? 10 * 60_000 : 30_000,
+  });
+
+export const executionResultOptions = (runId: string, isTerminal?: boolean) =>
+  queryOptions({
+    queryKey: queryKeys.executions.result(runId),
+    queryFn: () => api.executions.getResult(runId),
+    staleTime: isTerminal ? Infinity : 30_000,
+    gcTime: isTerminal ? 10 * 60_000 : 30_000,
+  });
+
+export const executionRunOptions = (runId: string, isTerminal?: boolean) =>
+  queryOptions({
+    queryKey: queryKeys.executions.run(runId),
+    queryFn: () => api.executions.getRun(runId),
+    staleTime: isTerminal ? Infinity : 30_000,
+    gcTime: isTerminal ? 10 * 60_000 : 30_000,
+  });
diff --git a/frontend/src/lib/prefetch-routes.ts b/frontend/src/lib/prefetch-routes.ts
new file mode 100644
index 00000000..c8fb2a85
--- /dev/null
+++ b/frontend/src/lib/prefetch-routes.ts
@@ -0,0 +1,42 @@
+/**
+ * Route chunk prefetching utility.
+ *
+ * Maps sidebar navigation paths to their dynamic import() calls (mirroring
+ * the React.lazy definitions in App.tsx). This pre-downloads the JS chunks
+ * so navigation feels instant.
+ */
+
+type PrefetchFn = () => void;
+
+const routePrefetchMap: Record<string, PrefetchFn> = {
+  '/': () => void import('@/pages/WorkflowList'),
+  '/schedules': () => void import('@/pages/SchedulesPage'),
+  '/webhooks': () => void import('@/pages/WebhooksPage'),
+  '/action-center': () => void import('@/pages/ActionCenterPage'),
+  '/integrations': () => void import('@/pages/IntegrationsManager'),
+  '/artifacts': () => void import('@/pages/ArtifactLibrary'),
+  '/secrets': () => void import('@/pages/SecretsManager'),
+  '/api-keys': () => void import('@/pages/ApiKeysManager'),
+  '/mcp-library': () => void import('@/pages/McpLibraryPage'),
+  '/analytics-settings': () => void import('@/pages/AnalyticsSettingsPage'),
+};
+
+/** Prefetch all sidebar route chunks during browser idle time. */
+export function prefetchIdleRoutes(): void {
+  const prefetch = () => {
+    Object.values(routePrefetchMap).forEach((fn) => fn());
+  };
+
+  if (typeof window.requestIdleCallback === 'function') {
+    window.requestIdleCallback(prefetch, { timeout: 10_000 });
+  } else {
+    setTimeout(prefetch, 3_000);
+  }
+}
+
+/** Prefetch a single route chunk on sidebar hover. */
+export function prefetchRoute(href: string): void {
+  const clean = href.split('?')[0];
+  const fn = routePrefetchMap[clean];
+  if (fn) fn();
+}
diff --git a/frontend/src/lib/queryClient.ts b/frontend/src/lib/queryClient.ts
new file mode 100644
index 00000000..482d4571
--- /dev/null
+++ b/frontend/src/lib/queryClient.ts
@@ -0,0 +1,11 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+      staleTime: 30_000,
+    },
+  },
+});
diff --git a/frontend/src/lib/queryKeys.ts b/frontend/src/lib/queryKeys.ts
new file mode 100644
index 00000000..ad0ce164
--- /dev/null
+++ b/frontend/src/lib/queryKeys.ts
@@ -0,0 +1,70 @@
+import { useAuthStore } from '@/store/authStore';
+
+const getOrgScope = () => useAuthStore.getState().organizationId || '__no-org__';
+const getUserScope = () => useAuthStore.getState().userId || '__no-user__';
+
+export const queryKeys = {
+  secrets: {
+    all: () => ['secrets', getOrgScope()] as const,
+    detail: (id: string) => ['secrets', getOrgScope(), id] as const,
+  },
+  components: {
+    all: () => ['components', getOrgScope()] as const,
+  },
+  runs: {
+    byWorkflow: (workflowId: string) => ['runs', getOrgScope(), workflowId] as const,
+    global: () => ['runs', getOrgScope(), '__global__'] as const,
+    detail: (runId: string) => ['runs', getOrgScope(), 'detail', runId] as const,
+  },
+  schedules: {
+    all: (filters?: Record<string, unknown>) => ['schedules', getOrgScope(), filters] as const,
+  },
+  mcpServers: {
+    all: () => ['mcpServers', getOrgScope()] as const,
+    tools: () => ['mcpServers', getOrgScope(), 'tools'] as const,
+  },
+  mcpGroups: {
+    all: () => ['mcpGroups', getOrgScope()] as const,
+    servers: (groupId: string) => ['mcpGroupServers', getOrgScope(), groupId] as const,
+    templates: () => ['mcpGroupTemplates', getOrgScope()] as const,
+  },
+  integrations: {
+    providers: () => ['integrationProviders', getOrgScope()] as const,
+    connections: (userId?: string) =>
+      ['integrationConnections', getOrgScope(), userId || getUserScope()] as const,
+    providerConfig: (providerId: string) => ['providerConfig', getOrgScope(), providerId] as const,
+  },
+  apiKeys: {
+    all: () => ['apiKeys', getOrgScope()] as const,
+  },
+  webhooks: {
+    all: (filters?: Record<string, unknown>) => ['webhooks', getOrgScope(), filters] as const,
+    detail: (id: string) => ['webhooks', getOrgScope(), id] as const,
+  },
+  artifacts: {
+    library: (filters?: Record<string, unknown>) =>
+      ['artifactLibrary', getOrgScope(), filters] as const,
+    byRun: (runId: string) => ['runArtifacts', getOrgScope(), runId] as const,
+  },
+  humanInputs: {
+    all: (filters?: Record<string, unknown>) => ['humanInputs', getOrgScope(), filters] as const,
+  },
+  executions: {
+    nodeIO: (runId: string) => ['executionNodeIO', getOrgScope(), runId] as const,
+    result: (runId: string) => ['executionResult', getOrgScope(), runId] as const,
+    run: (runId: string) => ['executionRun', getOrgScope(), runId] as const,
+    status: (runId: string) => ['executionStatus', getOrgScope(), runId] as const,
+    trace: (runId: string) => ['executionTrace', getOrgScope(), runId] as const,
+    events: (runId: string) => ['executionEvents', getOrgScope(), runId] as const,
+    dataFlows: (runId: string) => ['executionDataFlows', getOrgScope(), runId] as const,
+    terminalChunks: (runId: string, nodeRef: string, stream: string) =>
+      ['executionTerminal', getOrgScope(), runId, nodeRef, stream] as const,
+  },
+  workflows: {
+    list: () => ['workflows', getOrgScope()] as const,
+    summary: () => ['workflowsSummary', getOrgScope()] as const,
+    detail: (id: string) => ['workflow', getOrgScope(), id] as const,
+    runtimeInputs: (workflowId: string) =>
+      ['workflowRuntimeInputs', getOrgScope(), workflowId] as const,
+  },
+} as const;
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 3c7e7fea..74156fe4 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -4,7 +4,6 @@ import App from './App.tsx';
 import './index.css';
 import { PostHogProvider } from 'posthog-js/react';
 import posthog from 'posthog-js';
-import { initializeTimelineStore } from '@/store/executionTimelineStore';
 import { initializeTheme } from '@/store/themeStore';
 import { isAnalyticsEnabled } from '@/features/analytics/config';
 
@@ -35,9 +34,16 @@ if (hasPostHog) {
   });
 }
 
-initializeTimelineStore();
 initializeTheme();
 
+// Defer timeline store initialization — it's ~1000 lines and only needed for workflow executions.
+// setTimeout(0) defers past the synchronous render cycle but fires before user interaction.
+setTimeout(() => {
+  import('@/store/executionTimelineStore').then(({ initializeTimelineStore }) => {
+    initializeTimelineStore();
+  });
+}, 0);
+
 const appContent = hasPostHog ? (
   <PostHogProvider client={posthog}>
     <App />
diff --git a/frontend/src/pages/ActionCenterPage.tsx b/frontend/src/pages/ActionCenterPage.tsx
index 046020f6..dccc7234 100644
--- a/frontend/src/pages/ActionCenterPage.tsx
+++ b/frontend/src/pages/ActionCenterPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import {
@@ -21,7 +21,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { Skeleton } from '@/components/ui/skeleton';
 import { CheckCircle, XCircle, RefreshCw, Search, Clock, Zap, ExternalLink } from 'lucide-react';
 import { useToast } from '@/components/ui/use-toast';
-import { api } from '@/services/api';
+import { useHumanInputs, useInvalidateHumanInputs } from '@/hooks/queries/useHumanInputQueries';
 import { Dialog, DialogContent } from '@/components/ui/dialog';
 
 const STATUS_OPTIONS = [
@@ -87,38 +87,23 @@ import {
 
 export function ActionCenterPage() {
   const { toast } = useToast();
-  const [approvals, setApprovals] = useState<HumanInputRequest[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
   const [search, setSearch] = useState('');
   const [statusFilter, setStatusFilter] = useState<'all' | 'pending' | 'resolved' | 'expired'>(
     'pending',
   );
   const [actionState] = useState<Record<string, 'approve' | 'reject' | 'view'>>({});
 
+  const status = statusFilter === 'all' ? undefined : statusFilter;
+  const { data: rawApprovals = [], isLoading, error: queryError } = useHumanInputs({ status });
+  const approvals = rawApprovals as HumanInputRequest[];
+  const invalidateHumanInputs = useInvalidateHumanInputs();
+  const error = queryError?.message ?? null;
+
   // Resolve dialog state
   const [resolveDialogOpen, setResolveDialogOpen] = useState(false);
   const [resolveAction, setResolveAction] = useState<'approve' | 'reject' | 'view'>('approve');
   const [selectedApproval, setSelectedApproval] = useState<HumanInputRequest | null>(null);
 
-  const fetchApprovals = async () => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const status = statusFilter === 'all' ? undefined : statusFilter;
-      const data = await api.humanInputs.list({ status });
-      setApprovals(data as HumanInputRequest[]);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load approvals');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchApprovals();
-  }, [statusFilter]);
-
   const filteredApprovals = useMemo(() => {
     const query = search.trim().toLowerCase();
     return approvals.filter((approval) => {
@@ -143,7 +128,7 @@ export function ActionCenterPage() {
   };
 
   const handleRefresh = async () => {
-    await fetchApprovals();
+    await invalidateHumanInputs();
     toast({
       title: 'Requests refreshed',
       description: 'Latest status have been loaded.',
@@ -413,7 +398,7 @@ export function ActionCenterPage() {
                 initialAction={resolveAction}
                 onResolved={() => {
                   setResolveDialogOpen(false);
-                  fetchApprovals();
+                  invalidateHumanInputs();
                 }}
                 onCancel={() => setResolveDialogOpen(false)}
               />
diff --git a/frontend/src/pages/ApiKeysManager.tsx b/frontend/src/pages/ApiKeysManager.tsx
index 03f0b9e7..227f7a6f 100644
--- a/frontend/src/pages/ApiKeysManager.tsx
+++ b/frontend/src/pages/ApiKeysManager.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
@@ -21,7 +21,13 @@ import { Badge } from '@/components/ui/badge';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
 import { Copy, Trash2, ShieldOff, AlertTriangle } from 'lucide-react';
-import { useApiKeyStore } from '@/store/apiKeyStore';
+import {
+  useApiKeys,
+  useCreateApiKey,
+  useRevokeApiKey,
+  useDeleteApiKey,
+  useApiKeyUiStore,
+} from '@/hooks/queries/useApiKeyQueries';
 import { useAuthStore } from '@/store/authStore';
 import { hasAdminRole } from '@/utils/auth';
 import type { CreateApiKeyInput } from '@/schemas/apiKey';
@@ -63,15 +69,13 @@ export function ApiKeysManager() {
   const canManageKeys = hasAdminRole(roles);
   const isReadOnly = !canManageKeys;
 
-  const apiKeys = useApiKeyStore((state) => state.apiKeys);
-  const loading = useApiKeyStore((state) => state.loading);
-  const error = useApiKeyStore((state) => state.error);
-  const fetchApiKeys = useApiKeyStore((state) => state.fetchApiKeys);
-  const createApiKey = useApiKeyStore((state) => state.createApiKey);
-  const revokeApiKey = useApiKeyStore((state) => state.revokeApiKey);
-  const deleteApiKey = useApiKeyStore((state) => state.deleteApiKey);
-  const lastCreatedKey = useApiKeyStore((state) => state.lastCreatedKey);
-  const clearLastCreatedKey = useApiKeyStore((state) => state.clearLastCreatedKey);
+  const { data: apiKeys = [], isLoading: loading, error: apiKeysError } = useApiKeys();
+  const error = apiKeysError?.message ?? null;
+  const createApiKeyMutation = useCreateApiKey();
+  const revokeApiKeyMutation = useRevokeApiKey();
+  const deleteApiKeyMutation = useDeleteApiKey();
+  const lastCreatedKey = useApiKeyUiStore((state) => state.lastCreatedKey);
+  const clearLastCreatedKey = useApiKeyUiStore((state) => state.clearLastCreatedKey);
 
   const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [formState, setFormState] = useState<CreateApiKeyInput>(INITIAL_FORM);
@@ -86,10 +90,6 @@ export function ApiKeysManager() {
     target: ApiKeyResponseDto;
   } | null>(null);
 
-  useEffect(() => {
-    fetchApiKeys().catch(console.error);
-  }, [fetchApiKeys]);
-
   const handleCreateOpenChange = (open: boolean) => {
     setIsCreateOpen(open);
     if (!open) {
@@ -131,7 +131,7 @@ export function ApiKeysManager() {
     setIsSubmitting(true);
 
     try {
-      await createApiKey(formState);
+      await createApiKeyMutation.mutateAsync(formState);
       setSuccessMessage('API Key created successfully.');
       // Don't close dialog yet because we need to show the key
     } catch (err) {
@@ -146,10 +146,10 @@ export function ApiKeysManager() {
     if (!confirmAction) return;
     try {
       if (confirmAction.type === 'revoke') {
-        await revokeApiKey(confirmAction.target.id);
+        await revokeApiKeyMutation.mutateAsync(confirmAction.target.id);
         setSuccessMessage(`API Key "${confirmAction.target.name}" revoked.`);
       } else {
-        await deleteApiKey(confirmAction.target.id);
+        await deleteApiKeyMutation.mutateAsync(confirmAction.target.id);
         setSuccessMessage(`API Key "${confirmAction.target.name}" deleted.`);
       }
       setConfirmAction(null);
diff --git a/frontend/src/pages/ArtifactLibrary.tsx b/frontend/src/pages/ArtifactLibrary.tsx
index 1e1b2de1..fb47153e 100644
--- a/frontend/src/pages/ArtifactLibrary.tsx
+++ b/frontend/src/pages/ArtifactLibrary.tsx
@@ -1,8 +1,13 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Download, RefreshCw, Search, Copy, ExternalLink, Trash2 } from 'lucide-react';
-import { useArtifactStore } from '@/store/artifactStore';
-import { api } from '@/services/api';
+import {
+  useArtifactLibrary,
+  useDownloadArtifact,
+  useDeleteArtifact,
+} from '@/hooks/queries/useArtifactQueries';
+import { useWorkflowsSummary } from '@/hooks/queries/useWorkflowQueries';
+import { useQueryClient } from '@tanstack/react-query';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import type { ArtifactMetadata } from '@shipsec/shared';
@@ -28,50 +33,33 @@ const formatTimestamp = (value: string) => {
 
 export function ArtifactLibrary() {
   const [searchQuery, setSearchQuery] = useState('');
+  const queryClient = useQueryClient();
+
+  const searchFilter = searchQuery.trim() || undefined;
   const {
-    library,
-    libraryLoading,
-    libraryError,
-    fetchLibrary,
-    downloadArtifact,
-    downloading,
-    deleteArtifact,
-    deleting,
-  } = useArtifactStore();
-  const [copiedRemoteUri, setCopiedRemoteUri] = useState<string | null>(null);
-  const [workflows, setWorkflows] = useState<Record<string, string>>({});
+    data: library = [],
+    isLoading: libraryLoading,
+    error: libraryQueryError,
+  } = useArtifactLibrary(searchFilter ? { search: searchFilter } : undefined);
+  const libraryError = libraryQueryError?.message ?? null;
 
-  useEffect(() => {
-    const loadWorkflows = async () => {
-      try {
-        const list = await api.workflows.listSummary();
-        const map: Record<string, string> = {};
-        list.forEach((w) => {
-          if (w.id) map[w.id] = w.name;
-        });
-        setWorkflows(map);
-      } catch (err) {
-        console.error('Failed to load workflows', err);
-      }
-    };
-    loadWorkflows();
-  }, []);
+  const downloadArtifactMutation = useDownloadArtifact();
+  const deleteArtifactMutation = useDeleteArtifact();
+  const [copiedRemoteUri, setCopiedRemoteUri] = useState<string | null>(null);
 
-  useEffect(() => {
-    void fetchLibrary();
-  }, [fetchLibrary]);
+  const { data: workflowsRaw = [] } = useWorkflowsSummary();
+  const workflows: Record<string, string> = {};
+  workflowsRaw.forEach((w: any) => {
+    if (w.id) workflows[w.id] = w.name;
+  });
 
   const handleSearch = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    void fetchLibrary({
-      search: searchQuery.trim() || undefined,
-    });
+    queryClient.invalidateQueries({ queryKey: ['artifactLibrary'] });
   };
 
   const handleRefresh = () => {
-    void fetchLibrary({
-      search: searchQuery.trim() || undefined,
-    });
+    queryClient.invalidateQueries({ queryKey: ['artifactLibrary'] });
   };
 
   return (
@@ -161,9 +149,12 @@ export function ArtifactLibrary() {
                     key={artifact.id}
                     artifact={artifact}
                     workflowName={workflows[artifact.workflowId] || 'Unknown Workflow'}
-                    onDownload={() => downloadArtifact(artifact)}
-                    onDelete={() => deleteArtifact(artifact.id)}
-                    isDeleting={Boolean(deleting[artifact.id])}
+                    onDownload={() => downloadArtifactMutation.mutate({ artifact })}
+                    onDelete={() => deleteArtifactMutation.mutate(artifact.id)}
+                    isDeleting={
+                      deleteArtifactMutation.isPending &&
+                      deleteArtifactMutation.variables === artifact.id
+                    }
                     onCopyRemoteUri={async (uri: string) => {
                       try {
                         await navigator.clipboard.writeText(uri);
@@ -176,7 +167,7 @@ export function ArtifactLibrary() {
                       }
                     }}
                     copiedRemoteUri={copiedRemoteUri}
-                    isDownloading={Boolean(downloading[artifact.id])}
+                    isDownloading={downloadArtifactMutation.isPending}
                   />
                 ))}
               </tbody>
diff --git a/frontend/src/pages/IntegrationsManager.tsx b/frontend/src/pages/IntegrationsManager.tsx
index b7d2c6ae..e0c0fea8 100644
--- a/frontend/src/pages/IntegrationsManager.tsx
+++ b/frontend/src/pages/IntegrationsManager.tsx
@@ -26,7 +26,14 @@ import {
 } from 'lucide-react';
 
 import type { components } from '@shipsec/backend-client';
-import { useIntegrationStore } from '@/store/integrationStore';
+import {
+  useIntegrationProviders,
+  useIntegrationConnections,
+  useRefreshConnection,
+  useDisconnectIntegration,
+  useProviderConfig,
+} from '@/hooks/queries/useIntegrationQueries';
+import { useQueryClient } from '@tanstack/react-query';
 import { getCurrentUserId } from '@/lib/currentUser';
 import { api } from '@/services/api';
 import { env } from '@/config/env';
@@ -64,39 +71,30 @@ export function IntegrationsManager() {
   const navigate = useNavigate();
   const location = useLocation();
   const userId = getCurrentUserId();
-  const {
-    providers,
-    connections,
-    fetchProviders,
-    fetchConnections,
-    refreshConnection,
-    disconnect,
-    upsertConnection,
-    error,
-    resetError,
-    loadingProviders,
-    loadingConnections,
-  } = useIntegrationStore();
+  const queryClient = useQueryClient();
   const { toast } = useToast();
 
+  const {
+    data: providers = [],
+    isLoading: loadingProviders,
+    error: providersError,
+  } = useIntegrationProviders();
+  const {
+    data: connections = [],
+    isLoading: loadingConnections,
+    error: connectionsError,
+  } = useIntegrationConnections(userId);
+  const refreshConnectionMutation = useRefreshConnection();
+  const disconnectMutation = useDisconnectIntegration();
+
+  const error = providersError?.message ?? connectionsError?.message ?? null;
+
   const [configProvider, setConfigProvider] = useState<IntegrationProvider | null>(null);
   const [connectingProvider, setConnectingProvider] = useState<string | null>(null);
   const [refreshingConnectionId, setRefreshingConnectionId] = useState<string | null>(null);
   const [deletingConnectionId, setDeletingConnectionId] = useState<string | null>(null);
   const [customScopes, setCustomScopes] = useState<Record<string, string>>({});
 
-  useEffect(() => {
-    fetchProviders().catch((err) => {
-      console.error('Failed to load providers', err);
-    });
-  }, [fetchProviders]);
-
-  useEffect(() => {
-    fetchConnections(userId).catch((err) => {
-      console.error('Failed to load integrations', err);
-    });
-  }, [fetchConnections, userId]);
-
   useEffect(() => {
     if (!error) {
       return;
@@ -147,7 +145,7 @@ export function IntegrationsManager() {
   };
 
   const handleConnect = async (provider: IntegrationProvider) => {
-    resetError();
+    // errors are auto-managed by react-query
 
     if (!provider.isConfigured) {
       setConfigProvider(provider);
@@ -176,15 +174,15 @@ export function IntegrationsManager() {
   };
 
   const handleConfigureProvider = (provider: IntegrationProvider) => {
-    resetError();
+    // errors are auto-managed by react-query
     setConfigProvider(provider);
   };
 
   const handleRefresh = async (connection: IntegrationConnection) => {
-    resetError();
+    // errors are auto-managed by react-query
     setRefreshingConnectionId(connection.id);
     try {
-      await refreshConnection(connection.id, userId);
+      await refreshConnectionMutation.mutateAsync({ id: connection.id, userId });
       toast({
         title: 'Token refreshed',
         description: `${connection.providerName} token has been refreshed.`,
@@ -202,10 +200,10 @@ export function IntegrationsManager() {
   };
 
   const handleDisconnect = async (connection: IntegrationConnection) => {
-    resetError();
+    // errors are auto-managed by react-query
     setDeletingConnectionId(connection.id);
     try {
-      await disconnect(connection.id, userId);
+      await disconnectMutation.mutateAsync({ id: connection.id, userId });
       toast({
         title: 'Connection removed',
         description: `${connection.providerName} credentials have been deleted.`,
@@ -241,7 +239,7 @@ export function IntegrationsManager() {
   ) => {
     setConfigProvider(null);
 
-    fetchProviders().catch((err) => {
+    queryClient.invalidateQueries({ queryKey: ['integrationProviders'] }).catch((err) => {
       console.error('Failed to refresh providers', err);
     });
 
@@ -261,7 +259,7 @@ export function IntegrationsManager() {
   };
 
   const handleConnectionComplete = (connection: IntegrationConnection) => {
-    upsertConnection(connection);
+    queryClient.invalidateQueries({ queryKey: ['integrationConnections'] });
     toast({
       title: `${connection.providerName} connected`,
       description: 'Credentials stored successfully.',
@@ -594,7 +592,6 @@ interface ProviderConfigDialogProps {
 }
 
 function ProviderConfigDialog({ provider, open, onClose, onCompleted }: ProviderConfigDialogProps) {
-  const [loading, setLoading] = useState(false);
   const [saving, setSaving] = useState(false);
   const [clientId, setClientId] = useState('');
   const [clientSecret, setClientSecret] = useState('');
@@ -608,6 +605,14 @@ function ProviderConfigDialog({ provider, open, onClose, onCompleted }: Provider
     ? `${window.location.origin}/integrations/callback/${provider.id}`
     : '';
 
+  // --- Query hook for provider config (only fetches when dialog is open) ---
+  const {
+    data: configData,
+    isLoading: loading,
+    error: configError,
+  } = useProviderConfig(provider?.id, open);
+
+  // Reset form fields when dialog closes
   useEffect(() => {
     if (!open) {
       setClientSecret('');
@@ -615,50 +620,35 @@ function ProviderConfigDialog({ provider, open, onClose, onCompleted }: Provider
       setCopiedRedirect(false);
       return;
     }
-
-    if (!provider) {
-      return;
-    }
-
-    let cancelled = false;
-    setLoading(true);
+    // Reset fields when dialog opens with a new provider
     setError(null);
     setClientId('');
     setClientSecret('');
     setHasStoredSecret(false);
     setConfiguredBy('user');
     setUpdatedAt(null);
-
-    api.integrations
-      .getProviderConfig(provider.id)
-      .then((config) => {
-        if (cancelled) {
-          return;
-        }
-        setClientId(config.clientId ?? '');
-        setHasStoredSecret(config.hasClientSecret);
-        setConfiguredBy(config.configuredBy);
-        setUpdatedAt(config.updatedAt ?? null);
-      })
-      .catch((err) => {
-        if (cancelled) {
-          return;
-        }
-        const message =
-          err instanceof Error ? err.message : 'Failed to load provider configuration.';
-        setError(message);
-      })
-      .finally(() => {
-        if (!cancelled) {
-          setLoading(false);
-        }
-      });
-
-    return () => {
-      cancelled = true;
-    };
   }, [open, provider?.id]);
 
+  // Sync query data → local form state
+  useEffect(() => {
+    if (!configData || !open) return;
+    setClientId(configData.clientId ?? '');
+    setHasStoredSecret(configData.hasClientSecret);
+    setConfiguredBy(configData.configuredBy);
+    setUpdatedAt(configData.updatedAt ?? null);
+  }, [configData, open]);
+
+  // Propagate query error
+  useEffect(() => {
+    if (configError && open) {
+      const message =
+        configError instanceof Error
+          ? configError.message
+          : 'Failed to load provider configuration.';
+      setError(message);
+    }
+  }, [configError, open]);
+
   useEffect(() => {
     setCopiedRedirect(false);
   }, [callbackUrl]);
diff --git a/frontend/src/pages/McpLibraryPage.tsx b/frontend/src/pages/McpLibraryPage.tsx
index 685f60ce..1feb56f7 100644
--- a/frontend/src/pages/McpLibraryPage.tsx
+++ b/frontend/src/pages/McpLibraryPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState, useCallback } from 'react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import {
@@ -71,10 +71,27 @@ import {
   Loader2,
   CheckCircle,
 } from 'lucide-react';
-import { useMcpServerStore } from '@/store/mcpServerStore';
-import { useMcpGroupStore } from '@/store/mcpGroupStore';
+import { useQueryClient } from '@tanstack/react-query';
+import {
+  useMcpServers,
+  useMcpAllTools,
+  useCreateMcpServer,
+  useUpdateMcpServer,
+  useDeleteMcpServer,
+  useToggleMcpServer,
+  useTestMcpConnection,
+  useFetchServerTools,
+  useToggleMcpTool,
+  useDiscoverMcpTools,
+} from '@/hooks/queries/useMcpServerQueries';
+import { useMcpGroupsWithServers, useMcpGroupTemplates } from '@/hooks/queries/useMcpGroupQueries';
+import { queryKeys } from '@/lib/queryKeys';
 import { useToast } from '@/components/ui/use-toast';
-import { mcpGroupsApi, type McpGroupTemplateResponse } from '@/services/mcpGroupsApi';
+import {
+  mcpGroupsApi,
+  type McpGroupTemplateResponse,
+  type McpGroupServerResponse,
+} from '@/services/mcpGroupsApi';
 import { mcpDiscoveryApi } from '@/services/mcpDiscoveryApi';
 import type { McpHealthStatus, CreateMcpServer } from '@shipsec/shared';
 import { cn } from '@/lib/utils';
@@ -295,8 +312,7 @@ export function McpLibraryPage() {
   const [headerEntries, setHeaderEntries] = useState<HeaderEntry[]>([]);
   const [secretPickerEntryIndex, setSecretPickerEntryIndex] = useState<number | null>(null);
   const [discoveringServerIds, setDiscoveringServerIds] = useState<Set<string>>(new Set());
-  const [groupTemplates, setGroupTemplates] = useState<McpGroupTemplateResponse[]>([]);
-  const [isLoadingTemplates, setIsLoadingTemplates] = useState(false);
+  const { data: groupTemplates = [], isLoading: isLoadingTemplates } = useMcpGroupTemplates();
   const [importingTemplates, setImportingTemplates] = useState<Set<string>>(new Set());
   const [templatesOpen, setTemplatesOpen] = useState(true);
   const [templatesManuallyToggled, setTemplatesManuallyToggled] = useState(false);
@@ -324,71 +340,30 @@ export function McpLibraryPage() {
     error?: string;
   } | null>(null);
 
-  const {
-    servers,
-    tools,
-    isLoading,
-    error,
-    fetchServers,
-    createServer,
-    updateServer,
-    deleteServer,
-    toggleServer,
-    testConnection,
-    fetchServerTools,
-    fetchAllTools,
-    discoverTools,
-    toggleTool,
-  } = useMcpServerStore();
-
-  const { groups, fetchGroups, fetchGroupServers, getGroupServers } = useMcpGroupStore();
-
-  useEffect(() => {
-    fetchServers();
-    fetchAllTools();
-    fetchGroups();
-  }, [fetchServers, fetchAllTools, fetchGroups]);
-
-  useEffect(() => {
-    let isMounted = true;
-
-    const loadTemplates = async () => {
-      setIsLoadingTemplates(true);
-      try {
-        const templates = await mcpGroupsApi.listTemplates();
-        if (isMounted) {
-          setGroupTemplates(templates);
-        }
-      } catch (error) {
-        if (isMounted) {
-          toast({
-            title: 'Failed to load group templates',
-            description:
-              error instanceof Error ? error.message : 'Could not fetch available groups.',
-            variant: 'destructive',
-          });
-        }
-      } finally {
-        if (isMounted) {
-          setIsLoadingTemplates(false);
-        }
-      }
-    };
-
-    loadTemplates();
+  const queryClient = useQueryClient();
+  const { data: servers = [], isLoading, error: serversError } = useMcpServers();
+  const { data: tools = [] } = useMcpAllTools();
+  const error = serversError?.message ?? null;
+  const { data: groups = [] } = useMcpGroupsWithServers();
+
+  // Mutation hooks
+  const createServerMutation = useCreateMcpServer();
+  const updateServerMutation = useUpdateMcpServer();
+  const deleteServerMutation = useDeleteMcpServer();
+  const toggleServerMutation = useToggleMcpServer();
+  const testConnectionMutation = useTestMcpConnection();
+  const fetchServerToolsMutation = useFetchServerTools();
+  const toggleToolMutation = useToggleMcpTool();
+  const discoverToolsMutation = useDiscoverMcpTools();
+
+  const getGroupServers = useCallback(
+    (groupId: string): McpGroupServerResponse[] => {
+      return groups.find((g) => g.id === groupId)?.servers ?? [];
+    },
+    [groups],
+  );
 
-    return () => {
-      isMounted = false;
-    };
-  }, [toast]);
-
-  useEffect(() => {
-    if (groups.length > 0) {
-      groups.forEach((group) => {
-        fetchGroupServers(group.id);
-      });
-    }
-  }, [groups, fetchGroupServers]);
+  // Templates are now fetched via useMcpGroupTemplates() hook above.
 
   // Default: show templates when no groups are installed; collapse when groups exist.
   useEffect(() => {
@@ -412,15 +387,11 @@ export function McpLibraryPage() {
 
   // Populate header entries when editing a server
   useEffect(() => {
-    if (editingServer) {
-      const server = servers.find((s) => s.id === editingServer);
-      if (server?.headerKeys && server.headerKeys.length > 0) {
-        setHeaderEntries(server.headerKeys.map((key) => ({ key, value: '' })));
-      } else {
-        setHeaderEntries([]);
-      }
+    if (!editingServer) return;
+    const server = servers.find((s) => s.id === editingServer);
+    if (server?.headerKeys && server.headerKeys.length > 0) {
+      setHeaderEntries(server.headerKeys.map((key) => ({ key, value: '' })));
     } else {
-      // Reset when creating new server
       setHeaderEntries([]);
     }
   }, [editingServer, servers]);
@@ -807,14 +778,14 @@ export function McpLibraryPage() {
       if (editingServer) {
         // Mark as checking BEFORE the update to prevent "Unknown" flash
         setCheckingServers((prev) => new Set([...prev, editingServer]));
-        await updateServer(editingServer, payload);
+        await updateServerMutation.mutateAsync({ id: editingServer, input: payload });
         // Run health check after update to refresh status and tools
-        testConnection(editingServer)
+        testConnectionMutation
+          .mutateAsync(editingServer)
           .then(async () => {
-            // Fetch all tools after health check to update tool counts
-            await fetchAllTools();
-            // Refresh health status in store before clearing checking state
-            await fetchServers();
+            // Invalidate queries to refresh tool counts and health status
+            await queryClient.invalidateQueries({ queryKey: queryKeys.mcpServers.tools() });
+            await queryClient.invalidateQueries({ queryKey: queryKeys.mcpServers.all() });
           })
           .catch(() => {
             // Silently ignore health check errors on update
@@ -828,16 +799,16 @@ export function McpLibraryPage() {
           });
         toast({ title: 'Server updated', description: `${payload.name} has been updated.` });
       } else {
-        const newServer = await createServer(payload);
+        const newServer = await createServerMutation.mutateAsync(payload);
         // Immediately add to checking set - batched with store update to prevent "Unknown" flash
         setCheckingServers((prev) => new Set([...prev, newServer.id]));
         // Run health check to set status and discover tools
-        testConnection(newServer.id)
+        testConnectionMutation
+          .mutateAsync(newServer.id)
           .then(async (result) => {
-            // Fetch all tools after health check to update tool counts
-            await fetchAllTools();
-            // Refresh health status in store before clearing checking state
-            await fetchServers();
+            // Invalidate queries to refresh tool counts and health status
+            await queryClient.invalidateQueries({ queryKey: queryKeys.mcpServers.tools() });
+            await queryClient.invalidateQueries({ queryKey: queryKeys.mcpServers.all() });
             if (result.toolCount !== undefined && result.toolCount > 0) {
               toast({
                 title: 'Server ready',
@@ -878,7 +849,7 @@ export function McpLibraryPage() {
 
     setIsDeleting(true);
     try {
-      await deleteServer(serverToDelete);
+      await deleteServerMutation.mutateAsync(serverToDelete);
       toast({ title: 'Server deleted', description: 'MCP server has been removed.' });
       setDeleteDialogOpen(false);
       setServerToDelete(null);
@@ -895,7 +866,7 @@ export function McpLibraryPage() {
 
   const handleToggle = async (serverId: string) => {
     try {
-      const server = await toggleServer(serverId);
+      const server = await toggleServerMutation.mutateAsync(serverId);
       toast({
         title: server.enabled ? 'Server enabled' : 'Server disabled',
         description: `${server.name} has been ${server.enabled ? 'enabled' : 'disabled'}.`,
@@ -912,7 +883,7 @@ export function McpLibraryPage() {
   const handleTestConnection = async (serverId: string) => {
     setTestingServer(serverId);
     try {
-      const result = await testConnection(serverId);
+      const result = await testConnectionMutation.mutateAsync(serverId);
       toast({
         title: result.success ? 'Connection successful' : 'Connection failed',
         description: result.message,
@@ -932,7 +903,7 @@ export function McpLibraryPage() {
   const handleViewTools = async (serverId: string) => {
     setSelectedServerForTools(serverId);
     setToolsDialogOpen(true);
-    await fetchServerTools(serverId);
+    await fetchServerToolsMutation.mutateAsync(serverId);
   };
 
   const handleDiscoverServerTools = async (serverId: string, image?: string) => {
@@ -940,7 +911,7 @@ export function McpLibraryPage() {
 
     setDiscoveringServerIds((prev) => new Set(prev).add(serverId));
     try {
-      const tools = await discoverTools(serverId, image ? { image } : undefined);
+      const tools = await discoverToolsMutation.mutateAsync({ serverId, servers, image });
       toast({
         title: 'Tool discovery complete',
         description: `Discovered ${tools.length} tool(s) from this server.`,
@@ -961,19 +932,7 @@ export function McpLibraryPage() {
   };
 
   const refreshTemplates = async () => {
-    setIsLoadingTemplates(true);
-    try {
-      const templates = await mcpGroupsApi.listTemplates();
-      setGroupTemplates(templates);
-    } catch (error) {
-      toast({
-        title: 'Failed to load group templates',
-        description: error instanceof Error ? error.message : 'Could not fetch available groups.',
-        variant: 'destructive',
-      });
-    } finally {
-      setIsLoadingTemplates(false);
-    }
+    await queryClient.invalidateQueries({ queryKey: queryKeys.mcpGroups.templates() });
   };
 
   const handleGroupTestAndDiscover = async (template: McpGroupTemplateResponse) => {
@@ -1146,9 +1105,8 @@ export function McpLibraryPage() {
 
       // Import template with cache tokens
       const result = await mcpGroupsApi.importTemplate(template.slug, serverCacheTokens);
-      await fetchGroups({ force: true });
-      await fetchGroupServers(result.group.id, { force: true });
-      await fetchAllTools();
+      await queryClient.invalidateQueries({ queryKey: queryKeys.mcpGroups.all() });
+      await queryClient.invalidateQueries({ queryKey: queryKeys.mcpServers.tools() });
 
       toast({
         title: 'Group imported',
@@ -1185,7 +1143,7 @@ export function McpLibraryPage() {
         title: 'Group removed',
         description: `${groupName} was removed.`,
       });
-      await fetchGroups({ force: true });
+      await queryClient.invalidateQueries({ queryKey: queryKeys.mcpGroups.all() });
     } catch (err) {
       toast({
         title: 'Remove failed',
@@ -1197,7 +1155,7 @@ export function McpLibraryPage() {
 
   const handleToggleTool = async (serverId: string, toolId: string) => {
     try {
-      const tool = await toggleTool(serverId, toolId);
+      const tool = await toggleToolMutation.mutateAsync({ serverId, toolId });
       toast({
         title: tool.enabled ? 'Tool enabled' : 'Tool disabled',
         description: `${tool.toolName} has been ${tool.enabled ? 'enabled' : 'disabled'}.`,
@@ -1447,7 +1405,7 @@ export function McpLibraryPage() {
           headers: firstServer.headers.trim() ? JSON.parse(firstServer.headers) : undefined,
           enabled: formData.enabled,
         };
-        await updateServer(editingServer, payload);
+        await updateServerMutation.mutateAsync({ id: editingServer, input: payload });
         toast({ title: 'Server updated', description: `${payload.name} has been updated.` });
         setEditorOpen(false);
         setEditingServer(null);
@@ -1493,12 +1451,12 @@ export function McpLibraryPage() {
             // Pass cacheToken to backend so it can automatically create tools from cached discovery
             cacheToken: cached?.cacheToken,
           };
-          return createServer(payload);
+          return createServerMutation.mutateAsync(payload);
         }),
       );
 
       // Extract successfully created servers and collect errors
-      type ServerResponse = Awaited<ReturnType<typeof createServer>>;
+      type ServerResponse = Awaited<ReturnType<typeof createServerMutation.mutateAsync>>;
       const createdServers = results
         .filter((r): r is PromiseFulfilledResult<ServerResponse> => r.status === 'fulfilled')
         .map((r) => r.value);
@@ -1540,13 +1498,16 @@ export function McpLibraryPage() {
           setDiscoveringServerIds(new Set(serversToDiscover.map((s) => s.id)));
 
           Promise.allSettled(
-            serversToDiscover.map((server) => discoverTools(server.id).catch(() => {})),
+            serversToDiscover.map((server) =>
+              discoverToolsMutation
+                .mutateAsync({ serverId: server.id, servers: createdServers })
+                .catch(() => {}),
+            ),
           )
             .then(async () => {
-              // Fetch all tools after discovery completes
-              await fetchAllTools();
-              // Refresh health status in store before clearing checking state
-              await fetchServers();
+              // Invalidate queries to refresh tool counts and health status
+              await queryClient.invalidateQueries({ queryKey: queryKeys.mcpServers.tools() });
+              await queryClient.invalidateQueries({ queryKey: queryKeys.mcpServers.all() });
             })
             .finally(() => {
               // Clear discovering state
@@ -1562,9 +1523,9 @@ export function McpLibraryPage() {
         if (serversToDiscover.length < createdServers.length) {
           Promise.resolve()
             .then(async () => {
-              // Fetch tools for all created servers (cached ones will have tools from backend)
-              await fetchAllTools();
-              await fetchServers();
+              // Invalidate queries to refresh tool counts and health status
+              await queryClient.invalidateQueries({ queryKey: queryKeys.mcpServers.tools() });
+              await queryClient.invalidateQueries({ queryKey: queryKeys.mcpServers.all() });
             })
             .finally(() => {
               // Clear checking state
@@ -1638,7 +1599,11 @@ export function McpLibraryPage() {
           <AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
           <h2 className="text-lg font-semibold mb-2">Failed to load MCP servers</h2>
           <p className="text-muted-foreground mb-4">{error}</p>
-          <Button onClick={() => fetchServers({ force: true })}>Try again</Button>
+          <Button
+            onClick={() => queryClient.invalidateQueries({ queryKey: queryKeys.mcpServers.all() })}
+          >
+            Try again
+          </Button>
         </div>
       </div>
     );
@@ -1675,8 +1640,8 @@ export function McpLibraryPage() {
           variant="outline"
           size="icon"
           onClick={() => {
-            fetchServers({ force: true });
-            fetchGroups();
+            queryClient.invalidateQueries({ queryKey: queryKeys.mcpServers.all() });
+            queryClient.invalidateQueries({ queryKey: queryKeys.mcpGroups.all() });
             void refreshTemplates();
           }}
           disabled={isLoading}
diff --git a/frontend/src/pages/RunRedirect.tsx b/frontend/src/pages/RunRedirect.tsx
index 62dce852..2fc021dd 100644
--- a/frontend/src/pages/RunRedirect.tsx
+++ b/frontend/src/pages/RunRedirect.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { api } from '@/services/api';
+import { useExecutionRun } from '@/hooks/queries/useExecutionQueries';
 import { Loader2 } from 'lucide-react';
 
 /**
@@ -12,30 +12,21 @@ import { Loader2 } from 'lucide-react';
 export function RunRedirect() {
   const { runId } = useParams<{ runId: string }>();
   const navigate = useNavigate();
-  const [error, setError] = useState<string | null>(null);
+  const { data: run, error: queryError } = useExecutionRun(runId);
 
   useEffect(() => {
-    if (!runId) {
-      setError('No run ID provided');
-      return;
+    if (run?.workflowId) {
+      navigate(`/workflows/${run.workflowId}/runs/${runId}`, { replace: true });
     }
+  }, [run, runId, navigate]);
 
-    const fetchAndRedirect = async () => {
-      try {
-        const run = await api.executions.getRun(runId);
-        if (run?.workflowId) {
-          navigate(`/workflows/${run.workflowId}/runs/${runId}`, { replace: true });
-        } else {
-          setError('Run not found or missing workflow ID');
-        }
-      } catch (err) {
-        console.error('Failed to fetch run:', err);
-        setError('Failed to load run');
-      }
-    };
-
-    fetchAndRedirect();
-  }, [runId, navigate]);
+  const error = !runId
+    ? 'No run ID provided'
+    : queryError
+      ? 'Failed to load run'
+      : run && !run.workflowId
+        ? 'Run not found or missing workflow ID'
+        : null;
 
   if (error) {
     return (
diff --git a/frontend/src/pages/SchedulesPage.tsx b/frontend/src/pages/SchedulesPage.tsx
index 7bea3458..f19dd66f 100644
--- a/frontend/src/pages/SchedulesPage.tsx
+++ b/frontend/src/pages/SchedulesPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -21,9 +21,16 @@ import {
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Skeleton } from '@/components/ui/skeleton';
 import { PauseCircle, PlayCircle, RefreshCw, Search, Edit3, Plus, Trash2 } from 'lucide-react';
-import { useScheduleStore } from '@/store/scheduleStore';
 import { useToast } from '@/components/ui/use-toast';
-import { api } from '@/services/api';
+import {
+  useSchedules,
+  usePauseSchedule,
+  useResumeSchedule,
+  useRunSchedule,
+  useDeleteSchedule,
+} from '@/hooks/queries/useScheduleQueries';
+import { useWorkflowsSummary } from '@/hooks/queries/useWorkflowQueries';
+import { useQueryClient } from '@tanstack/react-query';
 import {
   ScheduleEditorDrawer,
   type WorkflowOption,
@@ -62,68 +69,41 @@ const getWorkflowName = (workflowId: string, workflows: WorkflowOption[]): strin
 
 export function SchedulesPage() {
   const { toast } = useToast();
+  const queryClient = useQueryClient();
   const [searchParams, setSearchParams] = useSearchParams();
-  const [workflowOptions, setWorkflowOptions] = useState<WorkflowOption[]>([]);
-  const [workflowsLoading, setWorkflowsLoading] = useState(true);
   const [actionState, setActionState] = useState<Record<string, 'run' | 'toggle'>>({});
   const [editorOpen, setEditorOpen] = useState(false);
   const [editorMode, setEditorMode] = useState<'create' | 'edit'>('create');
   const [activeSchedule, setActiveSchedule] = useState<WorkflowSchedule | null>(null);
 
-  const schedules = useScheduleStore((state) => state.schedules);
-  const isLoading = useScheduleStore((state) => state.isLoading);
-  const error = useScheduleStore((state) => state.error);
-  const filters = useScheduleStore((state) => state.filters);
-  const fetchSchedules = useScheduleStore((state) => state.fetchSchedules);
-  const refreshSchedules = useScheduleStore((state) => state.refreshSchedules);
-  const setFilters = useScheduleStore((state) => state.setFilters);
-  const pauseSchedule = useScheduleStore((state) => state.pauseSchedule);
-  const resumeSchedule = useScheduleStore((state) => state.resumeSchedule);
-  const runSchedule = useScheduleStore((state) => state.runSchedule);
-  const deleteSchedule = useScheduleStore((state) => state.deleteSchedule);
-  const upsertSchedule = useScheduleStore((state) => state.upsertSchedule);
-
-  useEffect(() => {
-    const initialWorkflowId = searchParams.get('workflowId');
-    if (initialWorkflowId) {
-      setFilters({ workflowId: initialWorkflowId });
-    }
-  }, []);
+  // Local filter state (search is client-side, workflowId & status go to the query)
+  const initialWorkflowId = searchParams.get('workflowId') || null;
+  const [filters, setFilters] = useState<{
+    search: string;
+    status: string;
+    workflowId: string | null;
+  }>({ search: '', status: 'all', workflowId: initialWorkflowId });
+
+  const {
+    data: schedules = [],
+    isLoading,
+    error: schedulesError,
+  } = useSchedules({
+    workflowId: filters.workflowId,
+    status: filters.status as any,
+  });
+  const error = schedulesError?.message ?? null;
+
+  const { data: workflowsRaw = [], isLoading: workflowsLoading } = useWorkflowsSummary();
+  const workflowOptions: WorkflowOption[] = useMemo(
+    () => workflowsRaw.map((w: any) => ({ id: w.id, name: w.name ?? 'Untitled workflow' })),
+    [workflowsRaw],
+  );
 
-  useEffect(() => {
-    fetchSchedules({ force: true }).catch(() => {
-      /* errors handled in store */
-    });
-  }, [fetchSchedules, filters.workflowId, filters.status]);
-
-  useEffect(() => {
-    let cancelled = false;
-    (async () => {
-      try {
-        const workflowList = await api.workflows.listSummary();
-        if (cancelled) return;
-        const normalized = workflowList.map((workflow) => ({
-          id: workflow.id,
-          name: workflow.name ?? 'Untitled workflow',
-        }));
-        setWorkflowOptions(normalized);
-      } catch (err) {
-        console.error('Failed to load workflows', err);
-        toast({
-          title: 'Unable to load workflows',
-          description: err instanceof Error ? err.message : 'Please try refreshing the page.',
-          variant: 'destructive',
-        });
-      } finally {
-        if (!cancelled) {
-          setWorkflowsLoading(false);
-        }
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [toast]);
+  const pauseScheduleMutation = usePauseSchedule();
+  const resumeScheduleMutation = useResumeSchedule();
+  const runScheduleMutation = useRunSchedule();
+  const deleteScheduleMutation = useDeleteSchedule();
 
   const filteredSchedules = useMemo(() => {
     const query = filters.search.trim().toLowerCase();
@@ -152,7 +132,7 @@ export function SchedulesPage() {
 
   const handleWorkflowFilterChange = (value: string) => {
     const workflowId = value === 'all' ? null : value;
-    setFilters({ workflowId });
+    setFilters((prev) => ({ ...prev, workflowId }));
     const nextParams = new URLSearchParams(searchParams);
     if (workflowId) {
       nextParams.set('workflowId', workflowId);
@@ -163,7 +143,7 @@ export function SchedulesPage() {
   };
 
   const handleStatusFilterChange = (value: string) => {
-    setFilters({ status: value as typeof filters.status });
+    setFilters((prev) => ({ ...prev, status: value as typeof filters.status }));
   };
 
   const openCreateDrawer = () => {
@@ -179,7 +159,7 @@ export function SchedulesPage() {
   };
 
   const handleScheduleSaved = (savedSchedule: WorkflowSchedule, mode: 'create' | 'edit') => {
-    upsertSchedule(savedSchedule);
+    queryClient.invalidateQueries({ queryKey: ['schedules'] });
     toast({
       title: mode === 'create' ? 'Schedule created' : 'Schedule updated',
       description:
@@ -193,13 +173,13 @@ export function SchedulesPage() {
     markAction(schedule.id, 'toggle');
     try {
       if (schedule.status === 'active') {
-        await pauseSchedule(schedule.id);
+        await pauseScheduleMutation.mutateAsync(schedule.id);
         toast({
           title: 'Schedule paused',
           description: `"${schedule.name}" has been paused.`,
         });
       } else {
-        await resumeSchedule(schedule.id);
+        await resumeScheduleMutation.mutateAsync(schedule.id);
         toast({
           title: 'Schedule resumed',
           description: `"${schedule.name}" is active again.`,
@@ -219,7 +199,7 @@ export function SchedulesPage() {
   const handleRunNow = async (schedule: WorkflowSchedule) => {
     markAction(schedule.id, 'run');
     try {
-      await runSchedule(schedule.id);
+      await runScheduleMutation.mutateAsync(schedule.id);
       toast({
         title: 'Run requested',
         description: `Scheduled cadence "${schedule.name}" is executing now.`,
@@ -237,7 +217,7 @@ export function SchedulesPage() {
 
   const handleRefresh = async () => {
     try {
-      await refreshSchedules();
+      await queryClient.invalidateQueries({ queryKey: ['schedules'] });
       toast({
         title: 'Schedules refreshed',
         description: 'Latest schedule statuses have been loaded.',
@@ -263,7 +243,7 @@ export function SchedulesPage() {
     }
     markAction(schedule.id, 'run');
     try {
-      await deleteSchedule(schedule.id);
+      await deleteScheduleMutation.mutateAsync(schedule.id);
       toast({
         title: 'Schedule deleted',
         description: `"${schedule.name}" has been deleted.`,
@@ -302,7 +282,9 @@ export function SchedulesPage() {
               <Input
                 placeholder="Filter by schedule or workflow"
                 value={filters.search}
-                onChange={(event) => setFilters({ search: event.target.value })}
+                onChange={(event) =>
+                  setFilters((prev) => ({ ...prev, search: event.target.value }))
+                }
               />
             </div>
             <div className="flex flex-wrap gap-2">
diff --git a/frontend/src/pages/SecretsManager.tsx b/frontend/src/pages/SecretsManager.tsx
index c81d0fc5..20420ffd 100644
--- a/frontend/src/pages/SecretsManager.tsx
+++ b/frontend/src/pages/SecretsManager.tsx
@@ -12,7 +12,14 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import type { SecretSummary } from '@/schemas/secret';
-import { useSecretStore } from '@/store/secretStore';
+import {
+  useSecrets,
+  useCreateSecret,
+  useUpdateSecret,
+  useRotateSecret,
+  useDeleteSecret,
+} from '@/hooks/queries/useSecretQueries';
+import { useQueryClient } from '@tanstack/react-query';
 import { useAuthStore } from '@/store/authStore';
 import { hasAdminRole } from '@/utils/auth';
 import { track, Events } from '@/features/analytics/events';
@@ -92,15 +99,13 @@ export function SecretsManager() {
   const roles = useAuthStore((state) => state.roles);
   const canManageSecrets = hasAdminRole(roles);
   const isReadOnly = !canManageSecrets;
-  const secrets = useSecretStore((state) => state.secrets);
-  const loading = useSecretStore((state) => state.loading);
-  const error = useSecretStore((state) => state.error);
-  const fetchSecrets = useSecretStore((state) => state.fetchSecrets);
-  const refreshSecrets = useSecretStore((state) => state.refresh);
-  const createSecret = useSecretStore((state) => state.createSecret);
-  const updateSecretMetadata = useSecretStore((state) => state.updateSecret);
-  const deleteSecretEntry = useSecretStore((state) => state.deleteSecret);
-  const rotateSecretValue = useSecretStore((state) => state.rotateSecret);
+  const queryClient = useQueryClient();
+  const { data: secrets = [], isLoading: loading, error: secretsError } = useSecrets();
+  const error = secretsError?.message ?? null;
+  const createSecretMutation = useCreateSecret();
+  const updateSecretMutation = useUpdateSecret();
+  const rotateSecretMutation = useRotateSecret();
+  const deleteSecretMutation = useDeleteSecret();
 
   const [formState, setFormState] = useState<FormState>(INITIAL_FORM);
   const [formError, setFormError] = useState<string | null>(null);
@@ -123,12 +128,6 @@ export function SecretsManager() {
   const [isDeleting, setIsDeleting] = useState(false);
   const disableDeleting = isReadOnly || isDeleting;
 
-  useEffect(() => {
-    fetchSecrets().catch((err) => {
-      console.error('Failed to load secrets', err);
-    });
-  }, [fetchSecrets]);
-
   useEffect(() => {
     if (error) {
       setListSuccess(null);
@@ -181,7 +180,7 @@ export function SecretsManager() {
     const normalizedName = formState.name.trim();
     const normalizedTags = parseTags(formState.tags);
     try {
-      await createSecret({
+      await createSecretMutation.mutateAsync({
         name: normalizedName,
         value: formState.value,
         description: formState.description.trim() || undefined,
@@ -257,15 +256,21 @@ export function SecretsManager() {
       let latest = editingSecret;
 
       if (metadataChanged) {
-        latest = await updateSecretMetadata(editingSecret.id, {
-          name: trimmedName,
-          description: normalizedDescription,
-          tags: normalizedTags,
+        latest = await updateSecretMutation.mutateAsync({
+          id: editingSecret.id,
+          input: {
+            name: trimmedName,
+            description: normalizedDescription,
+            tags: normalizedTags,
+          },
         });
       }
 
       if (shouldRotate) {
-        latest = await rotateSecretValue(editingSecret.id, { value: newSecretValue });
+        latest = await rotateSecretMutation.mutateAsync({
+          id: editingSecret.id,
+          input: { value: newSecretValue },
+        });
       }
 
       const actions: string[] = [];
@@ -318,7 +323,7 @@ export function SecretsManager() {
     const secretNameLength = secretName.trim().length;
 
     try {
-      await deleteSecretEntry(deleteTarget.id);
+      await deleteSecretMutation.mutateAsync(deleteTarget.id);
       // Avoid emitting the raw secret name to analytics.
       track(Events.SecretDeleted, { name_length: secretNameLength });
       setListSuccess(`Secret "${secretName}" deleted.`);
@@ -444,7 +449,9 @@ export function SecretsManager() {
                 size="sm"
                 onClick={() => {
                   setListSuccess(null);
-                  refreshSecrets().catch((err) => console.error('Failed to refresh secrets', err));
+                  queryClient
+                    .invalidateQueries({ queryKey: ['secrets'] })
+                    .catch((err) => console.error('Failed to refresh secrets', err));
                 }}
                 disabled={loading}
                 className="self-start sm:self-auto flex-shrink-0"
diff --git a/frontend/src/pages/WebhookEditorPage.tsx b/frontend/src/pages/WebhookEditorPage.tsx
index 87f1d7db..d5a88760 100644
--- a/frontend/src/pages/WebhookEditorPage.tsx
+++ b/frontend/src/pages/WebhookEditorPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo } from 'react';
+import { useEffect, useState, useMemo, useRef } from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import {
   ArrowLeft,
@@ -13,6 +13,8 @@ import {
   Code,
 } from 'lucide-react';
 import { api } from '@/services/api';
+import { useWebhook, useWebhookDeliveries } from '@/hooks/queries/useWebhookQueries';
+import { useWorkflowsSummary, useWorkflowRuntimeInputs } from '@/hooks/queries/useWorkflowQueries';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -31,11 +33,7 @@ import { useToast } from '@/components/ui/use-toast';
 import Editor, { loader } from '@monaco-editor/react';
 import { cn } from '@/lib/utils';
 import { SaveButton } from '@/components/ui/save-button';
-import type {
-  WebhookConfiguration,
-  WebhookDelivery,
-  WebhookInputDefinition,
-} from '@shipsec/shared';
+import type { WebhookConfiguration, WebhookInputDefinition } from '@shipsec/shared';
 
 // Configure Monaco
 loader.config({ paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs' } });
@@ -90,9 +88,20 @@ export function WebhookEditorPage() {
     }
   };
 
-  const [isLoading, setIsLoading] = useState(!isNew);
   const [isSaving, setIsSaving] = useState(false);
-  const [webhook, setWebhook] = useState<WebhookConfiguration | null>(null);
+
+  // --- Query hooks for server data ---
+  const {
+    data: webhookData,
+    isLoading: isLoadingWebhook,
+    error: webhookError,
+  } = useWebhook(isNew ? undefined : id);
+  const webhook = (webhookData as WebhookConfiguration) ?? null;
+  const { data: rawWorkflows = [] } = useWorkflowsSummary();
+  const workflows = useMemo(
+    () => rawWorkflows.map((w) => ({ id: w.id, name: w.name })),
+    [rawWorkflows],
+  );
 
   // Form State
   const [form, setForm] = useState<WebhookFormState>({
@@ -115,6 +124,36 @@ export function WebhookEditorPage() {
       : null,
   );
 
+  // Sync webhook query data → form state (once, on initial load)
+  const formInitializedRef = useRef(false);
+  useEffect(() => {
+    if (isNew || formInitializedRef.current || !webhook) return;
+    formInitializedRef.current = true;
+    const loadedForm = {
+      workflowId: webhook.workflowId,
+      name: webhook.name,
+      description: webhook.description || '',
+      parsingScript: webhook.parsingScript,
+      expectedInputs: webhook.expectedInputs,
+    };
+    setForm(loadedForm);
+    setInitialForm(loadedForm);
+  }, [isNew, webhook]);
+
+  // Handle webhook load error — navigate away
+  useEffect(() => {
+    if (webhookError && !isNew) {
+      toast({
+        title: 'Error loading data',
+        description: String(webhookError),
+        variant: 'destructive',
+      });
+      navigate('/webhooks');
+    }
+  }, [webhookError, isNew, navigate, toast]);
+
+  const isLoading = !isNew && isLoadingWebhook;
+
   const isDirty = useMemo(() => {
     if (!initialForm) return false;
     try {
@@ -130,92 +169,30 @@ export function WebhookEditorPage() {
   const [testResult, setTestResult] = useState<any>(null);
   const [isTesting, setIsTesting] = useState(false);
 
-  // Resources
-  const [workflows, setWorkflows] = useState<{ id: string; name: string }[]>([]);
-  const [workflowRuntimeInputs, setWorkflowRuntimeInputs] = useState<any[]>([]);
-  const [deliveries, setDeliveries] = useState<WebhookDelivery[]>([]);
-  const [isLoadingDeliveries, setIsLoadingDeliveries] = useState(false);
-
-  // Load Initial Data
-  useEffect(() => {
-    const loadResources = async () => {
-      try {
-        if (!isNew) setIsLoading(true);
-
-        const workflowsList = await api.workflows.listSummary();
-        setWorkflows(workflowsList.map((w) => ({ id: w.id, name: w.name })));
-
-        if (isNew) {
-          const defaultState = {
-            workflowId: '',
-            name: 'New Webhook',
-            description: '',
-            parsingScript: DEFAULT_PARSING_SCRIPT,
-            expectedInputs: [],
-          };
-          setForm(defaultState);
-          setInitialForm(defaultState);
-        } else if (id) {
-          const loadedWebhook = (await api.webhooks.get(id)) as unknown as WebhookConfiguration;
-          setWebhook(loadedWebhook);
-          const loadedForm = {
-            workflowId: loadedWebhook.workflowId,
-            name: loadedWebhook.name,
-            description: loadedWebhook.description || '',
-            parsingScript: loadedWebhook.parsingScript,
-            expectedInputs: loadedWebhook.expectedInputs,
-          };
-          setForm(loadedForm);
-          setInitialForm(loadedForm);
-        }
-      } catch (error) {
-        toast({
-          title: 'Error loading data',
-          description: String(error),
-          variant: 'destructive',
-        });
-        if (!isNew) navigate('/webhooks');
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    loadResources();
-  }, [id, isNew, navigate, toast]);
+  // --- Runtime inputs query (reactive to form.workflowId) ---
+  const { data: runtimeInputsData } = useWorkflowRuntimeInputs(form.workflowId || undefined);
+  const workflowRuntimeInputs = useMemo(() => runtimeInputsData?.inputs || [], [runtimeInputsData]);
 
-  // Load Workflow Runtime Inputs and sync to expectedInputs
+  // Sync runtime inputs → expectedInputs in form
+  const lastSyncedWorkflowId = useRef('');
   useEffect(() => {
-    if (!form.workflowId) return;
-
-    api.workflows
-      .getRuntimeInputs(form.workflowId)
-      .then((res) => {
-        const runtimeInputs = res.inputs || [];
-        setWorkflowRuntimeInputs(runtimeInputs);
-
-        // Automatically populate expectedInputs from workflow runtime inputs
-        // This ensures the backend validation passes
-        const mappedInputs: WebhookInputDefinition[] = runtimeInputs.map((input: any) => ({
-          id: input.id,
-          label: input.label || input.id,
-          type: (input.type === 'string' ? 'text' : input.type) || 'text',
-          required: input.required !== false,
-          description: input.description || '',
-        }));
-        setForm((prev) => ({ ...prev, expectedInputs: mappedInputs }));
-      })
-      .catch(console.error);
-  }, [form.workflowId]);
-
-  // Load Deliveries
-  useEffect(() => {
-    if (isNew || !id) return;
-    setIsLoadingDeliveries(true);
-    api.webhooks
-      .listDeliveries(id)
-      .then((data) => setDeliveries(data || []))
-      .catch(console.error)
-      .finally(() => setIsLoadingDeliveries(false));
-  }, [id, isNew]);
+    if (!form.workflowId || form.workflowId === lastSyncedWorkflowId.current) return;
+    if (workflowRuntimeInputs.length === 0) return;
+    lastSyncedWorkflowId.current = form.workflowId;
+    const mappedInputs: WebhookInputDefinition[] = workflowRuntimeInputs.map((input: any) => ({
+      id: input.id,
+      label: input.label || input.id,
+      type: (input.type === 'string' ? 'text' : input.type) || 'text',
+      required: input.required !== false,
+      description: input.description || '',
+    }));
+    setForm((prev) => ({ ...prev, expectedInputs: mappedInputs }));
+  }, [form.workflowId, workflowRuntimeInputs]);
+
+  // --- Deliveries query ---
+  const { data: deliveries = [], isLoading: isLoadingDeliveries } = useWebhookDeliveries(
+    isNew ? undefined : id,
+  );
 
   const handleSave = async () => {
     setIsSaving(true);
diff --git a/frontend/src/pages/WebhooksPage.tsx b/frontend/src/pages/WebhooksPage.tsx
index 4ecddea8..fb218039 100644
--- a/frontend/src/pages/WebhooksPage.tsx
+++ b/frontend/src/pages/WebhooksPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -11,7 +11,6 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Input } from '@/components/ui/input';
-// Textarea and Label removed
 import {
   Select,
   SelectContent,
@@ -24,8 +23,13 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
 import { Skeleton } from '@/components/ui/skeleton';
 import { useToast } from '@/components/ui/use-toast';
 import { RefreshCw, Plus, Trash2, ExternalLink, Link2, Copy, RotateCw } from 'lucide-react';
-import { useWebhookStore } from '@/store/webhookStore';
-import { api } from '@/services/api';
+import {
+  useWebhooks,
+  useDeleteWebhook,
+  useRegenerateWebhookPath,
+} from '@/hooks/queries/useWebhookQueries';
+import { useWorkflowsSummary } from '@/hooks/queries/useWorkflowQueries';
+import { useQueryClient } from '@tanstack/react-query';
 import { env } from '@/config/env';
 import type { WebhookConfiguration } from '@shipsec/shared';
 
@@ -67,63 +71,31 @@ const WEBHOOK_BASE_URL = env.VITE_API_URL || 'https://api.shipsec.ai';
 
 export function WebhooksPage() {
   const { toast } = useToast();
+  const queryClient = useQueryClient();
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
-  const [workflowOptions, setWorkflowOptions] = useState<WorkflowOption[]>([]);
-  const [workflowsLoading, setWorkflowsLoading] = useState(true);
   const [actionState, setActionState] = useState<Record<string, 'delete' | 'regenerate' | 'test'>>(
     {},
   );
 
-  const webhooks = useWebhookStore((state) => state.webhooks);
-  const isLoading = useWebhookStore((state) => state.isLoading);
-  const error = useWebhookStore((state) => state.error);
-  const filters = useWebhookStore((state) => state.filters);
-  const fetchWebhooks = useWebhookStore((state) => state.fetchWebhooks);
-  const refreshWebhooks = useWebhookStore((state) => state.refreshWebhooks);
-  const setFilters = useWebhookStore((state) => state.setFilters);
-  const deleteWebhook = useWebhookStore((state) => state.deleteWebhook);
-  const regeneratePath = useWebhookStore((state) => state.regeneratePath);
+  const initialWorkflowId = searchParams.get('workflowId') || null;
+  const [filters, setFilters] = useState<{
+    search: string;
+    status: string;
+    workflowId: string | null;
+  }>({ search: '', status: 'all', workflowId: initialWorkflowId });
 
-  useEffect(() => {
-    const initialWorkflowId = searchParams.get('workflowId');
-    if (initialWorkflowId) {
-      setFilters({ workflowId: initialWorkflowId });
-    }
-  }, []);
+  const { data: webhooks = [], isLoading, error: webhooksError } = useWebhooks();
+  const error = webhooksError?.message ?? null;
 
-  useEffect(() => {
-    fetchWebhooks({ force: true }).catch(() => {});
-  }, [fetchWebhooks]);
+  const { data: workflowsRaw = [], isLoading: workflowsLoading } = useWorkflowsSummary();
+  const workflowOptions: WorkflowOption[] = useMemo(
+    () => workflowsRaw.map((w: any) => ({ id: w.id, name: w.name ?? 'Untitled workflow' })),
+    [workflowsRaw],
+  );
 
-  useEffect(() => {
-    let cancelled = false;
-    (async () => {
-      try {
-        const workflowList = await api.workflows.listSummary();
-        if (cancelled) return;
-        const normalized = workflowList.map((workflow) => ({
-          id: workflow.id,
-          name: workflow.name ?? 'Untitled workflow',
-        }));
-        setWorkflowOptions(normalized);
-      } catch (_err) {
-        console.error('Failed to load workflows', _err);
-        toast({
-          title: 'Unable to load workflows',
-          description: _err instanceof Error ? _err.message : 'Please try refreshing the page.',
-          variant: 'destructive',
-        });
-      } finally {
-        if (!cancelled) {
-          setWorkflowsLoading(false);
-        }
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [toast]);
+  const deleteWebhookMutation = useDeleteWebhook();
+  const regeneratePathMutation = useRegenerateWebhookPath();
 
   const filteredWebhooks = useMemo(() => {
     const query = filters.search.trim().toLowerCase();
@@ -144,7 +116,7 @@ export function WebhooksPage() {
 
   const handleWorkflowFilterChange = (value: string) => {
     const workflowId = value === 'all' ? null : value;
-    setFilters({ workflowId });
+    setFilters((prev) => ({ ...prev, workflowId }));
     const nextParams = new URLSearchParams(searchParams);
     if (workflowId) {
       nextParams.set('workflowId', workflowId);
@@ -155,7 +127,7 @@ export function WebhooksPage() {
   };
 
   const handleStatusFilterChange = (value: string) => {
-    setFilters({ status: value as typeof filters.status });
+    setFilters((prev) => ({ ...prev, status: value as typeof filters.status }));
   };
 
   const handleCopyUrl = async (webhook: WebhookConfiguration) => {
@@ -177,7 +149,7 @@ export function WebhooksPage() {
 
   const handleRefresh = async () => {
     try {
-      await refreshWebhooks();
+      await queryClient.invalidateQueries({ queryKey: ['webhooks'] });
       toast({
         title: 'Webhooks refreshed',
         description: 'Latest webhook configurations have been loaded.',
@@ -206,7 +178,7 @@ export function WebhooksPage() {
 
     setActionState((prev) => ({ ...prev, [webhook.id]: 'delete' }));
     try {
-      await deleteWebhook(webhook.id);
+      await deleteWebhookMutation.mutateAsync(webhook.id);
       toast({
         title: 'Webhook deleted',
         description: `Successfully deleted webhook ${webhook.name}`,
@@ -236,7 +208,7 @@ export function WebhooksPage() {
 
     setActionState((prev) => ({ ...prev, [webhook.id]: 'regenerate' }));
     try {
-      await regeneratePath(webhook.id);
+      await regeneratePathMutation.mutateAsync(webhook.id);
       toast({
         title: 'URL regenerated',
         description: 'New webhook URL has been generated',
@@ -269,7 +241,7 @@ export function WebhooksPage() {
                 <Input
                   placeholder="Filter by name, workflow, or URL"
                   value={filters.search}
-                  onChange={(e) => setFilters({ search: e.target.value })}
+                  onChange={(e) => setFilters((prev) => ({ ...prev, search: e.target.value }))}
                 />
               </div>
               <div className="space-y-2">
diff --git a/frontend/src/pages/WorkflowList.tsx b/frontend/src/pages/WorkflowList.tsx
index d9547480..61d0e23d 100644
--- a/frontend/src/pages/WorkflowList.tsx
+++ b/frontend/src/pages/WorkflowList.tsx
@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { useEffect, useState, useRef, useCallback } from 'react';
+import { useEffect, useState, useCallback, useRef } from 'react';
 import type { CSSProperties, MouseEvent } from 'react';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -21,15 +21,15 @@ import {
 } from '@/components/ui/table';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Workflow, AlertCircle, Trash2, Loader2, Info, GripVertical } from 'lucide-react';
-import { api } from '@/services/api';
+import { Workflow, AlertCircle, Trash2, Info, GripVertical } from 'lucide-react';
+import { api, type WorkflowSummary } from '@/services/api';
 import { getStatusBadgeClassFromStatus } from '@/utils/statusBadgeStyles';
-import { WorkflowMetadataSchema, type WorkflowMetadataNormalized } from '@/schemas/workflow';
 import { useAuthStore } from '@/store/authStore';
 import { hasAdminRole } from '@/utils/auth';
 import { track, Events } from '@/features/analytics/events';
-import { useAuth } from '@/auth/auth-context';
-import { useRunStore } from '@/store/runStore';
+import { useWorkflowsSummary } from '@/hooks/queries/useWorkflowQueries';
+import { queryClient } from '@/lib/queryClient';
+import { queryKeys } from '@/lib/queryKeys';
 import {
   DndContext,
   closestCenter,
@@ -75,22 +75,30 @@ function applyOrder<T extends { id: string }>(items: T[], savedOrder: string[]):
 
 export function WorkflowList() {
   const navigate = useNavigate();
-  const [workflows, setWorkflows] = useState<WorkflowMetadataNormalized[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [retryCount, setRetryCount] = useState(0);
-  const retryCountRef = useRef(0); // Use ref to track actual count
-  const retryTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const { data: rawWorkflows = [], isLoading, error, refetch } = useWorkflowsSummary();
+  const [workflows, setWorkflows] = useState<WorkflowSummary[]>([]);
+  const trackedRef = useRef(false);
+
   const roles = useAuthStore((state) => state.roles);
   const canManageWorkflows = hasAdminRole(roles);
   const isReadOnly = !canManageWorkflows;
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-  const [workflowToDelete, setWorkflowToDelete] = useState<WorkflowMetadataNormalized | null>(null);
+  const [workflowToDelete, setWorkflowToDelete] = useState<WorkflowSummary | null>(null);
   const [deleteError, setDeleteError] = useState<string | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
-  const { isAuthenticated, isLoading: authLoading } = useAuth();
-  const token = useAuthStore((state) => state.token);
-  const adminUsername = useAuthStore((state) => state.adminUsername);
+
+  // Sync ordered workflows from query data
+  useEffect(() => {
+    if (rawWorkflows.length > 0) {
+      setWorkflows(applyOrder(rawWorkflows, getSavedOrder()));
+      if (!trackedRef.current) {
+        track(Events.WorkflowListViewed, { workflows_count: rawWorkflows.length });
+        trackedRef.current = true;
+      }
+    } else if (!isLoading) {
+      setWorkflows([]);
+    }
+  }, [rawWorkflows, isLoading]);
 
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
@@ -112,87 +120,7 @@ export function WorkflowList() {
     });
   }, []);
 
-  const MAX_RETRY_ATTEMPTS = 30; // Try for ~60 seconds (30 attempts × 2s)
-  const RETRY_INTERVAL_MS = 2000; // 2 seconds between retries
-
-  useEffect(() => {
-    // Wait for auth to be ready before loading workflows
-    if (authLoading) {
-      return;
-    }
-
-    // Check if we have authentication (either token or admin credentials)
-    const hasAuth = isAuthenticated || token || adminUsername;
-
-    if (hasAuth) {
-      loadWorkflows();
-    } else {
-      setIsLoading(false);
-      setError('Please log in to view workflows');
-    }
-  }, [isAuthenticated, authLoading, token, adminUsername]);
-
-  // Cleanup timeout on unmount
-  useEffect(() => {
-    return () => {
-      if (retryTimeoutRef.current) {
-        clearTimeout(retryTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  const loadWorkflows = useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const data = await api.workflows.list();
-      const normalized = data.map((workflow) => WorkflowMetadataSchema.parse(workflow));
-      setWorkflows(applyOrder(normalized, getSavedOrder()));
-      setRetryCount(0);
-      retryCountRef.current = 0; // Reset on success
-      setIsLoading(false);
-      // Clear any pending retry timeout
-      if (retryTimeoutRef.current) {
-        clearTimeout(retryTimeoutRef.current);
-        retryTimeoutRef.current = null;
-      }
-      track(Events.WorkflowListViewed, { workflows_count: normalized.length });
-    } catch (err) {
-      console.error('Failed to load workflows:', err);
-
-      const errorMessage = err instanceof Error ? err.message : 'Failed to load workflows';
-
-      // Check if it's a connection error (backend not ready)
-      const isConnectionError =
-        errorMessage.includes('ERR_CONNECTION_REFUSED') ||
-        errorMessage.includes('Failed to fetch') ||
-        errorMessage.includes('fetch');
-
-      // Use ref for accurate count check to prevent going beyond max attempts
-      if (isConnectionError && retryCountRef.current < MAX_RETRY_ATTEMPTS) {
-        // Increment both ref and state
-        retryCountRef.current += 1;
-        setRetryCount(retryCountRef.current);
-
-        // Schedule retry - keep loading spinner visible
-        retryTimeoutRef.current = setTimeout(() => {
-          loadWorkflows();
-        }, RETRY_INTERVAL_MS);
-      } else {
-        // Max retries exhausted or non-connection error
-        setError(errorMessage);
-        setIsLoading(false);
-      }
-    }
-  }, [MAX_RETRY_ATTEMPTS, RETRY_INTERVAL_MS]);
-
-  const handleTryAgain = () => {
-    setRetryCount(0);
-    retryCountRef.current = 0;
-    loadWorkflows();
-  };
-
-  const handleDeleteClick = (event: MouseEvent, workflow: WorkflowMetadataNormalized) => {
+  const handleDeleteClick = (event: MouseEvent, workflow: WorkflowSummary) => {
     event.stopPropagation();
     if (!canManageWorkflows) {
       return;
@@ -219,6 +147,7 @@ export function WorkflowList() {
     try {
       await api.workflows.delete(workflowToDelete.id);
       setWorkflows((prev) => prev.filter((workflow) => workflow.id !== workflowToDelete.id));
+      queryClient.invalidateQueries({ queryKey: queryKeys.workflows.summary() });
       handleDeleteDialogChange(false);
     } catch (err) {
       console.error('Failed to delete workflow:', err);
@@ -278,16 +207,6 @@ export function WorkflowList() {
 
         {isLoading ? (
           <div className="border rounded-lg bg-card overflow-hidden">
-            {retryCount > 0 && (
-              <div className="px-3 md:px-6 py-3 md:py-4 border-b bg-muted/50 text-center">
-                <div className="flex items-center justify-center gap-2 md:gap-3">
-                  <Loader2 className="h-4 w-4 md:h-5 md:w-5 animate-spin text-primary" />
-                  <span className="text-sm md:text-base font-semibold text-foreground">
-                    Waiting for backend... ({retryCount}/{MAX_RETRY_ATTEMPTS})
-                  </span>
-                </div>
-              </div>
-            )}
             <div className="overflow-x-auto">
               <Table>
                 <TableHeader>
@@ -365,8 +284,8 @@ export function WorkflowList() {
           <div className="text-center py-12 border rounded-lg bg-card border-destructive">
             <AlertCircle className="h-12 w-12 mx-auto mb-4 text-destructive" />
             <h3 className="text-lg font-semibold mb-2">Failed to load workflows</h3>
-            <p className="text-muted-foreground mb-4">{error}</p>
-            <Button onClick={handleTryAgain} variant="outline">
+            <p className="text-muted-foreground mb-4">{error?.message ?? 'Unknown error'}</p>
+            <Button onClick={() => refetch()} variant="outline">
               Try Again
             </Button>
           </div>
@@ -497,13 +416,13 @@ export function WorkflowList() {
 }
 
 interface WorkflowRowItemProps {
-  workflow: WorkflowMetadataNormalized;
+  workflow: WorkflowSummary;
   canManageWorkflows: boolean;
   isDeleting: boolean;
   isLoading: boolean;
   formatDate: (dateString: string) => string;
   onRowClick: () => void;
-  onDeleteClick: (event: MouseEvent, workflow: WorkflowMetadataNormalized) => void;
+  onDeleteClick: (event: MouseEvent, workflow: WorkflowSummary) => void;
 }
 
 function WorkflowRowItem({
@@ -515,8 +434,6 @@ function WorkflowRowItem({
   onRowClick,
   onDeleteClick,
 }: WorkflowRowItemProps) {
-  const fetchRuns = useRunStore((state) => state.fetchRuns);
-  const latestRun = useRunStore((state) => state.getLatestRun(workflow.id));
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: workflow.id,
   });
@@ -529,15 +446,14 @@ function WorkflowRowItem({
     opacity: isDragging ? 0.5 : 1,
   };
 
-  useEffect(() => {
-    fetchRuns({ workflowId: workflow.id }).catch(() => undefined);
-  }, [workflow.id, fetchRuns]);
-
-  const nodeCount = workflow.nodes.length;
+  const nodeCount = workflow.nodeCount;
 
-  const statusBadge = latestRun ? (
-    <Badge variant="outline" className={getStatusBadgeClassFromStatus(latestRun.status, 'text-xs')}>
-      {latestRun.status}
+  const statusBadge = workflow.latestRunStatus ? (
+    <Badge
+      variant="outline"
+      className={getStatusBadgeClassFromStatus(workflow.latestRunStatus, 'text-xs')}
+    >
+      {workflow.latestRunStatus}
     </Badge>
   ) : (
     <Badge variant="outline" className={getStatusBadgeClassFromStatus('NONE', 'text-xs')}>
diff --git a/frontend/src/pages/__tests__/SecretsManager.test.tsx b/frontend/src/pages/__tests__/SecretsManager.test.tsx
index 7d896286..7a14b49a 100644
--- a/frontend/src/pages/__tests__/SecretsManager.test.tsx
+++ b/frontend/src/pages/__tests__/SecretsManager.test.tsx
@@ -28,64 +28,66 @@ mock.module('@/components/ui/dialog', () => {
   };
 });
 
-mock.module('@/store/secretStore', () => {
-  const createMockState = () => ({
-    secrets: [],
-    loading: false,
-    error: null,
-    initialized: false,
-    fetchSecrets: mock().mockResolvedValue(undefined),
-    createSecret: mock(),
-    rotateSecret: mock(),
-    updateSecret: mock(),
-    deleteSecret: mock(),
-    getSecretById: mock(),
-    refresh: mock().mockResolvedValue(undefined),
-  });
-
-  const store = createMockState();
-
-  const useSecretStore = mock((selector?: (state: typeof store) => unknown) => {
-    if (selector) {
-      return selector(store);
-    }
-    return store;
-  }) as any;
-
-  useSecretStore.__setState = (partial: Partial<typeof store>) => {
-    Object.assign(store, partial);
-  };
-
-  useSecretStore.__reset = () => {
-    const fresh = createMockState();
-    Object.assign(store, fresh);
-  };
-
-  useSecretStore.__getState = () => store;
+// Mutable mock state for TanStack Query hooks
+const mockQueryState: {
+  secrets: SecretSummary[];
+  isLoading: boolean;
+  error: Error | null;
+  createSecret: any;
+  updateSecret: any;
+  rotateSecret: any;
+  deleteSecret: any;
+} = {
+  secrets: [],
+  isLoading: false,
+  error: null,
+  createSecret: mock().mockResolvedValue(undefined),
+  updateSecret: mock().mockResolvedValue(undefined),
+  rotateSecret: mock().mockResolvedValue(undefined),
+  deleteSecret: mock().mockResolvedValue(undefined),
+};
 
-  return { useSecretStore };
-});
+mock.module('@/hooks/queries/useSecretQueries', () => ({
+  useSecrets: () => ({
+    data: mockQueryState.secrets,
+    isLoading: mockQueryState.isLoading,
+    error: mockQueryState.error,
+  }),
+  useCreateSecret: () => ({
+    mutateAsync: mockQueryState.createSecret,
+  }),
+  useUpdateSecret: () => ({
+    mutateAsync: mockQueryState.updateSecret,
+  }),
+  useRotateSecret: () => ({
+    mutateAsync: mockQueryState.rotateSecret,
+  }),
+  useDeleteSecret: () => ({
+    mutateAsync: mockQueryState.deleteSecret,
+  }),
+}));
+
+const mockInvalidateQueries = mock().mockResolvedValue(undefined);
+
+mock.module('@tanstack/react-query', () => ({
+  useQueryClient: () => ({
+    invalidateQueries: mockInvalidateQueries,
+  }),
+}));
 
 import { SecretsManager } from '@/pages/SecretsManager';
-import { useSecretStore } from '@/store/secretStore';
 import { useAuthStore, DEFAULT_ORG_ID } from '@/store/authStore';
 
-interface MockStoreState {
-  secrets: SecretSummary[];
-  loading: boolean;
-  error: string | null;
-  initialized: boolean;
-  fetchSecrets: (...args: any[]) => Promise<void>;
-  createSecret: (...args: any[]) => Promise<SecretSummary>;
-  rotateSecret: (...args: any[]) => Promise<SecretSummary>;
-  updateSecret: (...args: any[]) => Promise<SecretSummary>;
-  deleteSecret: (...args: any[]) => Promise<void>;
-  getSecretById: (...args: any[]) => SecretSummary | undefined;
-  refresh: (...args: any[]) => Promise<void>;
+interface MockQueryOverrides {
+  secrets?: SecretSummary[];
+  isLoading?: boolean;
+  error?: Error | null;
+  createSecret?: (...args: any[]) => Promise<SecretSummary>;
+  updateSecret?: (...args: any[]) => Promise<SecretSummary>;
+  rotateSecret?: (...args: any[]) => Promise<SecretSummary>;
+  deleteSecret?: (...args: any[]) => Promise<void>;
 }
 
-const useSecretStoreMock = useSecretStore as any;
-
 async function resetAuthStore() {
   const persist = (useAuthStore as typeof useAuthStore & { persist?: any }).persist;
   if (persist?.clearStorage) {
@@ -124,27 +126,17 @@ const renderSecretsManager = () =>
     </MemoryRouter>,
   );
 
-const setupStore = (overrides: Partial<MockStoreState> = {}) => {
-  useSecretStoreMock.__reset();
-  useSecretStoreMock.mockClear();
-
-  const state: MockStoreState = {
-    secrets: [baseSecret],
-    loading: false,
-    error: null,
-    initialized: true,
-    fetchSecrets: overrides.fetchSecrets ?? mock().mockResolvedValue(undefined),
-    createSecret: overrides.createSecret ?? mock().mockResolvedValue(baseSecret),
-    rotateSecret: overrides.rotateSecret ?? mock().mockResolvedValue(baseSecret),
-    updateSecret: overrides.updateSecret ?? mock().mockResolvedValue(baseSecret),
-    deleteSecret: overrides.deleteSecret ?? mock().mockResolvedValue(undefined),
-    getSecretById: overrides.getSecretById ?? mock(),
-    refresh: overrides.refresh ?? mock().mockResolvedValue(undefined),
-  };
-
-  useSecretStoreMock.__setState(state);
-
-  return state;
+const setupStore = (overrides: MockQueryOverrides = {}) => {
+  mockQueryState.secrets = overrides.secrets ?? [baseSecret];
+  mockQueryState.isLoading = overrides.isLoading ?? false;
+  mockQueryState.error = overrides.error ?? null;
+  mockQueryState.createSecret = overrides.createSecret ?? mock().mockResolvedValue(baseSecret);
+  mockQueryState.updateSecret = overrides.updateSecret ?? mock().mockResolvedValue(baseSecret);
+  mockQueryState.rotateSecret = overrides.rotateSecret ?? mock().mockResolvedValue(baseSecret);
+  mockQueryState.deleteSecret = overrides.deleteSecret ?? mock().mockResolvedValue(undefined);
+  mockInvalidateQueries.mockClear();
+
+  return mockQueryState;
 };
 
 const openEditDialog = async () => {
@@ -194,10 +186,13 @@ describe('SecretsManager edit dialog', () => {
     await screen.findByText('Secret "Updated Secret" updated successfully.');
 
     expect(updateSecret).toHaveBeenCalledTimes(1);
-    expect(updateSecret).toHaveBeenCalledWith(baseSecret.id, {
-      name: 'Updated Secret',
-      description: 'Original secret',
-      tags: ['prod', 'api'],
+    expect(updateSecret).toHaveBeenCalledWith({
+      id: baseSecret.id,
+      input: {
+        name: 'Updated Secret',
+        description: 'Original secret',
+        tags: ['prod', 'api'],
+      },
     });
     expect(rotateSecret).not.toHaveBeenCalled();
   });
@@ -224,7 +219,10 @@ describe('SecretsManager edit dialog', () => {
     await screen.findByText('Secret "Prod API Key" rotated successfully.');
 
     expect(rotateSecret).toHaveBeenCalledTimes(1);
-    expect(rotateSecret).toHaveBeenCalledWith(baseSecret.id, { value: 'rotated-value' });
+    expect(rotateSecret).toHaveBeenCalledWith({
+      id: baseSecret.id,
+      input: { value: 'rotated-value' },
+    });
     expect(updateSecret).not.toHaveBeenCalled();
   });
 
@@ -256,12 +254,18 @@ describe('SecretsManager edit dialog', () => {
 
     await screen.findByText('Secret "Prod API Key v2" updated and rotated successfully.');
 
-    expect(updateSecret).toHaveBeenCalledWith(baseSecret.id, {
-      name: 'Prod API Key v2',
-      description: 'Original secret',
-      tags: ['prod', 'api'],
+    expect(updateSecret).toHaveBeenCalledWith({
+      id: baseSecret.id,
+      input: {
+        name: 'Prod API Key v2',
+        description: 'Original secret',
+        tags: ['prod', 'api'],
+      },
+    });
+    expect(rotateSecret).toHaveBeenCalledWith({
+      id: baseSecret.id,
+      input: { value: 'next-secret' },
     });
-    expect(rotateSecret).toHaveBeenCalledWith(baseSecret.id, { value: 'next-secret' });
   });
 
   it('does not call update or rotate when no changes are submitted', async () => {
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 03d26798..eeb89856 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -36,7 +36,7 @@ type CreateApiKeyResponseDto = components['schemas']['CreateApiKeyResponseDto'];
 type CreateApiKeyDto = components['schemas']['CreateApiKeyDto'];
 type UpdateApiKeyDto = components['schemas']['UpdateApiKeyDto'];
 
-interface TerminalChunkResponse {
+export interface TerminalChunkResponse {
   runId: string;
   cursor?: string;
   chunks: {
@@ -59,6 +59,7 @@ export interface WorkflowSummary {
   isSystem: boolean;
   templateId: string | null;
   lastRun: string | null;
+  latestRunStatus: string | null;
   runCount: number;
   nodeCount: number;
   createdAt: string;
diff --git a/frontend/src/services/mcpGroupsApi.ts b/frontend/src/services/mcpGroupsApi.ts
index 65e6c214..0bcfc75d 100644
--- a/frontend/src/services/mcpGroupsApi.ts
+++ b/frontend/src/services/mcpGroupsApi.ts
@@ -11,6 +11,7 @@ export interface McpGroupResponse {
   defaultDockerImage?: string | null;
   createdAt: string;
   updatedAt: string;
+  servers?: McpGroupServerResponse[];
 }
 
 export interface McpGroupServerResponse {
@@ -79,6 +80,23 @@ export const mcpGroupsApi = {
     return response.json();
   },
 
+  /**
+   * Fetch all MCP groups with their servers embedded (avoids N+1 queries)
+   */
+  async listGroupsWithServers(): Promise<McpGroupResponse[]> {
+    const headers = await getApiAuthHeaders();
+    const response = await fetch(`${API_BASE_URL}/api/v1/mcp-groups?includeServers=true`, {
+      headers,
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ message: 'Failed to fetch groups' }));
+      throw new Error(error.message || 'Failed to fetch MCP groups');
+    }
+
+    return response.json();
+  },
+
   /**
    * Fetch available group templates
    */
diff --git a/frontend/src/store/README.md b/frontend/src/store/README.md
index 7cb7823c..b563791b 100644
--- a/frontend/src/store/README.md
+++ b/frontend/src/store/README.md
@@ -1,45 +1,42 @@
 # Store Directory
 
-State management using Zustand for frontend application state.
+Client-only UI state management using Zustand.
+
+> **Server state (API data) does NOT belong here.** Use TanStack Query hooks in `src/hooks/queries/` instead. See `frontend/docs/state.md` for the decision guide.
 
 ## Store Files
 
-- **executionTimelineStore.ts** - Timeline state for workflow execution visualization
-- **workflowStore.ts** - Current workflow editor state (nodes, edges, viewport)
-- **authStore.ts** - Authentication and user session state
-- **uiStore.ts** - Global UI state (modals, sidebars, theme)
+- **workflowStore.ts** — Current workflow editor state (nodes, edges, viewport)
+- **workflowUiStore.ts** — Canvas UI toggles, panel sizing, minimap state
+- **executionStore.ts** — Workflow run lifecycle, SSE stream wiring, log/event aggregation
+- **executionTimelineStore.ts** — Timeline playback state, selected run/node
+- **authStore.ts** — Authentication and user session state (used by `queryKeys.ts` for org scoping)
 
-## State Management Pattern
+## When to Use Zustand vs TanStack Query
 
-### Zustand Stores
-- Lightweight, simple state management
-- TypeScript-first with proper type safety
-- Selectors for derived state
-- Actions for state mutations
-- Subscribe to specific state slices
+| Data source                            | Tool                                       |
+| -------------------------------------- | ------------------------------------------ |
+| Backend API response                   | TanStack Query hook (`src/hooks/queries/`) |
+| UI-only state shared across components | Zustand store (this directory)             |
+| UI-only state scoped to one component  | Local `useState`                           |
 
-### Timeline Store Features
-- Event-based timeline state management
-- Node status tracking (pending, running, completed, failed)
-- Playback position and speed control
-- Real-time event processing and visualization
+## Usage Example
 
-### Usage Example
 ```typescript
 import { useExecutionTimelineStore } from '../store/executionTimelineStore';
 
 const { events, currentNode, isPlaying, setPosition } = useExecutionTimelineStore();
 
-// Subscribe to specific state
-const currentEvent = useExecutionTimelineStore(state =>
-  state.events.find(e => e.nodeRef === currentNode)
+// Subscribe to specific state slice to prevent unnecessary re-renders
+const currentEvent = useExecutionTimelineStore((state) =>
+  state.events.find((e) => e.nodeRef === currentNode),
 );
 ```
 
 ## Best Practices
 
-- Keep stores focused on specific domains
+- Keep stores focused on client-only UI concerns
+- Never store API data in Zustand — use TanStack Query instead
 - Use TypeScript interfaces for state shape
-- Implement proper state selectors to prevent unnecessary re-renders
+- Use selectors to subscribe to specific slices and prevent unnecessary re-renders
 - Separate actions from state mutations
-- Use middleware for logging and persistence when needed
\ No newline at end of file
diff --git a/frontend/src/store/__tests__/componentStore.test.ts b/frontend/src/store/__tests__/componentStore.test.ts
deleted file mode 100644
index 875ea88f..00000000
--- a/frontend/src/store/__tests__/componentStore.test.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { beforeEach, describe, expect, it, mock } from 'bun:test';
-
-import { useComponentStore } from '../componentStore';
-import type { ComponentMetadata } from '@/schemas/component';
-
-const mockComponents: ComponentMetadata[] = [
-  {
-    id: 'core.workflow.entrypoint',
-    slug: 'entry-point',
-    name: 'Entry Point',
-    version: '2.0.0',
-    type: 'trigger',
-    category: 'input',
-    categoryConfig: {
-      label: 'Input',
-      color: 'text-blue-600',
-      description: 'Data sources, triggers, and credential access',
-      emoji: '📥',
-      icon: 'Download',
-    },
-    description: '',
-    documentation: null,
-    documentationUrl: null,
-    icon: 'Play',
-    logo: null,
-    author: null,
-    isLatest: true,
-    deprecated: false,
-    example: null,
-    runner: { kind: 'inline' },
-    inputs: [],
-    outputs: [],
-    parameters: [],
-    examples: [],
-  },
-  {
-    id: 'shipsec.subfinder.run',
-    slug: 'subfinder',
-    name: 'Subfinder',
-    version: '1.0.0',
-    type: 'scan',
-    category: 'security',
-    categoryConfig: {
-      label: 'Security Tools',
-      color: 'text-red-600',
-      description: 'Security scanning and assessment tools',
-      emoji: '🔒',
-      icon: 'Shield',
-    },
-    description: '',
-    documentation: null,
-    documentationUrl: null,
-    icon: 'Radar',
-    logo: null,
-    author: null,
-    isLatest: true,
-    deprecated: false,
-    example: null,
-    runner: { kind: 'docker' },
-    inputs: [],
-    outputs: [],
-    parameters: [],
-    examples: [],
-  },
-  {
-    id: 'shipsec.httpx.scan',
-    slug: 'httpx',
-    name: 'httpx Web Probe',
-    version: '1.0.0',
-    type: 'scan',
-    category: 'security',
-    categoryConfig: {
-      label: 'Security Tools',
-      color: 'text-red-600',
-      description: 'Security scanning and assessment tools',
-      emoji: '🔒',
-      icon: 'Shield',
-    },
-    description: '',
-    documentation: null,
-    documentationUrl: null,
-    icon: 'Globe',
-    logo: null,
-    author: null,
-    isLatest: true,
-    deprecated: false,
-    example: null,
-    runner: { kind: 'docker' },
-    inputs: [],
-    outputs: [],
-    parameters: [],
-    examples: [],
-  },
-];
-
-const listComponentsMock = mock(async () => mockComponents);
-
-mock.module('@/services/api', () => ({
-  api: {
-    components: {
-      list: listComponentsMock,
-    },
-  },
-}));
-
-describe('componentStore', () => {
-  beforeEach(() => {
-    useComponentStore.setState({
-      components: {},
-      slugIndex: {},
-      loading: false,
-      error: null,
-    });
-  });
-
-  it('loads security scan components including httpx from the API', async () => {
-    await useComponentStore.getState().fetchComponents();
-
-    const scanComponents = useComponentStore.getState().getComponentsByType('scan');
-    const scanSlugs = scanComponents.map((component) => component.slug);
-
-    expect(scanSlugs).toContain('httpx');
-  });
-});
diff --git a/frontend/src/store/__tests__/executionStore.test.ts b/frontend/src/store/__tests__/executionStore.test.ts
index b106354d..b5a65ded 100644
--- a/frontend/src/store/__tests__/executionStore.test.ts
+++ b/frontend/src/store/__tests__/executionStore.test.ts
@@ -67,6 +67,64 @@ mock.module('@/services/api', () => ({
   },
 }));
 
+// Mock authStore so queryKeys.getOrgScope() works in CI where Zustand stores
+// may not initialize properly
+mock.module('@/store/authStore', () => ({
+  useAuthStore: Object.assign(
+    mock(() => ({})),
+    {
+      getState: mock(() => ({ organizationId: 'test-org' })),
+      subscribe: mock(() => () => {}),
+      setState: mock(),
+    },
+  ),
+}));
+
+// Mock executionQueryOptions to avoid queryKeys → authStore dependency chain
+mock.module('@/lib/executionQueryOptions', () => ({
+  executionStatusOptions: (runId: string) => ({
+    queryKey: ['executions', 'status', runId],
+    queryFn: () => mockExecutions.getStatus(),
+    staleTime: 0,
+    gcTime: 30_000,
+    retry: false,
+  }),
+  executionTraceOptions: (runId: string) => ({
+    queryKey: ['executions', 'trace', runId],
+    queryFn: () => mockExecutions.getTrace(),
+    staleTime: 0,
+    gcTime: 30_000,
+    retry: false,
+  }),
+  executionTerminalChunksOptions: (runId: string, nodeRef: string, stream: string) => ({
+    queryKey: ['executions', 'terminalChunks', runId, nodeRef, stream],
+    queryFn: mock(),
+    staleTime: 10_000,
+    gcTime: 30_000,
+  }),
+}));
+
+// Mock queryClient so fetchQuery calls the queryFn from our mocked options
+mock.module('@/lib/queryClient', () => ({
+  queryClient: {
+    fetchQuery: mock(async (options: { queryFn: () => Promise<any> }) => {
+      return options.queryFn();
+    }),
+    getQueryData: mock(() => undefined),
+    setQueryData: mock(),
+    invalidateQueries: mock(),
+    prefetchQuery: mock(),
+  },
+}));
+
+// Mock invalidateRunsForWorkflow to avoid unrelated side effects
+mock.module('@/hooks/queries/useRunQueries', () => ({
+  invalidateRunsForWorkflow: mock(),
+  upsertRunInCache: mock(),
+  fetchMoreRuns: mock(),
+  getRunByIdFromCache: mock(() => null),
+}));
+
 import { useExecutionStore } from '../executionStore';
 import type { ExecutionLog, ExecutionStatusResponse } from '@/schemas/execution';
 
diff --git a/frontend/src/store/__tests__/runStore.test.ts b/frontend/src/store/__tests__/runStore.test.ts
deleted file mode 100644
index 9706ad24..00000000
--- a/frontend/src/store/__tests__/runStore.test.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-import { beforeEach, describe, expect, it, mock } from 'bun:test';
-
-import { RUNS_STALE_MS, resetRunStoreState, useRunStore } from '../runStore';
-
-const mockRun = {
-  id: 'run-1',
-  workflowId: 'wf-1',
-  workflowName: 'Example workflow',
-  status: 'RUNNING',
-  startTime: '2024-01-01T00:00:00.000Z',
-  nodeCount: 3,
-  eventCount: 10,
-};
-
-const listRunsMock = mock(async () => ({
-  runs: [mockRun],
-}));
-
-mock.module('@/services/api', () => ({
-  api: {
-    executions: {
-      listRuns: listRunsMock,
-    },
-  },
-}));
-
-describe('runStore', () => {
-  beforeEach(() => {
-    resetRunStoreState();
-    listRunsMock.mockReset();
-    listRunsMock.mockImplementation(async () => ({ runs: [mockRun] }));
-  });
-
-  it('dedupes concurrent fetches per workflow', async () => {
-    listRunsMock.mockImplementation(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 5));
-      return { runs: [mockRun] };
-    });
-
-    await Promise.all([
-      useRunStore.getState().fetchRuns({ workflowId: 'wf-1' }),
-      useRunStore.getState().fetchRuns({ workflowId: 'wf-1' }),
-    ]);
-
-    expect(listRunsMock.mock.calls.length).toBe(1);
-  });
-
-  it('maintains independent caches per workflow', async () => {
-    await useRunStore.getState().fetchRuns({ workflowId: 'wf-1' });
-    listRunsMock.mockClear();
-
-    await useRunStore.getState().fetchRuns({ workflowId: 'wf-2' });
-    expect(listRunsMock.mock.calls.length).toBe(1);
-  });
-
-  it('skips network when a workflow cache is still fresh', async () => {
-    await useRunStore.getState().fetchRuns({ workflowId: 'wf-1' });
-    expect(listRunsMock.mock.calls.length).toBe(1);
-
-    listRunsMock.mockClear();
-    await useRunStore.getState().fetchRuns({ workflowId: 'wf-1' });
-    expect(listRunsMock.mock.calls.length).toBe(0);
-  });
-
-  it('forces a refresh when requested', async () => {
-    await useRunStore.getState().fetchRuns({ workflowId: 'wf-1' });
-    listRunsMock.mockClear();
-
-    await useRunStore.getState().fetchRuns({ workflowId: 'wf-1', force: true });
-    expect(listRunsMock.mock.calls.length).toBe(1);
-  });
-
-  it('keeps queued/running executions marked as live even when an endTime is set', async () => {
-    listRunsMock.mockImplementation(async () => ({
-      runs: [
-        {
-          ...mockRun,
-          endTime: new Date(Date.now() + 60_000).toISOString(),
-        },
-      ],
-    }));
-
-    await useRunStore.getState().fetchRuns({ workflowId: 'wf-1', force: true });
-    const runs = useRunStore.getState().getRunsForWorkflow('wf-1');
-    expect(runs[0]?.isLive).toBe(true);
-  });
-
-  it('allows manual invalidation across caches', async () => {
-    await useRunStore.getState().fetchRuns({ workflowId: 'wf-1' });
-    listRunsMock.mockClear();
-
-    useRunStore.getState().invalidate();
-    await useRunStore.getState().fetchRuns({ workflowId: 'wf-1' });
-    expect(listRunsMock.mock.calls.length).toBe(1);
-  });
-
-  it('upserts runs into workflow caches in sorted order', () => {
-    const store = useRunStore.getState();
-    store.upsertRun({
-      id: 'run-new',
-      workflowId: 'wf-1',
-      workflowName: 'Example workflow',
-      status: 'COMPLETED',
-      startTime: new Date(Date.now() - RUNS_STALE_MS).toISOString(),
-      nodeCount: 1,
-      eventCount: 1,
-      createdAt: new Date().toISOString(),
-      isLive: false,
-      workflowVersionId: null,
-      workflowVersion: null,
-      triggerType: 'manual',
-      triggerSource: null,
-      triggerLabel: 'Manual run',
-      inputPreview: { runtimeInputs: {}, nodeOverrides: {} },
-    });
-
-    store.upsertRun({
-      id: 'run-earlier',
-      workflowId: 'wf-1',
-      workflowName: 'Example workflow',
-      status: 'FAILED',
-      startTime: '2023-12-31T00:00:00.000Z',
-      nodeCount: 1,
-      eventCount: 1,
-      createdAt: '2023-12-31T00:00:00.000Z',
-      isLive: false,
-      workflowVersionId: null,
-      workflowVersion: null,
-      triggerType: 'manual',
-      triggerSource: null,
-      triggerLabel: 'Manual run',
-      inputPreview: { runtimeInputs: {}, nodeOverrides: {} },
-    });
-
-    const runs = useRunStore.getState().getRunsForWorkflow('wf-1');
-    expect(runs[0].id).toBe('run-new');
-
-    store.upsertRun({
-      ...runs[0],
-      status: 'FAILED',
-    });
-
-    expect(useRunStore.getState().getRunsForWorkflow('wf-1')[0].status).toBe('FAILED');
-  });
-
-  it('normalizes trigger metadata and preview defaults', async () => {
-    listRunsMock.mockImplementation(async () => ({
-      runs: [
-        {
-          ...mockRun,
-          triggerType: undefined,
-          triggerLabel: undefined,
-          triggerSource: undefined,
-          inputPreview: undefined,
-        },
-      ],
-    }));
-
-    await useRunStore.getState().fetchRuns({ workflowId: 'wf-1', force: true });
-    const [run] = useRunStore.getState().getRunsForWorkflow('wf-1');
-    expect(run.triggerType).toBe('manual');
-    expect(run.triggerLabel).toBe('Manual run');
-    expect(run.triggerSource).toBeNull();
-    expect(run.inputPreview).toEqual({ runtimeInputs: {}, nodeOverrides: {} });
-  });
-});
diff --git a/frontend/src/store/__tests__/scheduleStore.test.ts b/frontend/src/store/__tests__/scheduleStore.test.ts
deleted file mode 100644
index ffcbb428..00000000
--- a/frontend/src/store/__tests__/scheduleStore.test.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import { beforeEach, describe, expect, it, mock } from 'bun:test';
-import type { WorkflowSchedule } from '@shipsec/shared';
-
-import { resetScheduleStoreState, useScheduleStore } from '../scheduleStore';
-
-const now = new Date().toISOString();
-
-const baseSchedule: WorkflowSchedule = {
-  id: '11111111-1111-4111-8111-111111111111',
-  workflowId: '22222222-2222-4222-8222-222222222222',
-  workflowVersionId: '33333333-3333-4333-8333-333333333333',
-  workflowVersion: 1,
-  name: 'Daily Quick Scan',
-  description: null,
-  cronExpression: '0 9 * * *',
-  timezone: 'UTC',
-  humanLabel: null,
-  overlapPolicy: 'skip',
-  catchupWindowSeconds: 0,
-  status: 'active',
-  lastRunAt: null,
-  nextRunAt: null,
-  inputPayload: { runtimeInputs: { domain: 'acme.com' }, nodeOverrides: {} },
-  temporalScheduleId: null,
-  temporalSnapshot: {},
-  organizationId: 'local-dev',
-  createdAt: now,
-  updatedAt: now,
-};
-
-const listMock = mock(async () => [baseSchedule]);
-const pauseMock = mock(async () => ({ ...baseSchedule, status: 'paused' as const }));
-const resumeMock = mock(async () => ({ ...baseSchedule, status: 'active' as const }));
-const runNowCalls: string[] = [];
-const runNowMock = mock(async (id: string) => {
-  runNowCalls.push(id);
-});
-
-mock.module('@/services/api', () => ({
-  api: {
-    schedules: {
-      list: listMock,
-      pause: pauseMock,
-      resume: resumeMock,
-      runNow: runNowMock,
-    },
-  },
-}));
-
-describe('scheduleStore', () => {
-  beforeEach(() => {
-    resetScheduleStoreState();
-    listMock.mockReset();
-    pauseMock.mockReset();
-    resumeMock.mockReset();
-    runNowMock.mockReset();
-    listMock.mockImplementation(async () => [baseSchedule]);
-    pauseMock.mockImplementation(async () => ({ ...baseSchedule, status: 'paused' }));
-    resumeMock.mockImplementation(async () => ({ ...baseSchedule, status: 'active' }));
-    runNowCalls.length = 0;
-    runNowMock.mockImplementation(async (id: string) => {
-      runNowCalls.push(id);
-    });
-  });
-
-  it('fetches schedules once while cache is fresh', async () => {
-    await useScheduleStore.getState().fetchSchedules();
-    await useScheduleStore.getState().fetchSchedules();
-    expect(listMock.mock.calls.length).toBe(1);
-  });
-
-  it('forces refresh when requested', async () => {
-    await useScheduleStore.getState().fetchSchedules();
-    listMock.mockClear();
-    await useScheduleStore.getState().fetchSchedules({ force: true });
-    expect(listMock.mock.calls.length).toBe(1);
-  });
-
-  it('updates local state when pausing and resuming schedules', async () => {
-    useScheduleStore.setState({ schedules: [baseSchedule] });
-
-    const paused = await useScheduleStore.getState().pauseSchedule(baseSchedule.id);
-    expect(paused.status).toBe('paused');
-    expect(useScheduleStore.getState().schedules[0]?.status).toBe('paused');
-
-    const resumed = await useScheduleStore.getState().resumeSchedule(baseSchedule.id);
-    expect(resumed.status).toBe('active');
-    expect(useScheduleStore.getState().schedules[0]?.status).toBe('active');
-  });
-
-  it('runs schedules via API without mutating cache', async () => {
-    await useScheduleStore.getState().runSchedule(baseSchedule.id);
-    expect(runNowCalls.length).toBe(1);
-    expect(runNowCalls[0]).toBe(baseSchedule.id);
-    expect(useScheduleStore.getState().schedules).toHaveLength(0);
-  });
-
-  it('merges filters without resetting other state', () => {
-    useScheduleStore.getState().setFilters({ workflowId: baseSchedule.workflowId });
-    useScheduleStore.getState().setFilters({ status: 'paused' });
-
-    const filters = useScheduleStore.getState().filters;
-    expect(filters.workflowId).toBe(baseSchedule.workflowId);
-    expect(filters.status).toBe('paused');
-    expect(filters.search).toBe('');
-  });
-});
diff --git a/frontend/src/store/apiKeyStore.ts b/frontend/src/store/apiKeyStore.ts
deleted file mode 100644
index 663d661d..00000000
--- a/frontend/src/store/apiKeyStore.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { create } from 'zustand';
-import { api } from '@/services/api';
-import type { components } from '@shipsec/backend-client';
-
-type ApiKeyResponseDto = components['schemas']['ApiKeyResponseDto'];
-type CreateApiKeyResponseDto = components['schemas']['CreateApiKeyResponseDto'];
-type CreateApiKeyDto = components['schemas']['CreateApiKeyDto'];
-type UpdateApiKeyDto = components['schemas']['UpdateApiKeyDto'];
-
-interface ApiKeyStoreState {
-  apiKeys: ApiKeyResponseDto[];
-  loading: boolean;
-  error: string | null;
-  initialized: boolean;
-  lastCreatedKey: string | null; // Store the plaintext key temporarily
-}
-
-interface ApiKeyStoreActions {
-  fetchApiKeys: (force?: boolean) => Promise<void>;
-  createApiKey: (input: CreateApiKeyDto) => Promise<CreateApiKeyResponseDto>;
-  updateApiKey: (id: string, input: UpdateApiKeyDto) => Promise<ApiKeyResponseDto>;
-  revokeApiKey: (id: string) => Promise<ApiKeyResponseDto>;
-  deleteApiKey: (id: string) => Promise<void>;
-  getApiKeyById: (id: string) => ApiKeyResponseDto | undefined;
-  clearLastCreatedKey: () => void;
-  reset: () => void;
-}
-
-type ApiKeyStore = ApiKeyStoreState & ApiKeyStoreActions;
-
-export const useApiKeyStore = create<ApiKeyStore>((set, get) => ({
-  apiKeys: [],
-  loading: false,
-  error: null,
-  initialized: false,
-  lastCreatedKey: null,
-
-  fetchApiKeys: async (force = false) => {
-    const { loading, initialized } = get();
-    if (loading || (!force && initialized)) {
-      return;
-    }
-
-    set({ loading: true, error: null });
-    try {
-      const apiKeys = await api.apiKeys.list();
-      set({
-        apiKeys: apiKeys.sort(
-          (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-        ),
-        loading: false,
-        error: null,
-        initialized: true,
-      });
-    } catch (error) {
-      set({
-        error: error instanceof Error ? error.message : 'Failed to load API keys',
-        loading: false,
-      });
-    }
-  },
-
-  createApiKey: async (input: CreateApiKeyDto) => {
-    set({ loading: true, error: null });
-    try {
-      const created = await api.apiKeys.create(input);
-      // The backend returns the plain key only in the creation response one time.
-      // CreateApiKeyResponseDto includes plainKey field.
-      const plainKey = created.plainKey;
-
-      set((state) => ({
-        apiKeys: [created, ...state.apiKeys],
-        lastCreatedKey: plainKey || null,
-        loading: false,
-        error: null,
-      }));
-      return created;
-    } catch (error) {
-      const message = error instanceof Error ? error.message : 'Failed to create API key';
-      set({ error: message, loading: false });
-      throw error instanceof Error ? error : new Error(message);
-    }
-  },
-
-  updateApiKey: async (id: string, input: UpdateApiKeyDto) => {
-    set({ error: null });
-    try {
-      const updated = await api.apiKeys.update(id, input);
-      set((state) => ({
-        apiKeys: state.apiKeys.map((key) => (key.id === id ? updated : key)),
-        error: null,
-      }));
-      return updated;
-    } catch (error) {
-      const message = error instanceof Error ? error.message : 'Failed to update API key';
-      set({ error: message });
-      throw error instanceof Error ? error : new Error(message);
-    }
-  },
-
-  revokeApiKey: async (id: string) => {
-    set({ error: null });
-    try {
-      const revoked = await api.apiKeys.revoke(id);
-      set((state) => ({
-        apiKeys: state.apiKeys.map((key) => (key.id === id ? revoked : key)),
-        error: null,
-      }));
-      return revoked;
-    } catch (error) {
-      const message = error instanceof Error ? error.message : 'Failed to revoke API key';
-      set({ error: message });
-      throw error instanceof Error ? error : new Error(message);
-    }
-  },
-
-  deleteApiKey: async (id: string) => {
-    set({ error: null });
-    try {
-      await api.apiKeys.delete(id);
-      set((state) => ({
-        apiKeys: state.apiKeys.filter((key) => key.id !== id),
-        error: null,
-      }));
-    } catch (error) {
-      const message = error instanceof Error ? error.message : 'Failed to delete API key';
-      set({ error: message });
-      throw error instanceof Error ? error : new Error(message);
-    }
-  },
-
-  getApiKeyById: (id: string) => {
-    return get().apiKeys.find((key) => key.id === id);
-  },
-
-  clearLastCreatedKey: () => {
-    set({ lastCreatedKey: null });
-  },
-
-  reset: () => {
-    set({
-      apiKeys: [],
-      error: null,
-      initialized: false,
-      lastCreatedKey: null,
-      loading: false,
-    });
-  },
-}));
diff --git a/frontend/src/store/artifactStore.ts b/frontend/src/store/artifactStore.ts
deleted file mode 100644
index 5b355452..00000000
--- a/frontend/src/store/artifactStore.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import { create } from 'zustand';
-import type { ArtifactMetadata } from '@shipsec/shared';
-import { api, type ArtifactListFilters } from '@/services/api';
-
-interface RunArtifactEntry {
-  artifacts: ArtifactMetadata[];
-  loading: boolean;
-  error: string | null;
-  lastFetched?: number;
-}
-
-interface ArtifactStoreState {
-  runArtifacts: Record<string, RunArtifactEntry | undefined>;
-  library: ArtifactMetadata[];
-  libraryLoading: boolean;
-  libraryError: string | null;
-  libraryFilters?: ArtifactListFilters;
-  downloading: Record<string, boolean>;
-  deleting: Record<string, boolean>;
-  fetchRunArtifacts: (runId: string, force?: boolean) => Promise<void>;
-  fetchLibrary: (filters?: ArtifactListFilters) => Promise<void>;
-  downloadArtifact: (artifact: ArtifactMetadata, options?: { runId?: string }) => Promise<void>;
-  deleteArtifact: (artifactId: string) => Promise<void>;
-}
-
-export const useArtifactStore = create<ArtifactStoreState>((set, get) => ({
-  runArtifacts: {},
-  library: [],
-  libraryLoading: false,
-  libraryError: null,
-  downloading: {},
-  deleting: {},
-  async fetchRunArtifacts(runId: string, force = false) {
-    const existing = get().runArtifacts[runId];
-    if (!force && existing && !existing.error && existing.artifacts.length > 0) {
-      return;
-    }
-
-    set((state) => ({
-      runArtifacts: {
-        ...state.runArtifacts,
-        [runId]: {
-          artifacts: existing?.artifacts ?? [],
-          loading: true,
-          error: null,
-        },
-      },
-    }));
-
-    try {
-      const response = await api.executions.getArtifacts(runId);
-      set((state) => ({
-        runArtifacts: {
-          ...state.runArtifacts,
-          [runId]: {
-            artifacts: response.artifacts ?? [],
-            loading: false,
-            error: null,
-            lastFetched: Date.now(),
-          },
-        },
-      }));
-    } catch (error) {
-      set((state) => ({
-        runArtifacts: {
-          ...state.runArtifacts,
-          [runId]: {
-            artifacts: existing?.artifacts ?? [],
-            loading: false,
-            error: error instanceof Error ? error.message : 'Failed to load artifacts',
-            lastFetched: existing?.lastFetched,
-          },
-        },
-      }));
-    }
-  },
-  async fetchLibrary(filters) {
-    set({ libraryLoading: true, libraryError: null, libraryFilters: filters });
-    try {
-      const response = await api.artifacts.list(filters);
-      set({
-        library: response.artifacts ?? [],
-        libraryLoading: false,
-        libraryError: null,
-      });
-    } catch (error) {
-      set({
-        libraryLoading: false,
-        libraryError: error instanceof Error ? error.message : 'Failed to load artifacts',
-      });
-    }
-  },
-  async downloadArtifact(artifact, options) {
-    set((state) => ({
-      downloading: { ...state.downloading, [artifact.id]: true },
-    }));
-    try {
-      const blob = options?.runId
-        ? await api.executions.downloadArtifact(options.runId, artifact.id)
-        : await api.artifacts.download(artifact.id);
-      const url = window.URL.createObjectURL(blob);
-      const link = document.createElement('a');
-      link.href = url;
-      link.download = artifact.name || `artifact-${artifact.id}`;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      window.URL.revokeObjectURL(url);
-    } catch (error) {
-      console.error('Failed to download artifact', error);
-      throw error;
-    } finally {
-      set((state) => {
-        const { [artifact.id]: _removed, ...next } = state.downloading;
-        return { downloading: next };
-      });
-    }
-  },
-  async deleteArtifact(artifactId: string) {
-    set((state) => ({
-      deleting: { ...state.deleting, [artifactId]: true },
-    }));
-    try {
-      await api.artifacts.delete(artifactId);
-      // Remove artifact from library after successful deletion
-      set((state) => ({
-        library: state.library.filter((a) => a.id !== artifactId),
-      }));
-    } catch (error) {
-      console.error('Failed to delete artifact', error);
-      throw error;
-    } finally {
-      set((state) => {
-        const { [artifactId]: _removed, ...next } = state.deleting;
-        return { deleting: next };
-      });
-    }
-  },
-}));
diff --git a/frontend/src/store/componentStore.ts b/frontend/src/store/componentStore.ts
deleted file mode 100644
index d898e2ef..00000000
--- a/frontend/src/store/componentStore.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-import { create } from 'zustand';
-import { ComponentMetadata } from '@/schemas/component';
-import { api } from '@/services/api';
-
-interface ComponentStoreState {
-  components: Record<string, ComponentMetadata>;
-  slugIndex: Record<string, string>;
-  loading: boolean;
-  error: string | null;
-}
-
-interface ComponentStore extends ComponentStoreState {
-  fetchComponents: () => Promise<void>;
-  getComponent: (ref?: string | null) => ComponentMetadata | null;
-  getComponentsByType: (type: ComponentMetadata['type']) => ComponentMetadata[];
-  getComponentsByCategory: (category: ComponentMetadata['category']) => ComponentMetadata[];
-  searchComponents: (query: string) => ComponentMetadata[];
-  getAllComponents: () => ComponentMetadata[];
-}
-
-/**
- * Normalize components by ID and maintain a slug lookup table.
- * Backend returns optional fields, so we filter out invalid components
- */
-function buildIndexes(components: any[]) {
-  const byId: Record<string, ComponentMetadata> = {};
-  const slugIndex: Record<string, string> = {};
-
-  components.forEach((component) => {
-    // Filter out components missing required fields
-    if (!component?.id || !component?.slug || !component?.name) {
-      return;
-    }
-
-    // Convert backend format to ComponentMetadata format
-    // Backend has optional fields, ComponentMetadata has required fields
-    const metadata: ComponentMetadata = {
-      id: component.id,
-      slug: component.slug,
-      name: component.name,
-      version: component.version || '1.0.0',
-      type: component.type || 'process',
-      category: component.category || 'transform',
-      categoryConfig: component.categoryConfig || {
-        label: component.category || 'Other',
-        color: '#666',
-        description: '',
-        emoji: '📦',
-        icon: 'Box',
-      },
-      description: component.description || '',
-      documentation: component.documentation || null,
-      documentationUrl: component.documentationUrl || null,
-      icon: component.icon || null,
-      logo: component.logo || null,
-      author: component.author || null,
-      isLatest: component.isLatest ?? true,
-      deprecated: component.deprecated ?? false,
-      example: component.example || null,
-      runner: component.runner || { kind: 'inline' },
-      inputs: component.inputs || [],
-      outputs: component.outputs || [],
-      parameters: component.parameters || [],
-      examples: component.examples || [],
-      toolProvider: component.toolProvider || null,
-      toolSchema: component.toolSchema ?? null,
-    };
-
-    byId[metadata.id] = metadata;
-    slugIndex[metadata.slug] = metadata.id;
-  });
-
-  return { byId, slugIndex };
-}
-
-/**
- * Component Store
- * Consumes backend component metadata and provides convenient selectors.
- */
-export const useComponentStore = create<ComponentStore>((set, get) => ({
-  components: {},
-  slugIndex: {},
-  loading: false,
-  error: null,
-
-  fetchComponents: async () => {
-    const state = get();
-    // Skip if already loaded or currently loading
-    if (Object.keys(state.components).length > 0 || state.loading) {
-      return;
-    }
-    set({ loading: true, error: null });
-    try {
-      const components = await api.components.list();
-      const { byId, slugIndex } = buildIndexes(components);
-      set({ components: byId, slugIndex, loading: false });
-    } catch (error) {
-      set({
-        error: error instanceof Error ? error.message : 'Failed to fetch components',
-        loading: false,
-      });
-    }
-  },
-
-  getComponent: (ref?: string | null) => {
-    const { components, slugIndex } = get();
-    if (!ref) return null;
-
-    if (components[ref]) {
-      return components[ref];
-    }
-
-    const idFromSlug = slugIndex[ref];
-    if (idFromSlug && components[idFromSlug]) {
-      return components[idFromSlug];
-    }
-
-    return null;
-  },
-
-  getComponentsByType: (type: ComponentMetadata['type']) => {
-    return Object.values(get().components).filter((component) => component.type === type);
-  },
-
-  getComponentsByCategory: (category: ComponentMetadata['category']) => {
-    return Object.values(get().components).filter((component) => component.category === category);
-  },
-
-  searchComponents: (query: string) => {
-    if (!query) {
-      return Object.values(get().components);
-    }
-
-    const normalized = query.toLowerCase();
-    return Object.values(get().components).filter((component) => {
-      return (
-        component.name.toLowerCase().includes(normalized) ||
-        component.slug.toLowerCase().includes(normalized) ||
-        (component.description ?? '').toLowerCase().includes(normalized)
-      );
-    });
-  },
-
-  getAllComponents: () => {
-    return Object.values(get().components);
-  },
-}));
diff --git a/frontend/src/store/executionStore.ts b/frontend/src/store/executionStore.ts
index bd5af4c1..677b246f 100644
--- a/frontend/src/store/executionStore.ts
+++ b/frontend/src/store/executionStore.ts
@@ -1,7 +1,13 @@
 import { create } from 'zustand';
 import { TERMINAL_STATUSES } from '@shipsec/shared';
 import { api } from '@/services/api';
-import { useRunStore } from '@/store/runStore';
+import { queryClient } from '@/lib/queryClient';
+import {
+  executionStatusOptions,
+  executionTraceOptions,
+  executionTerminalChunksOptions,
+} from '@/lib/executionQueryOptions';
+import { invalidateRunsForWorkflow } from '@/hooks/queries/useRunQueries';
 import {
   ExecutionStatusResponseSchema,
   type ExecutionLog,
@@ -214,7 +220,7 @@ export const useExecutionStore = create<ExecutionStore>((set, get) => ({
         // Terminal streams will be populated as new run progresses
         terminalStreams: {},
       });
-      void useRunStore.getState().refreshRuns(workflowId);
+      invalidateRunsForWorkflow(workflowId);
 
       await get().pollOnce();
       get().monitorRun(executionId, workflowId);
@@ -237,7 +243,7 @@ export const useExecutionStore = create<ExecutionStore>((set, get) => ({
       // Fetch final status before stopping polling so runStatus reflects terminal state.
       // This ensures timeline store and other consumers see the TERMINATED/CANCELLED status.
       try {
-        const statusPayload = await api.executions.getStatus(runId);
+        const statusPayload = await queryClient.fetchQuery(executionStatusOptions(runId));
         if (statusPayload) {
           const status = (statusPayload as any)?.status as ExecutionStatus | undefined;
           const lifecycle = mapStatusToLifecycle(status);
@@ -257,7 +263,7 @@ export const useExecutionStore = create<ExecutionStore>((set, get) => ({
 
       const workflowId = get().workflowId;
       if (workflowId) {
-        void useRunStore.getState().refreshRuns(workflowId);
+        invalidateRunsForWorkflow(workflowId);
       }
     } catch (error) {
       console.error('Failed to stop execution:', error);
@@ -279,12 +285,18 @@ export const useExecutionStore = create<ExecutionStore>((set, get) => ({
       set({ workflowId });
     }
 
+    // Skip the first poll tick — selectRun → loadTimeline already fetches
+    // initial events, dataflows, and status. Start polling after a double
+    // interval so the first real poll fires at ~4s instead of ~2s.
+    let isFirstTick = true;
     const poll = async () => {
+      if (isFirstTick) {
+        isFirstTick = false;
+        return;
+      }
       await get().pollOnce();
     };
 
-    poll();
-
     const interval = setInterval(poll, 2000);
     set({ pollingInterval: interval, runId });
 
@@ -302,8 +314,8 @@ export const useExecutionStore = create<ExecutionStore>((set, get) => ({
 
     try {
       const [statusPayload, traceEnvelope] = await Promise.all([
-        api.executions.getStatus(runId),
-        api.executions.getTrace(runId),
+        queryClient.fetchQuery(executionStatusOptions(runId)),
+        queryClient.fetchQuery(executionTraceOptions(runId)),
       ]);
 
       // Safety check: if runId changed or was cleared during await, abort
@@ -350,9 +362,7 @@ export const useExecutionStore = create<ExecutionStore>((set, get) => ({
         get().stopPolling();
         const currentWorkflowId = get().workflowId;
         if (currentWorkflowId) {
-          void useRunStore.getState().refreshRuns(currentWorkflowId);
-        } else {
-          void useRunStore.getState().refreshRuns(undefined);
+          invalidateRunsForWorkflow(currentWorkflowId);
         }
       }
     } catch (error) {
@@ -663,7 +673,9 @@ export const useExecutionStore = create<ExecutionStore>((set, get) => ({
       return;
     }
     try {
-      const result = await api.executions.getTerminalChunks(runId, { nodeRef: nodeId, stream });
+      const result = await queryClient.fetchQuery(
+        executionTerminalChunksOptions(runId, nodeId, stream),
+      );
       if (!result?.chunks || result.chunks.length === 0) {
         return;
       }
diff --git a/frontend/src/store/executionTimelineStore.ts b/frontend/src/store/executionTimelineStore.ts
index 34ac7055..1bf54ae7 100644
--- a/frontend/src/store/executionTimelineStore.ts
+++ b/frontend/src/store/executionTimelineStore.ts
@@ -1,7 +1,13 @@
 import { create } from 'zustand';
 import { subscribeWithSelector } from 'zustand/middleware';
 import { TERMINAL_STATUSES } from '@shipsec/shared';
-import { api } from '@/services/api';
+import { queryClient } from '@/lib/queryClient';
+import { queryKeys } from '@/lib/queryKeys';
+import {
+  executionEventsOptions,
+  executionDataFlowsOptions,
+  executionStatusOptions,
+} from '@/lib/executionQueryOptions';
 import type { ExecutionLog, ExecutionStatusResponse } from '@/schemas/execution';
 import type { NodeStatus } from '@/schemas/node';
 
@@ -503,6 +509,12 @@ export const useExecutionTimelineStore = create<TimelineStore>()(
 
     selectRun: async (runId: string, initialMode: 'live' | 'replay' = 'replay') => {
       const state = get();
+
+      // Idempotent: skip if already selected with same mode
+      if (state.selectedRunId === runId && state.playbackMode === initialMode) {
+        return;
+      }
+
       const previousRunId = state.selectedRunId;
 
       // Save current node selection to history before switching runs
@@ -542,9 +554,9 @@ export const useExecutionTimelineStore = create<TimelineStore>()(
     loadTimeline: async (runId: string) => {
       try {
         const [eventsResponse, dataFlowResponse, statusResponse] = await Promise.all([
-          api.executions.getEvents(runId),
-          api.executions.getDataFlows(runId),
-          api.executions.getStatus(runId).catch(() => null),
+          queryClient.fetchQuery(executionEventsOptions(runId)),
+          queryClient.fetchQuery(executionDataFlowsOptions(runId)),
+          queryClient.fetchQuery(executionStatusOptions(runId)).catch(() => null),
         ]);
 
         // Only fetch historical logs when we're in replay mode (live runs rely on SSE live logs)
@@ -951,28 +963,43 @@ export const initializeTimelineStore = () => {
               },
             );
 
-            // Update run in run store to mark it as completed (removes from live runs)
+            // Update run in TanStack Query cache to mark it as completed (removes from live runs)
             if (runStatus) {
-              void import('./runStore').then(({ useRunStore }) => {
-                const runStore = useRunStore.getState();
-                const existingRun = runStore.getRunById(runId);
-                if (existingRun) {
-                  // Update run with final status and endTime
-                  const endTime =
-                    runStatus.completedAt || runStatus.updatedAt || new Date().toISOString();
-                  runStore.upsertRun({
-                    ...existingRun,
-                    status: runStatus.status,
-                    endTime,
-                    duration: existingRun.startTime
-                      ? new Date(endTime).getTime() - new Date(existingRun.startTime).getTime()
-                      : existingRun.duration,
-                    isLive: false, // Explicitly mark as not live
-                  });
-                }
-              });
+              void import('@/hooks/queries/useRunQueries').then(
+                ({ getRunByIdFromCache, upsertRunInCache }) => {
+                  const existingRun = getRunByIdFromCache(runId);
+                  if (existingRun) {
+                    // Update run with final status and endTime
+                    const endTime =
+                      runStatus.completedAt || runStatus.updatedAt || new Date().toISOString();
+                    upsertRunInCache({
+                      ...existingRun,
+                      status: runStatus.status,
+                      endTime,
+                      duration: existingRun.startTime
+                        ? new Date(endTime).getTime() - new Date(existingRun.startTime).getTime()
+                        : existingRun.duration,
+                      isLive: false, // Explicitly mark as not live
+                    });
+                  }
+                },
+              );
             }
 
+            // Invalidate execution-scoped queries so they do one final fresh fetch
+            // before becoming Infinity-stale (terminal run optimization)
+            import('@/lib/queryClient').then(({ queryClient: qc }) => {
+              qc.invalidateQueries({
+                queryKey: queryKeys.executions.nodeIO(runId),
+              });
+              qc.invalidateQueries({
+                queryKey: queryKeys.executions.result(runId),
+              });
+              qc.invalidateQueries({
+                queryKey: queryKeys.executions.run(runId),
+              });
+            });
+
             useExecutionTimelineStore.setState({
               playbackMode: 'replay',
               isLiveFollowing: false,
diff --git a/frontend/src/store/integrationStore.ts b/frontend/src/store/integrationStore.ts
deleted file mode 100644
index 83e363f5..00000000
--- a/frontend/src/store/integrationStore.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import { create } from 'zustand';
-import type { components } from '@shipsec/backend-client';
-import { api } from '@/services/api';
-
-type IntegrationProvider = components['schemas']['IntegrationProviderResponse'];
-type IntegrationConnection = components['schemas']['IntegrationConnectionResponse'];
-
-interface IntegrationStoreState {
-  providers: IntegrationProvider[];
-  connections: IntegrationConnection[];
-  loadingProviders: boolean;
-  loadingConnections: boolean;
-  error: string | null;
-  initialized: boolean;
-}
-
-interface IntegrationStoreActions {
-  fetchProviders: () => Promise<void>;
-  fetchConnections: (userId: string, force?: boolean) => Promise<void>;
-  refreshConnection: (id: string, userId: string) => Promise<IntegrationConnection>;
-  disconnect: (id: string, userId: string) => Promise<void>;
-  upsertConnection: (connection: IntegrationConnection) => void;
-  resetError: () => void;
-}
-
-type IntegrationStore = IntegrationStoreState & IntegrationStoreActions;
-
-function sortProviders(providers: IntegrationProvider[]) {
-  return [...providers].sort((a, b) => a.name.localeCompare(b.name));
-}
-
-function sortConnections(connections: IntegrationConnection[]) {
-  return [...connections].sort((a, b) => a.providerName.localeCompare(b.providerName));
-}
-
-export const useIntegrationStore = create<IntegrationStore>((set, get) => ({
-  providers: [],
-  connections: [],
-  loadingProviders: false,
-  loadingConnections: false,
-  error: null,
-  initialized: false,
-
-  fetchProviders: async () => {
-    if (get().loadingProviders) {
-      return;
-    }
-
-    set({ loadingProviders: true, error: null });
-    try {
-      const providers = await api.integrations.listProviders();
-      set({
-        providers: sortProviders(providers),
-        loadingProviders: false,
-      });
-    } catch (error) {
-      set({
-        loadingProviders: false,
-        error: error instanceof Error ? error.message : 'Failed to load providers',
-      });
-    }
-  },
-
-  fetchConnections: async (userId: string, force = false) => {
-    const { loadingConnections, initialized } = get();
-    if (loadingConnections || (!force && initialized)) {
-      return;
-    }
-
-    set({ loadingConnections: true, error: null });
-    try {
-      const connections = await api.integrations.listConnections(userId);
-      set({
-        connections: sortConnections(connections),
-        loadingConnections: false,
-        initialized: true,
-      });
-    } catch (error) {
-      set({
-        loadingConnections: false,
-        error: error instanceof Error ? error.message : 'Failed to load integrations',
-      });
-    }
-  },
-
-  upsertConnection: (connection: IntegrationConnection) => {
-    set((state) => ({
-      connections: sortConnections(
-        state.connections.some((item) => item.id === connection.id)
-          ? state.connections.map((item) => (item.id === connection.id ? connection : item))
-          : [...state.connections, connection],
-      ),
-    }));
-  },
-
-  refreshConnection: async (id: string, userId: string) => {
-    try {
-      const refreshed = await api.integrations.refreshConnection(id, userId);
-      set((state) => ({
-        connections: sortConnections(
-          state.connections.map((connection) => (connection.id === id ? refreshed : connection)),
-        ),
-      }));
-      return refreshed;
-    } catch (error) {
-      const message =
-        error instanceof Error ? error.message : 'Failed to refresh integration token';
-      set({ error: message });
-      throw error instanceof Error ? error : new Error(message);
-    }
-  },
-
-  disconnect: async (id: string, userId: string) => {
-    try {
-      await api.integrations.disconnect(id, userId);
-      set((state) => ({
-        connections: state.connections.filter((connection) => connection.id !== id),
-      }));
-    } catch (error) {
-      const message = error instanceof Error ? error.message : 'Failed to disconnect integration';
-      set({ error: message });
-      throw error instanceof Error ? error : new Error(message);
-    }
-  },
-
-  resetError: () => {
-    set({ error: null });
-  },
-}));
diff --git a/frontend/src/store/mcpGroupStore.ts b/frontend/src/store/mcpGroupStore.ts
deleted file mode 100644
index 34e49c7a..00000000
--- a/frontend/src/store/mcpGroupStore.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import { create } from 'zustand';
-import type { McpHealthStatus } from '@shipsec/shared';
-import {
-  mcpGroupsApi,
-  type McpGroupResponse,
-  type McpGroupServerResponse,
-} from '@/services/mcpGroupsApi';
-import { useMcpServerStore } from '@/store/mcpServerStore';
-
-// Store state
-interface McpGroupStoreState {
-  groups: McpGroupResponse[];
-  groupServers: Map<string, McpGroupServerResponse[]>; // groupId -> servers
-  isLoading: boolean;
-  error: string | null;
-  lastFetched: number | null;
-}
-
-// Store actions
-interface McpGroupStoreActions {
-  // Groups
-  fetchGroups: (options?: { force?: boolean }) => Promise<McpGroupResponse[]>;
-  refreshGroups: () => Promise<McpGroupResponse[]>;
-
-  // Group servers
-  fetchGroupServers: (
-    groupId: string,
-    options?: { force?: boolean },
-  ) => Promise<McpGroupServerResponse[]>;
-  getGroupServers: (groupId: string) => McpGroupServerResponse[];
-
-  // Health status (delegates to mcpServerStore)
-  getHealthStatus: (serverId: string) => McpHealthStatus;
-
-  // Local state
-  setError: (message: string | null) => void;
-}
-
-export type McpGroupStore = McpGroupStoreState & McpGroupStoreActions;
-
-const STALE_MS = 30_000; // Groups cache for 30 seconds
-
-const createInitialState = (): McpGroupStoreState => ({
-  groups: [],
-  groupServers: new Map(),
-  isLoading: false,
-  error: null,
-  lastFetched: null,
-});
-
-export const useMcpGroupStore = create<McpGroupStore>((set, get) => ({
-  ...createInitialState(),
-
-  fetchGroups: async (options) => {
-    const { lastFetched, isLoading } = get();
-    const force = options?.force ?? false;
-    const isFresh = lastFetched && Date.now() - lastFetched < STALE_MS;
-
-    if (!force && !isLoading && isFresh) {
-      return get().groups;
-    }
-
-    if (!isLoading) {
-      set({ isLoading: true, error: null });
-    }
-
-    try {
-      const groups = await mcpGroupsApi.listGroups();
-
-      set({
-        groups,
-        isLoading: false,
-        error: null,
-        lastFetched: Date.now(),
-      });
-
-      return groups;
-    } catch (error) {
-      const message = error instanceof Error ? error.message : 'Failed to fetch MCP groups';
-      set({ isLoading: false, error: message });
-      throw error;
-    }
-  },
-
-  refreshGroups: () => get().fetchGroups({ force: true }),
-
-  fetchGroupServers: async (groupId, options) => {
-    const { groupServers, isLoading } = get();
-    const force = options?.force ?? false;
-    const cached = groupServers.get(groupId);
-
-    // Return cached servers if available and not forcing refresh
-    if (!force && !isLoading && cached && cached.length > 0) {
-      return cached;
-    }
-
-    if (!isLoading) {
-      set({ isLoading: true, error: null });
-    }
-
-    try {
-      const servers = await mcpGroupsApi.getGroupServers(groupId);
-
-      set((state) => ({
-        groupServers: new Map(state.groupServers).set(groupId, servers),
-        isLoading: false,
-        error: null,
-      }));
-
-      return servers;
-    } catch (error) {
-      const message = error instanceof Error ? error.message : 'Failed to fetch group servers';
-      set({ isLoading: false, error: message });
-      throw error;
-    }
-  },
-
-  getGroupServers: (groupId) => {
-    return get().groupServers.get(groupId) || [];
-  },
-
-  getHealthStatus: (serverId) => {
-    // Get health status from the server's lastHealthStatus property
-    const server = useMcpServerStore.getState().servers.find((s) => s.id === serverId);
-    return server?.lastHealthStatus ?? 'unknown';
-  },
-
-  setError: (message) => {
-    set({ error: message });
-  },
-}));
-
-// Selector hooks for common use cases
-export const useEnabledMcpGroups = () =>
-  useMcpGroupStore((state) => state.groups.filter((g) => g.enabled));
-
-export const useMcpGroupById = (groupId: string) =>
-  useMcpGroupStore((state) => state.groups.find((g) => g.id === groupId));
-
-export const useMcpGroupServers = (groupId: string) =>
-  useMcpGroupStore((state) => state.groupServers.get(groupId) || []);
-
-export const resetMcpGroupStoreState = () => {
-  useMcpGroupStore.setState({ ...createInitialState() });
-};
diff --git a/frontend/src/store/mcpServerStore.ts b/frontend/src/store/mcpServerStore.ts
deleted file mode 100644
index d9e9e3b0..00000000
--- a/frontend/src/store/mcpServerStore.ts
+++ /dev/null
@@ -1,355 +0,0 @@
-import { create } from 'zustand';
-import type { McpHealthStatus, CreateMcpServer, UpdateMcpServer } from '@shipsec/shared';
-import { getApiAuthHeaders, API_BASE_URL } from '@/services/api';
-import { mcpDiscoveryApi } from '@/services/mcpDiscoveryApi';
-
-// API response types (matching backend DTOs)
-export interface McpServerResponse {
-  id: string;
-  name: string;
-  description?: string | null;
-  transportType: 'http' | 'stdio';
-  endpoint?: string | null;
-  command?: string | null;
-  args?: string[] | null;
-  hasHeaders: boolean;
-  headerKeys?: string[] | null;
-  enabled: boolean;
-  healthCheckUrl?: string | null;
-  lastHealthCheck?: string | null;
-  lastHealthStatus?: McpHealthStatus | null;
-  createdAt: string;
-  updatedAt: string;
-  groupId?: string | null;
-}
-
-export interface McpToolResponse {
-  id: string;
-  toolName: string;
-  description?: string | null;
-  inputSchema?: Record<string, unknown> | null;
-  serverId: string;
-  serverName: string;
-  enabled: boolean;
-  discoveredAt: string;
-}
-
-interface TestConnectionResponse {
-  success: boolean;
-  message?: string;
-  toolCount?: number;
-}
-
-// Store state
-interface McpServerFilters {
-  search: string;
-  enabledOnly: boolean;
-}
-
-interface McpServerStoreState {
-  servers: McpServerResponse[];
-  tools: McpToolResponse[];
-  isLoading: boolean;
-  error: string | null;
-  lastFetched: number | null;
-  filters: McpServerFilters;
-}
-
-interface McpServerStoreActions {
-  // Server CRUD
-  fetchServers: (options?: { force?: boolean }) => Promise<McpServerResponse[]>;
-  refreshServers: () => Promise<McpServerResponse[]>;
-  createServer: (input: CreateMcpServer) => Promise<McpServerResponse>;
-  updateServer: (id: string, input: UpdateMcpServer) => Promise<McpServerResponse>;
-  deleteServer: (id: string) => Promise<void>;
-  toggleServer: (id: string) => Promise<McpServerResponse>;
-  testConnection: (id: string) => Promise<TestConnectionResponse>;
-
-  // Tools
-  fetchServerTools: (serverId: string) => Promise<McpToolResponse[]>;
-  fetchAllTools: () => Promise<McpToolResponse[]>;
-  discoverTools: (serverId: string, options?: { image?: string }) => Promise<McpToolResponse[]>;
-  toggleTool: (serverId: string, toolId: string) => Promise<McpToolResponse>;
-
-  // Filters
-  setFilters: (filters: Partial<McpServerFilters>) => void;
-
-  // Local state
-  upsertServer: (server: McpServerResponse) => void;
-  removeServer: (id: string) => void;
-  setError: (message: string | null) => void;
-}
-
-export type McpServerStore = McpServerStoreState & McpServerStoreActions;
-
-const STALE_MS = 15_000;
-
-const INITIAL_FILTERS: McpServerFilters = {
-  search: '',
-  enabledOnly: false,
-};
-
-const createInitialState = (): McpServerStoreState => ({
-  servers: [],
-  tools: [],
-  isLoading: false,
-  error: null,
-  lastFetched: null,
-  filters: { ...INITIAL_FILTERS },
-});
-
-// API helpers
-async function apiRequest<T>(path: string, options: RequestInit = {}): Promise<T> {
-  const headers = await getApiAuthHeaders();
-  const { signal, ...restOptions } = options;
-  const response = await fetch(`${API_BASE_URL}${path}`, {
-    ...restOptions,
-    signal,
-    headers: {
-      ...headers,
-      'Content-Type': 'application/json',
-      ...options.headers,
-    },
-  });
-
-  if (!response.ok) {
-    const error = await response.json().catch(() => ({ message: 'Request failed' }));
-    throw new Error(error.message || `Request failed: ${response.status}`);
-  }
-
-  // Handle 204 No Content
-  if (response.status === 204) {
-    return undefined as T;
-  }
-
-  return response.json();
-}
-
-export const useMcpServerStore = create<McpServerStore>((set, get) => ({
-  ...createInitialState(),
-
-  fetchServers: async (options) => {
-    const { lastFetched, isLoading } = get();
-    const force = options?.force ?? false;
-    const isFresh = lastFetched && Date.now() - lastFetched < STALE_MS;
-
-    if (!force && !isLoading && isFresh) {
-      return get().servers;
-    }
-
-    if (!isLoading) {
-      set({ isLoading: true, error: null });
-    }
-
-    try {
-      const servers = await apiRequest<McpServerResponse[]>('/api/v1/mcp-servers');
-
-      set({
-        servers,
-        isLoading: false,
-        error: null,
-        lastFetched: Date.now(),
-      });
-      return servers;
-    } catch (error) {
-      const message = error instanceof Error ? error.message : 'Failed to fetch MCP servers';
-      set({ isLoading: false, error: message });
-      throw error;
-    }
-  },
-
-  refreshServers: () => get().fetchServers({ force: true }),
-
-  createServer: async (input) => {
-    const server = await apiRequest<McpServerResponse>('/api/v1/mcp-servers', {
-      method: 'POST',
-      body: JSON.stringify(input),
-    });
-
-    set((state) => ({
-      servers: [...state.servers, server],
-    }));
-
-    return server;
-  },
-
-  updateServer: async (id, input) => {
-    const server = await apiRequest<McpServerResponse>(`/api/v1/mcp-servers/${id}`, {
-      method: 'PATCH',
-      body: JSON.stringify(input),
-    });
-
-    set((state) => ({
-      servers: state.servers.map((s) => (s.id === id ? server : s)),
-    }));
-
-    return server;
-  },
-
-  deleteServer: async (id) => {
-    await apiRequest(`/api/v1/mcp-servers/${id}`, { method: 'DELETE' });
-
-    set((state) => ({
-      servers: state.servers.filter((s) => s.id !== id),
-      tools: state.tools.filter((t) => t.serverId !== id),
-    }));
-  },
-
-  toggleServer: async (id) => {
-    const server = await apiRequest<McpServerResponse>(`/api/v1/mcp-servers/${id}/toggle`, {
-      method: 'POST',
-    });
-
-    set((state) => ({
-      servers: state.servers.map((s) => (s.id === id ? server : s)),
-    }));
-
-    return server;
-  },
-
-  testConnection: async (id) => {
-    return apiRequest<TestConnectionResponse>(`/api/v1/mcp-servers/${id}/test`, {
-      method: 'POST',
-    });
-  },
-
-  fetchServerTools: async (serverId) => {
-    const tools = await apiRequest<McpToolResponse[]>(`/api/v1/mcp-servers/${serverId}/tools`);
-
-    set((state) => ({
-      tools: [...state.tools.filter((t) => t.serverId !== serverId), ...tools],
-    }));
-
-    return tools;
-  },
-
-  fetchAllTools: async () => {
-    const tools = await apiRequest<McpToolResponse[]>('/api/v1/mcp-servers/tools');
-    set({ tools });
-    return tools;
-  },
-
-  discoverTools: async (serverId, options) => {
-    // Get server config from store
-    const server = get().servers.find((s) => s.id === serverId);
-    if (!server) {
-      throw new Error(`Server ${serverId} not found`);
-    }
-
-    // Start discovery workflow
-    const { workflowId } = await mcpDiscoveryApi.discover({
-      transport: server.transportType,
-      name: server.name,
-      endpoint: server.endpoint ?? undefined,
-      command: server.command ?? undefined,
-      args: server.args ?? undefined,
-      image: options?.image,
-    });
-
-    // Poll for completion with 60-second timeout
-    const maxAttempts = 60; // 60 seconds with 1-second intervals
-    const pollInterval = 1000;
-
-    for (let attempt = 0; attempt < maxAttempts; attempt++) {
-      const status = await mcpDiscoveryApi.getStatus(workflowId);
-
-      if (status.status === 'completed' && status.tools) {
-        // Transform tools to match store format
-        const tools: McpToolResponse[] = status.tools.map((tool) => ({
-          id: `${serverId}-${tool.name}`,
-          toolName: tool.name,
-          description: tool.description ?? null,
-          inputSchema: tool.inputSchema ?? null,
-          serverId,
-          serverName: server.name,
-          enabled: true,
-          discoveredAt: new Date().toISOString(),
-        }));
-
-        set((state) => ({
-          tools: [...state.tools.filter((t) => t.serverId !== serverId), ...tools],
-        }));
-
-        return tools;
-      }
-
-      if (status.status === 'failed') {
-        throw new Error(status.error ?? 'Discovery failed');
-      }
-
-      // Wait before next poll
-      await new Promise((resolve) => setTimeout(resolve, pollInterval));
-    }
-
-    throw new Error('Discovery timed out after 60 seconds');
-  },
-
-  toggleTool: async (serverId, toolId) => {
-    const tool = await apiRequest<McpToolResponse>(
-      `/api/v1/mcp-servers/${serverId}/tools/${toolId}/toggle`,
-      { method: 'POST' },
-    );
-
-    set((state) => ({
-      tools: state.tools.map((t) => (t.id === toolId ? tool : t)),
-    }));
-
-    return tool;
-  },
-
-  setFilters: (partial) => {
-    set((state) => ({
-      filters: {
-        ...state.filters,
-        ...partial,
-      },
-    }));
-  },
-
-  upsertServer: (server) => {
-    set((state) => {
-      const exists = state.servers.some((s) => s.id === server.id);
-      if (!exists) {
-        return {
-          servers: [...state.servers, server],
-        };
-      }
-      return {
-        servers: state.servers.map((s) => (s.id === server.id ? server : s)),
-      };
-    });
-  },
-
-  removeServer: (id) => {
-    set((state) => ({
-      servers: state.servers.filter((s) => s.id !== id),
-      tools: state.tools.filter((t) => t.serverId !== id),
-    }));
-  },
-
-  setError: (message) => {
-    set({ error: message });
-  },
-}));
-
-// Selector hooks for common use cases
-export const useEnabledMcpServers = () =>
-  useMcpServerStore((state) => state.servers.filter((s) => s.enabled));
-
-export const useHealthyMcpServers = () =>
-  useMcpServerStore((state) =>
-    state.servers.filter((s) => s.enabled && s.lastHealthStatus === 'healthy'),
-  );
-
-export const useMcpToolsByServer = (serverId: string) =>
-  useMcpServerStore((state) => state.tools.filter((t) => t.serverId === serverId));
-
-export const useEnabledMcpTools = () =>
-  useMcpServerStore((state) => {
-    const enabledServerIds = new Set(state.servers.filter((s) => s.enabled).map((s) => s.id));
-    return state.tools.filter((t) => enabledServerIds.has(t.serverId));
-  });
-
-export const resetMcpServerStoreState = () => {
-  useMcpServerStore.setState({ ...createInitialState() });
-};
diff --git a/frontend/src/store/runStore.ts b/frontend/src/store/runStore.ts
deleted file mode 100644
index 78e065b4..00000000
--- a/frontend/src/store/runStore.ts
+++ /dev/null
@@ -1,385 +0,0 @@
-import { create } from 'zustand';
-import { subscribeWithSelector } from 'zustand/middleware';
-import { api } from '@/services/api';
-import type { ExecutionStatus } from '@/schemas/execution';
-import {
-  TERMINAL_STATUSES,
-  type ExecutionTriggerType,
-  type ExecutionInputPreview,
-} from '@shipsec/shared';
-
-export interface ExecutionRun {
-  id: string;
-  workflowId: string;
-  organizationId?: string;
-  workflowName: string;
-  status: ExecutionStatus;
-  startTime: string;
-  endTime?: string;
-  duration?: number;
-  nodeCount: number;
-  eventCount: number;
-  createdAt: string;
-  isLive: boolean;
-  workflowVersionId: string | null;
-  workflowVersion: number | null;
-  triggerType: ExecutionTriggerType;
-  triggerSource: string | null;
-  triggerLabel: string | null;
-  inputPreview: ExecutionInputPreview;
-  parentRunId?: string | null;
-  parentNodeRef?: string | null;
-}
-
-interface RunCacheEntry {
-  runs: ExecutionRun[];
-  isLoading: boolean;
-  error: string | null;
-  lastFetched: number | null;
-  hasMore: boolean;
-}
-
-interface RunStoreState {
-  cache: Record<string, RunCacheEntry>;
-}
-
-interface RunStoreActions {
-  fetchRuns: (options?: {
-    workflowId?: string | null;
-    force?: boolean;
-    limit?: number;
-  }) => Promise<ExecutionRun[] | undefined>;
-  fetchMoreRuns: (workflowId?: string | null) => Promise<void>;
-  refreshRuns: (workflowId?: string | null) => Promise<ExecutionRun[] | undefined>;
-  invalidate: (workflowId?: string | null) => void;
-  upsertRun: (run: ExecutionRun) => void;
-  getRunById: (runId: string) => ExecutionRun | undefined;
-  getLatestRun: (workflowId?: string | null) => ExecutionRun | undefined;
-  getRunsForWorkflow: (workflowId?: string | null) => ExecutionRun[];
-}
-
-export type RunStore = RunStoreState & RunStoreActions;
-
-const INITIAL_STATE: RunStoreState = {
-  cache: {},
-};
-
-export const RUNS_STALE_MS = 30_000;
-
-const GLOBAL_WORKFLOW_CACHE_KEY = '__global__';
-
-const getCacheKey = (workflowId?: string | null) => workflowId ?? GLOBAL_WORKFLOW_CACHE_KEY;
-
-const INITIAL_LIMIT = 5;
-const LOAD_MORE_LIMIT = 20;
-
-const createEmptyEntry = (): RunCacheEntry => ({
-  runs: [],
-  isLoading: false,
-  error: null,
-  lastFetched: null,
-  hasMore: true,
-});
-
-const getEntry = (cache: RunStoreState['cache'], key: string): RunCacheEntry => {
-  return cache[key] ?? createEmptyEntry();
-};
-
-const inflightFetches = new Map<string, Promise<ExecutionRun[]>>();
-
-const TRIGGER_LABELS: Record<ExecutionTriggerType, string> = {
-  manual: 'Manual run',
-  schedule: 'Scheduled run',
-  api: 'API run',
-  webhook: 'Webhook trigger',
-};
-
-const normalizeRun = (run: any): ExecutionRun => {
-  const startTime = typeof run.startTime === 'string' ? run.startTime : new Date().toISOString();
-  const rawEndTime = typeof run.endTime === 'string' ? run.endTime : undefined;
-  const status = (
-    typeof run.status === 'string' ? run.status.toUpperCase() : 'FAILED'
-  ) as ExecutionStatus;
-  const isActiveStatus = !TERMINAL_STATUSES.includes(status);
-
-  // Backend now calculates duration from events, so use it directly
-  // Fallback to calculating from endTime if duration not provided
-  const derivedDuration =
-    typeof run.duration === 'number'
-      ? run.duration
-      : rawEndTime && !isActiveStatus
-        ? new Date(rawEndTime).getTime() - new Date(startTime).getTime()
-        : Math.max(0, Date.now() - new Date(startTime).getTime());
-
-  const triggerType = (run.triggerType as ExecutionTriggerType) ?? 'manual';
-  const triggerLabelRaw = typeof run.triggerLabel === 'string' ? run.triggerLabel.trim() : '';
-
-  return {
-    id: String(run.id ?? ''),
-    workflowId: String(run.workflowId ?? ''),
-    organizationId: typeof run.organizationId === 'string' ? run.organizationId : undefined,
-    workflowName: String(run.workflowName ?? 'Untitled workflow'),
-    status,
-    startTime,
-    endTime: rawEndTime,
-    duration: Number.isFinite(derivedDuration) ? derivedDuration : undefined,
-    nodeCount: typeof run.nodeCount === 'number' ? run.nodeCount : 0,
-    eventCount: typeof run.eventCount === 'number' ? run.eventCount : 0,
-    createdAt: startTime,
-    isLive: isActiveStatus,
-    workflowVersionId: typeof run.workflowVersionId === 'string' ? run.workflowVersionId : null,
-    workflowVersion: typeof run.workflowVersion === 'number' ? run.workflowVersion : null,
-    triggerType,
-    triggerSource: typeof run.triggerSource === 'string' ? run.triggerSource : null,
-    triggerLabel: triggerLabelRaw.length > 0 ? triggerLabelRaw : TRIGGER_LABELS[triggerType],
-    inputPreview: (run.inputPreview as ExecutionInputPreview) ?? {
-      runtimeInputs: {},
-      nodeOverrides: {},
-    },
-    parentRunId: typeof run.parentRunId === 'string' ? run.parentRunId : null,
-    parentNodeRef: typeof run.parentNodeRef === 'string' ? run.parentNodeRef : null,
-  };
-};
-
-const sortRuns = (runs: ExecutionRun[]): ExecutionRun[] => {
-  return [...runs].sort(
-    (a, b) => new Date(b.startTime).getTime() - new Date(a.startTime).getTime(),
-  );
-};
-
-const upsertIntoRuns = (runs: ExecutionRun[], run: ExecutionRun) => {
-  const existingIndex = runs.findIndex((item) => item.id === run.id);
-  if (existingIndex === -1) {
-    return sortRuns([...runs, run]);
-  }
-  const updated = [...runs];
-  updated[existingIndex] = {
-    ...updated[existingIndex],
-    ...run,
-    status: run.status,
-  };
-  return sortRuns(updated);
-};
-
-export const useRunStore = create<RunStore>()(
-  subscribeWithSelector((set, get) => ({
-    ...INITIAL_STATE,
-
-    fetchRuns: async (options) => {
-      const workflowId = options?.workflowId ?? null;
-
-      // Skip fetching for placeholder "new" workflow ID - it's an unsaved workflow
-      if (workflowId === 'new') {
-        return [];
-      }
-
-      const key = getCacheKey(workflowId);
-      const force = options?.force ?? false;
-      const limit = options?.limit ?? INITIAL_LIMIT;
-      const state = get();
-      const entry = getEntry(state.cache, key);
-      const now = Date.now();
-
-      if (!force) {
-        if (entry.isLoading && inflightFetches.has(key)) {
-          return inflightFetches.get(key);
-        }
-        if (entry.lastFetched && now - entry.lastFetched < RUNS_STALE_MS) {
-          return entry.runs;
-        }
-        if (inflightFetches.has(key)) {
-          return inflightFetches.get(key);
-        }
-      }
-
-      set((state) => ({
-        cache: {
-          ...state.cache,
-          [key]: {
-            ...getEntry(state.cache, key),
-            isLoading: true,
-            error: null,
-          },
-        },
-      }));
-
-      const fetchPromise = (async () => {
-        try {
-          const response = await api.executions.listRuns({
-            limit,
-            workflowId: workflowId ?? undefined,
-          });
-          const rawRuns = response.runs ?? [];
-          const normalized = sortRuns(rawRuns.map(normalizeRun));
-          set((state) => ({
-            cache: {
-              ...state.cache,
-              [key]: {
-                runs: normalized,
-                isLoading: false,
-                error: null,
-                lastFetched: Date.now(),
-                hasMore: rawRuns.length >= limit,
-              },
-            },
-          }));
-          return normalized;
-        } catch (error) {
-          const message = error instanceof Error ? error.message : 'Failed to fetch runs';
-          set((state) => ({
-            cache: {
-              ...state.cache,
-              [key]: {
-                ...getEntry(state.cache, key),
-                isLoading: false,
-                error: message,
-              },
-            },
-          }));
-          throw error;
-        } finally {
-          inflightFetches.delete(key);
-        }
-      })();
-
-      inflightFetches.set(key, fetchPromise);
-
-      return await fetchPromise;
-    },
-
-    refreshRuns: (workflowId) => get().fetchRuns({ workflowId, force: true }),
-
-    fetchMoreRuns: async (workflowId) => {
-      const key = getCacheKey(workflowId);
-      const entry = getEntry(get().cache, key);
-
-      if (entry.isLoading || !entry.hasMore) {
-        return;
-      }
-
-      const offset = entry.runs.length;
-
-      set((state) => ({
-        cache: {
-          ...state.cache,
-          [key]: { ...getEntry(state.cache, key), isLoading: true, error: null },
-        },
-      }));
-
-      try {
-        const response = await api.executions.listRuns({
-          limit: LOAD_MORE_LIMIT,
-          offset,
-          workflowId: workflowId ?? undefined,
-        });
-        const rawRuns = response.runs ?? [];
-        const normalized = rawRuns.map(normalizeRun);
-
-        set((state) => {
-          const current = getEntry(state.cache, key);
-          // Deduplicate by id, then sort
-          const existingIds = new Set(current.runs.map((r) => r.id));
-          const newRuns = normalized.filter((r) => !existingIds.has(r.id));
-          return {
-            cache: {
-              ...state.cache,
-              [key]: {
-                ...current,
-                runs: sortRuns([...current.runs, ...newRuns]),
-                isLoading: false,
-                hasMore: rawRuns.length >= LOAD_MORE_LIMIT,
-              },
-            },
-          };
-        });
-      } catch (error) {
-        const message = error instanceof Error ? error.message : 'Failed to fetch more runs';
-        set((state) => ({
-          cache: {
-            ...state.cache,
-            [key]: { ...getEntry(state.cache, key), isLoading: false, error: message },
-          },
-        }));
-      }
-    },
-
-    invalidate: (workflowId) => {
-      if (typeof workflowId === 'undefined') {
-        set((state) => {
-          const next: RunStoreState['cache'] = {};
-          for (const [key, entry] of Object.entries(state.cache)) {
-            next[key] = {
-              ...entry,
-              lastFetched: null,
-              error: null,
-            };
-          }
-          return { cache: next };
-        });
-        return;
-      }
-
-      const key = getCacheKey(workflowId);
-      set((state) => ({
-        cache: {
-          ...state.cache,
-          [key]: {
-            ...getEntry(state.cache, key),
-            lastFetched: null,
-            error: null,
-          },
-        },
-      }));
-    },
-
-    upsertRun: (run: ExecutionRun) => {
-      set((state) => {
-        const cache = { ...state.cache };
-        const workflowKey = getCacheKey(run.workflowId);
-        const workflowEntry = getEntry(cache, workflowKey);
-
-        cache[workflowKey] = {
-          ...workflowEntry,
-          runs: upsertIntoRuns(workflowEntry.runs, run),
-        };
-
-        if (cache[GLOBAL_WORKFLOW_CACHE_KEY]) {
-          const globalEntry = getEntry(cache, GLOBAL_WORKFLOW_CACHE_KEY);
-          cache[GLOBAL_WORKFLOW_CACHE_KEY] = {
-            ...globalEntry,
-            runs: upsertIntoRuns(globalEntry.runs, run),
-          };
-        }
-
-        return { cache };
-      });
-    },
-
-    getRunById: (runId: string) => {
-      const state = get();
-      for (const entry of Object.values(state.cache)) {
-        const found = entry.runs.find((run) => run.id === runId);
-        if (found) {
-          return found;
-        }
-      }
-      return undefined;
-    },
-
-    getLatestRun: (workflowId) => {
-      const key = getCacheKey(workflowId);
-      const runs = get().cache[key]?.runs ?? [];
-      return runs[0];
-    },
-
-    getRunsForWorkflow: (workflowId) => {
-      const key = getCacheKey(workflowId);
-      return get().cache[key]?.runs ?? [];
-    },
-  })),
-);
-
-export const resetRunStoreState = () => {
-  inflightFetches.clear();
-  useRunStore.setState({ ...INITIAL_STATE });
-};
diff --git a/frontend/src/store/scheduleStore.ts b/frontend/src/store/scheduleStore.ts
deleted file mode 100644
index 9c248adc..00000000
--- a/frontend/src/store/scheduleStore.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import { create } from 'zustand';
-import type { ScheduleStatus, WorkflowSchedule } from '@shipsec/shared';
-import { api } from '@/services/api';
-
-type StatusFilter = ScheduleStatus | 'all';
-
-interface ScheduleFilters {
-  workflowId: string | null;
-  status: StatusFilter;
-  search: string;
-}
-
-interface ScheduleStoreState {
-  schedules: WorkflowSchedule[];
-  isLoading: boolean;
-  error: string | null;
-  lastFetched: number | null;
-  filters: ScheduleFilters;
-}
-
-interface ScheduleStoreActions {
-  fetchSchedules: (options?: { force?: boolean }) => Promise<WorkflowSchedule[]>;
-  refreshSchedules: () => Promise<WorkflowSchedule[]>;
-  setFilters: (filters: Partial<ScheduleFilters>) => void;
-  pauseSchedule: (id: string) => Promise<WorkflowSchedule>;
-  resumeSchedule: (id: string) => Promise<WorkflowSchedule>;
-  runSchedule: (id: string) => Promise<void>;
-  deleteSchedule: (id: string) => Promise<void>;
-  upsertSchedule: (schedule: WorkflowSchedule) => void;
-  removeSchedule: (id: string) => void;
-  setError: (message: string | null) => void;
-}
-
-export type ScheduleStore = ScheduleStoreState & ScheduleStoreActions;
-
-const STALE_MS = 15_000;
-
-const INITIAL_FILTERS: ScheduleFilters = {
-  workflowId: null,
-  status: 'all',
-  search: '',
-};
-
-const createInitialState = (): ScheduleStoreState => ({
-  schedules: [],
-  isLoading: false,
-  error: null,
-  lastFetched: null,
-  filters: { ...INITIAL_FILTERS },
-});
-
-export const useScheduleStore = create<ScheduleStore>((set, get) => ({
-  ...createInitialState(),
-
-  fetchSchedules: async (options) => {
-    const { lastFetched, isLoading, filters } = get();
-    const force = options?.force ?? false;
-    const isFresh = lastFetched && Date.now() - lastFetched < STALE_MS;
-
-    if (!force && !isLoading && isFresh) {
-      return get().schedules;
-    }
-
-    if (!isLoading) {
-      set({ isLoading: true, error: null });
-    }
-
-    try {
-      const schedules = await api.schedules.list({
-        workflowId: filters.workflowId ?? undefined,
-        status: filters.status !== 'all' ? (filters.status as ScheduleStatus) : undefined,
-      });
-      set({
-        schedules,
-        isLoading: false,
-        error: null,
-        lastFetched: Date.now(),
-      });
-      return schedules;
-    } catch (error) {
-      const message = error instanceof Error ? error.message : 'Failed to fetch schedules';
-      set({ isLoading: false, error: message });
-      throw error;
-    }
-  },
-
-  refreshSchedules: () => get().fetchSchedules({ force: true }),
-
-  setFilters: (partial) => {
-    set((state) => ({
-      filters: {
-        ...state.filters,
-        ...partial,
-      },
-    }));
-  },
-
-  pauseSchedule: async (id: string) => {
-    const schedule = await api.schedules.pause(id);
-    set((state) => ({
-      schedules: state.schedules.map((existing) => (existing.id === id ? schedule : existing)),
-    }));
-    return schedule;
-  },
-
-  resumeSchedule: async (id: string) => {
-    const schedule = await api.schedules.resume(id);
-    set((state) => ({
-      schedules: state.schedules.map((existing) => (existing.id === id ? schedule : existing)),
-    }));
-    return schedule;
-  },
-
-  runSchedule: async (id: string) => {
-    await api.schedules.runNow(id);
-  },
-
-  deleteSchedule: async (id: string) => {
-    await api.schedules.delete(id);
-    set((state) => ({
-      schedules: state.schedules.filter((schedule) => schedule.id !== id),
-    }));
-  },
-
-  upsertSchedule: (schedule) => {
-    set((state) => {
-      const exists = state.schedules.some((item) => item.id === schedule.id);
-      if (!exists) {
-        return { schedules: [...state.schedules, schedule] };
-      }
-      return {
-        schedules: state.schedules.map((item) => (item.id === schedule.id ? schedule : item)),
-      };
-    });
-  },
-
-  removeSchedule: (id: string) => {
-    set((state) => ({
-      schedules: state.schedules.filter((schedule) => schedule.id !== id),
-    }));
-  },
-
-  setError: (message) => {
-    set({ error: message });
-  },
-}));
-
-export const resetScheduleStoreState = () => {
-  useScheduleStore.setState({ ...createInitialState() });
-};
diff --git a/frontend/src/store/secretStore.ts b/frontend/src/store/secretStore.ts
deleted file mode 100644
index 66d7fcdb..00000000
--- a/frontend/src/store/secretStore.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-import { create } from 'zustand';
-import { api } from '@/services/api';
-import type {
-  SecretSummary,
-  CreateSecretInput,
-  UpdateSecretInput,
-  RotateSecretInput,
-} from '@/schemas/secret';
-
-interface SecretStoreState {
-  secrets: SecretSummary[];
-  loading: boolean;
-  error: string | null;
-  initialized: boolean;
-}
-
-interface SecretStoreActions {
-  fetchSecrets: (force?: boolean) => Promise<void>;
-  createSecret: (input: CreateSecretInput) => Promise<SecretSummary>;
-  rotateSecret: (id: string, input: RotateSecretInput) => Promise<SecretSummary>;
-  updateSecret: (id: string, input: UpdateSecretInput) => Promise<SecretSummary>;
-  deleteSecret: (id: string) => Promise<void>;
-  getSecretById: (id: string) => SecretSummary | undefined;
-  refresh: () => Promise<void>;
-}
-
-export type SecretStore = SecretStoreState & SecretStoreActions;
-
-function sortSecrets(secrets: SecretSummary[]) {
-  return [...secrets].sort((a, b) => a.name.localeCompare(b.name));
-}
-
-export const useSecretStore = create<SecretStore>((set, get) => ({
-  secrets: [],
-  loading: false,
-  error: null,
-  initialized: false,
-
-  fetchSecrets: async (force = false) => {
-    const { loading, initialized } = get();
-    if (loading || (!force && initialized)) {
-      return;
-    }
-
-    set({ loading: true, error: null });
-    try {
-      const secrets = await api.secrets.list();
-      set({
-        secrets: sortSecrets(secrets),
-        loading: false,
-        error: null,
-        initialized: true,
-      });
-    } catch (error) {
-      set({
-        error: error instanceof Error ? error.message : 'Failed to load secrets',
-        loading: false,
-      });
-    }
-  },
-
-  createSecret: async (input: CreateSecretInput) => {
-    set({ loading: true, error: null });
-    try {
-      const created = await api.secrets.create(input);
-      set((state) => ({
-        secrets: sortSecrets([...state.secrets, created]),
-        loading: false,
-        error: null,
-        initialized: true,
-      }));
-      return created;
-    } catch (error) {
-      const message = error instanceof Error ? error.message : 'Failed to create secret';
-      set({ error: message, loading: false });
-      throw error instanceof Error ? error : new Error(message);
-    }
-  },
-
-  updateSecret: async (id: string, input: UpdateSecretInput) => {
-    set({ error: null });
-    try {
-      const updated = await api.secrets.update(id, input);
-      set((state) => ({
-        secrets: sortSecrets(state.secrets.map((secret) => (secret.id === id ? updated : secret))),
-        error: null,
-        initialized: true,
-      }));
-      return updated;
-    } catch (error) {
-      const message = error instanceof Error ? error.message : 'Failed to update secret';
-      set({ error: message });
-      throw error instanceof Error ? error : new Error(message);
-    }
-  },
-
-  rotateSecret: async (id: string, input: RotateSecretInput) => {
-    set({ error: null });
-    try {
-      const rotated = await api.secrets.rotate(id, input);
-      set((state) => ({
-        secrets: sortSecrets(state.secrets.map((secret) => (secret.id === id ? rotated : secret))),
-        error: null,
-        initialized: true,
-      }));
-      return rotated;
-    } catch (error) {
-      const message = error instanceof Error ? error.message : 'Failed to rotate secret';
-      set({ error: message });
-      throw error instanceof Error ? error : new Error(message);
-    }
-  },
-
-  deleteSecret: async (id: string) => {
-    set({ error: null });
-    try {
-      await api.secrets.delete(id);
-      set((state) => ({
-        secrets: state.secrets.filter((secret) => secret.id !== id),
-        error: null,
-        initialized: true,
-      }));
-    } catch (error) {
-      const message = error instanceof Error ? error.message : 'Failed to delete secret';
-      set({ error: message });
-      throw error instanceof Error ? error : new Error(message);
-    }
-  },
-
-  getSecretById: (id: string) => {
-    return get().secrets.find((secret) => secret.id === id);
-  },
-
-  refresh: async () => {
-    await get().fetchSecrets(true);
-  },
-}));
diff --git a/frontend/src/store/webhookStore.ts b/frontend/src/store/webhookStore.ts
deleted file mode 100644
index 83572087..00000000
--- a/frontend/src/store/webhookStore.ts
+++ /dev/null
@@ -1,218 +0,0 @@
-import { create } from 'zustand';
-import type { WebhookConfiguration, WebhookDelivery } from '@shipsec/shared';
-import { API_V1_URL } from '@/services/api';
-
-type WebhookStatusFilter = 'all' | 'active' | 'inactive';
-
-interface WebhookFilters {
-  workflowId: string | null;
-  status: WebhookStatusFilter;
-  search: string;
-}
-
-interface WebhookStoreState {
-  webhooks: WebhookConfiguration[];
-  deliveries: Record<string, WebhookDelivery[]>;
-  isLoading: boolean;
-  isDeliveriesLoading: Record<string, boolean>;
-  error: string | null;
-  lastFetched: number | null;
-  filters: WebhookFilters;
-}
-
-interface WebhookStoreActions {
-  fetchWebhooks: (options?: { force?: boolean }) => Promise<WebhookConfiguration[]>;
-  refreshWebhooks: () => Promise<WebhookConfiguration[]>;
-  setFilters: (filters: Partial<WebhookFilters>) => void;
-  deleteWebhook: (id: string) => Promise<void>;
-  upsertWebhook: (webhook: WebhookConfiguration) => void;
-  regeneratePath: (id: string) => Promise<{ id: string; webhookPath: string; url: string }>;
-  testScript: (dto: {
-    parsingScript: string;
-    testPayload: Record<string, unknown>;
-    testHeaders?: Record<string, string>;
-    webhookId?: string;
-  }) => Promise<{
-    success: boolean;
-    parsedData: Record<string, unknown> | null;
-    errorMessage: string | null;
-    validationErrors?: { inputId: string; message: string }[];
-  }>;
-  fetchDeliveries: (webhookId: string) => Promise<WebhookDelivery[]>;
-  setError: (message: string | null) => void;
-}
-
-export type WebhookStore = WebhookStoreState & WebhookStoreActions;
-
-const STALE_MS = 15_000;
-
-const INITIAL_FILTERS: WebhookFilters = {
-  workflowId: null,
-  status: 'all',
-  search: '',
-};
-
-const createInitialState = (): WebhookStoreState => ({
-  webhooks: [],
-  deliveries: {},
-  isLoading: false,
-  isDeliveriesLoading: {},
-  error: null,
-  lastFetched: null,
-  filters: { ...INITIAL_FILTERS },
-});
-
-async function fetchWithHeaders(url: string, options: RequestInit = {}): Promise<Response> {
-  const { getApiAuthHeaders } = await import('@/services/api');
-  const headers = await getApiAuthHeaders();
-
-  return fetch(url, {
-    ...options,
-    headers: {
-      ...headers,
-      'Content-Type': 'application/json',
-      ...options.headers,
-    },
-  });
-}
-
-export const useWebhookStore = create<WebhookStore>((set, get) => ({
-  ...createInitialState(),
-
-  fetchWebhooks: async (options) => {
-    const { lastFetched, isLoading } = get();
-    const force = options?.force ?? false;
-    const isFresh = lastFetched && Date.now() - lastFetched < STALE_MS;
-
-    if (!force && !isLoading && isFresh) {
-      return get().webhooks;
-    }
-
-    if (!isLoading) {
-      set({ isLoading: true, error: null });
-    }
-
-    try {
-      const response = await fetchWithHeaders(`${API_V1_URL}/webhooks/configurations`);
-      if (!response.ok) {
-        throw new Error('Failed to fetch webhooks');
-      }
-      const webhooks = await response.json();
-      set({
-        webhooks,
-        isLoading: false,
-        error: null,
-        lastFetched: Date.now(),
-      });
-      return webhooks;
-    } catch (error) {
-      const message = error instanceof Error ? error.message : 'Failed to fetch webhooks';
-      set({ isLoading: false, error: message });
-      throw error;
-    }
-  },
-
-  refreshWebhooks: () => get().fetchWebhooks({ force: true }),
-
-  setFilters: (partial) => {
-    set((state) => ({
-      filters: {
-        ...state.filters,
-        ...partial,
-      },
-    }));
-  },
-
-  deleteWebhook: async (id: string) => {
-    const response = await fetchWithHeaders(`${API_V1_URL}/webhooks/configurations/${id}`, {
-      method: 'DELETE',
-    });
-    if (!response.ok) {
-      throw new Error('Failed to delete webhook');
-    }
-    set((state) => ({
-      webhooks: state.webhooks.filter((webhook) => webhook.id !== id),
-    }));
-  },
-
-  upsertWebhook: (webhook) => {
-    set((state) => {
-      const exists = state.webhooks.some((item) => item.id === webhook.id);
-      if (!exists) {
-        return { webhooks: [...state.webhooks, webhook] };
-      }
-      return {
-        webhooks: state.webhooks.map((item) => (item.id === webhook.id ? webhook : item)),
-      };
-    });
-  },
-
-  regeneratePath: async (id: string) => {
-    const response = await fetchWithHeaders(
-      `${API_V1_URL}/webhooks/configurations/${id}/regenerate-path`,
-      {
-        method: 'POST',
-      },
-    );
-    if (!response.ok) {
-      throw new Error('Failed to regenerate webhook path');
-    }
-    const result = await response.json();
-
-    // Update the webhook in the store
-    set((state) => ({
-      webhooks: state.webhooks.map((w) =>
-        w.id === id ? { ...w, webhookPath: result.webhookPath } : w,
-      ),
-    }));
-
-    return result;
-  },
-
-  testScript: async (dto) => {
-    const response = await fetchWithHeaders(`${API_V1_URL}/webhooks/configurations/test-script`, {
-      method: 'POST',
-      body: JSON.stringify(dto),
-    });
-    if (!response.ok) {
-      throw new Error('Failed to test parsing script');
-    }
-    return response.json();
-  },
-
-  fetchDeliveries: async (webhookId: string) => {
-    set((state) => ({
-      isDeliveriesLoading: { ...state.isDeliveriesLoading, [webhookId]: true },
-    }));
-
-    try {
-      const response = await fetchWithHeaders(
-        `${API_V1_URL}/webhooks/configurations/${webhookId}/deliveries`,
-      );
-      if (!response.ok) {
-        throw new Error('Failed to fetch deliveries');
-      }
-      const deliveries = await response.json();
-
-      set((state) => ({
-        deliveries: { ...state.deliveries, [webhookId]: deliveries },
-        isDeliveriesLoading: { ...state.isDeliveriesLoading, [webhookId]: false },
-      }));
-
-      return deliveries;
-    } catch (error) {
-      set((state) => ({
-        isDeliveriesLoading: { ...state.isDeliveriesLoading, [webhookId]: false },
-      }));
-      throw error;
-    }
-  },
-
-  setError: (message) => {
-    set({ error: message });
-  },
-}));
-
-export const resetWebhookStoreState = () => {
-  useWebhookStore.setState({ ...createInitialState() });
-};
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 65a65eec..98ba0807 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -45,4 +45,29 @@ export default defineConfig({
   preview: {
     allowedHosts: ['studio.shipsec.ai', 'frontend'],
   },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'vendor-react': ['react', 'react-dom', 'react-router-dom'],
+          'vendor-radix': [
+            '@radix-ui/react-accordion',
+            '@radix-ui/react-avatar',
+            '@radix-ui/react-checkbox',
+            '@radix-ui/react-dialog',
+            '@radix-ui/react-dropdown-menu',
+            '@radix-ui/react-label',
+            '@radix-ui/react-popover',
+            '@radix-ui/react-select',
+            '@radix-ui/react-slider',
+            '@radix-ui/react-slot',
+            '@radix-ui/react-switch',
+            '@radix-ui/react-tabs',
+            '@radix-ui/react-tooltip',
+          ],
+          'vendor-analytics': ['posthog-js'],
+        },
+      },
+    },
+  },
 });
diff --git a/scripts/set-git-sha.sh b/scripts/set-git-sha.sh
index a929219d..3d8e247e 100755
--- a/scripts/set-git-sha.sh
+++ b/scripts/set-git-sha.sh
@@ -17,7 +17,7 @@ if [ -f "$FRONTEND_ENV_FILE" ]; then
   else
     echo "VITE_GIT_SHA=$GIT_SHA" >> "$FRONTEND_ENV_FILE"
   fi
-  echo "✅ Git SHA set: $GIT_SHA (first 6 chars: ${GIT_SHA:0:6})"
+  echo "✅  Git SHA set: $GIT_SHA (first 6 chars: ${GIT_SHA:0:6})"
 else
   echo "⚠️  Frontend .env file not found at $FRONTEND_ENV_FILE"
 fi