fix(ssr): harden credential query-key factory + fetchers against the 'use client' stub bug (#5206)

* fix(ssr): move credential query-key factory + fetchers to non-client modules

Preventively closes the same 'use client' SSR client-reference-stub class that
crashed the tables page. Server-evaluated modules (the credential block def, the
workflow-comparison helpers) imported workspaceCredentialKeys /
fetchWorkspaceCredentialList / fetchCredentialSetById from 'use client' hook
modules, where they resolve to client-reference stubs on the server (a future
server call path would throw 'X is not a function').

Extract them into non-client hooks/queries/utils/{credential-keys,
fetch-workspace-credentials,fetch-credential-set}.ts (mirroring folder-keys.ts /
fetch-workflow-envelope.ts) and import from there. No behavior change — these
values were only ever called from browser paths.

* docs+ci: codify the 'use client' server-import rule + add check:client-boundary

Document the Next.js rule that server code can only render a 'use client'
export as a component, never call it (server imports resolve to client-reference
stubs that throw — the tables-page crash). Add the rule to
.claude/rules/sim-queries.md + a cross-ref in sim-architecture.md.

Add scripts/check-client-boundary-imports.ts (wired into CI as check:client-boundary)
that flags any value import from a 'use client' module in a server-evaluated,
non-JSX surface (prefetch / route handler / trigger / block definition), so this
class can't silently recur. Escape hatch: // client-boundary-allow: <reason>.

Author: waleedlatif1

.claude/rules/sim-architecture.md

@@ -38,6 +38,10 @@ packages/                # @sim/* — audit, auth, db, logger, realtime-protocol
 - `apps/* → packages/*` only. Packages never import from `apps/*`.
 - `apps/realtime` avoids Next.js, React, the block/tool registry, provider SDKs, and the executor; never add `@/lib/webhooks/providers/*`, `@/executor/*`, `@/blocks/*`, or `@/tools/*` imports to any package it consumes. CI enforces this via `scripts/check-monorepo-boundaries.ts` and `scripts/check-realtime-prune-graph.ts`.
 
+## The `'use client'` server boundary
+
+Every export of a `'use client'` module becomes a *client reference* on the server — server-evaluated code (RSC pages/layouts, `prefetch.ts`, route handlers, block definitions, triggers) can only *render* it as a component or pass it as a prop, never *call* it (doing so throws at runtime, e.g. `tableKeys.list is not a function`; `next build` does not catch it). Keep server-importable query primitives (key factories, fetchers, mappers, constants) in non-`'use client'` modules — see `.claude/rules/sim-queries.md`. Enforced by `scripts/check-client-boundary-imports.ts`.
+
 ## Feature Organization
 
 Features live under `app/workspace/[workspaceId]/`:

.claude/rules/sim-queries.md

@@ -27,6 +27,17 @@ Never use inline query keys — always use the factory.
 
 **Every identifier the `queryFn` forwards into the fetch MUST appear in the `queryKey`.** (Query-machinery identifiers — `signal`, `pageParam` — are exempt; they aren't fetch-scoping args.) If the fetch is scoped by `workspaceId`, `cursor`, `limit`, an org id, etc., those values must be part of the key — otherwise distinct fetch args share one cache entry (a cross-tenant / per-param cache collision). The lone exception is a globally-unique id used as the key while a second fetch arg is only an authz scope that cannot collide; annotate those with `// rq-lint-allow: <reason>`. Enforced by the `key-fetch-arg-drift` check in `scripts/check-react-query-patterns.ts`.
 
+## Server-importable query primitives must NOT live in a `'use client'` module
+
+Next.js rewrites **every** export of a `'use client'` module into a *client reference* in the server bundle. Server-evaluated code — RSC `page.tsx`/`layout.tsx`, `prefetch.ts`, route handlers, **block definitions**, triggers/workers — can only *render* such an export as a component or pass it as a prop; **calling** one throws at runtime (`Attempted to call X from the server but X is on the client` — for an object export it surfaces as `X.list is not a function`). `next build` does **not** catch this — only SSR/runtime does.
+
+So any **query-key factory, standalone `requestJson` fetcher, mapper, or constant** that a server module imports must live in a **non-`'use client'`** module:
+
+- key factories → `hooks/queries/utils/<entity>-keys.ts` (see `folder-keys.ts`, `table-keys.ts`, `credential-keys.ts`)
+- standalone fetchers/mappers → `hooks/queries/utils/fetch-*.ts` / `*-list-query.ts` (see `fetch-workflow-envelope.ts`, `fetch-credential-set.ts`)
+
+The `'use client'` hook module then imports these back for its hooks. **Never** define a server-imported factory/fetcher directly in a `'use client'` hooks file — it crashes SSR (this caused the tables-page crash). Enforced for prefetch/route/trigger/block files by `scripts/check-client-boundary-imports.ts` (`bun run check:client-boundary`, run in CI). Escape hatch for a genuinely browser-only path: `// client-boundary-allow: <reason>` on the line above the import.
+
 ## File Structure
 
 ```typescript

.github/workflows/test-build.yml

@@ -122,6 +122,9 @@ jobs:
       - name: React Query pattern audit
         run: bun run check:react-query
 
+      - name: Client boundary import audit
+        run: bun run check:client-boundary
+
       - name: Verify realtime prune graph
         run: bun run check:realtime-prune
 

apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secrets-manager/secrets-manager.tsx

@@ -17,18 +17,15 @@ import type { WorkspaceEnvironmentData } from '@/lib/environment/api'
 import { UnsavedChangesModal } from '@/app/workspace/[workspaceId]/components/credential-detail'
 import { SecretValueField } from '@/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field'
 import { isValidEnvVarName } from '@/executor/constants'
-import {
-  useWorkspaceCredentials,
-  type WorkspaceCredential,
-  workspaceCredentialKeys,
-} from '@/hooks/queries/credentials'
+import { useWorkspaceCredentials, type WorkspaceCredential } from '@/hooks/queries/credentials'
 import {
   usePersonalEnvironment,
   useRemoveWorkspaceEnvironment,
   useSavePersonalEnvironment,
   useUpsertWorkspaceEnvironment,
   useWorkspaceEnvironment,
 } from '@/hooks/queries/environment'
+import { workspaceCredentialKeys } from '@/hooks/queries/utils/credential-keys'
 import { useWorkspacePermissionsQuery } from '@/hooks/queries/workspace'
 import { useSettingsDirtyStore } from '@/stores/settings/dirty/store'
 

apps/sim/blocks/blocks/credential.ts

@@ -2,7 +2,8 @@ import { CredentialIcon } from '@/components/icons'
 import { getServiceConfigByProviderId } from '@/lib/oauth/utils'
 import { getQueryClient } from '@/app/_shell/providers/get-query-client'
 import type { BlockConfig } from '@/blocks/types'
-import { fetchWorkspaceCredentialList, workspaceCredentialKeys } from '@/hooks/queries/credentials'
+import { workspaceCredentialKeys } from '@/hooks/queries/utils/credential-keys'
+import { fetchWorkspaceCredentialList } from '@/hooks/queries/utils/fetch-workspace-credentials'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
 interface CredentialBlockOutput {

apps/sim/hooks/queries/credential-sets.ts

@@ -19,7 +19,6 @@ import {
   createCredentialSetContract,
   createCredentialSetInvitationContract,
   deleteCredentialSetContract,
-  getCredentialSetContract,
   leaveCredentialSetContract,
   listCredentialSetInvitationDetailsContract,
   listCredentialSetInvitationsContract,
@@ -29,6 +28,7 @@ import {
   removeCredentialSetMemberContract,
   resendCredentialSetInvitationContract,
 } from '@/lib/api/contracts'
+import { fetchCredentialSetById } from '@/hooks/queries/utils/fetch-credential-set'
 
 export type {
   CreateCredentialSetData,
@@ -76,18 +76,6 @@ export function useCredentialSets(organizationId?: string, enabled = true) {
   })
 }
 
-export async function fetchCredentialSetById(
-  id: string,
-  signal?: AbortSignal
-): Promise<CredentialSet | null> {
-  if (!id) return null
-  const data = await requestJson(getCredentialSetContract, {
-    params: { id },
-    signal,
-  })
-  return data.credentialSet ?? null
-}
-
 export function useCredentialSetDetail(id?: string, enabled = true) {
   return useQuery<CredentialSet | null>({
     queryKey: credentialSetKeys.detail(id),

apps/sim/hooks/queries/credentials.ts

@@ -20,6 +20,8 @@ import {
   type WorkspaceCredentialType,
 } from '@/lib/api/contracts'
 import { environmentKeys } from '@/hooks/queries/environment'
+import { workspaceCredentialKeys } from '@/hooks/queries/utils/credential-keys'
+import { fetchWorkspaceCredentialList } from '@/hooks/queries/utils/fetch-workspace-credentials'
 
 /**
  * Key prefix for OAuth credential queries.
@@ -34,38 +36,6 @@ export type {
   WorkspaceCredentialType,
 }
 
-export const workspaceCredentialKeys = {
-  all: ['workspaceCredentials'] as const,
-  lists: () => [...workspaceCredentialKeys.all, 'list'] as const,
-  list: (workspaceId?: string, type?: string, providerId?: string) =>
-    [
-      ...workspaceCredentialKeys.lists(),
-      workspaceId ?? 'none',
-      type ?? 'all',
-      providerId ?? 'all',
-    ] as const,
-  details: () => [...workspaceCredentialKeys.all, 'detail'] as const,
-  detail: (credentialId?: string) =>
-    [...workspaceCredentialKeys.details(), credentialId ?? 'none'] as const,
-  members: (credentialId?: string) =>
-    [...workspaceCredentialKeys.detail(credentialId), 'members'] as const,
-}
-
-/**
- * Fetch workspace credential list from API.
- * Used by the prefetch function for hover-based cache warming.
- */
-export async function fetchWorkspaceCredentialList(
-  workspaceId: string,
-  signal?: AbortSignal
-): Promise<WorkspaceCredential[]> {
-  const data = await requestJson(listWorkspaceCredentialsContract, {
-    query: { workspaceId },
-    signal,
-  })
-  return data.credentials ?? []
-}
-
 /**
  * Prefetch workspace credentials into a QueryClient cache.
  * Use on hover to warm data before navigation.

apps/sim/hooks/queries/invitations.ts

@@ -11,8 +11,8 @@ import {
   resendInvitationContract,
 } from '@/lib/api/contracts/invitations'
 import { updateWorkspacePermissionsContract } from '@/lib/api/contracts/workspaces'
-import { workspaceCredentialKeys } from '@/hooks/queries/credentials'
 import { organizationKeys } from '@/hooks/queries/organization'
+import { workspaceCredentialKeys } from '@/hooks/queries/utils/credential-keys'
 import { workspaceKeys } from '@/hooks/queries/workspace'
 
 export const invitationKeys = {

apps/sim/hooks/queries/organization.ts

@@ -42,8 +42,8 @@ import {
 import { client } from '@/lib/auth/auth-client'
 import { isEnterprise, isPaid, isTeam } from '@/lib/billing/plan-helpers'
 import { hasPaidSubscriptionStatus } from '@/lib/billing/subscriptions/utils'
-import { workspaceCredentialKeys } from '@/hooks/queries/credentials'
 import { subscriptionKeys } from '@/hooks/queries/subscription'
+import { workspaceCredentialKeys } from '@/hooks/queries/utils/credential-keys'
 import { workspaceKeys } from '@/hooks/queries/workspace'
 
 const logger = createLogger('OrganizationQueries')

apps/sim/hooks/queries/utils/credential-keys.ts

@@ -0,0 +1,24 @@
+/**
+ * React Query key factory for workspace credentials.
+ *
+ * Lives in this standalone (non-`'use client'`) module — like
+ * {@link file://./folder-keys.ts} — so server-evaluated code (block
+ * definitions, server prefetch) can import it without pulling client-reference
+ * stubs from the `'use client'` `@/hooks/queries/credentials` module.
+ */
+export const workspaceCredentialKeys = {
+  all: ['workspaceCredentials'] as const,
+  lists: () => [...workspaceCredentialKeys.all, 'list'] as const,
+  list: (workspaceId?: string, type?: string, providerId?: string) =>
+    [
+      ...workspaceCredentialKeys.lists(),
+      workspaceId ?? 'none',
+      type ?? 'all',
+      providerId ?? 'all',
+    ] as const,
+  details: () => [...workspaceCredentialKeys.all, 'detail'] as const,
+  detail: (credentialId?: string) =>
+    [...workspaceCredentialKeys.details(), credentialId ?? 'none'] as const,
+  members: (credentialId?: string) =>
+    [...workspaceCredentialKeys.detail(credentialId), 'members'] as const,
+}