perf(webapp): fetch and decrypt only non-secret env var values

The Environment Variables page presenter loaded the entire project
secret store via a prefix scan and decrypted every value on each
render — including secret values that are immediately masked in the
UI — then matched rows with nested O(N×M²) `.find()` lookups.

- Collect only the non-secret (environmentId, key) pairs and fetch
  them with a targeted `key IN (...)` query; decrypt only those.
- Add `getSecretsByKeys` to the secret store and
  `getVariableValuesForKeys` to the repository for this access path.
- Replace the nested `.find()` lookups with O(1) Map lookups keyed
  by `${environmentId}:${key}`.

Cuts per-render decryption and server CPU for projects with many
variables and environments; secret values stay masked as before.

Author: Ekaterina Bulatova

apps/webapp/app/presenters/v3/EnvironmentVariablesPresenter.server.ts

@@ -136,7 +136,21 @@ export class EnvironmentVariablesPresenter {
     );
 
     const repository = new EnvironmentVariablesRepository(this.#prismaClient);
-    const variables = await repository.getProject(project.id);
+
+    const nonSecretItems: Array<{ environmentId: string; key: string }> = [];
+    for (const environmentVariable of environmentVariables) {
+      for (const env of sortedEnvironments) {
+        const valueRecord = environmentVariable.values.find((v) => v.environmentId === env.id);
+        if (valueRecord && !valueRecord.isSecret) {
+          nonSecretItems.push({ environmentId: env.id, key: environmentVariable.key });
+        }
+      }
+    }
+
+    const variableValuesByEnvAndKey = await repository.getVariableValuesForKeys(
+      project.id,
+      nonSecretItems
+    );
 
     // Get Vercel integration data if it exists
     const vercelService = new VercelIntegrationService(this.#prismaClient);
@@ -153,14 +167,19 @@ export class EnvironmentVariablesPresenter {
     return {
       environmentVariables: environmentVariables
         .flatMap((environmentVariable) => {
-          const variable = variables.find((v) => v.key === environmentVariable.key);
-
           return sortedEnvironments.flatMap((env) => {
-            const val = variable?.values.find((v) => v.environment.id === env.id);
             const valueRecord = environmentVariable.values.find((v) => v.environmentId === env.id);
             const isSecret = valueRecord?.isSecret ?? false;
 
-            if (!val || !valueRecord) {
+            if (!valueRecord) {
+              return [];
+            }
+
+            const val = isSecret
+              ? undefined
+              : variableValuesByEnvAndKey.get(`${env.id}:${environmentVariable.key}`);
+
+            if (!isSecret && val === undefined) {
               return [];
             }
 
@@ -185,7 +204,7 @@ export class EnvironmentVariablesPresenter {
                 id: environmentVariable.id,
                 key: environmentVariable.key,
                 environment: { type: env.type, id: env.id, branchName: env.branchName },
-                value: isSecret ? "" : val.value,
+                value: isSecret ? "" : val!,
                 isSecret,
                 version: valueRecord.version,
                 lastUpdatedBy,

apps/webapp/app/services/secrets/secretStore.server.ts

@@ -18,6 +18,7 @@ type ProviderInitializationOptions = {
 export interface SecretStoreProvider {
   getSecret<T>(schema: z.Schema<T>, key: string): Promise<T | undefined>;
   getSecrets<T>(schema: z.Schema<T>, keyPrefix: string): Promise<{ key: string; value: T }[]>;
+  getSecretsByKeys<T>(schema: z.Schema<T>, keys: string[]): Promise<{ key: string; value: T }[]>;
   setSecret<T extends object>(key: string, value: T): Promise<void>;
   deleteSecret(key: string): Promise<void>;
 }
@@ -48,6 +49,10 @@ export class SecretStore {
     return this.provider.getSecrets(schema, keyPrefix);
   }
 
+  getSecretsByKeys<T>(schema: z.Schema<T>, keys: string[]): Promise<{ key: string; value: T }[]> {
+    return this.provider.getSecretsByKeys(schema, keys);
+  }
+
   deleteSecret(key: string): Promise<void> {
     return this.provider.deleteSecret(key);
   }
@@ -83,29 +88,7 @@ class PrismaSecretStore implements SecretStoreProvider {
       return undefined;
     }
 
-    if (secret.version === "1") {
-      return schema.parse(secret.value);
-    }
-
-    const encryptedData = EncryptedSecretValueSchema.safeParse(secret.value);
-
-    if (!encryptedData.success) {
-      throw new Error(`Unable to parse encrypted secret ${key}: ${encryptedData.error.message}`);
-    }
-
-    const decrypted = await this.#decrypt(
-      encryptedData.data.nonce,
-      encryptedData.data.ciphertext,
-      encryptedData.data.tag
-    );
-
-    const parsedDecrypted = safeJsonParse(decrypted);
-
-    if (!parsedDecrypted) {
-      return;
-    }
-
-    return schema.parse(parsedDecrypted);
+    return this.#parseStoredSecret(schema, secret);
   }
 
   async getSecrets<T>(
@@ -120,37 +103,74 @@ class PrismaSecretStore implements SecretStoreProvider {
       },
     });
 
+    return this.#parseStoredSecrets(schema, secrets);
+  }
+
+  async getSecretsByKeys<T>(
+    schema: z.Schema<T>,
+    keys: string[]
+  ): Promise<{ key: string; value: T }[]> {
+    if (keys.length === 0) {
+      return [];
+    }
+
+    const secrets = await this.#prismaClient.secretStore.findMany({
+      where: {
+        key: {
+          in: keys,
+        },
+      },
+    });
+
+    return this.#parseStoredSecrets(schema, secrets);
+  }
+
+  async #parseStoredSecrets<T>(
+    schema: z.Schema<T>,
+    secrets: Array<{ key: string; value: unknown; version: string }>
+  ): Promise<{ key: string; value: T }[]> {
     const results = [] as { key: string; value: T }[];
 
     for (const secret of secrets) {
-      if (secret.version === "1") {
-        results.push({ key: secret.key, value: schema.parse(secret.value) });
+      const value = await this.#parseStoredSecret(schema, secret);
+      if (value !== undefined) {
+        results.push({ key: secret.key, value });
       }
+    }
 
-      const encryptedData = EncryptedSecretValueSchema.safeParse(secret.value);
+    return results;
+  }
 
-      if (!encryptedData.success) {
-        throw new Error(
-          `Unable to parse encrypted secret ${secret.key}: ${encryptedData.error.message}`
-        );
-      }
+  async #parseStoredSecret<T>(
+    schema: z.Schema<T>,
+    secret: { key: string; value: unknown; version: string }
+  ): Promise<T | undefined> {
+    if (secret.version === "1") {
+      return schema.parse(secret.value);
+    }
 
-      const decrypted = await this.#decrypt(
-        encryptedData.data.nonce,
-        encryptedData.data.ciphertext,
-        encryptedData.data.tag
+    const encryptedData = EncryptedSecretValueSchema.safeParse(secret.value);
+
+    if (!encryptedData.success) {
+      throw new Error(
+        `Unable to parse encrypted secret ${secret.key}: ${encryptedData.error.message}`
       );
+    }
 
-      const parsedDecrypted = safeJsonParse(decrypted);
-      if (!parsedDecrypted) {
-        logger.error(`Secret isn't JSON ${secret.key}`);
-        continue;
-      }
+    const decrypted = await this.#decrypt(
+      encryptedData.data.nonce,
+      encryptedData.data.ciphertext,
+      encryptedData.data.tag
+    );
+
+    const parsedDecrypted = safeJsonParse(decrypted);
 
-      results.push({ key: secret.key, value: schema.parse(parsedDecrypted) });
+    if (!parsedDecrypted) {
+      logger.error(`Secret isn't JSON ${secret.key}`);
+      return undefined;
     }
 
-    return results;
+    return schema.parse(parsedDecrypted);
   }
 
   async setSecret<T extends object>(key: string, value: T): Promise<void> {

apps/webapp/app/v3/environmentVariables/environmentVariablesRepository.server.ts

@@ -577,6 +577,42 @@ export class EnvironmentVariablesRepository implements Repository {
     return results;
   }
 
+  async getVariableValuesForKeys(
+    projectId: string,
+    items: Array<{ environmentId: string; key: string }>
+  ): Promise<Map<string, string>> {
+    if (items.length === 0) {
+      return new Map();
+    }
+
+    const uniqueItems = new Map<string, { environmentId: string; key: string }>();
+    for (const item of items) {
+      uniqueItems.set(`${item.environmentId}:${item.key}`, item);
+    }
+
+    const secretStore = getSecretStore("DATABASE", {
+      prismaClient: this.prismaClient,
+    });
+
+    const storeKeys = Array.from(uniqueItems.values()).map((item) =>
+      secretKey(projectId, item.environmentId, item.key)
+    );
+
+    const secrets = await secretStore.getSecretsByKeys(SecretValue, storeKeys);
+    const secretsByStoreKey = new Map(secrets.map((secret) => [secret.key, secret.value.secret]));
+
+    const values = new Map<string, string>();
+    for (const item of uniqueItems.values()) {
+      const storeKey = secretKey(projectId, item.environmentId, item.key);
+      const value = secretsByStoreKey.get(storeKey);
+      if (value !== undefined) {
+        values.set(`${item.environmentId}:${item.key}`, value);
+      }
+    }
+
+    return values;
+  }
+
   async getEnvironmentWithRedactedSecrets(
     projectId: string,
     environmentId: string,

apps/webapp/app/v3/environmentVariables/repository.ts

@@ -106,6 +106,14 @@ export interface Repository {
   edit(projectId: string, options: EditEnvironmentVariable): Promise<Result>;
   editValue(projectId: string, options: EditEnvironmentVariableValue): Promise<Result>;
   getProject(projectId: string): Promise<ProjectEnvironmentVariable[]>;
+  /**
+   * Fetch and decrypt only the given env var values (for dashboard display of non-secret rows).
+   * Map keys are `${environmentId}:${variableKey}`.
+   */
+  getVariableValuesForKeys(
+    projectId: string,
+    items: Array<{ environmentId: string; key: string }>
+  ): Promise<Map<string, string>>;
   /**
    * Get the environment variables for a given environment, it does NOT return values for secret variables
    */

apps/webapp/test/EnvironmentVariablesPresenter.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, vi } from "vitest";
+
+vi.mock("~/db.server", () => ({
+  prisma: {},
+  $replica: {},
+  $transaction: async (
+    prismaClient: {
+      $transaction: (fn: (tx: unknown) => Promise<unknown>) => Promise<unknown>;
+    },
+    nameOrFn: string | ((tx: unknown) => Promise<unknown>),
+    fnOrOptions?: ((tx: unknown) => Promise<unknown>) | unknown
+  ) => {
+    const fn =
+      typeof nameOrFn === "string"
+        ? (fnOrOptions as (tx: unknown) => Promise<unknown>)
+        : nameOrFn;
+
+    return prismaClient.$transaction(fn);
+  },
+}));
+
+import { postgresTest } from "@internal/testcontainers";
+import { EnvironmentVariablesPresenter } from "~/presenters/v3/EnvironmentVariablesPresenter.server";
+import { EnvironmentVariablesRepository } from "~/v3/environmentVariables/environmentVariablesRepository.server";
+import {
+  createEnvironmentVariable,
+  createRuntimeEnvironment,
+  createTestOrgProjectWithMember,
+} from "./fixtures/environmentVariablesFixtures";
+
+vi.setConfig({ testTimeout: 60_000 });
+
+describe("EnvironmentVariablesPresenter", () => {
+  postgresTest("keeps secret values redacted while returning non-secret values", async ({ prisma }) => {
+    const { user, organization, project, projectSlug } = await createTestOrgProjectWithMember(prisma);
+    const production = await createRuntimeEnvironment(prisma, {
+      projectId: project.id,
+      organizationId: organization.id,
+      type: "PRODUCTION",
+    });
+
+    const repository = new EnvironmentVariablesRepository(prisma, prisma);
+
+    await createEnvironmentVariable(repository, project.id, {
+      environmentId: production.id,
+      key: "SECRET_VAR",
+      value: "super-secret",
+      isSecret: true,
+      userId: user.id,
+    });
+    await createEnvironmentVariable(repository, project.id, {
+      environmentId: production.id,
+      key: "PLAIN_VAR",
+      value: "plain-value",
+      isSecret: false,
+      userId: user.id,
+    });
+
+    const result = await new EnvironmentVariablesPresenter(prisma).call({
+      userId: user.id,
+      projectSlug,
+    });
+
+    const secretVariable = result.environmentVariables.find((variable) => variable.key === "SECRET_VAR");
+    const nonSecretVariable = result.environmentVariables.find((variable) => variable.key === "PLAIN_VAR");
+
+    expect(secretVariable).toBeDefined();
+    expect(nonSecretVariable).toBeDefined();
+    expect(secretVariable!.value).toBe("");
+    expect(nonSecretVariable!.value).toBe("plain-value");
+  });
+});