chore: release v2.78.0

feat: migrate web api to new logger (#3230 )
feat: migrate shared package to new logger (#3229 )
2024-09-04 17:29:47 +02:00 · 2024-09-04 17:02:26 +02:00 · 2024-09-04 16:43:36 +02:00 · 2024-09-04 15:06:47 +02:00 · 2024-09-04 14:53:42 +02:00 · 2024-09-04 14:24:53 +02:00
286 changed files with 8610 additions and 5323 deletions
@@ -39,6 +39,10 @@ ENCRYPTION_KEY="0000000000000000000000000000000000000000000000000000000000000000
 # LANGFUSE_DEFAULT_PROJECT_ID=
 # LANGFUSE_DEFAULT_PROJECT_ROLE=

+# Logging, optional
+# LANGFUSE_LOG_LEVEL=info
+# LANGFUSE_LOG_FORMAT=text
+
 # Enable experimental features, optional
 # LANGFUSE_ENABLE_EXPERIMENTAL_FEATURES=true

@@ -97,6 +101,17 @@ ENCRYPTION_KEY="0000000000000000000000000000000000000000000000000000000000000000
 # The page size can be adjusted if needed to optimize performance
 # DB_EXPORT_PAGE_SIZE=1000

+# Automated provisioning of default resources
+# LANGFUSE_INIT_ORG_ID=org-id
+# LANGFUSE_INIT_ORG_NAME=org-name
+# LANGFUSE_INIT_PROJECT_ID=project-id
+# LANGFUSE_INIT_PROJECT_NAME=project-name
+# LANGFUSE_INIT_PROJECT_PUBLIC_KEY=pk-1234567890
+# LANGFUSE_INIT_PROJECT_SECRET_KEY=sk-1234567890
+# LANGFUSE_INIT_USER_EMAIL=user@example.com
+# LANGFUSE_INIT_USER_NAME=User Name
+# LANGFUSE_INIT_USER_PASSWORD=password
+


 ### START Enterprise Edition Configuration
@@ -139,13 +154,12 @@ ENCRYPTION_KEY="0000000000000000000000000000000000000000000000000000000000000000
 # NEXT_PUBLIC_POSTHOG_KEY=

 # Sentry
+# NEXT_PUBLIC_LANGFUSE_TRACING_SAMPLE_RATE
 # NEXT_PUBLIC_SENTRY_DSN=
 # NEXT_SENTRY_ORG=
 # NEXT_SENTRY_PROJECT=
 # SENTRY_AUTH_TOKEN=
-# Used to determine the Sentry sample rate
-# LANGFUSE_TRACING_SAMPLE_RATE=
-# LANGFUSE_WORKER_BETTERSTACK_TOKEN=
+# SENTRY_CSP_REPORT_URI=


 # Cloudflare Turnstile
@@ -167,6 +181,7 @@ ENCRYPTION_KEY="0000000000000000000000000000000000000000000000000000000000000000
 # REDIS_PORT=
 # REDIS_AUTH=
 # REDIS_CONNECTION_STRING=
+# REDIS_ENABLE_AUTO_PIPELINING=

 # Cache configuration
 # LANGFUSE_CACHE_API_KEY_ENABLED=
@@ -174,6 +189,9 @@ ENCRYPTION_KEY="0000000000000000000000000000000000000000000000000000000000000000
 # LANGFUSE_CACHE_PROMPT_ENABLED=
 # LANGFUSE_CACHE_PROMPT_TTL_SECONDS=

+# Rate limiting
+# LANGFUSE_RATE_LIMITS_ENABLED=
+
 # Stripe
 # STRIPE_SECRET_KEY=
 # STRIPE_WEBHOOK_SIGNING_SECRET=
@@ -197,8 +215,8 @@ ENCRYPTION_KEY="0000000000000000000000000000000000000000000000000000000000000000
 # LANGFUSE_INGESTION_CLICKHOUSE_WRITE_BATCH_SIZE= 
 # LANGFUSE_INGESTION_CLICKHOUSE_WRITE_INTERVAL_MS= 
 # LANGFUSE_INGESTION_CLICKHOUSE_MAX_ATTEMPTS=
-# LANGFUSE_LOG_LEVEL= 
 # LANGFUSE_LEGACY_INGESTION_WORKER_CONCURRENCY=
 # LANGFUSE_ASYNC_INGESTION_PROCESSING="true"
+# QUEUE_CONSUMER_LEGACY_INGESTION_QUEUE_IS_ENABLED="true"

 ## END Langfuse V3 Ingestion
@@ -8,6 +8,7 @@ updates:
  - package-ecosystem: npm
    directory: "/" # Location of package manifests
    rebase-strategy: "disabled" # use dependabot-rebase-stale
+    open-pull-requests-limit: 10
    schedule:
      interval: "daily"
    versioning-strategy: "increase"
@@ -19,17 +20,25 @@ updates:
      - dependency-name: "@types/node"
      - dependency-name: "@trpc/*"
    groups:
-      sentry:
-        patterns:
-          - "@sentry/*"
      prisma:
        patterns:
          - "prisma"
-          - "@prisma/*"
+          - "@prisma/client"
      next:
        patterns:
          - "eslint-config-next"
          - "next"
-      patches:
-        update-types:
-          - "patch"
+      lodash:
+        patterns:
+          - "lodash"
+          - "@types/lodash"
+      observability:
+        patterns:
+          - "dd-trace"
+          - "@opentelemetry/*"
+          - "@appsignal/opentelemetry-instrumentation-bullmq"
+          - "@prisma/instrumentation"
+          - "@sentry/*"
+      radix-ui:
+        patterns:
+          - "@radix-ui/*"
@@ -40,6 +40,9 @@ jobs:
      - name: Checkout
        uses: actions/checkout@v3

+      - name: Set NEXT_PUBLIC_BUILD_ID
+        run: echo "NEXT_PUBLIC_BUILD_ID=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
+
      - name: Build and run both images from compose
        run: |
          docker compose -f docker-compose.build.yml up -d
@@ -107,13 +110,26 @@ jobs:
      - name: Seed DB
        run: |
          pnpm run db:migrate
-          pnpm run db:seed

      - name: Build
        run: pnpm run build
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+          SENTRY_ORG: ${{ vars.SENTRY_ORG }}
+          SENTRY_PROJECT: ${{ vars.SENTRY_PROJECT }}

      - name: Start Langfuse
        run: (pnpm run start&)
+        env:
+          LANGFUSE_INIT_ORG_ID: "seed-org-id"
+          LANGFUSE_INIT_ORG_NAME: "Seed Org"
+          LANGFUSE_INIT_PROJECT_ID: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a"
+          LANGFUSE_INIT_PROJECT_NAME: "Seed Project"
+          LANGFUSE_INIT_PROJECT_PUBLIC_KEY: "pk-lf-1234567890"
+          LANGFUSE_INIT_PROJECT_SECRET_KEY: "sk-lf-1234567890"
+          LANGFUSE_INIT_USER_EMAIL: "demo@langfuse.com"
+          LANGFUSE_INIT_USER_NAME: "Demo User"
+          LANGFUSE_INIT_USER_PASSWORD: "password"

      - name: run tests
        run: pnpm --filter=web run test
@@ -136,6 +152,7 @@ jobs:
      - uses: pnpm/action-setup@v3
        with:
          version: 9.5.0
+
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
@@ -165,18 +182,26 @@ jobs:
          sleep 5 # Wait for PostgreSQL to accept connections
          docker compose ps

+      - name: Ensure no unhealthy status
+        run: |
+          if docker compose ps | grep "(unhealthy)"; then
+            echo "One or more services are unhealthy"
+            exit 1
+          else
+            echo "All services are healthy"
+          fi
+
      - name: Seed DB
        run: |
-          pnpm run --filter=shared ch:up
          pnpm run db:migrate
          pnpm run db:seed
+          pnpm run --filter=shared ch:up

      - name: Build
        run: pnpm --filter=worker... run build

      - name: run tests
        run: pnpm --filter=worker run test
-
  e2e-tests:
    runs-on: ubuntu-latest
    steps:
@@ -308,6 +333,9 @@ jobs:
      - name: Checkout
        uses: actions/checkout@v3

+      - name: Set NEXT_PUBLIC_BUILD_ID
+        run: echo "NEXT_PUBLIC_BUILD_ID=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
+
      - name: Log in to the GitHub Container registry
        uses: docker/login-action@v2
        with:
@@ -27,3 +27,4 @@ jobs:
          PORTER_STACK_NAME: web
          PORTER_TAG: ${{ steps.vars.outputs.sha_short }}
          PORTER_TOKEN: ${{ secrets.PORTER_STACK_12565_4060 }}
+          PORTER_NEXT_PUBLIC_BUILD_ID: ${{ steps.vars.outputs.sha_short }}
@@ -27,3 +27,4 @@ jobs:
          PORTER_STACK_NAME: web
          PORTER_TAG: ${{ steps.vars.outputs.sha_short }}
          PORTER_TOKEN: ${{ secrets.PORTER_STACK_12565_4037 }}
+          PORTER_NEXT_PUBLIC_BUILD_ID: ${{ steps.vars.outputs.sha_short }}
@@ -27,3 +27,4 @@ jobs:
          PORTER_STACK_NAME: web
          PORTER_TAG: ${{ steps.vars.outputs.sha_short }}
          PORTER_TOKEN: ${{ secrets.PORTER_STACK_12565_4054 }}
+          PORTER_NEXT_PUBLIC_BUILD_ID: ${{ steps.vars.outputs.sha_short }}
@@ -1,11 +1,11 @@
 name: Snyk Container
 on:
-  push:
-    branches-ignore:
-      - "dependabot/**"
  pull_request:
    branches:
      - "**"
+  push:
+    branches:
+      - main

 jobs:
  snyk:
@@ -26,7 +26,7 @@
  "dependencies": {
    "@langfuse/shared": "workspace:*",
    "@opentelemetry/api": ">=1.0.0 <1.9.0",
-    "next": "^14.2.3",
+    "next": "^14.2.6",
    "next-auth": "^4.24.7",
    "zod": "^3.23.8"
  },
@@ -1,6 +1,6 @@
 {
  "name": "langfuse",
-  "version": "2.72.0",
+  "version": "2.78.0",
  "author": "engineering@langfuse.com",
  "license": "MIT",
  "private": true,
@@ -11,7 +11,7 @@
    "@typescript-eslint/eslint-plugin": "^7.1.0",
    "@typescript-eslint/parser": "^7.12.0",
    "@vercel/style-guide": "^6.0.0",
-    "eslint-config-next": "^14.2.3",
+    "eslint-config-next": "^14.2.6",
    "eslint-config-prettier": "^9.1.0",
    "eslint-config-turbo": "^1.13.4",
    "eslint-plugin-only-warn": "^1.1.0",
@@ -18,5 +18,6 @@ if [ "$CLICKHOUSE_MIGRATION_SSL" = true ] ; then
 else
    DATABASE_URL="${CLICKHOUSE_MIGRATION_URL}?username=${CLICKHOUSE_USER}&password=${CLICKHOUSE_PASSWORD}&database=default&x-multi-statement=true&x-migrations-table-engine=MergeTree"
 fi
+
 # Execute the up command
 migrate -source file://clickhouse/migrations -database "$DATABASE_URL" up
@@ -21,6 +21,10 @@
      "import": "./dist/src/server/index.js",
      "require": "./dist/src/server/index.js"
    },
+    "./src/server/auth/apiKeys": {
+      "import": "./dist/src/server/auth/apiKeys.js",
+      "require": "./dist/src/server/auth/apiKeys.js"
+    },
    "./encryption": {
      "import": "./dist/src/encryption/index.js",
      "require": "./dist/src/encryption/index.js"
@@ -63,25 +67,26 @@
    "@react-email/render": "^0.0.15",
    "@types/bcryptjs": "^2.4.6",
    "bcryptjs": "^2.4.3",
-    "bullmq": "^5.4.2",
+    "bullmq": "^5.12.10",
+    "dd-trace": "^5.19.0",
    "decimal.js": "^10.4.3",
    "exponential-backoff": "^3.1.1",
-    "dd-trace": "^5.19.0",
    "ioredis": "^5.4.1",
-    "kysely": "^0.27.3",
+    "kysely": "^0.27.4",
    "langchain": "^0.2.6",
    "lodash": "^4.17.21",
    "next-auth": "^4.24.7",
    "nodemailer": "^6.9.13",
    "prisma-extension-kysely": "^2.1.0",
    "uuid": "^9.0.1",
+    "winston": "^3.14.2",
    "zod": "^3.23.8",
-    "zod-to-json-schema": "^3.22.5"
+    "zod-to-json-schema": "^3.23.2"
  },
  "devDependencies": {
    "@repo/eslint-config": "workspace:*",
    "@repo/typescript-config": "workspace:*",
-    "@types/lodash": "^4.17.5",
+    "@types/lodash": "^4.17.7",
    "@types/node": "^20.11.29",
    "@types/nodemailer": "^6.4.15",
    "@types/pg": "^8.11.6",
@@ -103,7 +108,7 @@
    "vitest": "^1.5.3"
  },
  "peerDependencies": {
-    "@types/react": "^18.2.79",
-    "react": "^18.0.0"
+    "@types/react": "~18.2.79",
+    "react": "~18.2.0"
  }
 }
@@ -12,7 +12,7 @@ import { parseArgs } from "node:util";
 import { chunk } from "lodash";
 import { v4 } from "uuid";
 import { ModelUsageUnit } from "../src";
-import { getDisplaySecretKey, hashSecretKey } from "../src/server";
+import { getDisplaySecretKey, hashSecretKey, logger } from "../src/server";
 import { encrypt } from "../src/encryption";
 import { redis } from "../src/server/redis/redis";

@@ -265,11 +265,11 @@ async function main() {
        project1,
        project2,
        promptIds,
-        configIdsAndNames
+        configIdsAndNames,
      );

-    console.log(
-      `Seeding ${traces.length} traces, ${observations.length} observations, and ${scores.length} scores`
+    logger.info(
+      `Seeding ${traces.length} traces, ${observations.length} observations, and ${scores.length} scores`,
    );

    await uploadObjects(
@@ -278,7 +278,7 @@ async function main() {
      scores,
      sessions,
      events,
-      comments
+      comments,
    );

    // If openai key is in environment, add it to the projects LLM API keys
@@ -295,8 +295,8 @@ async function main() {
        },
      });
    } else {
-      console.warn(
-        "No OPENAI_API_KEY found in environment. Skipping seeding LLM API key."
+      logger.warn(
+        "No OPENAI_API_KEY found in environment. Skipping seeding LLM API key.",
      );
    }

@@ -431,7 +431,7 @@ async function main() {

        for (const datasetItemId of datasetItemIds) {
          const relevantObservations = observations.filter(
-            (o) => o.projectId === project2.id
+            (o) => o.projectId === project2.id,
          );
          const observation =
            relevantObservations[
@@ -457,13 +457,13 @@ main()
  .then(async () => {
    await prisma.$disconnect();
    redis?.disconnect();
-    console.log("Disconnected from postgres and redis");
+    logger.info("Disconnected from postgres and redis");
  })
  .catch(async (e) => {
-    console.error(e);
+    logger.error(e);
    await prisma.$disconnect();
    redis?.disconnect();
-    console.log("Disconnected from postgres and redis");
+    logger.info("Disconnected from postgres and redis");
    process.exit(1);
  });

@@ -473,7 +473,7 @@ async function uploadObjects(
  scores: Prisma.ScoreCreateManyInput[],
  sessions: Prisma.TraceSessionCreateManyInput[],
  events: Prisma.ObservationCreateManyInput[],
-  comments: Prisma.CommentCreateManyInput[]
+  comments: Prisma.CommentCreateManyInput[],
 ) {
  let promises: Prisma.PrismaPromise<unknown>[] = [];

@@ -487,14 +487,14 @@ async function uploadObjects(
        },
        create: chunk[0]!,
        update: {},
-      })
+      }),
    );
  });

  for (let i = 0; i < promises.length; i++) {
    if (i + 1 >= promises.length || i % Math.ceil(promises.length / 10) === 0)
-      console.log(
-        `Seeding of Sessions ${((i + 1) / promises.length) * 100}% complete`
+      logger.info(
+        `Seeding of Sessions ${((i + 1) / promises.length) * 100}% complete`,
      );
    await promises[i];
  }
@@ -505,13 +505,13 @@ async function uploadObjects(
    promises.push(
      prisma.trace.createMany({
        data: chunk,
-      })
+      }),
    );
  });
  for (let i = 0; i < promises.length; i++) {
    if (i + 1 >= promises.length || i % Math.ceil(promises.length / 10) === 0)
-      console.log(
-        `Seeding of Traces ${((i + 1) / promises.length) * 100}% complete`
+      logger.info(
+        `Seeding of Traces ${((i + 1) / promises.length) * 100}% complete`,
      );
    await promises[i];
  }
@@ -521,14 +521,14 @@ async function uploadObjects(
    promises.push(
      prisma.observation.createMany({
        data: chunk,
-      })
+      }),
    );
  });

  for (let i = 0; i < promises.length; i++) {
    if (i + 1 >= promises.length || i % Math.ceil(promises.length / 10) === 0)
-      console.log(
-        `Seeding of Observations ${((i + 1) / promises.length) * 100}% complete`
+      logger.info(
+        `Seeding of Observations ${((i + 1) / promises.length) * 100}% complete`,
      );
    await promises[i];
  }
@@ -538,14 +538,14 @@ async function uploadObjects(
    promises.push(
      prisma.observation.createMany({
        data: chunk,
-      })
+      }),
    );
  });

  for (let i = 0; i < promises.length; i++) {
    if (i + 1 >= promises.length || i % Math.ceil(promises.length / 10) === 0)
-      console.log(
-        `Seeding of Events ${((i + 1) / promises.length) * 100}% complete`
+      logger.info(
+        `Seeding of Events ${((i + 1) / promises.length) * 100}% complete`,
      );
    await promises[i];
  }
@@ -555,13 +555,13 @@ async function uploadObjects(
    promises.push(
      prisma.score.createMany({
        data: chunk,
-      })
+      }),
    );
  });
  for (let i = 0; i < promises.length; i++) {
    if (i + 1 >= promises.length || i % Math.ceil(promises.length / 10) === 0)
-      console.log(
-        `Seeding of Scores ${((i + 1) / promises.length) * 100}% complete`
+      logger.info(
+        `Seeding of Scores ${((i + 1) / promises.length) * 100}% complete`,
      );
    await promises[i];
  }
@@ -571,13 +571,13 @@ async function uploadObjects(
    promises.push(
      prisma.comment.createMany({
        data: chunk,
-      })
+      }),
    );
  });
  for (let i = 0; i < promises.length; i++) {
    if (i + 1 >= promises.length || i % Math.ceil(promises.length / 10) === 0)
-      console.log(
-        `Seeding of Comments ${((i + 1) / promises.length) * 100}% complete`
+      logger.info(
+        `Seeding of Comments ${((i + 1) / promises.length) * 100}% complete`,
      );
    await promises[i];
  }
@@ -598,7 +598,7 @@ function createObjects(
      dataType: ScoreDataType;
      categories: ConfigCategory[] | null;
    }[]
-  >
+  >,
 ) {
  const traces: Prisma.TraceCreateManyInput[] = [];
  const observations: Prisma.ObservationCreateManyInput[] = [];
@@ -612,7 +612,7 @@ function createObjects(
    // print progress to console with a progress bar that refreshes every 10 iterations
    // random date within last 90 days, with a linear bias towards more recent dates
    const traceTs = new Date(
-      Date.now() - Math.floor(Math.random() ** 1.5 * 90 * 24 * 60 * 60 * 1000)
+      Date.now() - Math.floor(Math.random() ** 1.5 * 90 * 24 * 60 * 60 * 1000),
    );

    const envTag = envTags[Math.floor(Math.random() * envTags.length)];
@@ -753,11 +753,11 @@ function createObjects(
    for (let j = 0; j < Math.floor(Math.random() * 10) + 1; j++) {
      // add between 1 and 30 ms to trace timestamp
      const spanTsStart = new Date(
-        traceTs.getTime() + Math.floor(Math.random() * 30)
+        traceTs.getTime() + Math.floor(Math.random() * 30),
      );
      // random duration of upto 5000ms
      const spanTsEnd = new Date(
-        spanTsStart.getTime() + Math.floor(Math.random() * 5000)
+        spanTsStart.getTime() + Math.floor(Math.random() * 5000),
      );

      const span = {
@@ -792,22 +792,22 @@ function createObjects(
        const generationTsStart = new Date(
          spanTsStart.getTime() +
            Math.floor(
-              Math.random() * (spanTsEnd.getTime() - spanTsStart.getTime())
-            )
+              Math.random() * (spanTsEnd.getTime() - spanTsStart.getTime()),
+            ),
        );
        const generationTsEnd = new Date(
          generationTsStart.getTime() +
            Math.floor(
              Math.random() *
-                (spanTsEnd.getTime() - generationTsStart.getTime())
-            )
+                (spanTsEnd.getTime() - generationTsStart.getTime()),
+            ),
        );
        // somewhere in the middle
        const generationTsCompletionStart = new Date(
          generationTsStart.getTime() +
            Math.floor(
-              (generationTsEnd.getTime() - generationTsStart.getTime()) / 3
-            )
+              (generationTsEnd.getTime() - generationTsStart.getTime()) / 3,
+            ),
        );

        const promptTokens = Math.floor(Math.random() * 1000) + 300;
@@ -828,10 +828,12 @@ function createObjects(
        const promptId =
          promptIds.get(projectId)![
            Math.floor(
-              Math.random() * Math.floor(promptIds.get(projectId)!.length / 2)
+              Math.random() * Math.floor(promptIds.get(projectId)!.length / 2),
            )
          ];

+        const { input, output } = getGenerationInputOutput();
+
        const generation = {
          type: ObservationType.GENERATION,
          id: `generation-${v4()}`,
@@ -843,35 +845,8 @@ function createObjects(
          name: `generation-${i}-${j}-${k}`,
          projectId: trace.projectId,
          promptId: promptId,
-          input:
-            Math.random() > 0.5
-              ? [
-                  {
-                    role: "system",
-                    content: "Be a helpful assistant",
-                  },
-                  {
-                    role: "user",
-                    content: "How can i create a *React* component?",
-                  },
-                ]
-              : {
-                  input: "How can i create a React component?",
-                  retrievedDocuments: [
-                    {
-                      title: "How to create a React component",
-                      url: "https://www.google.com",
-                      description: "A guide to creating React components",
-                    },
-                    {
-                      title: "React component creation",
-                      url: "https://www.google.com",
-                      description: "A guide to creating React components",
-                    },
-                  ],
-                },
-          output:
-            "Creating a React component can be done in two ways: as a functional component or as a class component. Let's start with a basic example of both.\n\n**Image**\n\n![Languse Example Image](https://static.langfuse.com/langfuse-dev/langfuse-example-image.jpeg)\n\n1.  **Functional Component**:\n\nA functional component is just a plain JavaScript function that accepts props as an argument, and returns a React element. Here's how you can create one:\n\n```javascript\nimport React from 'react';\nfunction Greeting(props) {\n  return <h1>Hello, {props.name}</h1>;\n}\nexport default Greeting;\n```\n\nTo use this component in another file, you can do:\n\n```javascript\nimport Greeting from './Greeting';\nfunction App() {\n  return (\n    <div>\n      <Greeting name=\"John\" />\n    </div>\n  );\n}\nexport default App;\n```\n\n2.  **Class Component**:\n\nYou can also define components as classes in React. These have some additional features compared to functional components:\n\n```javascript\nimport React, { Component } from 'react';\nclass Greeting extends Component {\n  render() {\n    return <h1>Hello, {this.props.name}</h1>;\n  }\n}\nexport default Greeting;\n```\n\nAnd here's how to use this component:\n\n```javascript\nimport Greeting from './Greeting';\nclass App extends Component {\n  render() {\n    return (\n      <div>\n        <Greeting name=\"John\" />\n      </div>\n    );\n  }\n}\nexport default App;\n```\n\nWith the advent of hooks in React, functional components can do everything that class components can do and hence, the community has been favoring functional components over class components.\n\nRemember to import React at the top of your file whenever you're creating a component, because JSX transpiles to `React.createElement` calls under the hood.",
+          input,
+          output,
          model: model,
          internalModel: model,
          modelParameters: {
@@ -935,8 +910,8 @@ function createObjects(
          const eventTs = new Date(
            spanTsStart.getTime() +
              Math.floor(
-                Math.random() * (spanTsEnd.getTime() - spanTsStart.getTime())
-              )
+                Math.random() * (spanTsEnd.getTime() - spanTsStart.getTime()),
+              ),
          );

          events.push({
@@ -958,7 +933,7 @@ function createObjects(
  }
  // find unique sessions by id and projectid
  const uniqueSessions: Prisma.TraceSessionCreateManyInput[] = Array.from(
-    new Set(sessions.map((session) => JSON.stringify(session)))
+    new Set(sessions.map((session) => JSON.stringify(session))),
  ).map((session) => JSON.parse(session) as Prisma.TraceSessionCreateManyInput);

  return {
@@ -979,7 +954,7 @@ async function generatePromptsForProject(projects: Project[]) {
    projects.map(async (project) => {
      const promptIdsForProject = await generatePrompts(project);
      promptIds.set(project.id, promptIdsForProject);
-    })
+    }),
  );
  return promptIds;
 }
@@ -1165,7 +1140,7 @@ async function generateConfigsForProject(projects: Project[]) {
    projects.map(async (project) => {
      const configNameAndId = await generateConfigs(project);
      projectIdsToConfigs.set(project.id, configNameAndId);
-    })
+    }),
  );
  return projectIdsToConfigs;
 }
@@ -1243,3 +1218,63 @@ async function generateConfigs(project: Project) {

  return configNameAndId;
 }
+function getGenerationInputOutput(): {
+  input: Prisma.InputJsonValue;
+  output: Prisma.InputJsonValue;
+} {
+  if (Math.random() > 0.9) {
+    const input = [
+      {
+        role: "user",
+        content: [
+          { text: "What’s depicted in this image?", type: "text" },
+          {
+            type: "image_url",
+            image_url: {
+              url: "https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Gfp-wisconsin-madison-the-nature-boardwalk.jpg/2560px-Gfp-wisconsin-madison-the-nature-boardwalk.jpg",
+            },
+          },
+          { text: "Describe the scene in detail.", type: "text" },
+        ],
+      },
+    ];
+
+    const output =
+      "The image depicts a serene landscape featuring a wooden pathway or boardwalk that winds through a lush green field. The field is filled with tall grass and surrounded by trees and shrubs. Above, the sky is bright with scattered clouds, suggesting a clear and pleasant day. The scene conveys a sense of tranquility and natural beauty.";
+
+    return { input, output };
+  }
+
+  const input =
+    Math.random() > 0.5
+      ? [
+          {
+            role: "system",
+            content: "Be a helpful assistant",
+          },
+          {
+            role: "user",
+            content: "How can i create a *React* component?",
+          },
+        ]
+      : {
+          input: "How can i create a React component?",
+          retrievedDocuments: [
+            {
+              title: "How to create a React component",
+              url: "https://www.google.com",
+              description: "A guide to creating React components",
+            },
+            {
+              title: "React component creation",
+              url: "https://www.google.com",
+              description: "A guide to creating React components",
+            },
+          ],
+        };
+
+  const output =
+    "Creating a React component can be done in two ways: as a functional component or as a class component. Let's start with a basic example of both.\n\n**Image**\n\n![Languse Example Image](https://static.langfuse.com/langfuse-dev/langfuse-example-image.jpeg)\n\n1.  **Functional Component**:\n\nA functional component is just a plain JavaScript function that accepts props as an argument, and returns a React element. Here's how you can create one:\n\n```javascript\nimport React from 'react';\nfunction Greeting(props) {\n  return <h1>Hello, {props.name}</h1>;\n}\nexport default Greeting;\n```\n\nTo use this component in another file, you can do:\n\n```javascript\nimport Greeting from './Greeting';\nfunction App() {\n  return (\n    <div>\n      <Greeting name=\"John\" />\n    </div>\n  );\n}\nexport default App;\n```\n\n2.  **Class Component**:\n\nYou can also define components as classes in React. These have some additional features compared to functional components:\n\n```javascript\nimport React, { Component } from 'react';\nclass Greeting extends Component {\n  render() {\n    return <h1>Hello, {this.props.name}</h1>;\n  }\n}\nexport default Greeting;\n```\n\nAnd here's how to use this component:\n\n```javascript\nimport Greeting from './Greeting';\nclass App extends Component {\n  render() {\n    return (\n      <div>\n        <Greeting name=\"John\" />\n      </div>\n    );\n  }\n}\nexport default App;\n```\n\nWith the advent of hooks in React, functional components can do everything that class components can do and hence, the community has been favoring functional components over class components.\n\nRemember to import React at the top of your file whenever you're creating a component, because JSX transpiles to `React.createElement` calls under the hood.";
+
+  return { input, output };
+}
@@ -1,7 +1,7 @@
 // This file exports the prisma db connection, the Prisma Object, and the Typescript types.
 // This is not imported in the index.ts file of this package, as we must not import this into FE code.

-import { PrismaClient } from "@prisma/client";
+import { Prisma, PrismaClient } from "@prisma/client";
 import { env } from "process";
 import kyselyExtension from "prisma-extension-kysely";
 import {
@@ -11,17 +11,38 @@ import {
  PostgresQueryCompiler,
 } from "kysely";
 import { DB } from ".";
+import { logger } from "./server";

 // Instantiated according to the Prisma documentation
 // https://www.prisma.io/docs/orm/more/help-and-troubleshooting/help-articles/nextjs-prisma-client-dev-practices

 const prismaClientSingleton = () => {
-  return new PrismaClient({
-    log:
-      env.NODE_ENV === "development"
-        ? ["query", "error", "warn"]
-        : ["error", "warn"],
+  const client = new PrismaClient<
+    Prisma.PrismaClientOptions,
+    "warn" | "error" | "query"
+  >({
+    log: [
+      { emit: "event", level: "query" },
+      { emit: "event", level: "error" },
+      { emit: "event", level: "warn" },
+    ],
  });
+
+  if (env.NODE_ENV === "development") {
+    client.$on("query", (event) => {
+      logger.info(`prisma:query ${event.query}, ${event.duration}ms`);
+    });
+  }
+
+  client.$on("warn", (event) => {
+    logger.warn(`prisma:warn ${event.message}`);
+  });
+
+  client.$on("error", (event) => {
+    logger.error(`prisma:error ${event.message}`);
+  });
+
+  return client;
 };

 const kyselySingleton = (prismaClient: PrismaClient) => {
@@ -38,7 +59,7 @@ const kyselySingleton = (prismaClient: PrismaClient) => {
            createQueryCompiler: () => new PostgresQueryCompiler(),
          },
        }),
-    })
+    }),
  );
 };
 declare global {
@@ -16,11 +16,12 @@ const EnvSchema = z.object({
    .nullable(),
  REDIS_AUTH: z.string().nullish(),
  REDIS_CONNECTION_STRING: z.string().nullish(),
+  REDIS_ENABLE_AUTO_PIPELINING: z.enum(["true", "false"]).default("true"),
  ENCRYPTION_KEY: z
    .string()
    .length(
      64,
-      "ENCRYPTION_KEY must be 256 bits, 64 string characters in hex format, generate via: openssl rand -hex 32"
+      "ENCRYPTION_KEY must be 256 bits, 64 string characters in hex format, generate via: openssl rand -hex 32",
    )
    .optional(),
  LANGFUSE_CACHE_PROMPT_ENABLED: z.enum(["true", "false"]).default("false"),
@@ -37,6 +38,11 @@ const EnvSchema = z.object({
    .number()
    .positive()
    .default(60 * 10),
+  SALT: z.string().optional(), // used by components imported by web package
+  LANGFUSE_LOG_LEVEL: z
+    .enum(["trace", "debug", "info", "warn", "error", "fatal"])
+    .optional(),
+  LANGFUSE_LOG_FORMAT: z.enum(["text", "json"]).default("text"),
 });

 export const env = EnvSchema.parse(process.env);
@@ -12,3 +12,6 @@ export const plans = Object.keys(planLabels) as Plan[];

 // This function is kept here to ensure consistency when updating plan names in the future.
 export const isCloudPlan = (plan: Plan) => plan.startsWith("cloud");
+
+export const isPlan = (value: string): value is Plan =>
+  plans.includes(value as Plan);
@@ -83,13 +83,13 @@ export const ScoreBodyWithoutConfig = z.discriminatedUnion("dataType", [
    z.object({
      value: z.number(),
      dataType: z.literal("NUMERIC"),
-    })
+    }),
  ),
  BaseScoreBody.merge(
    z.object({
      value: z.string(),
      dataType: z.literal("CATEGORICAL"),
-    })
+    }),
  ),
  BaseScoreBody.merge(
    z.object({
@@ -97,7 +97,7 @@ export const ScoreBodyWithoutConfig = z.discriminatedUnion("dataType", [
        message: "Value must be either 0 or 1",
      }),
      dataType: z.literal("BOOLEAN"),
-    })
+    }),
  ),
 ]);

