chore: release v1.27.1

Co-authored-by: Max Deichmann <m.deichmann@tum.de>

.env.dev.example

@@ -16,4 +16,8 @@ NEXTAUTH_SECRET="secret"
 
 # Langfuse experimental features
 LANGFUSE_ENABLE_EXPERIMENTAL_FEATURES="true"
-SALT="salt"
+SALT="salt"
+
+# Email
+EMAIL_FROM_ADDRESS=""  # Defines the email address to use as the from address.
+SMTP_CONNECTION_URL=""  # Defines the connection url for smtp server.

.env.local.example

@@ -13,4 +13,9 @@ NEXTAUTH_URL="http://localhost:3000"
 
 # feature flag to enable experimental features locally
 LANGFUSE_ENABLE_EXPERIMENTAL_FEATURES="false"
-SALT="salt"
+SALT="salt"
+
+
+# Email
+EMAIL_FROM_ADDRESS=""  # Defines the email address to use as the from address.
+SMTP_CONNECTION_URL=""  # Defines the connection url for smtp server.

.env.prod.example

@@ -7,6 +7,7 @@ NEXTAUTH_COOKIE_DOMAIN=".langfuse.com"
 # https://www.prisma.io/docs/reference/database-reference/connection-urls#env
 DIRECT_URL="postgresql://postgres:[pw]@db.[db_id].supabase.co:5432/postgres"
 DATABASE_URL="postgres://postgres:[pw]@db.[db_id].supabase.co:6543/postgres?pgbouncer=true&connection_limit=1"
+# SHADOW_DATABASE_URL=
 
 # Next Auth
 
@@ -44,3 +45,14 @@ AUTH_GITHUB_CLIENT_ID=
 AUTH_GITHUB_CLIENT_SECRET=
 # AUTH_DOMAINS_WITH_SSO_ENFORCEMENT=domain1.com,domain2.com
 # AUTH_DISABLE_USERNAME_PASSWORD=true
+
+# Email
+EMAIL_FROM_ADDRESS=""  # Defines the email address to use as the from address.
+SMTP_CONNECTION_URL=""  # Defines the connection url for smtp server.
+
+# S3 storage (eg for exports), necessary for serverless deployments
+S3_ENDPOINT=""
+S3_ACCESS_KEY_ID=""
+S3_SECRET_ACCESS_KEY=""
+S3_BUCKET_NAME=""
+S3_REGION=""

.eslintrc.cjs