@@ -161,7 +161,7 @@ export const ScorePropsAgainstConfig = z.union([
 */
 export const filterAndValidateDbScoreList = (
  scores: Score[],
-  onParseError?: (error: z.ZodError) => void
+  onParseError?: (error: z.ZodError) => void,
 ): APIScore[] =>
  scores.reduce((acc, ts) => {
    const result = APIScoreSchema.safeParse(ts);
@@ -198,14 +198,14 @@ export const PostScoresBody = z.discriminatedUnion("dataType", [
      value: z.number(),
      dataType: z.literal("NUMERIC"),
      configId: z.string().nullish(),
-    })
+    }),
  ),
  BaseScoreBody.merge(
    z.object({
      value: z.string(),
      dataType: z.literal("CATEGORICAL"),
      configId: z.string().nullish(),
-    })
+    }),
  ),
  BaseScoreBody.merge(
    z.object({
@@ -215,14 +215,14 @@ export const PostScoresBody = z.discriminatedUnion("dataType", [
      }),
      dataType: z.literal("BOOLEAN"),
      configId: z.string().nullish(),
-    })
+    }),
  ),
  BaseScoreBody.merge(
    z.object({
      value: z.union([z.string(), z.number()]),
      dataType: z.undefined(),
      configId: z.string().nullish(),
-    })
+    }),
  ),
 ]);

@@ -256,7 +256,7 @@ const LegacyGetScoreResponseDataV1 = z.intersection(
    trace: z.object({
      userId: z.string().nullish(),
    }),
-  })
+  }),
 );
 export const GetScoresResponse = z.object({
  data: z.array(LegacyGetScoreResponseDataV1),
@@ -265,7 +265,7 @@ export const GetScoresResponse = z.object({

 export const legacyFilterAndValidateV1GetScoreList = (
  scores: unknown[],
-  onParseError?: (error: z.ZodError) => void
+  onParseError?: (error: z.ZodError) => void,
 ): z.infer<typeof LegacyGetScoreResponseDataV1>[] =>
  scores.reduce(
    (acc: z.infer<typeof LegacyGetScoreResponseDataV1>[], ts) => {
@@ -278,7 +278,7 @@ export const legacyFilterAndValidateV1GetScoreList = (
      }
      return acc;
    },
-    [] as z.infer<typeof LegacyGetScoreResponseDataV1>[]
+    [] as z.infer<typeof LegacyGetScoreResponseDataV1>[],
  );

 // GET /scores/{scoreId}
@@ -1,20 +1,19 @@
 export * from "./constants";
-export * from "./queries";
 export * from "./interfaces/filters";
 export * from "./interfaces/orderBy";
 export * from "./interfaces/cloudConfigSchema";
 export * from "./interfaces/parseDbOrg";
 export * from "./tableDefinitions";
 export * from "./types";
-export * from "./filterToPrisma";
-export * from "./orderByToPrisma";
 export * from "./tracesTable";
-export * from "./server/auth/auth";
+export * from "./server/auth/apiKeys";
 export * from "./observationsTable";
 export * from "./utils/zod";
 export * from "./utils/json";
 export * from "./utils/objects";
 export * from "./utils/typeChecks";
+export * from "./features/entitlements/plans";
+export * from "./interfaces/rate-limits";
 export { env } from "./env";

 // llm api
@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { CloudConfigRateLimit } from "./rate-limits";

 export const CloudConfigSchema = z.object({
  plan: z.enum(["Hobby", "Pro", "Team", "Enterprise"]).optional(),
@@ -13,5 +14,9 @@ export const CloudConfigSchema = z.object({
      activeProductId: z.string().optional(),
    })
    .optional(),
+
+  // custom rate limits for an organization
+  rateLimitOverrides: CloudConfigRateLimit.optional(),
 });
+
 export type CloudConfigSchema = z.infer<typeof CloudConfigSchema>;
@@ -0,0 +1,30 @@
+import z from "zod";
+import { ApiAccessScope } from "../server";
+
+export const RateLimitResource = z.enum([
+  "ingestion",
+  "public-api",
+  "public-api-metrics",
+  "prompts",
+]);
+
+// result of the rate limit check.
+export type RateLimitResult = {
+  resource: z.infer<typeof RateLimitResource>;
+  points: number;
+  scope: ApiAccessScope;
+
+  // from rate-limiter-flexible
+  remainingPoints: number;
+  msBeforeNext: number;
+  consumedPoints: number;
+  isFirstInDuration: boolean;
+};
+
+export const RateLimitConfig = z.object({
+  points: z.number().nullish(),
+  durationInSec: z.number().nullish(),
+  resource: RateLimitResource,
+});
+
+export const CloudConfigRateLimit = z.array(RateLimitConfig);
@@ -18,6 +18,7 @@ export const observationsTableCols: ColumnDefinition[] = [
    type: "stringOptions",
    internal: 'o."name"',
    options: [], // to be added at runtime
+    nullable: true,
  },
  { name: "Trace ID", id: "traceId", type: "string", internal: 't."id"' },
  {
@@ -26,8 +27,15 @@ export const observationsTableCols: ColumnDefinition[] = [
    type: "stringOptions",
    internal: 't."name"',
    options: [], // to be added at runtime
+    nullable: true,
+  },
+  {
+    name: "User ID",
+    id: "userId",
+    type: "string",
+    internal: 't."user_id"',
+    nullable: true,
  },
-  { name: "User ID", id: "userId", type: "string", internal: 't."user_id"' },
  {
    name: "Start Time",
    id: "startTime",
@@ -45,6 +53,7 @@ export const observationsTableCols: ColumnDefinition[] = [
    id: "timeToFirstToken",
    type: "number",
    internal: 'o."completion_start_time" - o."start_time"',
+    nullable: true,
  },
  {
    name: "Latency (s)",
@@ -57,24 +66,28 @@ export const observationsTableCols: ColumnDefinition[] = [
    id: "timePerOutputToken",
    type: "number",
    internal: '"latency" / o."completion_tokens"',
+    nullable: true,
  },
  {
    name: "Input Cost ($)",
    id: "inputCost",
    type: "number",
    internal: 'o."calculated_input_cost"',
+    nullable: true,
  },
  {
    name: "Output Cost ($)",
    id: "outputCost",
    type: "number",
    internal: 'o."calculated_output_cost"',
+    nullable: true,
  },
  {
    name: "Total Cost ($)",
    id: "totalCost",
    type: "number",
    internal: 'o."calculated_total_cost"',
+    nullable: true,
  },
  {
    name: "Level",
@@ -88,6 +101,7 @@ export const observationsTableCols: ColumnDefinition[] = [
    id: "statusMessage",
    type: "string",
    internal: 'o."status_message"',
+    nullable: true,
  },
  {
    name: "Model",
@@ -95,24 +109,28 @@ export const observationsTableCols: ColumnDefinition[] = [
    type: "stringOptions",
    internal: 'o."model"',
    options: [], // to be added at runtime
+    nullable: true,
  },
  {
    name: "Input Tokens",
    id: "inputTokens",
    type: "number",
    internal: 'o."prompt_tokens"',
+    nullable: true,
  },
  {
    name: "Output Tokens",
    id: "outputTokens",
    type: "number",
    internal: 'o."completion_tokens"',
+    nullable: true,
  },
  {
    name: "Total Tokens",
    id: "totalTokens",
    type: "number",
    internal: 'o."total_tokens"',
+    nullable: true,
  },
  {
    name: "Usage",
@@ -137,6 +155,7 @@ export const observationsTableCols: ColumnDefinition[] = [
    id: "version",
    type: "string",
    internal: 'o."version"',
+    nullable: true,
  },
  {
    name: "Prompt Name",
@@ -144,12 +163,21 @@ export const observationsTableCols: ColumnDefinition[] = [
    type: "stringOptions",
    internal: "p.name",
    options: [], // to be added at runtime
+    nullable: true,
  },
  {
    name: "Prompt Version",
    id: "promptVersion",
    type: "number",
    internal: "p.version",
+    nullable: true,
+  },
+  {
+    name: "Trace Tags",
+    id: "tags",
+    type: "arrayOptions",
+    internal: "t.tags",
+    options: [], // to be added at runtime
  },
 ];

@@ -161,6 +189,7 @@ export type ObservationOptions = {
  traceName: Array<OptionsDefinition>;
  scores_avg: Array<string>;
  promptName: Array<OptionsDefinition>;
+  tags: Array<OptionsDefinition>;
 };

 export function observationsTableColsWithOptions(
@@ -182,6 +211,9 @@ export function observationsTableColsWithOptions(
    if (col.id === "promptName") {
      return { ...col, options: options?.promptName ?? [] };
    }
+    if (col.id === "tags") {
+      return { ...col, options: options?.tags ?? [] };
+    }
    return col;
  });
 }
@@ -1 +0,0 @@
-export { getSessionTableSQL } from "./getSessionTableSQL";
@@ -0,0 +1,81 @@
+import { PrismaClient } from "@prisma/client";
+import { compare, hash } from "bcryptjs";
+import { randomUUID } from "crypto";
+import * as crypto from "crypto";
+import { env } from "../../env";
+
+export function getDisplaySecretKey(secretKey: string) {
+  return secretKey.slice(0, 6) + "..." + secretKey.slice(-4);
+}
+
+export async function hashSecretKey(key: string) {
+  // legacy, uses bcrypt, transformed into hashed key upon first use
+  const hashedKey = await hash(key, 11);
+  return hashedKey;
+}
+
+async function generateKeySet() {
+  return {
+    pk: `pk-lf-${randomUUID()}`,
+    sk: `sk-lf-${randomUUID()}`,
+  };
+}
+
+export async function verifySecretKey(key: string, hashedKey: string) {
+  const isValid = await compare(key, hashedKey);
+  return isValid;
+}
+
+export function createShaHash(privateKey: string, salt: string): string {
+  const hash = crypto
+    .createHash("sha256")
+    .update(privateKey)
+    .update(crypto.createHash("sha256").update(salt, "utf8").digest("hex"))
+    .digest("hex");
+
+  return hash;
+}
+
+export async function createAndAddApiKeysToDb(p: {
+  prisma: PrismaClient;
+  projectId: string;
+  note?: string;
+  predefinedKeys?: {
+    secretKey: string;
+    publicKey: string;
+  };
+}) {
+  const salt = env.SALT;
+  if (!salt) {
+    throw new Error("SALT is not set");
+  }
+
+  const { pk, sk } = p.predefinedKeys
+    ? { pk: p.predefinedKeys.publicKey, sk: p.predefinedKeys.secretKey }
+    : await generateKeySet();
+
+  const hashedSk = await hashSecretKey(sk);
+  const displaySk = getDisplaySecretKey(sk);
+
+  const hashFromProvidedKey = createShaHash(sk, salt);
+
+  const apiKey = await p.prisma.apiKey.create({
+    data: {
+      projectId: p.projectId,
+      publicKey: pk,
+      hashedSecretKey: hashedSk,
+      displaySecretKey: displaySk,
+      fastHashedSecretKey: hashFromProvidedKey,
+      note: p.note,
+    },
+  });
+
+  return {
+    id: apiKey.id,
+    createdAt: apiKey.createdAt,
+    note: apiKey.note,
+    publicKey: apiKey.publicKey,
+    secretKey: sk,
+    displaySecretKey: displaySk,
+  };
+}
@@ -1,81 +0,0 @@
-import { compare, hash } from "bcryptjs";
-import { randomUUID } from "crypto";
-import * as crypto from "crypto";
-import type { OAuthConfig, OAuthUserConfig } from "next-auth/providers/oauth";
-
-export function generateSecretKey() {
-  return `sk-lf-${randomUUID()}`;
-}
-
-export function generatePublicKey() {
-  return `pk-lf-${randomUUID()}`;
-}
-
-export function getDisplaySecretKey(secretKey: string) {
-  return secretKey.slice(0, 6) + "..." + secretKey.slice(-4);
-}
-
-export async function hashSecretKey(key: string) {
-  // legacy, uses bcrypt, transformed into hashed key upon first use
-  const hashedKey = await hash(key, 11);
-  return hashedKey;
-}
-
-export async function generateKeySet() {
-  const pk = generatePublicKey();
-  const sk = generateSecretKey();
-  const hashedSk = await hashSecretKey(sk);
-  const displaySk = getDisplaySecretKey(sk);
-
-  return {
-    pk,
-    sk,
-    hashedSk,
-    displaySk,
-  };
-}
-
-export async function verifySecretKey(key: string, hashedKey: string) {
-  const isValid = await compare(key, hashedKey);
-  return isValid;
-}
-
-export function createShaHash(privateKey: string, salt: string): string {
-  const hash = crypto
-    .createHash("sha256")
-    .update(privateKey)
-    .update(crypto.createHash("sha256").update(salt, "utf8").digest("hex"))
-    .digest("hex");
-
-  return hash;
-}
-
-export interface CustomSSOUser extends Record<string, any> {
-  email: string;
-  id: string;
-  name: string;
-  verified: boolean;
-}
-
-export function CustomSSOProvider<P extends CustomSSOUser>(
-  options: OAuthUserConfig<P>
-): OAuthConfig<P> {
-  return {
-    id: "custom",
-    name: "CustomSSOProvider",
-    type: "oauth",
-    wellKnown: `${options.issuer}/.well-known/openid-configuration`,
-    authorization: { params: { scope: "openid email profile" } }, // overridden by options.authorization to be able to set custom scopes, deep merged with this default
-    checks: ["pkce", "state"],
-    idToken: true,
-    profile(profile) {
-      return {
-        id: profile.sub,
-        name: profile.name,
-        email: profile.email,
-        image: null,
-      };
-    },
-    options,
-  };
-}
@@ -0,0 +1,31 @@
+import type { OAuthConfig, OAuthUserConfig } from "next-auth/providers/oauth";
+
+interface CustomSSOUser extends Record<string, any> {
+  email: string;
+  id: string;
+  name: string;
+  verified: boolean;
+}
+
+export function CustomSSOProvider<P extends CustomSSOUser>(
+  options: OAuthUserConfig<P>
+): OAuthConfig<P> {
+  return {
+    id: "custom",
+    name: "CustomSSOProvider",
+    type: "oauth",
+    wellKnown: `${options.issuer}/.well-known/openid-configuration`,
+    authorization: { params: { scope: "openid email profile" } }, // overridden by options.authorization to be able to set custom scopes, deep merged with this default
+    checks: ["pkce", "state"],
+    idToken: true,
+    profile(profile) {
+      return {
+        id: profile.sub,
+        name: profile.name,
+        email: profile.email,
+        image: null,
+      };
+    },
+    options,
+  };
+}
@@ -1,3 +1,30 @@
+import z from "zod";
+import { Plan, plans } from "../../features/entitlements/plans";
+import { CloudConfigRateLimit } from "../../interfaces/rate-limits";
+
+export const OrgEnrichedApiKey = z.object({
+  id: z.string(),
+  note: z.string().nullable(),
+  publicKey: z.string(),
+  displaySecretKey: z.string(),
+  createdAt: z.string().datetime().nullable(),
+  lastUsedAt: z.string().datetime().nullable(),
+  expiresAt: z.string().datetime().nullable(),
+  projectId: z.string(),
+  fastHashedSecretKey: z.string(),
+  hashedSecretKey: z.string(),
+  orgId: z.string(),
+  plan: z.enum(plans as unknown as [string, ...string[]]),
+  rateLimitOverrides: CloudConfigRateLimit.nullish(),
+});
+
+export const API_KEY_NON_EXISTENT = "api-key-non-existent";
+
+export const CachedApiKey = z.union([
+  OrgEnrichedApiKey,
+  z.literal(API_KEY_NON_EXISTENT),
+]);
+
 export type AuthHeaderVerificationResult =
  | AuthHeaderValidVerificationResult
  | {
@@ -13,4 +40,7 @@ export type AuthHeaderValidVerificationResult = {
 export type ApiAccessScope = {
  projectId: string;
  accessLevel: "all" | "scores";
+  orgId: string;
+  plan: Plan;
+  rateLimitOverrides: z.infer<typeof CloudConfigRateLimit>;
 };
@@ -1,7 +1,9 @@
 import { Prisma } from "@prisma/client";
-import { ColumnDefinition, type TableNames } from "./tableDefinitions";
-import { FilterState } from "./types";
-import { filterOperators } from "./interfaces/filters";
+import { ColumnDefinition, type TableNames } from "../tableDefinitions";
+import { FilterState } from "../types";
+import { filterOperators, timeFilter } from "../interfaces/filters";
+import { z } from "zod";
+import { logger } from "./index";

 const operatorReplacements = {
  "any of": "IN",
@@ -24,7 +26,7 @@ const arrayOperatorReplacements = {
 export function tableColumnsToSqlFilterAndPrefix(
  filters: FilterState,
  tableColumns: ColumnDefinition[],
-  table: TableNames
+  table: TableNames,
 ): Prisma.Sql {
  const sql = tableColumnsToSqlFilter(filters, tableColumns, table);
  if (sql === Prisma.empty) {
@@ -40,17 +42,17 @@ export function tableColumnsToSqlFilterAndPrefix(
 export function tableColumnsToSqlFilter(
  filters: FilterState,
  tableColumns: ColumnDefinition[],
-  table: TableNames
+  table: TableNames,
 ): Prisma.Sql {
  const internalFilters = filters.map((filter) => {
    // Get column definition to map column to internal name, e.g. "t.id"
    const col = tableColumns.find(
      (c) =>
        // TODO: Only use id instead of name
-        c.name === filter.column || c.id === filter.column
+        c.name === filter.column || c.id === filter.column,
    );
    if (!col) {
-      console.error("Invalid filter column", filter.column);
+      logger.error("Invalid filter column", filter.column);
      throw new Error("Invalid filter column: " + filter.column);
    }
    const colPrisma = Prisma.raw(col.internal);
@@ -69,13 +71,13 @@ export function tableColumnsToSqlFilter(
        ? Prisma.raw(
            arrayOperatorReplacements[
              filter.operator as keyof typeof arrayOperatorReplacements
-            ]
+            ],
          )
        : filter.operator in operatorReplacements
          ? Prisma.raw(
              operatorReplacements[
                filter.operator as keyof typeof operatorReplacements
-              ]
+              ],
            )
          : Prisma.raw(filter.operator); //checked by zod

@@ -95,13 +97,13 @@ export function tableColumnsToSqlFilter(
        break;
      case "stringOptions":
        valuePrisma = Prisma.sql`(${Prisma.join(
-          filter.value.map((v) => Prisma.sql`${v}`)
+          filter.value.map((v) => Prisma.sql`${v}`),
        )})`;
        break;
      case "arrayOptions":
        valuePrisma = Prisma.sql`ARRAY[${Prisma.join(
          filter.value.map((v) => Prisma.sql`${v}`),
-          ", "
+          ", ",
        )}] `;
        break;

@@ -121,12 +123,12 @@ export function tableColumnsToSqlFilter(
      filter.type === "string" || filter.type === "stringObject"
        ? [
            ["contains", "does not contain", "ends with"].includes(
-              filter.operator
+              filter.operator,
            )
              ? Prisma.raw("'%' || ")
              : Prisma.empty,
            ["contains", "does not contain", "starts with"].includes(
-              filter.operator
+              filter.operator,
            )
              ? Prisma.raw(" || '%'")
              : Prisma.empty,
@@ -150,7 +152,7 @@ export function tableColumnsToSqlFilter(

 const castValueToPostgresTypes = (
  column: ColumnDefinition,
-  table: TableNames
+  table: TableNames,
 ) => {
  return column.name === "type" &&
    (table === "observations" ||
@@ -166,7 +168,7 @@ const dateOperators = filterOperators["datetime"];
 export const datetimeFilterToPrismaSql = (
  safeColumn: string,
  operator: (typeof dateOperators)[number],
-  value: Date
+  value: Date,
 ) => {
  if (!dateOperators.includes(operator)) {
    throw new Error("Invalid operator: " + operator);
@@ -176,6 +178,22 @@ export const datetimeFilterToPrismaSql = (
  }

  return Prisma.sql`AND ${Prisma.raw(safeColumn)} ${Prisma.raw(
-    operator
+    operator,
  )} ${value}::timestamp with time zone at time zone 'UTC'`;
 };
+
+export const datetimeFilterToPrisma = (
+  timestampFilter: z.infer<typeof timeFilter>,
+) => {
+  const prismaTimestampFilter =
+    timestampFilter.operator === ">="
+      ? { gte: timestampFilter.value }
+      : timestampFilter.operator === ">"
+        ? { gt: timestampFilter.value }
+        : timestampFilter.operator === "<="
+          ? { lte: timestampFilter.value }
+          : timestampFilter.operator === "<"
+            ? { lt: timestampFilter.value }
+            : {};
+  return prismaTimestampFilter;
+};
@@ -3,7 +3,8 @@ export * from "./services/email/organizationInvitation/sendMembershipInvitationE
 export * from "./services/email/batchExportSuccess/sendBatchExportSuccessEmail";
 export * from "./services/email/passwordReset/sendResetPasswordVerificationRequest";
 export * from "./services/PromptService";
-export * from "./auth/auth";
+export * from "./auth/apiKeys";
+export * from "./auth/customSsoProvider";
 export * from "./llm/fetchLLMCompletion";
 export * from "./llm/types";
 export * from "./utils/DatabaseReadStream";
@@ -24,4 +25,8 @@ export * from "./auth/types";
 export * from "./ingestion/legacy/index";
 export * from "./queues";
 export * from "./ingestion/legacy/EventProcessor";
+export * from "./orderByToPrisma";
+export * from "./filterToPrisma";
 export * from "./instrumentation";
+export * from "./logger";
+export * from "./queries";
@@ -12,18 +12,19 @@ import {
  sdkLogEvent,
 } from "../types";
 import { validateAndInflateScore } from "../validateAndInflateScore";
-import { ApiAccessScope } from "../../auth/types";
 import { Trace, Observation, Score, Prisma, Model } from "@prisma/client";
 import { ForbiddenError, LangfuseNotFoundError } from "../../../errors";
 import { mergeJson } from "../../../utils/json";
 import { jsonSchema } from "../../../utils/zod";
 import { prisma } from "../../../db";
+import { LegacyIngestionAccessScope } from ".";
+import { logger } from "../../logger";

 export interface EventProcessor {
-  auth(apiScope: ApiAccessScope): void;
+  auth(apiScope: LegacyIngestionAccessScope): void;

  process(
-    apiScope: ApiAccessScope
+    apiScope: LegacyIngestionAccessScope,
  ): Promise<Trace | Observation | Score> | undefined;
 }

@@ -39,15 +40,15 @@ export class ObservationProcessor implements EventProcessor {
    calculateTokenDelegate: (p: {
      model: Model;
      text: unknown;
-    }) => number | undefined
+    }) => number | undefined,
  ) {
    this.event = event;
    this.calculateTokenDelegate = calculateTokenDelegate;
  }

  async convertToObservation(
-    apiScope: ApiAccessScope,
-    existingObservation: Observation | null
+    apiScope: LegacyIngestionAccessScope,
+    existingObservation: Observation | null,
  ): Promise<{
    id: string;
    create: Prisma.ObservationUncheckedCreateInput;
@@ -77,7 +78,7 @@ export class ObservationProcessor implements EventProcessor {
      !existingObservation
    ) {
      throw new LangfuseNotFoundError(
-        `Observation with id ${this.event.id} not found`
+        `Observation with id ${this.event.id} not found`,
      );
    }

@@ -123,7 +124,7 @@ export class ObservationProcessor implements EventProcessor {
            this.event.body,
            this.calculateTokenDelegate,
            internalModel ?? undefined,
-            existingObservation ?? undefined
+            existingObservation ?? undefined,
          )
        : [undefined, undefined];

@@ -159,7 +160,7 @@ export class ObservationProcessor implements EventProcessor {
    const calculatedCosts = ObservationProcessor.calculateTokenCosts(
      internalModel,
      userProvidedTokenCosts,
-      tokenCounts
+      tokenCounts,
    );

    // merge metadata from existingObservation.metadata and metadata
@@ -167,7 +168,7 @@ export class ObservationProcessor implements EventProcessor {
      existingObservation?.metadata
        ? jsonSchema.parse(existingObservation.metadata)
        : undefined,
-      this.event.body.metadata ?? undefined
+      this.event.body.metadata ?? undefined,
    );

    const prompt =
@@ -187,8 +188,9 @@ export class ObservationProcessor implements EventProcessor {
        : undefined;

    // Only null if promptName and promptVersion are set but prompt is not found
-    if (prompt === null)
-      console.warn("Prompt not found for observation", this.event.body);
+    if (prompt === null) {
+      logger.warn("Prompt not found for observation", this.event.body);
+    }

    const observationId = this.event.body.id ?? v4();

@@ -318,7 +320,7 @@ export class ObservationProcessor implements EventProcessor {
      text: unknown;
    }) => number | undefined,
    model?: Model,
-    existingObservation?: Observation
+    existingObservation?: Observation,
  ) {
    const newPromptTokens =
      body.usage?.input ??
@@ -350,7 +352,7 @@ export class ObservationProcessor implements EventProcessor {
      outputCost?: Decimal | null;
      totalCost?: Decimal | null;
    },
-    tokenCounts: { input?: number; output?: number; total?: number }
+    tokenCounts: { input?: number; output?: number; total?: number },
  ): {
    inputCost?: Decimal | null;
    outputCost?: Decimal | null;
@@ -367,7 +369,7 @@ export class ObservationProcessor implements EventProcessor {
        totalCost:
          userProvidedCosts.totalCost ??
          (userProvidedCosts.inputCost ?? new Decimal(0)).add(
-            userProvidedCosts.outputCost ?? new Decimal(0)
+            userProvidedCosts.outputCost ?? new Decimal(0),
          ),
      };
    }
@@ -398,12 +400,12 @@ export class ObservationProcessor implements EventProcessor {
    };
  }

-  auth(apiScope: ApiAccessScope): void {
+  auth(apiScope: LegacyIngestionAccessScope): void {
    if (apiScope.accessLevel !== "all")
      throw new ForbiddenError("Access denied for observation creation");
  }

-  async process(apiScope: ApiAccessScope): Promise<Observation> {
+  async process(apiScope: LegacyIngestionAccessScope): Promise<Observation> {
    this.auth(apiScope);

    const existingObservation = this.event.body.id
@@ -417,7 +419,7 @@ export class ObservationProcessor implements EventProcessor {
      existingObservation.projectId !== apiScope.projectId
    ) {
      throw new ForbiddenError(
-        `Access denied for observation creation ${existingObservation.projectId} `
+        `Access denied for observation creation ${existingObservation.projectId} `,
      );
    }

@@ -441,13 +443,13 @@ export class TraceProcessor implements EventProcessor {
    this.event = event;
  }

-  auth(apiScope: ApiAccessScope): void {
+  auth(apiScope: LegacyIngestionAccessScope): void {
    if (apiScope.accessLevel !== "all")
      throw new ForbiddenError("Access denied for trace creation");
  }

  async process(
-    apiScope: ApiAccessScope
+    apiScope: LegacyIngestionAccessScope,
  ): Promise<Trace | Observation | Score> {
    const { body } = this.event;

@@ -455,11 +457,8 @@ export class TraceProcessor implements EventProcessor {

    const internalId = body.id ?? v4();

-    console.log(
-      "Trying to create trace, project ",
-      apiScope.projectId,
-      ", id:",
-      internalId
+    logger.info(
+      `Trying to create trace, project ${apiScope.projectId}, id: ${internalId}`,
    );

    const existingTrace = await prisma.trace.findFirst({
@@ -470,7 +469,7 @@ export class TraceProcessor implements EventProcessor {

    if (existingTrace && existingTrace.projectId !== apiScope.projectId) {
      throw new ForbiddenError(
-        `Access denied for trace creation ${existingTrace.projectId}`
+        `Access denied for trace creation ${existingTrace.projectId}`,
      );
    }

@@ -478,7 +477,7 @@ export class TraceProcessor implements EventProcessor {
      existingTrace?.metadata
        ? jsonSchema.parse(existingTrace.metadata)
        : undefined,
-      body.metadata ?? undefined
+      body.metadata ?? undefined,
    );

    const mergedTags =
@@ -553,15 +552,15 @@ export class ScoreProcessor implements EventProcessor {
    this.event = event;
  }

-  auth(apiScope: ApiAccessScope) {
+  auth(apiScope: LegacyIngestionAccessScope) {
    if (apiScope.accessLevel !== "scores" && apiScope.accessLevel !== "all")
      throw new ForbiddenError(
-        `Access denied for score creation, ${apiScope.accessLevel}`
+        `Access denied for score creation, ${apiScope.accessLevel}`,
      );
  }

  async process(
-    apiScope: ApiAccessScope
+    apiScope: LegacyIngestionAccessScope,
  ): Promise<Trace | Observation | Score> {
    const { body } = this.event;

@@ -579,7 +578,7 @@ export class ScoreProcessor implements EventProcessor {
    });
    if (existingScore && existingScore.projectId !== apiScope.projectId) {
      throw new ForbiddenError(
-        `Access denied for score creation ${existingScore.projectId}`
+        `Access denied for score creation ${existingScore.projectId}`,
      );
    }

@@ -613,13 +612,13 @@ export class SdkLogProcessor implements EventProcessor {
    this.event = event;
  }

-  auth(apiScope: ApiAccessScope) {
+  auth(apiScope: LegacyIngestionAccessScope) {
    return;
  }

  process() {
    try {
-      console.log("SDK Log", this.event);
+      logger.info("SDK Log", this.event);
      return undefined;
    } catch (error) {
      return undefined;
@@ -8,10 +8,11 @@ import { IngestionUtils } from "../IngestionUtils";
 import { IngestionEventType } from "../types";
 import { redis } from "../../redis/redis";
 import { env } from "../../../env";
+import { logger } from "../../logger";

 export async function enqueueIngestionEvents(
  projectId: string,
-  events: IngestionEventType[]
+  events: IngestionEventType[],
 ) {
  const ingestionFlushQueue = getIngestionFlushQueue();

@@ -31,8 +32,8 @@ export async function enqueueIngestionEvents(
        event,
        redis,
        ingestionFlushQueue,
-        batchTimestamp
-      )
+        batchTimestamp,
+      ),
    );
  }

@@ -44,11 +45,11 @@ async function enqueueSingleIngestionEvent(
  event: IngestionEventType,
  redis: Redis,
  ingestionFlushQueue: IngestionFlushQueue,
-  batchTimestamp: string
+  batchTimestamp: string,
 ): Promise<void> {
  if (!("id" in event.body && event.body.id)) {
-    console.warn(
-      `Received ingestion event without id: ${JSON.stringify(event)}`
+    logger.warn(
+      `Received ingestion event without id: ${JSON.stringify(event)}`,
    );

    return;
@@ -14,11 +14,12 @@ import {
  convertTraceUpsertEventsToRedisEvents,
  getTraceUpsertQueue,
 } from "../../redis/trace-upsert";
-import { ApiAccessScope, AuthHeaderVerificationResult } from "../../auth/types";
+import { ApiAccessScope } from "../../auth/types";
 import { redis } from "../../redis/redis";
 import { backOff } from "exponential-backoff";
 import { Model } from "../../..";
 import { enqueueIngestionEvents } from "./enqueueIngestionEvents";
+import { logger } from "../../logger";

 export type BatchResult = {
  result: unknown;
@@ -31,12 +32,27 @@ type TokenCountInput = {
  text: unknown;
 };

+export type LegacyIngestionAccessScope = Omit<
+  ApiAccessScope,
+  "orgId" | "plan" | "rateLimitOverrides"
+>;
+
+type LegacyIngestionAuthHeaderVerificationResult =
+  | {
+      validKey: true;
+      scope: LegacyIngestionAccessScope;
+    }
+  | {
+      validKey: false;
+      error: string;
+    };
+
 export const handleBatch = async (
  events: z.infer<typeof ingestionApiSchema>["batch"],
-  authCheck: AuthHeaderVerificationResult,
-  calculateTokenDelegate: (p: TokenCountInput) => number | undefined
+  authCheck: LegacyIngestionAuthHeaderVerificationResult,
+  calculateTokenDelegate: (p: TokenCountInput) => number | undefined,
 ) => {
-  console.log(`handling ingestion ${events.length} events`);
+  logger.info(`handling ingestion ${events.length} events`);

  if (!authCheck.validKey) throw new UnauthorizedError(authCheck.error);

@@ -54,7 +70,7 @@ export const handleBatch = async (
        return await handleSingleEvent(
          singleEvent,
          authCheck.scope,
-          calculateTokenDelegate
+          calculateTokenDelegate,
        );
      });
      results.push({
@@ -64,7 +80,7 @@ export const handleBatch = async (
      }); // Push each result into the array
    } catch (error) {
      // Handle or log the error if `handleSingleEvent` fails
-      console.error("Error handling event:", error);
+      logger.error("Error handling event:", error);
      // Decide how to handle the error: rethrow, continue, or push an error object to results
      // For example, push an error object:
      errors.push({
@@ -78,9 +94,9 @@ export const handleBatch = async (
  if (env.CLICKHOUSE_URL) {
    try {
      await enqueueIngestionEvents(authCheck.scope.projectId, events);
-      console.log(`Added ${events.length} ingestion events to queue`);
+      logger.info(`Added ${events.length} ingestion events to queue`);
    } catch (err) {
-      console.error("Error adding ingestion events to queue", err);
+      logger.error("Error adding ingestion events to queue", err);
    }
  }

@@ -92,10 +108,10 @@ async function retry<T>(request: () => Promise<T>): Promise<T> {
    numOfAttempts: env.LANGFUSE_ASYNC_INGESTION_PROCESSING === "true" ? 5 : 3,
    retry: (e: Error, attemptNumber: number) => {
      if (e instanceof UnauthorizedError || e instanceof ForbiddenError) {
-        console.log("not retrying auth error");
+        logger.info("not retrying auth error");
        return false;
      }
-      console.log(`retrying processing events ${attemptNumber}`);
+      logger.info(`retrying processing events ${attemptNumber}`);
      return true;
    },
  });
@@ -103,11 +119,11 @@ async function retry<T>(request: () => Promise<T>): Promise<T> {

 const handleSingleEvent = async (
  event: z.infer<typeof ingestionEvent>,
-  apiScope: ApiAccessScope,
+  apiScope: LegacyIngestionAccessScope,
  calculateTokenDelegate: (p: {
    model: Model;
    text: unknown;
-  }) => number | undefined
+  }) => number | undefined,
 ) => {
  const { body } = event;
  let restEvent = body;
@@ -122,8 +138,8 @@ const handleSingleEvent = async (
    restEvent = rest;
  }

-  console.log(
-    `handling single event ${event.id} of type ${event.type}:  ${JSON.stringify({ body: restEvent })}`
+  logger.info(
+    `handling single event ${event.id} of type ${event.type}:  ${JSON.stringify({ body: restEvent })}`,
  );

  const cleanedEvent = ingestionEvent.parse(cleanEvent(event));
@@ -144,7 +160,7 @@ const handleSingleEvent = async (
    case eventTypes.GENERATION_UPDATE:
      processor = new ObservationProcessor(
        cleanedEvent,
-        calculateTokenDelegate
+        calculateTokenDelegate,
      );
      break;
    case eventTypes.SCORE_CREATE: {
@@ -186,7 +202,7 @@ export function cleanEvent(obj: unknown): unknown {
 }

 export const isNotNullOrUndefined = <T>(
-  val?: T | null
+  val?: T | null,
 ): val is Exclude<T, null | undefined> => !isUndefinedOrNull(val);

 export const isUndefinedOrNull = <T>(val?: T | null): val is undefined | null =>
@@ -194,7 +210,7 @@ export const isUndefinedOrNull = <T>(val?: T | null): val is undefined | null =>

 export const sendToWorkerIfEnvironmentConfigured = async (
  batchResults: BatchResult[],
-  projectId: string
+  projectId: string,
 ): Promise<void> => {
  const traceEvents: TraceUpsertEventType[] = batchResults
    .filter((result) => result.type === eventTypes.TRACE_CREATE) // we only have create, no update.
@@ -204,17 +220,17 @@ export const sendToWorkerIfEnvironmentConfigured = async (
      "id" in result.result
        ? // ingestion API only gets traces for one projectId
          { traceId: result.result.id as string, projectId }
-        : null
+        : null,
    )
    .filter(isNotNullOrUndefined);

  try {
    if (env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION && redis) {
-      console.log(`Sending ${traceEvents.length} events to worker via Redis`);
+      logger.info(`Sending ${traceEvents.length} events to worker via Redis`);

      const queue = getTraceUpsertQueue();
      if (!queue) {
-        console.error("TraceUpsertQueue not initialized");
+        logger.error("TraceUpsertQueue not initialized");
        return;
      }

@@ -224,7 +240,7 @@ export const sendToWorkerIfEnvironmentConfigured = async (
      env.LANGFUSE_WORKER_PASSWORD &&
      env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION
    ) {
-      console.log(`Sending ${traceEvents.length} events to worker via HTTP`);
+      logger.info(`Sending ${traceEvents.length} events to worker via HTTP`);
      const body: EventBodyType = {
        name: EventName.TraceUpsert,
        payload: traceEvents,
@@ -238,7 +254,7 @@ export const sendToWorkerIfEnvironmentConfigured = async (
            Authorization:
              "Basic " +
              Buffer.from(
-                "admin" + ":" + env.LANGFUSE_WORKER_PASSWORD
+                "admin" + ":" + env.LANGFUSE_WORKER_PASSWORD,
              ).toString("base64"),
          },
          body: JSON.stringify(body),
@@ -247,6 +263,6 @@ export const sendToWorkerIfEnvironmentConfigured = async (
      }
    }
  } catch (error) {
-    console.error("Error sending events to worker", error);
+    logger.error("Error sending events to worker", error);
  }
 };
@@ -15,7 +15,7 @@ type ValidateAndInflateScoreParams = {
 };

 export async function validateAndInflateScore(
-  params: ValidateAndInflateScoreParams
+  params: ValidateAndInflateScoreParams,
 ): Promise<Score> {
  const { body, projectId } = params;

@@ -29,7 +29,7 @@ export async function validateAndInflateScore(

    if (!config || !validateDbScoreConfigSafe(config).success)
      throw new LangfuseNotFoundError(
-        "The configId you provided does not match a valid config in this project"
+        "The configId you provided does not match a valid config in this project",
      );

    validateConfigAgainstBody(body, config as ValidatedScoreConfig);
@@ -47,7 +47,7 @@ export async function validateAndInflateScore(

  if (!validation.success) {
    throw new InvalidRequestError(
-      `Ingested score value type not valid against provided data type. Provide numeric values for numeric and boolean scores, and string values for categorical scores.`
+      `Ingested score value type not valid against provided data type. Provide numeric values for numeric and boolean scores, and string values for categorical scores.`,
    );
  }

@@ -62,7 +62,7 @@ function inferDataType(value: string | number): ScoreDataType {

 function mapStringValueToNumericValue(
  config: ValidatedScoreConfig,
-  label: string
+  label: string,
 ): number | null {
  return (
    config.categories?.find((category) => category.label === label)?.value ??
@@ -71,7 +71,7 @@ function mapStringValueToNumericValue(
 }

 function inflateScoreBody(
-  params: ValidateAndInflateScoreParams & { config?: ValidatedScoreConfig }
+  params: ValidateAndInflateScoreParams & { config?: ValidatedScoreConfig },
 ): Score {
  const { body, projectId, scoreId, config } = params;

@@ -105,25 +105,25 @@ function inflateScoreBody(

 function validateConfigAgainstBody(
  body: any,
-  config: ValidatedScoreConfig
+  config: ValidatedScoreConfig,
 ): void {
  const { maxValue, minValue, categories, dataType: configDataType } = config;

  if (body.dataType && body.dataType !== configDataType) {
    throw new InvalidRequestError(
-      `Data type mismatch based on config: expected ${configDataType}, got ${body.dataType}`
+      `Data type mismatch based on config: expected ${configDataType}, got ${body.dataType}`,
    );
  }

  if (config.isArchived) {
    throw new InvalidRequestError(
-      "Config is archived and cannot be used to create new scores. Please restore the config first."
+      "Config is archived and cannot be used to create new scores. Please restore the config first.",
    );
  }

  if (config.name !== body.name) {
    throw new InvalidRequestError(
-      `Name mismatch based on config: expected ${config.name}, got ${body.name}`
+      `Name mismatch based on config: expected ${config.name}, got ${body.name}`,
    );
  }

@@ -136,7 +136,7 @@ function validateConfigAgainstBody(

  if (!dataTypeValidation.success) {
    throw new InvalidRequestError(
-      `Ingested score body not valid against provided config data type.`
+      `Ingested score body not valid against provided config data type.`,
    );
  }

@@ -154,7 +154,7 @@ function validateConfigAgainstBody(
      .join(", ");

    throw new InvalidRequestError(
-      `Ingested score body not valid against provided config: ${errorDetails}`
+      `Ingested score body not valid against provided config: ${errorDetails}`,
    );
  }
 }
@@ -10,12 +10,38 @@ export type SpanCtx = {
  traceScope?: string;
 };

-type CallbackFn<T> = () => T | Promise<T>;
+type AsyncCallbackFn<T> = () => Promise<T>;

-export function instrument<T>(
+export async function instrumentAsync<T>(
  ctx: SpanCtx,
-  callback: CallbackFn<T>
-): T extends Promise<any> ? Promise<T> : T {
+  callback: AsyncCallbackFn<T>
+): Promise<T> {
+  return await getTracer(ctx.traceScope ?? callback.name).startActiveSpan(
+    ctx.name,
+    {
+      root: ctx.rootSpan,
+      kind: ctx.spanKind,
+    },
+    async (span) => {
+      try {
+        const result = await callback();
+        span.end();
+        return result;
+      } catch (ex) {
+        traceException(ex as opentelemetry.Exception, span);
+        span.end();
+        throw ex;
+      }
+    }
+  );
+}
+
+type SyncCallbackFn<T> = () => T;
+
+export function instrumentSync<T>(
+  ctx: SpanCtx,
+  callback: SyncCallbackFn<T>
+): T {
  return getTracer(ctx.traceScope ?? callback.name).startActiveSpan(
    ctx.name,
    {
@@ -23,30 +49,14 @@ export function instrument<T>(
      kind: ctx.spanKind,
    },
    (span) => {
-      const handleResult = (result: T) => {
+      try {
+        const result = callback();
        span.end();
        return result;
-      };
-
-      const handleError = (ex: unknown) => {
+      } catch (ex) {
        traceException(ex as opentelemetry.Exception, span);
        span.end();
        throw ex;
-      };
-
-      try {
-        const result = callback();
-        if (result instanceof Promise) {
-          return result
-            .then(handleResult)
-            .catch(handleError) as T extends Promise<any> ? Promise<T> : T;
-        } else {
-          return handleResult(result) as T extends Promise<any>
-            ? Promise<T>
-            : T;
-        }
-      } catch (ex) {
-        return handleError(ex) as T extends Promise<any> ? Promise<T> : T;
      }
    }
  );
@@ -67,9 +77,24 @@ export const traceException = (

  const exception = {
    code: code,
-    message: ex instanceof Error ? ex.message : String(ex),
-    name: ex instanceof Error ? ex.name : "Error",
-    stack: ex instanceof Error ? ex.stack : undefined,
+    message:
+      ex instanceof Error
+        ? ex.message
+        : typeof ex === "object" && ex !== null && "message" in ex
+          ? JSON.stringify(ex.message)
+          : JSON.stringify(ex),
+    name:
+      ex instanceof Error
+        ? ex.name
+        : typeof ex === "object" && ex !== null && "name" in ex
+          ? JSON.stringify(ex.name)
+          : "Error",
+    stack:
+      ex instanceof Error
+        ? JSON.stringify(ex.stack)
+        : typeof ex === "object" && ex !== null && "stack" in ex
+          ? JSON.stringify(ex.stack)
+          : undefined,
  };

  // adds an otel event
@@ -0,0 +1,33 @@
+import { env } from "../env";
+import winston from "winston";
+
+const getWinstonLogger = (
+  nodeEnv: "development" | "production" | "test",
+  minLevel = "info",
+) => {
+  const textLoggerFormat = winston.format.combine(
+    winston.format.errors({ stack: true }),
+    winston.format.timestamp(),
+    winston.format.align(),
+    winston.format.printf((info) => {
+      const logMessage = `${info.timestamp} ${info.level} ${info.message}`;
+      return info.stack ? `${logMessage}\n${info.stack}` : logMessage;
+    }),
+  );
+
+  const jsonLoggerFormat = winston.format.combine(
+    winston.format.errors({ stack: true }),
+    winston.format.timestamp(),
+    winston.format.json(),
+  );
+
+  const format =
+    env.LANGFUSE_LOG_FORMAT === "text" ? textLoggerFormat : jsonLoggerFormat;
+  return winston.createLogger({
+    level: minLevel,
+    format: format,
+    transports: [new winston.transports.Console()],
+  });
+};
+
+export const logger = getWinstonLogger(env.NODE_ENV, env.LANGFUSE_LOG_LEVEL);
@@ -2,8 +2,9 @@ import { z } from "zod";

 import { Prisma } from "@prisma/client";

-import type { ColumnDefinition } from "./tableDefinitions/types";
-import type { OrderByState } from "./interfaces/orderBy";
+import type { ColumnDefinition } from "../tableDefinitions/types";
+import type { OrderByState } from "../interfaces/orderBy";
+import { logger } from "./logger";

 /**
 * Convert orderBy to SQL ORDER BY clause
@@ -13,20 +14,20 @@ import type { OrderByState } from "./interfaces/orderBy";
 */
 export function orderByToPrismaSql(
  orderBy: OrderByState,
-  tableColumns: ColumnDefinition[]
+  tableColumns: ColumnDefinition[],
 ): Prisma.Sql {
  if (!orderBy) {
-    return Prisma.sql`ORDER BY t.timestamp DESC NULLS LAST`;
+    return Prisma.sql`ORDER BY t.timestamp DESC`;
  }
  // Get column definition to map column to internal name, e.g. "t.id"
  const col = tableColumns.find(
    // TODO: Only use id instead of name.
    // It's less error-prone & decouples data fetching from the human-readable UI labels
-    (c) => c.name === orderBy.column || c.id === orderBy.column
+    (c) => c.name === orderBy.column || c.id === orderBy.column,
  );

  if (!col) {
-    console.log("Invalid filter column", orderBy.column);
+    logger.warn("Invalid filter column", orderBy.column);
    throw new Error("Invalid filter column: " + orderBy.column);
  }

@@ -34,12 +35,12 @@ export function orderByToPrismaSql(
  const orderByOrder = z.enum(["ASC", "DESC"]);
  const order = orderByOrder.safeParse(orderBy.order);
  if (!order.success) {
-    console.log("Invalid order", orderBy.order);
+    logger.warn("Invalid order", orderBy.order);
    throw new Error("Invalid order: " + orderBy.order);
  }

  // Both column and order are safe, can use raw SQL
  return Prisma.raw(
-    `ORDER BY ${col.internal} ${order.data} ${orderBy.order === "DESC" ? "NULLS LAST" : "NULLS FIRST"}`
+    `ORDER BY ${col.internal} ${order.data} ${col.nullable ? (orderBy.order === "DESC" ? "NULLS LAST" : "NULLS FIRST") : ""}`,
  );
 }
@@ -2,10 +2,10 @@ import { z } from "zod";

 import { Prisma } from "@prisma/client";
 import { tableColumnsToSqlFilterAndPrefix } from "../filterToPrisma";
-import { singleFilter } from "../interfaces/filters";
-import { orderBy } from "../interfaces/orderBy";
+import { singleFilter } from "../../interfaces/filters";
+import { orderBy } from "../../interfaces/orderBy";
 import { orderByToPrismaSql } from "../orderByToPrisma";
-import { sessionsViewCols } from "../tableDefinitions/index";
+import { sessionsViewCols } from "../../tableDefinitions";

 const GetSessionTableSQLParamsSchema = z.object({
  projectId: z.string(),
@@ -16,8 +16,13 @@ const GetSessionTableSQLParamsSchema = z.object({
 });
 type GetSessionTableSQLParams = z.infer<typeof GetSessionTableSQLParamsSchema>;

-export const getSessionTableSQL = (
-  params: GetSessionTableSQLParams
+export const createSessionsAllQuery = (
+  select: Prisma.Sql,
+  params: GetSessionTableSQLParams,
+  options?: {
+    ignoreOrderBy?: boolean; // used by session.metrics and session.all.totalCount
+    sessionIdList?: string[]; // used by session.metrics
+  },
 ): Prisma.Sql => {
  const { projectId, filter, orderBy, page, limit } =
    GetSessionTableSQLParamsSchema.parse(params);
@@ -25,26 +30,17 @@ export const getSessionTableSQL = (
  const filterCondition = tableColumnsToSqlFilterAndPrefix(
    filter ?? [],
    sessionsViewCols,
-    "sessions"
+    "sessions",
  );
  const orderByCondition = orderByToPrismaSql(orderBy, sessionsViewCols);

+  const sessionIdFilter = options?.sessionIdList
+    ? Prisma.sql`AND s.id IN (${Prisma.join(options?.sessionIdList)})`
+    : Prisma.sql``;
+
  const sql = Prisma.sql`
      SELECT
-        s.id,
-        s. "created_at" AS "createdAt",
-        s.bookmarked,
-        s.public,
-        t. "userIds",
-        t. "countTraces",
-        o. "sessionDuration",
-        o. "totalCost" AS "totalCost",
-        o. "inputCost" AS "inputCost",
-        o. "outputCost" AS "outputCost",
-        o. "promptTokens" AS "promptTokens",
-        o. "completionTokens" AS "completionTokens",
-        o. "totalTokens" AS "totalTokens",
-        (count(*) OVER ())::int AS "totalCount"
+        ${select}
      FROM
        trace_sessions AS s
        LEFT JOIN LATERAL (
@@ -54,9 +50,12 @@ export const getSessionTableSQL = (
            MIN(t. "timestamp") AS "min_timestamp",
            array_agg(t.id) AS "traceIds",
            array_agg(DISTINCT t.user_id) AS "userIds",
-            count(t.id)::int AS "countTraces"
+            count(t.id)::int AS "countTraces",
+            array_agg(DISTINCT u.tag) AS "tags"
          FROM
            traces t
+          LEFT JOIN LATERAL (
+            SELECT DISTINCT UNNEST(t.tags) AS tag) AS u ON TRUE
          WHERE
            t.project_id = ${projectId}
            AND t.session_id = s.id
@@ -79,7 +78,8 @@ export const getSessionTableSQL = (
      WHERE
        s. "project_id" = ${projectId}
        ${filterCondition}
-      ${orderByCondition}
+        ${sessionIdFilter}
+      ${options?.ignoreOrderBy ? Prisma.sql`` : orderByCondition}
      LIMIT ${limit}
      OFFSET ${page * limit}
    `;
@@ -0,0 +1 @@
+export { createSessionsAllQuery } from "./createSessionsAllQuery";
@@ -1,6 +1,6 @@
 import { Queue } from "bullmq";
 import { QueueName, TQueueJobTypes } from "../queues";
-import { redis } from "./redis";
+import { createNewRedisInstance } from "./redis";

 let batchExportQueue: Queue<TQueueJobTypes[QueueName.BatchExport]> | null =
  null;
@@ -8,9 +8,11 @@ let batchExportQueue: Queue<TQueueJobTypes[QueueName.BatchExport]> | null =
 export const getBatchExportQueue = () => {
  if (batchExportQueue) return batchExportQueue;

-  batchExportQueue = redis
+  const connection = createNewRedisInstance();
+
+  batchExportQueue = connection
    ? new Queue<TQueueJobTypes[QueueName.BatchExport]>(QueueName.BatchExport, {
-        connection: redis,
+        connection: connection,
        defaultJobOptions: {
          removeOnComplete: true,
          removeOnFail: 100,
@@ -1,7 +1,7 @@
 import { Queue } from "bullmq";

 import { env } from "../../env";
-import { redis } from "../redis/redis";
+import { createNewRedisInstance } from "../redis/redis";
 import { QueueName } from "../queues";

 export type IngestionFlushQueue = Queue<null>;
@@ -11,12 +11,14 @@ let ingestionFlushQueue: IngestionFlushQueue | null = null;
 export const getIngestionFlushQueue = () => {
  if (ingestionFlushQueue) return ingestionFlushQueue;

-  ingestionFlushQueue = redis
+  const connection = createNewRedisInstance();
+
+  ingestionFlushQueue = connection
    ? new Queue<null>(QueueName.IngestionFlushQueue, {
-        connection: redis,
+        connection: connection,
        defaultJobOptions: {
          removeOnComplete: true, // Important: If not true, new jobs for that ID would be ignored as jobs in the complete set are still considered as part of the queue
-          removeOnFail: 1000,
+          removeOnFail: 1_000,
          delay: env.LANGFUSE_INGESTION_FLUSH_DELAY_MS,
          attempts: env.LANGFUSE_INGESTION_FLUSH_ATTEMPTS,
        },
@@ -1,27 +1,33 @@
 import { Queue } from "bullmq";
 import { QueueName, TQueueJobTypes } from "../queues";
-import { redis } from "./redis";
+import { createNewRedisInstance } from "./redis";

-let legacyIngestionQueue: Queue<
-  TQueueJobTypes[QueueName.LegacyIngestionQueue]
-> | null = null;
+export class LegacyIngestionQueue {
+  private static instance: Queue<
+    TQueueJobTypes[QueueName.LegacyIngestionQueue]
+  > | null = null;

-export const getLegacyIngestionQueue = () => {
-  if (legacyIngestionQueue) return legacyIngestionQueue;
+  public static getInstance(): Queue<
+    TQueueJobTypes[QueueName.LegacyIngestionQueue]
+  > | null {
+    if (LegacyIngestionQueue.instance) return LegacyIngestionQueue.instance;

-  legacyIngestionQueue = redis
-    ? new Queue<TQueueJobTypes[QueueName.LegacyIngestionQueue]>(
-        QueueName.LegacyIngestionQueue,
-        {
-          connection: redis,
-          defaultJobOptions: {
-            removeOnComplete: true,
-            removeOnFail: 100,
-            attempts: 5,
+    const newRedis = createNewRedisInstance({ enableOfflineQueue: false });
+
+    LegacyIngestionQueue.instance = newRedis
+      ? new Queue<TQueueJobTypes[QueueName.LegacyIngestionQueue]>(
+          QueueName.LegacyIngestionQueue,
+          {
+            connection: newRedis,
+            defaultJobOptions: {
+              removeOnComplete: true,
+              removeOnFail: 100,
+              attempts: 5,
+            },
          },
-        }
-      )
-    : null;
+        )
+      : null;

-  return legacyIngestionQueue;
-};
+    return LegacyIngestionQueue.instance;
+  }
+}
@@ -1,20 +1,33 @@
-import Redis from "ioredis";
+import Redis, { RedisOptions } from "ioredis";
 import { env } from "../../env";
+import { logger } from "../logger";
+
+export const createNewRedisInstance = (
+  additionalOptions: Partial<RedisOptions> = {},
+) => {
+  return env.REDIS_CONNECTION_STRING
+    ? new Redis(env.REDIS_CONNECTION_STRING, {
+        maxRetriesPerRequest: null,
+        enableAutoPipelining: env.REDIS_ENABLE_AUTO_PIPELINING === "true",
+        ...additionalOptions,
+      })
+    : env.REDIS_HOST
+      ? new Redis({
+          host: String(env.REDIS_HOST),
+          port: Number(env.REDIS_PORT),
+          password: String(env.REDIS_AUTH),
+          maxRetriesPerRequest: null, // Set to `null` to disable retrying
+          enableAutoPipelining: env.REDIS_ENABLE_AUTO_PIPELINING === "true",
+          ...additionalOptions,
+        })
+      : null;
+};

 const createRedisClient = () => {
  try {
-    return env.REDIS_CONNECTION_STRING
-      ? new Redis(env.REDIS_CONNECTION_STRING, { maxRetriesPerRequest: null })
-      : env.REDIS_HOST
-        ? new Redis({
-            host: String(env.REDIS_HOST),
-            port: Number(env.REDIS_PORT),
-            password: String(env.REDIS_AUTH),
-            maxRetriesPerRequest: null, // Set to `null` to disable retrying
-          })
-        : null;
+    return createNewRedisInstance();
  } catch (e) {
-    console.error(e, "Failed to connect to redis");
+    logger.error("Failed to connect to redis", e);
    return null;
  }
 };
@@ -6,7 +6,7 @@ import {
  TraceUpsertEventType,
 } from "../queues";
 import { Queue } from "bullmq";
-import { redis } from "./redis";
+import { createNewRedisInstance } from "./redis";

 let traceUpsertQueue: Queue<TQueueJobTypes[QueueName.TraceUpsert]> | null =
  null;
@@ -14,12 +14,14 @@ let traceUpsertQueue: Queue<TQueueJobTypes[QueueName.TraceUpsert]> | null =
 export const getTraceUpsertQueue = () => {
  if (traceUpsertQueue) return traceUpsertQueue;

-  traceUpsertQueue = redis
+  const connection = createNewRedisInstance();
+
+  traceUpsertQueue = connection
    ? new Queue<TQueueJobTypes[QueueName.TraceUpsert]>(QueueName.TraceUpsert, {
-        connection: redis,
+        connection: connection,
        defaultJobOptions: {
          removeOnComplete: 100, // Important: If not true, new jobs for that ID would be ignored as jobs in the complete set are still considered as part of the queue
-          removeOnFail: 1000,
+          removeOnFail: 1_000,
        },
      })
    : null;
@@ -54,7 +56,7 @@ export function convertTraceUpsertEventsToRedisEvents(
          name: QueueJobs.TraceUpsert as const,
        },
        opts: {
-          removeOnFail: 10000,
+          removeOnFail: 1_000,
          removeOnComplete: true,
          attempts: 5,
          backoff: {
@@ -1,6 +1,7 @@
 import { Prompt, PrismaClient } from "@prisma/client";
 import { Redis } from "ioredis";
 import { env } from "../../env";
+import { logger } from "../logger";

 export class PromptService {
  private cacheEnabled: boolean;
@@ -11,7 +12,7 @@ export class PromptService {
    private redis: Redis | null,
    private metricIncrementer?: // used for otel metrics
    (name: string, value?: number) => void,
-    cacheEnabled?: boolean // used for testing
+    cacheEnabled?: boolean, // used for testing
  ) {
    this.cacheEnabled =
      Boolean(redis) &&
@@ -25,7 +26,7 @@ export class PromptService {
      const cachedPrompt = await this.getCachedPrompt(params);

      this.incrementMetric(
-        cachedPrompt ? Metrics.PromptCacheHit : Metrics.PromptCacheMiss
+        cachedPrompt ? Metrics.PromptCacheHit : Metrics.PromptCacheMiss,
      );

      if (cachedPrompt) {
@@ -117,7 +118,7 @@ export class PromptService {
  }

  public async lockCache(
-    params: Pick<PromptParams, "projectId" | "promptName">
+    params: Pick<PromptParams, "projectId" | "promptName">,
  ): Promise<void> {
    if (!this.cacheEnabled) return;

@@ -133,7 +134,7 @@ export class PromptService {
  }

  public async unlockCache(
-    params: Pick<PromptParams, "projectId" | "promptName">
+    params: Pick<PromptParams, "projectId" | "promptName">,
  ): Promise<void> {
    if (!this.cacheEnabled) return;

@@ -149,7 +150,7 @@ export class PromptService {
  }

  private async isCacheLocked(
-    params: Pick<PromptParams, "projectId" | "promptName">
+    params: Pick<PromptParams, "projectId" | "promptName">,
  ): Promise<boolean> {
    const lockKey = this.getLockKey(params);

@@ -163,14 +164,14 @@ export class PromptService {
  }

  private getLockKey(
-    params: Pick<PromptParams, "projectId" | "promptName">
+    params: Pick<PromptParams, "projectId" | "promptName">,
  ): string {
    // Important to *pre*fix LOCK as otherwise it would be deleted by deleteKeysByPrefix
    return `LOCK:${this.getCacheKeyPrefix(params)}`;
  }

  public async invalidateCache(
-    params: Pick<PromptParams, "projectId" | "promptName">
+    params: Pick<PromptParams, "projectId" | "promptName">,
  ): Promise<void> {
    if (!this.cacheEnabled) return;

@@ -187,7 +188,7 @@ export class PromptService {
      await this.redis?.del([...(keys ?? []), keyIndexKey]);

      this.logInfo(
-        `Cache invalidated for prefix ${cacheKeyPrefix} in ${Date.now() - startTime}ms`
+        `Cache invalidated for prefix ${cacheKeyPrefix} in ${Date.now() - startTime}ms`,
      );
    } catch (e) {
      this.logError("Error deleting keys for prefix", cacheKeyPrefix, e);
@@ -203,23 +204,23 @@ export class PromptService {
  }

  private getCacheKeyPrefix(
-    params: Pick<PromptParams, "projectId" | "promptName">
+    params: Pick<PromptParams, "projectId" | "promptName">,
  ): string {
    return `prompt:${params.projectId}:${params.promptName}`;
  }

  private getKeyIndexKey(
-    params: Pick<PromptParams, "projectId" | "promptName">
+    params: Pick<PromptParams, "projectId" | "promptName">,
  ): string {
    return `prompt_key_index:${params.projectId}:${params.promptName}`;
  }

  private logError(message: string, ...args: any[]) {
-    console.error(`[PromptService] ${message}`, ...args);
+    logger.error(`[PromptService] ${message}`, ...args);
  }

  private logInfo(message: string, ...args: any[]) {
-    console.log(`[PromptService] ${message}`, ...args);
+    logger.info(`[PromptService] ${message}`, ...args);
  }

  private incrementMetric(name: Metrics, value: number = 1) {
@@ -2,6 +2,7 @@ import type { Readable } from "stream";
 import { GetObjectCommand, S3Client } from "@aws-sdk/client-s3";
 import { Upload } from "@aws-sdk/lib-storage";
 import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+import { logger } from "../logger";

 type UploadFile = {
  fileName: string;
@@ -56,15 +57,14 @@ export class S3StorageService {

      return { signedUrl };
    } catch (err) {
-      console.error(err);
-
+      logger.error(err);
      throw new Error("Failed to upload to S3 or generate signed URL");
    }
  }

  private async getSignedUrl(
    fileName: string,
-    ttlSeconds: number
+    ttlSeconds: number,
  ): Promise<string> {
    try {
      return await getSignedUrl(
@@ -74,7 +74,7 @@ export class S3StorageService {
          Key: fileName,
          ResponseContentDisposition: `attachment; filename="${fileName}"`,
        }),
-        { expiresIn: ttlSeconds }
+        { expiresIn: ttlSeconds },
      );
    } catch (err) {
      throw Error("Failed to generate signed URL");
@@ -3,6 +3,7 @@ import { parseConnectionUrl } from "nodemailer/lib/shared/index.js";
 import { render } from "@react-email/render";

 import { BatchExportSuccessEmailTemplate } from "./BatchExportSuccessEmailTemplate";
+import { logger } from "../../../logger";

 type SendBatchExportSuccessParams = {
  env: Partial<
@@ -24,8 +25,7 @@ export const sendBatchExportSuccessEmail = async ({
  expiresInHours,
 }: SendBatchExportSuccessParams) => {
  if (!env.EMAIL_FROM_ADDRESS || !env.SMTP_CONNECTION_URL) {
-    console.error("Missing environment variables for sending email.");
-
+    logger.error("Missing environment variables for sending email.");
    return;
  }

@@ -38,7 +38,7 @@ export const sendBatchExportSuccessEmail = async ({
        userName,
        batchExportName,
        expiresInHours,
-      })
+      }),
    );

    await mailer.sendMail({
@@ -51,6 +51,6 @@ export const sendBatchExportSuccessEmail = async ({
      html: htmlTemplate,
    });
  } catch (error) {
-    console.error(error);
+    logger.error(error);
  }
 };
@@ -3,6 +3,7 @@ import { parseConnectionUrl } from "nodemailer/lib/shared/index.js";
 import { render } from "@react-email/render";

 import MembershipInvitationTemplate from "./MembershipInvitationEmailTemplate";
+import { logger } from "../../../logger";

 const langfuseUrls = {
  US: "https://us.cloud.langfuse.com",
@@ -34,8 +35,8 @@ export const sendMembershipInvitationEmail = async ({
  orgName,
 }: SendMembershipInvitationParams) => {
  if (!env.EMAIL_FROM_ADDRESS || !env.SMTP_CONNECTION_URL) {
-    console.error(
-      "Missing environment variables for sending membership invitation email."
+    logger.error(
+      "Missing environment variables for sending membership invitation email.",
    );
    return;
  }
@@ -49,8 +50,8 @@ export const sendMembershipInvitationEmail = async ({

  const authUrl = getAuthURL();
  if (!authUrl) {
-    console.error(
-      "Missing NEXTAUTH_URL or NEXT_PUBLIC_LANGFUSE_CLOUD_REGION environment variable."
+    logger.error(
+      "Missing NEXTAUTH_URL or NEXT_PUBLIC_LANGFUSE_CLOUD_REGION environment variable.",
    );
    return;
  }
@@ -67,7 +68,7 @@ export const sendMembershipInvitationEmail = async ({
        inviteLink: authUrl,
        emailFromAddress: env.EMAIL_FROM_ADDRESS,
        langfuseCloudRegion: env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION,
-      })
+      }),
    );

    await mailer.sendMail({
@@ -77,6 +78,6 @@ export const sendMembershipInvitationEmail = async ({
      html: htmlTemplate,
    });
  } catch (error) {
-    console.error(error);
+    logger.error(error);
  }
 };
@@ -17,6 +17,7 @@ export const sessionsViewCols: ColumnDefinition[] = [
    type: "arrayOptions",
    internal: 't."userIds"',
    options: [], // to be filled in at runtime
+    nullable: true,
  },
  {
    name: "Session Duration (s)",
@@ -78,10 +79,18 @@ export const sessionsViewCols: ColumnDefinition[] = [
    type: "number",
    internal: 'o."totalTokens"',
  },
+  {
+    name: "Trace Tags",
+    id: "tags",
+    type: "arrayOptions",
+    internal: 't."tags"',
+    options: [], // to be filled in at runtime
+  },
 ];

 export type SessionOptions = {
  userIds: Array<OptionsDefinition>;
+  tags: Array<OptionsDefinition>;
 };

 export function sessionsTableColsWithOptions(
@@ -91,6 +100,9 @@ export function sessionsTableColsWithOptions(
    if (col.id === "userIds") {
      return { ...col, options: options?.userIds ?? [] };
    }
+    if (col.id === "tags") {
+      return { ...col, options: options?.tags ?? [] };
+    }
    return col;
  });
 }
@@ -9,6 +9,7 @@ export type ColumnDefinition =
      id: string;
      type: "number" | "string" | "datetime" | "boolean";
      internal: string;
+      nullable?: boolean;
    }
  | {
      name: string;
@@ -16,6 +17,7 @@ export type ColumnDefinition =
      type: "stringOptions";
      options: Array<OptionsDefinition>;
      internal: string;
+      nullable?: boolean;
    }
  | {
      name: string;
@@ -23,6 +25,7 @@ export type ColumnDefinition =
      type: "arrayOptions";
      options: Array<OptionsDefinition>;
      internal: string;
+      nullable?: boolean;
    }
  | {
      name: string;
@@ -30,6 +33,7 @@ export type ColumnDefinition =
      type: "stringObject" | "numberObject";
      internal: string;
      keyOptions?: Array<string>;
+      nullable?: boolean;
    };

 export const tableNames = [
@@ -15,6 +15,7 @@ const tracesOnlyCols: ColumnDefinition[] = [
    type: "stringOptions",
    internal: 't."name"',
    options: [], // to be filled in at runtime
+    nullable: true,
  },
  {
    name: "Timestamp",
@@ -22,12 +23,19 @@ const tracesOnlyCols: ColumnDefinition[] = [
    type: "datetime",
    internal: 't."timestamp"',
  },
-  { name: "User ID", id: "userId", type: "string", internal: 't."user_id"' },
+  {
+    name: "User ID",
+    id: "userId",
+    type: "string",
+    internal: 't."user_id"',
+    nullable: true,
+  },
  {
    name: "Session ID",
    id: "sessionId",
    type: "string",
    internal: 't."session_id"',
+    nullable: true,
  },
  {
    name: "Metadata",
@@ -40,12 +48,14 @@ const tracesOnlyCols: ColumnDefinition[] = [
    id: "version",
    type: "string",
    internal: 't."version"',
+    nullable: true,
  },
  {
    name: "Release",
    id: "release",
    type: "string",
    internal: 't."release"',
+    nullable: true,
  },
  {
    name: "Level",
@@ -69,24 +79,28 @@ export const tracesTableCols: ColumnDefinition[] = [
    id: "inputTokens",
    type: "number",
    internal: 'tm."promptTokens"',
+    nullable: true,
  },
  {
    name: "Output Tokens",
    id: "outputTokens",
    type: "number",
    internal: 'tm."completionTokens"',
+    nullable: true,
  },
  {
    name: "Total Tokens",
    id: "totalTokens",
    type: "number",
    internal: 'tm."totalTokens"',
+    nullable: true,
  },
  {
    name: "Usage",
    id: "usage",
    type: "number",
    internal: 'tm."totalTokens"',
+    nullable: true,
  },

  {
@@ -106,18 +120,21 @@ export const tracesTableCols: ColumnDefinition[] = [
    id: "inputCost",
    type: "number",
    internal: '"calculatedInputCost"',
+    nullable: true,
  },
  {
    name: "Output Cost ($)",
    id: "outputCost",
    type: "number",
    internal: '"calculatedOutputCost"',
+    nullable: true,
  },
  {
    name: "Total Cost ($)",
    id: "totalCost",
    type: "number",
    internal: '"calculatedTotalCost"',
+    nullable: true,
  },
 ];

@@ -41,6 +41,13 @@ ARG NEXT_PUBLIC_TURNSTILE_SITE_KEY
 ARG NEXT_PUBLIC_POSTHOG_KEY
 ARG NEXT_PUBLIC_POSTHOG_HOST
 ARG NEXT_PUBLIC_CRISP_WEBSITE_ID
+ARG NEXT_PUBLIC_SENTRY_DSN
+ARG NEXT_LANGFUSE_TRACING_SAMPLE_RATE
+
+# Accept build id as NEXT_PUBLIC_BUILD_ID or PORTER_NEXT_PUBLIC_BUILD_ID
+ARG PORTER_NEXT_PUBLIC_BUILD_ID
+ARG NEXT_PUBLIC_BUILD_ID
+ENV NEXT_PUBLIC_BUILD_ID=${PORTER_NEXT_PUBLIC_BUILD_ID:-$NEXT_PUBLIC_BUILD_ID}

 # Copy source code of isolated subworkspace
 COPY --from=pruner /app/out/full/ .
@@ -54,7 +61,7 @@ RUN rm -f ./web/src/middleware.ts
 ENV NEXT_TELEMETRY_DISABLED 1
 ENV NEXT_MANUAL_SIG_HANDLE true

-RUN turbo run build --filter=web
+RUN NODE_OPTIONS='--max-old-space-size=4096' turbo run build --filter=web

 # Production image, copy all the files and run next
 FROM --platform=${TARGETPLATFORM:-linux/amd64} base AS runner
@@ -100,4 +107,4 @@ ENV PORT 3000
 ENTRYPOINT ["dumb-init", "--", "./web/entrypoint.sh"]

 # startup command
-CMD ["node", "./web/server.js"]
+CMD ["node", "./web/server.js", "--keepAliveTimeout", "110000"]
@@ -12,26 +12,49 @@ import { env } from "./src/env.mjs";
 */
 const cspHeader = `
  default-src 'self' https://*.langfuse.com https://*.posthog.com https://*.sentry.io wss://*.crisp.chat https://*.crisp.chat;
-  script-src 'self' 'unsafe-eval' https://*.langfuse.com https://*.crisp.chat https://challenges.cloudflare.com https://*.sentry.io https://ph.langfuse.com https://static.cloudflareinsights.com https://*.stripe.com;
-  style-src 'self' 'unsafe-inline' https://*.crisp.chat;
-  img-src 'self' https: blob: data:;
-  font-src 'self' https://*.crisp.chat;
-  frame-src 'self' https://challenges.cloudflare.com https://*.stripe.com;
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' https://*.langfuse.com https://client.crisp.chat https://settings.crisp.chat https://challenges.cloudflare.com https://*.sentry.io https://ph.langfuse.com https://static.cloudflareinsights.com https://*.stripe.com;
+  style-src 'self' 'unsafe-inline' https://client.crisp.chat;
+  img-src 'self' https: blob: data: https://client.crisp.chat https://image.crisp.chat https://storage.crisp.chat;
+  font-src 'self' https://client.crisp.chat;
+  frame-src 'self' https://challenges.cloudflare.com https://*.stripe.com https://game.crisp.chat;
  worker-src 'self' blob:;
  object-src 'none';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';
+  connect-src 'self' https://client.crisp.chat https://storage.crisp.chat wss://client.relay.crisp.chat wss://stream.relay.crisp.chat https://*.ingest.us.sentry.io https://ph.langfuse.com;
+  media-src 'self' https://client.crisp.chat;
  ${env.LANGFUSE_CSP_ENFORCE_HTTPS === "true" ? "upgrade-insecure-requests; block-all-mixed-content;" : ""}
+  ${env.SENTRY_CSP_REPORT_URI ? `report-uri ${env.SENTRY_CSP_REPORT_URI}; report-to csp-endpoint;` : ""}
 `;

+const reportToHeader = {
+  key: "Report-To",
+  value: JSON.stringify({
+    group: "csp-endpoint",
+    max_age: 10886400,
+    endpoints: [
+      {
+        url: env.SENTRY_CSP_REPORT_URI,
+      },
+    ],
+    include_subdomains: true,
+  }),
+};
+
 /** @type {import("next").NextConfig} */
 const nextConfig = {
  transpilePackages: ["@langfuse/shared"],
  reactStrictMode: true,
  experimental: {
    instrumentationHook: true,
+    serverComponentsExternalPackages: [
+      "dd-trace",
+      "@opentelemetry/auto-instrumentations-node",
+      "@opentelemetry/api",
+    ],
  },
+  poweredByHeader: false,

  /**
   * If you have `experimental: { appDir: true }` set, then you must comment the below `i18n` config
@@ -66,6 +89,7 @@ const nextConfig = {
            key: "Permissions-Policy",
            value: "autoplay=*, fullscreen=*, microphone=*",
          },
+          ...(env.SENTRY_CSP_REPORT_URI ? [reportToHeader] : []),
        ],
      },
      {
@@ -116,10 +140,6 @@ const nextConfig = {

  // webassembly support for @dqbd/tiktoken
  webpack(config, { isServer }) {
-    if (isServer) {
-      // https://github.com/open-telemetry/opentelemetry-js/issues/4173
-      config.ignoreWarnings = [{ module: /opentelemetry/ }];
-    }
    config.experiments = {
      asyncWebAssembly: true,
      layers: true,
@@ -129,36 +149,44 @@ const nextConfig = {
  },
 };

-const sentryOptions = {
-  // Additional config options for the Sentry Webpack plugin. Keep in mind that
-  // the following options are set automatically, and overriding them is not
-  // recommended:
-  //   release, url, authToken, configFile, stripPrefix,
-  //   urlPrefix, include, ignore
+export default withSentryConfig(nextConfig, {
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options

  org: process.env.SENTRY_ORG,
  project: process.env.SENTRY_PROJECT,

-  silent: true, // Suppresses all logs
+  authToken: env.SENTRY_AUTH_TOKEN,
+
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,

  // For all available options, see:
-  // https://github.com/getsentry/sentry-webpack-plugin#options.
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

-  // See the sections below for information on the following options:
-  //   'Configure Source Maps':
-  //     - disableServerWebpackPlugin
-  //     - disableClientWebpackPlugin
-  //     - hideSourceMaps
-  hideSourceMaps: true,
-  //     - widenClientFileUpload
-  //   'Configure Legacy Browser Support':
-  //     - transpileClientSDK
-  //   'Configure Serverside Auto-instrumentation':
-  //     - autoInstrumentServerFunctions
-  //     - excludeServerRoutes
-  //   'Configure Tunneling':
-  //     - tunnelRoute
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+
+  // Automatically annotate React components to show their full name in breadcrumbs and session replay
+  reactComponentAnnotation: {
+    enabled: true,
+  },
+
+  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+  // This can increase your server load as well as your hosting bill.
+  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+  // side errors will fail.
  tunnelRoute: "/api/monitoring-tunnel",
-};

-export default withSentryConfig(nextConfig, sentryOptions);
+  // Hides source maps from generated client bundles
+  hideSourceMaps: true,
+
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+
+  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+  // See the following for more information:
+  // https://docs.sentry.io/product/crons/
+  // https://vercel.com/docs/cron-jobs
+  automaticVercelMonitors: false,
+});
@@ -1,6 +1,6 @@
 {
  "name": "web",
-  "version": "2.72.0",
+  "version": "2.78.0",
  "private": true,
  "license": "MIT",
  "engines": {
@@ -46,6 +46,7 @@
    "@opentelemetry/instrumentation": "^0.52.1",
    "@opentelemetry/instrumentation-http": "^0.52.1",
    "@opentelemetry/instrumentation-ioredis": "^0.42.0",
+    "@opentelemetry/instrumentation-winston": "^0.40.0",
    "@opentelemetry/instrumentation-undici": "^0.4.0",
    "@opentelemetry/resources": "^1.25.1",
    "@opentelemetry/sdk-metrics": "1.23.0",
@@ -54,32 +55,31 @@
    "@opentelemetry/sdk-trace-node": "^1.25.1",
    "@opentelemetry/semantic-conventions": "^1.25.1",
    "@prisma/instrumentation": "^5.13.0",
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-alert-dialog": "^1.0.5",
-    "@radix-ui/react-avatar": "^1.0.4",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-collapsible": "^1.0.3",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-hover-card": "^1.0.7",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-alert-dialog": "^1.1.1",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-collapsible": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-hover-card": "^1.1.1",
    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-scroll-area": "^1.0.5",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toggle": "^1.0.3",
-    "@radix-ui/react-toggle-group": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.7",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
    "@remixicon/react": "^4.2.0",
    "@repo/eslint-config": "workspace:*",
    "@repo/typescript-config": "workspace:*",
-    "@sentry/nextjs": "8.13.0",
-    "@sentry/node": "8.13.0",
+    "@sentry/nextjs": "8.26.0",
    "@t3-oss/env-nextjs": "^0.10.1",
    "@tailwindcss/container-queries": "^0.1.1",
    "@tanstack/react-query": "^4.36.1",
@@ -89,16 +89,16 @@
    "@trpc/next": "^10.45.0",
    "@trpc/react-query": "^10.45.0",
    "@trpc/server": "^10.45.0",
-    "@uiw/codemirror-theme-github": "^4.21.25",
+    "@uiw/codemirror-theme-github": "^4.23.0",
    "@uiw/codemirror-theme-tokyo-night": "^4.22.2",
    "@uiw/react-codemirror": "^4.21.25",
    "ai": "^3.0.23",
    "bcryptjs": "^2.4.3",
-    "bullmq": "^5.4.2",
+    "bullmq": "^5.12.10",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "cmdk": "^1.0.0",
-    "core-js": "^3.36.1",
+    "core-js": "^3.38.1",
    "cors": "^2.8.5",
    "date-fns": "^3.3.1",
    "dd-trace": "^5.21.0",
@@ -108,11 +108,11 @@
    "ioredis": "^5.4.1",
    "ip-address": "^9.0.5",
    "js-tiktoken": "^1.0.12",
-    "kysely": "^0.27.3",
+    "kysely": "^0.27.4",
    "langchain": "^0.2.6",
    "lodash": "^4.17.21",
-    "lucide-react": "^0.364.0",
-    "next": "^14.2.3",
+    "lucide-react": "^0.436.0",
+    "next": "^14.2.6",
    "next-auth": "^4.24.7",
    "next-query-params": "^5.0.0",
    "next-themes": "^0.3.0",
@@ -120,12 +120,14 @@
    "posthog-node": "^3.6.3",
    "prexit": "^2.2.0",
    "prisma": "^5.13.0",
+    "rate-limiter-flexible": "^5.0.3",
    "react": "18.2.0",
    "react-day-picker": "^8.10.1",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.51.5",
    "react-icons": "^5.2.1",
    "react-markdown": "^9.0.1",
+    "react-resizable-panels": "^2.1.1",
    "react-responsive": "^10.0.0",
    "react-syntax-highlighter": "^15.5.0",
    "react18-json-view": "^0.2.8-canary.6",
@@ -134,7 +136,7 @@
    "sonner": "^1.4.41",
    "stripe": "^16.8.0",
    "superjson": "2.2.1",
-    "tailwind-merge": "^2.2.1",
+    "tailwind-merge": "^2.5.2",
    "tailwindcss-animate": "^1.0.7",
    "use-query-params": "^2.2.1",
    "uuid": "^9.0.1",
@@ -153,10 +155,10 @@
    "@types/dompurify": "^3.0.5",
    "@types/eslint": "^8.56.7",
    "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.17.5",
+    "@types/lodash": "^4.17.7",
    "@types/node": "20.10.5",
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
+    "@types/react": "~18.2.79",
+    "@types/react-dom": "~18.2.25",
    "@types/react-syntax-highlighter": "^15.5.13",
    "@types/uuid": "^9.0.8",
    "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -164,17 +166,17 @@
    "autoprefixer": "^10.4.19",
    "dotenv-cli": "^7.4.2",
    "eslint": "^8.56.0",
-    "eslint-config-next": "^14.2.3",
+    "eslint-config-next": "^14.2.6",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "node-mocks-http": "^1.14.1",
    "postcss": "^8.4.38",
    "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.14",
-    "tailwindcss": "^3.4.4",
+    "prettier-plugin-tailwindcss": "^0.6.6",
+    "tailwindcss": "^3.4.10",
    "ts-node": "^10.9.2",
    "tsconfig-paths": "^4.2.0",
-    "tsx": "^4.7.2",
+    "tsx": "^4.19.0",
    "typescript": "^5.4.5",
    "wait-for-expect": "^3.0.2"
  },
@@ -3,19 +3,28 @@ import * as Sentry from "@sentry/nextjs";
 Sentry.init({
  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
  // Replay may only be enabled for the client-side
-  integrations: [Sentry.replayIntegration()],
+  integrations: [
+    Sentry.replayIntegration(),
+    // Sentry.debugIntegration(),
+    Sentry.captureConsoleIntegration({
+      levels: ["error"],
+    }),
+  ],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
-  tracesSampleRate: process.env.NEXT_LANGFUSE_TRACING_SAMPLE_RATE
-    ? Number(process.env.NEXT_LANGFUSE_TRACING_SAMPLE_RATE)
-    : 0.1,
+  tracesSampleRate: process.env.NEXT_PUBLIC_LANGFUSE_TRACING_SAMPLE_RATE
+    ? Number(process.env.NEXT_PUBLIC_LANGFUSE_TRACING_SAMPLE_RATE)
+    : 0.5,

  // Capture Replay for 100% of all sessions,
  // plus for 100% of sessions with an error
-  replaysSessionSampleRate: 0,
+  replaysSessionSampleRate: process.env.NEXT_PUBLIC_LANGFUSE_TRACING_SAMPLE_RATE
+    ? Number(process.env.NEXT_PUBLIC_LANGFUSE_TRACING_SAMPLE_RATE)
+    : 0.5,
  replaysOnErrorSampleRate: 1.0,
+  debug: false,

  beforeSend(event, _hint) {
    // Check if it is an exception, and if so, show the report dialog
@@ -1,8 +1,7 @@
 import { v4 } from "uuid";
-import { JobExecutionStatus, prisma } from "@langfuse/shared/src/db";
-import { redis } from "@langfuse/shared/src/server";
+import { JobExecutionStatus, Prisma, prisma } from "@langfuse/shared/src/db";
+import { OrgEnrichedApiKey, redis } from "@langfuse/shared/src/server";
 import waitForExpect from "wait-for-expect";
-import { ApiKeyZod } from "@/src/features/public-api/server/apiAuth";

 const generateAuth = (username: string, password: string) => {
  const auth = Buffer.from(`${username}:${password}`).toString("base64");
@@ -38,6 +37,14 @@ describe("Health endpoints", () => {
 });

 describe("Ingestion Pipeline", () => {
+  beforeEach(async () => {
+    // clear the redis cache
+    const keys = await redis?.keys("*");
+    if (keys && keys.length > 0) {
+      await redis?.del(keys);
+    }
+  });
+
  it("ingest a trace", async () => {
    const traceId = v4();
    const spanId = v4();
@@ -118,7 +125,7 @@ describe("Ingestion Pipeline", () => {
      expect(redisKeys?.length).toBe(1);
      const redisValue = await redis?.get(redisKeys![0]);

-      const llmApiKey = ApiKeyZod.parse(JSON.parse(redisValue!));
+      const llmApiKey = OrgEnrichedApiKey.parse(JSON.parse(redisValue!));
      expect(llmApiKey.projectId).toBe("7a88fb47-b4e2-43b8-a06c-a5ce950dc53a");
    });

@@ -143,6 +150,91 @@ describe("Ingestion Pipeline", () => {

    expect(response.status).toBe(207);
  }, 25000);
+
+  it("rate limit ingestion", async () => {
+    // update the org in the database and set the rate limit to 1 for ingestion
+    const org = await prisma.organization.findUnique({
+      where: {
+        id: "seed-org-id",
+      },
+    });
+    await prisma.organization.update({
+      where: {
+        id: "seed-org-id",
+      },
+      data: {
+        cloudConfig: {
+          ...(typeof org?.cloudConfig === "object" ? org.cloudConfig : {}),
+          rateLimitOverrides: [
+            {
+              resource: "ingestion",
+              points: 1,
+              durationInSec: 60,
+            },
+          ],
+        },
+      },
+    });
+
+    const traceId = v4();
+    const spanId = v4();
+
+    const event = {
+      batch: [
+        {
+          id: v4(),
+          type: "trace-create",
+          timestamp: new Date().toISOString(),
+          body: {
+            name: "test trace",
+            id: traceId,
+            userId: "user-1", // triggers the eval
+          },
+        },
+        {
+          id: v4(),
+          type: "span-create",
+          timestamp: new Date().toISOString(),
+          body: {
+            id: spanId,
+            traceId: traceId,
+            name: "test span",
+          },
+        },
+      ],
+    };
+    // Arrange
+    const url = "http://localhost:3000/api/public/ingestion";
+
+    // Act
+    let responses = [];
+    for (let i = 0; i < 10; i++) {
+      responses.push(
+        await fetch(url, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: userApiKeyAuth,
+          },
+          body: JSON.stringify(event),
+        }),
+      );
+    }
+
+    // check that at least one of the responses is a 429
+    const rateLimitedResponse = responses.find((r) => r.status === 429);
+    expect(rateLimitedResponse).not.toBeNull();
+
+    // revert the rate limit on the org
+    await prisma.organization.update({
+      where: {
+        id: "seed-org-id",
+      },
+      data: {
+        cloudConfig: org?.cloudConfig ?? Prisma.JsonNull,
+      },
+    });
+  });
 });

 describe("Prompts endpoint", () => {
@@ -1,14 +1,12 @@
 import {
  getDisplaySecretKey,
  hashSecretKey,
+  OrgEnrichedApiKey,
 } from "@langfuse/shared/src/server";
-import {
-  ApiAuthService,
-  ApiKeyZod,
-} from "@/src/features/public-api/server/apiAuth";
-import { type PrismaClient, prisma } from "@langfuse/shared/src/db";
+import { Prisma, type PrismaClient, prisma } from "@langfuse/shared/src/db";
 import { Redis } from "ioredis";
 import { env } from "@/src/env.mjs";
+import { ApiAuthService } from "@/src/features/public-api/server/apiAuth";

 describe("Authenticate API calls", () => {
  beforeEach(async () => {
@@ -68,6 +66,118 @@ describe("Authenticate API calls", () => {
      expect(auth2.validKey).toBe(true);
    });

+    it("should create new api key with stripe data and succeed with new key", async () => {
+      await createAPIKey();
+
+      await prisma.organization.update({
+        where: {
+          id: "seed-org-id",
+        },
+        data: {
+          cloudConfig: {
+            stripe: {
+              customerId: "cus_test123",
+              activeSubscriptionId: "sub_test123",
+              activeProductId: "prod_test123",
+            },
+          },
+        },
+      });
+
+      await new ApiAuthService(prisma, null).verifyAuthHeaderAndReturnScope(
+        "Basic cGstbGYtMTIzNDU2Nzg5MDpzay1sZi0xMjM0NTY3ODkw",
+      );
+
+      const auth = await new ApiAuthService(
+        prisma,
+        null,
+      ).verifyAuthHeaderAndReturnScope(
+        "Basic cGstbGYtMTIzNDU2Nzg5MDpzay1sZi0xMjM0NTY3ODkw",
+      );
+      expect(auth.validKey).toBe(true);
+
+      if (auth.validKey) {
+        expect(auth.scope.orgId).toBe("seed-org-id");
+        expect(auth.scope.plan).toBe("cloud:hobby");
+        expect(auth.scope.rateLimitOverrides).toEqual([]);
+      }
+
+      const apiKey = await prisma.apiKey.findUnique({
+        where: { publicKey: "pk-lf-1234567890" },
+      });
+      expect(apiKey).not.toBeNull();
+      expect(apiKey?.fastHashedSecretKey).not.toBeNull();
+
+      await prisma.organization.update({
+        where: {
+          id: "seed-org-id",
+        },
+        data: {
+          cloudConfig: Prisma.JsonNull,
+        },
+      });
+    });
+
+    it("should create new api key with custom rate limits and succeed with new key", async () => {
+      await createAPIKey();
+
+      await prisma.organization.update({
+        where: {
+          id: "seed-org-id",
+        },
+        data: {
+          cloudConfig: {
+            rateLimitOverrides: [
+              {
+                resource: "ingestion",
+                points: 100,
+                durationInSec: 60,
+              },
+            ],
+          },
+        },
+      });
+
+      await new ApiAuthService(prisma, null).verifyAuthHeaderAndReturnScope(
+        "Basic cGstbGYtMTIzNDU2Nzg5MDpzay1sZi0xMjM0NTY3ODkw",
+      );
+
+      const auth = await new ApiAuthService(
+        prisma,
+        null,
+      ).verifyAuthHeaderAndReturnScope(
+        "Basic cGstbGYtMTIzNDU2Nzg5MDpzay1sZi0xMjM0NTY3ODkw",
+      );
+      expect(auth.validKey).toBe(true);
+
+      if (auth.validKey) {
+        expect(auth.scope.orgId).toBe("seed-org-id");
+        expect(auth.scope.plan).toBe("cloud:hobby");
+        expect(auth.scope.rateLimitOverrides).toEqual([
+          {
+            resource: "ingestion",
+            points: 100,
+            durationInSec: 60,
+          },
+        ]);
+      }
+
+      const apiKey = await prisma.apiKey.findUnique({
+        where: { publicKey: "pk-lf-1234567890" },
+      });
+      expect(apiKey).not.toBeNull();
+      expect(apiKey?.fastHashedSecretKey).not.toBeNull();
+
+      await prisma.organization.update({
+        where: {
+          id: "seed-org-id",
+        },
+        data: {
+          cloudConfig: Prisma.JsonNull,
+        },
+      });
+    });
+
    it("should fail on wrong api key with new key", async () => {
      await createAPIKey();
      const auth = await new ApiAuthService(
@@ -149,6 +259,25 @@ describe("Authenticate API calls", () => {
    it("should create new api key and read from cache", async () => {
      await createAPIKey();

+      // update the organization with a cloud config
+      await prisma.organization.update({
+        where: { id: "seed-org-id" },
+        data: {
+          cloudConfig: {
+            rateLimitOverrides: [
+              {
+                resource: "public-api",
+                points: 1000,
+                durationInSec: 60,
+              },
+              {
+                resource: "ingestion",
+              },
+            ],
+          },
+        },
+      });
+
      // first auth will generate the fast hashed api key
      await new ApiAuthService(prisma, redis).verifyAuthHeaderAndReturnScope(
        "Basic cGstbGYtMTIzNDU2Nzg5MDpzay1sZi0xMjM0NTY3ODkw",
@@ -177,12 +306,31 @@ describe("Authenticate API calls", () => {

      expect(cachedKey2).not.toBeNull();

-      const parsed = ApiKeyZod.parse(JSON.parse(cachedKey2!));
+      const parsed = OrgEnrichedApiKey.parse(JSON.parse(cachedKey2!));

      expect(parsed).toEqual({
        ...apiKey,
+        orgId: "seed-org-id",
+        plan: "cloud:hobby",
+        rateLimitOverrides: [
+          {
+            resource: "public-api",
+            points: 1000,
+            durationInSec: 60,
+          },
+          {
+            resource: "ingestion",
+          },
+        ],
        createdAt: apiKey?.createdAt.toISOString(),
      });
+
+      await prisma.organization.update({
+        where: { id: "seed-org-id" },
+        data: {
+          cloudConfig: Prisma.JsonNull,
+        },
+      });
    });

    it("searching for non-existing key stores flag in redis and fails auth", async () => {
@@ -275,7 +423,7 @@ describe("Authenticate API calls", () => {
      );
      expect(cachedKey).not.toBeNull();

-      const parsed = ApiKeyZod.parse(JSON.parse(cachedKey!));
+      const parsed = OrgEnrichedApiKey.parse(JSON.parse(cachedKey!));

      expect(parsed).toEqual({
        id: expect.any(String),
@@ -288,6 +436,8 @@ describe("Authenticate API calls", () => {
        lastUsedAt: null,
        expiresAt: null,
        projectId: expect.any(String),
+        orgId: "seed-org-id",
+        plan: "cloud:hobby",
      });
    });

@@ -372,10 +522,12 @@ describe("Authenticate API calls", () => {
      );
      expect(cachedKey).not.toBeNull();

-      const parsed = ApiKeyZod.parse(JSON.parse(cachedKey!));
+      const parsed = OrgEnrichedApiKey.parse(JSON.parse(cachedKey!));

      expect(parsed).toEqual({
        ...apiKey,
+        orgId: "seed-org-id",
+        plan: "cloud:hobby",
        createdAt: apiKey?.createdAt.toISOString(),
      });

@@ -396,6 +548,167 @@ describe("Authenticate API calls", () => {
    });
  });

+  describe("invalidates api keys in redis", () => {
+    const redis = new Redis("redis://:myredissecret@127.0.0.1:6379", {
+      maxRetriesPerRequest: null,
+    });
+
+    beforeEach(async () => {
+      // if we do not remove the key, it will remain in the cache and
+      // calling the test twice will not add the key to the cache
+
+      const keys = await redis.keys("api-key*");
+      console.log("before each deleting keys", keys);
+      if (keys.length > 0) {
+        console.log("before each deleting keys. actually deleting", keys);
+        await redis.del(keys);
+      }
+    });
+
+    afterEach(async () => {
+      // if we do not remove the key, it will remain in the cache and
+      // calling the test twice will not add the key to the cache
+
+      const keys = await redis.keys("api-key*");
+      console.log("after each deleting keys", keys);
+      if (keys.length > 0) {
+        await redis.del(keys);
+      }
+    });
+
+    afterAll(async () => {
+      redis.disconnect();
+    });
+
+    it("should invalidate organization API keys in redis", async () => {
+      await createAPIKey();
+
+      // put keys into cache
+      await new ApiAuthService(prisma, redis).verifyAuthHeaderAndReturnScope(
+        "Basic cGstbGYtMTIzNDU2Nzg5MDpzay1sZi0xMjM0NTY3ODkw",
+      );
+
+      await new ApiAuthService(prisma, redis).verifyAuthHeaderAndReturnScope(
+        "Basic cGstbGYtMTIzNDU2Nzg5MDpzay1sZi0xMjM0NTY3ODkw",
+      );
+
+      const apiKey = await prisma.apiKey.findUnique({
+        where: { publicKey: "pk-lf-1234567890" },
+      });
+      expect(apiKey).not.toBeNull();
+
+      const cachedKey = await redis.get(
+        `api-key:${apiKey?.fastHashedSecretKey}`,
+      );
+      expect(cachedKey).not.toBeNull();
+
+      await new ApiAuthService(prisma, redis).invalidateOrgApiKeys(
+        "seed-org-id",
+      );
+
+      const invalidatedCachedKey = await redis.get(
+        `api-key:${apiKey?.fastHashedSecretKey}`,
+      );
+      expect(invalidatedCachedKey).toBeNull();
+    });
+
+    it("if no keys in redis, invalidating org keys should do nothing", async () => {
+      await createAPIKey();
+
+      await prisma.apiKey.update({
+        where: { publicKey: "pk-lf-1234567890" },
+        data: {
+          fastHashedSecretKey: Math.random().toString(36).substring(2, 15),
+        },
+      });
+
+      await new ApiAuthService(prisma, redis).invalidateOrgApiKeys(
+        "seed-org-id",
+      );
+
+      const keys = await redis.keys("api-key*");
+      expect(keys.length).toBe(0);
+    });
+
+    it("if no keys in redis, invalidating org keys without fast hash should do nothing", async () => {
+      await createAPIKey();
+
+      await new ApiAuthService(prisma, redis).invalidateOrgApiKeys(
+        "seed-org-id",
+      );
+
+      const keys = await redis.keys("api-key*");
+      expect(keys.length).toBe(0);
+    });
+
+    it("should invalidate project API keys in redis", async () => {
+      await createAPIKey();
+
+      // put keys into cache
+      await new ApiAuthService(prisma, redis).verifyAuthHeaderAndReturnScope(
+        "Basic cGstbGYtMTIzNDU2Nzg5MDpzay1sZi0xMjM0NTY3ODkw",
+      );
+      await new ApiAuthService(prisma, redis).verifyAuthHeaderAndReturnScope(
+        "Basic cGstbGYtMTIzNDU2Nzg5MDpzay1sZi0xMjM0NTY3ODkw",
+      );
+
+      const apiKey = await prisma.apiKey.findUnique({
+        where: { publicKey: "pk-lf-1234567890" },
+      });
+      expect(apiKey).not.toBeNull();
+
+      const cachedKey = await redis.get(
+        `api-key:${apiKey?.fastHashedSecretKey}`,
+      );
+      expect(cachedKey).not.toBeNull();
+
+      await new ApiAuthService(prisma, redis).invalidateProjectApiKeys(
+        "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a",
+      );
+
+      const invalidatedCachedKey = await redis.get(
+        `api-key:${apiKey?.fastHashedSecretKey}`,
+      );
+      expect(invalidatedCachedKey).toBeNull();
+    });
+
+    it("if no keys in redis, invalidating project keys should do nothing", async () => {
+      await createAPIKey();
+
+      await prisma.apiKey.update({
+        where: { publicKey: "pk-lf-1234567890" },
+        data: {
+          fastHashedSecretKey: Math.random().toString(36).substring(2, 15),
+        },
+      });
+
+      await new ApiAuthService(prisma, redis).invalidateProjectApiKeys(
+        "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a",
+      );
+
+      const keys = await redis.keys("api-key*");
+      expect(keys.length).toBe(0);
+    });
+
+    it("if no keys in redis, invalidating project keys without fast hash should do nothing", async () => {
+      await createAPIKey();
+
+      await prisma.apiKey.update({
+        where: { publicKey: "pk-lf-1234567890" },
+        data: {
+          fastHashedSecretKey: Math.random().toString(36).substring(2, 15),
+        },
+      });
+
+      await new ApiAuthService(prisma, redis).invalidateProjectApiKeys(
+        "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a",
+      );
+
+      const keys = await redis.keys("api-key*");
+      expect(keys.length).toBe(0);
+    });
+  });
+
  const createAPIKey = async () => {
    const seedApiKey = {
      id: "seed-api-key",
@@ -1,4 +1,4 @@
-import { orderByToPrismaSql } from "@langfuse/shared";
+import { orderByToPrismaSql } from "@langfuse/shared/src/server";
 import { tracesTableCols } from "@langfuse/shared";

 // The test for the orderByToPrisma function
@@ -0,0 +1,269 @@
+import { RateLimitService } from "@/src/features/public-api/server/RateLimitService";
+import { Redis } from "ioredis";
+
+describe("RateLimitService", () => {
+  const orgId = "seed-org-id";
+  let redis: Redis;
+
+  beforeAll(() => {
+    redis = new Redis("redis://:myredissecret@127.0.0.1:6379", {
+      maxRetriesPerRequest: null,
+    });
+  });
+
+  afterAll(async () => {
+    redis.disconnect();
+  });
+
+  beforeEach(async () => {
+    expect(redis).toBeDefined();
+    const keys = await redis?.keys("rate-limit*");
+    if (keys && keys?.length > 0) {
+      await redis?.del(keys);
+    }
+  });
+
+  afterEach(async () => {
+    const keys = await redis?.keys("rate-limit*");
+    if (keys && keys.length > 0) {
+      await redis?.del(keys);
+    }
+  });
+
+  it("should rate limit", async () => {
+    const scope = {
+      orgId: orgId,
+      plan: "cloud:hobby" as const,
+      projectId: "test-project-id",
+      accessLevel: "all" as const,
+      rateLimitOverrides: [],
+    };
+
+    const rateLimitService = new RateLimitService(redis!);
+    const result = await rateLimitService.rateLimitRequest(scope, "public-api");
+
+    expect(result?.res).toEqual({
+      scope: scope,
+      resource: "public-api",
+      points: 1000,
+      remainingPoints: 999,
+      msBeforeNext: expect.any(Number),
+      consumedPoints: 1,
+      isFirstInDuration: true,
+    });
+
+    expect(result?.isRateLimited()).toBe(false);
+
+    // check redis for the rate limit key
+    const value = await redis.get("rate-limit:public-api:seed-org-id");
+
+    expect(value).toBeDefined();
+    expect(parseInt(value ?? "0")).toBeGreaterThan(0);
+  });
+
+  it("should increment the rate limit count", async () => {
+    const scope = {
+      orgId: orgId,
+      plan: "cloud:hobby" as const,
+      projectId: "test-project-id",
+      accessLevel: "all" as const,
+      rateLimitOverrides: [],
+    };
+
+    const rateLimitService = new RateLimitService(redis!);
+    await rateLimitService.rateLimitRequest(scope, "public-api");
+
+    const result = await rateLimitService.rateLimitRequest(scope, "public-api");
+
+    expect(result?.res).toEqual({
+      scope: scope,
+      resource: "public-api",
+      points: 1000,
+      remainingPoints: 998,
+      msBeforeNext: expect.any(Number),
+      consumedPoints: 2,
+      isFirstInDuration: false,
+    });
+    expect(result?.isRateLimited()).toBe(false);
+  });
+
+  it("should reset the rate limit count after the window expires", async () => {
+    const scope = {
+      orgId: orgId,
+      plan: "cloud:hobby" as const,
+      projectId: "test-project-id",
+      accessLevel: "all" as const,
+      rateLimitOverrides: [
+        { resource: "public-api" as const, points: 100, durationInSec: 2 },
+      ],
+    };
+
+    const rateLimitService = new RateLimitService(redis!);
+    await rateLimitService.rateLimitRequest(scope, "public-api");
+
+    const firstResult = await rateLimitService.rateLimitRequest(
+      scope,
+      "public-api",
+    );
+    expect(firstResult?.isRateLimited()).toBe(false);
+
+    expect(firstResult?.res).toEqual({
+      scope: scope,
+      resource: "public-api",
+      points: 100,
+      remainingPoints: 98,
+      msBeforeNext: expect.any(Number),
+      consumedPoints: 2,
+      isFirstInDuration: false,
+    });
+
+    await new Promise((resolve) => setTimeout(resolve, 3000));
+
+    const secondResult = await rateLimitService.rateLimitRequest(
+      scope,
+      "public-api",
+    );
+
+    expect(secondResult?.res).toEqual({
+      scope: scope,
+      resource: "public-api",
+      points: 100,
+      remainingPoints: 99,
+      msBeforeNext: expect.any(Number),
+      consumedPoints: 1,
+      isFirstInDuration: true,
+    });
+
+    expect(secondResult?.isRateLimited()).toBe(false);
+  });
+
+  it("should return false when rate limit is exceeded", async () => {
+    const scope = {
+      orgId: orgId,
+      plan: "cloud:hobby" as const,
+      projectId: "test-project-id",
+      accessLevel: "all" as const,
+      rateLimitOverrides: [
+        { resource: "public-api" as const, points: 5, durationInSec: 60 },
+      ],
+    };
+
+    const rateLimitService = new RateLimitService(redis!);
+
+    for (let i = 0; i < 5; i++) {
+      await rateLimitService.rateLimitRequest(scope, "public-api");
+    }
+
+    const result = await rateLimitService.rateLimitRequest(scope, "public-api");
+
+    expect(result?.res).toEqual({
+      scope: scope,
+      resource: "public-api",
+      points: 5,
+      remainingPoints: 0,
+      msBeforeNext: expect.any(Number),
+      consumedPoints: 6,
+      isFirstInDuration: false,
+    });
+    expect(result?.isRateLimited()).toBe(true);
+  });
+
+  it("should apply rate limits with override for specific resource", async () => {
+    const scope = {
+      orgId: orgId,
+      plan: "cloud:hobby" as const,
+      projectId: "test-project-id",
+      accessLevel: "all" as const,
+      rateLimitOverrides: [
+        { resource: "public-api" as const, points: 5, durationInSec: 10 },
+      ],
+    };
+
+    const rateLimitService = new RateLimitService(redis!);
+
+    const result = await rateLimitService.rateLimitRequest(scope, "public-api");
+
+    expect(result?.res).toEqual({
+      scope: scope,
+      resource: "public-api",
+      points: 5,
+      remainingPoints: 4,
+      msBeforeNext: expect.any(Number),
+      consumedPoints: 1,
+      isFirstInDuration: true,
+    });
+  });
+
+  it("should not apply rate limits for resource prompts", async () => {
+    const scope = {
+      orgId: orgId,
+      plan: "cloud:hobby" as const,
+      projectId: "test-project-id",
+      accessLevel: "all" as const,
+      rateLimitOverrides: [
+        { resource: "public-api" as const, points: 5, durationInSec: 10 },
+      ],
+    };
+
+    const rateLimitService = new RateLimitService(redis!);
+
+    const result = await rateLimitService.rateLimitRequest(scope, "prompts");
+
+    expect(result?.res).toBeUndefined();
+    expect(result?.isRateLimited()).toBe(false);
+  });
+
+  it("should not apply rate limits for ingestion when overridden to null in API key", async () => {
+    const scope = {
+      orgId: orgId,
+      plan: "cloud:hobby" as const,
+      projectId: "test-project-id",
+      accessLevel: "all" as const,
+      rateLimitOverrides: [
+        { resource: "ingestion" as const, points: null, durationInSec: null },
+      ],
+    };
+
+    const rateLimitService = new RateLimitService(redis!);
+
+    const result = await rateLimitService.rateLimitRequest(scope, "ingestion");
+
+    expect(result?.res).toBeUndefined();
+  });
+
+  it("should not apply rate limits when redis is not defined", async () => {
+    const scope = {
+      orgId: orgId,
+      plan: "cloud:hobby" as const,
+      projectId: "test-project-id",
+      accessLevel: "all" as const,
+      rateLimitOverrides: [
+        { resource: "public-api" as const, points: 5, durationInSec: 10 },
+      ],
+    };
+
+    const rateLimitService = new RateLimitService(null);
+
+    const result = await rateLimitService.rateLimitRequest(scope, "public-api");
+
+    expect(result?.res).toBeUndefined();
+    expect(result?.isRateLimited()).toBe(false);
+  });
+
+  it("should not apply rate limits for OSS plan", async () => {
+    const scope = {
+      orgId: orgId,
+      plan: "oss" as const,
+      projectId: "test-project-id",
+      accessLevel: "all" as const,
+      rateLimitOverrides: [],
+    };
+
+    const rateLimitService = new RateLimitService(redis!);
+
+    const result = await rateLimitService.rateLimitRequest(scope, "public-api");
+
+    expect(result?.res).toBeUndefined();
+    expect(result?.isRateLimited()).toBe(false);
+  });
+});
@@ -1,7 +1,4 @@
-import { hash } from "bcryptjs";
-
 import { env } from "@/src/env.mjs";
-import { getDisplaySecretKey, hashSecretKey } from "@langfuse/shared";
 import { prisma } from "@langfuse/shared/src/db";
 import { type z } from "zod";

@@ -24,10 +21,7 @@ export const pruneDatabase = async () => {
  await prisma.llmApiKeys.deleteMany();
 };

-export function createBasicAuthHeader(
-  username: string,
-  password: string,
-): string {
+function createBasicAuthHeader(username: string, password: string): string {
  const base64Credentials = Buffer.from(`${username}:${password}`).toString(
    "base64",
  );
@@ -97,38 +91,3 @@ export async function makeZodVerifiedAPICall<T extends z.ZodTypeAny>(
  }
  return { body: resBody, status };
 }
-
-export const setupUserAndProject = async () => {
-  const user = await prisma.user.create({
-    data: {
-      id: "user-1",
-      name: "Demo User",
-      email: "demo@langfuse.com",
-      password: await hash("password", 12),
-    },
-  });
-
-  const project = await prisma.project.create({
-    data: {
-      id: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a",
-      name: "llm-app",
-      apiKeys: {
-        create: [
-          {
-            note: "seeded key",
-            hashedSecretKey: await hashSecretKey("sk-lf-1234567890"),
-            displaySecretKey: getDisplaySecretKey("sk-lf-1234567890"),
-            publicKey: "pk-lf-1234567890",
-          },
-        ],
-      },
-      projectMembers: {
-        create: {
-          role: "OWNER",
-          userId: user.id,
-        },
-      },
-    },
-  });
-  return { user, project };
-};
@@ -64,7 +64,7 @@ export const ChatMessageComponent: React.FC<ChatMessageProps> = ({
        <Textarea
          ref={textAreaRef}
          id={message.id}
-          className="height-[auto] min-h-8 w-full pt-3  font-mono text-xs focus:outline-none"
+          className="height-[auto] min-h-6 w-full  font-mono text-xs focus:outline-none"
          placeholder={placeholder}
          value={message.content}
          onChange={handleContentChange}
@@ -24,13 +24,21 @@ export const ChatMessages: React.FC<ChatMessagesProps> = (props) => {
  }, [scrollAreaRef, messages.length]);

  return (
-    <div className="h-full overflow-auto scroll-smooth" ref={scrollAreaRef}>
-      <div className="mb-4 flex-1 space-y-4">
-        {props.messages.map((message) => {
-          return (
-            <ChatMessageComponent {...{ message, ...props }} key={message.id} />
-          );
-        })}
+    <div className="flex h-full flex-col">
+      <div className="mb-2 font-semibold">Messages</div>
+      <div className="flex-1 overflow-auto scroll-smooth" ref={scrollAreaRef}>
+        <div className="mb-4 flex-1 space-y-3">
+          {props.messages.map((message) => {
+            return (
+              <ChatMessageComponent
+                {...{ message, ...props }}
+                key={message.id}
+              />
+            );
+          })}
+        </div>
+      </div>
+      <div className="py-3">
        <AddMessageButton {...props} />
      </div>
    </div>
@@ -52,10 +60,10 @@ const AddMessageButton: React.FC<AddMessageButtonProps> = ({
    <Button
      type="button" // prevents submitting a form if this button is inside a form
      variant="outline"
-      className="w-full space-x-2 py-6"
+      className="w-full"
      onClick={() => addMessage(nextMessageRole)}
    >
-      <PlusCircleIcon size={16} />
+      <PlusCircleIcon size={14} className="mr-2" />
      <p>Add message</p>
    </Button>
  );
@@ -47,7 +47,7 @@ export const LLMApiKeyComponent = (p: {
      <Label className="text-xs font-semibold">API key</Label>
      <div>
        {apiKey ? (
-          <Link href={`/project/${p.projectId}/settings#llm-api-keys`}>
+          <Link href={`/project/${p.projectId}/settings/api-keys`}>
            <span className="mr-2 rounded-sm bg-input p-1 text-xs">
              {apiKey.displaySecretKey}
            </span>
@@ -60,7 +60,7 @@ export const LLMApiKeyComponent = (p: {
          {`No LLM API key found for provider ${modelProvider}.`}

          <Link
-            href={`/project/${p.projectId}/settings`}
+            href={`/project/${p.projectId}/settings/api-keys`}
            className="flex flex-row"
          >
            Create a new LLM API key here. <ArrowTopRightIcon />
@@ -31,12 +31,15 @@ export type ModelParamsContext = {
  formDisabled?: boolean;
 };

-export const ModelParameters: React.FC<ModelParamsContext> = ({
+export const ModelParameters: React.FC<
+  ModelParamsContext & { evalModelsOnly: boolean }
+> = ({
  modelParams,
  availableProviders,
  availableModels,
  updateModelParamValue,
  setModelParamEnabled,
+  evalModelsOnly,
  formDisabled = false,
 }) => {
  const projectId = useProjectIdFromURL();
@@ -48,11 +51,11 @@ export const ModelParameters: React.FC<ModelParamsContext> = ({
      <p className="font-semibold">Model</p>
      {availableProviders.length === 0 ? (
        <>
-          <p className="text-sm">
-            No LLM API key set in project. For evals, we only support OpenAI so
-            far.
+          <p className="text-xs">
+            No LLM API key set in project.{" "}
+            {evalModelsOnly && "For evals, only OpenAI models are supported."}
          </p>
-          <CreateLLMApiKeyDialog evalModelsOnly={true} />
+          <CreateLLMApiKeyDialog evalModelsOnly={evalModelsOnly} />
        </>
      ) : (
        <div className="space-y-4">
@@ -49,7 +49,7 @@ export const PagedSettingsContainer = ({

  return (
    <main className="flex flex-1 flex-col gap-4 py-4 md:gap-8">
-      <div className="grid w-full items-start gap-4 md:grid-cols-[180px_1fr] lg:grid-cols-[220px_1fr]">
+      <div className="grid w-full items-start gap-4 md:grid-cols-[150px_1fr] lg:grid-cols-[220px_1fr]">
        <nav className="block md:hidden">
          <Select
            onValueChange={(slug) => {
@@ -11,11 +11,11 @@ export const SettingsDangerZone: React.FC<{
  return (
    <div className="space-y-3">
      <Header title="Danger Zone" level="h3" />
-      <div className="rounded border">
+      <div className="rounded-lg border">
        {items.map((item, index) => (
          <div
            key={index}
-            className="flex items-center justify-between gap-4 border-b p-4 last:border-b-0"
+            className="flex items-center justify-between gap-4 border-b p-3 last:border-b-0"
          >
            <div>
              <h4 className="font-semibold">{item.title}</h4>
@@ -2,6 +2,7 @@ import {
  BadgeCheck,
  Github,
  HardDriveDownload,
+  Info,
  Map,
  Newspaper,
 } from "lucide-react";
@@ -20,6 +21,7 @@ import { api } from "@/src/utils/api";
 import { Button } from "@/src/components/ui/button";
 import { useIsEeEnabled } from "@/src/ee/utils/useIsEeEnabled";
 import { env } from "@/src/env.mjs";
+import { cn } from "@/src/utils/tailwind";

 export const VersionLabel = ({ className }: { className?: string }) => {
  const checkUpdate = api.public.checkUpdate.useQuery(undefined, {
@@ -30,6 +32,7 @@ export const VersionLabel = ({ className }: { className?: string }) => {
    onError: (error) => console.error("checkUpdate error", error), // do not render default error message
  });
  const isEeVersion = useIsEeEnabled();
+  const isLangfuseCloud = Boolean(env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION);

  const hasUpdate =
    !env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION &&
@@ -46,8 +49,9 @@ export const VersionLabel = ({ className }: { className?: string }) => {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="xs" className={className}>
+        <Button variant="ghost" size="xs" className={cn("text-xs",className)}>
          {VERSION}
+          {!isLangfuseCloud && (isEeVersion ? " EE" : " OSS")}
          {hasUpdate && <ArrowUp className={`ml-1 h-3 w-3 ${color}`} />}
        </Button>
      </DropdownMenuTrigger>
@@ -96,6 +100,17 @@ export const VersionLabel = ({ className }: { className?: string }) => {
            Roadmap
          </Link>
        </DropdownMenuItem>
+        {!isLangfuseCloud && !isEeVersion && (
+          <DropdownMenuItem asChild>
+            <Link
+              href="https://langfuse.com/docs/deployment/feature-overview"
+              target="_blank"
+            >
+              <Info size={16} className="mr-2" />
+              Compare Versions
+            </Link>
+          </DropdownMenuItem>
+        )}
        {hasUpdate && (
          <>
            <DropdownMenuSeparator />
@@ -9,15 +9,14 @@ import {
 } from "@/src/components/ui/select";

 import {
-  DEFAULT_AGGREGATION_SELECTION,
-  tableDateRangeAggregationSettings,
  dashboardDateRangeAggregationSettings,
  DASHBOARD_AGGREGATION_PLACEHOLDER,
  type DashboardDateRangeOptions,
  type TableDateRangeOptions,
  DASHBOARD_AGGREGATION_OPTIONS,
  type DashboardDateRange,
-  TABLE_RANGE_DROPDOWN_OPTIONS,
+  TABLE_AGGREGATION_OPTIONS,
+  getDateFromOption,
 } from "@/src/utils/date-range-utils";
 import { Clock } from "lucide-react";

@@ -101,24 +100,22 @@ export const TableDateRangeDropdown: React.FC<TableDateRangeDropdownProps> = ({
  setDateRangeAndOption,
 }) => {
  const onDropDownSelection = (value: TableDateRangeOptions) => {
-    if (value === DEFAULT_AGGREGATION_SELECTION) {
-      setDateRangeAndOption(DEFAULT_AGGREGATION_SELECTION, undefined);
-      return;
-    }
-    const setting =
-      tableDateRangeAggregationSettings[
-        value as keyof typeof tableDateRangeAggregationSettings
-      ];
-    setDateRangeAndOption(value, {
-      from: addMinutes(new Date(), -setting),
-      to: new Date(),
+    const dateFromOption = getDateFromOption({
+      filterSource: "TABLE",
+      option: value,
    });
+
+    const initialDateRange = !!dateFromOption
+      ? { from: dateFromOption, to: new Date() }
+      : undefined;
+
+    setDateRangeAndOption(value, initialDateRange);
  };

  return (
    <BaseDateRangeDropdown
      selectedOption={selectedOption}
-      options={TABLE_RANGE_DROPDOWN_OPTIONS}
+      options={TABLE_AGGREGATION_OPTIONS}
      onSelectionChange={onDropDownSelection}
    />
  );
@@ -45,7 +45,7 @@ export function JsonEditor({
        if (onChange) onChange(c);
        setLinterEnabled(c !== "");
      }}
-      className={cn("overflow-hidden rounded-md border", className)}
+      className={cn("overflow-hidden rounded-md border text-xs", className)}
      editable={editable}
    />
  );
@@ -1,8 +1,19 @@
-export const FullScreenPage: React.FC<React.PropsWithChildren<{}>> = ({
-  children,
-}) => {
+import { cn } from "@/src/utils/tailwind";
+
+export const FullScreenPage: React.FC<
+  React.PropsWithChildren<{
+    mobile?: boolean;
+    className?: string;
+  }>
+> = ({ children, mobile = true, className }) => {
  return (
-    <div className="flex h-[calc(100dvh-6rem)] flex-col overflow-hidden lg:h-[calc(100dvh-2rem)]">
+    <div
+      className={cn(
+        "flex flex-col overflow-hidden lg:h-[calc(100dvh-1.5rem)]",
+        mobile && "h-[calc(100dvh-6rem)]",
+        className,
+      )}
+    >
      {children}
    </div>
  );
@@ -212,7 +212,7 @@ const BreadcrumbComponent = ({
                              asChild
                              variant="ghost"
                              size="xs"
-                              className="-my-1 ml-4 mr-1 hover:bg-background"
+                              className="-my-1 ml-4 hover:bg-background"
                            >
                              <div
                                onClick={(e) => {
@@ -299,7 +299,7 @@ const BreadcrumbComponent = ({
                              asChild
                              variant="ghost"
                              size="xs"
-                              className="-my-1 ml-4 mr-1 hover:bg-background"
+                              className="-my-1 ml-4 hover:bg-background"
                            >
                              <div
                                onClick={(e) => {
@@ -118,6 +118,10 @@ export default function Layout(props: PropsWithChildren) {

  const uiCustomization = useUiCustomization();

+  const cloudAdmin =
+    env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION !== undefined &&
+    session.data?.user?.admin === true;
+
  // project info based on projectId in the URL
  const { project, organization } = useQueryProjectOrOrganization();

@@ -134,7 +138,7 @@ export default function Layout(props: PropsWithChildren) {
    if (
      route.featureFlag !== undefined &&
      !enableExperimentalFeatures &&
-      session.data?.user?.admin !== true &&
+      !cloudAdmin &&
      session.data?.user?.featureFlags[route.featureFlag] !== true
    )
      return null;
@@ -143,14 +147,14 @@ export default function Layout(props: PropsWithChildren) {
    if (
      route.entitlement !== undefined &&
      !entitlements.includes(route.entitlement) &&
-      session.data?.user?.admin !== true
+      !cloudAdmin
    )
      return null;

    // RBAC
    if (
      route.projectRbacScope !== undefined &&
-      session.data?.user?.admin !== true &&
+      !cloudAdmin &&
      (!project ||
        !organization ||
        !hasProjectAccess({
@@ -346,7 +350,7 @@ export default function Layout(props: PropsWithChildren) {
        </Transition.Root>

        {/* Static sidebar for desktop */}
-        <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-56 lg:flex-col">
+        <div className="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-52 lg:flex-col">
          {/* Sidebar component, swap this element with another sidebar if you like */}
          <div className="flex h-screen grow flex-col border-r border-border bg-background">
            <nav className="flex h-full flex-1 flex-col overflow-y-auto px-4 py-3">
@@ -418,7 +422,7 @@ export default function Layout(props: PropsWithChildren) {
              >
                <Menu.Items className="absolute -top-full bottom-1 right-0 z-10 overflow-hidden rounded-md bg-background py-2 shadow-lg ring-1 ring-border focus:outline-none">
                  <span
-                    className="block max-w-56 overflow-hidden truncate border-b px-3 pb-2 text-sm leading-6 text-muted-foreground"
+                    className="block max-w-52 overflow-hidden truncate border-b px-3 pb-2 text-sm leading-6 text-muted-foreground"
                    title={session.data?.user?.email ?? undefined}
                  >
                    {session.data?.user?.email}
@@ -486,7 +490,7 @@ export default function Layout(props: PropsWithChildren) {
            >
              <Menu.Items className="absolute right-0 z-10 mt-2.5 rounded-md bg-background py-2 pb-1 shadow-lg ring-1 ring-border focus:outline-none">
                <span
-                  className="mb-1 block max-w-56 overflow-hidden truncate border-b px-3 pb-2 text-sm leading-6 text-muted-foreground"
+                  className="mb-1 block max-w-52 overflow-hidden truncate border-b px-3 pb-2 text-sm leading-6 text-muted-foreground"
                  title={session.data?.user?.email ?? undefined}
                >
                  {session.data?.user?.email}
@@ -511,7 +515,7 @@ export default function Layout(props: PropsWithChildren) {
            </Transition>
          </Menu>
        </div>
-        <div className="lg:pl-56">
+        <div className="lg:pl-52">
          {env.NEXT_PUBLIC_DEMO_ORG_ID &&
          env.NEXT_PUBLIC_DEMO_PROJECT_ID &&
          routerProjectId === env.NEXT_PUBLIC_DEMO_PROJECT_ID &&
@@ -532,7 +536,7 @@ export default function Layout(props: PropsWithChildren) {
              </Button>
            </div>
          ) : null}
-          <main className="p-4">{props.children}</main>
+          <main className="p-3">{props.children}</main>
          <Toaster visibleToasts={1} />
        </div>
      </div>
@@ -634,7 +638,7 @@ const MainNavigation: React.FC<{
                      {item.label && (
                        <span
                          className={cn(
-                            "-my-0.5 self-center whitespace-nowrap break-keep rounded-sm border px-1 py-0.5 text-xs",
+                            "-my-0.5 self-center whitespace-nowrap break-keep rounded-sm border px-1 text-xs",
                            item.current
                              ? "border-primary-accent text-primary-accent"
                              : "border-border text-muted-foreground group-hover:border-primary-accent group-hover:text-primary-accent",
@@ -648,7 +652,7 @@ const MainNavigation: React.FC<{
                          open
                            ? "rotate-90 text-muted-foreground"
                            : "text-muted-foreground",
-                          "ml-auto h-5 w-5 shrink-0",
+                          "ml-auto h-4 w-4 shrink-0",
                        )}
                        aria-hidden="true"
                      />
@@ -663,7 +667,7 @@ const MainNavigation: React.FC<{
                              subItem.current
                                ? "bg-primary-foreground text-primary-accent"
                                : "text-primary hover:bg-primary-foreground hover:text-primary-accent",
-                              "ml-0.5 flex w-full items-center gap-x-3 rounded-md p-1.5 pl-7 pr-2 text-sm",
+                              "ml-0.5 flex w-full items-center gap-x-3 rounded-md p-1 pl-7 pr-2 text-sm",
                            )}
                            target={subItem.newTab ? "_blank" : undefined}
                          >
@@ -39,7 +39,7 @@ export const ROUTES: Route[] = [
    name: "Langfuse",
    pathname: "/",
    icon: LangfuseIcon,
-    label: <VersionLabel />,
+    label: <VersionLabel className="-ml-3" />,
  },
  {
    name: "Projects",
@@ -1,11 +1,43 @@
 import { z } from "zod";

+// OpenAI API Content Schema defined as per https://platform.openai.com/docs/api-reference/chat/create#chat-create-messages, 20.08.2024
+const OpenAITextContentPart = z.object({
+  type: z.literal("text"),
+  text: z.string(),
+});
+
+export const OpenAIUrlImageUrl = z.string().regex(/^https?:/);
+
+const OpenAIBase64ImageUrl = z
+  .string()
+  .regex(/^data:image\/(png|jpeg|jpg|gif|webp);base64,/);
+
+const OpenAIImageContentPart = z.object({
+  type: z.literal("image_url"),
+  image_url: z.object({
+    url: z.union([OpenAIUrlImageUrl, OpenAIBase64ImageUrl]),
+    detail: z.enum(["low", "high", "auto"]).optional(), // Controls how the model processes the image. Defaults to "auto". [https://platform.openai.com/docs/guides/vision/low-or-high-fidelity-image-understanding]
+  }),
+});
+
+export const OpenAIContentParts = z.array(
+  z.union([OpenAITextContentPart, OpenAIImageContentPart]),
+);
+
+export const OpenAIContentSchema = z.union([z.string(), OpenAIContentParts]);
+export type OpenAIContentSchema = z.infer<typeof OpenAIContentSchema>;
+
 export const ChatMlMessageSchema = z
  .object({
    role: z.string().optional(),
    name: z.string().optional(),
    content: z
-      .union([z.record(z.any()), z.string(), z.array(z.any())])
+      .union([
+        z.record(z.any()),
+        z.string(),
+        z.array(z.any()),
+        OpenAIContentSchema,
+      ])
      .nullish(),
    additional_kwargs: z.record(z.any()).optional(),
  })
@@ -21,5 +53,7 @@ export const ChatMlMessageSchema = z
    content,
    json: Object.keys(other).length === 0 ? undefined : other,
  }));
+export type ChatMlMessageSchema = z.infer<typeof ChatMlMessageSchema>;

 export const ChatMlArraySchema = z.array(ChatMlMessageSchema).min(1);
+export type ChatMlArraySchema = z.infer<typeof ChatMlArraySchema>;
@@ -53,10 +53,10 @@ export const SessionPage: React.FC<{
    string[]
  >("emptySelectedConfigIds", []);

-  const commentCounts = api.comments.getCountsByObjectIds.useQuery(
+  const commentCounts = api.comments.getCountByObjectId.useQuery(
    {
      projectId,
-      objectIds: [sessionId],
+      objectId: sessionId,
      objectType: "SESSION",
    },
    { enabled: session.isSuccess },
@@ -13,13 +13,13 @@ export function StarToggle({
  value,
  disabled = false,
  onClick,
-  size = "sm",
+  size = "icon",
  isLoading,
 }: {
  value: boolean;
  disabled?: boolean;
  onClick: (value: boolean) => Promise<unknown>;
-  size?: "sm" | "xs";
+  size?: "icon" | "icon-xs";
  isLoading: boolean;
 }) {
  return (
@@ -40,18 +40,19 @@ export function StarToggle({
  );
 }

+// use by the trace table
 export function StarTraceToggle({
  tracesFilter,
  projectId,
  traceId,
  value,
-  size = "sm",
+  size = "icon",
 }: {
  tracesFilter: RouterInput["traces"]["all"];
  projectId: string;
  traceId: string;
  value: boolean;
-  size?: "sm" | "xs";
+  size?: "icon" | "icon-xs";
 }) {
  const utils = api.useUtils();
  const hasAccess = useHasProjectAccess({
@@ -89,7 +90,6 @@ export function StarTraceToggle({
        tracesFilter,
        (oldQueryData: RouterOutput["traces"]["all"] | undefined) => {
          return {
-            totalCount: oldQueryData?.totalCount,
            traces: oldQueryData?.traces
              ? oldQueryData.traces.map((trace) => {
                  return {
@@ -130,16 +130,17 @@ export function StarTraceToggle({
  );
 }

+// use by the single trace view
 export function StarTraceDetailsToggle({
  projectId,
  traceId,
  value,
-  size = "sm",
+  size = "icon",
 }: {
  projectId: string;
  traceId: string;
  value: boolean;
-  size?: "sm" | "xs";
+  size?: "icon" | "icon-xs";
 }) {
  const utils = api.useUtils();
  const hasAccess = useHasProjectAccess({
@@ -153,12 +154,15 @@ export function StarTraceDetailsToggle({
    onMutate: async () => {
      // Cancel any outgoing refetches
      // (so they don't overwrite our optimistic update)
-      await utils.traces.byId.cancel();
+      await utils.traces.byIdWithObservationsAndScores.cancel();

      setIsLoading(true);

      // Snapshot the previous value
-      const prevData = utils.traces.byId.getData({ traceId, projectId });
+      const prevData = utils.traces.byIdWithObservationsAndScores.getData({
+        traceId,
+        projectId,
+      });

      return { prevData };
    },
@@ -166,14 +170,21 @@ export function StarTraceDetailsToggle({
      setIsLoading(false);
      trpcErrorToast(err);
      // Rollback to the previous value if mutation fails
-      utils.traces.byId.setData({ traceId, projectId }, context?.prevData);
+      utils.traces.byIdWithObservationsAndScores.setData(
+        { traceId, projectId },
+        context?.prevData,
+      );
    },
    onSettled: () => {
      setIsLoading(false);

-      utils.traces.byId.setData(
+      utils.traces.byIdWithObservationsAndScores.setData(
        { traceId, projectId },
-        (oldQueryData: RouterOutput["traces"]["byId"] | undefined) => {
+        (
+          oldQueryData:
+            | RouterOutput["traces"]["byIdWithObservationsAndScores"]
+            | undefined,
+        ) => {
          return oldQueryData
            ? {
                ...oldQueryData,
@@ -182,7 +193,7 @@ export function StarTraceDetailsToggle({
            : undefined;
        },
      );
-      void utils.traces.byId.invalidate();
+      void utils.traces.byIdWithObservationsAndScores.invalidate();
      void utils.traces.all.invalidate();
    },
  });
@@ -212,12 +223,12 @@ export function StarSessionToggle({
  projectId,
  sessionId,
  value,
-  size = "sm",
+  size = "icon",
 }: {
  projectId: string;
  sessionId: string;
  value: boolean;
-  size?: "sm" | "xs";
+  size?: "icon" | "icon-xs";
 }) {
  const utils = api.useUtils();
  const hasAccess = useHasProjectAccess({
@@ -15,6 +15,9 @@ import {
  SelectValue,
 } from "@/src/components/ui/select";
 import { usePostHogClientCapture } from "@/src/features/posthog-analytics/usePostHogClientCapture";
+import { LoaderCircle } from "lucide-react";
+import { Input } from "@/src/components/ui/input";
+import { useEffect, useState } from "react";

 interface DataTablePaginationProps<TData> {
  table: Table<TData>;
@@ -26,6 +29,22 @@ export function DataTablePagination<TData>({
  paginationOptions = [10, 20, 30, 40, 50],
 }: DataTablePaginationProps<TData>) {
  const capture = usePostHogClientCapture();
+
+  const currentPage = table.getState().pagination.pageIndex + 1;
+  const [inputState, setInputState] = useState<number | string>(currentPage);
+
+  useEffect(() => {
+    setInputState(currentPage);
+  }, [currentPage]);
+
+  const pageCount = table.getPageCount();
+  const setPageIndex = table.setPageIndex;
+  useEffect(() => {
+    if (currentPage > pageCount && pageCount > 0) {
+      setPageIndex(0);
+    }
+  }, [currentPage, pageCount, setPageIndex]);
+
  return (
    <div className="flex items-center justify-between">
      <div className="flex-1 text-sm text-muted-foreground">
@@ -61,10 +80,60 @@ export function DataTablePagination<TData>({
            </SelectContent>
          </Select>
        </div>
-        <div className="flex items-center justify-center whitespace-nowrap text-sm font-medium">
-          Page {table.getState().pagination.pageIndex + 1} of{" "}
-          {Math.max(table.getPageCount(), 1)}
+        <div className="flex items-center justify-center gap-1 whitespace-nowrap text-sm font-medium">
+          {table.getPageCount() !== -1 ? (
+            <>
+              Page
+              <Input
+                type="number"
+                min={1}
+                max={pageCount}
+                value={inputState} // Ensure the value is within bounds
+                onChange={(e) => {
+                  setInputState(e.target.value);
+                }}
+                onBlur={(e) => {
+                  const newValue = e.target.value;
+                  if (newValue === "") {
+                    table.setPageIndex(0);
+                    setInputState(1);
+                    return;
+                  }
+
+                  // if nan, reset to current page
+                  if (isNaN(Number(newValue))) {
+                    setInputState(currentPage);
+                    return;
+                  }
+
+                  const newPageIndex = Number(newValue) - 1;
+                  if (newPageIndex < 0 || newPageIndex >= pageCount) {
+                    setInputState(currentPage);
+                    return;
+                  }
+
+                  table.setPageIndex(newPageIndex);
+                  setInputState(newPageIndex + 1);
+                }}
+                className="h-8 appearance-none"
+                style={{
+                  width: `${3 + Math.max(1, pageCount.toString().length)}ch`,
+                }}
+              />
+            </>
+          ) : (
+            `Page ${currentPage}`
+          )}
+          {pageCount !== -1 ? (
+            <span>of {pageCount}</span>
+          ) : (
+            <span>
+              of{" "}
+              <LoaderCircle className="ml-1 inline-block h-3 w-3 animate-spin text-muted-foreground" />
+            </span>
+          )}
        </div>
+
        <div className="flex items-center space-x-2">
          <Button
            variant="outline"
@@ -112,12 +181,12 @@ export function DataTablePagination<TData>({
            variant="outline"
            className="hidden h-8 w-8 p-0 lg:flex"
            onClick={() => {
-              table.setPageIndex(table.getPageCount() - 1);
+              table.setPageIndex(pageCount - 1);
              capture("table:pagination_button_click", {
                type: "lastPage",
              });
            }}
-            disabled={!table.getCanNextPage()}
+            disabled={!table.getCanNextPage() || pageCount === -1}
          >
            <span className="sr-only">Go to last page</span>
            <DoubleArrowRightIcon className="h-4 w-4" />
@@ -31,7 +31,9 @@ interface DataTableToolbarProps<TData, TValue> {
  searchConfig?: SearchConfig;
  actionButtons?: React.ReactNode;
  filterState?: FilterState;
-  setFilterState?: Dispatch<SetStateAction<FilterState>>;
+  setFilterState?:
+    | Dispatch<SetStateAction<FilterState>>
+    | ((newState: FilterState) => void);
  columnVisibility?: VisibilityState;
  setColumnVisibility?: Dispatch<SetStateAction<VisibilityState>>;
  rowHeight?: RowHeight;
@@ -79,7 +81,7 @@ export function DataTableToolbar<TData, TValue>({
                searchConfig.updateQuery(searchString);
              }
            }}
-            className="h-10 w-[150px] rounded-r-none @6xl:w-[250px]"
+            className="w-[150px] rounded-r-none @6xl:w-[250px]"
          />
          <Button
            variant="outline"
@@ -36,7 +36,7 @@ interface DataTableProps<TData, TValue> {
  columns: LangfuseColumnDef<TData, TValue>[];
  data: AsyncTableData<TData[]>;
  pagination?: {
-    pageCount: number;
+    totalCount: number | null; // null if loading
    onChange: OnChangeFn<PaginationState>;
    state: PaginationState;
    options?: number[];
@@ -90,7 +90,13 @@ export function DataTable<TData extends object, TValue>({
    getFilteredRowModel: getFilteredRowModel(),
    getCoreRowModel: getCoreRowModel(),
    manualPagination: pagination !== undefined,
-    pageCount: pagination?.pageCount ?? 0,
+    pageCount:
+      pagination?.totalCount === null ||
+      pagination?.state.pageSize === undefined
+        ? -1
+        : Math.ceil(
+            Number(pagination?.totalCount) / pagination?.state.pageSize,
+          ),
    onPaginationChange: pagination?.onChange,
    onRowSelectionChange: setRowSelection,
    onColumnVisibilityChange: onColumnVisibilityChange,
@@ -17,7 +17,7 @@ export default function TableLink({
  return (
    <Link
      className={cn(
-        "inline-block max-w-full overflow-hidden text-ellipsis text-nowrap rounded bg-primary-accent/20 px-2 py-1 text-xs font-semibold text-accent-dark-blue shadow-sm hover:bg-accent-light-blue/45",
+        "inline-block max-w-full overflow-hidden text-ellipsis text-nowrap rounded bg-primary-accent/20 px-2 py-0.5 text-xs font-semibold text-accent-dark-blue shadow-sm hover:bg-accent-light-blue/45",
        className,
      )}
      href={path}
@@ -49,6 +49,7 @@ import { useTableDateRange } from "@/src/hooks/useTableDateRange";
 import { useDebounce } from "@/src/hooks/useDebounce";
 import { type ScoreAggregate } from "@/src/features/scores/lib/types";
 import { useIndividualScoreColumns } from "@/src/features/scores/hooks/useIndividualScoreColumns";
+import TagList from "@/src/features/tag/components/TagList";

 export type GenerationsTableRow = {
  id: string;
@@ -80,6 +81,7 @@ export type GenerationsTableRow = {
  promptId?: string;
  promptName?: string;
  promptVersion?: string;
+  traceTags?: string[];
 };

 export type GenerationsTableProps = {
@@ -113,11 +115,12 @@ export default function GenerationsTable({
  );

  const { selectedOption, dateRange, setDateRangeAndOption } =
-    useTableDateRange();
+    useTableDateRange(projectId);

  const [inputFilterState, setInputFilterState] = useQueryFilterState(
    [],
    "generations",
+    projectId,
  );

  const [orderByState, setOrderByState] = useOrderByState({
@@ -164,16 +167,26 @@ export default function GenerationsTable({
    ...promptVersionFilter,
  ]);

-  const generations = api.generations.all.useQuery({
-    page: paginationState.pageIndex,
-    limit: paginationState.pageSize,
+  const getCountPayload = {
    projectId,
    filter: filterState,
-    orderBy: orderByState,
    searchQuery,
-  });
+    page: 0,
+    limit: 0,
+    orderBy: null,
+  };

-  const totalCount = generations.data?.totalCount ?? 0;
+  const getAllPayload = {
+    ...getCountPayload,
+    page: paginationState.pageIndex,
+    limit: paginationState.pageSize,
+    orderBy: orderByState,
+  };
+
+  const generations = api.generations.all.useQuery(getAllPayload);
+  const totalCountQuery = api.generations.countAll.useQuery(getCountPayload);
+
+  const totalCount = totalCountQuery.data?.totalCount ?? null;

  const startTimeFilter = filterState.find((f) => f.column === "Start Time");
  const filterOptions = api.generations.filterOptions.useQuery(
@@ -653,6 +666,30 @@ export default function GenerationsTable({
        );
      },
    },
+    {
+      accessorKey: "traceTags",
+      id: "traceTags",
+      header: "Trace Tags",
+      size: 250,
+      enableHiding: true,
+      defaultHidden: true,
+      cell: ({ row }) => {
+        const traceTags: string[] | undefined = row.getValue("traceTags");
+        console.log(traceTags);
+        return (
+          traceTags && (
+            <div
+              className={cn(
+                "flex gap-x-2 gap-y-1",
+                rowHeight !== "s" && "flex-wrap",
+              )}
+            >
+              <TagList selectedTags={traceTags} isLoading={false} viewOnly />
+            </div>
+          )
+        );
+      },
+    },
  ];

  const [columnVisibility, setColumnVisibilityState] =
@@ -692,6 +729,7 @@ export default function GenerationsTable({
            promptId: generation.promptId ?? undefined,
            promptName: generation.promptName ?? undefined,
            promptVersion: generation.promptVersion ?? undefined,
+            traceTags: generation.traceTags ?? undefined,
          };
        })
      : [];
@@ -709,6 +747,7 @@ export default function GenerationsTable({
          updateQuery: setSearchQuery,
          currentQuery: searchQuery ?? undefined,
        }}
+        columnsWithCustomSelect={["model", "name", "traceName", "promptName"]}
        columnVisibility={columnVisibility}
        setColumnVisibility={setColumnVisibilityState}
        rowHeight={rowHeight}
@@ -766,7 +805,7 @@ export default function GenerationsTable({
                }
        }
        pagination={{
-          pageCount: Math.ceil(totalCount / paginationState.pageSize),
+          totalCount,
          onChange: setPaginationState,
          state: paginationState,
        }}
@@ -63,7 +63,7 @@ export default function ModelTable({ projectId }: { projectId: string }) {
    limit: paginationState.pageSize,
    projectId,
  });
-  const totalCount = models.data?.totalCount ?? 0;
+  const totalCount = models.data?.totalCount ?? null;

  const [rowHeight, setRowHeight] = useRowHeightLocalStorage("models", "s");

@@ -303,7 +303,7 @@ export default function ModelTable({ projectId }: { projectId: string }) {
                }
        }
        pagination={{
-          pageCount: Math.ceil(totalCount / paginationState.pageSize),
+          totalCount,
          onChange: setPaginationState,
          state: paginationState,
        }}
@@ -97,7 +97,7 @@ export function ScoreConfigsTable({ projectId }: { projectId: string }) {
    limit: paginationState.pageSize,
  });

-  const totalCount = configs.data?.totalCount ?? 0;
+  const totalCount = configs.data?.totalCount ?? null;

  const columns: LangfuseColumnDef<ScoreConfigTableRow>[] = [
    {
@@ -272,7 +272,7 @@ export function ScoreConfigsTable({ projectId }: { projectId: string }) {
                  }
          }
          pagination={{
-            pageCount: Math.ceil(totalCount / paginationState.pageSize),
+            totalCount,
            onChange: setPaginationState,
            state: paginationState,
          }}
@@ -24,6 +24,8 @@ import {
  type ScoreDataType,
 } from "@langfuse/shared";
 import { useQueryParams, withDefault, NumberParam } from "use-query-params";
+import TagList from "@/src/features/tag/components/TagList";
+import { cn } from "@/src/utils/tailwind";

 export type ScoresTableRow = {
  id: string;
@@ -43,6 +45,7 @@ export type ScoresTableRow = {
  traceName?: string;
  userId?: string;
  jobConfigurationId?: string;
+  traceTags?: string[];
 };

 export type ScoreFilterInput = Omit<
@@ -90,11 +93,12 @@ export default function ScoresTable({

  const [rowHeight, setRowHeight] = useRowHeightLocalStorage("scores", "s");
  const { selectedOption, dateRange, setDateRangeAndOption } =
-    useTableDateRange();
+    useTableDateRange(projectId);

  const [userFilterState, setUserFilterState] = useQueryFilterState(
    [],
    "scores",
+    projectId,
  );

  const dateRangeFilter: FilterState = dateRange
@@ -120,18 +124,32 @@ export default function ScoresTable({
    order: "DESC",
  });

-  const scores = api.scores.all.useQuery({
-    page: paginationState.pageIndex,
-    limit: paginationState.pageSize,
+  const getCountPayload = {
    projectId,
    filter: filterState,
+    page: 0,
+    limit: 1,
+    orderBy: null,
+  };
+
+  const getAllPayload = {
+    ...getCountPayload,
+    page: paginationState.pageIndex,
+    limit: paginationState.pageSize,
    orderBy: orderByState,
-  });
-  const totalCount = scores.data?.totalCount ?? 0;
+  };
+
+  const scores = api.scores.all.useQuery(getAllPayload);
+  const totalScoreCountQuery = api.scores.countAll.useQuery(getCountPayload);
+  const totalCount = totalScoreCountQuery.data?.totalCount ?? null;

  const filterOptions = api.scores.filterOptions.useQuery(
    {
      projectId,
+      timestampFilter:
+        dateRangeFilter[0]?.type === "datetime"
+          ? dateRangeFilter[0]
+          : undefined,
    },
    {
      trpc: {
@@ -323,6 +341,29 @@ export default function ScoresTable({
        ) : undefined;
      },
    },
+    {
+      accessorKey: "traceTags",
+      id: "traceTags",
+      header: "Trace Tags",
+      size: 250,
+      enableHiding: true,
+      defaultHidden: true,
+      cell: ({ row }) => {
+        const traceTags: string[] | undefined = row.getValue("traceTags");
+        return (
+          traceTags && (
+            <div
+              className={cn(
+                "flex gap-x-2 gap-y-1",
+                rowHeight !== "s" && "flex-wrap",
+              )}
+            >
+              <TagList selectedTags={traceTags} isLoading={false} viewOnly />
+            </div>
+          )
+        );
+      },
+    },
  ];

  const columns = rawColumns.filter(
@@ -358,6 +399,7 @@ export default function ScoresTable({
      traceName: score.traceName ?? undefined,
      userId: score.traceUserId ?? undefined,
      jobConfigurationId: score.jobConfigurationId ?? undefined,
+      traceTags: score.traceTags ?? undefined,
    };
  };

@@ -401,7 +443,7 @@ export default function ScoresTable({
                }
        }
        pagination={{
-          pageCount: Math.ceil(totalCount / paginationState.pageSize),
+          totalCount,
          onChange: setPaginationState,
          state: paginationState,
        }}
@@ -23,20 +23,26 @@ import { NumberParam, useQueryParams, withDefault } from "use-query-params";
 import { BatchExportTableButton } from "@/src/components/BatchExportTableButton";
 import { useTableDateRange } from "@/src/hooks/useTableDateRange";
 import { useDebounce } from "@/src/hooks/useDebounce";
+import { joinTableCoreAndMetrics } from "@/src/components/table/utils/joinTableCoreAndMetrics";
+import { Skeleton } from "@/src/components/ui/skeleton";
+import TagList from "@/src/features/tag/components/TagList";
+import { useRowHeightLocalStorage } from "@/src/components/table/data-table-row-height-switch";
+import { cn } from "@/src/utils/tailwind";

 export type SessionTableRow = {
  id: string;
  createdAt: string;
-  userIds: string[];
-  countTraces: number;
  bookmarked: boolean;
-  sessionDuration: number | null;
-  inputCost: Decimal;
-  outputCost: Decimal;
-  totalCost: Decimal;
-  inputTokens: number;
-  outputTokens: number;
-  totalTokens: number;
+  userIds: string[] | undefined;
+  countTraces: number | undefined;
+  sessionDuration: number | null | undefined;
+  inputCost: Decimal | undefined;
+  outputCost: Decimal | undefined;
+  totalCost: Decimal | undefined;
+  inputTokens: number | undefined;
+  outputTokens: number | undefined;
+  totalTokens: number | undefined;
+  traceTags: string[] | undefined;
 };

 export type SessionTableProps = {
@@ -52,11 +58,12 @@ export default function SessionsTable({
 }: SessionTableProps) {
  const { setDetailPageList } = useDetailPageLists();
  const { selectedOption, dateRange, setDateRangeAndOption } =
-    useTableDateRange();
+    useTableDateRange(projectId);

  const [userFilterState, setUserFilterState] = useQueryFilterState(
    [],
    "sessions",
+    projectId,
  );

  const userIdFilter: FilterState = userId
@@ -88,22 +95,56 @@ export default function SessionsTable({
    pageSize: withDefault(NumberParam, 50),
  });

+  const [rowHeight, setRowHeight] = useRowHeightLocalStorage("sessions", "s");
+
  const [orderByState, setOrderByState] = useOrderByState({
    column: "createdAt",
    order: "DESC",
  });

-  const sessions = api.sessions.all.useQuery({
-    page: paginationState.pageIndex,
-    limit: paginationState.pageSize,
+  const payloadCount = {
    projectId,
    filter: filterState,
+    orderBy: null,
+    page: 0,
+    limit: 1,
+  };
+
+  const payloadGetAll = {
+    ...payloadCount,
    orderBy: orderByState,
-  });
+    page: paginationState.pageIndex,
+    limit: paginationState.pageSize,
+  };
+
+  const sessions = api.sessions.all.useQuery(payloadGetAll);
+  const sessionCountQuery = api.sessions.countAll.useQuery(payloadCount);
+
+  const sessionMetrics = api.sessions.metrics.useQuery(
+    {
+      projectId,
+      sessionIds: sessions.data?.sessions.map((s) => s.id) ?? [],
+    },
+    {
+      enabled: sessions.data !== undefined,
+    },
+  );
+
+  type SessionCoreOutput = RouterOutput["sessions"]["all"]["sessions"][number];
+  type SessionMetricOutput = RouterOutput["sessions"]["metrics"][number];
+
+  const sessionRowData = joinTableCoreAndMetrics<
+    SessionCoreOutput,
+    SessionMetricOutput
+  >(sessions.data?.sessions, sessionMetrics.data);

  const filterOptions = api.sessions.filterOptions.useQuery(
    {
      projectId,
+      timestampFilter:
+        dateRangeFilter[0]?.type === "datetime"
+          ? dateRangeFilter[0]
+          : undefined,
    },
    {
      trpc: {
@@ -114,36 +155,17 @@ export default function SessionsTable({
    },
  );

-  const totalCount = sessions.data?.slice(1)[0]?.totalCount ?? 0;
+  const totalCount = sessionCountQuery.data?.totalCount ?? null;
  useEffect(() => {
    if (sessions.isSuccess) {
      setDetailPageList(
        "sessions",
-        sessions.data.map((t) => t.id),
+        sessions.data.sessions.map((t) => t.id),
      );
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [sessions.isSuccess, sessions.data]);

-  const convertToTableRow = (
-    session: RouterOutput["sessions"]["all"][0],
-  ): SessionTableRow => {
-    return {
-      id: session.id,
-      createdAt: session.createdAt.toLocaleString(),
-      userIds: session.userIds,
-      countTraces: session.countTraces,
-      bookmarked: session.bookmarked,
-      sessionDuration: session.sessionDuration,
-      inputCost: session.inputCost,
-      outputCost: session.outputCost,
-      totalCost: session.totalCost,
-      inputTokens: session.promptTokens,
-      outputTokens: session.completionTokens,
-      totalTokens: session.totalTokens,
-    };
-  };
-
  const columns: LangfuseColumnDef<SessionTableRow>[] = [
    {
      accessorKey: "bookmarked",
@@ -151,8 +173,9 @@ export default function SessionsTable({
      header: undefined,
      size: 50,
      cell: ({ row }) => {
-        const bookmarked = row.getValue("bookmarked");
-        const sessionId = row.getValue("id");
+        const bookmarked: SessionTableRow["bookmarked"] =
+          row.getValue("bookmarked");
+        const sessionId: SessionTableRow["id"] = row.getValue("id");

        return typeof sessionId === "string" &&
          typeof bookmarked === "boolean" ? (
@@ -160,7 +183,7 @@ export default function SessionsTable({
            sessionId={sessionId}
            projectId={projectId}
            value={bookmarked}
-            size="xs"
+            size="icon-xs"
          />
        ) : undefined;
      },
@@ -172,7 +195,7 @@ export default function SessionsTable({
      header: "ID",
      size: 200,
      cell: ({ row }) => {
-        const value = row.getValue("id");
+        const value: SessionTableRow["id"] = row.getValue("id");
        return value && typeof value === "string" ? (
          <TableLink
            path={`/project/${projectId}/sessions/${encodeURIComponent(value)}`}
@@ -197,7 +220,11 @@ export default function SessionsTable({
      size: 130,
      enableHiding: true,
      cell: ({ row }) => {
-        const value = row.getValue("sessionDuration");
+        const value: SessionTableRow["sessionDuration"] =
+          row.getValue("sessionDuration");
+        if (!sessionMetrics.isSuccess) {
+          return <Skeleton className="h-3 w-1/2" />;
+        }
        return value && typeof value === "number"
          ? formatIntervalSeconds(value)
          : undefined;
@@ -212,7 +239,10 @@ export default function SessionsTable({
      size: 200,
      enableHiding: true,
      cell: ({ row }) => {
-        const value = row.getValue("userIds");
+        const value: SessionTableRow["userIds"] = row.getValue("userIds");
+        if (!sessionMetrics.isSuccess) {
+          return <Skeleton className="h-3 w-1/2" />;
+        }
        return value && Array.isArray(value) ? (
          <div className="flex gap-1">
            {(value as string[]).map((user) => (
@@ -236,6 +266,14 @@ export default function SessionsTable({
      },
      enableHiding: true,
      enableSorting: true,
+      cell: ({ row }) => {
+        const value: SessionTableRow["countTraces"] =
+          row.getValue("countTraces");
+        if (!sessionMetrics.isSuccess) {
+          return <Skeleton className="h-3 w-1/2" />;
+        }
+        return value ? <span>{numberFormatter(value, 0)}</span> : undefined;
+      },
    },
    {
      accessorKey: "inputCost",
@@ -246,7 +284,10 @@ export default function SessionsTable({
      defaultHidden: true,
      enableSorting: true,
      cell: ({ row }) => {
-        const value: Decimal | null | undefined = row.getValue("inputCost");
+        const value: SessionTableRow["inputCost"] = row.getValue("inputCost");
+        if (!sessionMetrics.isSuccess) {
+          return <Skeleton className="h-3 w-1/2" />;
+        }
        return value ? (
          <span>{usdFormatter(value.toNumber())}</span>
        ) : undefined;
@@ -261,8 +302,10 @@ export default function SessionsTable({
      enableSorting: true,
      defaultHidden: true,
      cell: ({ row }) => {
-        const value: Decimal | null | undefined = row.getValue("outputCost");
-
+        const value: SessionTableRow["outputCost"] = row.getValue("outputCost");
+        if (!sessionMetrics.isSuccess) {
+          return <Skeleton className="h-3 w-1/2" />;
+        }
        return value ? (
          <span>{usdFormatter(value.toNumber())}</span>
        ) : undefined;
@@ -276,8 +319,10 @@ export default function SessionsTable({
      enableHiding: true,
      enableSorting: true,
      cell: ({ row }) => {
-        const value: Decimal | null | undefined = row.getValue("totalCost");
-
+        const value: SessionTableRow["totalCost"] = row.getValue("totalCost");
+        if (!sessionMetrics.isSuccess) {
+          return <Skeleton className="h-3 w-1/2" />;
+        }
        return value ? (
          <span>{usdFormatter(value.toNumber())}</span>
        ) : undefined;
@@ -292,8 +337,11 @@ export default function SessionsTable({
      defaultHidden: true,
      enableSorting: true,
      cell: ({ row }) => {
-        const value: number | undefined = row.getValue("inputTokens");
-
+        const value: SessionTableRow["inputTokens"] =
+          row.getValue("inputTokens");
+        if (!sessionMetrics.isSuccess) {
+          return <Skeleton className="h-3 w-1/2" />;
+        }
        return value ? (
          <span>{numberFormatter(Number(value), 0)}</span>
        ) : undefined;
@@ -308,8 +356,11 @@ export default function SessionsTable({
      defaultHidden: true,
      enableSorting: true,
      cell: ({ row }) => {
-        const value = row.getValue("outputTokens");
-
+        const value: SessionTableRow["outputTokens"] =
+          row.getValue("outputTokens");
+        if (!sessionMetrics.isSuccess) {
+          return <Skeleton className="h-3 w-1/2" />;
+        }
        return value ? (
          <span>{numberFormatter(Number(value), 0)}</span>
        ) : undefined;
@@ -324,7 +375,11 @@ export default function SessionsTable({
      defaultHidden: true,
      enableSorting: true,
      cell: ({ row }) => {
-        const value = row.getValue("totalTokens");
+        const value: SessionTableRow["totalTokens"] =
+          row.getValue("totalTokens");
+        if (!sessionMetrics.isSuccess) {
+          return <Skeleton className="h-3 w-1/2" />;
+        }
        return value ? (
          <span>{numberFormatter(Number(value), 0)}</span>
        ) : undefined;
@@ -338,9 +393,15 @@ export default function SessionsTable({
      enableHiding: true,
      enableSorting: true,
      cell: ({ row }) => {
-        const promptTokens = row.getValue("inputTokens");
-        const completionTokens = row.getValue("outputTokens");
-        const totalTokens = row.getValue("totalTokens");
+        const promptTokens: SessionTableRow["inputTokens"] =
+          row.getValue("inputTokens");
+        const completionTokens: SessionTableRow["outputTokens"] =
+          row.getValue("outputTokens");
+        const totalTokens: SessionTableRow["totalTokens"] =
+          row.getValue("totalTokens");
+        if (!sessionMetrics.isSuccess) {
+          return <Skeleton className="h-3 w-1/2" />;
+        }
        return (
          <TokenUsageBadge
            promptTokens={Number(promptTokens)}
@@ -351,6 +412,32 @@ export default function SessionsTable({
        );
      },
    },
+    {
+      accessorKey: "traceTags",
+      id: "traceTags",
+      header: "Trace Tags",
+      size: 250,
+      enableHiding: true,
+      defaultHidden: true,
+      cell: ({ row }) => {
+        const value: SessionTableRow["traceTags"] = row.getValue("traceTags");
+        if (!sessionMetrics.isSuccess) {
+          return <Skeleton className="h-3 w-1/2" />;
+        }
+        return (
+          value && (
+            <div
+              className={cn(
+                "flex gap-x-2 gap-y-1",
+                rowHeight !== "s" && "flex-wrap",
+              )}
+            >
+              <TagList selectedTags={value} isLoading={false} viewOnly />
+            </div>
+          )
+        );
+      },
+    },
  ];

  const transformFilterOptions = () => {
@@ -381,6 +468,8 @@ export default function SessionsTable({
        selectedOption={selectedOption}
        setDateRangeAndOption={setDateRangeAndOption}
        columnsWithCustomSelect={["userIds"]}
+        rowHeight={rowHeight}
+        setRowHeight={setRowHeight}
      />
      <DataTable
        columns={columns}
@@ -396,11 +485,25 @@ export default function SessionsTable({
              : {
                  isLoading: false,
                  isError: false,
-                  data: sessions.data.map((t) => convertToTableRow(t)),
+                  data: sessionRowData.rows?.map((session) => ({
+                    id: session.id,
+                    createdAt: session.createdAt.toLocaleString(),
+                    userIds: session.userIds,
+                    countTraces: session.countTraces,
+                    bookmarked: session.bookmarked,
+                    sessionDuration: session.sessionDuration,
+                    inputCost: session.inputCost,
+                    outputCost: session.outputCost,
+                    totalCost: session.totalCost,
+                    inputTokens: session.promptTokens,
+                    outputTokens: session.completionTokens,
+                    totalTokens: session.totalTokens,
+                    traceTags: session.traceTags,
+                  })),
                }
        }
        pagination={{
-          pageCount: Math.ceil(totalCount / paginationState.pageSize),
+          totalCount,
          onChange: setPaginationState,
          state: paginationState,
        }}
@@ -413,6 +516,7 @@ export default function SessionsTable({
            "A session is a collection of related traces, such as a conversation or thread. To begin, add a sessionId to the trace.",
          href: "https://langfuse.com/docs/tracing-features/sessions",
        }}
+        rowHeight={rowHeight}
      />
    </>
  );
@@ -11,7 +11,7 @@ import useColumnVisibility from "@/src/features/column-visibility/hooks/useColum
 import { useQueryFilterState } from "@/src/features/filters/hooks/useFilterState";
 import { api } from "@/src/utils/api";
 import { formatIntervalSeconds } from "@/src/utils/dates";
-import { type RouterInput } from "@/src/utils/types";
+import { type RouterOutput, type RouterInput } from "@/src/utils/types";
 import { type RowSelectionState } from "@tanstack/react-table";
 import { useEffect, useMemo, useState } from "react";
 import {
@@ -44,6 +44,8 @@ import { useTableDateRange } from "@/src/hooks/useTableDateRange";
 import { useDebounce } from "@/src/hooks/useDebounce";
 import { type ScoreAggregate } from "@/src/features/scores/lib/types";
 import { useIndividualScoreColumns } from "@/src/features/scores/hooks/useIndividualScoreColumns";
+import { joinTableCoreAndMetrics } from "@/src/components/table/utils/joinTableCoreAndMetrics";
+import { Skeleton } from "@/src/components/ui/skeleton";

 export type TracesTableRow = {
  bookmarked: boolean;
@@ -51,10 +53,10 @@ export type TracesTableRow = {
  timestamp: string;
  name: string;
  userId: string;
-  level: ObservationLevel;
-  observationCount: number;
+  level?: ObservationLevel;
+  observationCount?: number;
  // scores holds grouped column with individual scores
-  scores: ScoreAggregate;
+  scores?: ScoreAggregate;
  latency?: number;
  release?: string;
  version?: string;
@@ -65,9 +67,9 @@ export type TracesTableRow = {
  metadata?: unknown;
  tags: string[];
  usage: {
-    promptTokens: bigint;
-    completionTokens: bigint;
-    totalTokens: bigint;
+    promptTokens?: bigint;
+    completionTokens?: bigint;
+    totalTokens?: bigint;
  };
  inputCost?: Decimal;
  outputCost?: Decimal;
@@ -96,10 +98,11 @@ export default function TracesTable({
  );

  const { selectedOption, dateRange, setDateRangeAndOption } =
-    useTableDateRange();
+    useTableDateRange(projectId);
  const [userFilterState, setUserFilterState] = useQueryFilterState(
    [],
    "traces",
+    projectId,
  );
  const [orderByState, setOrderByState] = useOrderByState({
    column: "timestamp",
@@ -133,17 +136,44 @@ export default function TracesTable({
    pageSize: withDefault(NumberParam, 50),
  });

-  const tracesAllQueryFilter = {
-    page: paginationState.pageIndex,
-    limit: paginationState.pageSize,
+  const tracesAllCountFilter = {
    projectId,
    filter: filterState,
    searchQuery,
+    // "empty" values as they do not matter for total count
+    page: 0,
+    limit: 0,
+    orderBy: null,
+  };
+
+  const tracesAllQueryFilter = {
+    ...tracesAllCountFilter,
+    page: paginationState.pageIndex,
+    limit: paginationState.pageSize,
    orderBy: orderByState,
  };
  const traces = api.traces.all.useQuery(tracesAllQueryFilter);
+  const totalCountQuery = api.traces.countAll.useQuery(tracesAllCountFilter);
+  const traceMetrics = api.traces.metrics.useQuery(
+    {
+      projectId,
+      traceIds: traces.data?.traces.map((t) => t.id) ?? [],
+    },
+    {
+      enabled: traces.data !== undefined,
+    },
+  );
+
+  type TracesCoreOutput = RouterOutput["traces"]["all"]["traces"][number];
+  type TraceMetricOutput = RouterOutput["traces"]["metrics"][number];
+
+  const traceRowData = joinTableCoreAndMetrics<
+    TracesCoreOutput,
+    TraceMetricOutput
+  >(traces.data?.traces, traceMetrics.data);
+
+  const totalCount = totalCountQuery.data?.totalCount ?? null;

-  const totalCount = traces.data?.totalCount ?? 0;
  useEffect(() => {
    if (traces.isSuccess) {
      setDetailPageList(
@@ -188,6 +218,7 @@ export default function TracesTable({
      projectId,
      scoreColumnKey: "scores",
      selectedFilterOption: selectedOption,
+      cellsLoading: !traceMetrics.data,
    });

  const columns: LangfuseColumnDef<TracesTableRow>[] = [
@@ -239,7 +270,7 @@ export default function TracesTable({
            traceId={traceId}
            projectId={projectId}
            value={bookmarked}
-            size="xs"
+            size="icon-xs"
          />
        ) : undefined;
      },
@@ -328,6 +359,7 @@ export default function TracesTable({
      // add seconds to the end of the latency
      cell: ({ row }) => {
        const value: TracesTableRow["latency"] = row.getValue("latency");
+        if (!traceMetrics.data) return <Skeleton className="h-3 w-1/2" />;
        return value !== undefined ? formatIntervalSeconds(value) : undefined;
      },
      enableHiding: true,
@@ -340,6 +372,7 @@ export default function TracesTable({
      size: 110,
      cell: ({ row }) => {
        const value: TracesTableRow["usage"] = row.getValue("usage");
+        if (!traceMetrics.data) return <Skeleton className="h-3 w-1/2" />;
        return <span>{numberFormatter(value.promptTokens, 0)}</span>;
      },
      enableHiding: true,
@@ -353,6 +386,7 @@ export default function TracesTable({
      size: 110,
      cell: ({ row }) => {
        const value: TracesTableRow["usage"] = row.getValue("usage");
+        if (!traceMetrics.data) return <Skeleton className="h-3 w-1/2" />;
        return <span>{numberFormatter(value.completionTokens, 0)}</span>;
      },
      enableHiding: true,
@@ -366,6 +400,7 @@ export default function TracesTable({
      size: 110,
      cell: ({ row }) => {
        const value: TracesTableRow["usage"] = row.getValue("usage");
+        if (!traceMetrics.data) return <Skeleton className="h-3 w-1/2" />;
        return <span>{numberFormatter(value.totalTokens, 0)}</span>;
      },
      enableHiding: true,
@@ -379,11 +414,12 @@ export default function TracesTable({
      size: 220,
      cell: ({ row }) => {
        const value: TracesTableRow["usage"] = row.getValue("usage");
+        if (!traceMetrics.data) return <Skeleton className="h-3 w-1/2" />;
        return (
          <TokenUsageBadge
-            promptTokens={value.promptTokens}
-            completionTokens={value.completionTokens}
-            totalTokens={value.totalTokens}
+            promptTokens={value.promptTokens ?? 0}
+            completionTokens={value.completionTokens ?? 0}
+            totalTokens={value.totalTokens ?? 0}
            inline
          />
        );
@@ -391,7 +427,10 @@ export default function TracesTable({
      enableSorting: true,
      enableHiding: true,
    },
-    { ...getScoreGroupColumnProps(isColumnLoading), columns: scoreColumns },
+    {
+      ...getScoreGroupColumnProps(isColumnLoading || !traceMetrics.data),
+      columns: scoreColumns,
+    },
    {
      accessorKey: "inputCost",
      id: "inputCost",
@@ -399,6 +438,7 @@ export default function TracesTable({
      size: 100,
      cell: ({ row }) => {
        const cost: TracesTableRow["inputCost"] = row.getValue("inputCost");
+        if (!traceMetrics.data) return <Skeleton className="h-3 w-1/2" />;
        return (
          <div>
            {cost ? (
@@ -420,6 +460,7 @@ export default function TracesTable({
      size: 100,
      cell: ({ row }) => {
        const cost: TracesTableRow["outputCost"] = row.getValue("outputCost");
+        if (!traceMetrics.data) return <Skeleton className="h-3 w-1/2" />;
        return (
          <div>
            {cost ? (
@@ -441,6 +482,7 @@ export default function TracesTable({
      size: 100,
      cell: ({ row }) => {
        const cost: TracesTableRow["totalCost"] = row.getValue("totalCost");
+        if (!traceMetrics.data) return <Skeleton className="h-3 w-1/2" />;
        return (
          <div>
            {cost ? (
@@ -521,7 +563,8 @@ export default function TracesTable({
      size: 75,
      cell: ({ row }) => {
        const value: TracesTableRow["level"] = row.getValue("level");
-        return (
+        if (!traceMetrics.data) return <Skeleton className="h-3 w-1/2" />;
+        return value ? (
          <span
            className={cn(
              "rounded-sm p-0.5 text-xs",
@@ -531,6 +574,8 @@ export default function TracesTable({
          >
            {value}
          </span>
+        ) : (
+          <span>-</span>
        );
      },
      enableHiding: true,
@@ -547,6 +592,12 @@ export default function TracesTable({
      },
      enableHiding: true,
      defaultHidden: true,
+      cell: ({ row }) => {
+        const value: TracesTableRow["observationCount"] =
+          row.getValue("observationCount");
+        if (!traceMetrics.data) return <Skeleton className="h-3 w-1/2" />;
+        return <span>{value}</span>;
+      },
    },
    {
      accessorKey: "version",
@@ -629,7 +680,7 @@ export default function TracesTable({

  const rows = useMemo(() => {
    return traces.isSuccess
-      ? traces.data.traces.map((trace) => {
+      ? traceRowData?.rows?.map((trace) => {
          return {
            bookmarked: trace.bookmarked,
            id: trace.id,
@@ -648,17 +699,19 @@ export default function TracesTable({
              completionTokens: trace.completionTokens,
              totalTokens: trace.totalTokens,
            },
-            scores: verifyAndPrefixScoreDataAgainstKeys(
-              scoreKeysAndProps,
-              trace.scores,
-            ),
+            scores: trace.scores
+              ? verifyAndPrefixScoreDataAgainstKeys(
+                  scoreKeysAndProps,
+                  trace.scores,
+                )
+              : undefined,
            inputCost: trace.calculatedInputCost ?? undefined,
            outputCost: trace.calculatedOutputCost ?? undefined,
            totalCost: trace.calculatedTotalCost ?? undefined,
          };
-        })
+        }) ?? []
      : [];
-  }, [traces, scoreKeysAndProps]);
+  }, [traces, traceRowData, scoreKeysAndProps]);

  return (
    <>
@@ -672,6 +725,7 @@ export default function TracesTable({
        }}
        filterState={userFilterState}
        setFilterState={useDebounce(setUserFilterState)}
+        columnsWithCustomSelect={["name", "tags"]}
        actionButtons={
          Object.keys(selectedRows).filter((traceId) =>
            traces.data?.traces.map((t) => t.id).includes(traceId),
@@ -713,7 +767,7 @@ export default function TracesTable({
                }
        }
        pagination={{
-          pageCount: Math.ceil(Number(totalCount) / paginationState.pageSize),
+          totalCount,
          onChange: setPaginationState,
          state: paginationState,
        }}
@@ -11,10 +11,19 @@ import { MarkdownView } from "@/src/components/ui/MarkdownViewer";
 import { MarkdownSchema } from "@/src/components/schemas/MarkdownSchema";
 import {
  ChatMlArraySchema,
-  ChatMlMessageSchema,
+  type ChatMlMessageSchema,
+  OpenAIContentSchema,
 } from "@/src/components/schemas/ChatMlSchema";
 import { useMarkdownContext } from "@/src/features/theming/useMarkdownContext";

+const isSupportedMarkdownFormat = (
+  content: unknown,
+  contentValidation: z.SafeParseReturnType<
+    string,
+    z.infer<typeof OpenAIContentSchema>
+  >,
+): content is z.infer<typeof OpenAIContentSchema> => contentValidation.success;
+
 // MarkdownOrJsonView will render markdown if `isMarkdownEnabled` (global context) is true and the content is valid markdown
 // otherwise, if content is valid markdown will render JSON with switch to enable markdown globally
 function MarkdownOrJsonView({
@@ -32,12 +41,20 @@ function MarkdownOrJsonView({
    () => MarkdownSchema.safeParse(content),
    [content],
  );
+  const validatedOpenAIContent = useMemo(
+    () => OpenAIContentSchema.safeParse(content),
+    [content],
+  );

  const { isMarkdownEnabled } = useMarkdownContext();
+  const canEnableMarkdown = isSupportedMarkdownFormat(
+    content,
+    validatedOpenAIContent,
+  );

-  return validatedMarkdown.success && isMarkdownEnabled ? (
+  return isMarkdownEnabled && canEnableMarkdown ? (
    <MarkdownView
-      markdown={validatedMarkdown.data}
+      markdown={validatedMarkdown.data ?? content}
      title={title}
      className={className}
      customCodeHeaderClassName={customCodeHeaderClassName}
@@ -45,7 +62,7 @@ function MarkdownOrJsonView({
  ) : (
    <JSONView
      json={content}
-      canEnableMarkdown={validatedMarkdown.success}
+      canEnableMarkdown={canEnableMarkdown}
      title={title}
      className={className}
    />
@@ -140,10 +157,12 @@ export const IOPreview: React.FC<{
                      role: m.role ?? "assistant",
                    }))
                  : [
-                      ChatMlMessageSchema.parse({
+                      {
                        role: "assistant",
-                        content: outputClean,
-                      }),
+                        ...(typeof outputClean === "string"
+                          ? { content: outputClean }
+                          : { json: outputClean }),
+                      } as ChatMlMessageSchema,
                    ]),
              ]}
              shouldRenderMarkdown
@@ -186,7 +186,6 @@ export const ObservationPreview = (props: {
                source="generation"
                generation={observationWithInputAndOutput.data}
                analyticsEventName="trace_detail:test_in_playground_button_click"
-                fullWidth
              />
            )}
            {observationWithInputAndOutput.data ? (
@@ -84,7 +84,9 @@ const ObservationTreeTraceNode = (props: {
    onClick={() => props.setCurrentObservationId(undefined)}
  >
    <div className="flex gap-2">
-      <span className={cn("rounded-sm bg-input p-1 text-xs")}>TRACE</span>
+      <span className={cn("rounded-sm bg-input px-1 py-0.5 text-xs")}>
+        TRACE
+      </span>
      <span className="break-all text-sm">{props.trace.name}</span>
      {props.comments ? (
        <CommentCountIcon count={props.comments.get(props.trace.id)} />
@@ -191,7 +193,7 @@ const ObservationTreeNode = (props: {
                        variant="default"
                        pressed={collapsed}
                        size="xs"
-                        className="w-7"
+                        className="-m-1 h-6 w-6"
                        title={
                          collapsed ? "Expand children" : "Collapse children"
                        }
@@ -284,7 +286,7 @@ const ColorCodedObservationType = (props: {
  return (
    <span
      className={cn(
-        "self-start rounded-sm p-1 text-xs",
+        "self-start rounded-sm px-1 py-0.5 text-xs",
        treeItemColors.get(props.observationType),
      )}
    >
@@ -30,6 +30,7 @@ import { TracePreview } from "@/src/components/trace/TracePreview";
 import { ObservationPreview } from "@/src/components/trace/ObservationPreview";
 import useSessionStorage from "@/src/components/useSessionStorage";
 import { api } from "@/src/utils/api";
+import { useSession } from "next-auth/react";

 // Fixed widths for styling for v1
 const SCALE_WIDTH = 800;
@@ -45,14 +46,12 @@ const PREDEFINED_STEP_SIZES = [

 const getNestedObservationKeys = (
  observations: NestedObservation[],
-): { keys: string[]; ids: string[] } => {
+): string[] => {
  const keys: string[] = [];
-  const ids: string[] = [];

  const collectKeys = (obs: NestedObservation[]) => {
    obs.forEach((observation) => {
      keys.push(`observation-${observation.id}`);
-      ids.push(observation.id);
      if (observation.children) {
        collectKeys(observation.children);
      }
@@ -60,7 +59,7 @@ const getNestedObservationKeys = (
  };

  collectKeys(observations);
-  return { keys, ids };
+  return keys;
 };

 const calculateStepSize = (latency: number, scaleWidth: number) => {
@@ -97,7 +96,7 @@ function TreeItemInner({
  const customLabelWidth = cardWidth - SCALE_WIDTH - CARD_PADDING;

  return (
-    <div className="group my-1 grid w-full min-w-fit grid-cols-[1fr,auto] items-center">
+    <div className="group my-0.5 grid w-full min-w-fit grid-cols-[1fr,auto] items-center">
      <div
        className="flex flex-row items-center gap-2"
        style={{
@@ -106,7 +105,10 @@ function TreeItemInner({
        }}
      >
        <span
-          className={cn("rounded-sm p-1 text-xs", treeItemColors.get(type))}
+          className={cn(
+            "rounded-sm px-1 py-0.5 text-xs",
+            treeItemColors.get(type),
+          )}
        >
          {type}
        </span>
@@ -305,15 +307,16 @@ export function TraceTimelineView({
    () => nestObservations(observations),
    [observations],
  );
-  const { keys: nestedObservationKeys, ids: nestedObservationIds } = useMemo(
+  const nestedObservationKeys = useMemo(
    () => getNestedObservationKeys(nestedObservations),
    [nestedObservations],
  );

-  const observationCommentCounts = api.comments.getCountsByObjectIds.useQuery(
+  const session = useSession();
+
+  const observationCommentCounts = api.comments.getCountByObjectType.useQuery(
    {
      projectId: trace.projectId,
-      objectIds: nestedObservationIds,
      objectType: "OBSERVATION",
    },
    {
@@ -323,13 +326,14 @@ export function TraceTimelineView({
        },
      },
      refetchOnMount: false, // prevents refetching loops
+      enabled: session.status === "authenticated",
    },
  );

-  const traceCommentCounts = api.comments.getCountsByObjectIds.useQuery(
+  const traceCommentCounts = api.comments.getCountByObjectId.useQuery(
    {
      projectId: trace.projectId,
-      objectIds: [trace.id],
+      objectId: trace.id,
      objectType: "TRACE",
    },
    {
@@ -339,6 +343,7 @@ export function TraceTimelineView({
        },
      },
      refetchOnMount: false, // prevents refetching loops
+      enabled: session.status === "authenticated",
    },
  );

@@ -360,7 +365,7 @@ export function TraceTimelineView({
              minWidth: `${MIN_LABEL_WIDTH}px`,
            }}
          >
-            <h3 className="text-2xl font-semibold tracking-tight">
+            <h3 className="text-xl font-semibold tracking-tight">
              Trace Timeline
            </h3>
            <div className="flex h-full items-center">
@@ -27,13 +27,14 @@ import {
 } from "lucide-react";
 import { usdFormatter } from "@/src/utils/numbers";
 import Decimal from "decimal.js";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useState } from "react";
 import { DeleteButton } from "@/src/components/deleteButton";
 import { usePostHogClientCapture } from "@/src/features/posthog-analytics/usePostHogClientCapture";
 import { Tabs, TabsList, TabsTrigger } from "@/src/components/ui/tabs";
 import { TraceTimelineView } from "@/src/components/trace/TraceTimelineView";
 import { type APIScore } from "@langfuse/shared";
 import { useSession } from "next-auth/react";
+import { FullScreenPage } from "@/src/components/layouts/full-screen-page";

 export function Trace(props: {
  observations: Array<ObservationReturnType>;
@@ -57,14 +58,11 @@ export function Trace(props: {
    [],
  );

-  const observationObjectIds: string[] = useMemo(() => {
-    return props.observations.map(({ id }) => id);
-  }, [props.observations]);
+  const session = useSession();

-  const observationCommentCounts = api.comments.getCountsByObjectIds.useQuery(
+  const observationCommentCounts = api.comments.getCountByObjectType.useQuery(
    {
      projectId: props.trace.projectId,
-      objectIds: observationObjectIds,
      objectType: "OBSERVATION",
    },
    {
@@ -74,13 +72,14 @@ export function Trace(props: {
        },
      },
      refetchOnMount: false, // prevents refetching loops
+      enabled: session.status === "authenticated",
    },
  );

-  const traceCommentCounts = api.comments.getCountsByObjectIds.useQuery(
+  const traceCommentCounts = api.comments.getCountByObjectId.useQuery(
    {
      projectId: props.trace.projectId,
-      objectIds: [props.trace.id],
+      objectId: props.trace.id,
      objectType: "TRACE",
    },
    {
@@ -90,6 +89,7 @@ export function Trace(props: {
        },
      },
      refetchOnMount: false, // prevents refetching loops
+      enabled: session.status === "authenticated",
    },
  );

@@ -173,7 +173,7 @@ export function Trace(props: {
              });
              setScoresOnObservationTree(e);
            }}
-            size="sm"
+            size="xs"
            title="Show scores"
          >
            <Award className="h-4 w-4" />
@@ -186,7 +186,7 @@ export function Trace(props: {
              });
              setMetricsOnObservationTree(e);
            }}
-            size="sm"
+            size="xs"
            title="Show metrics"
          >
            {metricsOnObservationTree ? (
@@ -223,7 +223,7 @@ export function TracePage({ traceId }: { traceId: string }) {
  const router = useRouter();
  const utils = api.useUtils();
  const session = useSession();
-  const trace = api.traces.byId.useQuery(
+  const trace = api.traces.byIdWithObservationsAndScores.useQuery(
    { traceId, projectId: router.query.projectId as string },
    {
      retry(failureCount, error) {
@@ -264,7 +264,7 @@ export function TracePage({ traceId }: { traceId: string }) {
    return <ErrorPage message="You do not have access to this trace." />;
  if (!trace.data) return <div>loading...</div>;
  return (
-    <div className="flex flex-col overflow-hidden 2xl:container md:h-[calc(100vh-2rem)]">
+    <FullScreenPage mobile={false} className="2xl:container">
      <Header
        title="Trace Detail"
        breadcrumb={[
@@ -397,7 +397,7 @@ export function TracePage({ traceId }: { traceId: string }) {
          />
        </div>
      )}
-    </div>
+    </FullScreenPage>
  );
 }

@@ -56,7 +56,7 @@ export function JSONView(props: {
                title="Enable Markdown"
                variant="ghost"
                type="button"
-                size="xs"
+                size="icon-xs"
                onClick={() => {
                  setIsMarkdownEnabled(true);
                  capture("trace_detail:io_pretty_format_toggle_group", {
@@ -71,10 +71,10 @@ export function JSONView(props: {
            <Button
              title="Copy to clipboard"
              variant="ghost"
-              size="xs"
+              size="icon-xs"
              type="button"
              onClick={handleCopy}
-              className="hover:bg-border"
+              className="-mr-2 hover:bg-border"
            >
              {isCopied ? (
                <Check className="h-3 w-3" />
@@ -164,7 +164,12 @@ export function CodeView(props: {
              )}
            </Button>
          ) : undefined}
-          <Button variant="secondary" size="xs" onClick={handleCopy}>
+          <Button
+            variant="secondary"
+            size="icon-xs"
+            onClick={handleCopy}
+            className=""
+          >
            {isCopied ? (
              <Check className="h-3 w-3" />
            ) : (
@@ -9,31 +9,25 @@ import {
  Children,
  createElement,
 } from "react";
-import ReactMarkdown, { type Components, type Options } from "react-markdown";
+import ReactMarkdown, { type Options } from "react-markdown";
 import Link from "next/link";
-import Image from "next/image";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import { CodeBlock } from "@/src/components/ui/Codeblock";
 import { useTheme } from "next-themes";
 import { Button } from "@/src/components/ui/button";
-import {
-  Check,
-  Copy,
-  Image as ImageIcon,
-  ImageOff,
-  Maximize2,
-  Minimize2,
-} from "lucide-react";
-import { api } from "@/src/utils/api";
-import { isPresent } from "@langfuse/shared";
+import { Check, Copy, ImageOff } from "lucide-react";
 import { BsMarkdown } from "react-icons/bs";
 import { usePostHogClientCapture } from "@/src/features/posthog-analytics/usePostHogClientCapture";
-import { Skeleton } from "@/src/components/ui/skeleton";
 import { useMarkdownContext } from "@/src/features/theming/useMarkdownContext";
-import { captureException } from "@sentry/nextjs";
-import { useSession } from "next-auth/react";
 import { type ExtraProps as ReactMarkdownExtraProps } from "react-markdown";
+import {
+  OpenAIUrlImageUrl,
+  type OpenAIContentParts,
+  type OpenAIContentSchema,
+} from "@/src/components/schemas/ChatMlSchema";
+import { type z } from "zod";
+import { ResizableImage } from "@/src/components/ui/resizable-image";

 type ReactMarkdownNode = ReactMarkdownExtraProps["node"];
 type ReactMarkdownNodeChildren = Exclude<
@@ -50,147 +44,6 @@ const MemoizedReactMarkdown: FC<Options> = memo(
    prevProps.className === nextProps.className,
 );

-/**
- * Implemented customLoader as we cannot whitelist user provided image domains
- * Security risks are taken care of by a validation in api.utilities.validateImgUrl
- * Fetching image will fail if SSL/TLS certificate is invalid or expired, will be handled by onError
- * Do not use this customLoader in production if you are not using the above mentioned security measures */
-const customLoader = ({
-  src,
-  width,
-  quality,
-}: {
-  src: string;
-  width: number;
-  quality?: number;
-}) => {
-  return `${src}?w=${width}&q=${quality || 75}`;
-};
-
-const ImageErrorDisplay = ({
-  src,
-  displayError,
-}: {
-  src: string;
-  displayError: string;
-}) => (
-  <div className="flex flex-row items-center gap-2">
-    <span title={displayError} className="h-4 w-4">
-      <ImageOff className="h-4 w-4" />
-    </span>
-    <Link href={src} className="underline" target="_blank">
-      {src}
-    </Link>
-  </div>
-);
-
-const MarkdownImage: Components["img"] = ({ src, alt }) => {
-  const [isZoomedIn, setIsZoomedIn] = useState(true);
-  const [hasFetchError, setHasFetchError] = useState(false);
-  const [isImageVisible, setIsImageVisible] = useState(false);
-  const session = useSession();
-
-  if (!isPresent(src)) return null;
-
-  const isValidImage = api.utilities.validateImgUrl.useQuery(src, {
-    enabled: session.status === "authenticated",
-  });
-
-  if (session.status !== "authenticated") {
-    return (
-      <ImageErrorDisplay
-        src={src}
-        displayError="Images not rendered on public traces and observations"
-      />
-    );
-  }
-
-  if (isValidImage.isLoading) {
-    return (
-      <Skeleton className="h-8 w-1/2 items-center p-2 text-xs">
-        <span className="opacity-80">Loading image...</span>
-      </Skeleton>
-    );
-  }
-
-  const displayError = `Cannot load image. ${src.includes("http") ? "Http images are not rendered in Langfuse for security reasons" : "Invalid image URL"}`;
-
-  if (isValidImage.data?.isValid) {
-    return (
-      <div>
-        {hasFetchError ? (
-          <ImageErrorDisplay src={src} displayError={displayError} />
-        ) : (
-          <div
-            className={cn(
-              "group relative w-full overflow-hidden",
-              isZoomedIn ? "h-1/2 w-1/2" : "h-full w-full",
-            )}
-          >
-            {isImageVisible ? (
-              <Image
-                loader={customLoader}
-                src={src}
-                alt={alt ?? `Markdown Image-${Math.random()}`}
-                loading="lazy"
-                width={0}
-                height={0}
-                title={src}
-                className="h-full w-full rounded border object-contain"
-                onError={(error) => {
-                  setHasFetchError(true);
-                  captureException(error);
-                }}
-              />
-            ) : (
-              <div className="grid h-14 w-full grid-cols-[auto,1fr] items-center gap-2 rounded border border-dashed bg-muted/30 p-2 text-xs text-muted-foreground/60">
-                <Button
-                  title="Render image"
-                  type="button"
-                  size="icon"
-                  variant="ghost"
-                  onClick={() => setIsImageVisible(!isImageVisible)}
-                >
-                  <ImageIcon className="h-4 w-4" />
-                </Button>
-                <div className="flex items-center overflow-hidden">
-                  <Link
-                    href={src}
-                    title={src}
-                    className="overflow-hidden underline"
-                    target="_blank"
-                  >
-                    <div className="h-8 overflow-hidden overflow-ellipsis">
-                      {src}
-                    </div>
-                  </Link>
-                </div>
-              </div>
-            )}
-            {isImageVisible && (
-              <Button
-                type="button"
-                className="absolute right-0 top-0 mr-1 mt-1 h-8 w-8 opacity-0 group-hover:!bg-accent/30 group-hover:opacity-100"
-                variant="ghost"
-                size="icon"
-                onClick={() => setIsZoomedIn(!isZoomedIn)}
-              >
-                {isZoomedIn ? (
-                  <Maximize2 className="h-4 w-4"></Maximize2>
-                ) : (
-                  <Minimize2 className="h-4 w-4"></Minimize2>
-                )}
-              </Button>
-            )}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  return <ImageErrorDisplay src={src} displayError={displayError} />;
-};
-
 const isTextElement = (child: ReactNode): child is ReactElement =>
  isValidElement(child) &&
  typeof child.type !== "string" &&
@@ -219,25 +72,179 @@ const isImageNode = (node?: ReactMarkdownNode): boolean =>
      "tagName" in child && child.tagName === "img",
  );

+function MarkdownRenderer({
+  markdown,
+  theme,
+  className,
+  customCodeHeaderClassName,
+}: {
+  markdown: string;
+  theme?: string;
+  className?: string;
+  customCodeHeaderClassName?: string;
+}) {
+  return (
+    <MemoizedReactMarkdown
+      className={cn("space-y-2 overflow-x-auto break-words text-sm", className)}
+      remarkPlugins={[remarkGfm, remarkMath]}
+      components={{
+        p({ children, node }) {
+          if (isImageNode(node)) {
+            return <>{children}</>;
+          }
+          return (
+            <p className="mb-2 whitespace-pre-wrap last:mb-0">{children}</p>
+          );
+        },
+        a({ children, href }) {
+          if (href)
+            return (
+              <Link href={href} className="underline" target="_blank">
+                {children}
+              </Link>
+            );
+        },
+        ul({ children }) {
+          if (isChecklist(children))
+            return <ul className="list-none">{children}</ul>;
+
+          return <ul className="list-outside list-disc pl-4">{children}</ul>;
+        },
+        ol({ children }) {
+          return <ol className="list-outside list-decimal pl-4">{children}</ol>;
+        },
+        li({ children }) {
+          return (
+            <li className="mb-1 list-item">
+              {transformListItemChildren(children)}
+            </li>
+          );
+        },
+        pre({ children }) {
+          return <pre className="rounded p-2">{children}</pre>;
+        },
+        h1({ children }) {
+          return <h1 className="text-2xl font-bold">{children}</h1>;
+        },
+        h2({ children }) {
+          return <h2 className="text-xl font-bold">{children}</h2>;
+        },
+        h3({ children }) {
+          return <h3 className="text-lg font-bold">{children}</h3>;
+        },
+        h4({ children }) {
+          return <h4 className="text-base font-bold">{children}</h4>;
+        },
+        h5({ children }) {
+          return <h5 className="text-sm font-bold">{children}</h5>;
+        },
+        h6({ children }) {
+          return <h6 className="text-xs font-bold">{children}</h6>;
+        },
+        code({ children, className }) {
+          const languageMatch = /language-(\w+)/.exec(className || "");
+          const language = languageMatch ? languageMatch[1] : "";
+          const codeContent = String(children).replace(/\n$/, "");
+          const isMultiLine = codeContent.includes("\n");
+
+          return language || isMultiLine ? (
+            // code block
+            <CodeBlock
+              key={Math.random()}
+              language={language}
+              value={codeContent}
+              theme={theme}
+              className={customCodeHeaderClassName}
+            />
+          ) : (
+            // inline code
+            <code className="rounded border bg-secondary px-0.5">
+              {codeContent}
+            </code>
+          );
+        },
+        blockquote({ children }) {
+          return (
+            <blockquote className="border-l-4 pl-4 italic">
+              {children}
+            </blockquote>
+          );
+        },
+        img({ src, alt }) {
+          return <ResizableImage src={src} alt={alt} />;
+        },
+        hr() {
+          return <hr className="my-4" />;
+        },
+        table({ children }) {
+          return (
+            <div className="overflow-x-auto rounded border text-xs">
+              <table className="min-w-full divide-y">{children}</table>
+            </div>
+          );
+        },
+        thead({ children }) {
+          return <thead>{children}</thead>;
+        },
+        tbody({ children }) {
+          return <tbody className="divide-y divide-border">{children}</tbody>;
+        },
+        tr({ children }) {
+          return <tr>{children}</tr>;
+        },
+        th({ children }) {
+          return (
+            <th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider">
+              {children}
+            </th>
+          );
+        },
+        td({ children }) {
+          return <td className="whitespace-nowrap px-4 py-2">{children}</td>;
+        },
+      }}
+    >
+      {markdown}
+    </MemoizedReactMarkdown>
+  );
+}
+const parseOpenAIContentParts = (
+  content: z.infer<typeof OpenAIContentParts>,
+): string => {
+  return content
+    .map((item) => {
+      if (item.type === "text") {
+        return item.text;
+      } else {
+        return `![image](${item.image_url.url})`;
+      }
+    })
+    .join("\n");
+};
+
 export function MarkdownView({
  markdown,
  title,
  className,
  customCodeHeaderClassName,
 }: {
-  markdown: string;
+  markdown: string | z.infer<typeof OpenAIContentSchema>;
  title?: string;
  className?: string;
  customCodeHeaderClassName?: string;
 }) {
  const [isCopied, setIsCopied] = useState(false);
-  const { resolvedTheme: theme } = useTheme();
  const capture = usePostHogClientCapture();
+  const { resolvedTheme: theme } = useTheme();
  const { setIsMarkdownEnabled } = useMarkdownContext();

  const handleCopy = () => {
    setIsCopied(true);
-    void navigator.clipboard.writeText(markdown);
+    const rawText =
+      typeof markdown === "string"
+        ? markdown
+        : parseOpenAIContentParts(markdown);
+    void navigator.clipboard.writeText(rawText);
    setTimeout(() => setIsCopied(false), 1000);
  };

@@ -288,132 +295,44 @@ export function MarkdownView({
            </Button>
          </div>
        </div>
-      ) : undefined}
-      <MemoizedReactMarkdown
-        className={cn(
-          "space-y-4 overflow-x-auto break-words p-3 text-sm",
-          className,
-        )}
-        remarkPlugins={[remarkGfm, remarkMath]}
-        components={{
-          p({ children, node }) {
-            if (isImageNode(node)) {
-              return <>{children}</>;
-            }
-            return (
-              <p className="mb-2 whitespace-pre-wrap last:mb-0">{children}</p>
-            );
-          },
-          a({ children, href }) {
-            if (href)
-              return (
-                <Link href={href} className="underline" target="_blank">
-                  {children}
-                </Link>
-              );
-          },
-          ul({ children }) {
-            if (isChecklist(children))
-              return <ul className="list-none">{children}</ul>;
-
-            return <ul className="list-outside list-disc pl-4">{children}</ul>;
-          },
-          ol({ children }) {
-            return (
-              <ol className="list-outside list-decimal pl-4">{children}</ol>
-            );
-          },
-          li({ children }) {
-            return (
-              <li className="mb-1 list-item">
-                {transformListItemChildren(children)}
-              </li>
-            );
-          },
-          pre({ children }) {
-            return <pre className="rounded p-2">{children}</pre>;
-          },
-          h1({ children }) {
-            return <h1 className="text-2xl font-bold">{children}</h1>;
-          },
-          h2({ children }) {
-            return <h2 className="text-xl font-bold">{children}</h2>;
-          },
-          h3({ children }) {
-            return <h3 className="text-lg font-bold">{children}</h3>;
-          },
-          h4({ children }) {
-            return <h4 className="text-base font-bold">{children}</h4>;
-          },
-          h5({ children }) {
-            return <h5 className="text-sm font-bold">{children}</h5>;
-          },
-          h6({ children }) {
-            return <h6 className="text-xs font-bold">{children}</h6>;
-          },
-          code({ children, className }) {
-            const languageMatch = /language-(\w+)/.exec(className || "");
-            const language = languageMatch ? languageMatch[1] : "";
-            const codeContent = String(children).replace(/\n$/, "");
-            const isMultiLine = codeContent.includes("\n");
-
-            return language || isMultiLine ? (
-              // code block
-              <CodeBlock
-                key={Math.random()}
-                language={language}
-                value={codeContent}
+      ) : null}
+      <div className="grid grid-flow-row gap-2 p-3">
+        {typeof markdown === "string" ? (
+          // plain string
+          <MarkdownRenderer
+            markdown={markdown}
+            theme={theme}
+            className={className}
+            customCodeHeaderClassName={customCodeHeaderClassName}
+          />
+        ) : (
+          // content parts (multi-modal)
+          markdown.map((content, index) =>
+            content.type === "text" ? (
+              <MarkdownRenderer
+                key={index}
+                markdown={content.text}
                theme={theme}
-                className={customCodeHeaderClassName}
+                className={className}
+                customCodeHeaderClassName={customCodeHeaderClassName}
              />
-            ) : (
-              // inline code
-              <code className="rounded border bg-secondary px-0.5">
-                {codeContent}
-              </code>
-            );
-          },
-          blockquote({ children }) {
-            return (
-              <blockquote className="border-l-4 pl-4 italic">
-                {children}
-              </blockquote>
-            );
-          },
-          img: MarkdownImage,
-          hr() {
-            return <hr className="my-4" />;
-          },
-          table({ children }) {
-            return (
-              <div className="overflow-x-auto rounded border text-xs">
-                <table className="min-w-full divide-y">{children}</table>
+            ) : OpenAIUrlImageUrl.safeParse(content.image_url.url).success ? (
+              <div key={index}>
+                <ResizableImage src={content.image_url.url} />
              </div>
-            );
-          },
-          thead({ children }) {
-            return <thead>{children}</thead>;
-          },
-          tbody({ children }) {
-            return <tbody className="divide-y divide-border">{children}</tbody>;
-          },
-          tr({ children }) {
-            return <tr>{children}</tr>;
-          },
-          th({ children }) {
-            return (
-              <th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider">
-                {children}
-              </th>
-            );
-          },
-          td({ children }) {
-            return <td className="whitespace-nowrap px-4 py-2">{children}</td>;
-          },
-        }}
-      >
-        {markdown}
-      </MemoizedReactMarkdown>
+            ) : (
+              <div className="grid grid-cols-[auto,1fr] items-center gap-2">
+                <span title="No Base64 image support yet" className="h-4 w-4">
+                  <ImageOff className="h-4 w-4" />
+                </span>
+                <span className="truncate text-sm">
+                  {content.image_url.url}
+                </span>
+              </div>
+            ),
+          )
+        )}
+      </div>
    </div>
  );
 }
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/src/utils/tailwind";

 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "relative w-full rounded-lg border p-3 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
  {
    variants: {
      variant: {
@@ -12,7 +12,7 @@ const Avatar = React.forwardRef<
  <AvatarPrimitive.Root
    ref={ref}
    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      "relative flex h-8 w-8 shrink-0 overflow-hidden rounded-full",
      className,
    )}
    {...props}
@@ -25,11 +25,12 @@ const buttonVariants = cva(
          "bg-destructive-foreground/90 text-destructive hover:bg-destructive-foreground/80",
      },
      size: {
-        default: "h-10 px-4 py-2",
-        xs: "h-6 px-1 rounded-sm",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
+        default: "h-8 px-3 py-1",
+        xs: "h-4 px-1 rounded-sm",
+        sm: "h-6 rounded-md px-3",
+        lg: "h-9 rounded-md px-8",
+        icon: "h-8 w-8",
+        "icon-xs": "h-6 w-6",
      },
    },
    defaultVariants: {
@@ -23,7 +23,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <div
    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn("flex flex-col space-y-1 p-4", className)}
    {...props}
  />
 ));
@@ -60,7 +60,7 @@ const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div ref={ref} className={cn("p-4 pt-0", className)} {...props} />
 ));
 CardContent.displayName = "CardContent";

@@ -70,7 +70,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
  <div
    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn("flex items-center p-4 pt-0", className)}
    {...props}
  />
 ));
@@ -41,15 +41,12 @@ const CommandInput = React.forwardRef<
  React.ElementRef<typeof CommandPrimitive.Input>,
  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div
-    className="flex items-center rounded-md border px-3"
-    cmdk-input-wrapper=""
-  >
+  <div className="flex items-center rounded border px-3" cmdk-input-wrapper="">
    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
    <CommandPrimitive.Input
      ref={ref}
      className={cn(
-        "flex h-11 w-full rounded-md border-transparent bg-transparent py-3 text-sm outline-none placeholder:text-slate-500 focus:border-0  focus:border-none focus:border-transparent focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-slate-400	",
+        "flex h-8 w-full rounded border-transparent bg-transparent py-3 text-sm outline-none placeholder:text-slate-500 focus:border-0  focus:border-none focus:border-transparent focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-slate-400	",
        className,
      )}
      {...props}
@@ -88,7 +88,7 @@ const DialogTitle = React.forwardRef<
  <DialogPrimitive.Title
    ref={ref}
    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
+      "text-xl font-semibold leading-none tracking-tight",
      className,
    )}
    {...props}
@@ -18,7 +18,7 @@ const HoverCardContent = React.forwardRef<
    align={align}
    sideOffset={sideOffset}
    className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 w-64 rounded-md border bg-popover p-3 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className,
    )}
    {...props}
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
      <input
        type={type}
        className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-8 w-full rounded-md border border-input bg-background px-2 py-1 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
          className,
        )}
        ref={ref}
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				`export { getSessionTableSQL } from "./getSessionTableSQL";`
				`@@ -0,0 +1 @@`
				`export { createSessionsAllQuery } from "./createSessionsAllQuery";`