@@ -6,12 +6,17 @@ const config = {
   overrides: [
     {
       extends: [
-        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@typescript-eslint/strict-type-checked",
       ],
       files: ["*.ts", "*.tsx"],
       parserOptions: {
         project: path.join(__dirname, "tsconfig.json"),
       },
+      rules: {
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-confusing-void-expression": "off",
+      }
     },
   ],
   parser: "@typescript-eslint/parser",
@@ -19,7 +24,8 @@ const config = {
     project: path.join(__dirname, "tsconfig.json"),
   },
   plugins: ["@typescript-eslint"],
-  extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
+  extends: ["next/core-web-vitals"],
+  ignorePatterns: ["generated/**/*"],
   rules: {
     "@typescript-eslint/consistent-type-imports": [
       "warn",

.github/PULL_REQUEST_TEMPLATE.md

@@ -27,7 +27,7 @@ Fixes # (issue)
 
 <!-- Remove bullet points below that don't apply to you -->
 
-- I haven't read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
+- I haven't read the [contributing guide](https://github.com/langfuse/langfuse/blob/main/CONTRIBUTING.md)
 - My code doesn't follow the style guidelines of this project (`npm run prettier`)
 - I haven't commented my code, particularly in hard-to-understand areas
 - I haven't checked if my PR needs changes to the documentation

.github/dependabot.yml

@@ -18,6 +18,9 @@ updates:
       - dependency-name: "@types/node"
       - dependency-name: "@trpc/*"
     groups:
+      sentry:
+        patterns:
+          - "@sentry/*"
       prisma:
         patterns:
           - "prisma"

.github/workflows/licencecheck.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - "main"
+  merge_group:
   pull_request:
     branches:
       - "main"

.github/workflows/pipeline.yml

@@ -7,6 +7,7 @@ on:
       - "main"
     tags:
       - "v*"
+  merge_group:
   pull_request:
     branches:
       - "main"

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
@@ -28,5 +28,6 @@
   "docwriter.style": "JSDoc",
   "[prisma]": {
     "editor.defaultFormatter": "Prisma.prisma"
-  }
+  },
+  "eslint.lintTask.enable": true
 }

CONTRIBUTING.md

@@ -21,10 +21,79 @@ _Before making any significant changes, please [open an issue](https://github.co
 
 Once we've discussed your changes and you've got your code ready, make sure that tests are passing and open your pull request.
 
-## Getting started
-
 A good first step is to search for open [issues](https://github.com/langfuse/langfuse/issues). Issues are labeled, and some good issues to start with are labeled: [good first issue](https://github.com/langfuse/langfuse/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22).
 
+## Project Overview
+
+### Technologies we use
+
+- Application (this repository)
+  - NextJS 14, pages router
+  - NextAuth.js / Auth.js
+  - tRPC: Frontend APIs
+  - Prisma ORM
+  - Zod
+  - Tailwind CSS
+  - shadcn/ui tailwind components (using Radix and tanstack)
+  - Fern: generate OpenAPI spec and Pydantic models
+- JS SDK ([langfuse/langfuse-js](https://github.com/langfuse/langfuse-js))
+  - openapi-typescript to generated types based on OpenAPI spec
+- Python SDK ([langfuse/langfuse-python](https://github.com/langfuse/langfuse-python))
+  - Pydantic for input validation, models generated by fern
+
+### Architecture Overview
+
+```mermaid
+flowchart TB
+   subgraph s4["Clients"]
+      subgraph s2["langfuse/langfuse-python"]
+         Python["Python SDK"]
+         OAI["OpenAI drop-in replacement"] -->|extends| Python
+         LCPYTHON["Langchain Python Integration"] -->|extends| Python
+         Langflow -->|uses| LCPYTHON
+         LiteLLM -->|uses| Python
+      end
+      subgraph s3["langfuse/langfuse-js"]
+         JS["JS SDK"]
+         LCJS["Langchain JS Integration"]  -->|extends| JS
+         Flowise -->|uses| LCJS
+      end
+   end
+
+   DB[Postgres Database]
+	subgraph s1["Application (langfuse/langfuse)"]
+      API[Public HTTP API]
+      G[TRPC API]
+      I[NextAuth]
+      H[React Frontend]
+      Prisma[Prisma ORM]
+      H --> G
+      H --> I
+      G --> I
+      G --- Prisma
+      API --- Prisma
+      I --- Prisma
+	end
+   Prisma --- DB
+   JS --- API
+   Python --- API
+```
+
+### Infrastructure & Network Overview
+
+```mermaid
+flowchart LR
+   Browser ---|Web UI & TRPC API| App
+   Integrations/SDKs ---|Public HTTP API| App
+   subgraph i1["Application Network"]
+      App["Langfuse Application (Docker or Serverless)"]
+   end
+   subgraph i2["Database Network"]
+      DB["Postgres Database"]
+   end
+   App --- DB
+```
+
 ## Development Setup
 
 Requirements
@@ -73,6 +142,24 @@ Requirements
 
 On the main branch, we adhere to the best practices of [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/). All pull requests and branches are squash-merged to maintain a clean and readable history. This approach ensures the addition of a conventional commit message when merging contributions.
 
+## Test the public API
+
+The API is tested using Jest. With the development server running, you can run the tests with:
+
+Run all
+
+```bash
+npm run test
+```
+
+Run interactively in watch mode
+
+```bash
+npm run test:watch
+```
+
+These tests are also run in CI.
+
 ## CI/CD
 
 We use GitHub Actions for CI/CD, the configuration is in [`.github/workflows/pipeline.yml`](.github/workflows/pipeline.yml)
@@ -108,3 +195,5 @@ When a new release is tagged on the `main` branch (excluding prereleases), it tr
 ## License
 
 Langfuse is MIT licensed, except for `ee/` folder. See [LICENSE](LICENSE) and [docs](https://langfuse.com/docs/open-source) for more details.
+
+When contributing to the Langfuse codebase, you need to agree to the [Contributor License Agreement](https://cla-assistant.io/langfuse/langfuse). You only need to do this once and the CLA bot will remind you if you haven't signed it yet.

SECURITY.md

@@ -0,0 +1,4 @@
+## Security Policy
+We strongly recommend using the latest version of Langfuse to receive all security updates.
+
+For more information, please refer to the [Data Security & Privacy](https://langfuse.com/docs/data-security-privacy) page in the documentation or contact security@langfuse.com.

docker-compose.build.yml

@@ -8,7 +8,7 @@ services:
         - DATABASE_URL=postgresql://postgres:postgres@db:5432/postgres
         - NEXTAUTH_SECRET=mysecret
         - SALT=mysalt
-        - NEXTAUTH_URL=http:localhost:3000
+        - NEXTAUTH_URL=http://localhost:3000
     depends_on:
       - db
     ports:
@@ -18,7 +18,7 @@ services:
       - DATABASE_URL=postgresql://postgres:postgres@db:5432/postgres
       - NEXTAUTH_SECRET=mysecret
       - SALT=mysalt
-      - NEXTAUTH_URL=http:localhost:3000
+      - NEXTAUTH_URL=http://localhost:3000
       - TELEMETRY_ENABLED=${TELEMETRY_ENABLED:-true}
       - NEXT_PUBLIC_SIGN_UP_DISABLED=${NEXT_PUBLIC_SIGN_UP_DISABLED:-false}
       - LANGFUSE_ENABLE_EXPERIMENTAL_FEATURES=${LANGFUSE_ENABLE_EXPERIMENTAL_FEATURES:-false}

docker-compose.yml

@@ -12,7 +12,7 @@ services:
       - DATABASE_URL=postgresql://postgres:postgres@db:5432/postgres
       - NEXTAUTH_SECRET=mysecret
       - SALT=mysalt
-      - NEXTAUTH_URL=http:localhost:3000
+      - NEXTAUTH_URL=http://localhost:3000
       - TELEMETRY_ENABLED=${TELEMETRY_ENABLED:-true}
       - NEXT_PUBLIC_SIGN_UP_DISABLED=${NEXT_PUBLIC_SIGN_UP_DISABLED:-false}
       - LANGFUSE_ENABLE_EXPERIMENTAL_FEATURES=${LANGFUSE_ENABLE_EXPERIMENTAL_FEATURES:-false}

entrypoint.sh

@@ -1,7 +1,22 @@
 #!/bin/sh
 
-# Set DIRECT_URL to the value of DATABASE_URL, required for migrations
-export DIRECT_URL=$DATABASE_URL
+# Check if DATABASE_URL is not set
+if [ -z "$DATABASE_URL" ]; then
+    # Check if all required variables are provided
+    if [ -n "$DATABASE_HOST" ] && [ -n "$DATABASE_USERNAME" ] && [ -n "$DATABASE_PASSWORD" ]  && [ -n "$DATABASE_NAME" ]; then
+        # Construct DATABASE_URL from the provided variables
+        DATABASE_URL="postgresql://${DATABASE_USERNAME}:${DATABASE_PASSWORD}@${DATABASE_HOST}/${DATABASE_NAME}"
+        export DATABASE_URL
+    else
+        echo "Error: Required database environment variables are not set. Provide a postgres url for DATABASE_URL."
+        exit 1
+    fi
+fi
+
+# Set DIRECT_URL to the value of DATABASE_URL if it is not set, required for migrations
+if [ -z "$DIRECT_URL" ]; then
+    export DIRECT_URL=$DATABASE_URL
+fi
 
 # Apply migrations
 prisma migrate deploy

fern/apis/server/definition/api.yml

@@ -1,4 +1,10 @@
 name: langfuse
+docs: |
+  ## Authentication
+  Authenticate with the API using Basic Auth, get API keys in the project settings:
+
+  - username: Langfuse Public Key
+  - password: Langfuse Secret Key
 error-discrimination:
   strategy: status-code
 auth: basic

fern/apis/server/definition/commons.yml

@@ -1,32 +1,4 @@
 types:
-  # Create Bodies
-  CreateEventRequest:
-    properties:
-      id: optional<string>
-      traceId: optional<string>
-      name: optional<string>
-      startTime: optional<datetime>
-      metadata: optional<unknown>
-      input: optional<unknown>
-      output: optional<unknown>
-      level: optional<ObservationLevel>
-      statusMessage: optional<string>
-      parentObservationId: optional<string>
-      version: optional<string>
-  CreateSpanRequest:
-    extends: CreateEventRequest
-    properties:
-      endTime: optional<datetime>
-  CreateGenerationRequest:
-    extends: CreateSpanRequest
-    properties:
-      completionStartTime: optional<datetime>
-      model: optional<string>
-      modelParameters: optional<map<string, MapValue>>
-      prompt: optional<unknown>
-      completion: optional<unknown>
-      usage: optional<LLMUsage>
-
   # Objects
   Trace:
     properties:
@@ -35,10 +7,16 @@ types:
         docs: The unique identifier of a trace
       timestamp: datetime
       name: optional<string>
+      input: optional<unknown>
+      output: optional<unknown>
+      sessionId: optional<string>
       release: optional<string>
       version: optional<string>
       userId: optional<string>
       metadata: optional<unknown>
+      public:
+        type: optional<boolean>
+        docs: Public traces are accessible via url without login
   TraceWithDetails:
     extends: Trace
     properties:
@@ -53,6 +31,15 @@ types:
     properties:
       observations: list<Observation>
       scores: list<Score>
+  Session:
+    properties:
+      id: string
+      createdAt: datetime
+      projectId: string
+  SessionWithTraces:
+    extends: Session
+    properties:
+      traces: list<Trace>
   Observation:
     properties:
       id: string
@@ -68,12 +55,17 @@ types:
       version: optional<string>
       metadata: optional<unknown>
       output: optional<unknown>
-      promptTokens: integer
-      completionTokens: integer
-      totalTokens: integer
+      usage: optional<Usage>
       level: ObservationLevel
       statusMessage: optional<string>
       parentObservationId: optional<string>
+      promptId: optional<string>
+  Usage:
+    properties:
+      input: optional<integer>
+      output: optional<integer>
+      total: optional<integer>
+      unit: optional<ModelUsageUnit>
   Score:
     properties:
       id: string
@@ -121,6 +113,10 @@ types:
       datasetRunItems: list<DatasetRunItem>
 
   # Utilities
+  ModelUsageUnit:
+    enum:
+      - CHARACTERS
+      - TOKENS
   ObservationLevel:
     enum:
       - DEBUG
@@ -133,11 +129,6 @@ types:
       - optional<string>
       - optional<integer>
       - optional<boolean>
-  LLMUsage:
-    properties:
-      promptTokens: optional<integer>
-      completionTokens: optional<integer>
-      totalTokens: optional<integer>
   DatasetStatus:
     enum:
       - ACTIVE

fern/apis/server/definition/dataset-items.yml

@@ -7,13 +7,23 @@ service:
   endpoints:
     create:
       method: POST
-      docs: Create a dataset item
+      docs: Create a dataset item, upserts on id
       path: /dataset-items
       request: CreateDatasetItemRequest
       response: commons.DatasetItem
+    get:
+      docs: Get a specific dataset item
+      method: GET
+      path: /dataset-items/{id}
+      path-parameters:
+        id:
+          type: string
+      response: commons.DatasetItem
+
 types:
   CreateDatasetItemRequest:
     properties:
       datasetName: string
       input: unknown
       expectedOutput: optional<unknown>
+      id: optional<string>

fern/apis/server/definition/event.yml

@@ -1,13 +0,0 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/fern-api/fern/main/fern.schema.json
-imports:
-  commons: ./commons.yml
-service:
-  auth: true
-  base-path: /api/public
-  endpoints:
-    create:
-      docs: Add an event to the database
-      method: POST
-      path: /events
-      request: commons.CreateEventRequest
-      response: commons.Observation

fern/apis/server/definition/generations.yml

@@ -1,36 +0,0 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/fern-api/fern/main/fern.schema.json
-imports:
-  commons: ./commons.yml
-  pagination: ./utils/pagination.yml
-service:
-  auth: true
-  base-path: /api/public
-  endpoints:
-    log:
-      method: POST
-      path: /generations
-      request: commons.CreateGenerationRequest
-      response: commons.Observation
-    update:
-      method: PATCH
-      path: /generations
-      request: UpdateGenerationRequest
-      response: commons.Observation
-
-types:
-  UpdateGenerationRequest:
-    properties:
-      generationId: string
-      traceId: optional<string>
-      name: optional<string>
-      endTime: optional<datetime>
-      completionStartTime: optional<datetime>
-      model: optional<string>
-      modelParameters: optional<map<string, commons.MapValue>>
-      prompt: optional<unknown>
-      version: optional<string>
-      metadata: optional<unknown>
-      completion: optional<unknown>
-      usage: optional<commons.LLMUsage>
-      level: optional<commons.ObservationLevel>
-      statusMessage: optional<string>

fern/apis/server/definition/health.yml

@@ -7,9 +7,22 @@ service:
       docs: Check health of API and database
       method: GET
       path: /health
+      response: HealthResponse
       errors:
         - ServiceUnavailableError
 
+types:
+  HealthResponse:
+    properties:
+      version:
+        type: string
+        docs: Langfuse server version
+      status: string
+    examples:
+      - value:
+          version: 1.25.0
+          status: OK
+
 errors:
   ServiceUnavailableError:
     status-code: 503

fern/apis/server/definition/ingestion.yml

@@ -15,7 +15,7 @@ service:
         body:
           properties:
             batch: list<IngestionEvent>
-      response: commons.Score
+      response: IngestionResponse # will be reportet as 200 response, but endpoint returns 207
 
 types:
   IngestionEvent:
@@ -23,26 +23,205 @@ types:
     union:
       trace-create: TraceEvent
       score-create: ScoreEvent
-      observation-create: ObservationCreateEvent
-      observation-update: ObservationUpdateEvent
+      event-create: CreateEventEvent
+      generation-create: CreateGenerationEvent
+      generation-update: UpdateGenerationEvent
+      span-create: CreateSpanEvent
+      span-update: UpdateSpanEvent
+      sdk-log: SDKLogEvent
+
+      # both are legacy
+      observation-create: CreateObservationEvent
+      observation-update: UpdateObservationEvent
+
+  ObservationType:
+    enum:
+      - SPAN
+      - GENERATION
+      - EVENT
+
+  IngestionUsage:
+    discriminated: false
+    union:
+      - commons.Usage
+      - OpenAIUsage
+
+  OpenAIUsage:
+    properties:
+      promptTokens: optional<integer>
+      completionTokens: optional<integer>
+      totalTokens: optional<integer>
+
+  OptionalObservationBody:
+    properties:
+      traceId: optional<string>
+      name: optional<string>
+      startTime: optional<datetime>
+      metadata: optional<unknown>
+      input: optional<unknown>
+      output: optional<unknown>
+      level: optional<commons.ObservationLevel>
+      statusMessage: optional<string>
+      parentObservationId: optional<string>
+      version: optional<string>
+
+  CreateEventBody:
+    extends: OptionalObservationBody
+    properties:
+      id: optional<string>
+
+  UpdateEventBody:
+    extends: OptionalObservationBody
+    properties:
+      id: string
+
+  CreateSpanBody:
+    extends: CreateEventBody
+    properties:
+      endTime: optional<datetime>
+
+  UpdateSpanBody:
+    extends: UpdateEventBody
+    properties:
+      endTime: optional<datetime>
+
+  CreateGenerationBody:
+    extends: CreateSpanBody
+    properties:
+      completionStartTime: optional<datetime>
+      model: optional<string>
+      modelParameters: optional<map<string, commons.MapValue>>
+      usage: optional<IngestionUsage>
+      promptName: optional<string>
+      promptVersion: optional<integer>
+
+  UpdateGenerationBody:
+    extends: UpdateSpanBody
+    properties:
+      completionStartTime: optional<datetime>
+      model: optional<string>
+      modelParameters: optional<map<string, commons.MapValue>>
+      usage: optional<IngestionUsage>
+      promptName: optional<string>
+      promptVersion: optional<integer>
+
+  ObservationBody:
+    properties:
+      id: optional<string>
+      traceId: optional<string>
+      type: ObservationType
+      name: optional<string>
+      startTime: optional<datetime>
+      endTime: optional<datetime>
+      completionStartTime: optional<datetime>
+      model: optional<string>
+      modelParameters: optional<map<string, commons.MapValue>>
+      input: optional<unknown>
+      version: optional<string>
+      metadata: optional<unknown>
+      output: optional<unknown>
+      usage: optional<commons.Usage>
+      level: optional<commons.ObservationLevel>
+      statusMessage: optional<string>
+      parentObservationId: optional<string>
+
+  TraceBody:
+    properties:
+      id: optional<string>
+      name: optional<string>
+      userId: optional<string>
+      input: optional<unknown>
+      output: optional<unknown>
+      sessionId: optional<string>
+      release: optional<string>
+      version: optional<string>
+      metadata: optional<unknown>
+      public:
+        type: optional<boolean>
+        docs: Make trace publicly accessible via url
+
+  SDKLogBody:
+    properties:
+      log: unknown
+
+  ScoreBody:
+    properties:
+      id: optional<string>
+      traceId: string
+      name: string
+      value: double
+      observationId: optional<string>
+      comment: optional<string>
+
+  BaseEvent:
+    properties:
+      id: string
+      timestamp: string
+      metadata: unknown
 
   TraceEvent:
+    extends: BaseEvent
     properties:
-      id: string
-      timestamp: string
-      body: commons.Trace
-  ObservationCreateEvent:
+      body: TraceBody
+
+  CreateObservationEvent:
+    extends: BaseEvent
     properties:
-      id: string
-      timestamp: string
-      body: commons.Observation
-  ObservationUpdateEvent:
+      body: ObservationBody
+
+  UpdateObservationEvent:
+    extends: BaseEvent
     properties:
-      id: string
-      timestamp: string
-      body: commons.Observation
+      body: ObservationBody
+
   ScoreEvent:
+    extends: BaseEvent
+    properties:
+      body: ScoreBody
+
+  SDKLogEvent:
+    extends: BaseEvent
+    properties:
+      body: SDKLogBody
+
+  CreateGenerationEvent:
+    extends: BaseEvent
+    properties:
+      body: CreateGenerationBody
+
+  UpdateGenerationEvent:
+    extends: BaseEvent
+    properties:
+      body: UpdateGenerationBody
+
+  CreateSpanEvent:
+    extends: BaseEvent
+    properties:
+      body: CreateSpanBody
+
+  UpdateSpanEvent:
+    extends: BaseEvent
+    properties:
+      body: UpdateSpanBody
+
+  CreateEventEvent:
+    extends: BaseEvent
+    properties:
+      body: CreateEventBody
+
+  IngestionSuccess:
     properties:
       id: string
-      timestamp: string
-      body: commons.Score
+      status: integer
+
+  IngestionError:
+    properties:
+      id: string
+      status: integer
+      message: optional<string>
+      error: optional<unknown>
+
+  IngestionResponse:
+    properties:
+      successes: list<IngestionSuccess>
+      errors: list<IngestionError>

fern/apis/server/definition/prompts.yml

@@ -0,0 +1,36 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/fern-api/fern/main/fern.schema.json
+imports:
+  commons: ./commons.yml
+  pagination: ./utils/pagination.yml
+service:
+  auth: true
+  base-path: /api/public
+  endpoints:
+    get:
+      docs: Get a specific prompt
+      method: GET
+      path: /prompts
+      request:
+        name: GetParameterRequest
+        query-parameters:
+          name: string
+          version: optional<integer>
+      response: Prompt
+    create:
+      docs: Create a specific prompt
+      method: POST
+      path: /prompts
+      request: CreatePromptRequest
+      response: Prompt
+
+types:
+  CreatePromptRequest:
+    properties:
+      name: string
+      isActive: boolean
+      prompt: string
+  Prompt:
+    properties:
+      name: string
+      version: integer
+      prompt: string

fern/apis/server/definition/sessions.yml

@@ -0,0 +1,17 @@
+# yaml-language-server: $schema=https://raw.githubusercontent.com/fern-api/fern/main/fern.schema.json
+imports:
+  pagination: ./utils/pagination.yml
+  commons: ./commons.yml
+service:
+  auth: true
+  base-path: /api/public
+  endpoints:
+    get:
+      docs: Get a session
+      method: GET
+      path: /sessions/{sessionId}
+      path-parameters:
+        sessionId:
+          type: string
+          docs: The unique id of a session
+      response: commons.SessionWithTraces

fern/apis/server/definition/span.yml

@@ -1,33 +0,0 @@
-# yaml-language-server: $schema=https://raw.githubusercontent.com/fern-api/fern/main/fern.schema.json
-imports:
-  commons: ./commons.yml
-service:
-  auth: true
-  base-path: /api/public
-  endpoints:
-    create:
-      docs: Add a span to the database
-      method: POST
-      path: /spans
-      request: commons.CreateSpanRequest
-      response: commons.Observation
-    update:
-      docs: Update a span to the database
-      method: PATCH
-      path: /spans
-      request: UpdateSpanRequest
-      response: commons.Observation
-
-types:
-  UpdateSpanRequest:
-    properties:
-      spanId: string
-      traceId: optional<string>
-      endTime: optional<datetime>
-      name: optional<string>
-      metadata: optional<unknown>
-      input: optional<unknown>
-      output: optional<unknown>
-      level: optional<commons.ObservationLevel>
-      version: optional<string>
-      statusMessage: optional<string>

fern/apis/server/definition/trace.yml

@@ -6,12 +6,6 @@ service:
   auth: true
   base-path: /api/public
   endpoints:
-    create:
-      docs: Add a trace to the database
-      method: POST
-      path: /traces
-      request: CreateTraceRequest
-      response: commons.Trace
     get:
       docs: Get a specific trace
       method: GET
@@ -35,15 +29,6 @@ service:
       response: Traces
 
 types:
-  CreateTraceRequest:
-    properties:
-      id: optional<string>
-      name: optional<string>
-      userId: optional<string>
-      externalId: optional<string>
-      release: optional<string>
-      version: optional<string>
-      metadata: optional<unknown>
   Traces:
     properties:
       data: list<commons.TraceWithDetails>

fern/apis/server/generators.yml

@@ -11,13 +11,14 @@ groups:
           namespaceExport: Langfuse
           allowCustomFetcher: true
       - name: fernapi/fern-python-sdk
-        version: 0.6.6
+        version: 0.7.3
         output:
           location: local-file-system
           path: ../../../generated/python
         config:
-          namespaceExport: Langfuse
-          allowCustomFetcher: true
+          client_class_name: FernLangfuse
+          pydantic_config:
+            require_optional_fields: false
       - name: fernapi/fern-typescript-node-sdk
         version: 0.7.1
         output:

fern/fern.config.json

@@ -1,4 +1,4 @@
 {
   "organization": "finto",
-  "version": "0.15.3"
+  "version": "0.16.7"
 }

generated/postman/collection.json

@@ -2,7 +2,7 @@
   "info": {
     "name": "Langfuse",
     "schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
-    "description": null
+    "description": "## Authentication\nAuthenticate with the API using Basic Auth, get API keys in the project settings:\n\n- username: Langfuse Public Key\n- password: Langfuse Secret Key\n"
   },
   "variable": [
     {
@@ -46,7 +46,7 @@
           "_type": "endpoint",
           "name": "Create",
           "request": {
-            "description": "Create a dataset item",
+            "description": "Create a dataset item, upserts on id",
             "url": {
               "raw": "{{baseUrl}}/api/public/dataset-items",
               "host": [
@@ -65,7 +65,7 @@
             "auth": null,
             "body": {
               "mode": "raw",
-              "raw": "{\n    \"datasetName\": \"example\",\n    \"input\": \"UNKNOWN\",\n    \"expectedOutput\": \"UNKNOWN\"\n}",
+              "raw": "{\n    \"datasetName\": \"example\",\n    \"input\": \"UNKNOWN\",\n    \"expectedOutput\": \"UNKNOWN\",\n    \"id\": \"example\"\n}",
               "options": {
                 "raw": {
                   "language": "json"
@@ -74,6 +74,38 @@
             }
           },
           "response": []
+        },
+        {
+          "_type": "endpoint",
+          "name": "Get",
+          "request": {
+            "description": "Get a specific dataset item",
+            "url": {
+              "raw": "{{baseUrl}}/api/public/dataset-items/:id",
+              "host": [
+                "{{baseUrl}}"
+              ],
+              "path": [
+                "api",
+                "public",
+                "dataset-items",
+                ":id"
+              ],
+              "query": [],
+              "variable": [
+                {
+                  "key": "id",
+                  "value": "",
+                  "description": null
+                }
+              ]
+            },
+            "header": [],
+            "method": "GET",
+            "auth": null,
+            "body": null
+          },
+          "response": []
         }
       ]
     },
@@ -228,119 +260,6 @@
         }
       ]
     },
-    {
-      "_type": "container",
-      "description": null,
-      "name": "Event",
-      "item": [
-        {
-          "_type": "endpoint",
-          "name": "Create",
-          "request": {
-            "description": "Add an event to the database",
-            "url": {
-              "raw": "{{baseUrl}}/api/public/events",
-              "host": [
-                "{{baseUrl}}"
-              ],
-              "path": [
-                "api",
-                "public",
-                "events"
-              ],
-              "query": [],
-              "variable": []
-            },
-            "header": [],
-            "method": "POST",
-            "auth": null,
-            "body": {
-              "mode": "raw",
-              "raw": "{\n    \"id\": \"example\",\n    \"traceId\": \"example\",\n    \"name\": \"example\",\n    \"startTime\": \"1994-11-05T13:15:30Z\",\n    \"metadata\": \"UNKNOWN\",\n    \"input\": \"UNKNOWN\",\n    \"output\": \"UNKNOWN\",\n    \"level\": \"DEBUG\",\n    \"statusMessage\": \"example\",\n    \"parentObservationId\": \"example\",\n    \"version\": \"example\"\n}",
-              "options": {
-                "raw": {
-                  "language": "json"
-                }
-              }
-            }
-          },
-          "response": []
-        }
-      ]
-    },
-    {
-      "_type": "container",
-      "description": null,
-      "name": "Generations",
-      "item": [
-        {
-          "_type": "endpoint",
-          "name": "Log",
-          "request": {
-            "description": null,
-            "url": {
-              "raw": "{{baseUrl}}/api/public/generations",
-              "host": [
-                "{{baseUrl}}"
-              ],
-              "path": [
-                "api",
-                "public",
-                "generations"
-              ],
-              "query": [],
-              "variable": []
-            },
-            "header": [],
-            "method": "POST",
-            "auth": null,
-            "body": {
-              "mode": "raw",
-              "raw": "{\n    \"completionStartTime\": \"1994-11-05T13:15:30Z\",\n    \"model\": \"example\",\n    \"modelParameters\": {\n        \"example\": \"example\"\n    },\n    \"prompt\": \"UNKNOWN\",\n    \"completion\": \"UNKNOWN\",\n    \"usage\": {\n        \"promptTokens\": 0,\n        \"completionTokens\": 0,\n        \"totalTokens\": 0\n    },\n    \"endTime\": \"1994-11-05T13:15:30Z\",\n    \"id\": \"example\",\n    \"traceId\": \"example\",\n    \"name\": \"example\",\n    \"startTime\": \"1994-11-05T13:15:30Z\",\n    \"metadata\": \"UNKNOWN\",\n    \"input\": \"UNKNOWN\",\n    \"output\": \"UNKNOWN\",\n    \"level\": \"DEBUG\",\n    \"statusMessage\": \"example\",\n    \"parentObservationId\": \"example\",\n    \"version\": \"example\"\n}",
-              "options": {
-                "raw": {
-                  "language": "json"
-                }
-              }
-            }
-          },
-          "response": []
-        },
-        {
-          "_type": "endpoint",
-          "name": "Update",
-          "request": {
-            "description": null,
-            "url": {
-              "raw": "{{baseUrl}}/api/public/generations",
-              "host": [
-                "{{baseUrl}}"
-              ],
-              "path": [
-                "api",
-                "public",
-                "generations"
-              ],
-              "query": [],
-              "variable": []
-            },
-            "header": [],
-            "method": "PATCH",
-            "auth": null,
-            "body": {
-              "mode": "raw",
-              "raw": "{\n    \"generationId\": \"example\",\n    \"traceId\": \"example\",\n    \"name\": \"example\",\n    \"endTime\": \"1994-11-05T13:15:30Z\",\n    \"completionStartTime\": \"1994-11-05T13:15:30Z\",\n    \"model\": \"example\",\n    \"modelParameters\": {\n        \"example\": \"example\"\n    },\n    \"prompt\": \"UNKNOWN\",\n    \"version\": \"example\",\n    \"metadata\": \"UNKNOWN\",\n    \"completion\": \"UNKNOWN\",\n    \"usage\": {\n        \"promptTokens\": 0,\n        \"completionTokens\": 0,\n        \"totalTokens\": 0\n    },\n    \"level\": \"DEBUG\",\n    \"statusMessage\": \"example\"\n}",
-              "options": {
-                "raw": {
-                  "language": "json"
-                }
-              }
-            }
-          },
-          "response": []
-        }
-      ]
-    },
     {
       "_type": "container",
       "description": null,
@@ -401,7 +320,7 @@
             "auth": null,
             "body": {
               "mode": "raw",
-              "raw": "{\n    \"batch\": [\n        {\n            \"type\": \"trace-create\",\n            \"id\": \"example\",\n            \"timestamp\": \"example\",\n            \"body\": {\n                \"id\": \"example\",\n                \"timestamp\": \"1994-11-05T13:15:30Z\",\n                \"name\": \"example\",\n                \"release\": \"example\",\n                \"version\": \"example\",\n                \"userId\": \"example\",\n                \"metadata\": \"UNKNOWN\"\n            }\n        }\n    ]\n}",
+              "raw": "{\n    \"batch\": [\n        {\n            \"type\": \"trace-create\",\n            \"body\": {\n                \"id\": \"example\",\n                \"name\": \"example\",\n                \"userId\": \"example\",\n                \"input\": \"UNKNOWN\",\n                \"output\": \"UNKNOWN\",\n                \"sessionId\": \"example\",\n                \"release\": \"example\",\n                \"version\": \"example\",\n                \"metadata\": \"UNKNOWN\",\n                \"public\": true\n            },\n            \"id\": \"example\",\n            \"timestamp\": \"example\",\n            \"metadata\": \"UNKNOWN\"\n        }\n    ]\n}",
               "options": {
                 "raw": {
                   "language": "json"
@@ -545,6 +464,82 @@
         }
       ]
     },
+    {
+      "_type": "container",
+      "description": null,
+      "name": "Prompts",
+      "item": [
+        {
+          "_type": "endpoint",
+          "name": "Get",
+          "request": {
+            "description": "Get a specific prompt",
+            "url": {
+              "raw": "{{baseUrl}}/api/public/prompts?name=&version=",
+              "host": [
+                "{{baseUrl}}"
+              ],
+              "path": [
+                "api",
+                "public",
+                "prompts"
+              ],
+              "query": [
+                {
+                  "key": "name",
+                  "value": "",
+                  "description": null
+                },
+                {
+                  "key": "version",
+                  "value": "",
+                  "description": null
+                }
+              ],
+              "variable": []
+            },
+            "header": [],
+            "method": "GET",
+            "auth": null,
+            "body": null
+          },
+          "response": []
+        },
+        {
+          "_type": "endpoint",
+          "name": "Create",
+          "request": {
+            "description": "Create a specific prompt",
+            "url": {
+              "raw": "{{baseUrl}}/api/public/prompts",
+              "host": [
+                "{{baseUrl}}"
+              ],
+              "path": [
+                "api",
+                "public",
+                "prompts"
+              ],
+              "query": [],
+              "variable": []
+            },
+            "header": [],
+            "method": "POST",
+            "auth": null,
+            "body": {
+              "mode": "raw",
+              "raw": "{\n    \"name\": \"example\",\n    \"isActive\": true,\n    \"prompt\": \"example\"\n}",
+              "options": {
+                "raw": {
+                  "language": "json"
+                }
+              }
+            }
+          },
+          "response": []
+        }
+      ]
+    },
     {
       "_type": "container",
       "description": null,
@@ -634,71 +629,37 @@
     {
       "_type": "container",
       "description": null,
-      "name": "Span",
+      "name": "Sessions",
       "item": [
         {
           "_type": "endpoint",
-          "name": "Create",
+          "name": "Get",
           "request": {
-            "description": "Add a span to the database",
+            "description": "Get a session",
             "url": {
-              "raw": "{{baseUrl}}/api/public/spans",
+              "raw": "{{baseUrl}}/api/public/sessions/:sessionId",
               "host": [
                 "{{baseUrl}}"
               ],
               "path": [
                 "api",
                 "public",
-                "spans"
+                "sessions",
+                ":sessionId"
               ],
               "query": [],
-              "variable": []
+              "variable": [
+                {
+                  "key": "sessionId",
+                  "value": "",
+                  "description": "The unique id of a session"
+                }
+              ]
             },
             "header": [],
-            "method": "POST",
+            "method": "GET",
             "auth": null,
-            "body": {
-              "mode": "raw",
-              "raw": "{\n    \"endTime\": \"1994-11-05T13:15:30Z\",\n    \"id\": \"example\",\n    \"traceId\": \"example\",\n    \"name\": \"example\",\n    \"startTime\": \"1994-11-05T13:15:30Z\",\n    \"metadata\": \"UNKNOWN\",\n    \"input\": \"UNKNOWN\",\n    \"output\": \"UNKNOWN\",\n    \"level\": \"DEBUG\",\n    \"statusMessage\": \"example\",\n    \"parentObservationId\": \"example\",\n    \"version\": \"example\"\n}",
-              "options": {
-                "raw": {
-                  "language": "json"
-                }
-              }
-            }
-          },
-          "response": []
-        },
-        {
-          "_type": "endpoint",
-          "name": "Update",
-          "request": {
-            "description": "Update a span to the database",
-            "url": {
-              "raw": "{{baseUrl}}/api/public/spans",
-              "host": [
-                "{{baseUrl}}"
-              ],
-              "path": [
-                "api",
-                "public",
-                "spans"
-              ],
-              "query": [],
-              "variable": []
-            },
-            "header": [],
-            "method": "PATCH",
-            "auth": null,
-            "body": {
-              "mode": "raw",
-              "raw": "{\n    \"spanId\": \"example\",\n    \"traceId\": \"example\",\n    \"endTime\": \"1994-11-05T13:15:30Z\",\n    \"name\": \"example\",\n    \"metadata\": \"UNKNOWN\",\n    \"input\": \"UNKNOWN\",\n    \"output\": \"UNKNOWN\",\n    \"level\": \"DEBUG\",\n    \"version\": \"example\",\n    \"statusMessage\": \"example\"\n}",
-              "options": {
-                "raw": {
-                  "language": "json"
-                }
-              }
-            }
+            "body": null
           },
           "response": []
         }
@@ -709,39 +670,6 @@
       "description": null,
       "name": "Trace",
       "item": [
-        {
-          "_type": "endpoint",
-          "name": "Create",
-          "request": {
-            "description": "Add a trace to the database",
-            "url": {
-              "raw": "{{baseUrl}}/api/public/traces",
-              "host": [
-                "{{baseUrl}}"
-              ],
-              "path": [
-                "api",
-                "public",
-                "traces"
-              ],
-              "query": [],
-              "variable": []
-            },
-            "header": [],
-            "method": "POST",
-            "auth": null,
-            "body": {
-              "mode": "raw",
-              "raw": "{\n    \"id\": \"example\",\n    \"name\": \"example\",\n    \"userId\": \"example\",\n    \"externalId\": \"example\",\n    \"release\": \"example\",\n    \"version\": \"example\",\n    \"metadata\": \"UNKNOWN\"\n}",
-              "options": {
-                "raw": {
-                  "language": "json"
-                }
-              }
-            }
-          },
-          "response": []
-        },
         {
           "_type": "endpoint",
           "name": "Get",

jest.config.mjs

@@ -18,6 +18,8 @@ const serverTestConfig = {
   testEnvironment: "jest-environment-node",
 };
 
+// To avoid the "Cannot use import statement outside a module" errors while transforming ESM.
+const esModules = ["superjson"];
 // Add any custom config to be passed to Jest
 /** @type {import('jest').Config} */
 const config = {
@@ -26,7 +28,10 @@ const config = {
   verbose: true,
   projects: [
     await createJestConfig(clientTestConfig)(),
-    await createJestConfig(serverTestConfig)(),
+    {
+      ...(await createJestConfig(serverTestConfig)()),
+      transformIgnorePatterns: [`/node_modules/(?!(${esModules.join("|")})/)`],
+    },
   ],
 };
 

next.config.mjs

@@ -23,27 +23,37 @@ const nextConfig = {
   output: "standalone",
 
   async headers() {
-    // Required to check authentication status from langfuse.com
-    if (env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION !== undefined)
-      return [
-        {
-          source: "/api/auth/session",
-          headers: [
-            {
-              key: "Access-Control-Allow-Origin",
-              value: "https://langfuse.com",
-            },
-            { key: "Access-Control-Allow-Credentials", value: "true" },
-            { key: "Access-Control-Allow-Methods", value: "GET,POST" },
-            {
-              key: "Access-Control-Allow-Headers",
-              value: "Content-Type, Authorization",
-            },
-          ],
-        },
-      ];
-
-    return [];
+    return [
+      {
+        source: "/:path*",
+        headers: [
+          {
+            key: "x-frame-options",
+            value: "SAMEORIGIN",
+          },
+        ],
+      },
+      // Required to check authentication status from langfuse.com
+      ...(env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION !== undefined ?
+        [
+          {
+            source: "/api/auth/session",
+            headers: [
+              {
+                key: "Access-Control-Allow-Origin",
+                value: "https://langfuse.com",
+              },
+              { key: "Access-Control-Allow-Credentials", value: "true" },
+              { key: "Access-Control-Allow-Methods", value: "GET,POST" },
+              {
+                key: "Access-Control-Allow-Headers",
+                value: "Content-Type, Authorization",
+              },
+            ]
+          },
+        ] : []
+      )
+    ]
   },
 
   // webassembly support for @dqbd/tiktoken

package.json

@@ -1,6 +1,6 @@
 {
   "name": "langfuse-core",
-  "version": "1.8.2",
+  "version": "1.27.1",
   "private": true,
   "scripts": {
     "prebuild": "cp generated/openapi-client/openapi.yml public/openapi-client.yml && cp generated/openapi-server/openapi.yml public/openapi-server.yml",
@@ -8,6 +8,7 @@
     "dev": "next dev",
     "postinstall": "prisma generate",
     "lint": "next lint",
+    "lint:fix": "next lint --fix",
     "prettier": "prettier --write ./src *.{ts,js}",
     "clean": "rm -rf node_modules",
     "start": "next start",
@@ -24,15 +25,20 @@
   },
   "dependencies": {
     "@anthropic-ai/tokenizer": "^0.0.4",
+    "@aws-sdk/client-s3": "^3.478.0",
+    "@aws-sdk/s3-request-presigner": "^3.478.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@formkit/auto-animate": "^0.8.1",
     "@headlessui/react": "^1.7.17",
-    "@heroicons/react": "^2.0.18",
+    "@heroicons/react": "^2.1.1",
     "@hookform/resolvers": "^3.3.2",
     "@next-auth/prisma-adapter": "^1.0.7",
-    "@prisma/client": "^5.6.0",
+    "@prisma/client": "^5.7.1",
+    "@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",
@@ -48,87 +54,96 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@sentry/nextjs": "^7.83.0",
-    "@sentry/profiling-node": "^1.2.6",
+    "@react-email/components": "^0.0.12",
+    "@react-email/render": "^0.0.10",
+    "@sentry/nextjs": "^7.91.0",
+    "@sentry/profiling-node": "^1.3.2",
+    "@sentry/types": "^7.88.0",
     "@t3-oss/env-nextjs": "^0.7.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@tanstack/react-query": "^4.36.1",
-    "@tanstack/react-table": "^8.10.7",
+    "@tanstack/react-table": "^8.11.2",
     "@tremor/react": "^3.11.1",
     "@trpc/client": "^10.44.1",
     "@trpc/next": "^10.44.1",
     "@trpc/react-query": "^10.44.1",
     "@trpc/server": "^10.44.1",
     "@vercel/edge-config": "^0.4.1",
-    "axios": "^1.6.2",
+    "axios": "^1.6.3",
     "bcryptjs": "^2.4.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",
+    "core-js": "^3.34.0",
     "cors": "^2.8.5",
     "date-fns": "^2.30.0",
     "decimal.js": "^10.4.3",
     "exponential-backoff": "^3.1.1",
+    "follow-redirects": "^1.15.4",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.294.0",
-    "next": "^14.0.3",
+    "lucide-react": "^0.302.0",
+    "mustache": "^4.2.0",
+    "next": "^14.0.4",
     "next-auth": "^4.24.5",
     "next-query-params": "^5.0.0",
-    "next-swagger-doc": "^0.4.0",
-    "posthog-js": "^1.93.3",
-    "posthog-node": "^3.1.3",
+    "nodemailer": "^6.9.7",
+    "posthog-js": "^1.96.1",
+    "posthog-node": "^3.2.1",
     "react": "18.2.0",
-    "react-day-picker": "^8.9.1",
+    "react-day-picker": "^8.10.0",
     "react-dom": "18.2.0",
-    "react-hook-form": "^7.48.2",
+    "react-hook-form": "^7.49.2",
     "react-icons": "^4.12.0",
     "react-responsive": "^9.0.2",
-    "react18-json-view": "^0.2.7-canary.1",
+    "react18-json-view": "^0.2.7-canary.2",
     "superagent": "^8.1.2",
     "superjson": "2.2.1",
-    "tailwind-merge": "^2.0.0",
+    "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
     "tiktoken": "^1.0.11",
-    "ts-pattern": "^5.0.5",
+    "ts-pattern": "^5.0.6",
     "use-query-params": "^2.2.1",
     "uuid": "^9.0.1",
     "zod": "^3.22.4"
   },
   "devDependencies": {
+    "@jedmao/location": "^3.0.0",
     "@playwright/test": "^1.40.1",
     "@release-it/bumper": "^6.0.1",
-    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
     "@types/bcryptjs": "^2.4.6",
     "@types/cors": "^2.8.17",
-    "@types/eslint": "^8.44.7",
-    "@types/jest": "^29.5.10",
+    "@types/eslint": "^8.56.0",
+    "@types/jest": "^29.5.11",
     "@types/js-yaml": "^4.0.9",
     "@types/lodash": "^4.14.202",
-    "@types/node": "20.10.0",
-    "@types/react": "^18.2.39",
-    "@types/react-dom": "^18.2.17",
+    "@types/node": "20.10.5",
+    "@types/nodemailer": "^6.4.14",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
     "@types/swagger-ui-react": "^4.18.3",
     "@types/uuid": "^9.0.7",
-    "@typescript-eslint/eslint-plugin": "^6.13.1",
-    "@typescript-eslint/parser": "^6.13.1",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
     "autoprefixer": "^10.4.16",
     "dotenv-cli": "^7.3.0",
-    "eslint": "^8.54.0",
-    "eslint-config-next": "^14.0.3",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.0.4",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8.4.31",
-    "prettier": "^3.1.0",
-    "prettier-plugin-tailwindcss": "^0.5.7",
-    "prisma": "^5.6.0",
-    "release-it": "^17.0.0",
+    "postcss": "^8.4.32",
+    "prettier": "^3.1.1",
+    "prettier-plugin-tailwindcss": "^0.5.9",
+    "prisma": "^5.7.1",
+    "release-it": "^17.0.1",
     "swagger-jsdoc": "^6.2.8",
-    "tailwindcss": "^3.3.5",
-    "ts-node": "^10.9.1",
+    "tailwindcss": "^3.4.0",
+    "ts-node": "^10.9.2",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.3"
   },
   "ct3aMetadata": {
     "initVersion": "7.13.0"
@@ -145,7 +160,12 @@
       "release": true,
       "web": true,
       "autoGenerate": true,
-      "releaseName": "v${version}"
+      "releaseName": "v${version}",
+      "comments": {
+        "submit": true,
+        "issue": ":rocket: _This issue has been resolved in v${version}. See [${releaseName}](${releaseUrl}) for release notes._",
+        "pr": ":rocket: _This pull request is included in v${version}. See [${releaseName}](${releaseUrl}) for release notes._"
+      }
     },
     "plugins": {
       "@release-it/bumper": {

prisma/migrations/20231129013314_invites/migration.sql

@@ -0,0 +1,27 @@
+-- CreateTable
+CREATE TABLE "membership_invitations" (
+    "id" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "role" "MembershipRole" NOT NULL,
+    "project_id" TEXT NOT NULL,
+    "sender_id" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "membership_invitations_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "membership_invitations_id_key" ON "membership_invitations"("id");
+
+-- CreateIndex
+CREATE INDEX "membership_invitations_project_id_idx" ON "membership_invitations"("project_id");
+
+-- CreateIndex
+CREATE INDEX "membership_invitations_email_idx" ON "membership_invitations"("email");
+
+-- AddForeignKey
+ALTER TABLE "membership_invitations" ADD CONSTRAINT "membership_invitations_project_id_fkey" FOREIGN KEY ("project_id") REFERENCES "projects"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "membership_invitations" ADD CONSTRAINT "membership_invitations_sender_id_fkey" FOREIGN KEY ("sender_id") REFERENCES "users"("id") ON DELETE SET NULL ON UPDATE CASCADE;

prisma/migrations/20231130003317_trace_session_input_output/migration.sql

@@ -0,0 +1,34 @@
+-- AlterTable
+ALTER TABLE "traces" ADD COLUMN     "input" JSONB,
+ADD COLUMN     "output" JSONB,
+ADD COLUMN     "session_id" TEXT;
+
+-- CreateTable
+CREATE TABLE "trace_sessions" (
+    "id" TEXT NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "project_id" TEXT NOT NULL,
+    "bookmarked" BOOLEAN NOT NULL DEFAULT false,
+    "public" BOOLEAN NOT NULL DEFAULT false,
+
+    CONSTRAINT "trace_sessions_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "trace_sessions_project_id_idx" ON "trace_sessions"("project_id");
+
+-- CreateIndex
+CREATE INDEX "trace_sessions_created_at_idx" ON "trace_sessions"("created_at");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "trace_sessions_id_project_id_key" ON "trace_sessions"("id", "project_id");
+
+-- CreateIndex
+CREATE INDEX "traces_session_id_idx" ON "traces"("session_id");
+
+-- AddForeignKey
+ALTER TABLE "trace_sessions" ADD CONSTRAINT "trace_sessions_project_id_fkey" FOREIGN KEY ("project_id") REFERENCES "projects"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "traces" ADD CONSTRAINT "traces_session_id_fkey" FOREIGN KEY ("session_id") REFERENCES "trace_sessions"("id") ON DELETE SET NULL ON UPDATE CASCADE;

prisma/migrations/20231204223505_add_unit_to_observations/migration.sql

@@ -0,0 +1,4 @@
+-- AlterTable
+-- Adding this migration does not lock the postgres table. For non volaitile data, the default value is stored in the 
+-- table metadata and accessed on read query time. No table re-write is required (https://www.postgresql.org/docs/current/sql-altertable.html#:~:text=When%20a%20column%20is%20added,is%20specified%2C%20NULL%20is%20used.)
+ALTER TABLE "observations" ADD COLUMN "unit" TEXT NOT NULL DEFAULT 'TOKENS';

prisma/migrations/20231223230007_cloud_config/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "projects" ADD COLUMN     "cloud_config" JSONB;

prisma/migrations/20231223230008_accounts_add_cols_azure_ad_auth/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "Account" ADD COLUMN     "expires_in" INTEGER,
+ADD COLUMN     "ext_expires_in" INTEGER;

prisma/migrations/20231230151856_add_prompt_table/migration.sql

@@ -0,0 +1,29 @@
+-- AlterTable
+ALTER TABLE "observations" ADD COLUMN     "prompt_id" TEXT;
+
+-- CreateTable
+CREATE TABLE "prompts" (
+    "id" TEXT NOT NULL,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updated_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "project_id" TEXT NOT NULL,
+    "created_by" TEXT NOT NULL,
+    "prompt" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "version" INTEGER NOT NULL,
+    "is_active" BOOLEAN NOT NULL,
+
+    CONSTRAINT "prompts_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "prompts_project_id_name_version_idx" ON "prompts"("project_id", "name", "version");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "prompts_project_id_name_version_key" ON "prompts"("project_id", "name", "version");
+
+-- AddForeignKey
+ALTER TABLE "observations" ADD CONSTRAINT "observations_prompt_id_fkey" FOREIGN KEY ("prompt_id") REFERENCES "prompts"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "prompts" ADD CONSTRAINT "prompts_project_id_fkey" FOREIGN KEY ("project_id") REFERENCES "projects"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/migrations/20240103135918_add_pricings/migration.sql

@@ -0,0 +1,30 @@
+-- Migration to add gpt-3.5-turbo-1106 and gpt-3.5-turbo-instruct models
+
+INSERT INTO pricings (
+  id,
+  model_name, 
+  pricing_unit, 
+  price,
+  currency,
+  token_type
+)
+VALUES
+  ('clqqpc2pr000008l3hvy63gxy','gpt-3.5-turbo-1106', 'PER_1000_TOKENS', 0.001, 'USD', 'PROMPT'),
+  ('clqqpcb6d000208l3atrfbmou','gpt-3.5-turbo-1106', 'PER_1000_TOKENS', 0.002, 'USD', 'COMPLETION'),
+  ('clqqpdh45000008lfgrnx76cv','gpt-3.5-turbo-instruct', 'PER_1000_TOKENS', 0.0015, 'USD', 'PROMPT'),
+  ('clqqpdjya000108lf3s4b4c4m','gpt-3.5-turbo-instruct', 'PER_1000_TOKENS', 0.002, 'USD', 'COMPLETION'),
+  ('clnnuiuq6000008l4dxp43wc6', 'claude-instant-1.2', 'PER_1000_TOKENS', 0.00163, 'USD', 'PROMPT'),
+  ('clnnujlmj000108l48wne4ii9', 'claude-instant-1.2', 'PER_1000_TOKENS', 0.00551, 'USD', 'COMPLETION'),
+  ('clnnukutg000208l49qqt9lyr', 'claude-instant-1.1', 'PER_1000_TOKENS', 0.00163, 'USD', 'PROMPT'),
+  ('clnnun3x3000408l490qz9uv0', 'claude-instant-1.1', 'PER_1000_TOKENS', 0.00551, 'USD', 'COMPLETION'),
+  ('clnnuosvy000508l4gsjy2pp4', 'claude-2.0', 'PER_1000_TOKENS', 0.01102, 'USD', 'PROMPT'),
+  ('clnnuqcns000608l40qaz8trt', 'claude-2.0', 'PER_1000_TOKENS', 0.03268, 'USD', 'COMPLETION'),
+  ('clnnuuif8000808l4gal4fjq4', 'claude-1.0', 'PER_1000_TOKENS', 0.01102, 'USD', 'PROMPT'),
+  ('clnnutptp000708l47r091vvd', 'claude-1.0', 'PER_1000_TOKENS', 0.03268, 'USD', 'COMPLETION'),
+  ('clnon8riv000308mlgfr1agiv', 'text-embedding-ada-002', 'PER_1000_TOKENS', 0.0001, 'USD', 'PROMPT'),
+  ('clnon9kfz000408ml1bg81o6z', 'text-embedding-ada-002', 'PER_1000_TOKENS', 0.0001, 'USD', 'COMPLETION'),
+  ('clqwniv8a000d08l2frjl7mmw', 'codechat-bison-32k', 'PER_1000_CHARS', 0.0005, 'USD', 'PROMPT'),
+  ('clqwnj044000e08l2dfjm5g90', 'chat-bison-32k', 'PER_1000_CHARS', 0.0005, 'USD', 'PROMPT'),
+  ('clqwnj47r000f08l2a16fekls', 'chat-bison-32k', 'PER_1000_CHARS', 0.0005, 'USD', 'COMPLETION'),
+  ('clqwnj863000g08l2bwxgdapm', 'codechat-bison-32k', 'PER_1000_CHARS', 0.0005, 'USD', 'COMPLETION')
+ON CONFLICT (id) DO NOTHING;

prisma/schema.prisma

@@ -2,341 +2,411 @@
 // learn more about it in the docs: https://pris.ly/d/prisma-schema
 
 generator client {
-  provider        = "prisma-client-js"
-  previewFeatures = ["tracing"]
+    provider        = "prisma-client-js"
+    previewFeatures = ["tracing"]
 }
 
 datasource db {
-  provider  = "postgresql"
-  url       = env("DATABASE_URL")
-  directUrl = env("DIRECT_URL")
+    provider          = "postgresql"
+    url               = env("DATABASE_URL")
+    directUrl         = env("DIRECT_URL")
+    shadowDatabaseUrl = env("SHADOW_DATABASE_URL")
 }
 
 model Example {
-  id        String   @id @default(cuid())
-  createdAt DateTime @default(now()) @map("created_at")
-  updatedAt DateTime @updatedAt @map("updated_at")
+    id        String   @id @default(cuid())
+    createdAt DateTime @default(now()) @map("created_at")
+    updatedAt DateTime @updatedAt @map("updated_at")
 }
 
 // Necessary for Next auth
 model Account {
-  id                String  @id @default(cuid())
-  userId            String  @map("user_id")
-  type              String
-  provider          String
-  providerAccountId String
-  refresh_token     String? // @db.Text
-  access_token      String? // @db.Text
-  expires_at        Int?
-  token_type        String?
-  scope             String?
-  id_token          String? // @db.Text
-  session_state     String?
-  user              User    @relation(fields: [userId], references: [id], onDelete: Cascade)
+    id                String  @id @default(cuid())
+    userId            String  @map("user_id")
+    type              String
+    provider          String
+    providerAccountId String
+    refresh_token     String? // @db.Text
+    access_token      String? // @db.Text
+    expires_at        Int?
+    expires_in        Int?
+    ext_expires_in    Int?
+    token_type        String?
+    scope             String?
+    id_token          String? // @db.Text
+    session_state     String?
+    user              User    @relation(fields: [userId], references: [id], onDelete: Cascade)
 
-  @@unique([provider, providerAccountId])
-  @@index([userId])
+    @@unique([provider, providerAccountId])
+    @@index([userId])
 }
 
 model Session {
-  id           String   @id @default(cuid())
-  sessionToken String   @unique @map("session_token")
-  userId       String   @map("user_id")
-  expires      DateTime
-  user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
+    id           String   @id @default(cuid())
+    sessionToken String   @unique @map("session_token")
+    userId       String   @map("user_id")
+    expires      DateTime
+    user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
 
 model User {
-  id            String       @id @default(cuid())
-  name          String?
-  email         String?      @unique
-  emailVerified DateTime?    @map("email_verified")
-  password      String?
-  image         String?
-  admin         Boolean      @default(false)
-  accounts      Account[]
-  sessions      Session[]
-  memberships   Membership[]
-  createdAt     DateTime     @default(now()) @map("created_at")
-  updatedAt     DateTime     @default(now()) @updatedAt @map("updated_at")
-  featureFlags  String[]     @default([]) @map("feature_flags")
+    id            String                 @id @default(cuid())
+    name          String?
+    email         String?                @unique
+    emailVerified DateTime?              @map("email_verified")
+    password      String?
+    image         String?
+    admin         Boolean                @default(false)
+    accounts      Account[]
+    sessions      Session[]
+    memberships   Membership[]
+    invitations   MembershipInvitation[]
+    createdAt     DateTime               @default(now()) @map("created_at")
+    updatedAt     DateTime               @default(now()) @updatedAt @map("updated_at")
+    featureFlags  String[]               @default([]) @map("feature_flags")
 
-  @@map("users")
+    @@map("users")
 }
 
 model VerificationToken {
-  identifier String
-  token      String   @unique
-  expires    DateTime
+    identifier String
+    token      String   @unique
+    expires    DateTime
 
-  @@unique([identifier, token])
-  @@map("verification_tokens")
+    @@unique([identifier, token])
+    @@map("verification_tokens")
 }
 
 model Project {
-  id           String        @id @default(cuid())
-  createdAt    DateTime      @default(now()) @map("created_at")
-  updatedAt    DateTime      @default(now()) @updatedAt @map("updated_at")
-  name         String
-  members      Membership[]
-  traces       Trace[]
-  observations Observation[]
-  apiKeys      ApiKey[]
-  dataset      Dataset[]
-  RawEvents    Events[]
+    id           String                 @id @default(cuid())
+    createdAt    DateTime               @default(now()) @map("created_at")
+    updatedAt    DateTime               @default(now()) @updatedAt @map("updated_at")
+    name         String
+    cloudConfig  Json?                  @map("cloud_config") // Langfuse Cloud, for zod schema see projectsRouter.ts
+    members      Membership[]
+    traces       Trace[]
+    observations Observation[]
+    apiKeys      ApiKey[]
+    dataset      Dataset[]
+    RawEvents    Events[]
+    invitations  MembershipInvitation[]
+    sessions     TraceSession[]
+    Prompt       Prompt[]
 
-  @@map("projects")
+    @@map("projects")
 }
 
 model ApiKey {
-  id                  String    @id @unique @default(cuid())
-  createdAt           DateTime  @default(now()) @map("created_at")
-  note                String?
-  publicKey           String    @unique @map("public_key")
-  hashedSecretKey     String    @unique @map("hashed_secret_key")
-  fastHashedSecretKey String?   @unique @map("fast_hashed_secret_key")
-  displaySecretKey    String    @map("display_secret_key")
-  lastUsedAt          DateTime? @map("last_used_at")
-  expiresAt           DateTime? @map("expires_at")
-  projectId           String    @map("project_id")
-  project             Project   @relation(fields: [projectId], references: [id], onDelete: Cascade)
+    id                  String    @id @unique @default(cuid())
+    createdAt           DateTime  @default(now()) @map("created_at")
+    note                String?
+    publicKey           String    @unique @map("public_key")
+    hashedSecretKey     String    @unique @map("hashed_secret_key")
+    fastHashedSecretKey String?   @unique @map("fast_hashed_secret_key")
+    displaySecretKey    String    @map("display_secret_key")
+    lastUsedAt          DateTime? @map("last_used_at")
+    expiresAt           DateTime? @map("expires_at")
+    projectId           String    @map("project_id")
+    project             Project   @relation(fields: [projectId], references: [id], onDelete: Cascade)
 
-  @@index(projectId)
-  @@index(publicKey)
-  @@index(hashedSecretKey)
-  @@index(fastHashedSecretKey)
-  @@map("api_keys")
+    @@index(projectId)
+    @@index(publicKey)
+    @@index(hashedSecretKey)
+    @@index(fastHashedSecretKey)
+    @@map("api_keys")
 }
 
 model Membership {
-  projectId String         @map("project_id")
-  project   Project        @relation(fields: [projectId], references: [id], onDelete: Cascade)
-  userId    String         @map("user_id")
-  user      User           @relation(fields: [userId], references: [id], onDelete: Cascade)
-  role      MembershipRole
-  createdAt DateTime       @default(now()) @map("created_at")
-  updatedAt DateTime       @default(now()) @updatedAt @map("updated_at")
+    projectId String         @map("project_id")
+    project   Project        @relation(fields: [projectId], references: [id], onDelete: Cascade)
+    userId    String         @map("user_id")
+    user      User           @relation(fields: [userId], references: [id], onDelete: Cascade)
+    role      MembershipRole
+    createdAt DateTime       @default(now()) @map("created_at")
+    updatedAt DateTime       @default(now()) @updatedAt @map("updated_at")
 
-  @@id([projectId, userId])
-  @@index([userId])
-  @@map("memberships")
+    @@id([projectId, userId])
+    @@index([userId])
+    @@map("memberships")
+}
+
+model MembershipInvitation {
+    id        String         @id @unique @default(cuid())
+    email     String
+    role      MembershipRole
+    projectId String         @map("project_id")
+    project   Project        @relation(fields: [projectId], references: [id], onDelete: Cascade)
+    senderId  String?        @map("sender_id")
+    sender    User?          @relation(fields: [senderId], references: [id], onDelete: SetNull)
+    createdAt DateTime       @default(now()) @map("created_at")
+    updatedAt DateTime       @default(now()) @updatedAt @map("updated_at")
+
+    @@index([projectId])
+    @@index([email])
+    @@map("membership_invitations")
 }
 
 enum MembershipRole {
-  OWNER
-  ADMIN
-  MEMBER
-  VIEWER
+    OWNER
+    ADMIN
+    MEMBER
+    VIEWER
+}
+
+model TraceSession {
+    id         String   @id @default(cuid())
+    createdAt  DateTime @default(now()) @map("created_at")
+    updatedAt  DateTime @default(now()) @updatedAt @map("updated_at")
+    projectId  String   @map("project_id")
+    project    Project  @relation(fields: [projectId], references: [id], onDelete: Cascade)
+    bookmarked Boolean  @default(false)
+    public     Boolean  @default(false)
+    traces     Trace[]
+
+    @@unique([id, projectId])
+    @@index([projectId])
+    @@index([createdAt])
+    @@map("trace_sessions")
 }
 
 model Trace {
-  id         String   @id @default(cuid())
-  externalId String?  @map("external_id")
-  timestamp  DateTime @default(now())
-  name       String?
-  userId     String?  @map("user_id")
-  metadata   Json?
-  release    String?
-  version    String?
-  projectId  String   @map("project_id")
-  project    Project  @relation(fields: [projectId], references: [id], onDelete: Cascade)
-  public     Boolean  @default(false)
-  bookmarked Boolean  @default(false)
+    id         String        @id @default(cuid())
+    externalId String?       @map("external_id")
+    timestamp  DateTime      @default(now())
+    name       String?
+    userId     String?       @map("user_id")
+    metadata   Json?
+    release    String?
+    version    String?
+    input      Json?
+    output     Json?
+    sessionId  String?       @map("session_id")
+    session    TraceSession? @relation(fields: [sessionId], references: [id], onDelete: SetNull)
+    projectId  String        @map("project_id")
+    project    Project       @relation(fields: [projectId], references: [id], onDelete: Cascade)
+    public     Boolean       @default(false)
+    bookmarked Boolean       @default(false)
 
-  scores Score[]
+    scores Score[]
 
-  @@unique([projectId, externalId])
-  @@index([projectId])
-  @@index([name])
-  @@index([userId])
-  @@index([externalId])
-  @@index(timestamp)
-  @@index(release)
-  @@map("traces")
+    @@unique([projectId, externalId])
+    @@index([projectId])
+    @@index([sessionId])
+    @@index([name])
+    @@index([userId])
+    @@index([externalId])
+    @@index(timestamp)
+    @@index(release)
+    @@map("traces")
 }
 
 model Observation {
-  id                  String           @id @default(cuid())
-  traceId             String?          @map("trace_id")
-  projectId           String           @map("project_id")
-  type                ObservationType
-  startTime           DateTime         @default(now()) @map("start_time")
-  endTime             DateTime?        @map("end_time")
-  name                String?
-  metadata            Json?
-  parentObservationId String?          @map("parent_observation_id")
-  level               ObservationLevel @default(DEFAULT)
-  statusMessage       String?          @map("status_message")
-  version             String?
-  createdAt           DateTime         @default(now()) @map("created_at")
+    id                  String           @id @default(cuid())
+    traceId             String?          @map("trace_id")
+    projectId           String           @map("project_id")
+    type                ObservationType
+    startTime           DateTime         @default(now()) @map("start_time")
+    endTime             DateTime?        @map("end_time")
+    name                String?
+    metadata            Json?
+    parentObservationId String?          @map("parent_observation_id")
+    level               ObservationLevel @default(DEFAULT)
+    statusMessage       String?          @map("status_message")
+    version             String?
+    createdAt           DateTime         @default(now()) @map("created_at")
 
-  // GENERATION ONLY
-  model               String?
-  modelParameters     Json?
-  input               Json?
-  output              Json?
-  promptTokens        Int               @default(0) @map("prompt_tokens")
-  completionTokens    Int               @default(0) @map("completion_tokens")
-  totalTokens         Int               @default(0) @map("total_tokens")
-  completionStartTime DateTime?         @map("completion_start_time")
-  scores              Score[]
-  project             Project           @relation(fields: [projectId], references: [id], onDelete: Cascade)
-  derivedDatasetItems DatasetItem[]
-  datasetRunItems     DatasetRunItems[]
+    // GENERATION ONLY
+    model               String?
+    modelParameters     Json?
+    input               Json?
+    output              Json?
+    promptTokens        Int               @default(0) @map("prompt_tokens")
+    completionTokens    Int               @default(0) @map("completion_tokens")
+    totalTokens         Int               @default(0) @map("total_tokens")
+    unit                String            @default("TOKENS")
+    completionStartTime DateTime?         @map("completion_start_time")
+    scores              Score[]
+    project             Project           @relation(fields: [projectId], references: [id], onDelete: Cascade)
+    derivedDatasetItems DatasetItem[]
+    datasetRunItems     DatasetRunItems[]
 
-  @@unique([id, projectId])
-  @@index([traceId])
-  @@index([type])
-  @@index(startTime)
-  @@index(createdAt)
-  @@index(projectId)
-  @@index(parentObservationId)
-  @@map("observations")
+    promptId String? @map("prompt_id")
+    prompt   Prompt? @relation(fields: [promptId], onDelete: SetNull, references: [id])
+
+    @@unique([id, projectId])
+    @@index([traceId])
+    @@index([type])
+    @@index(startTime)
+    @@index(createdAt)
+    @@index(projectId)
+    @@index(parentObservationId)
+    @@map("observations")
 }
 
 enum ObservationType {
-  SPAN
-  EVENT
-  GENERATION
+    SPAN
+    EVENT
+    GENERATION
 }
 
 enum ObservationLevel {
-  DEBUG
-  DEFAULT
-  WARNING
-  ERROR
+    DEBUG
+    DEFAULT
+    WARNING
+    ERROR
 }
 
 model Score {
-  id            String       @id @default(cuid())
-  timestamp     DateTime     @default(now())
-  name          String
-  value         Float
-  comment       String?
-  traceId       String       @map("trace_id")
-  trace         Trace        @relation(fields: [traceId], references: [id], onDelete: Cascade)
-  observationId String?      @map("observation_id")
-  observation   Observation? @relation(fields: [observationId], references: [id], onDelete: SetNull)
+    id            String       @id @default(cuid())
+    timestamp     DateTime     @default(now())
+    name          String
+    value         Float
+    comment       String?
+    traceId       String       @map("trace_id")
+    trace         Trace        @relation(fields: [traceId], references: [id], onDelete: Cascade)
+    observationId String?      @map("observation_id")
+    observation   Observation? @relation(fields: [observationId], references: [id], onDelete: SetNull)
 
-  @@unique([id, traceId]) // used for upsert
-  @@index([value])
-  @@index([traceId], type: Hash)
-  @@index([observationId], type: Hash)
-  @@map("scores")
+    @@unique([id, traceId]) // used for upsert
+    @@index([value])
+    @@index([traceId], type: Hash)
+    @@index([observationId], type: Hash)
+    @@map("scores")
 }
 
 enum PricingUnit {
-  PER_1000_TOKENS
-  PER_1000_CHARS
+    PER_1000_TOKENS
+    PER_1000_CHARS
 }
 
 enum TokenType {
-  PROMPT
-  COMPLETION
-  TOTAL
+    PROMPT
+    COMPLETION
+    TOTAL
 }
 
 model Pricing {
-  id          String      @id @default(cuid())
-  modelName   String      @map("model_name")
-  pricingUnit PricingUnit @default(PER_1000_TOKENS) @map("pricing_unit")
-  price       Decimal
-  currency    String      @default("USD")
-  tokenType   TokenType   @map("token_type")
+    id          String      @id @default(cuid())
+    modelName   String      @map("model_name")
+    pricingUnit PricingUnit @default(PER_1000_TOKENS) @map("pricing_unit")
+    price       Decimal
+    currency    String      @default("USD")
+    tokenType   TokenType   @map("token_type")
 
-  @@map("pricings")
+    @@map("pricings")
 }
 
 model CronJobs {
-  name         String    @id
-  lastRun      DateTime? @map("last_run")
-  jobStartedAt DateTime? @map("job_started_at")
-  state        String?
+    name         String    @id
+    lastRun      DateTime? @map("last_run")
+    jobStartedAt DateTime? @map("job_started_at")
+    state        String?
 
-  @@map("cron_jobs")
+    @@map("cron_jobs")
 }
 
 model Dataset {
-  id           String        @id @default(cuid())
-  name         String
-  status       DatasetStatus @default(ACTIVE)
-  projectId    String        @map("project_id")
-  project      Project       @relation(fields: [projectId], references: [id], onDelete: Cascade)
-  createdAt    DateTime      @default(now()) @map("created_at")
-  updatedAt    DateTime      @default(now()) @updatedAt @map("updated_at")
-  datasetItems DatasetItem[]
-  datasetRuns  DatasetRuns[]
+    id           String        @id @default(cuid())
+    name         String
+    status       DatasetStatus @default(ACTIVE)
+    projectId    String        @map("project_id")
+    project      Project       @relation(fields: [projectId], references: [id], onDelete: Cascade)
+    createdAt    DateTime      @default(now()) @map("created_at")
+    updatedAt    DateTime      @default(now()) @updatedAt @map("updated_at")
+    datasetItems DatasetItem[]
+    datasetRuns  DatasetRuns[]
 
-  @@unique([projectId, name])
-  @@index([projectId], type: Hash)
-  @@map("datasets")
+    @@unique([projectId, name])
+    @@index([projectId], type: Hash)
+    @@map("datasets")
 }
 
 model DatasetItem {
-  id                  String            @id @default(cuid())
-  status              DatasetStatus     @default(ACTIVE)
-  input               Json
-  expectedOutput      Json?             @map("expected_output")
-  sourceObservationId String?           @map("source_observation_id")
-  sourceObservation   Observation?      @relation(fields: [sourceObservationId], references: [id], onDelete: SetNull)
-  datasetId           String            @map("dataset_id")
-  dataset             Dataset           @relation(fields: [datasetId], references: [id], onDelete: Cascade)
-  createdAt           DateTime          @default(now()) @map("created_at")
-  updatedAt           DateTime          @default(now()) @updatedAt @map("updated_at")
-  datasetRunItems     DatasetRunItems[]
+    id                  String            @id @default(cuid())
+    status              DatasetStatus     @default(ACTIVE)
+    input               Json
+    expectedOutput      Json?             @map("expected_output")
+    sourceObservationId String?           @map("source_observation_id")
+    sourceObservation   Observation?      @relation(fields: [sourceObservationId], references: [id], onDelete: SetNull)
+    datasetId           String            @map("dataset_id")
+    dataset             Dataset           @relation(fields: [datasetId], references: [id], onDelete: Cascade)
+    createdAt           DateTime          @default(now()) @map("created_at")
+    updatedAt           DateTime          @default(now()) @updatedAt @map("updated_at")
+    datasetRunItems     DatasetRunItems[]
 
-  @@index([sourceObservationId], type: Hash)
-  @@index([datasetId], type: Hash)
-  @@map("dataset_items")
+    @@index([sourceObservationId], type: Hash)
+    @@index([datasetId], type: Hash)
+    @@map("dataset_items")
 }
 
 enum DatasetStatus {
-  ACTIVE
-  ARCHIVED
+    ACTIVE
+    ARCHIVED
 }
 
 model DatasetRuns {
-  id              String            @id @default(cuid())
-  name            String
-  datasetId       String            @map("dataset_id")
-  dataset         Dataset           @relation(fields: [datasetId], references: [id], onDelete: Cascade)
-  createdAt       DateTime          @default(now()) @map("created_at")
-  updatedAt       DateTime          @default(now()) @updatedAt @map("updated_at")
-  datasetRunItems DatasetRunItems[]
+    id              String            @id @default(cuid())
+    name            String
+    datasetId       String            @map("dataset_id")
+    dataset         Dataset           @relation(fields: [datasetId], references: [id], onDelete: Cascade)
+    createdAt       DateTime          @default(now()) @map("created_at")
+    updatedAt       DateTime          @default(now()) @updatedAt @map("updated_at")
+    datasetRunItems DatasetRunItems[]
 
-  @@unique([datasetId, name])
-  @@index([datasetId], type: Hash)
-  @@map("dataset_runs")
+    @@unique([datasetId, name])
+    @@index([datasetId], type: Hash)
+    @@map("dataset_runs")
 }
 
 model DatasetRunItems {
-  id            String      @id @default(cuid())
-  datasetRunId  String      @map("dataset_run_id")
-  datasetRun    DatasetRuns @relation(fields: [datasetRunId], references: [id], onDelete: Cascade)
-  datasetItemId String      @map("dataset_item_id")
-  datasetItem   DatasetItem @relation(fields: [datasetItemId], references: [id], onDelete: Cascade)
-  observationId String      @map("observation_id")
-  observation   Observation @relation(fields: [observationId], references: [id], onDelete: Cascade)
-  createdAt     DateTime    @default(now()) @map("created_at")
-  updatedAt     DateTime    @default(now()) @updatedAt @map("updated_at")
+    id            String      @id @default(cuid())
+    datasetRunId  String      @map("dataset_run_id")
+    datasetRun    DatasetRuns @relation(fields: [datasetRunId], references: [id], onDelete: Cascade)
+    datasetItemId String      @map("dataset_item_id")
+    datasetItem   DatasetItem @relation(fields: [datasetItemId], references: [id], onDelete: Cascade)
+    observationId String      @map("observation_id")
+    observation   Observation @relation(fields: [observationId], references: [id], onDelete: Cascade)
+    createdAt     DateTime    @default(now()) @map("created_at")
+    updatedAt     DateTime    @default(now()) @updatedAt @map("updated_at")
 
-  @@index([datasetRunId], type: Hash)
-  @@index([datasetItemId], type: Hash)
-  @@index([observationId], type: Hash)
-  @@map("dataset_run_items")
+    @@index([datasetRunId], type: Hash)
+    @@index([datasetItemId], type: Hash)
+    @@index([observationId], type: Hash)
+    @@map("dataset_run_items")
 }
 
 model Events {
-  id        String   @id @default(cuid())
-  createdAt DateTime @default(now()) @map("created_at")
-  updatedAt DateTime @default(now()) @updatedAt @map("updated_at")
-  projectId String   @map("project_id")
-  project   Project  @relation(fields: [projectId], references: [id], onDelete: Cascade)
-  data      Json
-  headers   Json     @default("{}")
-  url       String?
-  method    String?
+    id        String   @id @default(cuid())
+    createdAt DateTime @default(now()) @map("created_at")
+    updatedAt DateTime @default(now()) @updatedAt @map("updated_at")
+    projectId String   @map("project_id")
+    project   Project  @relation(fields: [projectId], references: [id], onDelete: Cascade)
+    data      Json
+    headers   Json     @default("{}")
+    url       String?
+    method    String?
 
-  @@index(projectId)
-  @@map("events")
+    @@index(projectId)
+    @@map("events")
+}
+
+model Prompt {
+    id        String   @id @default(cuid())
+    createdAt DateTime @default(now()) @map("created_at")
+    updatedAt DateTime @default(now()) @updatedAt @map("updated_at")
+
+    projectId String  @map("project_id")
+    project   Project @relation(fields: [projectId], references: [id], onDelete: Cascade)
+
+    createdBy String @map("created_by")
+
+    prompt      String
+    name        String
+    version     Int
+    isActive    Boolean       @map("is_active")
+    Observation Observation[]
+
+    @@unique([projectId, name, version])
+    @@index([projectId, name, version])
+    @@map("prompts")
 }

prisma/seed.ts

@@ -53,6 +53,25 @@ async function main() {
     },
   });
 
+  const prompt = await prisma.prompt.upsert({
+    where: {
+      projectId_name_version: {
+        projectId: seedProjectId,
+        name: "summary-prompt",
+        version: 1,
+      },
+    },
+    create: {
+      name: "summary-prompt",
+      project: { connect: { id: seedProjectId } },
+      prompt: "prompt {{variable}} {{anotherVariable}}",
+      isActive: true,
+      version: 1,
+      createdBy: "user-1",
+    },
+    update: {},
+  });
+
   const seedApiKey = {
     id: "seed-api-key",
     secret: process.env.SEED_SECRET_KEY ?? "sk-lf-1234567890",
@@ -133,19 +152,42 @@ async function main() {
             },
           },
           userId: `user-${i % 10}`,
+          session:
+            Math.random() > 0.3
+              ? {
+                  connectOrCreate: {
+                    where: {
+                      id: `session-${i % 10}`,
+                    },
+                    create: {
+                      id: `session-${i % 10}`,
+                      project: {
+                        connect: { id: [project1.id, project2.id][i % 2] },
+                      },
+                    },
+                  },
+                }
+              : undefined,
+          input:
+            Math.random() > 0.3
+              ? "I'm looking for a React component"
+              : undefined,
+          output:
+            Math.random() > 0.3
+              ? "What kind of component are you looking for?"
+              : undefined,
           scores: {
             createMany: {
               data: [
-                {
-                  name: "latency",
-                  value: Math.floor(Math.random() * 20),
-                  timestamp: traceTs,
-                },
-                {
-                  name: "feedback",
-                  value: Math.floor(Math.random() * 3) - 1,
-                  timestamp: traceTs,
-                },
+                ...(Math.random() > 0.5
+                  ? [
+                      {
+                        name: "feedback",
+                        value: Math.floor(Math.random() * 3) - 1,
+                        timestamp: traceTs,
+                      },
+                    ]
+                  : []),
                 ...(Math.random() > 0.7
                   ? [
                       {
@@ -303,25 +345,31 @@ async function main() {
               totalTokens: promptTokens + completionTokens,
               parentObservationId: span.id,
               traceId: trace.id,
+              ...{
+                ...(Math.random() > 0.5 && trace.projectId === prompt.projectId
+                  ? { prompt: { connect: { id: prompt.id } } }
+                  : {}),
+              },
             },
           });
-
-          await prisma.score.create({
-            data: {
-              name: "quality",
-              value: Math.random() * 2 - 1,
-              observationId: generation.id,
-              traceId: trace.id,
-            },
-          });
-          await prisma.score.create({
-            data: {
-              name: "conciseness",
-              value: Math.random() * 2 - 1,
-              observationId: generation.id,
-              traceId: trace.id,
-            },
-          });
+          if (Math.random() > 0.6)
+            await prisma.score.create({
+              data: {
+                name: "quality",
+                value: Math.random() * 2 - 1,
+                observationId: generation.id,
+                traceId: trace.id,
+              },
+            });
+          if (Math.random() > 0.6)
+            await prisma.score.create({
+              data: {
+                name: "conciseness",
+                value: Math.random() * 2 - 1,
+                observationId: generation.id,
+                traceId: trace.id,
+              },
+            });
 
           generationIds.push(generation.id);
 

security.md

@@ -1,11 +0,0 @@
-# Security Policy
-
-## Supported Versions
-
-We always recommend using the latest version of Langfuse to ensure you get all security updates.
-
-## Reporting a Vulnerability
-
-Please report security vulnerabilities to security@langfuse.com.
-
-We currently do not operate a bug bounty program.

sentry.server.config.ts

@@ -12,9 +12,9 @@ if (process.env.NEXT_PUBLIC_SENTRY_DSN)
     // Set tracesSampleRate to 1.0 to capture 100%
     // of transactions for performance monitoring.
     // We recommend adjusting this value in production
-    tracesSampleRate: 0.8,
+    tracesSampleRate: 0.5,
 
-    profilesSampleRate: 0.8, // Profiling sample rate is relative to tracesSampleRate
+    profilesSampleRate: 0.5, // Profiling sample rate is relative to tracesSampleRate
     integrations: [
       // Add profiling integration to list of integrations
       new ProfilingIntegration(),

src/__tests__/datasets.servertest.ts

@@ -0,0 +1,187 @@
+/** @jest-environment node */
+
+import { prisma } from "@/src/server/db";
+import { makeAPICall, pruneDatabase } from "@/src/__tests__/test-utils";
+import { v4 } from "uuid";
+
+describe("/api/public/datasets and /api/public/dataset-items API Endpoints", () => {
+  beforeEach(async () => await pruneDatabase());
+  afterEach(async () => await pruneDatabase());
+
+  it("should create and get a dataset", async () => {
+    await makeAPICall("POST", "/api/public/datasets", {
+      name: "dataset-name",
+    });
+
+    const dbDataset = await prisma.dataset.findMany({
+      where: {
+        name: "dataset-name",
+      },
+    });
+
+    expect(dbDataset.length).toBeGreaterThan(0);
+
+    const getDataset = await makeAPICall(
+      "GET",
+      `/api/public/datasets/dataset-name`,
+    );
+
+    expect(getDataset.status).toBe(200);
+    expect(getDataset.body).toMatchObject({
+      name: "dataset-name",
+    });
+  });
+
+  it("should create and get a dataset item (via datasets and individually)", async () => {
+    await makeAPICall("POST", "/api/public/datasets", {
+      name: "dataset-name",
+    });
+    await makeAPICall("POST", "/api/public/dataset-items", {
+      datasetName: "dataset-name",
+      input: { key: "value" },
+      expectedOutput: { key: "value" },
+    });
+    const dbDatasetItem = await prisma.datasetItem.findFirst({
+      where: {
+        dataset: {
+          name: "dataset-name",
+        },
+      },
+    });
+
+    expect(dbDatasetItem).not.toBeNull();
+
+    const getDataset = await makeAPICall(
+      "GET",
+      `/api/public/datasets/dataset-name`,
+    );
+    expect(getDataset.status).toBe(200);
+    expect(getDataset.body).toMatchObject({
+      name: "dataset-name",
+      items: [
+        {
+          id: dbDatasetItem!.id,
+          input: { key: "value" },
+          expectedOutput: { key: "value" },
+        },
+      ],
+    });
+
+    const getDatasetItem = await makeAPICall(
+      "GET",
+      `/api/public/dataset-items/${dbDatasetItem!.id}`,
+    );
+    expect(getDatasetItem.status).toBe(200);
+    expect(getDatasetItem.body).toMatchObject({
+      id: dbDatasetItem!.id,
+      input: { key: "value" },
+      expectedOutput: { key: "value" },
+    });
+  });
+
+  it("should upsert a dataset item", async () => {
+    await makeAPICall("POST", "/api/public/datasets", {
+      name: "dataset-name",
+    });
+
+    const item1 = await makeAPICall("POST", "/api/public/dataset-items", {
+      id: "dataset-item-id",
+      datasetName: "dataset-name",
+      input: { key: "value" },
+    });
+    expect(item1.status).toBe(200);
+    expect(item1.body).toMatchObject({
+      id: "dataset-item-id",
+    });
+
+    const item2 = await makeAPICall("POST", "/api/public/dataset-items", {
+      id: "dataset-item-id",
+      datasetName: "dataset-name",
+      input: { key: "value2" },
+    });
+    expect(item2.status).toBe(200);
+    expect(item2.body).toMatchObject({
+      id: "dataset-item-id",
+      input: { key: "value2" },
+    });
+
+    const dbDatasetItem = await prisma.datasetItem.findFirst({
+      where: { id: "dataset-item-id" },
+    });
+    expect(dbDatasetItem).not.toBeNull();
+    expect(dbDatasetItem?.input).toMatchObject({ key: "value2" });
+  });
+
+  it("should create and get a dataset run", async () => {
+    const dataset = await makeAPICall("POST", "/api/public/datasets", {
+      name: "dataset-name",
+    });
+    expect(dataset.status).toBe(200);
+    expect(dataset.body).toMatchObject({
+      name: "dataset-name",
+    });
+    await makeAPICall("POST", "/api/public/dataset-items", {
+      datasetName: "dataset-name",
+      id: "dataset-item-id",
+      input: { key: "value" },
+      expectedOutput: { key: "value" },
+    });
+    const traceId = v4();
+    const observationId = v4();
+    const response = await makeAPICall("POST", "/api/public/ingestion", {
+      batch: [
+        {
+          id: v4(),
+          type: "trace-create",
+          timestamp: new Date().toISOString(),
+          body: {
+            id: traceId,
+            name: "trace-name",
+            userId: "user-1",
+            metadata: { key: "value" },
+            release: "1.0.0",
+            version: "2.0.0",
+          },
+        },
+        {
+          id: v4(),
+          type: "observation-create",
+          timestamp: new Date().toISOString(),
+          body: {
+            id: observationId,
+            traceId: traceId,
+            type: "GENERATION",
+            name: "generation-name",
+            startTime: "2021-01-01T00:00:00.000Z",
+            endTime: "2021-01-01T00:00:00.000Z",
+            modelParameters: { key: "value" },
+            input: { key: "value" },
+            metadata: { key: "value" },
+            version: "2.0.0",
+          },
+        },
+      ],
+    });
+    expect(response.status).toBe(207);
+
+    const runItem = await makeAPICall("POST", "/api/public/dataset-run-items", {
+      datasetItemId: "dataset-item-id",
+      observationId: observationId,
+      runName: "run-name",
+    });
+    const dbRun = await prisma.datasetRuns.findFirst({
+      where: {
+        name: "run-name",
+      },
+    });
+    expect(dbRun).not.toBeNull();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    expect(dbRun?.datasetId).toBe(dataset.body.id);
+    expect(runItem.status).toBe(200);
+    expect(runItem.body).toMatchObject({
+      datasetItemId: "dataset-item-id",
+      observationId: observationId,
+      datasetRunId: dbRun?.id,
+    });
+  });
+});

src/__tests__/events.servertest.ts

@@ -241,12 +241,12 @@ describe("/api/public/events API Endpoint", () => {
 
     expect(createSpan.status).toBe(200);
 
-    expect(dbEvent?.id).toBe(spanId);
-    expect(dbEvent?.traceId).toBe(dbTrace[0]?.id);
-    expect(dbEvent?.name).toBe(generationName);
-    expect(dbEvent?.startTime).toEqual(new Date("2021-01-01T00:00:00.000Z"));
-    expect(dbEvent?.input).toEqual({ key: "value" });
-    expect(dbEvent?.metadata).toEqual({ key: "value" });
-    expect(dbEvent?.version).toBe("2.0.0");
+    expect(dbEvent.id).toBe(spanId);
+    expect(dbEvent.traceId).toBe(dbTrace[0]?.id);
+    expect(dbEvent.name).toBe(generationName);
+    expect(dbEvent.startTime).toEqual(new Date("2021-01-01T00:00:00.000Z"));
+    expect(dbEvent.input).toEqual({ key: "value" });
+    expect(dbEvent.metadata).toEqual({ key: "value" });
+    expect(dbEvent.version).toBe("2.0.0");
   });
 });

src/__tests__/features/orderBy/hooks/useOrderByState.clienttest.tsx

@@ -0,0 +1,110 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import { cleanup, render } from "@testing-library/react";
+
+import { TestRouter } from "@/src/__tests__/fixtures/TestRouter";
+import { useOrderByState } from "@/src/features/orderBy/hooks/useOrderByState";
+import { LocationMock } from "@jedmao/location";
+import NextAdapterPages from "next-query-params/pages";
+import { useRouter } from "next/router";
+import { QueryParamProvider } from "use-query-params";
+
+afterEach(cleanup);
+
+jest.mock("next/router", () => ({
+  useRouter: jest.fn(),
+}));
+
+const { location: savedLocation } = window;
+
+// The test for the useOrderByState hook
+describe("useOrderByState hook", () => {
+  let testRouter: TestRouter;
+  let locationMock: LocationMock;
+
+  beforeAll(() => {
+    // @ts-expect-error - TS only allows to delete optional params; but here we want to delete it
+    // as it will be set in beforeEach
+    delete window.location;
+  });
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    locationMock = new LocationMock("https://langfuse.com");
+    testRouter = new TestRouter(locationMock);
+    window.location = locationMock;
+
+    (useRouter as jest.Mock).mockReturnValue(testRouter);
+  });
+
+  afterAll(() => {
+    window.location = savedLocation;
+  });
+
+  test("orderBy takes the default value if no url param is given", () => {
+    const result = render(
+      <QueryParamProvider adapter={NextAdapterPages}>
+        <UseOrderByStateExample />
+      </QueryParamProvider>,
+    );
+
+    expect(result.queryByText(/column Column 1, order DESC/)).toBeTruthy();
+  });
+
+  test("setOrderBy updates orderBy query param", () => {
+    const result = render(
+      <QueryParamProvider adapter={NextAdapterPages}>
+        <UseOrderByStateExample />
+      </QueryParamProvider>,
+    );
+
+    result.queryByText(/Set Order/)!.click();
+    result.rerender(
+      <QueryParamProvider adapter={NextAdapterPages}>
+        <UseOrderByStateExample />
+      </QueryParamProvider>,
+    );
+
+    expect(result.queryByText(/column Column 2, order ASC/)).toBeTruthy();
+    expect(locationMock.searchParams.get("orderBy")).toBe(
+      "column-Column 2_order-ASC",
+    );
+  });
+
+  test("orderBy reads the given param from the url", () => {
+    locationMock.replace(
+      "https://langfuse.com?orderBy=column-Column 3_order-DESC",
+    );
+
+    const result = render(
+      <QueryParamProvider adapter={NextAdapterPages}>
+        <UseOrderByStateExample />
+      </QueryParamProvider>,
+    );
+
+    expect(result.queryByText(/column Column 3, order DESC/)).toBeTruthy();
+  });
+});
+
+const UseOrderByStateExample = () => {
+  const [orderBy, setOrderBy] = useOrderByState({
+    column: "Column 1",
+    order: "DESC",
+  });
+
+  return (
+    <>
+      <h1>{`column ${orderBy?.column}, order ${orderBy?.order}`}</h1>
+      <button
+        onClick={() => {
+          setOrderBy({
+            column: "Column 2",
+            order: "ASC",
+          });
+        }}
+      >
+        Set Order
+      </button>
+    </>
+  );
+};

src/__tests__/features/orderBy/server/orderByToPrisma.clienttest.ts

@@ -0,0 +1,36 @@
+import { orderByToPrismaSql } from "@/src/features/orderBy/server/orderByToPrisma";
+import { tracesTableCols } from "@/src/server/api/definitions/tracesTable";
+import { Prisma } from "@prisma/client";
+
+// The test for the orderByToPrisma function
+describe("orderByToPrisma (Convert orderBy to Prisma.sql)", () => {
+  test("orderByToPrisma returns default sql when orderBy=null", () => {
+    expect(orderByToPrismaSql(null, tracesTableCols)).toStrictEqual(
+      Prisma.sql`ORDER BY t.timestamp DESC`,
+    );
+  });
+
+  test("orderByToPrisma returns correct clause for orderBy column included in column defs", () => {
+    expect(
+      orderByToPrismaSql(
+        {
+          column: "latency",
+          order: "ASC",
+        },
+        tracesTableCols,
+      ),
+    ).toStrictEqual(Prisma.sql`ORDER BY tl.latency ASC`);
+  });
+
+  test("orderByToPrisma throws error for orderBy column not included in column defs", () => {
+    expect(() =>
+      orderByToPrismaSql(
+        {
+          column: "InvalidCol",
+          order: "ASC",
+        },
+        tracesTableCols,
+      ),
+    ).toThrow(/Invalid filter column: InvalidCol/);
+  });
+});

src/__tests__/fixtures/TestRouter.ts

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import { type Router } from "next/router";
+import type { UrlObject } from "url";
+import { type LocationMock } from "@jedmao/location";
+
+type PartialRouter = Partial<Router>;
+
+export const BASE_URL = "https://langfuse.com";
+
+/**
+ * A Router to be used for testing which provides the bare minimum needed
+ * for the useQueryParam(s) hook and NextAdapter to work.
+ */
+export class TestRouter implements PartialRouter {
+  isReady = true;
+  pathname = "/";
+  private currentUrl = "";
+  private history: string[] = [];
+
+  constructor(private locationMock: LocationMock) {}
+
+  replace = (url: string | UrlObject) => {
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string, @typescript-eslint/restrict-template-expressions
+    this.locationMock.assign(`${BASE_URL}${url}`);
+    this.currentUrl = TestRouter.getURLString(url);
+    this.locationMock.assign(`${BASE_URL}${this.currentUrl}`);
+    return Promise.resolve(true);
+  };
+
+  push = (url: string | UrlObject) => {
+    this.history.push(this.currentUrl);
+    this.currentUrl = TestRouter.getURLString(url);
+    this.locationMock.assign(`${BASE_URL}${this.currentUrl}`);
+    return Promise.resolve(true);
+  };
+
+  setIsReady = (isReady: boolean) => {
+    this.isReady = isReady;
+  };
+
+  get asPath() {
+    return this.pathname;
+  }
+
+  static getURLString(url: string | UrlObject): string {
+    if (typeof url === "string") {
+      return url;
+    }
+    return `${url.pathname}${url.search}`;
+  }
+
+  getParams(): URLSearchParams {
+    return new URL(`${BASE_URL}${this.currentUrl}`).searchParams;
+  }
+}

src/__tests__/generations.servertest.ts

@@ -6,69 +6,154 @@ import { v4 as uuidv4 } from "uuid";
 
 describe("/api/public/generations API Endpoint", () => {
   beforeEach(async () => await pruneDatabase());
-  afterEach(async () => await pruneDatabase());
 
-  it("should create generation after trace", async () => {
-    await pruneDatabase();
+  [
+    {
+      usage: {
+        input: 100,
+        output: 200,
+        total: 100,
+        unit: "CHARACTERS",
+      },
+      expectedUnit: "CHARACTERS",
+      expectedPromptTokens: 100,
+      expectedCompletionTokens: 200,
+      expectedTotalTokens: 100,
+    },
+    {
+      usage: {
+        total: 100,
+        unit: "CHARACTERS",
+      },
+      expectedUnit: "CHARACTERS",
+      expectedPromptTokens: 0,
+      expectedCompletionTokens: 0,
+      expectedTotalTokens: 100,
+    },
+    {
+      usage: {
+        total: 100,
+      },
+      expectedUnit: "TOKENS",
+      expectedPromptTokens: 0,
+      expectedCompletionTokens: 0,
+      expectedTotalTokens: 100,
+    },
+    {
+      usage: {
+        promptTokens: 100,
+        completionTokens: 200,
+        totalTokens: 100,
+      },
+      expectedPromptTokens: 100,
+      expectedCompletionTokens: 200,
+      expectedTotalTokens: 100,
+      expectedUnit: "TOKENS",
+    },
+    {
+      usage: {
+        totalTokens: 100,
+      },
+      expectedPromptTokens: 0,
+      expectedCompletionTokens: 0,
+      expectedTotalTokens: 100,
+      expectedUnit: "TOKENS",
+    },
+    {
+      usage: undefined,
+      expectedPromptTokens: 0,
+      expectedCompletionTokens: 0,
+      expectedTotalTokens: 0,
+      expectedUnit: "TOKENS",
+    },
+    {
+      usage: null,
+      expectedPromptTokens: 0,
+      expectedCompletionTokens: 0,
+      expectedTotalTokens: 0,
+      expectedUnit: "TOKENS",
+    },
+    {
+      usage: {},
+      expectedPromptTokens: 0,
+      expectedCompletionTokens: 0,
+      expectedTotalTokens: 0,
+      expectedUnit: "TOKENS",
+    },
+  ].forEach((testConfig) => {
+    it(`should create generation after trace 1 ${JSON.stringify(
+      testConfig,
+    )}`, async () => {
+      await pruneDatabase();
 
-    const traceId = uuidv4();
+      const traceId = uuidv4();
 
-    await makeAPICall("POST", "/api/public/traces", {
-      id: traceId,
-      name: "trace-name",
-      userId: "user-1",
-      projectId: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a",
-      metadata: { key: "value" },
-      release: "1.0.0",
-      version: "2.0.0",
-    });
-
-    const dbTrace = await prisma.trace.findMany({
-      where: {
+      await makeAPICall("POST", "/api/public/traces", {
         id: traceId,
-      },
-    });
-
-    expect(dbTrace.length).toBeGreaterThan(0);
-    expect(dbTrace[0]?.id).toBe(traceId);
-
-    const generationId = uuidv4();
-    const createGeneration = await makeAPICall(
-      "POST",
-      "/api/public/generations",
-      {
-        id: generationId,
-        traceId: traceId,
-        name: "generation-name",
-        startTime: "2021-01-01T00:00:00.000Z",
-        endTime: "2021-01-01T00:00:00.000Z",
-        model: "model-name",
-        modelParameters: { key: "value" },
-        prompt: { key: "value" },
+        name: "trace-name",
+        userId: "user-1",
+        projectId: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a",
         metadata: { key: "value" },
+        release: "1.0.0",
         version: "2.0.0",
-      },
-    );
+      });
 
-    expect(createGeneration.status).toBe(200);
-    const dbGeneration = await prisma.observation.findUnique({
-      where: {
-        id: generationId,
-      },
+      const dbTrace = await prisma.trace.findMany({
+        where: {
+          id: traceId,
+        },
+      });
+
+      expect(dbTrace.length).toBeGreaterThan(0);
+      expect(dbTrace[0]?.id).toBe(traceId);
+
+      const generationId = uuidv4();
+      const createGeneration = await makeAPICall(
+        "POST",
+        "/api/public/generations",
+        {
+          id: generationId,
+          traceId: traceId,
+          name: "generation-name",
+          startTime: "2021-01-01T00:00:00.000Z",
+          endTime: "2021-01-01T00:00:00.000Z",
+          model: "model-name",
+          modelParameters: { key: "value" },
+          prompt: { key: "value" },
+          metadata: { key: "value" },
+          version: "2.0.0",
+          usage: testConfig.usage,
+        },
+      );
+
+      expect(createGeneration.status).toBe(200);
+      const dbGeneration = await prisma.observation.findUnique({
+        where: {
+          id: generationId,
+        },
+      });
+
+      expect(dbGeneration?.id).toBe(generationId);
+      expect(dbGeneration?.traceId).toBe(traceId);
+      expect(dbGeneration?.name).toBe("generation-name");
+      expect(dbGeneration?.startTime).toEqual(
+        new Date("2021-01-01T00:00:00.000Z"),
+      );
+      expect(dbGeneration?.endTime).toEqual(
+        new Date("2021-01-01T00:00:00.000Z"),
+      );
+      expect(dbGeneration?.model).toBe("model-name");
+      expect(dbGeneration?.modelParameters).toEqual({ key: "value" });
+      expect(dbGeneration?.input).toEqual({ key: "value" });
+      expect(dbGeneration?.metadata).toEqual({ key: "value" });
+      expect(dbGeneration?.version).toBe("2.0.0");
+      expect(dbGeneration?.unit).toBe(testConfig.expectedUnit);
+      expect(dbGeneration?.promptTokens).toBe(testConfig.expectedPromptTokens);
+      expect(dbGeneration?.completionTokens).toBe(
+        testConfig.expectedCompletionTokens,
+      );
+      expect(dbGeneration?.totalTokens).toBe(testConfig.expectedTotalTokens);
     });
-
-    expect(dbGeneration?.id).toBe(generationId);
-    expect(dbGeneration?.traceId).toBe(traceId);
-    expect(dbGeneration?.name).toBe("generation-name");
-    expect(dbGeneration?.startTime).toEqual(
-      new Date("2021-01-01T00:00:00.000Z"),
-    );
-    expect(dbGeneration?.endTime).toEqual(new Date("2021-01-01T00:00:00.000Z"));
-    expect(dbGeneration?.model).toBe("model-name");
-    expect(dbGeneration?.modelParameters).toEqual({ key: "value" });
-    expect(dbGeneration?.input).toEqual({ key: "value" });
-    expect(dbGeneration?.metadata).toEqual({ key: "value" });
-    expect(dbGeneration?.version).toBe("2.0.0");
   });
 
   it("should create generation before trace", async () => {
@@ -339,8 +424,8 @@ describe("/api/public/generations API Endpoint", () => {
         name: generationName,
       },
     });
-    expect(dbGeneration?.id).toBe(generationId);
-    expect(dbGeneration?.traceId).toBe(externalTraceId);
+    expect(dbGeneration.id).toBe(generationId);
+    expect(dbGeneration.traceId).toBe(externalTraceId);
 
     const dbTraces = await prisma.trace.findMany();
     expect(dbTraces.length).toBe(0);
@@ -383,18 +468,18 @@ describe("/api/public/generations API Endpoint", () => {
 
     expect(createGeneration.status).toBe(200);
 
-    expect(dbGeneration?.id).toBe(generationId);
-    expect(dbGeneration?.traceId).toBe(dbTrace[0]?.id);
-    expect(dbGeneration?.name).toBe(generationName);
-    expect(dbGeneration?.startTime).toEqual(
+    expect(dbGeneration.id).toBe(generationId);
+    expect(dbGeneration.traceId).toBe(dbTrace[0]?.id);
+    expect(dbGeneration.name).toBe(generationName);
+    expect(dbGeneration.startTime).toEqual(
       new Date("2021-01-01T00:00:00.000Z"),
     );
-    expect(dbGeneration?.endTime).toEqual(new Date("2021-01-01T00:00:00.000Z"));
-    expect(dbGeneration?.model).toBe("model-name");
-    expect(dbGeneration?.modelParameters).toEqual({ key: "value" });
-    expect(dbGeneration?.input).toEqual({ key: "value" });
-    expect(dbGeneration?.metadata).toEqual({ key: "value" });
-    expect(dbGeneration?.version).toBe("2.0.0");
+    expect(dbGeneration.endTime).toEqual(new Date("2021-01-01T00:00:00.000Z"));
+    expect(dbGeneration.model).toBe("model-name");
+    expect(dbGeneration.modelParameters).toEqual({ key: "value" });
+    expect(dbGeneration.input).toEqual({ key: "value" });
+    expect(dbGeneration.metadata).toEqual({ key: "value" });
+    expect(dbGeneration.version).toBe("2.0.0");
   });
 
   it("should update generation", async () => {

src/__tests__/ingestion.servertest.ts

@@ -1,18 +1,266 @@
 /** @jest-environment node */
 
 import { makeAPICall, pruneDatabase } from "@/src/__tests__/test-utils";
+import { cleanEvent } from "@/src/pages/api/public/ingestion";
 import { prisma } from "@/src/server/db";
 import { v4 } from "uuid";
 
 describe("/api/public/ingestion API Endpoint", () => {
   beforeEach(async () => await pruneDatabase());
 
-  it("should create trace and generation", async () => {
+  [
+    {
+      usage: {
+        input: 100,
+        output: 200,
+        total: 100,
+        unit: "CHARACTERS",
+      },
+      expectedUnit: "CHARACTERS",
+      expectedPromptTokens: 100,
+      expectedCompletionTokens: 200,
+      expectedTotalTokens: 100,
+    },
+    {
+      usage: {
+        total: 100,
+        unit: "CHARACTERS",
+      },
+      expectedUnit: "CHARACTERS",
+      expectedPromptTokens: 0,
+      expectedCompletionTokens: 0,
+      expectedTotalTokens: 100,
+    },
+    {
+      usage: {
+        total: 100,
+      },
+      expectedUnit: "TOKENS",
+      expectedPromptTokens: 0,
+      expectedCompletionTokens: 0,
+      expectedTotalTokens: 100,
+    },
+    {
+      usage: {
+        promptTokens: 100,
+        completionTokens: 200,
+        totalTokens: 100,
+      },
+      expectedPromptTokens: 100,
+      expectedCompletionTokens: 200,
+      expectedTotalTokens: 100,
+      expectedUnit: "TOKENS",
+    },
+    {
+      usage: {
+        totalTokens: 100,
+      },
+      expectedPromptTokens: 0,
+      expectedCompletionTokens: 0,
+      expectedTotalTokens: 100,
+      expectedUnit: "TOKENS",
+    },
+    {
+      usage: undefined,
+      expectedPromptTokens: 0,
+      expectedCompletionTokens: 0,
+      expectedTotalTokens: 0,
+      expectedUnit: "TOKENS",
+    },
+    {
+      usage: null,
+      expectedPromptTokens: 0,
+      expectedCompletionTokens: 0,
+      expectedTotalTokens: 0,
+      expectedUnit: "TOKENS",
+    },
+    {
+      usage: {},
+      expectedPromptTokens: 0,
+      expectedCompletionTokens: 0,
+      expectedTotalTokens: 0,
+      expectedUnit: "TOKENS",
+    },
+  ].forEach((testConfig) => {
+    it(`should create trace and generation ${JSON.stringify(
+      testConfig,
+    )}`, async () => {
+      const traceId = v4();
+      const generationId = v4();
+      const spanId = v4();
+      const scoreId = v4();
+
+      const response = await makeAPICall("POST", "/api/public/ingestion", {
+        metadata: {
+          sdk_verion: "1.0.0",
+          sdk_name: "python",
+        },
+        batch: [
+          {
+            id: v4(),
+            type: "trace-create",
+            timestamp: new Date().toISOString(),
+            body: {
+              id: traceId,
+              name: "trace-name",
+              userId: "user-1",
+              metadata: { key: "value" },
+              release: "1.0.0",
+              version: "2.0.0",
+            },
+          },
+          {
+            id: v4(),
+            type: "observation-create",
+            timestamp: new Date().toISOString(),
+            body: {
+              id: generationId,
+              traceId: traceId,
+              type: "GENERATION",
+              name: "generation-name",
+              startTime: "2021-01-01T00:00:00.000Z",
+              endTime: "2021-01-01T00:00:00.000Z",
+              modelParameters: { key: "value" },
+              input: { key: "value" },
+              metadata: { key: "value" },
+              version: "2.0.0",
+            },
+          },
+          {
+            id: v4(),
+            type: "observation-update",
+            timestamp: new Date().toISOString(),
+            body: {
+              id: generationId,
+              type: "GENERATION",
+              output: { key: "this is a great gpt output" },
+              usage: testConfig.usage,
+            },
+          },
+          {
+            id: v4(),
+            type: "observation-create",
+            timestamp: new Date().toISOString(),
+            body: {
+              id: spanId,
+              traceId: traceId,
+              type: "SPAN",
+              name: "span-name",
+              startTime: "2021-01-01T00:00:00.000Z",
+              endTime: "2021-01-01T00:00:00.000Z",
+              input: { input: "value" },
+              metadata: { meta: "value" },
+              version: "2.0.0",
+            },
+          },
+          {
+            id: v4(),
+            type: "score-create",
+            timestamp: new Date().toISOString(),
+            body: {
+              id: scoreId,
+              name: "score-name",
+              value: 100.5,
+              traceId: traceId,
+            },
+          },
+        ],
+      });
+
+      expect(response.status).toBe(207);
+
+      console.log("response body", response.body);
+
+      const dbTrace = await prisma.trace.findMany({
+        where: {
+          name: "trace-name",
+        },
+      });
+
+      expect(dbTrace.length).toBeGreaterThan(0);
+      expect(dbTrace[0]?.name).toBe("trace-name");
+      expect(dbTrace[0]?.release).toBe("1.0.0");
+      expect(dbTrace[0]?.externalId).toBeNull();
+      expect(dbTrace[0]?.version).toBe("2.0.0");
+      expect(dbTrace[0]?.projectId).toBe(
+        "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a",
+      );
+
+      const dbGeneration = await prisma.observation.findUnique({
+        where: {
+          id: generationId,
+        },
+      });
+
+      expect(dbGeneration?.id).toBe(generationId);
+      expect(dbGeneration?.traceId).toBe(traceId);
+      expect(dbGeneration?.name).toBe("generation-name");
+      expect(dbGeneration?.startTime).toEqual(
+        new Date("2021-01-01T00:00:00.000Z"),
+      );
+      expect(dbGeneration?.endTime).toEqual(
+        new Date("2021-01-01T00:00:00.000Z"),
+      );
+      expect(dbGeneration?.model).toBeNull();
+      expect(dbGeneration?.modelParameters).toEqual({ key: "value" });
+      expect(dbGeneration?.input).toEqual({ key: "value" });
+      expect(dbGeneration?.metadata).toEqual({ key: "value" });
+      expect(dbGeneration?.version).toBe("2.0.0");
+      expect(dbGeneration?.promptTokens).toEqual(
+        testConfig.expectedPromptTokens,
+      );
+      expect(dbGeneration?.completionTokens).toEqual(
+        testConfig.expectedCompletionTokens,
+      );
+      expect(dbGeneration?.totalTokens).toEqual(testConfig.expectedTotalTokens);
+      expect(dbGeneration?.unit).toEqual(testConfig.expectedUnit);
+      expect(dbGeneration?.output).toEqual({
+        key: "this is a great gpt output",
+      });
+
+      const dbSpan = await prisma.observation.findUnique({
+        where: {
+          id: spanId,
+        },
+      });
+
+      expect(dbSpan?.id).toBe(spanId);
+      expect(dbSpan?.name).toBe("span-name");
+      expect(dbSpan?.startTime).toEqual(new Date("2021-01-01T00:00:00.000Z"));
+      expect(dbSpan?.endTime).toEqual(new Date("2021-01-:00:00.000Z"));
+      expect(dbSpan?.input).toEqual({ input: "value" });
+      expect(dbSpan?.metadata).toEqual({ meta: "value" });
+      expect(dbSpan?.version).toBe("2.0.0");
+
+      const dbScore = await prisma.score.findUnique({
+        where: {
+          id: scoreId,
+        },
+      });
+
+      expect(dbScore?.id).toBe(scoreId);
+      expect(dbScore?.traceId).toBe(traceId);
+      expect(dbScore?.name).toBe("score-name");
+      expect(dbScore?.value).toBe(100.5);
+      expect(dbScore?.observationId).toBeNull();
+    });
+  });
+
+  it("should create and update all events", async () => {
     const traceId = v4();
     const generationId = v4();
     const spanId = v4();
+    const eventId = v4();
     const scoreId = v4();
 
+    const exception = `
+    ERROR    langfuse:callback.py:677 'model_name'
+    Traceback (most recent call last):
+      File "/Users/maximiliandeichmann/development/github.com/langfuse/langfuse-python/langfuse/callback.py", line 674, in __on_llm_action
+        model_name = kwargs["invocation_params"]["model_name"]
+    KeyError: 'model_name'
+    `;
+
     const response = await makeAPICall("POST", "/api/public/ingestion", {
       batch: [
         {
@@ -21,55 +269,55 @@ describe("/api/public/ingestion API Endpoint", () => {
           timestamp: new Date().toISOString(),
           body: {
             id: traceId,
-            name: "trace-name",
-            userId: "user-1",
-            metadata: { key: "value" },
-            release: "1.0.0",
-            version: "2.0.0",
           },
         },
         {
           id: v4(),
-          type: "observation-create",
+          type: "span-create",
           timestamp: new Date().toISOString(),
           body: {
-            id: generationId,
+            id: spanId,
             traceId: traceId,
-            type: "GENERATION",
-            name: "generation-name",
-            startTime: "2021-01-01T00:00:00.000Z",
-            endTime: "2021-01-01T00:00:00.000Z",
-            modelParameters: { key: "value" },
-            input: { key: "value" },
-            metadata: { key: "value" },
-            version: "2.0.0",
           },
         },
         {
           id: v4(),
-          type: "observation-update",
-          timestamp: new Date().toISOString(),
-          body: {
-            id: generationId,
-            type: "GENERATION",
-            output: { key: "this is a great gpt output" },
-            usage: { promptTokens: 400, completionTokens: 1000 },
-          },
-        },
-        {
-          id: v4(),
-          type: "observation-create",
+          type: "span-update",
           timestamp: new Date().toISOString(),
           body: {
             id: spanId,
             traceId: traceId,
-            type: "SPAN",
             name: "span-name",
-            startTime: "2021-01-01T00:00:00.000Z",
-            endTime: "2021-01-01T00:00:00.000Z",
-            input: { input: "value" },
-            metadata: { meta: "value" },
-            version: "2.0.0",
+          },
+        },
+        {
+          id: v4(),
+          type: "generation-create",
+          timestamp: new Date().toISOString(),
+          body: {
+            id: generationId,
+            traceId: traceId,
+            parentObservationId: spanId,
+          },
+        },
+        {
+          id: v4(),
+          type: "generation-update",
+          timestamp: new Date().toISOString(),
+          body: {
+            id: generationId,
+            name: "generation-name",
+          },
+        },
+        {
+          id: v4(),
+          type: "event-create",
+          timestamp: new Date().toISOString(),
+          body: {
+            id: eventId,
+            traceId: traceId,
+            name: "event-name",
+            parentObservationId: generationId,
           },
         },
         {
@@ -79,8 +327,17 @@ describe("/api/public/ingestion API Endpoint", () => {
           body: {
             id: scoreId,
             name: "score-name",
-            value: 100.5,
             traceId: traceId,
+            value: 100.5,
+            observationId: generationId,
+          },
+        },
+        {
+          id: v4(),
+          type: "sdk-log",
+          timestamp: new Date().toISOString(),
+          body: {
+            log: exception,
           },
         },
       ],
@@ -90,17 +347,23 @@ describe("/api/public/ingestion API Endpoint", () => {
 
     const dbTrace = await prisma.trace.findMany({
       where: {
-        name: "trace-name",
+        id: traceId,
       },
     });
 
     expect(dbTrace.length).toBeGreaterThan(0);
-    expect(dbTrace[0]?.name).toBe("trace-name");
-    expect(dbTrace[0]?.release).toBe("1.0.0");
-    expect(dbTrace[0]?.externalId).toBeNull();
-    expect(dbTrace[0]?.version).toBe("2.0.0");
     expect(dbTrace[0]?.projectId).toBe("7a88fb47-b4e2-43b8-a06c-a5ce950dc53a");
 
+    const dbSpan = await prisma.observation.findUnique({
+      where: {
+        id: spanId,
+      },
+    });
+
+    expect(dbSpan?.id).toBe(spanId);
+    expect(dbSpan?.name).toBe("span-name");
+    expect(dbSpan?.traceId).toBe(traceId);
+
     const dbGeneration = await prisma.observation.findUnique({
       where: {
         id: generationId,
@@ -110,34 +373,18 @@ describe("/api/public/ingestion API Endpoint", () => {
     expect(dbGeneration?.id).toBe(generationId);
     expect(dbGeneration?.traceId).toBe(traceId);
     expect(dbGeneration?.name).toBe("generation-name");
-    expect(dbGeneration?.startTime).toEqual(
-      new Date("2021-01-01T00:00:00.000Z"),
-    );
-    expect(dbGeneration?.endTime).toEqual(new Date("2021-01-01T00:00:00.000Z"));
-    expect(dbGeneration?.model).toBeNull();
-    expect(dbGeneration?.modelParameters).toEqual({ key: "value" });
-    expect(dbGeneration?.input).toEqual({ key: "value" });
-    expect(dbGeneration?.metadata).toEqual({ key: "value" });
-    expect(dbGeneration?.version).toBe("2.0.0");
-    expect(dbGeneration?.promptTokens).toEqual(400);
-    expect(dbGeneration?.completionTokens).toEqual(1000);
-    expect(dbGeneration?.output).toEqual({
-      key: "this is a great gpt output",
-    });
+    expect(dbGeneration?.parentObservationId).toBe(spanId);
 
-    const dbSpan = await prisma.observation.findUnique({
+    const dbEvent = await prisma.observation.findUnique({
       where: {
-        id: spanId,
+        id: eventId,
       },
     });
 
-    expect(dbSpan?.id).toBe(spanId);
-    expect(dbSpan?.name).toBe("span-name");
-    expect(dbSpan?.startTime).toEqual(new Date("2021-01-01T00:00:00.000Z"));
-    expect(dbSpan?.endTime).toEqual(new Date("2021-01-:00:00.000Z"));
-    expect(dbSpan?.input).toEqual({ input: "value" });
-    expect(dbSpan?.metadata).toEqual({ meta: "value" });
-    expect(dbSpan?.version).toBe("2.0.0");
+    expect(dbEvent?.id).toBe(eventId);
+    expect(dbEvent?.traceId).toBe(traceId);
+    expect(dbEvent?.name).toBe("event-name");
+    expect(dbEvent?.parentObservationId).toBe(generationId);
 
     const dbScore = await prisma.score.findUnique({
       where: {
@@ -147,9 +394,21 @@ describe("/api/public/ingestion API Endpoint", () => {
 
     expect(dbScore?.id).toBe(scoreId);
     expect(dbScore?.traceId).toBe(traceId);
-    expect(dbScore?.name).toBe("score-name");
+    expect(dbScore?.observationId).toBe(generationId);
     expect(dbScore?.value).toBe(100.5);
-    expect(dbScore?.observationId).toBeNull();
+
+    const logEvent = await prisma.events.findFirst({
+      where: {
+        data: {
+          path: ["body", "log"],
+          string_contains: "ERROR",
+        },
+      },
+    });
+
+    expect(logEvent).toBeDefined();
+    expect(logEvent).not.toBeFalsy();
+    expect(JSON.stringify(logEvent?.data)).toContain("KeyError: 'model_name'");
   });
 
   it("should upsert threats", async () => {
@@ -686,4 +945,80 @@ describe("/api/public/ingestion API Endpoint", () => {
 
     expect(dbGeneration).toBeTruthy();
   });
+
+  it("filters out NULL characters", async () => {
+    const traceId = v4();
+    const generationId = v4();
+
+    const responseOne = await makeAPICall("POST", "/api/public/ingestion", {
+      batch: [
+        {
+          id: v4(),
+          type: "trace-create",
+          timestamp: new Date().toISOString(),
+          body: {
+            id: traceId,
+            name: "trace-name",
+          },
+        },
+        {
+          id: v4(),
+          type: "observation-create",
+          timestamp: new Date().toISOString(),
+          body: {
+            id: generationId,
+            traceId: traceId,
+            type: "GENERATION",
+            name: "generation-name",
+            traceIdType: "LANGFUSE",
+            input: {
+              key: "IB\nibo.org Change site\nIB Home   /   . . .   /   News   /   News about the IB   /   Why ChatGPT is an opportunity for schools  IB Home   /   News   /   News about the IB   /   Why ChatGPT is an opportunity for schools  Why ChatGPT is an opportunity for  schools  Published:   06 March 2023   Last updated:   06 June 2023  Date published:   28 February 2023  Dr Matthew Glanville, Head of Assessment Principles and Practice  Source:   Why ChatGPT is an opportunity for schools | The Times  Those of us who work in the schools or exam sector should not be terri \u0000 ed by ChatGPT and  the rise of AI software – we should be excited. We should embrace it as an extraordinary  opportunity.  Contrary to some stark warnings, it is not the end of exams, nor even a huge threat to  coursework, but it does bring into very sharp focus the impact that arti \u0000 ",
+            },
+            output: {
+              key: "제점이 있었죠. 그중 하나는 일제가 한국의 신용체계를 망가뜨린 채 한국을 떠났다는 겁니다. 해방전 일제는 조선의 신용체계를 거의 독점적으로 소유한 상황이었습니다. 1945년 6월 기준 일제는 조선의 본점을 둔 전체은행 5개의 불입자본 총액의 89.7%를",
+            },
+          },
+        },
+      ],
+    });
+    expect(responseOne.status).toBe(207);
+
+    const dbTrace = await prisma.trace.findMany({
+      where: {
+        id: traceId,
+      },
+    });
+
+    expect(dbTrace.length).toEqual(1);
+
+    const dbGeneration = await prisma.observation.findUnique({
+      where: {
+        id: generationId,
+      },
+    });
+    expect(dbGeneration?.input).toStrictEqual({
+      key: `IB
+ibo.org Change site
+IB Home   /   . . .   /   News   /   News about the IB   /   Why ChatGPT is an opportunity for schools  IB Home   /   News   /   News about the IB   /   Why ChatGPT is an opportunity for schools  Why ChatGPT is an opportunity for  schools  Published:   06 March 2023   Last updated:   06 June 2023  Date published:   28 February 2023  Dr Matthew Glanville, Head of Assessment Principles and Practice  Source:   Why ChatGPT is an opportunity for schools | The Times  Those of us who work in the schools or exam sector should not be terri  ed by ChatGPT and  the rise of AI software – we should be excited. We should embrace it as an extraordinary  opportunity.  Contrary to some stark warnings, it is not the end of exams, nor even a huge threat to  coursework, but it does bring into very sharp focus the impact that arti  `,
+    });
+    expect(dbGeneration?.output).toStrictEqual({
+      key: "제점이 있었죠. 그중 하나는 일제가 한국의 신용체계를 망가뜨린 채 한국을 떠났다는 겁니다. 해방전 일제는 조선의 신용체계를 거의 독점적으로 소유한 상황이었습니다. 1945년 6월 기준 일제는 조선의 본점을 둔 전체은행 5개의 불입자본 총액의 89.7%를",
+    });
+
+    expect(dbGeneration).toBeTruthy();
+  });
+
+  [
+    { input: "A\u0000hallo", expected: "Ahallo" },
+    { input: ["A\u0000hallo"], expected: ["Ahallo"] },
+    { input: { obj: ["A\u0000hallo"] }, expected: { obj: ["Ahallo"] } },
+  ].forEach(({ input, expected }) => {
+    it(`cleans events with null values ${JSON.stringify(
+      input,
+    )} ${JSON.stringify(expected)}`, () => {
+      const cleanedEvent = cleanEvent(input);
+      console.log(cleanedEvent);
+      expect(cleanedEvent).toStrictEqual(expected);
+    });
+  });
 });

src/__tests__/prompts.servertest.ts

@@ -0,0 +1,346 @@
+/** @jest-environment node */
+
+import { prisma } from "@/src/server/db";
+import { makeAPICall, pruneDatabase } from "@/src/__tests__/test-utils";
+import { v4 as uuidv4, v4 } from "uuid";
+import { type Prompt } from "@prisma/client";
+
+describe("/api/public/prompts API Endpoint", () => {
+  beforeEach(async () => await pruneDatabase());
+
+  it("should fetch a prompt", async () => {
+    const promptId = uuidv4();
+
+    await prisma.prompt.create({
+      data: {
+        id: promptId,
+        name: "prompt-name",
+        prompt: "prompt",
+        isActive: true,
+        version: 1,
+        project: {
+          connect: { id: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a" },
+        },
+        createdBy: "user-1",
+      },
+    });
+
+    const fetchedObservations = await makeAPICall(
+      "GET",
+      "/api/public/prompts?name=prompt-name&version=1",
+      undefined,
+    );
+
+    expect(fetchedObservations.status).toBe(200);
+
+    if (!isPrompt(fetchedObservations.body)) {
+      throw new Error("Expected body to be a prompt");
+    }
+
+    expect(fetchedObservations.body.id).toBe(promptId);
+    expect(fetchedObservations.body.name).toBe("prompt-name");
+    expect(fetchedObservations.body.prompt).toBe("prompt");
+    expect(fetchedObservations.body.version).toBe(1);
+    expect(fetchedObservations.body.isActive).toBe(true);
+    expect(fetchedObservations.body.createdBy).toBe("user-1");
+  });
+
+  it("should fetch active prompt only if no prompt version is given", async () => {
+    const promptId = uuidv4();
+
+    await prisma.prompt.create({
+      data: {
+        id: promptId,
+        name: "prompt-name",
+        prompt: "prompt",
+        isActive: false,
+        version: 1,
+        project: {
+          connect: { id: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a" },
+        },
+        createdBy: "user-1",
+      },
+    });
+
+    const fetchedObservations = await makeAPICall(
+      "GET",
+      "/api/public/prompts?name=prompt-name",
+      undefined,
+    );
+
+    expect(fetchedObservations.status).toBe(404);
+  });
+
+  it("should fetch inactive prompt if prompt version is given", async () => {
+    const promptId = uuidv4();
+    const promptTwoId = uuidv4();
+
+    await prisma.prompt.create({
+      data: {
+        id: promptId,
+        name: "prompt-name",
+        prompt: "prompt-one",
+        isActive: false,
+        version: 1,
+        project: {
+          connect: { id: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a" },
+        },
+        createdBy: "user-1",
+      },
+    });
+
+    await prisma.prompt.create({
+      data: {
+        id: promptTwoId,
+        name: "prompt-name",
+        prompt: "prompt",
+        isActive: true,
+        version: 2,
+        project: {
+          connect: { id: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a" },
+        },
+        createdBy: "user-1",
+      },
+    });
+
+    const fetchedObservations = await makeAPICall(
+      "GET",
+      "/api/public/prompts?name=prompt-name&version=1",
+      undefined,
+    );
+
+    expect(fetchedObservations.status).toBe(200);
+
+    if (!isPrompt(fetchedObservations.body)) {
+      throw new Error("Expected body to be a prompt");
+    }
+
+    expect(fetchedObservations.body.id).toBe(promptId);
+    expect(fetchedObservations.body.name).toBe("prompt-name");
+    expect(fetchedObservations.body.prompt).toBe("prompt-one");
+    expect(fetchedObservations.body.version).toBe(1);
+    expect(fetchedObservations.body.isActive).toBe(false);
+    expect(fetchedObservations.body.createdBy).toBe("user-1");
+  });
+
+  it("should fetch active prompt when multiple exist", async () => {
+    const promptIdOne = uuidv4();
+    const promptIdTwo = uuidv4();
+
+    await prisma.prompt.create({
+      data: {
+        id: promptIdOne,
+        name: "prompt-name",
+        prompt: "prompt",
+        isActive: false,
+        version: 1,
+        project: {
+          connect: { id: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a" },
+        },
+        createdBy: "user-1",
+      },
+    });
+
+    await prisma.prompt.create({
+      data: {
+        id: promptIdTwo,
+        name: "prompt-name",
+        prompt: "prompt",
+        isActive: true,
+        version: 2,
+        project: {
+          connect: { id: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a" },
+        },
+        createdBy: "user-1",
+      },
+    });
+
+    const fetchedObservations = await makeAPICall(
+      "GET",
+      "/api/public/prompts?name=prompt-name",
+      undefined,
+    );
+
+    expect(fetchedObservations.status).toBe(200);
+
+    if (!isPrompt(fetchedObservations.body)) {
+      throw new Error("Expected body to be a prompt");
+    }
+
+    expect(fetchedObservations.body.id).toBe(promptIdTwo);
+    expect(fetchedObservations.body.name).toBe("prompt-name");
+    expect(fetchedObservations.body.prompt).toBe("prompt");
+    expect(fetchedObservations.body.version).toBe(2);
+    expect(fetchedObservations.body.isActive).toBe(true);
+    expect(fetchedObservations.body.createdBy).toBe("user-1");
+  });
+
+  it("should create and fetch a prompt", async () => {
+    await makeAPICall("POST", "/api/public/prompts", {
+      name: "prompt-name",
+      prompt: "prompt",
+      isActive: true,
+      projectId: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a",
+    });
+
+    const fetchedObservations = await makeAPICall(
+      "GET",
+      "/api/public/prompts?name=prompt-name&version=1",
+      undefined,
+    );
+
+    expect(fetchedObservations.status).toBe(200);
+
+    if (!isPrompt(fetchedObservations.body)) {
+      throw new Error("Expected body to be an array of observations");
+    }
+
+    expect(fetchedObservations.body.name).toBe("prompt-name");
+    expect(fetchedObservations.body.prompt).toBe("prompt");
+    expect(fetchedObservations.body.version).toBe(1);
+    expect(fetchedObservations.body.isActive).toBe(true);
+    expect(fetchedObservations.body.createdBy).toBe("API");
+  });
+
+  it("should relate generation to prompt", async () => {
+    const traceId = v4();
+    const generationId = v4();
+
+    const promptId = uuidv4();
+
+    await prisma.prompt.create({
+      data: {
+        id: promptId,
+        name: "prompt-name",
+        prompt: "prompt",
+        isActive: true,
+        version: 1,
+        project: {
+          connect: { id: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a" },
+        },
+        createdBy: "user-1",
+      },
+    });
+
+    const response = await makeAPICall("POST", "/api/public/ingestion", {
+      metadata: {
+        sdk_verion: "1.0.0",
+        sdk_name: "python",
+      },
+      batch: [
+        {
+          id: v4(),
+          type: "trace-create",
+          timestamp: new Date().toISOString(),
+          body: {
+            id: traceId,
+            name: "trace-name",
+          },
+        },
+        {
+          id: v4(),
+          type: "generation-create",
+          timestamp: new Date().toISOString(),
+          body: {
+            id: generationId,
+            traceId: traceId,
+            type: "GENERATION",
+            name: "generation-name",
+            promptName: "prompt-name",
+            promptVersion: 1,
+          },
+        },
+      ],
+    });
+
+    expect(response.status).toBe(207);
+
+    console.log("response body", response.body);
+
+    const dbGeneration = await prisma.observation.findUnique({
+      where: {
+        id: generationId,
+      },
+    });
+
+    expect(dbGeneration?.id).toBe(generationId);
+    expect(dbGeneration?.promptId).toBe(promptId);
+  });
+
+  it("should fail if prompt version is missing", async () => {
+    const traceId = v4();
+    const generationId = v4();
+
+    const promptId = uuidv4();
+
+    await prisma.prompt.create({
+      data: {
+        id: promptId,
+        name: "prompt-name",
+        prompt: "prompt",
+        isActive: true,
+        version: 1,
+        project: {
+          connect: { id: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a" },
+        },
+        createdBy: "user-1",
+      },
+    });
+
+    const response = await makeAPICall("POST", "/api/public/ingestion", {
+      metadata: {
+        sdk_verion: "1.0.0",
+        sdk_name: "python",
+      },
+      batch: [
+        {
+          id: v4(),
+          type: "trace-create",
+          timestamp: new Date().toISOString(),
+          body: {
+            id: traceId,
+            name: "trace-name",
+          },
+        },
+        {
+          id: v4(),
+          type: "generation-create",
+          timestamp: new Date().toISOString(),
+          body: {
+            id: generationId,
+            traceId: traceId,
+            type: "GENERATION",
+            name: "generation-name",
+            promptName: "prompt-name",
+          },
+        },
+      ],
+    });
+
+    expect(response.status).toBe(207);
+
+    console.log("response body", response.body);
+
+    const dbGeneration = await prisma.observation.findUnique({
+      where: {
+        id: generationId,
+      },
+    });
+
+    expect(dbGeneration).toBeNull();
+  });
+});
+
+const isPrompt = (x: unknown): x is Prompt => {
+  if (typeof x !== "object" || x === null) return false;
+  const prompt = x as Prompt;
+  return (
+    typeof prompt.id === "string" &&
+    typeof prompt.name === "string" &&
+    typeof prompt.version === "number" &&
+    typeof prompt.prompt === "string" &&
+    typeof prompt.isActive === "boolean" &&
+    typeof prompt.projectId === "string" &&
+    typeof prompt.createdBy === "string"
+  );
+};

src/__tests__/server/api/routers/traces.servertest.ts

@@ -0,0 +1,107 @@
+/** @jest-environment node */
+import { pruneDatabase } from "@/src/__tests__/test-utils";
+import { appRouter } from "@/src/server/api/root";
+import { createInnerTRPCContext } from "@/src/server/api/trpc";
+import { prisma } from "@/src/server/db";
+import type { Session } from "next-auth";
+
+describe("Traces TRPC Router", () => {
+  beforeEach(async () => await pruneDatabase());
+  afterEach(async () => await pruneDatabase());
+
+  const session: Session = {
+    expires: "1",
+    user: {
+      id: "clgb17vnp000008jjere5g15i",
+      name: "John Doe",
+      projects: [
+        {
+          id: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a",
+          role: "ADMIN",
+          name: "test",
+        },
+      ],
+      featureFlags: {
+        templateFlag: true,
+      },
+      admin: true,
+    },
+  };
+
+  const ctx = createInnerTRPCContext({ session });
+  const caller = appRouter.createCaller({ ...ctx, prisma });
+
+  test("traces.all RPC returns an array of traces", async () => {
+    const trace = {
+      name: "trace-name",
+      userId: "user-1",
+      metadata: { key: "value" },
+      release: "1.0.0",
+      version: "2.0.0",
+    };
+    await prisma.trace.create({
+      data: { ...trace, projectId: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a" },
+    });
+
+    const traces = await caller.traces.all({
+      page: 0,
+      limit: 10,
+      // projectId from `seed.ts`
+      projectId: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a",
+      filter: null,
+      searchQuery: "",
+      orderBy: null,
+    });
+    expect(traces).toBeDefined();
+    expect(traces).toMatchObject([trace]);
+  });
+
+  test("traces.all RPC orders traces by userId", async () => {
+    const traceTmpl = {
+      name: "trace-name",
+      userId: "user-1",
+      metadata: { key: "value" },
+      release: "1.0.0",
+      version: "2.0.0",
+    };
+    const trace1 = traceTmpl;
+    const trace2 = { ...traceTmpl, userId: "user-2" };
+    await prisma.trace.create({
+      data: { ...traceTmpl, projectId: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a" },
+    });
+    await prisma.trace.create({
+      data: {
+        ...trace2,
+        projectId: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a",
+      },
+    });
+
+    const tracesASC = await caller.traces.all({
+      page: 0,
+      limit: 10,
+      // projectId from `seed.ts`
+      projectId: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a",
+      filter: null,
+      searchQuery: "",
+      orderBy: {
+        column: "userId",
+        order: "ASC",
+      },
+    });
+    expect(tracesASC).toMatchObject([trace1, trace2]);
+
+    const tracesDESC = await caller.traces.all({
+      page: 0,
+      limit: 10,
+      // projectId from `seed.ts`
+      projectId: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a",
+      filter: null,
+      searchQuery: "",
+      orderBy: {
+        column: "userId",
+        order: "DESC",
+      },
+    });
+    expect(tracesDESC).toMatchObject([trace2, trace1]);
+  });
+});

src/__tests__/sessions.servertest.ts

@@ -0,0 +1,62 @@
+/** @jest-environment node */
+
+import { makeAPICall, pruneDatabase } from "@/src/__tests__/test-utils";
+import { prisma } from "@/src/server/db";
+
+describe("/api/public/traces API Endpoint", () => {
+  beforeEach(async () => await pruneDatabase());
+  afterEach(async () => await pruneDatabase());
+
+  it("should create a session via a trace", async () => {
+    await pruneDatabase();
+
+    await makeAPICall("POST", "/api/public/traces", {
+      name: "trace-name",
+      projectId: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a",
+      sessionId: "session-id",
+    });
+
+    const dbSession = await prisma.traceSession.findFirst({
+      where: {
+        id: "session-id",
+      },
+    });
+
+    expect(dbSession).not.toBeNull();
+    expect(dbSession).toMatchObject({
+      id: "session-id",
+      projectId: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a",
+    });
+  });
+
+  it("should get session including traces", async () => {
+    await pruneDatabase();
+
+    await makeAPICall("POST", "/api/public/traces", {
+      name: "trace-name",
+      id: "trace-id",
+      input: { hello: "world" },
+      output: "hi",
+      projectId: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a",
+      sessionId: "session-id",
+    });
+
+    const response = await makeAPICall(
+      "GET",
+      "/api/public/sessions/session-id",
+    );
+
+    expect(response.status).toBe(200);
+    expect(response.body).toMatchObject({
+      id: "session-id",
+      projectId: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a",
+      traces: [
+        {
+          id: "trace-id",
+          input: { hello: "world" },
+          output: "hi",
+        },
+      ],
+    });
+  });
+});

src/__tests__/spans.servertest.ts

@@ -140,8 +140,8 @@ describe("/api/public/spans API Endpoint", () => {
         name: "spanName",
       },
     });
-    expect(dbSpan?.id).toBe(spanId);
-    expect(dbSpan?.traceId).toBe(traceId);
+    expect(dbSpan.id).toBe(spanId);
+    expect(dbSpan.traceId).toBe(traceId);
   });
 
   it("should create trace when creating span without existing trace", async () => {
@@ -248,14 +248,14 @@ describe("/api/public/spans API Endpoint", () => {
 
     expect(createSpan.status).toBe(200);
 
-    expect(dbSpan?.id).toBe(spanId);
-    expect(dbSpan?.traceId).toBe(dbTrace[0]?.id);
-    expect(dbSpan?.name).toBe(generationName);
-    expect(dbSpan?.startTime).toEqual(new Date("2021-01-01T00:00:00.000Z"));
-    expect(dbSpan?.endTime).toEqual(new Date("2021-01-01T00:00:00.000Z"));
-    expect(dbSpan?.input).toEqual({ key: "value" });
-    expect(dbSpan?.metadata).toEqual({ key: "value" });
-    expect(dbSpan?.version).toBe("2.0.0");
+    expect(dbSpan.id).toBe(spanId);
+    expect(dbSpan.traceId).toBe(dbTrace[0]?.id);
+    expect(dbSpan.name).toBe(generationName);
+    expect(dbSpan.startTime).toEqual(new Date("2021-01-01T00:00:00.000Z"));
+    expect(dbSpan.endTime).toEqual(new Date("2021-01-01T00:00:00.000Z"));
+    expect(dbSpan.input).toEqual({ key: "value" });
+    expect(dbSpan.metadata).toEqual({ key: "value" });
+    expect(dbSpan.version).toBe("2.0.0");
   });
 
   it("should update span", async () => {

src/__tests__/test-utils.ts

@@ -9,6 +9,11 @@ export const pruneDatabase = async () => {
   await prisma.score.deleteMany();
   await prisma.observation.deleteMany();
   await prisma.trace.deleteMany();
+  await prisma.datasetItem.deleteMany();
+  await prisma.dataset.deleteMany();
+  await prisma.datasetRuns.deleteMany();
+  await prisma.prompt.deleteMany();
+  await prisma.events.deleteMany();
 };
 
 export function createBasicAuthHeader(
@@ -24,7 +29,7 @@ export function createBasicAuthHeader(
 export async function makeAPICall(
   method: "POST" | "GET" | "PUT" | "DELETE" | "PATCH",
   url: string,
-  body: unknown,
+  body?: unknown,
 ) {
   const finalUrl = `http://localhost:3000/${url}`;
   const options = {
@@ -37,7 +42,9 @@ export async function makeAPICall(
         "sk-lf-1234567890",
       ),
     },
-    body: JSON.stringify(body),
+    // Conditionally include the body property if the method is not "GET"
+    ...(method !== "GET" &&
+      body !== undefined && { body: JSON.stringify(body) }),
   };
   const a = await fetch(finalUrl, options);
 

src/__tests__/traces.servertest.ts

@@ -44,29 +44,48 @@ describe("/api/public/traces API Endpoint", () => {
       metadata: { key: "value" },
       release: "1.0.0",
       version: "2.0.0",
+      public: true,
+    });
+
+    const dbTrace1 = await prisma.trace.findFirst({
+      where: {
+        id: "trace-id",
+      },
+    });
+
+    expect(dbTrace1).not.toBeNull();
+    expect(dbTrace1).toMatchObject({
+      name: "trace-name",
+      release: "1.0.0",
+      externalId: null,
+      version: "2.0.0",
+      public: true,
+      userId: "user-1",
     });
 
     await makeAPICall("POST", "/api/public/traces", {
       id: "trace-id",
-      name: "trace-name",
-      userId: "user-1",
       projectId: "7a88fb47-b4e2-43b8-a06c-a5ce950dc53a",
       metadata: { key: "value" },
       release: "1.0.0",
       version: "5.0.0",
+      public: false,
     });
 
-    const dbTrace = await prisma.trace.findMany({
+    const dbTrace2 = await prisma.trace.findFirst({
       where: {
         name: "trace-name",
       },
     });
 
-    expect(dbTrace.length).toBeGreaterThan(0);
-    expect(dbTrace[0]?.name).toBe("trace-name");
-    expect(dbTrace[0]?.release).toBe("1.0.0");
-    expect(dbTrace[0]?.externalId).toBeNull();
-    expect(dbTrace[0]?.version).toBe("5.0.0");
-    expect(dbTrace[0]?.projectId).toBe("7a88fb47-b4e2-43b8-a06c-a5ce950dc53a");
+    expect(dbTrace2).not.toBeNull();
+    expect(dbTrace2).toMatchObject({
+      name: "trace-name",
+      release: "1.0.0",
+      externalId: null,
+      version: "5.0.0",
+      public: false,
+      userId: "user-1",
+    });
   });
 });

src/__tests__/usage.servertest.ts

@@ -8,6 +8,7 @@ describe("Token Count Functions", () => {
       { model: "gpt-4-vision-preview", tokens: 114 },
       { model: "claude", tokens: 118 },
       { model: "claude-instant-1.2", tokens: 118 },
+      { model: "gpt-3.5-turbo-1106", tokens: 114 },
     ].forEach(({ model, tokens }) => {
       it(`should return token count ${tokens} for ${model}`, () => {
         const result = tokenCount({

src/components/LangfuseLogo.tsx

@@ -1,3 +1,4 @@
+import { VERSION } from "@/src/constants/VERSION";
 import { cn } from "@/src/utils/tailwind";
 
 export const LangfuseIcon = ({
@@ -20,9 +21,11 @@ export const LangfuseIcon = ({
 export const LangfuseLogo = ({
   className,
   size = "sm",
+  version = false,
 }: {
   size?: "sm" | "xl";
   className?: string;
+  version?: boolean;
 }) => (
   <div className={cn("flex items-center", className)}>
     <LangfuseIcon size={size === "sm" ? 16 : 20} />
@@ -34,5 +37,6 @@ export const LangfuseLogo = ({
     >
       Langfuse
     </span>
+    {version && <span className="ml-2 text-xs text-gray-400">{VERSION}</span>}
   </div>
 );

src/components/bookmark-trace.tsx

@@ -1,60 +0,0 @@
-import { StarIcon } from "lucide-react";
-
-import { Button } from "@/src/components/ui/button";
-import { api } from "@/src/utils/api";
-import { useHasAccess } from "@/src/features/rbac/utils/checkAccess";
-import { useEffect, useState } from "react";
-
-export function BookmarkTrace({
-  traceId,
-  projectId,
-  isBookmarked,
-  size = "sm",
-}: {
-  traceId: string;
-  projectId: string;
-  isBookmarked: boolean;
-  size?: "sm" | "xs";
-}) {
-  const utils = api.useUtils();
-  const [cacheIsBookmarked, setCacheIsBookmarked] = useState<boolean | null>(
-    null,
-  );
-  const localIsBookmarked = cacheIsBookmarked ?? isBookmarked;
-  const hasAccess = useHasAccess({ projectId, scope: "traces:bookmark" });
-  const mutBookmarkTrace = api.traces.bookmark.useMutation({
-    onSuccess: () => {
-      setCacheIsBookmarked(!localIsBookmarked);
-      void utils.traces.invalidate();
-    },
-  });
-
-  useEffect(() => {
-    setCacheIsBookmarked(null);
-  }, [isBookmarked]);
-
-  const handleBookmarkClick = () => {
-    if (!hasAccess) return;
-    void mutBookmarkTrace.mutateAsync({
-      traceId,
-      projectId,
-      bookmarked: !localIsBookmarked,
-    });
-  };
-
-  return (
-    <Button
-      variant="ghost"
-      size={size}
-      onClick={handleBookmarkClick}
-      disabled={!hasAccess}
-      loading={mutBookmarkTrace.isLoading}
-    >
-      <StarIcon
-        className={`h-4 w-4 ${
-          localIsBookmarked ? "fill-current text-yellow-500" : "text-gray-500"
-        }`}
-      />
-    </Button>
-  );
-}

src/components/date-picker.tsx

@@ -191,7 +191,7 @@ export function DatePickerWithRange({
             {DEFAULT_DATE_RANGE_SELECTION}
           </SelectItem>
           {dateTimeAggregationOptions.toReversed().map((item) => (
-            <SelectItem key={item} value={`${item}`}>
+            <SelectItem key={item} value={item}>
               {item}
             </SelectItem>
           ))}

src/components/delete-trace.tsx

@@ -1,6 +1,6 @@
 import { TrashIcon } from "lucide-react";
 import { useRouter } from "next/router";
-
+import { useState } from "react";
 import { Button } from "@/src/components/ui/button";
 import { api } from "@/src/utils/api";
 import {
@@ -9,6 +9,7 @@ import {
   PopoverTrigger,
 } from "@/src/components/ui/popover";
 import { useHasAccess } from "@/src/features/rbac/utils/checkAccess";
+import { usePostHog } from "posthog-js/react";
 
 export function DeleteTrace({
   traceId,
@@ -19,13 +20,16 @@ export function DeleteTrace({
   projectId: string;
   isTableAction?: boolean;
 }) {
+  const [isDeleted, setIsDeleted] = useState(false);
   const router = useRouter();
   const utils = api.useUtils();
+  const posthog = usePostHog();
 
   const hasAccess = useHasAccess({ projectId, scope: "traces:delete" });
 
-  const mutDeleteTrace = api.traces.delete.useMutation({
+  const mutDeleteTraces = api.traces.deleteMany.useMutation({
     onSuccess: () => {
+      setIsDeleted(true);
       if (!isTableAction) {
         void router
           .push(`/project/${projectId}/traces`)
@@ -41,14 +45,14 @@ export function DeleteTrace({
   }
 
   return (
-    <Popover>
+    <Popover key={traceId}>
       <PopoverTrigger asChild>
         {isTableAction ? (
           <Button variant="ghost" size="xs">
             <TrashIcon className="h-4 w-4" />
           </Button>
         ) : (
-          <Button variant="outline" type="button">
+          <Button variant="outline" type="button" size="sm">
             <TrashIcon className="h-4 w-4" />
           </Button>
         )}
@@ -63,10 +67,16 @@ export function DeleteTrace({
           <Button
             type="button"
             variant="destructive"
-            loading={mutDeleteTrace.isLoading}
-            onClick={() =>
-              void mutDeleteTrace.mutateAsync({ traceId, projectId })
-            }
+            loading={mutDeleteTraces.isLoading || isDeleted}
+            onClick={() => {
+              void mutDeleteTraces.mutateAsync({
+                traceIds: [traceId],
+                projectId,
+              });
+              posthog.capture("trace:delete", {
+                source: isTableAction ? "table-single-row" : "trace",
+              });
+            }}
           >
             Delete trace
           </Button>

src/components/grouped-score-badge.tsx

@@ -1,8 +1,16 @@
 import { Badge } from "@/src/components/ui/badge";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/src/components/ui/hover-card";
+import { cn } from "@/src/utils/tailwind";
+import { MessageCircle } from "lucide-react";
 
 type ScoreSimplified = {
   name: string;
   value: number;
+  comment?: string | null;
 };
 
 export const GroupedScoreBadges = ({
@@ -12,7 +20,7 @@ export const GroupedScoreBadges = ({
   scores: ScoreSimplified[];
   variant?: "badge" | "headings";
 }) => {
-  const groupedScores = scores.reduce(
+  const groupedScores = scores.reduce<Record<string, ScoreSimplified[]>>(
     (acc, score) => {
       if (!acc[score.name] || !Array.isArray(acc[score.name])) {
         acc[score.name] = [score];
@@ -21,7 +29,31 @@ export const GroupedScoreBadges = ({
       }
       return acc;
     },
-    {} as Record<string, ScoreSimplified[]>,
+    {},
+  );
+
+  const ScoresOfGroup = (props: {
+    scores: ScoreSimplified[];
+    className?: string;
+  }) => (
+    <div className={cn("text-xs", props.className)}>
+      {props.scores.map((s, i) => (
+        <span key={i} className="group/score ml-1 first:ml-0">
+          {s.value.toFixed(2)}
+          {s.comment && (
+            <HoverCard>
+              <HoverCardTrigger className="ml-1 inline-block cursor-pointer">
+                <MessageCircle size={12} />
+              </HoverCardTrigger>
+              <HoverCardContent>
+                <p>{s.comment}</p>
+              </HoverCardContent>
+            </HoverCard>
+          )}
+          <span className="group-last/score:hidden">,</span>
+        </span>
+      ))}
+    </div>
   );
 
   if (variant === "headings")
@@ -32,9 +64,7 @@ export const GroupedScoreBadges = ({
           .map(([name, scores]) => (
             <div key={name}>
               <div className="text-xs text-gray-500">{name}</div>
-              <div className="text-xs">
-                {scores.map((s) => s.value.toFixed(2)).join(", ")}
-              </div>
+              <ScoresOfGroup scores={scores} />
             </div>
           ))}
       </div>
@@ -50,7 +80,7 @@ export const GroupedScoreBadges = ({
               key={name}
               className="break-all font-normal"
             >
-              {name}: {scores.map((s) => s.value.toFixed(2)).join(", ")}
+              {name}: <ScoresOfGroup scores={scores} className="ml-2" />
             </Badge>
           ))}
       </>

src/components/layouts/doc-popup.tsx

@@ -5,6 +5,7 @@ import {
 } from "@/src/components/ui/hover-card";
 import { HelpCircle } from "lucide-react";
 import Link from "next/link";
+import { usePostHog } from "posthog-js/react";
 
 export type DocPopupProps = {
   description: React.ReactNode;
@@ -22,14 +23,25 @@ export default function DocPopup({
     md: "w-6 h-6",
     lg: "w-8 h-8",
   };
+  const posthog = usePostHog();
 
   return (
-    <HoverCard openDelay={200}>
-      <HoverCardTrigger className="mx-2 cursor-pointer" asChild>
-        <Link href={href} rel="noopener" target="_blank">
-          <div className="whitespace-nowrap text-gray-500 sm:pl-0">
-            <HelpCircle className={sizes[size]} />
-          </div>
+    <HoverCard
+      openDelay={200}
+      onOpenChange={(open) => {
+        if (open) {
+          posthog.capture("help-popup:opened", { href, description });
+        }
+      }}
+    >
+      <HoverCardTrigger className="mx-1 cursor-pointer" asChild>
+        <Link
+          href={href}
+          rel="noopener"
+          target="_blank"
+          className="inline-block whitespace-nowrap text-gray-500 sm:pl-0"
+        >
+          <HelpCircle className={sizes[size]} />
         </Link>
       </HoverCardTrigger>
       <HoverCardContent>

src/components/layouts/header.tsx

@@ -2,11 +2,14 @@ import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/20/solid";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
+import DocPopup from "@/src/components/layouts/doc-popup";
+import { type Status, StatusBadge } from "./status-badge";
 
 export default function Header(props: {
   title: string;
   breadcrumb?: { name: string; href?: string }[];
-  live?: boolean;
+  status?: Status;
+  help?: { description: string; href: string };
   actionButtons?: React.ReactNode;
 }) {
   const router = useRouter();
@@ -48,7 +51,7 @@ export default function Header(props: {
             </Link>
           </nav>
         ) : null}
-        {breadcrumb ? (
+        {breadcrumb.length ? (
           <nav className="hidden sm:flex" aria-label="Breadcrumb">
             <ol role="list" className="flex items-center space-x-4">
               {breadcrumb.map(({ name, href }, index) => (
@@ -79,25 +82,25 @@ export default function Header(props: {
           </nav>
         ) : null}
       </div>
-      <div className="mt-2 flex flex-wrap items-center justify-between gap-5">
+      <div className="mt-2 flex flex-wrap items-center justify-between gap-2">
         <div className="flex items-center gap-3 md:gap-5">
-          <div className="min-w-0">
+          <div className="flex min-w-0 flex-row">
             <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
               {props.title}
             </h2>
+            {props.help ? (
+              <DocPopup
+                description={props.help.description}
+                href={props.help.href}
+                size="sm"
+              />
+            ) : null}
           </div>
-          {props.live ? (
-            <div className="flex items-center gap-2 rounded-sm bg-green-100 px-3  text-green-600">
-              <span className="relative flex h-2 w-2 ">
-                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75"></span>
-                <span className="relative inline-flex h-2 w-2 rounded-full bg-green-600"></span>
-              </span>
-              Live
-            </div>
-          ) : null}
+          {props.status && <StatusBadge type={props.status} />}
+        </div>
+        <div className="flex items-center gap-3">
+          {props.actionButtons ?? null}
         </div>
-        <div className="md:flex-1" />
-        {props.actionButtons ?? null}
       </div>
     </div>
   );

src/components/layouts/layout.tsx

@@ -23,6 +23,7 @@ import Head from "next/head";
 import { env } from "@/src/env.mjs";
 import { LangfuseLogo } from "@/src/components/LangfuseLogo";
 import { Spinner } from "@/src/components/layouts/spinner";
+import { hasAccess } from "@/src/features/rbac/utils/checkAccess";
 
 const userNavigation = [
   {
@@ -36,6 +37,10 @@ const userNavigation = [
 
 const pathsWithoutNavigation: string[] = [];
 const unauthenticatedPaths = ["/auth/sign-in", "/auth/sign-up"];
+const publishablePaths = [
+  "/project/[projectId]/sessions/[sessionId]",
+  "/project/[projectId]/traces/[traceId]",
+];
 
 export default function Layout(props: PropsWithChildren) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
@@ -54,6 +59,11 @@ export default function Layout(props: PropsWithChildren) {
         enableExperimentalFeatures ||
         session.data?.user?.featureFlags[featureFlag],
     )
+    .filter(
+      ({ rbacScope }) =>
+        rbacScope === undefined ||
+        (projectId && hasAccess({ projectId, scope: rbacScope, session })),
+    )
     .map(({ pathname, ...rest }) => ({
       pathname,
       href: pathname.replace("[projectId]", projectId ?? ""),
@@ -76,6 +86,7 @@ export default function Layout(props: PropsWithChildren) {
     session.data &&
     session.data.user === null &&
     !unauthenticatedPaths.includes(router.pathname) &&
+    !publishablePaths.includes(router.pathname) &&
     !router.pathname.startsWith("/public/")
   ) {
     void signOut({
@@ -87,9 +98,10 @@ export default function Layout(props: PropsWithChildren) {
   if (
     session.status === "unauthenticated" &&
     !unauthenticatedPaths.includes(router.pathname) &&
+    !publishablePaths.includes(router.pathname) &&
     !router.pathname.startsWith("/public/")
   ) {
-    void router.push("/auth/sign-in");
+    void router.replace("/auth/sign-in");
     return <Spinner message="Redirecting" />;
   }
 
@@ -97,7 +109,7 @@ export default function Layout(props: PropsWithChildren) {
     session.status === "authenticated" &&
     unauthenticatedPaths.includes(router.pathname)
   ) {
-    void router.push("/");
+    void router.replace("/");
     return <Spinner message="Redirecting" />;
   }
 
@@ -192,13 +204,13 @@ export default function Layout(props: PropsWithChildren) {
                   </Transition.Child>
                   {/* Sidebar component, swap this element with another sidebar if you like */}
                   <div className="flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 py-4">
-                    <LangfuseLogo size="xl" />
+                    <LangfuseLogo version size="xl" />
                     <nav className="flex flex-1 flex-col">
                       <ul role="list" className="flex flex-1 flex-col gap-y-7">
                         <li>
                           <ul role="list" className="-mx-2 space-y-1">
                             {navigation.map((item) => (
-                              <li key={item.name}>
+                              <li key={item.name} onClick={() => setSidebarOpen(false)}>
                                 <Link
                                   href={item.href}
                                   className={clsx(
@@ -218,6 +230,18 @@ export default function Layout(props: PropsWithChildren) {
                                     aria-hidden="true"
                                   />
                                   {item.name}
+                                  {item.label && (
+                                    <span
+                                      className={cn(
+                                        "self-center whitespace-nowrap break-keep rounded-sm border px-1 py-0.5 text-xs",
+                                        item.current
+                                          ? "border-indigo-600 text-indigo-600"
+                                          : "border-gray-200 text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600",
+                                      )}
+                                    >
+                                      {item.label}
+                                    </span>
+                                  )}
                                 </Link>
                               </li>
                             ))}
@@ -267,7 +291,7 @@ export default function Layout(props: PropsWithChildren) {
                                   {project.role === "VIEWER" ? (
                                     <span
                                       className={cn(
-                                        "whitespace-nowrap break-keep rounded-sm border p-1 text-xs",
+                                        "self-center whitespace-nowrap break-keep rounded-sm border px-1 py-0.5 text-xs",
                                         projectId === project.id
                                           ? "border-indigo-600 text-indigo-600"
                                           : "border-gray-200 text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600",
@@ -293,10 +317,10 @@ export default function Layout(props: PropsWithChildren) {
         {/* Static sidebar for desktop */}
         <div className="hidden xl:fixed xl:inset-y-0 xl:z-50 xl:flex xl:w-72 xl:flex-col">
           {/* Sidebar component, swap this element with another sidebar if you like */}
-          <div className="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 bg-white px-6 pb-3 pt-7">
-            <LangfuseLogo size="xl" className="mb-4" />
-            <nav className="flex flex-1 flex-col">
-              <ul role="list" className="flex flex-1 flex-col gap-y-4">
+          <div className="flex h-screen grow flex-col gap-y-5 border-r border-gray-200 bg-white pt-7">
+            <LangfuseLogo version size="xl" className="mb-2 px-6" />
+            <nav className="flex h-full flex-1 flex-col overflow-y-auto px-6 pb-3">
+              <ul role="list" className="flex h-full flex-col gap-y-4">
                 <li>
                   <ul role="list" className="-mx-2 space-y-1">
                     {navigation.map((item) => (
@@ -320,6 +344,18 @@ export default function Layout(props: PropsWithChildren) {
                             aria-hidden="true"
                           />
                           {item.name}
+                          {item.label && (
+                            <span
+                              className={cn(
+                                "self-center whitespace-nowrap break-keep rounded-sm border px-1 py-0.5 text-xs",
+                                item.current
+                                  ? "border-indigo-600 text-indigo-600"
+                                  : "border-gray-200 text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600",
+                              )}
+                            >
+                              {item.label}
+                            </span>
+                          )}
                         </Link>
                       </li>
                     ))}
@@ -373,7 +409,7 @@ export default function Layout(props: PropsWithChildren) {
                           {project.role === "VIEWER" ? (
                             <span
                               className={cn(
-                                "whitespace-nowrap break-keep rounded-sm border p-1 text-xs",
+                                "self-center whitespace-nowrap break-keep rounded-sm border px-1 py-0.5 text-xs",
                                 projectId === project.id
                                   ? "border-indigo-600 text-indigo-600"
                                   : "border-gray-200 text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600",
@@ -387,64 +423,60 @@ export default function Layout(props: PropsWithChildren) {
                     ))}
                   </ul>
                 </li>
-
-                <li className="-mx-6 ">
-                  <Menu as="div" className="relative">
-                    <Menu.Button className="flex w-full items-center gap-x-4 p-1.5 px-6 py-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-50">
-                      <span className="sr-only">Open user menu</span>
-                      <Avatar className="h-8 w-8">
-                        <AvatarImage
-                          src={session.data?.user?.image ?? undefined}
-                        />
-                        <AvatarFallback>
-                          {session.data?.user?.name
-                            ? session.data.user.name
-                                .split(" ")
-                                .map((word) => word[0])
-                                .slice(0, 2)
-                                .concat("")
-                            : null}
-                        </AvatarFallback>
-                      </Avatar>
-                      <span className="flex-shrink truncate text-sm font-semibold leading-6 text-gray-900">
-                        {session.data?.user?.name}
-                      </span>
-                      <ChevronDownIcon
-                        className="h-5 w-5 text-gray-400"
-                        aria-hidden="true"
-                      />
-                    </Menu.Button>
-                    <Transition
-                      as={Fragment}
-                      enter="transition ease-out duration-100"
-                      enterFrom="transform opacity-0 scale-95"
-                      enterTo="transform opacity-100 scale-100"
-                      leave="transition ease-in duration-75"
-                      leaveFrom="transform opacity-100 scale-100"
-                      leaveTo="transform opacity-0 scale-95"
-                    >
-                      <Menu.Items className="absolute -top-full right-0 z-10 mt-2.5 w-32 rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
-                        {userNavigation.map((item) => (
-                          <Menu.Item key={item.name}>
-                            {({ active }) => (
-                              <a
-                                onClick={() => void item.onClick()}
-                                className={cn(
-                                  active ? "bg-gray-50" : "",
-                                  "block cursor-pointer px-3 py-1 text-sm leading-6 text-gray-900",
-                                )}
-                              >
-                                {item.name}
-                              </a>
-                            )}
-                          </Menu.Item>
-                        ))}
-                      </Menu.Items>
-                    </Transition>
-                  </Menu>
-                </li>
               </ul>
             </nav>
+
+            <Menu as="div" className="relative left-1">
+              <Menu.Button className="flex w-full items-center gap-x-4 p-1.5 px-6 py-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-50">
+                <span className="sr-only">Open user menu</span>
+                <Avatar className="h-8 w-8">
+                  <AvatarImage src={session.data?.user?.image ?? undefined} />
+                  <AvatarFallback>
+                    {session.data?.user?.name
+                      ? session.data.user.name
+                          .split(" ")
+                          .map((word) => word[0])
+                          .slice(0, 2)
+                          .concat("")
+                      : null}
+                  </AvatarFallback>
+                </Avatar>
+                <span className="flex-shrink truncate text-sm font-semibold leading-6 text-gray-900">
+                  {session.data?.user?.name}
+                </span>
+                <ChevronDownIcon
+                  className="h-5 w-5 text-gray-400"
+                  aria-hidden="true"
+                />
+              </Menu.Button>
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+              >
+                <Menu.Items className="absolute -top-full right-0 z-10 mt-2.5 w-32 rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
+                  {userNavigation.map((item) => (
+                    <Menu.Item key={item.name}>
+                      {({ active }) => (
+                        <a
+                          onClick={() => void item.onClick()}
+                          className={cn(
+                            active ? "bg-gray-50" : "",
+                            "block cursor-pointer px-3 py-1 text-sm leading-6 text-gray-900",
+                          )}
+                        >
+                          {item.name}
+                        </a>
+                      )}
+                    </Menu.Item>
+                  ))}
+                </Menu.Items>
+              </Transition>
+            </Menu>
           </div>
         </div>
 
@@ -457,7 +489,7 @@ export default function Layout(props: PropsWithChildren) {
             <span className="sr-only">Open sidebar</span>
             <Bars3Icon className="h-6 w-6" aria-hidden="true" />
           </button>
-          <LangfuseLogo className="flex-1" />
+          <LangfuseLogo version className="flex-1" />
           <Menu as="div" className="relative">
             <Menu.Button className="flex items-center gap-x-4 text-sm font-semibold leading-6 text-gray-900">
               <span className="sr-only">Open user menu</span>
@@ -506,8 +538,8 @@ export default function Layout(props: PropsWithChildren) {
         <div className="xl:pl-72">
           {env.NEXT_PUBLIC_DEMO_PROJECT_ID &&
           projectId === env.NEXT_PUBLIC_DEMO_PROJECT_ID &&
-          env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION &&
-          env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION !== "STAGING" &&
+          (env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION === "STAGING" ||
+            env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION === "EU") &&
           !session.data?.user?.email?.endsWith("@langfuse.com") ? (
             <div className="flex w-full items-center border-b border-yellow-500  bg-yellow-100 px-4 py-2 xl:sticky xl:top-0 xl:z-40">
               <div className="flex flex-1 flex-wrap gap-1">
@@ -517,9 +549,19 @@ export default function Layout(props: PropsWithChildren) {
                 </div>
                 <div>Live data from the Langfuse Q&A Chatbot.</div>
               </div>
-              <Button size="sm" variant="ghost" asChild className="ml-2">
-                <Link href="https://langfuse.com/docs/demo" target="_blank">
-                  Learn more ↗
+
+              <Button size="sm" asChild className="ml-2">
+                <Link
+                  href={
+                    env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION === "EU"
+                      ? "https://langfuse.com/docs/qa-chatbot"
+                      : "https://docs-staging.langfuse.com/docs/qa-chatbot"
+                  }
+                  target="_blank"
+                >
+                  {env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION === "EU"
+                    ? "Q&A Chatbot ↗"
+                    : "Q&A Chatbot (staging) ↗"}
                 </Link>
               </Button>
             </div>

src/components/layouts/routes.ts

@@ -1,4 +1,5 @@
 import { type Flag } from "@/src/features/feature-flags/types";
+import { type Scope } from "@/src/features/rbac/constants/roleAccessRights";
 import {
   Database,
   LayoutDashboard,
@@ -9,6 +10,8 @@ import {
   Settings,
   TextSelect,
   UsersIcon,
+  Route,
+  PenSquareIcon,
 } from "lucide-react";
 
 export const ROUTES: Array<{
@@ -16,12 +19,19 @@ export const ROUTES: Array<{
   pathname: string;
   icon: LucideIcon;
   featureFlag?: Flag;
+  label?: string;
+  rbacScope?: Scope;
 }> = [
   {
     name: "Dashboard",
     pathname: `/project/[projectId]`,
     icon: LayoutDashboard,
   },
+  {
+    name: "Sessions",
+    pathname: `/project/[projectId]/sessions`,
+    icon: Route,
+  },
   {
     name: "Traces",
     pathname: `/project/[projectId]/traces`,
@@ -42,6 +52,13 @@ export const ROUTES: Array<{
     pathname: `/project/[projectId]/users`,
     icon: UsersIcon,
   },
+  {
+    name: "Prompts",
+    pathname: "/project/[projectId]/prompts",
+    icon: PenSquareIcon,
+    label: "Beta",
+    rbacScope: "prompts:read",
+  },
   {
     name: "Datasets",
     pathname: `/project/[projectId]/datasets`,

src/components/layouts/status-badge.tsx

@@ -0,0 +1,43 @@
+import { cn } from "@/src/utils/tailwind";
+
+const statusCategories = {
+  active: ["production", "live"],
+  inactive: ["disabled", "inactive"],
+};
+
+export type Status =
+  (typeof statusCategories)[keyof typeof statusCategories][number];
+
+export const StatusBadge = (props: { className?: string; type: Status }) => {
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center gap-2 rounded-sm px-2 py-1 text-xs",
+        statusCategories.active.includes(props.type)
+          ? " bg-green-100 text-green-600"
+          : "bg-gray-100 text-gray-800",
+        props.className,
+      )}
+    >
+      <span className="relative inline-flex h-2 w-2">
+        <span
+          className={cn(
+            "absolute inline-flex h-full w-full  rounded-full opacity-75",
+            statusCategories.active.includes(props.type)
+              ? "animate-ping bg-green-500"
+              : "bg-gray-500",
+          )}
+        ></span>
+        <span
+          className={cn(
+            "relative inline-flex h-2 w-2 rounded-full ",
+            statusCategories.active.includes(props.type)
+              ? "bg-green-600"
+              : "bg-gray-600",
+          )}
+        ></span>
+      </span>
+      <span>{props.type}</span>
+    </div>
+  );
+};

src/components/level-colors.tsx

@@ -0,0 +1,6 @@
+export const LevelColors = {
+  DEFAULT: { text: "", bg: "" },
+  DEBUG: { text: "text-gray-500", bg: "bg-gray-50" },
+  WARNING: { text: "text-yellow-800", bg: "bg-yellow-50" },
+  ERROR: { text: "text-red-800", bg: "bg-red-50" },
+};

src/components/no-access.tsx

@@ -0,0 +1,22 @@
+import { Button } from "@/src/components/ui/button";
+import { AlertCircle } from "lucide-react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
+
+export const NoAccessError = () => {
+  const session = useSession();
+  const router = useRouter();
+
+  return (
+    <div className="flex h-screen flex-col items-center justify-center">
+      <AlertCircle className="mb-4 h-12 w-12 text-red-500" />
+      <h1 className="mb-4 text-xl font-bold">Error</h1>
+      <p className="mb-8 text-center">
+        You do not have access to this resource.
+      </p>
+      {session.status === "unauthenticated" ? (
+        <Button onClick={() => void router.push("/")}>Sign In</Button>
+      ) : null}
+    </div>
+  );
+};

src/components/publish-object-switch.tsx

@@ -0,0 +1,120 @@
+import { Switch } from "@/src/components/ui/switch";
+import { useHasAccess } from "@/src/features/rbac/utils/checkAccess";
+import { api } from "@/src/utils/api";
+import { Link, LockIcon } from "lucide-react";
+import { usePostHog } from "posthog-js/react";
+import { useState } from "react";
+
+export const PublishTraceSwitch = (props: {
+  traceId: string;
+  projectId: string;
+  isPublic: boolean;
+}) => {
+  const posthog = usePostHog();
+  const hasAccess = useHasAccess({
+    projectId: props.projectId,
+    scope: "objects:publish",
+  });
+  const utils = api.useUtils();
+  const mut = api.traces.publish.useMutation({
+    onSuccess: () => utils.traces.invalidate(),
+  });
+
+  return (
+    <Base
+      id={props.traceId}
+      isPublic={props.isPublic}
+      onChange={(val) => {
+        mut.mutate({
+          projectId: props.projectId,
+          traceId: props.traceId,
+          public: val,
+        });
+        posthog.capture("trace_detail:publish_trace_button_click");
+      }}
+      isLoading={mut.isLoading}
+      disabled={!hasAccess}
+    />
+  );
+};
+
+export const PublishSessionSwitch = (props: {
+  sessionId: string;
+  projectId: string;
+  isPublic: boolean;
+}) => {
+  const posthog = usePostHog();
+  const hasAccess = useHasAccess({
+    projectId: props.projectId,
+    scope: "objects:publish",
+  });
+  const utils = api.useUtils();
+  const mut = api.sessions.publish.useMutation({
+    onSuccess: () => utils.sessions.invalidate(),
+  });
+
+  return (
+    <Base
+      id={props.sessionId}
+      isPublic={props.isPublic}
+      onChange={(val) => {
+        mut.mutate({
+          projectId: props.projectId,
+          sessionId: props.sessionId,
+          public: val,
+        });
+        posthog.capture("session_detail:publish_session_button_click");
+      }}
+      isLoading={mut.isLoading}
+      disabled={!hasAccess}
+    />
+  );
+};
+
+const Base = (props: {
+  id: string;
+  onChange: (value: boolean) => void;
+  isLoading: boolean;
+  isPublic: boolean;
+  disabled?: boolean;
+}) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const copyUrl = () => {
+    setIsCopied(true);
+    void navigator.clipboard.writeText(window.location.href);
+    setTimeout(() => setIsCopied(false), 1500);
+  };
+
+  return (
+    <div className="flex items-center gap-3">
+      <div className="text-sm font-semibold">
+        {props.isLoading ? (
+          "Loading.."
+        ) : props.isPublic ? (
+          <div
+            className="flex cursor-pointer items-center gap-1 text-green-800"
+            onClick={() => copyUrl()}
+          >
+            {isCopied ? "Link copied ..." : "Public"}
+            <Link size={16} />
+          </div>
+        ) : (
+          <div className="flex items-center gap-1">
+            Private
+            <LockIcon size={16} />
+          </div>
+        )}
+      </div>
+      <Switch
+        id="publish-trace"
+        checked={props.isPublic}
+        onCheckedChange={() => {
+          if (props.isLoading) return;
+          props.onChange(!props.isPublic);
+        }}
+        disabled={props.disabled}
+      />
+    </div>
+  );
+};

src/components/session/index.tsx

@@ -0,0 +1,119 @@
+import { GroupedScoreBadges } from "@/src/components/grouped-score-badge";
+import Header from "@/src/components/layouts/header";
+import { NoAccessError } from "@/src/components/no-access";
+import { PublishSessionSwitch } from "@/src/components/publish-object-switch";
+import { StarSessionToggle } from "@/src/components/star-toggle";
+import { IOPreview } from "@/src/components/trace/IOPreview";
+import { Badge } from "@/src/components/ui/badge";
+import { Card } from "@/src/components/ui/card";
+import { ManualScoreButton } from "@/src/features/manual-scoring/components/ManualScoreButton";
+import { DetailPageNav } from "@/src/features/navigate-detail-pages/DetailPageNav";
+import { api } from "@/src/utils/api";
+import Link from "next/link";
+
+export const SessionPage: React.FC<{
+  sessionId: string;
+  projectId: string;
+}> = ({ sessionId, projectId }) => {
+  const session = api.sessions.byId.useQuery(
+    {
+      sessionId,
+      projectId: projectId,
+    },
+    {
+      retry(failureCount, error) {
+        if (error.data?.code === "UNAUTHORIZED") return false;
+        return failureCount < 3;
+      },
+    },
+  );
+
+  if (session.error?.data?.code === "UNAUTHORIZED") return <NoAccessError />;
+
+  return (
+    <div className="flex flex-col overflow-hidden xl:container">
+      <Header
+        title="Session"
+        breadcrumb={[
+          {
+            name: "Sessions",
+            href: `/project/${projectId}/sessions`,
+          },
+          { name: sessionId },
+        ]}
+        actionButtons={[
+          <StarSessionToggle
+            key="star"
+            projectId={projectId}
+            sessionId={sessionId}
+            value={session.data?.bookmarked ?? false}
+          />,
+          <PublishSessionSwitch
+            projectId={projectId}
+            sessionId={sessionId}
+            isPublic={session.data?.public ?? false}
+            key="publish"
+          />,
+          <DetailPageNav
+            key="nav"
+            currentId={sessionId}
+            path={(id) => `/project/${projectId}/sessions/${id}`}
+            listKey="sessions"
+          />,
+        ]}
+      />
+      <div className="flex flex-wrap gap-2">
+        {session.data?.users.map((userId) => (
+          <Link key={userId} href={`/project/${projectId}/users/${userId}`}>
+            <Badge>User ID: {userId}</Badge>
+          </Link>
+        ))}
+        <Badge variant="outline">Traces: {session.data?.traces.length}</Badge>
+      </div>
+      <div className="mt-5 flex flex-col gap-2 border-t pt-5">
+        {session.data?.traces.map((trace) => (
+          <Card
+            className="border-border-gray-150 group grid gap-3 p-2 shadow-none hover:border-gray-300 md:grid-cols-3"
+            key={trace.id}
+          >
+            <div className="col-span-2 flex flex-col gap-2 p-0">
+              {trace.input || trace.output ? (
+                <IOPreview
+                  key={trace.id}
+                  input={trace.input}
+                  output={trace.output}
+                  hideIfNull
+                />
+              ) : (
+                <div className="p-2 text-xs text-gray-500">
+                  This trace has no input or output.
+                </div>
+              )}
+            </div>
+            <div className="-mt-1 p-1 opacity-50 transition-opacity group-hover:opacity-100">
+              <Link
+                href={`/project/${projectId}/traces/${trace.id}`}
+                className="text-xs hover:underline"
+              >
+                Trace: {trace.name} ({trace.id})&nbsp;↗
+              </Link>
+              <div className="text-xs text-gray-500">
+                {trace.timestamp.toLocaleString()}
+              </div>
+              <div className="mb-1 mt-2 text-xs text-gray-500">Scores</div>
+              <div className="flex flex-wrap content-start items-start gap-1">
+                <GroupedScoreBadges scores={trace.scores} />
+              </div>
+              <ManualScoreButton
+                projectId={projectId}
+                traceId={trace.id}
+                scores={trace.scores}
+                variant="badge"
+              />
+            </div>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+};

src/components/star-toggle.tsx

@@ -0,0 +1,122 @@
+import { StarIcon } from "lucide-react";
+
+import { Button } from "@/src/components/ui/button";
+import { useEffect, useState } from "react";
+import { api } from "@/src/utils/api";
+import { useHasAccess } from "@/src/features/rbac/utils/checkAccess";
+import { cn } from "@/src/utils/tailwind";
+
+export function StarToggle({
+  value,
+  disabled = false,
+  onClick,
+  size = "sm",
+}: {
+  value: boolean;
+  disabled?: boolean;
+  onClick: (value: boolean) => Promise<unknown>;
+  size?: "sm" | "xs";
+}) {
+  const [cachedValue, setCachedValue] = useState<boolean | null>(null);
+  const [loading, setLoading] = useState(false);
+  const optimisticValue = cachedValue ?? value;
+
+  useEffect(() => {
+    setCachedValue(null);
+  }, [value]);
+
+  const handleBookmarkClick = async () => {
+    if (disabled) return;
+    setLoading(true);
+    setCachedValue(!optimisticValue);
+    await onClick(!optimisticValue);
+    setLoading(false);
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size={size}
+      onClick={() => void handleBookmarkClick()}
+      disabled={disabled}
+      loading={loading}
+    >
+      <StarIcon
+        className={cn(
+          "h-4 w-4",
+          optimisticValue ? "fill-current text-yellow-500" : "text-gray-500",
+        )}
+      />
+    </Button>
+  );
+}
+
+export function StarTraceToggle({
+  projectId,
+  traceId,
+  value,
+  size = "sm",
+}: {
+  projectId: string;
+  traceId: string;
+  value: boolean;
+  size?: "sm" | "xs";
+}) {
+  const utils = api.useUtils();
+  const hasAccess = useHasAccess({ projectId, scope: "objects:bookmark" });
+  const mutBookmarkTrace = api.traces.bookmark.useMutation({
+    onSuccess: () => {
+      void utils.traces.invalidate();
+    },
+  });
+
+  return (
+    <StarToggle
+      value={value}
+      size={size}
+      disabled={!hasAccess}
+      onClick={(value) =>
+        mutBookmarkTrace.mutateAsync({
+          projectId,
+          traceId,
+          bookmarked: value,
+        })
+      }
+    />
+  );
+}
+
+export function StarSessionToggle({
+  projectId,
+  sessionId,
+  value,
+  size = "sm",
+}: {
+  projectId: string;
+  sessionId: string;
+  value: boolean;
+  size?: "sm" | "xs";
+}) {
+  const utils = api.useUtils();
+  const hasAccess = useHasAccess({ projectId, scope: "objects:bookmark" });
+  const mutBookmarkSession = api.sessions.bookmark.useMutation({
+    onSuccess: () => {
+      void utils.sessions.invalidate();
+    },
+  });
+
+  return (
+    <StarToggle
+      value={value}
+      size={size}
+      disabled={!hasAccess}
+      onClick={(value) =>
+        mutBookmarkSession.mutateAsync({
+          projectId,
+          sessionId,
+          bookmarked: value,
+        })
+      }
+    />
+  );
+}

src/components/table/data-table-column-visibility-filter.tsx

@@ -0,0 +1,78 @@
+import React, {
+  useCallback,
+  type Dispatch,
+  type SetStateAction,
+  useState,
+} from "react";
+import { Button } from "@/src/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuCheckboxItem,
+} from "@/src/components/ui/dropdown-menu";
+import { type VisibilityState } from "@tanstack/react-table";
+import { ChevronDownIcon } from "lucide-react";
+import { type LangfuseColumnDef } from "@/src/components/table/types";
+
+interface DataTableColumnVisibilityFilterProps<TData, TValue> {
+  columns: LangfuseColumnDef<TData, TValue>[];
+  columnVisibility: VisibilityState;
+  setColumnVisibility: Dispatch<SetStateAction<VisibilityState>>;
+}
+
+export function DataTableColumnVisibilityFilter<TData, TValue>({
+  columns,
+  columnVisibility,
+  setColumnVisibility,
+}: DataTableColumnVisibilityFilterProps<TData, TValue>) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleColumn = useCallback(
+    (columnId: string) => {
+      setColumnVisibility((old) => ({
+        ...old,
+        [columnId]: !old[columnId],
+      }));
+    },
+    [setColumnVisibility],
+  );
+
+  return (
+    <DropdownMenu open={isOpen}>
+      <DropdownMenuTrigger
+        onClick={() => {
+          setIsOpen(!isOpen);
+        }}
+        className="select-none"
+        asChild
+      >
+        <Button variant="outline" className="ml-auto">
+          Columns
+          <ChevronDownIcon className="ml-2 h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        onPointerDownOutside={() => setIsOpen(false)}
+      >
+        {columns.map(
+          (column, index) =>
+            "accessorKey" in column &&
+            column.enableHiding && (
+              <DropdownMenuCheckboxItem
+                key={index}
+                className="capitalize"
+                checked={columnVisibility[column.accessorKey]}
+                onCheckedChange={() =>
+                  toggleColumn(column.accessorKey.toString())
+                }
+              >
+                {column.header?.toString() ?? column.accessorKey.toString()}
+              </DropdownMenuCheckboxItem>
+            ),
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

src/components/table/data-table-key-value-filter.tsx

@@ -1,151 +0,0 @@
-import * as React from "react";
-import { Check, PlusCircle } from "lucide-react";
-
-import { Badge } from "@/src/components/ui/badge";
-import { Button } from "@/src/components/ui/button";
-
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/src/components/ui/popover";
-import { Separator } from "@/src/components/ui/separator";
-import { type KeyValueFilter } from "@/src/utils/tanstack";
-
-import { Input } from "@/src/components/ui/input";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from "@/src/components/ui/command";
-import { cn } from "@/src/utils/tailwind";
-
-interface DataTableKeyValueFilter {
-  title?: string;
-  meta: KeyValueFilter;
-}
-
-export function DataTableKeyValueFilter({
-  title,
-  meta,
-}: DataTableKeyValueFilter) {
-  const selectedValues = new Set(meta.values);
-
-  const [key, setKey] = React.useState("");
-  const [value, setValue] = React.useState("");
-
-  const clearFilter = () => {
-    meta.updateFunction(null);
-  };
-
-  const filter = () => {
-    meta.updateFunction({ key, value });
-    setKey("");
-    setValue("");
-  };
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline" size="sm" className="h-8 border-dashed">
-          <PlusCircle className="mr-2 h-4 w-4" />
-          {title}
-          {selectedValues
-            ? Array.from(selectedValues.values()).map((value) => (
-                <>
-                  <Separator orientation="vertical" className="mx-2 h-4" />
-                  <Badge
-                    variant="secondary"
-                    key={`${value.key}-${value.value}`}
-                    className="rounded-sm px-1 font-normal"
-                  >
-                    {value.key}-{value.value}
-                  </Badge>
-                </>
-              ))
-            : undefined}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0" align="start">
-        <Command>
-          <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup>
-              {Array.from(selectedValues.values()).map((selectedValue) => {
-                return (
-                  <CommandItem
-                    key={selectedValue.key}
-                    onSelect={() => {
-                      meta.removeSelectedValue({
-                        key: selectedValue.key,
-                        value: selectedValue.value,
-                      });
-                    }}
-                  >
-                    <div
-                      className={
-                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary bg-primary text-primary-foreground"
-                      }
-                    >
-                      <Check className={cn("h-4 w-4")} />
-                    </div>
-                    <span>
-                      {selectedValue.key} - {selectedValue.value}
-                    </span>
-                  </CommandItem>
-                );
-              })}
-            </CommandGroup>
-            {selectedValues.size > 0 ? <Separator /> : undefined}
-
-            <div className="flex flex-row justify-end p-2">
-              <div className="flex flex-col space-y-1.5">
-                <Input
-                  id="name-key"
-                  placeholder="Key"
-                  value={key}
-                  onChange={(e) => setKey(e.target.value)}
-                />
-              </div>
-              <div className="flex flex-col space-y-1.5">
-                <Input
-                  id="name-value"
-                  placeholder="Value"
-                  value={value}
-                  onChange={(e) => setValue(e.target.value)}
-                />
-              </div>
-            </div>
-
-            <CommandSeparator />
-            <CommandGroup>
-              <CommandItem
-                onSelect={() => filter()}
-                className="justify-center text-center"
-              >
-                Filter
-              </CommandItem>
-            </CommandGroup>
-
-            {meta.values && (
-              <>
-                <CommandSeparator />
-                <CommandGroup>
-                  <CommandItem
-                    onSelect={() => clearFilter()}
-                    className="justify-center text-center"
-                  >
-                    Clear filters
-                  </CommandItem>
-                </CommandGroup>
-              </>
-            )}
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}

src/components/table/data-table-multi-select-actions/trace-table-multi-select-action.tsx

@@ -0,0 +1,114 @@
+import { ChevronDown, Trash } from "lucide-react";
+
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@/src/components/ui/dropdown-menu";
+import { Button } from "@/src/components/ui/button";
+import { useHasAccess } from "@/src/features/rbac/utils/checkAccess";
+import { api } from "@/src/utils/api";
+import { usePostHog } from "posthog-js/react";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/src/components/ui/dialog";
+import { useState } from "react";
+
+export function TraceTableMultiSelectAction({
+  selectedTraceIds,
+  projectId,
+  onDeleteSuccess,
+}: {
+  selectedTraceIds: string[];
+  projectId: string;
+  onDeleteSuccess: () => void;
+}) {
+  const utils = api.useUtils();
+  const [open, setOpen] = useState(false);
+  const posthog = usePostHog();
+
+  const hasDeleteAccess = useHasAccess({ projectId, scope: "traces:delete" });
+  const mutDeleteTraces = api.traces.deleteMany.useMutation({
+    onSuccess: () => {
+      onDeleteSuccess();
+      void utils.traces.invalidate();
+    },
+  });
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="outline"
+            className="bg-white p-2 font-medium text-black"
+            disabled={selectedTraceIds.length < 1}
+          >
+            Actions ({selectedTraceIds.length} selected)
+            <ChevronDown className="h-5 w-5" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem
+            disabled={!hasDeleteAccess}
+            onClick={() => {
+              setOpen(true);
+            }}
+          >
+            <Trash className="mr-2 h-4 w-4" />
+            <span>Delete</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Dialog
+        open={open}
+        onOpenChange={(isOpen) => {
+          if (!isOpen) {
+            setOpen(false);
+          }
+        }}
+      >
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Delete traces</DialogTitle>
+            <DialogDescription>
+              This action cannot be undone and removes all the data associated
+              with these traces.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="sm:justify-start">
+            <Button
+              type="button"
+              variant="destructive"
+              loading={mutDeleteTraces.isLoading}
+              disabled={mutDeleteTraces.isLoading}
+              onClick={() => {
+                void mutDeleteTraces
+                  .mutateAsync({
+                    traceIds: selectedTraceIds,
+                    projectId,
+                  })
+                  .then(() => {
+                    setOpen(false);
+                  });
+                posthog.capture("trace:delete", {
+                  count: selectedTraceIds.length,
+                  source: "table-multi-select",
+                });
+              }}
+            >
+              Delete {selectedTraceIds.length} trace(s)
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

src/components/table/data-table-number-filter.tsx

@@ -1,204 +0,0 @@
-import * as React from "react";
-import { Check, PlusCircle } from "lucide-react";
-
-import { cn } from "@/src/utils/tailwind";
-import { Badge } from "@/src/components/ui/badge";
-import { Button } from "@/src/components/ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from "@/src/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/src/components/ui/popover";
-import { Separator } from "@/src/components/ui/separator";
-import { type TableRowOptions } from "@/src/components/table/types";
-import { type NumberComparisonFilter } from "@/src/utils/tanstack";
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/src/components/ui/select";
-import { Input } from "@/src/components/ui/input";
-
-interface DataTableNumberFilter {
-  title?: string;
-  meta: NumberComparisonFilter;
-  options: TableRowOptions;
-}
-
-export function DataTableNumberFilter({
-  title,
-  meta,
-  options,
-}: DataTableNumberFilter) {
-  const clearFilter = () => {
-    meta.selectedValues = { name: null, operator: null, value: null };
-    meta.updateFunction(null);
-  };
-
-  const filter = () => {
-    if (
-      meta.selectedValues?.operator &&
-      meta.selectedValues?.value !== null &&
-      meta.selectedValues?.name
-    ) {
-      meta.updateFunction({
-        name: meta.selectedValues?.name,
-        operator: meta.selectedValues.operator,
-        value: meta.selectedValues.value,
-      });
-    }
-  };
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline" size="sm" className="h-8 border-dashed">
-          <PlusCircle className="mr-2 h-4 w-4" />
-          {title}
-          {meta.values ? (
-            <>
-              <Separator orientation="vertical" className="mx-2 h-4" />
-              <Badge
-                variant="secondary"
-                key={meta.values.name}
-                className="rounded-sm px-1 font-normal"
-              >
-                {meta.values.name}-{meta.values.operator}-{meta.values.value}
-              </Badge>
-            </>
-          ) : undefined}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0" align="start">
-        <Command>
-          <CommandInput placeholder={title} />
-          <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup>
-              {options.options.map((option) => {
-                const isSelected =
-                  meta.selectedValues?.name &&
-                  meta.selectedValues?.name === option.label;
-                return (
-                  <CommandItem
-                    key={option.label}
-                    onSelect={() => {
-                      if (isSelected) {
-                        meta.selectedValues.name = null;
-                      } else {
-                        meta.updateSelectedScores({
-                          ...meta.selectedValues,
-                          name: option.label,
-                        });
-                      }
-                    }}
-                  >
-                    <div
-                      className={cn(
-                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
-                        isSelected
-                          ? "bg-primary text-primary-foreground"
-                          : "opacity-50 [&_svg]:invisible",
-                      )}
-                    >
-                      <Check className={cn("h-4 w-4")} />
-                    </div>
-                    {option.icon && (
-                      <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
-                    )}
-                    <span>{option.label}</span>
-                    {option.value && (
-                      <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
-                        {option.value}
-                      </span>
-                    )}
-                  </CommandItem>
-                );
-              })}
-            </CommandGroup>
-            <Separator />
-            <div className="flex flex-row justify-end p-2">
-              <Select
-                onValueChange={(operator) => {
-                  if (
-                    operator === "gt" ||
-                    operator === "gte" ||
-                    operator === "lt" ||
-                    operator === "lte" ||
-                    operator === "equals"
-                  ) {
-                    meta.updateSelectedScores({
-                      ...meta.selectedValues,
-                      operator: operator,
-                    });
-                  }
-                }}
-                value={meta.selectedValues.operator ?? undefined}
-              >
-                <SelectTrigger className="w-[180px]">
-                  <SelectValue placeholder="Operator" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem value="equals">equals</SelectItem>
-                    <SelectItem value="gt">gt</SelectItem>
-                    <SelectItem value="lt">lt</SelectItem>
-                    <SelectItem value="gte">gte</SelectItem>
-                    <SelectItem value="lte">lte</SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-              <Input
-                type="number"
-                placeholder="Value"
-                value={meta.selectedValues.value ?? undefined}
-                onChange={(event) =>
-                  meta.updateSelectedScores({
-                    ...meta.selectedValues,
-                    value: Number(event.currentTarget.value),
-                  })
-                }
-              />
-            </div>
-            <>
-              <CommandSeparator />
-              <CommandGroup>
-                <CommandItem
-                  onSelect={() => filter()}
-                  className="justify-center text-center"
-                >
-                  Filter
-                </CommandItem>
-              </CommandGroup>
-            </>
-            {meta.values && (
-              <>
-                <CommandSeparator />
-                <CommandGroup>
-                  <CommandItem
-                    onSelect={() => clearFilter()}
-                    className="justify-center text-center"
-                  >
-                    Clear filters
-                  </CommandItem>
-                </CommandGroup>
-              </>
-            )}
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}

src/components/table/data-table-select-filter.tsx

@@ -1,144 +0,0 @@
-import * as React from "react";
-import { Check, PlusCircle } from "lucide-react";
-
-import { cn } from "@/src/utils/tailwind";
-import { Badge } from "@/src/components/ui/badge";
-import { Button } from "@/src/components/ui/button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from "@/src/components/ui/command";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/src/components/ui/popover";
-import { Separator } from "@/src/components/ui/separator";
-import { type TableRowOptions } from "@/src/components/table/types";
-import { type SelectFilter } from "@/src/utils/tanstack";
-
-interface DataTableSelectFilter {
-  title?: string;
-  meta: SelectFilter;
-  options: TableRowOptions;
-}
-
-export function DataTableSelectFilter({
-  title,
-  meta,
-  options,
-}: DataTableSelectFilter) {
-  const selectedValues = new Set(meta.values ?? []);
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button variant="outline" size="sm" className="h-8 border-dashed">
-          <PlusCircle className="mr-2 h-4 w-4" />
-          {title}
-          {selectedValues?.size > 0 && (
-            <>
-              <Separator orientation="vertical" className="mx-2 h-4" />
-              <Badge
-                variant="secondary"
-                className="rounded-sm px-1 font-normal lg:hidden"
-              >
-                {selectedValues.size}
-              </Badge>
-              <div className="hidden space-x-1 lg:flex">
-                {selectedValues.size > 2 ? (
-                  <Badge
-                    variant="secondary"
-                    className="rounded-sm px-1 font-normal"
-                  >
-                    {selectedValues.size} selected
-                  </Badge>
-                ) : (
-                  options.options
-                    .filter((option) => selectedValues.has(option.label))
-                    .map((option) => (
-                      <Badge
-                        variant="secondary"
-                        key={option.value}
-                        className="rounded-sm px-1 font-normal"
-                      >
-                        {option.label}
-                      </Badge>
-                    ))
-                )}
-              </div>
-            </>
-          )}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0" align="start">
-        <Command>
-          <CommandInput placeholder={title} />
-          <CommandList>
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup>
-              {options.options.map((option) => {
-                const isSelected = selectedValues.has(option.label);
-                return (
-                  <CommandItem
-                    key={option.label}
-                    onSelect={() => {
-                      if (isSelected) {
-                        selectedValues.delete(option.label);
-                      } else {
-                        selectedValues.add(option.label);
-                      }
-                      const filterValues = Array.from(selectedValues);
-
-                      meta.updateFunction(
-                        filterValues.length ? filterValues : null,
-                      );
-                    }}
-                  >
-                    <div
-                      className={cn(
-                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
-                        isSelected
-                          ? "bg-primary text-primary-foreground"
-                          : "opacity-50 [&_svg]:invisible",
-                      )}
-                    >
-                      <Check className={cn("h-4 w-4")} />
-                    </div>
-                    {option.icon && (
-                      <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
-                    )}
-                    <span>{option.label}</span>
-                    {option.value && (
-                      <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
-                        {option.value}
-                      </span>
-                    )}
-                  </CommandItem>
-                );
-              })}
-            </CommandGroup>
-            {selectedValues.size > 0 && (
-              <>
-                <CommandSeparator />
-                <CommandGroup>
-                  <CommandItem
-                    onSelect={() => meta.updateFunction(null)}
-                    className="justify-center text-center"
-                  >
-                    Clear filters
-                  </CommandItem>
-                </CommandGroup>
-              </>
-            )}
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}

src/components/table/data-table-toolbar.tsx

@@ -1,9 +1,12 @@
 import { Button } from "@/src/components/ui/button";
 import React, { type Dispatch, type SetStateAction, useState } from "react";
 import { Input } from "@/src/components/ui/input";
+import { DataTableColumnVisibilityFilter } from "@/src/components/table/data-table-column-visibility-filter";
 import { type FilterState } from "@/src/features/filters/types";
 import { FilterBuilder } from "@/src/features/filters/components/filter-builder";
 import { type ColumnDefinition } from "@/src/server/api/interfaces/tableDefinition";
+import { type VisibilityState } from "@tanstack/react-table";
+import { type LangfuseColumnDef } from "@/src/components/table/types";
 
 interface SearchConfig {
   placeholder: string;
@@ -11,21 +14,27 @@ interface SearchConfig {
   currentQuery?: string;
 }
 
-interface DataTableToolbarProps {
+interface DataTableToolbarProps<TData, TValue> {
+  columns: LangfuseColumnDef<TData, TValue>[];
   filterColumnDefinition: ColumnDefinition[];
   searchConfig?: SearchConfig;
   actionButtons?: React.ReactNode;
   filterState: FilterState;
   setFilterState: Dispatch<SetStateAction<FilterState>>;
+  columnVisibility?: VisibilityState;
+  setColumnVisibility?: Dispatch<SetStateAction<VisibilityState>>;
 }
 
-export function DataTableToolbar({
+export function DataTableToolbar<TData, TValue>({
+  columns,
   filterColumnDefinition,
   searchConfig,
   actionButtons,
   filterState,
   setFilterState,
-}: DataTableToolbarProps) {
+  columnVisibility,
+  setColumnVisibility,
+}: DataTableToolbarProps<TData, TValue>) {
   const [searchString, setSearchString] = useState(
     searchConfig?.currentQuery ?? "",
   );
@@ -33,33 +42,42 @@ export function DataTableToolbar({
   return (
     <div className="my-2 flex max-w-full items-center justify-between overflow-x-auto">
       <div className="flex flex-1 items-center space-x-2">
-        {searchConfig ? (
+        {searchConfig && (
           <div className="flex max-w-md items-center space-x-2">
             <Input
               autoFocus
               placeholder={searchConfig.placeholder}
               value={searchString}
-              className="h-10 w-[200px] lg:w-[350px]"
-              onChange={(event) => {
-                setSearchString(event.currentTarget.value);
+              onChange={(event) => setSearchString(event.currentTarget.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  searchConfig.updateQuery(searchString);
+                }
               }}
+              className="h-10 w-[200px] lg:w-[350px]"
             />
             <Button
               variant="outline"
-              type="submit"
               onClick={() => searchConfig.updateQuery(searchString)}
             >
               Search
             </Button>
           </div>
-        ) : undefined}
+        )}
         <FilterBuilder
           columns={filterColumnDefinition}
           filterState={filterState}
           onChange={setFilterState}
         />
         <div className="flex-1" />
-        {actionButtons ? actionButtons : null}
+        {!!columnVisibility && !!setColumnVisibility && (
+          <DataTableColumnVisibilityFilter
+            columns={columns}
+            columnVisibility={columnVisibility}
+            setColumnVisibility={setColumnVisibility}
+          />
+        )}
+        {actionButtons}
       </div>
     </div>
   );

src/components/table/data-table.tsx

@@ -1,15 +1,8 @@
 "use client";
 
-import {
-  type ColumnDef,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-  type ColumnFiltersState,
-  getFilteredRowModel,
-  type OnChangeFn,
-  type PaginationState,
-} from "@tanstack/react-table";
+import DocPopup from "@/src/components/layouts/doc-popup";
+import { DataTablePagination } from "@/src/components/table/data-table-pagination";
+import { type LangfuseColumnDef } from "@/src/components/table/types";
 import {
   Table,
   TableBody,
@@ -18,17 +11,36 @@ import {
   TableHeader,
   TableRow,
 } from "@/src/components/ui/table";
+import { type OrderByState } from "@/src/features/orderBy/types";
+import { cn } from "@/src/utils/tailwind";
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  useReactTable,
+  type ColumnFiltersState,
+  type OnChangeFn,
+  type PaginationState,
+  type RowSelectionState,
+  type VisibilityState,
+} from "@tanstack/react-table";
 import { useState } from "react";
-import { DataTablePagination } from "@/src/components/table/data-table-pagination";
 
 interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[];
+  columns: LangfuseColumnDef<TData, TValue>[];
   data: AsyncTableData<TData[]>;
   pagination?: {
     pageCount: number;
     onChange: OnChangeFn<PaginationState>;
     state: PaginationState;
   };
+  rowSelection?: RowSelectionState;
+  setRowSelection?: OnChangeFn<RowSelectionState>;
+  columnVisibility?: VisibilityState;
+  onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+  orderBy?: OrderByState;
+  setOrderBy?: (s: OrderByState) => void;
+  help?: { description: string; href: string };
 }
 
 export interface AsyncTableData<T> {
@@ -38,10 +50,17 @@ export interface AsyncTableData<T> {
   error?: string;
 }
 
-export function DataTable<TData, TValue>({
+export function DataTable<TData extends object, TValue>({
   columns,
   data,
   pagination,
+  rowSelection,
+  setRowSelection,
+  columnVisibility,
+  onColumnVisibilityChange,
+  help,
+  orderBy,
+  setOrderBy,
 }: DataTableProps<TData, TValue>) {
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
@@ -54,9 +73,20 @@ export function DataTable<TData, TValue>({
     manualPagination: pagination !== undefined,
     pageCount: pagination?.pageCount ?? 0,
     onPaginationChange: pagination?.onChange,
+    onRowSelectionChange: setRowSelection,
+    onColumnVisibilityChange: onColumnVisibilityChange,
+    getRowId: (row, index) => {
+      if ("id" in row && typeof row.id === "string") {
+        return row.id;
+      } else {
+        return index.toString();
+      }
+    },
     state: {
       columnFilters,
       pagination: pagination?.state,
+      columnVisibility,
+      rowSelection,
     },
     manualFiltering: true,
   });
@@ -70,19 +100,56 @@ export function DataTable<TData, TValue>({
               {table.getHeaderGroups().map((headerGroup) => (
                 <TableRow key={headerGroup.id}>
                   {headerGroup.headers.map((header) => {
-                    return (
+                    const sortingEnabled =
+                      header.column.columnDef.enableSorting;
+                    return header.column.getIsVisible() ? (
                       <TableHead
                         key={header.id}
-                        className="whitespace-nowrap p-2"
+                        className={cn(
+                          sortingEnabled ? "cursor-pointer" : null,
+                          "whitespace-nowrap p-2",
+                        )}
+                        title={sortingEnabled ? "Sort by this column" : ""}
+                        onClick={(event) => {
+                          event.preventDefault(); // Add this line
+
+                          if (
+                            !setOrderBy ||
+                            !header.column.columnDef.id ||
+                            !sortingEnabled
+                          ) {
+                            return;
+                          }
+
+                          if (orderBy?.column === header.column.columnDef.id) {
+                            setOrderBy({
+                              column: header.column.columnDef.id,
+                              order: orderBy.order === "ASC" ? "DESC" : "ASC",
+                            });
+                          } else {
+                            setOrderBy({
+                              column: header.column.columnDef.id,
+                              order: "DESC",
+                            });
+                          }
+                        }}
                       >
-                        {header.isPlaceholder
-                          ? null
-                          : flexRender(
-                              header.column.columnDef.header,
-                              header.getContext(),
-                            )}
+                        {header.isPlaceholder ? null : (
+                          <>
+                            <div className="select-none">
+                              {flexRender(
+                                header.column.columnDef.header,
+                                header.getContext(),
+                              )}
+
+                              {orderBy?.column === header.column.columnDef.id
+                                ? renderOrderingIndicator(orderBy)
+                                : null}
+                            </div>
+                          </>
+                        )}
                       </TableHead>
-                    );
+                    ) : null;
                   })}
                 </TableRow>
               ))}
@@ -97,16 +164,13 @@ export function DataTable<TData, TValue>({
                     Loading...
                   </TableCell>
                 </TableRow>
-              ) : table.getRowModel().rows?.length ? (
+              ) : table.getRowModel().rows.length ? (
                 table.getRowModel().rows.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    data-state={row.getIsSelected() && "selected"}
-                  >
+                  <TableRow key={row.id}>
                     {row.getVisibleCells().map((cell) => (
                       <TableCell
                         key={cell.id}
-                        className="overflow-hidden whitespace-nowrap p-2 text-xs"
+                        className="overflow-hidden whitespace-nowrap px-2 py-1 text-xs first:pl-2"
                       >
                         {flexRender(
                           cell.column.columnDef.cell,
@@ -122,7 +186,16 @@ export function DataTable<TData, TValue>({
                     colSpan={columns.length}
                     className="h-24 text-center"
                   >
-                    No results.
+                    <div>
+                      No results.{" "}
+                      {help && (
+                        <DocPopup
+                          description={help.description}
+                          href={help.href}
+                          size="sm"
+                        />
+                      )}
+                    </div>
                   </TableCell>
                 </TableRow>
               )}
@@ -134,3 +207,9 @@ export function DataTable<TData, TValue>({
     </>
   );
 }
+
+function renderOrderingIndicator(orderBy?: OrderByState) {
+  if (!orderBy) return;
+  if (orderBy.order === "ASC") return <span className="ml-1">▲</span>;
+  else return <span className="ml-1">▼</span>;
+}

src/components/table/table-link.tsx

@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import Link from "next/link";
 
 export type TableLinkProps = {
   path: string;
@@ -11,21 +11,15 @@ export default function TableLink({
   value,
   truncateAt = 7,
 }: TableLinkProps) {
-  const router = useRouter();
-
   return (
-    <div>
-      <button
-        key="openTrace"
-        className="rounded bg-indigo-50 px-2 py-1 text-xs font-semibold text-blue-600 shadow-sm hover:bg-indigo-100"
-        onClick={() => {
-          void router.push(path);
-        }}
-      >
-        {value.length > truncateAt
-          ? `...${value.substring(value.length - truncateAt)}`
-          : value}
-      </button>
-    </div>
+    <Link
+      className="inline-block rounded bg-indigo-50 px-2 py-1 text-xs font-semibold text-blue-600 shadow-sm hover:bg-indigo-100"
+      href={path}
+      title={value}
+    >
+      {value.length > truncateAt
+        ? `...${value.substring(value.length - truncateAt)}`
+        : value}
+    </Link>
   );
 }

src/components/table/types.ts

@@ -1,6 +1,12 @@
+import { type RowData, type ColumnDef } from "@tanstack/react-table";
 import { type LucideIcon } from "lucide-react";
 
 export type TableRowOptions = {
   columnId: string;
   options: { label: string; value: number; icon?: LucideIcon }[];
 };
+
+export type LangfuseColumnDef<
+  TData extends RowData,
+  TValue = unknown,
+> = ColumnDef<TData, TValue> & { defaultHidden?: boolean };

src/components/table/use-cases/generations.tsx

@@ -0,0 +1,405 @@
+import { api, directApi } from "@/src/utils/api";
+import { DataTable } from "@/src/components/table/data-table";
+import TableLink from "@/src/components/table/table-link";
+import { DataTableToolbar } from "@/src/components/table/data-table-toolbar";
+import { useState } from "react";
+import { TokenUsageBadge } from "@/src/components/token-usage-badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/src/components/ui/dropdown-menu";
+import { Button } from "@/src/components/ui/button";
+import { ChevronDownIcon, Loader } from "lucide-react";
+import { usePostHog } from "posthog-js/react";
+import {
+  NumberParam,
+  StringParam,
+  useQueryParam,
+  useQueryParams,
+  withDefault,
+} from "use-query-params";
+import { useQueryFilterState } from "@/src/features/filters/hooks/useFilterState";
+import { observationsTableColsWithOptions } from "@/src/server/api/definitions/observationsTable";
+import { formatInterval, utcDateOffsetByDays } from "@/src/utils/dates";
+import useColumnVisibility from "@/src/features/column-visibility/hooks/useColumnVisibility";
+import { JSONView } from "@/src/components/ui/code";
+import { type LangfuseColumnDef } from "@/src/components/table/types";
+import { type ObservationLevel } from "@prisma/client";
+import { cn } from "@/src/utils/tailwind";
+import { LevelColors } from "@/src/components/level-colors";
+import { usdFormatter } from "@/src/utils/numbers";
+import {
+  exportOptions,
+  type ExportFileFormats,
+} from "@/src/server/api/interfaces/exportTypes";
+
+export type GenerationsTableRow = {
+  id: string;
+  traceId: string;
+  startTime: string;
+  level?: ObservationLevel;
+  statusMessage?: string;
+  endTime?: string;
+  latency?: number;
+  name?: string;
+  model?: string;
+  input?: unknown;
+  output?: unknown;
+  traceName?: string;
+  metadata?: string;
+  usage: {
+    promptTokens: number;
+    completionTokens: number;
+    totalTokens: number;
+  };
+};
+
+export type GenerationsTableProps = {
+  projectId: string;
+};
+
+export default function GenerationsTable({ projectId }: GenerationsTableProps) {
+  const posthog = usePostHog();
+  const [isExporting, setIsExporting] = useState(false);
+  const [searchQuery, setSearchQuery] = useQueryParam(
+    "search",
+    withDefault(StringParam, null),
+  );
+
+  const [paginationState, setPaginationState] = useQueryParams({
+    pageIndex: withDefault(NumberParam, 0),
+    pageSize: withDefault(NumberParam, 50),
+  });
+
+  const [filterState, setFilterState] = useQueryFilterState([
+    {
+      column: "start_time",
+      type: "datetime",
+      operator: ">",
+      value: utcDateOffsetByDays(-14),
+    },
+  ]);
+
+  const generations = api.generations.all.useQuery({
+    page: paginationState.pageIndex,
+    limit: paginationState.pageSize,
+    projectId,
+    filter: filterState,
+    searchQuery,
+  });
+  const totalCount = generations.data?.slice(1)[0]?.totalCount ?? 0;
+
+  const filterOptions = api.generations.filterOptions.useQuery({
+    projectId,
+  });
+
+  const handleExport = async (fileFormat: ExportFileFormats) => {
+    if (isExporting) return;
+
+    setIsExporting(true);
+    posthog.capture("generations:export", { file_format: fileFormat });
+    try {
+      const fileData = await directApi.generations.export.query({
+        projectId,
+        fileFormat,
+        filter: filterState,
+        searchQuery,
+      });
+
+      let url: string;
+      if (fileData.type === "s3") {
+        url = fileData.url;
+      } else {
+        const file = new File([fileData.data], fileData.fileName, {
+          type: exportOptions[fileFormat].fileType,
+        });
+
+        // create url from file
+        url = URL.createObjectURL(file);
+      }
+
+      // Use a dynamically created anchor element to trigger the download
+      const a = document.createElement("a");
+      document.body.appendChild(a);
+      a.href = url;
+      a.download = fileData.fileName; // name of the downloaded file
+      a.click();
+      a.remove();
+
+      // Revoke the blob URL after using it
+      if (fileData.type === "data") {
+        setTimeout(() => URL.revokeObjectURL(url), 100);
+      }
+
+      setIsExporting(false);
+    } catch (e) {
+      console.error(e);
+      setIsExporting(false);
+    }
+  };
+
+  const columns: LangfuseColumnDef<GenerationsTableRow>[] = [
+    {
+      accessorKey: "id",
+      header: "ID",
+      cell: ({ row }) => {
+        const observationId = row.getValue("id");
+        const traceId = row.getValue("traceId");
+        return typeof observationId === "string" &&
+          typeof traceId === "string" ? (
+          <TableLink
+            path={`/project/${projectId}/traces/${traceId}?observation=${observationId}`}
+            value={observationId}
+          />
+        ) : null;
+      },
+    },
+    {
+      accessorKey: "name",
+      header: "name",
+    },
+    {
+      accessorKey: "traceId",
+      header: "Trace ID",
+      cell: ({ row }) => {
+        const value = row.getValue("traceId");
+        return typeof value === "string" ? (
+          <TableLink
+            path={`/project/${projectId}/traces/${value}`}
+            value={value}
+          />
+        ) : undefined;
+      },
+    },
+    {
+      accessorKey: "traceName",
+      header: "Trace Name",
+      enableHiding: true,
+    },
+    {
+      accessorKey: "startTime",
+      header: "Start Time",
+      enableHiding: true,
+    },
+    {
+      accessorKey: "latency",
+      header: "Latency",
+      cell: ({ row }) => {
+        const value: number | undefined = row.getValue("latency");
+        return value !== undefined ? (
+          <span>{formatInterval(value)}</span>
+        ) : undefined;
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "cost",
+      header: "Cost",
+      cell: ({ row }) => {
+        const value: number | undefined = row.getValue("cost");
+
+        return value !== undefined ? (
+          <span>{usdFormatter(value)}</span>
+        ) : undefined;
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "level",
+      header: "Level",
+      enableHiding: true,
+      cell({ row }) {
+        const value: ObservationLevel | undefined = row.getValue("level");
+        return value ? (
+          <span
+            className={cn(
+              "rounded-sm p-0.5 text-xs",
+              LevelColors[value].bg,
+              LevelColors[value].text,
+            )}
+          >
+            {value}
+          </span>
+        ) : undefined;
+      },
+    },
+    {
+      accessorKey: "statusMessage",
+      header: "Status Message",
+      enableHiding: true,
+      defaultHidden: true,
+    },
+    {
+      accessorKey: "model",
+      header: "Model",
+      enableHiding: true,
+    },
+    {
+      accessorKey: "usage",
+      header: "Usage",
+      cell: ({ row }) => {
+        const value: {
+          promptTokens: number;
+          completionTokens: number;
+          totalTokens: number;
+        } = row.getValue("usage");
+        return (
+          <TokenUsageBadge
+            promptTokens={value.promptTokens}
+            completionTokens={value.completionTokens}
+            totalTokens={value.totalTokens}
+            inline
+          />
+        );
+      },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "input",
+      header: "Input",
+      cell: ({ row }) => {
+        const value: unknown = row.getValue("input");
+        return <JSONView json={value} className="w-[500px]" />;
+      },
+      enableHiding: true,
+      defaultHidden: true,
+    },
+    {
+      accessorKey: "output",
+      header: "Output",
+      cell: ({ row }) => {
+        const value: unknown = row.getValue("output");
+        return <JSONView json={value} className="w-[500px] bg-green-50" />;
+      },
+      enableHiding: true,
+      defaultHidden: true,
+    },
+    {
+      accessorKey: "metadata",
+      header: "Metadata",
+      cell: ({ row }) => {
+        const values: string | undefined = row.getValue("metadata");
+        return <div className="flex flex-wrap gap-x-3 gap-y-1">{values}</div>;
+      },
+      enableHiding: true,
+      defaultHidden: true,
+    },
+    {
+      accessorKey: "version",
+      header: "Version",
+      enableHiding: true,
+    },
+  ];
+  const [columnVisibility, setColumnVisibility] =
+    useColumnVisibility<GenerationsTableRow>(
+      "generationsColumnVisibility",
+      columns,
+    );
+
+  const rows: GenerationsTableRow[] = generations.isSuccess
+    ? generations.data.map((generation) => {
+        return {
+          id: generation.id,
+          traceId: generation.traceId,
+          traceName: generation.traceName,
+          startTime: generation.startTime.toLocaleString(),
+          endTime: generation.endTime?.toLocaleString() ?? undefined,
+          latency: generation.latency === null ? undefined : generation.latency,
+          cost: generation.cost,
+          name: generation.name ?? undefined,
+          version: generation.version ?? "",
+          model: generation.model ?? "",
+          input: generation.input,
+          output: generation.output,
+          level: generation.level,
+          metadata: generation.metadata
+            ? JSON.stringify(generation.metadata)
+            : undefined,
+          statusMessage: generation.statusMessage ?? undefined,
+          usage: {
+            promptTokens: generation.promptTokens,
+            completionTokens: generation.completionTokens,
+            totalTokens: generation.totalTokens,
+          },
+        };
+      })
+    : [];
+
+  return (
+    <div>
+      <DataTableToolbar
+        columns={columns}
+        filterColumnDefinition={observationsTableColsWithOptions(
+          filterOptions.data,
+        )}
+        filterState={filterState}
+        setFilterState={setFilterState}
+        searchConfig={{
+          placeholder: "Search by id, name, traceName, model",
+          updateQuery: setSearchQuery,
+          currentQuery: searchQuery ?? undefined,
+        }}
+        columnVisibility={columnVisibility}
+        setColumnVisibility={setColumnVisibility}
+        actionButtons={
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                className="ml-auto whitespace-nowrap"
+                size="sm"
+              >
+                {filterState.length > 0 || searchQuery
+                  ? "Export selection"
+                  : "Export all"}{" "}
+                {isExporting ? (
+                  <Loader className="ml-2 h-4 w-4 animate-spin" />
+                ) : (
+                  <ChevronDownIcon className="ml-2 h-4 w-4" />
+                )}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {Object.entries(exportOptions).map(([key, options]) => (
+                <DropdownMenuItem
+                  key={key}
+                  className="capitalize"
+                  onClick={() => void handleExport(key as ExportFileFormats)}
+                >
+                  as {options.label}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        }
+      />
+      <DataTable
+        columns={columns}
+        data={
+          generations.isLoading
+            ? { isLoading: true, isError: false }
+            : generations.isError
+              ? {
+                  isLoading: false,
+                  isError: true,
+                  error: generations.error.message,
+                }
+              : {
+                  isLoading: false,
+                  isError: false,
+                  data: rows,
+                }
+        }
+        pagination={{
+          pageCount: Math.ceil(totalCount / paginationState.pageSize),
+          onChange: setPaginationState,
+          state: paginationState,
+        }}
+        columnVisibility={columnVisibility}
+        onColumnVisibilityChange={setColumnVisibility}
+      />
+    </div>
+  );
+}

src/components/table/use-cases/scores.tsx

@@ -1,15 +1,16 @@
 import { DataTable } from "@/src/components/table/data-table";
 import { DataTableToolbar } from "@/src/components/table/data-table-toolbar";
 import TableLink from "@/src/components/table/table-link";
+import { type LangfuseColumnDef } from "@/src/components/table/types";
+import useColumnVisibility from "@/src/features/column-visibility/hooks/useColumnVisibility";
 import { useQueryFilterState } from "@/src/features/filters/hooks/useFilterState";
 import { scoresTableColsWithOptions } from "@/src/server/api/definitions/scoresTable";
 import { api } from "@/src/utils/api";
 import { type RouterInput } from "@/src/utils/types";
 import { type Score } from "@prisma/client";
-import { type ColumnDef } from "@tanstack/react-table";
 import { useQueryParams, withDefault, NumberParam } from "use-query-params";
 
-type RowData = {
+export type ScoresTableRow = {
   id: string;
   traceId: string;
   timestamp: string;
@@ -60,7 +61,7 @@ export default function ScoresTable({
     projectId,
   });
 
-  const columns: ColumnDef<RowData>[] = [
+  const columns: LangfuseColumnDef<ScoresTableRow>[] = [
     {
       accessorKey: "traceId",
       enableColumnFilter: true,
@@ -95,22 +96,29 @@ export default function ScoresTable({
     {
       accessorKey: "timestamp",
       header: "Timestamp",
+      enableHiding: true,
     },
     {
       accessorKey: "name",
       header: "Name",
+      enableHiding: true,
     },
     {
       accessorKey: "value",
       header: "Value",
+      enableHiding: true,
     },
     {
       accessorKey: "comment",
       header: "Comment",
+      enableHiding: true,
     },
   ];
 
-  const convertToTableRow = (score: Score): RowData => {
+  const [columnVisibility, setColumnVisibility] =
+    useColumnVisibility<ScoresTableRow>("scoresColumnVisibility", columns);
+
+  const convertToTableRow = (score: Score): ScoresTableRow => {
     return {
       id: score.id,
       timestamp: score.timestamp.toLocaleString(),
@@ -125,9 +133,12 @@ export default function ScoresTable({
   return (
     <div>
       <DataTableToolbar
+        columns={columns}
         filterColumnDefinition={scoresTableColsWithOptions(filterOptions.data)}
         filterState={userFilterState}
         setFilterState={setUserFilterState}
+        columnVisibility={columnVisibility}
+        setColumnVisibility={setColumnVisibility}
       />
       <DataTable
         columns={columns}
@@ -135,22 +146,24 @@ export default function ScoresTable({
           scores.isLoading
             ? { isLoading: true, isError: false }
             : scores.isError
-            ? {
-                isLoading: false,
-                isError: true,
-                error: scores.error.message,
-              }
-            : {
-                isLoading: false,
-                isError: false,
-                data: scores.data?.map((t) => convertToTableRow(t)),
-              }
+              ? {
+                  isLoading: false,
+                  isError: true,
+                  error: scores.error.message,
+                }
+              : {
+                  isLoading: false,
+                  isError: false,
+                  data: scores.data.map((t) => convertToTableRow(t)),
+                }
         }
         pagination={{
           pageCount: Math.ceil(totalCount / paginationState.pageSize),
           onChange: setPaginationState,
           state: paginationState,
         }}
+        columnVisibility={columnVisibility}
+        onColumnVisibilityChange={setColumnVisibility}
       />
     </div>
   );

src/components/table/use-cases/sessions.tsx

@@ -0,0 +1,217 @@
+import { StarSessionToggle } from "@/src/components/star-toggle";
+import { DataTable } from "@/src/components/table/data-table";
+import { DataTableToolbar } from "@/src/components/table/data-table-toolbar";
+import TableLink from "@/src/components/table/table-link";
+import { type LangfuseColumnDef } from "@/src/components/table/types";
+import useColumnVisibility from "@/src/features/column-visibility/hooks/useColumnVisibility";
+import { useQueryFilterState } from "@/src/features/filters/hooks/useFilterState";
+import { type FilterState } from "@/src/features/filters/types";
+import { useDetailPageLists } from "@/src/features/navigate-detail-pages/context";
+import { sessionsViewCols } from "@/src/server/api/definitions/sessionsView";
+import { api } from "@/src/utils/api";
+import { formatInterval, utcDateOffsetByDays } from "@/src/utils/dates";
+import { type RouterOutput } from "@/src/utils/types";
+import { useEffect } from "react";
+import { NumberParam, useQueryParams, withDefault } from "use-query-params";
+
+export type SessionTableRow = {
+  id: string;
+  createdAt: string;
+  userIds: string[];
+  countTraces: number;
+  bookmarked: boolean;
+  sessionDuration: number | null;
+};
+
+export type SessionTableProps = {
+  projectId: string;
+  userId?: string;
+  omittedFilter?: string[];
+};
+
+export default function SessionsTable({
+  projectId,
+  userId,
+  omittedFilter = [],
+}: SessionTableProps) {
+  const { setDetailPageList } = useDetailPageLists();
+
+  const [userFilterState, setUserFilterState] = useQueryFilterState([
+    {
+      column: "createdAt",
+      type: "datetime",
+      operator: ">",
+      value: utcDateOffsetByDays(-14),
+    },
+  ]);
+
+  const userIdFilter: FilterState = userId
+    ? [
+        {
+          column: "userId",
+          type: "string",
+          operator: "=",
+          value: userId,
+        },
+      ]
+    : [];
+
+  const filterState = userFilterState.concat(userIdFilter);
+
+  const [paginationState, setPaginationState] = useQueryParams({
+    pageIndex: withDefault(NumberParam, 0),
+    pageSize: withDefault(NumberParam, 50),
+  });
+
+  const sessions = api.sessions.all.useQuery({
+    page: paginationState.pageIndex,
+    limit: paginationState.pageSize,
+    projectId,
+    filter: filterState,
+  });
+  const totalCount = sessions.data?.slice(1)[0]?.totalCount ?? 0;
+  useEffect(() => {
+    if (sessions.isSuccess) {
+      setDetailPageList(
+        "sessions",
+        sessions.data.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,
+    };
+  };
+
+  const columns: LangfuseColumnDef<SessionTableRow>[] = [
+    {
+      accessorKey: "bookmarked",
+      header: undefined,
+      cell: ({ row }) => {
+        const bookmarked = row.getValue("bookmarked");
+        const sessionId = row.getValue("id");
+
+        return typeof sessionId === "string" &&
+          typeof bookmarked === "boolean" ? (
+          <StarSessionToggle
+            sessionId={sessionId}
+            projectId={projectId}
+            value={bookmarked}
+            size="xs"
+          />
+        ) : undefined;
+      },
+    },
+    {
+      accessorKey: "id",
+      header: "ID",
+      cell: ({ row }) => {
+        const value = row.getValue("id");
+        return value && typeof value === "string" ? (
+          <TableLink
+            path={`/project/${projectId}/sessions/${value}`}
+            value={value}
+          />
+        ) : undefined;
+      },
+    },
+    {
+      accessorKey: "createdAt",
+      header: "Created At",
+      enableHiding: true,
+    },
+    {
+      accessorKey: "sessionDuration",
+      header: "Duration",
+      enableHiding: true,
+      cell: ({ row }) => {
+        const value = row.getValue("sessionDuration");
+        return value && typeof value === "number"
+          ? formatInterval(value)
+          : undefined;
+      },
+    },
+    {
+      accessorKey: "userIds",
+      enableColumnFilter: !omittedFilter.find((f) => f === "userIds"),
+      header: "User ID",
+      enableHiding: true,
+      cell: ({ row }) => {
+        const value = row.getValue("userIds");
+        return value && Array.isArray(value) ? (
+          <div className="flex gap-1">
+            {(value as string[]).map((user) => (
+              <TableLink
+                key={user}
+                path={`/project/${projectId}/users/${user}`}
+                value={user}
+                truncateAt={40}
+              />
+            ))}
+          </div>
+        ) : undefined;
+      },
+    },
+    {
+      accessorKey: "countTraces",
+      header: "Traces",
+      enableHiding: true,
+    },
+  ];
+
+  const [columnVisibility, setColumnVisibility] =
+    useColumnVisibility<SessionTableRow>("sessionsColumnVisibility", columns);
+
+  return (
+    <div>
+      <DataTableToolbar
+        filterColumnDefinition={sessionsViewCols}
+        filterState={userFilterState}
+        setFilterState={setUserFilterState}
+        columns={columns}
+        columnVisibility={columnVisibility}
+        setColumnVisibility={setColumnVisibility}
+      />
+      <DataTable
+        columns={columns}
+        data={
+          sessions.isLoading
+            ? { isLoading: true, isError: false }
+            : sessions.isError
+              ? {
+                  isLoading: false,
+                  isError: true,
+                  error: sessions.error.message,
+                }
+              : {
+                  isLoading: false,
+                  isError: false,
+                  data: sessions.data.map((t) => convertToTableRow(t)),
+                }
+        }
+        pagination={{
+          pageCount: Math.ceil(totalCount / paginationState.pageSize),
+          onChange: setPaginationState,
+          state: paginationState,
+        }}
+        columnVisibility={columnVisibility}
+        onColumnVisibilityChange={setColumnVisibility}
+        help={{
+          description:
+            "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/sessions",
+        }}
+      />
+    </div>
+  );
+}

src/components/table/use-cases/traces.tsx

@@ -1,19 +1,26 @@
 import { DeleteTrace } from "@/src/components/delete-trace";
 import { GroupedScoreBadges } from "@/src/components/grouped-score-badge";
+import { StarTraceToggle } from "@/src/components/star-toggle";
 import { DataTable } from "@/src/components/table/data-table";
+import { TraceTableMultiSelectAction } from "@/src/components/table/data-table-multi-select-actions/trace-table-multi-select-action";
 import { DataTableToolbar } from "@/src/components/table/data-table-toolbar";
 import TableLink from "@/src/components/table/table-link";
+import { type LangfuseColumnDef } from "@/src/components/table/types";
 import { TokenUsageBadge } from "@/src/components/token-usage-badge";
+import { Checkbox } from "@/src/components/ui/checkbox";
+import { JSONView } from "@/src/components/ui/code";
+import useColumnVisibility from "@/src/features/column-visibility/hooks/useColumnVisibility";
 import { useQueryFilterState } from "@/src/features/filters/hooks/useFilterState";
 import { type FilterState } from "@/src/features/filters/types";
 import { useDetailPageLists } from "@/src/features/navigate-detail-pages/context";
+import { useOrderByState } from "@/src/features/orderBy/hooks/useOrderByState";
 import { tracesTableColsWithOptions } from "@/src/server/api/definitions/tracesTable";
 import { api } from "@/src/utils/api";
-import { utcDateOffsetByDays } from "@/src/utils/dates";
+import { formatInterval, utcDateOffsetByDays } from "@/src/utils/dates";
 import { type RouterInput, type RouterOutput } from "@/src/utils/types";
 import { type Score } from "@prisma/client";
-import { type ColumnDef } from "@tanstack/react-table";
-import { useEffect } from "react";
+import { type RowSelectionState } from "@tanstack/react-table";
+import { useEffect, useState } from "react";
 import {
   NumberParam,
   StringParam,
@@ -21,9 +28,8 @@ import {
   useQueryParams,
   withDefault,
 } from "use-query-params";
-import { BookmarkTrace } from "@/src/components/bookmark-trace";
 
-export type TraceTableRow = {
+export type TracesTableRow = {
   bookmarked: boolean;
   id: string;
   timestamp: string;
@@ -33,6 +39,9 @@ export type TraceTableRow = {
   latency?: number;
   release?: string;
   version?: string;
+  input?: unknown;
+  output?: unknown;
+  sessionId?: string;
   scores: Score[];
   usage: {
     promptTokens: number;
@@ -41,7 +50,7 @@ export type TraceTableRow = {
   };
 };
 
-export type TraceTableProps = {
+export type TracesTableProps = {
   projectId: string;
   userId?: string;
   omittedFilter?: string[];
@@ -53,13 +62,13 @@ export default function TracesTable({
   projectId,
   userId,
   omittedFilter = [],
-}: TraceTableProps) {
+}: TracesTableProps) {
+  const [selectedRows, setSelectedRows] = useState<RowSelectionState>({});
   const { setDetailPageList } = useDetailPageLists();
   const [searchQuery, setSearchQuery] = useQueryParam(
     "search",
     withDefault(StringParam, null),
   );
-
   const [userFilterState, setUserFilterState] = useQueryFilterState([
     {
       column: "timestamp",
@@ -68,6 +77,10 @@ export default function TracesTable({
       value: utcDateOffsetByDays(-14),
     },
   ]);
+  const [orderByState, setOrderByState] = useOrderByState({
+    column: "timestamp",
+    order: "DESC",
+  });
 
   const userIdFilter: FilterState = userId
     ? [
@@ -81,7 +94,6 @@ export default function TracesTable({
     : [];
 
   const filterState = userFilterState.concat(userIdFilter);
-
   const [paginationState, setPaginationState] = useQueryParams({
     pageIndex: withDefault(NumberParam, 0),
     pageSize: withDefault(NumberParam, 50),
@@ -93,10 +105,11 @@ export default function TracesTable({
     projectId,
     filter: filterState,
     searchQuery,
+    orderBy: orderByState,
   });
   const totalCount = traces.data?.slice(1)[0]?.totalCount ?? 0;
   useEffect(() => {
-    if (traces.isSuccess && traces.data) {
+    if (traces.isSuccess) {
       setDetailPageList(
         "traces",
         traces.data.map((t) => t.id),
@@ -111,7 +124,7 @@ export default function TracesTable({
 
   const convertToTableRow = (
     trace: RouterOutput["traces"]["all"][0],
-  ): TraceTableRow => {
+  ): TracesTableRow => {
     return {
       bookmarked: trace.bookmarked,
       id: trace.id,
@@ -122,6 +135,9 @@ export default function TracesTable({
       version: trace.version ?? undefined,
       userId: trace.userId ?? "",
       scores: trace.scores,
+      sessionId: trace.sessionId ?? undefined,
+      input: trace.input,
+      output: trace.output,
       latency: trace.latency === null ? undefined : trace.latency,
       usage: {
         promptTokens: trace.promptTokens,
@@ -131,20 +147,49 @@ export default function TracesTable({
     };
   };
 
-  const columns: ColumnDef<TraceTableRow>[] = [
+  const columns: LangfuseColumnDef<TracesTableRow>[] = [
+    {
+      id: "select",
+      header: ({ table }) => (
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected()
+              ? true
+              : table.getIsSomePageRowsSelected()
+                ? "indeterminate"
+                : false
+          }
+          onCheckedChange={(value) => {
+            table.toggleAllPageRowsSelected(!!value);
+            if (!value) {
+              setSelectedRows({});
+            }
+          }}
+          aria-label="Select all"
+        />
+      ),
+      cell: ({ row }) => (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label="Select row"
+        />
+      ),
+    },
     {
       accessorKey: "bookmarked",
       header: undefined,
+      id: "bookmarked",
       cell: ({ row }) => {
-        const isBookmarked = row.getValue("bookmarked");
+        const bookmarked = row.getValue("bookmarked");
         const traceId = row.getValue("id");
 
         return typeof traceId === "string" &&
-          typeof isBookmarked === "boolean" ? (
-          <BookmarkTrace
+          typeof bookmarked === "boolean" ? (
+          <StarTraceToggle
             traceId={traceId}
             projectId={projectId}
-            isBookmarked={isBookmarked}
+            value={bookmarked}
             size="xs"
           />
         ) : undefined;
@@ -153,6 +198,7 @@ export default function TracesTable({
     {
       accessorKey: "id",
       header: "ID",
+      id: "id",
       cell: ({ row }) => {
         const value = row.getValue("id");
         return value && typeof value === "string" ? (
@@ -162,19 +208,26 @@ export default function TracesTable({
           />
         ) : undefined;
       },
+      enableSorting: true,
     },
     {
       accessorKey: "timestamp",
       header: "Timestamp",
+      id: "timestamp",
+      enableHiding: true,
+      enableSorting: true,
     },
     {
       accessorKey: "name",
       header: "Name",
+      id: "name",
+      enableHiding: true,
     },
     {
       accessorKey: "userId",
       enableColumnFilter: !omittedFilter.find((f) => f === "userId"),
       header: "User ID",
+      id: "userId",
       cell: ({ row }) => {
         const value = row.getValue("userId");
         return value && typeof value === "string" ? (
@@ -185,17 +238,39 @@ export default function TracesTable({
           />
         ) : undefined;
       },
+      enableHiding: true,
+      enableSorting: true,
+    },
+    {
+      accessorKey: "sessionId",
+      enableColumnFilter: !omittedFilter.find((f) => f === "sessionId"),
+      header: "Session ID",
+      cell: ({ row }) => {
+        const value = row.getValue("sessionId");
+        return value && typeof value === "string" ? (
+          <TableLink
+            path={`/project/${projectId}/sessions/${value}`}
+            value={value}
+            truncateAt={40}
+          />
+        ) : undefined;
+      },
+      enableHiding: true,
     },
     {
       accessorKey: "latency",
+      id: "latency",
       header: "Latency",
       // add seconds to the end of the latency
       cell: ({ row }) => {
         const value: number | undefined = row.getValue("latency");
-        return value !== undefined ? `${value.toFixed(2)} sec` : undefined;
+        return value !== undefined ? formatInterval(value) : undefined;
       },
+      enableHiding: true,
+      enableSorting: true,
     },
     {
+      // TODO: Enable Ordering By Usage (not covered by API yet)
       accessorKey: "usage",
       header: "Usage",
       cell: ({ row }) => {
@@ -213,15 +288,38 @@ export default function TracesTable({
           />
         );
       },
+      enableHiding: true,
     },
     {
       accessorKey: "scores",
+      id: "scores",
       header: "Scores",
       enableColumnFilter: !omittedFilter.find((f) => f === "scores"),
       cell: ({ row }) => {
         const values: Score[] = row.getValue("scores");
         return <GroupedScoreBadges scores={values} variant="headings" />;
       },
+      enableHiding: true,
+    },
+    {
+      accessorKey: "input",
+      header: "Input",
+      cell: ({ row }) => {
+        const value: unknown = row.getValue("input");
+        return <JSONView json={value} className="w-[500px]" />;
+      },
+      enableHiding: true,
+      defaultHidden: true,
+    },
+    {
+      accessorKey: "output",
+      header: "Output",
+      cell: ({ row }) => {
+        const value: unknown = row.getValue("output");
+        return <JSONView json={value} className="w-[500px] bg-green-50" />;
+      },
+      enableHiding: true,
+      defaultHidden: true,
     },
     {
       accessorKey: "metadata",
@@ -230,14 +328,21 @@ export default function TracesTable({
         const values: string = row.getValue("metadata");
         return <div className="flex flex-wrap gap-x-3 gap-y-1">{values}</div>;
       },
+      enableHiding: true,
     },
     {
       accessorKey: "version",
+      id: "version",
       header: "Version",
+      enableHiding: true,
+      enableSorting: true,
     },
     {
       accessorKey: "release",
+      id: "release",
       header: "Release",
+      enableHiding: true,
+      enableSorting: true,
     },
     {
       accessorKey: "action",
@@ -255,9 +360,13 @@ export default function TracesTable({
     },
   ];
 
+  const [columnVisibility, setColumnVisibility] =
+    useColumnVisibility<TracesTableRow>("tracesColumnVisibility", columns);
+
   return (
     <div>
       <DataTableToolbar
+        columns={columns}
         filterColumnDefinition={tracesTableColsWithOptions(
           traceFilterOptions.data,
         )}
@@ -268,6 +377,20 @@ export default function TracesTable({
         }}
         filterState={userFilterState}
         setFilterState={setUserFilterState}
+        actionButtons={
+          <TraceTableMultiSelectAction
+            // Exclude traces that are not in the current page
+            selectedTraceIds={Object.keys(selectedRows).filter(
+              (traceId) => traces.data?.map((t) => t.id).includes(traceId),
+            )}
+            projectId={projectId}
+            onDeleteSuccess={() => {
+              setSelectedRows({});
+            }}
+          />
+        }
+        columnVisibility={columnVisibility}
+        setColumnVisibility={setColumnVisibility}
       />
       <DataTable
         columns={columns}
@@ -283,7 +406,7 @@ export default function TracesTable({
               : {
                   isLoading: false,
                   isError: false,
-                  data: traces.data?.map((t) => convertToTableRow(t)),
+                  data: traces.data.map((t) => convertToTableRow(t)),
                 }
         }
         pagination={{
@@ -291,6 +414,12 @@ export default function TracesTable({
           onChange: setPaginationState,
           state: paginationState,
         }}
+        setOrderBy={setOrderByState}
+        orderBy={orderByState}
+        rowSelection={selectedRows}
+        setRowSelection={setSelectedRows}
+        columnVisibility={columnVisibility}
+        onColumnVisibilityChange={setColumnVisibility}
       />
     </div>
   );

src/components/trace/IOPreview.tsx

@@ -0,0 +1,155 @@
+import { JSONView } from "@/src/components/ui/code";
+import { z } from "zod";
+import { deepParseJson } from "@/src/utils/json";
+import { cn } from "@/src/utils/tailwind";
+import { useState } from "react";
+import { Button } from "@/src/components/ui/button";
+import { Tabs, TabsList, TabsTrigger } from "@/src/components/ui/tabs";
+import { Fragment } from "react";
+
+export const IOPreview: React.FC<{
+  input?: unknown;
+  output?: unknown;
+  isLoading?: boolean;
+  hideIfNull?: boolean;
+}> = ({ isLoading = false, hideIfNull = false, ...props }) => {
+  const [currentView, setCurrentView] = useState<"pretty" | "json">("pretty");
+
+  const input = deepParseJson(props.input);
+  const output = deepParseJson(props.output);
+
+  // parse old completions: { completion: string } -> string
+  const outLegacyCompletionSchema = z
+    .object({
+      completion: z.string(),
+    })
+    .refine((value) => Object.keys(value).length === 1);
+  const outLegacyCompletionSchemaParsed =
+    outLegacyCompletionSchema.safeParse(output);
+  const outputClean = outLegacyCompletionSchemaParsed.success
+    ? outLegacyCompletionSchemaParsed.data
+    : props.output ?? null;
+
+  // OpenAI messages
+  let inOpenAiMessageArray = OpenAiMessageArraySchema.safeParse(input);
+  if (!inOpenAiMessageArray.success) {
+    // check if input is an array of length 1 including an array of OpenAiMessageSchema
+    // this is the case for some integrations
+    const inputArray = z.array(OpenAiMessageArraySchema).safeParse(input);
+    if (inputArray.success && inputArray.data.length === 1) {
+      inOpenAiMessageArray = OpenAiMessageArraySchema.safeParse(
+        inputArray.data[0],
+      );
+    }
+  }
+  const outOpenAiMessage = OpenAiMessageSchema.safeParse(output);
+
+  // Pretty view available
+  const isPrettyViewAvailable = inOpenAiMessageArray.success;
+
+  // default I/O
+  return (
+    <>
+      {isPrettyViewAvailable ? (
+        <Tabs
+          value={currentView}
+          onValueChange={(v) => setCurrentView(v as "pretty" | "json")}
+        >
+          <TabsList>
+            <TabsTrigger value="pretty">Pretty ✨</TabsTrigger>
+            <TabsTrigger value="json">JSON</TabsTrigger>
+          </TabsList>
+        </Tabs>
+      ) : null}
+      {isPrettyViewAvailable && currentView === "pretty" ? (
+        <OpenAiMessageView
+          messages={inOpenAiMessageArray.data.concat(
+            outOpenAiMessage.success
+              ? {
+                  ...outOpenAiMessage.data,
+                  role: outOpenAiMessage.data.role ?? "assistant",
+                }
+              : {
+                  role: "assistant",
+                  content: outputClean ? JSON.stringify(outputClean) : null,
+                },
+          )}
+        />
+      ) : null}
+      {currentView === "json" || !isPrettyViewAvailable ? (
+        <>
+          {!(hideIfNull && !input) ? (
+            <JSONView
+              title="Input"
+              json={input ?? null}
+              isLoading={isLoading}
+              className="flex-1"
+            />
+          ) : null}
+          {!(hideIfNull && !output) ? (
+            <JSONView
+              title="Output"
+              json={outputClean}
+              isLoading={isLoading}
+              className="flex-1 bg-green-50"
+            />
+          ) : null}
+        </>
+      ) : null}
+    </>
+  );
+};
+
+const OpenAiMessageSchema = z
+  .object({
+    role: z.enum(["system", "user", "assistant"]).optional(),
+    name: z.string().optional(),
+    content: z.union([z.record(z.any()), z.string()]).nullable(),
+  })
+  .strict() // no additional properties
+  .refine((value) => value.content !== null || value.role !== undefined);
+
+const OpenAiMessageArraySchema = z.array(OpenAiMessageSchema).min(1);
+
+const OpenAiMessageView: React.FC<{
+  messages: z.infer<typeof OpenAiMessageArraySchema>;
+}> = ({ messages }) => {
+  const COLLAPSE_THRESHOLD = 3;
+  const [isCollapsed, setCollapsed] = useState(
+    messages.length > COLLAPSE_THRESHOLD ? true : null,
+  );
+
+  return (
+    <div className="flex flex-col gap-2 rounded-md border p-3">
+      {messages
+        .filter(
+          (_, i) =>
+            // show all if not collapsed or null; show first and last n if collapsed
+            !isCollapsed || i == 0 || i > messages.length - COLLAPSE_THRESHOLD,
+        )
+        .map((message, index) => (
+          <Fragment key={index}>
+            <JSONView
+              title={message.name ?? message.role}
+              json={message.content}
+              className={cn(
+                message.role === "system" && "bg-gray-100",
+                message.role === "assistant" && "bg-green-50",
+              )}
+            />
+            {isCollapsed !== null && index === 0 ? (
+              <Button
+                variant="ghost"
+                size="xs"
+                onClick={() => setCollapsed((v) => !v)}
+              >
+                {isCollapsed
+                  ? `Show ${messages.length - COLLAPSE_THRESHOLD} more ...`
+                  : "Hide history"}
+              </Button>
+            ) : null}
+          </Fragment>
+        ))}
+    </div>
+  );
+};

src/components/trace/ObservationPreview.tsx

@@ -16,16 +16,13 @@ import {
   TableHeader,
   TableRow,
 } from "@/src/components/ui/table";
-import { ManualScoreButton } from "@/src/features/manual-scoring/components";
+import { ManualScoreButton } from "@/src/features/manual-scoring/components/ManualScoreButton";
 import { NewDatasetItemFromObservationButton } from "@/src/features/datasets/components/NewDatasetItemFromObservationButton";
 import { type ObservationReturnType } from "@/src/server/api/routers/traces";
 import { api } from "@/src/utils/api";
-import { z } from "zod";
-import { deepParseJson } from "@/src/utils/json";
-import { cn } from "@/src/utils/tailwind";
-import { useState } from "react";
-import { Button } from "@/src/components/ui/button";
-import { Tabs, TabsList, TabsTrigger } from "@/src/components/ui/tabs";
+import { IOPreview } from "@/src/components/trace/IOPreview";
+import { formatInterval } from "@/src/utils/dates";
+import Link from "next/link";
 
 export const ObservationPreview = (props: {
   observations: Array<ObservationReturnType>;
@@ -58,20 +55,28 @@ export const ObservationPreview = (props: {
             {preloadedObservation.startTime.toLocaleString()}
           </CardDescription>
           <div className="flex flex-wrap gap-2">
+            {preloadedObservation.promptId ? (
+              <PromptBadge
+                promptId={preloadedObservation.promptId}
+                projectId={preloadedObservation.projectId}
+              />
+            ) : undefined}
             {preloadedObservation.endTime ? (
               <Badge variant="outline">
-                {`${(
+                {formatInterval(
                   (preloadedObservation.endTime.getTime() -
                     preloadedObservation.startTime.getTime()) /
-                  1000
-                ).toFixed(2)} sec`}
+                    1000,
+                )}
               </Badge>
             ) : null}
-            <Badge variant="outline">
-              {preloadedObservation.promptTokens} prompt →{" "}
-              {preloadedObservation.completionTokens} completion (∑{" "}
-              {preloadedObservation.totalTokens})
-            </Badge>
+            {preloadedObservation.type === "GENERATION" && (
+              <Badge variant="outline">
+                {preloadedObservation.promptTokens} prompt →{" "}
+                {preloadedObservation.completionTokens} completion (∑{" "}
+                {preloadedObservation.totalTokens})
+              </Badge>
+            )}
             {preloadedObservation.version ? (
               <Badge variant="outline">
                 Version: {preloadedObservation.version}
@@ -85,6 +90,7 @@ export const ObservationPreview = (props: {
                 {preloadedObservation.price.toString()} USD
               </Badge>
             ) : undefined}
+
             {preloadedObservation.modelParameters &&
             typeof preloadedObservation.modelParameters === "object"
               ? Object.entries(preloadedObservation.modelParameters)
@@ -116,14 +122,12 @@ export const ObservationPreview = (props: {
         </div>
       </CardHeader>
       <CardContent className="flex flex-col gap-4">
-        <ObservationIO
+        <IOPreview
           key={preloadedObservation.id + "-input"}
-          observationType={preloadedObservation.type}
           input={observationWithInputAndOutput.data?.input ?? undefined}
           output={observationWithInputAndOutput.data?.output ?? undefined}
           isLoading={observationWithInputAndOutput.isLoading}
         />
-
         {preloadedObservation.statusMessage ? (
           <JSONView
             key={preloadedObservation.id + "-status"}
@@ -178,146 +182,21 @@ export const ObservationPreview = (props: {
   );
 };
 
-const ObservationIO: React.FC<{
-  observationType: string;
-  input?: unknown;
-  output?: unknown;
-  isLoading: boolean;
-}> = ({ isLoading, ...props }) => {
-  const [currentView, setCurrentView] = useState<"pretty" | "json">("pretty");
+const PromptBadge = (props: { promptId: string; projectId: string }) => {
+  const prompt = api.prompts.byId.useQuery({
+    id: props.promptId,
+    projectId: props.projectId,
+  });
 
-  const input = deepParseJson(props.input);
-  const output = deepParseJson(props.output);
-
-  // parse old completions: { completion: string } -> string
-  const outLegacyCompletionSchema = z
-    .object({
-      completion: z.string(),
-    })
-    .refine((value) => Object.keys(value).length === 1);
-  const outLegacyCompletionSchemaParsed =
-    outLegacyCompletionSchema.safeParse(output);
-  const outputClean = outLegacyCompletionSchemaParsed.success
-    ? outLegacyCompletionSchemaParsed.data
-    : props.output ?? null;
-
-  // OpenAI messages
-  let inOpenAiMessageArray = OpenAiMessageArraySchema.safeParse(input);
-  if (!inOpenAiMessageArray.success) {
-    // check if input is an array of length 1 including an array of OpenAiMessageSchema
-    // this is the case for some integrations
-    const inputArray = z.array(OpenAiMessageArraySchema).safeParse(input);
-    if (inputArray.success && inputArray.data.length === 1) {
-      inOpenAiMessageArray = OpenAiMessageArraySchema.safeParse(
-        inputArray.data[0],
-      );
-    }
-  }
-  const outOpenAiMessage = OpenAiMessageSchema.safeParse(output);
-
-  // Pretty view available
-  const isPrettyViewAvailable = inOpenAiMessageArray.success;
-
-  // default I/O
-  return (
-    <>
-      {isPrettyViewAvailable ? (
-        <Tabs
-          value={currentView}
-          onValueChange={(v) => setCurrentView(v as "pretty" | "json")}
-        >
-          <TabsList>
-            <TabsTrigger value="pretty">Pretty ✨</TabsTrigger>
-            <TabsTrigger value="json">JSON</TabsTrigger>
-          </TabsList>
-        </Tabs>
-      ) : null}
-      {isPrettyViewAvailable && currentView === "pretty" ? (
-        inOpenAiMessageArray.success ? (
-          <OpenAiMessageView
-            messages={inOpenAiMessageArray.data.concat(
-              outOpenAiMessage.success
-                ? {
-                    ...outOpenAiMessage.data,
-                    role: outOpenAiMessage.data.role ?? "assistant",
-                  }
-                : {
-                    role: "assistant",
-                    content: JSON.stringify(outputClean) ?? null,
-                  },
-            )}
-          />
-        ) : null
-      ) : null}
-      {currentView === "json" || !isPrettyViewAvailable ? (
-        <>
-          <JSONView
-            title="Input"
-            json={input ?? null}
-            isLoading={isLoading}
-            className="flex-1"
-          />
-          <JSONView
-            title="Output"
-            json={outputClean}
-            isLoading={isLoading}
-            className="flex-1"
-          />
-        </>
-      ) : null}
-    </>
-  );
-};
-
-const OpenAiMessageSchema = z
-  .object({
-    role: z.enum(["system", "user", "assistant"]).optional(),
-    content: z.string().nullable(),
-  })
-  .refine((value) => value.content !== null || value.role !== undefined);
-
-const OpenAiMessageArraySchema = z.array(OpenAiMessageSchema).min(1);
-
-const OpenAiMessageView: React.FC<{
-  messages: z.infer<typeof OpenAiMessageArraySchema>;
-}> = ({ messages }) => {
-  const COLLAPSE_THRESHOLD = 3;
-  const [isCollapsed, setCollapsed] = useState(
-    messages.length > COLLAPSE_THRESHOLD ? true : null,
-  );
+  if (prompt.isLoading) return null;
 
   return (
-    <div className="flex flex-col gap-2 rounded-md border p-3">
-      {messages
-        .filter(
-          (_, i) =>
-            // show all if not collapsed or null; show first and last n if collapsed
-            !isCollapsed || i == 0 || i > messages.length - COLLAPSE_THRESHOLD,
-        )
-        .map((message, index) => (
-          <>
-            <JSONView
-              title={message.role}
-              json={message.content}
-              key={index}
-              className={cn(
-                message.role === "system" && "bg-gray-100",
-                message.role === "assistant" && "bg-green-50",
-              )}
-            />
-            {isCollapsed !== null && index === 0 ? (
-              <Button
-                variant="ghost"
-                size="xs"
-                onClick={() => setCollapsed((v) => !v)}
-              >
-                {isCollapsed
-                  ? `Show ${messages.length - COLLAPSE_THRESHOLD} more ...`
-                  : "Hide history"}
-              </Button>
-            ) : null}
-          </>
-        ))}
-    </div>
+    <Link href={`/project/${props.projectId}/prompts/${props.promptId}`}>
+      <Badge>
+        Prompt: {prompt.data?.name}
+        {" - "}
+        {prompt.data?.version}
+      </Badge>
+    </Link>
   );
 };

src/components/trace/ObservationTree.tsx

@@ -4,6 +4,8 @@ import { type Trace, type Score } from "@prisma/client";
 import { GroupedScoreBadges } from "@/src/components/grouped-score-badge";
 import { Fragment } from "react";
 import { type ObservationReturnType } from "@/src/server/api/routers/traces";
+import { LevelColors } from "@/src/components/level-colors";
+import { formatInterval } from "@/src/utils/dates";
 
 export const ObservationTree = (props: {
   observations: ObservationReturnType[];
@@ -55,7 +57,7 @@ const ObservationTreeTraceNode = (props: {
     {props.trace.latency ? (
       <div className="flex gap-2">
         <span className="text-xs text-gray-500">
-          {props.trace.latency.toFixed(2)} sec
+          {formatInterval(props.trace.latency)}
         </span>
       </div>
     ) : null}
@@ -106,12 +108,11 @@ const ObservationTreeNode = (props: {
               <div className="flex gap-2">
                 {observation.endTime ? (
                   <span className="text-xs text-gray-500">
-                    {(
+                    {formatInterval(
                       (observation.endTime.getTime() -
                         observation.startTime.getTime()) /
-                      1000
-                    ).toFixed(2)}{" "}
-                    sec
+                        1000,
+                    )}
                   </span>
                 ) : null}
                 {observation.promptTokens ||
@@ -127,9 +128,9 @@ const ObservationTreeNode = (props: {
                 <div className="flex">
                   <span
                     className={cn(
-                      "rounded-sm text-xs",
-                      LevelColor[observation.level].bg,
-                      LevelColor[observation.level].text,
+                      "rounded-sm p-0.5 text-xs",
+                      LevelColors[observation.level].bg,
+                      LevelColors[observation.level].text,
                     )}
                   >
                     {observation.level}
@@ -159,13 +160,6 @@ const ObservationTreeNode = (props: {
   </>
 );
 
-const LevelColor = {
-  DEFAULT: { text: "", bg: "" },
-  DEBUG: { text: "text-gray-500", bg: "bg-gray-50" },
-  WARNING: { text: "text-yellow-800", bg: "bg-yellow-50" },
-  ERROR: { text: "text-red-800", bg: "bg-red-50" },
-};
-
 export function nestObservations(
   list: ObservationReturnType[],
 ): NestedObservation[] {

src/components/trace/TracePreview.tsx

@@ -17,16 +17,18 @@ import {
   TableRow,
 } from "@/src/components/ui/table";
 import { TraceAggUsageBadge } from "@/src/components/token-usage-badge";
-import { ManualScoreButton } from "@/src/features/manual-scoring/components";
+import { ManualScoreButton } from "@/src/features/manual-scoring/components/ManualScoreButton";
 import { Badge } from "@/src/components/ui/badge";
 import { type ObservationReturnType } from "@/src/server/api/routers/traces";
+import { IOPreview } from "@/src/components/trace/IOPreview";
+import { formatInterval } from "@/src/utils/dates";
 
 export const TracePreview = ({
   trace,
   observations,
   scores,
 }: {
-  trace: Trace;
+  trace: Trace & { latency?: number };
   observations: ObservationReturnType[];
   scores: Score[];
 }) => {
@@ -42,13 +44,16 @@ export const TracePreview = ({
           </CardTitle>
           <CardDescription>{trace.timestamp.toLocaleString()}</CardDescription>
           <div className="flex flex-wrap gap-2">
+            {!!trace.latency && (
+              <Badge variant="outline">{formatInterval(trace.latency)}</Badge>
+            )}
             <TraceAggUsageBadge observations={observations} />
-            {trace.release ? (
+            {!!trace.release && (
               <Badge variant="outline">Release: {trace.release}</Badge>
-            ) : undefined}
-            {trace.version ? (
+            )}
+            {!!trace.version && (
               <Badge variant="outline">Version: {trace.version}</Badge>
-            ) : undefined}
+            )}
           </div>
         </div>
         <ManualScoreButton
@@ -57,7 +62,12 @@ export const TracePreview = ({
           scores={scores}
         />
       </CardHeader>
-      <CardContent>
+      <CardContent className="flex flex-col gap-4">
+        <IOPreview
+          key={trace.id + "-io"}
+          input={trace.input ?? undefined}
+          output={trace.output ?? undefined}
+        />
         <JSONView
           key={trace.id + "-metadata"}
           title="Metadata"

src/components/trace/index.tsx

@@ -8,13 +8,15 @@ import { Badge } from "@/src/components/ui/badge";
 import { TraceAggUsageBadge } from "@/src/components/token-usage-badge";
 import Decimal from "decimal.js";
 import { StringParam, useQueryParam } from "use-query-params";
-import { PublishTraceSwitch } from "@/src/features/public-traces/components/PublishTraceSwitch";
+import { PublishTraceSwitch } from "@/src/components/publish-object-switch";
 import { DetailPageNav } from "@/src/features/navigate-detail-pages/DetailPageNav";
 import { useRouter } from "next/router";
 import { type ObservationReturnType } from "@/src/server/api/routers/traces";
 import { api } from "@/src/utils/api";
 import { DeleteTrace } from "@/src/components/delete-trace";
-import { BookmarkTrace } from "@/src/components/bookmark-trace";
+import { StarTraceToggle } from "@/src/components/star-toggle";
+import Link from "next/link";
+import { NoAccessError } from "@/src/components/no-access";
 
 export function Trace(props: {
   observations: Array<ObservationReturnType>;
@@ -29,16 +31,7 @@ export function Trace(props: {
 
   return (
     <div className="grid h-full gap-4 md:grid-cols-3">
-      <div className="col-span-1 lg:hidden">
-        <ObservationTree
-          observations={props.observations}
-          trace={props.trace}
-          scores={props.scores}
-          currentObservationId={currentObservationId ?? undefined}
-          setCurrentObservationId={setCurrentObservationId}
-        />
-      </div>
-      <div className="col-span-2 h-full overflow-y-auto">
+      <div className="md:col-span-2 md:h-full md:overflow-y-auto">
         {currentObservationId === undefined ||
         currentObservationId === "" ||
         currentObservationId === null ? (
@@ -57,7 +50,7 @@ export function Trace(props: {
           />
         )}
       </div>
-      <div className="col-span-1 hidden h-full overflow-y-auto lg:block">
+      <div className="md:h-full md:overflow-y-auto">
         <ObservationTree
           observations={props.observations}
           trace={props.trace}
@@ -72,22 +65,29 @@ export function Trace(props: {
 
 export function TracePage({ traceId }: { traceId: string }) {
   const router = useRouter();
-  const trace = api.traces.byId.useQuery({ traceId });
+  const trace = api.traces.byId.useQuery(
+    { traceId },
+    {
+      retry(failureCount, error) {
+        if (error.data?.code === "UNAUTHORIZED") return false;
+        return failureCount < 3;
+      },
+    },
+  );
   const totalCost = trace.data?.observations.reduce(
     (acc, o) => {
       if (!o.price) return acc;
 
-      return acc
-        ? acc.plus(o.price ? o.price : new Decimal(0))
-        : new Decimal(0).plus(o.price ? o.price : new Decimal(0));
+      return acc ? acc.plus(o.price) : new Decimal(0).plus(o.price);
     },
     undefined as Decimal | undefined,
   );
 
+  if (trace.error?.data?.code === "UNAUTHORIZED") return <NoAccessError />;
   if (!trace.data) return <div>loading...</div>;
 
   return (
-    <div className="flex flex-col overflow-hidden xl:container lg:h-[calc(100vh-100px)] xl:h-[calc(100vh-50px)]">
+    <div className="flex flex-col overflow-hidden xl:container md:h-[calc(100vh-100px)] xl:h-[calc(100vh-40px)]">
       <Header
         title="Trace Detail"
         breadcrumb={[
@@ -99,10 +99,10 @@ export function TracePage({ traceId }: { traceId: string }) {
         ]}
         actionButtons={
           <>
-            <BookmarkTrace
+            <StarTraceToggle
               traceId={trace.data.id}
               projectId={trace.data.projectId}
-              isBookmarked={trace.data.bookmarked}
+              value={trace.data.bookmarked}
             />
             <PublishTraceSwitch
               traceId={trace.data.id}
@@ -123,11 +123,26 @@ export function TracePage({ traceId }: { traceId: string }) {
           </>
         }
       />
-      <div className="flex gap-2">
-        {trace.data.userId ? (
-          <Badge variant="outline">User ID: {trace.data.userId}</Badge>
+      <div className="flex flex-wrap gap-2">
+        {trace.data.sessionId ? (
+          <Link
+            href={`/project/${router.query.projectId as string}/sessions/${
+              trace.data.sessionId
+            }`}
+          >
+            <Badge>Session: {trace.data.sessionId}</Badge>
+          </Link>
         ) : null}
-        <TraceAggUsageBadge observations={trace.data.observations ?? []} />
+        {trace.data.userId ? (
+          <Link
+            href={`/project/${router.query.projectId as string}/users/${
+              trace.data.userId
+            }`}
+          >
+            <Badge>User ID: {trace.data.userId}</Badge>
+          </Link>
+        ) : null}
+        <TraceAggUsageBadge observations={trace.data.observations} />
         {totalCost ? (
           <Badge variant="outline">
             Total cost: {totalCost.toString()} USD
@@ -140,7 +155,7 @@ export function TracePage({ traceId }: { traceId: string }) {
           trace={trace.data}
           scores={trace.data.scores}
           projectId={trace.data.projectId}
-          observations={trace.data.observations ?? []}
+          observations={trace.data.observations}
         />
       </div>
     </div>

src/components/ui/alert.tsx

@@ -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 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "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",
   {
     variants: {
       variant: {

src/components/ui/avatar.tsx

@@ -2,6 +2,7 @@
 
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
 import { cn } from "@/src/utils/tailwind";
 
 const Avatar = React.forwardRef<

src/components/ui/badge.tsx

@@ -4,16 +4,16 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/src/utils/tailwind";
 
 const badgeVariants = cva(
-  "inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
         default:
-          "bg-primary hover:bg-primary/80 border-transparent text-primary-foreground",
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
         secondary:
-          "bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
-          "bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground",
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
         outline: "text-foreground",
       },
     },

src/components/ui/button.tsx

@@ -1,13 +1,12 @@
-// https://ui.shadcn.com/docs/components/button
-
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { type VariantProps, cva } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority";
+
 import { cn } from "@/src/utils/tailwind";
 import { Loader2 } from "lucide-react";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -15,18 +14,18 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline:
-          "border border-input hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "underline-offset-4 hover:underline text-primary",
+        link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-10 py-2 px-4",
-        xs: "h-7 px-2 rounded-sm",
-        sm: "h-9 px-3 rounded-md",
-        lg: "h-11 px-8 rounded-md",
-        icon: "h-9 w-9",
+        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",
       },
     },
     defaultVariants: {

src/components/ui/calendar.tsx

@@ -36,15 +36,17 @@ function Calendar({
         head_cell:
           "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
         row: "flex w-full mt-2",
-        cell: "text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
           buttonVariants({ variant: "ghost" }),
           "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
         ),
+        day_range_end: "day-range-end",
         day_selected:
           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
         day_today: "bg-accent text-accent-foreground",
-        day_outside: "text-muted-foreground opacity-50",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
         day_disabled: "text-muted-foreground opacity-50",
         day_range_middle:
           "aria-selected:bg-accent aria-selected:text-accent-foreground",

src/components/ui/card.tsx

@@ -1,7 +1,6 @@
-// https://ui.shadcn.com/docs/components/card
+import * as React from "react";
 
 import { cn } from "@/src/utils/tailwind";
-import * as React from "react";
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -37,7 +36,7 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
+      "text-2xl font-semibold leading-none tracking-tight",
       className,
     )}
     {...props}
@@ -49,7 +48,7 @@ const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div
+  <p
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
@@ -71,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-6 pt-0", className)}
     {...props}
   />
 ));

src/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "@/src/utils/tailwind";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

src/components/ui/code.tsx

@@ -33,6 +33,7 @@ export function JSONView(props: {
             collapseStringsAfterLength={500}
             displaySize={"collapsed"}
             matchesURL={true}
+            customizeCopy={(node) => stringifyJsonNode(node)}
           />
         )}
       </div>
@@ -97,3 +98,33 @@ export function CodeView(props: {
     </div>
   );
 }
+
+function stringifyJsonNode(node: unknown) {
+  // return single string nodes without quotes
+  if (typeof node === "string") {
+    return node;
+  }
+
+  try {
+    return JSON.stringify(
+      node,
+      (key, value) => {
+        switch (typeof value) {
+          case "bigint":
+            return String(value) + "n";
+          case "number":
+          case "boolean":
+          case "object":
+          case "string":
+            return value as string;
+          default:
+            return String(value);
+        }
+      },
+      4,
+    );
+  } catch (error) {
+    console.error("JSON stringify error", error);
+    return "Error: JSON.stringify failed";
+  }
+}

src/components/ui/command.tsx

@@ -5,8 +5,8 @@ import { type DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 
-import { cn } from "@/src/utils/tailwind";
 import { Dialog, DialogContent } from "@/src/components/ui/dialog";
+import { cn } from "@/src/utils/tailwind";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -15,7 +15,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50",
       className,
     )}
     {...props}
@@ -23,13 +23,13 @@ const Command = React.forwardRef<
 ));
 Command.displayName = CommandPrimitive.displayName;
 
-type CommandDialogProps = DialogProps;
+interface CommandDialogProps extends DialogProps {}
 
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0 shadow-2xl">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-slate-500 dark:[&_[cmdk-group-heading]]:text-slate-400 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -41,12 +41,15 @@ const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+  <div
+    className="flex items-center rounded-lg 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 bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "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	",
         className,
       )}
       {...props}
@@ -89,7 +92,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      "overflow-hidden p-1 text-slate-950 dark:text-slate-50 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-slate-500 dark:[&_[cmdk-group-heading]]:text-slate-400",
       className,
     )}
     {...props}
@@ -104,7 +107,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
+    className={cn("-mx-1 h-px bg-slate-200 dark:bg-slate-800", className)}
     {...props}
   />
 ));
@@ -117,7 +120,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-slate-100 aria-selected:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:aria-selected:bg-slate-800 dark:aria-selected:text-slate-50",
       className,
     )}
     {...props}
@@ -133,7 +136,7 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ml-auto text-xs tracking-widest text-slate-500 dark:text-slate-400",
         className,
       )}
       {...props}