Remove unused import

* Allow user to delete scenario without variables

* Hide expand button for empty scenario editor

* Add header to scenario modal

.prettierignore

@@ -0,0 +1,2 @@
+*.schema.json
+app/pnpm-lock.yaml

app/.env.example

@@ -34,3 +34,9 @@ GITHUB_CLIENT_SECRET="your_secret"
 
 OPENPIPE_BASE_URL="http://localhost:3000/api/v1"
 OPENPIPE_API_KEY="your_key"
+
+SENDER_EMAIL="placeholder"
+SMTP_HOST="placeholder"
+SMTP_PORT="placeholder"
+SMTP_LOGIN="placeholder"
+SMTP_PASSWORD="placeholder"

app/.prettierignore

@@ -1,2 +0,0 @@
-*.schema.json
-pnpm-lock.yaml

app/@types/nextjs-routes.d.ts

@@ -12,6 +12,7 @@ declare module "nextjs-routes" {
 
   export type Route =
     | StaticRoute<"/account/signin">
+    | StaticRoute<"/admin/jobs">
     | DynamicRoute<"/api/auth/[...nextauth]", { "nextauth": string[] }>
     | StaticRoute<"/api/experiments/og-image">
     | DynamicRoute<"/api/trpc/[trpc]", { "trpc": string }>
@@ -20,9 +21,10 @@ declare module "nextjs-routes" {
     | StaticRoute<"/dashboard">
     | DynamicRoute<"/data/[id]", { "id": string }>
     | StaticRoute<"/data">
-    | DynamicRoute<"/experiments/[id]", { "id": string }>
+    | DynamicRoute<"/experiments/[experimentSlug]", { "experimentSlug": string }>
     | StaticRoute<"/experiments">
     | StaticRoute<"/">
+    | DynamicRoute<"/invitations/[invitationToken]", { "invitationToken": string }>
     | StaticRoute<"/project/settings">
     | StaticRoute<"/request-logs">
     | StaticRoute<"/sentry-example-page">

app/package.json

@@ -10,14 +10,15 @@
   },
   "scripts": {
     "build": "next build",
-    "dev:next": "next dev",
+    "dev:next": "TZ=UTC next dev",
     "dev:wss": "pnpm tsx --watch src/wss-server.ts",
     "dev:worker": "NODE_ENV='development' pnpm tsx --watch src/server/tasks/worker.ts",
     "dev": "concurrently --kill-others 'pnpm dev:next' 'pnpm dev:wss' 'pnpm dev:worker'",
     "postinstall": "prisma generate",
     "lint": "next lint",
-    "start": "next start",
+    "start": "TZ=UTC next start",
     "codegen:clients": "tsx src/server/scripts/client-codegen.ts",
+    "codegen:db": "prisma generate && kysely-codegen --dialect postgres --out-file src/server/db.types.ts",
     "seed": "tsx prisma/seed.ts",
     "check": "concurrently 'pnpm lint' 'pnpm tsc' 'pnpm prettier . --check'",
     "test": "pnpm vitest"
@@ -37,6 +38,7 @@
     "@monaco-editor/loader": "^1.3.3",
     "@next-auth/prisma-adapter": "^1.0.5",
     "@prisma/client": "^4.14.0",
+    "@sendinblue/client": "^3.3.1",
     "@sentry/nextjs": "^7.61.0",
     "@t3-oss/env-nextjs": "^0.3.1",
     "@tabler/icons-react": "^2.22.0",
@@ -64,13 +66,16 @@
     "json-stringify-pretty-compact": "^4.0.0",
     "jsonschema": "^1.4.1",
     "kysely": "^0.26.1",
+    "kysely-codegen": "^0.10.1",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.265.0",
+    "marked": "^7.0.3",
     "next": "^13.4.2",
     "next-auth": "^4.22.1",
     "next-query-params": "^4.2.3",
     "nextjs-cors": "^2.1.2",
     "nextjs-routes": "^2.0.1",
+    "nodemailer": "^6.9.4",
     "openai": "4.0.0-beta.7",
     "openpipe": "workspace:*",
     "pg": "^8.11.2",
@@ -114,6 +119,7 @@
     "@types/json-schema": "^7.0.12",
     "@types/lodash-es": "^4.17.8",
     "@types/node": "^18.16.0",
+    "@types/nodemailer": "^6.4.9",
     "@types/pg": "^8.10.2",
     "@types/pluralize": "^0.0.30",
     "@types/prismjs": "^1.26.0",

app/prisma/migrations/20230814233722_index_tags_by_project/migration.sql

@@ -0,0 +1,22 @@
+-- DropIndex
+DROP INDEX "LoggedCallTag_name_idx";
+DROP INDEX "LoggedCallTag_name_value_idx";
+
+-- AlterTable: Add projectId column without NOT NULL constraint for now
+ALTER TABLE "LoggedCallTag" ADD COLUMN "projectId" UUID;
+
+-- Set the default value
+UPDATE "LoggedCallTag" lct
+SET "projectId" = lc."projectId"
+FROM "LoggedCall" lc
+WHERE lct."loggedCallId" = lc.id;
+
+-- Now set the NOT NULL constraint
+ALTER TABLE "LoggedCallTag" ALTER COLUMN "projectId" SET NOT NULL;
+
+-- CreateIndex
+CREATE INDEX "LoggedCallTag_projectId_name_idx" ON "LoggedCallTag"("projectId", "name");
+CREATE INDEX "LoggedCallTag_projectId_name_value_idx" ON "LoggedCallTag"("projectId", "name", "value");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "LoggedCallTag_loggedCallId_name_key" ON "LoggedCallTag"("loggedCallId", "name");

app/prisma/migrations/20230815234811_add_user_invitations/migration.sql

@@ -0,0 +1,25 @@
+-- CreateTable
+CREATE TABLE "UserInvitation" (
+    "id" UUID NOT NULL,
+    "projectId" UUID NOT NULL,
+    "email" TEXT NOT NULL,
+    "role" "ProjectUserRole" NOT NULL,
+    "invitationToken" TEXT NOT NULL,
+    "senderId" UUID NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "UserInvitation_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "UserInvitation_invitationToken_key" ON "UserInvitation"("invitationToken");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "UserInvitation_projectId_email_key" ON "UserInvitation"("projectId", "email");
+
+-- AddForeignKey
+ALTER TABLE "UserInvitation" ADD CONSTRAINT "UserInvitation_projectId_fkey" FOREIGN KEY ("projectId") REFERENCES "Project"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "UserInvitation" ADD CONSTRAINT "UserInvitation_senderId_fkey" FOREIGN KEY ("senderId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;

app/prisma/migrations/20230818055303_add_slug_to_experiment/migration.sql

@@ -0,0 +1,88 @@
+/*
+ * Copyright 2023 Viascom Ltd liab. Co
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+CREATE EXTENSION IF NOT EXISTS pgcrypto;
+
+CREATE OR REPLACE FUNCTION nanoid(
+    size int DEFAULT 21,
+    alphabet text DEFAULT '_-0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
+)
+    RETURNS text
+    LANGUAGE plpgsql
+    volatile
+AS
+$$
+DECLARE
+    idBuilder      text := '';
+    counter        int  := 0;
+    bytes          bytea;
+    alphabetIndex  int;
+    alphabetArray  text[];
+    alphabetLength int;
+    mask           int;
+    step           int;
+BEGIN
+    alphabetArray := regexp_split_to_array(alphabet, '');
+    alphabetLength := array_length(alphabetArray, 1);
+    mask := (2 << cast(floor(log(alphabetLength - 1) / log(2)) as int)) - 1;
+    step := cast(ceil(1.6 * mask * size / alphabetLength) AS int);
+
+    while true
+        loop
+            bytes := gen_random_bytes(step);
+            while counter < step
+                loop
+                    alphabetIndex := (get_byte(bytes, counter) & mask) + 1;
+                    if alphabetIndex <= alphabetLength then
+                        idBuilder := idBuilder || alphabetArray[alphabetIndex];
+                        if length(idBuilder) = size then
+                            return idBuilder;
+                        end if;
+                    end if;
+                    counter := counter + 1;
+                end loop;
+
+            counter := 0;
+        end loop;
+END
+$$;
+
+
+-- Make a short_nanoid function that uses the default alphabet and length of 15
+CREATE OR REPLACE FUNCTION short_nanoid()
+    RETURNS text
+    LANGUAGE plpgsql
+    volatile
+AS
+$$
+BEGIN
+    RETURN nanoid(15, '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ');
+END
+$$;
+
+-- AlterTable
+ALTER TABLE "Experiment" ADD COLUMN     "slug" TEXT NOT NULL DEFAULT short_nanoid();
+
+-- For existing experiments, keep the existing id as the slug for backwards compatibility
+UPDATE "Experiment" SET "slug" = "id";
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Experiment_slug_key" ON "Experiment"("slug");

app/prisma/schema.prisma

@@ -12,6 +12,8 @@ datasource db {
 
 model Experiment {
     id String @id @default(uuid()) @db.Uuid
+
+    slug  String @unique @default(dbgenerated("short_nanoid()"))
     label String
 
     sortIndex Int @default(0)
@@ -210,6 +212,7 @@ model Project {
     createdAt              DateTime         @default(now())
     updatedAt              DateTime         @updatedAt
     projectUsers           ProjectUser[]
+    projectUserInvitations UserInvitation[]
     experiments            Experiment[]
     datasets               Dataset[]
     loggedCalls            LoggedCall[]
@@ -326,12 +329,14 @@ model LoggedCallTag {
     id        String  @id @default(uuid()) @db.Uuid
     name      String
     value     String?
+    projectId String  @db.Uuid
 
     loggedCallId String     @db.Uuid
     loggedCall   LoggedCall @relation(fields: [loggedCallId], references: [id], onDelete: Cascade)
 
-    @@index([name])
+    @@unique([loggedCallId, name])
-    @@index([name, value])
+    @@index([projectId, name])
+    @@index([projectId, name, value])
 }
 
 model ApiKey {
@@ -393,11 +398,28 @@ model User {
     projectUsers        ProjectUser[]
     projects            Project[]
     worldChampEntrant   WorldChampEntrant?
+    sentUserInvitations UserInvitation[]
 
     createdAt DateTime @default(now())
     updatedAt DateTime @default(now()) @updatedAt
 }
 
+model UserInvitation {
+    id String @id @default(uuid()) @db.Uuid
+
+    projectId       String          @db.Uuid
+    project         Project         @relation(fields: [projectId], references: [id], onDelete: Cascade)
+    email           String
+    role            ProjectUserRole
+    invitationToken String          @unique
+    senderId        String          @db.Uuid
+    sender          User            @relation(fields: [senderId], references: [id], onDelete: Cascade)
+    createdAt       DateTime        @default(now())
+    updatedAt       DateTime        @updatedAt
+
+    @@unique([projectId, email])
+}
+
 model VerificationToken {
     identifier String
     token      String   @unique

app/prisma/seed.ts

@@ -10,6 +10,14 @@ await prisma.project.deleteMany({
   where: { id: defaultId },
 });
 
+// Mark all users as admins
+await prisma.user.updateMany({
+  where: {},
+  data: {
+    role: "ADMIN",
+  },
+});
+
 // If there's an existing project, just seed into it
 const project =
   (await prisma.project.findFirst({})) ??
@@ -18,12 +26,16 @@ const project =
   }));
 
 if (env.OPENPIPE_API_KEY) {
-  await prisma.apiKey.create({
+  await prisma.apiKey.upsert({
-    data: {
+    where: {
+      apiKey: env.OPENPIPE_API_KEY,
+    },
+    create: {
       projectId: project.id,
       name: "Default API Key",
       apiKey: env.OPENPIPE_API_KEY,
     },
+    update: {},
   });
 }
 

app/prisma/seedDashboard.ts

@@ -13,6 +13,7 @@ const MODEL_RESPONSE_TEMPLATES: {
   inputTokens: number;
   outputTokens: number;
   finishReason: string;
+  tags: { name: string; value: string }[];
 }[] = [
   {
     reqPayload: {
@@ -107,6 +108,7 @@ const MODEL_RESPONSE_TEMPLATES: {
     inputTokens: 236,
     outputTokens: 5,
     finishReason: "stop",
+    tags: [],
   },
   {
     reqPayload: {
@@ -193,6 +195,7 @@ const MODEL_RESPONSE_TEMPLATES: {
     inputTokens: 222,
     outputTokens: 5,
     finishReason: "stop",
+    tags: [],
   },
   {
     reqPayload: {
@@ -231,6 +234,7 @@ const MODEL_RESPONSE_TEMPLATES: {
     inputTokens: 14,
     outputTokens: 7,
     finishReason: "stop",
+    tags: [{ name: "prompt_id", value: "id2" }],
   },
   {
     reqPayload: {
@@ -306,6 +310,10 @@ const MODEL_RESPONSE_TEMPLATES: {
     inputTokens: 2802,
     outputTokens: 108,
     finishReason: "stop",
+    tags: [
+      { name: "prompt_id", value: "chatcmpl-7lQS3MktOT8BTgNEytl9dkyssCQqL" },
+      { name: "some_other_tag", value: "some_other_value" },
+    ],
   },
 ];
 
@@ -349,6 +357,7 @@ for (let i = 0; i < 1437; i++) {
     cacheHit: false,
     requestedAt,
     projectId: project.id,
+    model: template.reqPayload.model,
     createdAt: requestedAt,
   });
 
@@ -388,12 +397,15 @@ for (let i = 0; i < 1437; i++) {
       modelResponseId: loggedCallModelResponseId,
     },
   });
+  for (const tag of template.tags) {
     loggedCallTagsToCreate.push({
+      projectId: project.id,
       loggedCallId,
-    name: "$model",
+      name: tag.name,
-    value: template.reqPayload.model,
+      value: tag.value,
     });
   }
+}
 
 await prisma.$transaction([
   prisma.loggedCall.createMany({

app/src/components/AutoResizeTextArea.tsx

@@ -1,13 +1,13 @@
 import { Textarea, type TextareaProps } from "@chakra-ui/react";
 import ResizeTextarea from "react-textarea-autosize";
-import React, { useLayoutEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 export const AutoResizeTextarea: React.ForwardRefRenderFunction<
   HTMLTextAreaElement,
   TextareaProps & { minRows?: number }
 > = ({ minRows = 1, overflowY = "hidden", ...props }, ref) => {
   const [isRerendered, setIsRerendered] = useState(false);
-  useLayoutEffect(() => setIsRerendered(true), []);
+  useEffect(() => setIsRerendered(true), []);
 
   return (
     <Textarea

app/src/components/ChangeModelModal/ModelStatsCard.tsx

@@ -87,7 +87,7 @@ export const ModelStatsCard = ({
               label="Price"
               info={
                 <Text>
-                  ${model.pricePerSecond.toFixed(3)}
+                  ${model.pricePerSecond.toFixed(4)}
                   <Text color="gray.500"> / second</Text>
                 </Text>
               }

app/src/components/CopiableCode.tsx

@@ -1,15 +1,16 @@
-import { HStack, Icon, IconButton, Tooltip, Text } from "@chakra-ui/react";
+import { HStack, Icon, IconButton, Tooltip, Text, type StackProps } from "@chakra-ui/react";
 import { useState } from "react";
 import { MdContentCopy } from "react-icons/md";
 import { useHandledAsyncCallback } from "~/utils/hooks";
 
-const CopiableCode = ({ code }: { code: string }) => {
+const CopiableCode = ({ code, ...rest }: { code: string } & StackProps) => {
   const [copied, setCopied] = useState(false);
 
   const [copyToClipboard] = useHandledAsyncCallback(async () => {
     await navigator.clipboard.writeText(code);
     setCopied(true);
   }, [code]);
+
   return (
     <HStack
       backgroundColor="blackAlpha.800"
@@ -18,9 +19,19 @@ const CopiableCode = ({ code }: { code: string }) => {
       padding={3}
       w="full"
       justifyContent="space-between"
+      alignItems="flex-start"
+      {...rest}
+    >
+      <Text
+        fontFamily="inconsolata"
+        fontWeight="bold"
+        letterSpacing={0.5}
+        overflowX="auto"
+        whiteSpace="pre-wrap"
       >
-      <Text fontFamily="inconsolata" fontWeight="bold" letterSpacing={0.5} overflowX="auto">
         {code}
+        {/* Necessary for trailing newline to actually be displayed */}
+        {code.endsWith("\n") ? "\n" : ""}
       </Text>
       <Tooltip closeOnClick={false} label={copied ? "Copied!" : "Copy to clipboard"}>
         <IconButton

app/src/components/InputDropdown.tsx

@@ -0,0 +1,80 @@
+import {
+  Input,
+  InputGroup,
+  InputRightElement,
+  Icon,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  VStack,
+  HStack,
+  Button,
+  Text,
+  useDisclosure,
+} from "@chakra-ui/react";
+
+import { FiChevronDown } from "react-icons/fi";
+import { BiCheck } from "react-icons/bi";
+
+type InputDropdownProps<T> = {
+  options: ReadonlyArray<T>;
+  selectedOption: T;
+  onSelect: (option: T) => void;
+};
+
+const InputDropdown = <T,>({ options, selectedOption, onSelect }: InputDropdownProps<T>) => {
+  const popover = useDisclosure();
+
+  return (
+    <Popover placement="bottom-start" {...popover}>
+      <PopoverTrigger>
+        <InputGroup cursor="pointer" w={(selectedOption as string).length * 14 + 180}>
+          <Input
+            value={selectedOption as string}
+            // eslint-disable-next-line @typescript-eslint/no-empty-function -- controlled input requires onChange
+            onChange={() => {}}
+            cursor="pointer"
+            borderColor={popover.isOpen ? "blue.500" : undefined}
+            _hover={popover.isOpen ? { borderColor: "blue.500" } : undefined}
+            contentEditable={false}
+            // disable focus
+            onFocus={(e) => {
+              e.target.blur();
+            }}
+          />
+          <InputRightElement>
+            <Icon as={FiChevronDown} />
+          </InputRightElement>
+        </InputGroup>
+      </PopoverTrigger>
+      <PopoverContent boxShadow="0 0 40px 4px rgba(0, 0, 0, 0.1);" minW={0} w="auto">
+        <VStack spacing={0}>
+          {options?.map((option, index) => (
+            <HStack
+              key={index}
+              as={Button}
+              onClick={() => {
+                onSelect(option);
+                popover.onClose();
+              }}
+              w="full"
+              variant="ghost"
+              justifyContent="space-between"
+              fontWeight="semibold"
+              borderRadius={0}
+              colorScheme="blue"
+              color="black"
+              fontSize="sm"
+              borderBottomWidth={1}
+            >
+              <Text mr={16}>{option as string}</Text>
+              {option === selectedOption && <Icon as={BiCheck} color="blue.500" boxSize={5} />}
+            </HStack>
+          ))}
+        </VStack>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default InputDropdown;

app/src/components/OutputsTable/AddVariantButton.tsx

@@ -8,7 +8,7 @@ import {
   useHandledAsyncCallback,
   useVisibleScenarioIds,
 } from "~/utils/hooks";
-import { cellPadding } from "../constants";
+import { cellPadding } from "./constants";
 import { ActionButton } from "./ScenariosHeader";
 
 export default function AddVariantButton() {

app/src/components/OutputsTable/OutputCell/CellOptions.tsx

@@ -1,7 +1,7 @@
 import { HStack, Icon, IconButton, Spinner, Tooltip, useDisclosure } from "@chakra-ui/react";
 import { BsArrowClockwise, BsInfoCircle } from "react-icons/bs";
 import { useExperimentAccess } from "~/utils/hooks";
-import ExpandedModal from "./PromptModal";
+import PromptModal from "./PromptModal";
 import { type RouterOutputs } from "~/utils/api";
 
 export const CellOptions = ({
@@ -32,7 +32,7 @@ export const CellOptions = ({
               variant="ghost"
             />
           </Tooltip>
-          <ExpandedModal cell={cell} disclosure={modalDisclosure} />
+          <PromptModal cell={cell} disclosure={modalDisclosure} />
         </>
       )}
       {canModify && (

app/src/components/OutputsTable/OutputCell/CellWrapper.tsx

@@ -0,0 +1,29 @@
+import { type StackProps, VStack } from "@chakra-ui/react";
+import { type RouterOutputs } from "~/utils/api";
+import { type Scenario } from "../types";
+import { CellOptions } from "./CellOptions";
+import { OutputStats } from "./OutputStats";
+
+const CellWrapper: React.FC<
+  StackProps & {
+    cell: RouterOutputs["scenarioVariantCells"]["get"] | undefined;
+    hardRefetching: boolean;
+    hardRefetch: () => void;
+    mostRecentResponse:
+      | NonNullable<RouterOutputs["scenarioVariantCells"]["get"]>["modelResponses"][0]
+      | undefined;
+    scenario: Scenario;
+  }
+> = ({ children, cell, hardRefetching, hardRefetch, mostRecentResponse, scenario, ...props }) => (
+  <VStack w="full" alignItems="flex-start" {...props} px={2} py={2} h="100%">
+    {cell && (
+      <CellOptions refetchingOutput={hardRefetching} refetchOutput={hardRefetch} cell={cell} />
+    )}
+    <VStack w="full" alignItems="flex-start" maxH={500} overflowY="auto" flex={1}>
+      {children}
+    </VStack>
+    {mostRecentResponse && <OutputStats modelResponse={mostRecentResponse} scenario={scenario} />}
+  </VStack>
+);
+
+export default CellWrapper;

app/src/components/OutputsTable/OutputCell/OutputCell.tsx

@@ -1,17 +1,16 @@
-import { api } from "~/utils/api";
+import { Text } from "@chakra-ui/react";
-import { type PromptVariant, type Scenario } from "../types";
+import stringify from "json-stringify-pretty-compact";
-import { type StackProps, Text, VStack } from "@chakra-ui/react";
+import { Fragment, useEffect, useState, type ReactElement } from "react";
-import { useScenarioVars, useHandledAsyncCallback } from "~/utils/hooks";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { docco } from "react-syntax-highlighter/dist/cjs/styles/hljs";
-import stringify from "json-stringify-pretty-compact";
-import { type ReactElement, useState, useEffect, Fragment, useCallback } from "react";
-import useSocket from "~/utils/useSocket";
-import { OutputStats } from "./OutputStats";
-import { RetryCountdown } from "./RetryCountdown";
 import frontendModelProviders from "~/modelProviders/frontendModelProviders";
+import { api } from "~/utils/api";
+import { useHandledAsyncCallback, useScenarioVars } from "~/utils/hooks";
+import useSocket from "~/utils/useSocket";
+import { type PromptVariant, type Scenario } from "../types";
+import CellWrapper from "./CellWrapper";
 import { ResponseLog } from "./ResponseLog";
-import { CellOptions } from "./TopActions";
+import { RetryCountdown } from "./RetryCountdown";
 
 const WAITING_MESSAGE_INTERVAL = 20000;
 
@@ -72,35 +71,26 @@ export default function OutputCell({
 
   const mostRecentResponse = cell?.modelResponses[cell.modelResponses.length - 1];
 
-  const CellWrapper = useCallback(
+  const wrapperProps: Parameters<typeof CellWrapper>[0] = {
-    ({ children, ...props }: StackProps) => (
+    cell,
-      <VStack w="full" alignItems="flex-start" {...props} px={2} py={2} h="100%">
+    hardRefetching,
-        {cell && (
+    hardRefetch,
-          <CellOptions refetchingOutput={hardRefetching} refetchOutput={hardRefetch} cell={cell} />
+    mostRecentResponse,
-        )}
+    scenario,
-        <VStack w="full" alignItems="flex-start" maxH={500} overflowY="auto" flex={1}>
+  };
-          {children}
-        </VStack>
-        {mostRecentResponse && (
-          <OutputStats modelResponse={mostRecentResponse} scenario={scenario} />
-        )}
-      </VStack>
-    ),
-    [hardRefetching, hardRefetch, mostRecentResponse, scenario, cell],
-  );
 
   if (!vars) return null;
 
   if (!cell && !fetchingOutput)
     return (
-      <CellWrapper>
+      <CellWrapper {...wrapperProps}>
         <Text color="gray.500">Error retrieving output</Text>
       </CellWrapper>
     );
 
   if (cell && cell.errorMessage) {
     return (
-      <CellWrapper>
+      <CellWrapper {...wrapperProps}>
         <Text color="red.500">{cell.errorMessage}</Text>
       </CellWrapper>
     );
@@ -112,7 +102,12 @@ export default function OutputCell({
 
   if (showLogs)
     return (
-      <CellWrapper alignItems="flex-start" fontFamily="inconsolata, monospace" spacing={0}>
+      <CellWrapper
+        {...wrapperProps}
+        alignItems="flex-start"
+        fontFamily="inconsolata, monospace"
+        spacing={0}
+      >
         {cell?.jobQueuedAt && <ResponseLog time={cell.jobQueuedAt} title="Job queued" />}
         {cell?.jobStartedAt && <ResponseLog time={cell.jobStartedAt} title="Job started" />}
         {cell?.modelResponses?.map((response) => {
@@ -174,7 +169,7 @@ export default function OutputCell({
 
   if (mostRecentResponse?.respPayload && normalizedOutput?.type === "json") {
     return (
-      <CellWrapper>
+      <CellWrapper {...wrapperProps}>
         <SyntaxHighlighter
           customStyle={{ overflowX: "unset", width: "100%", flex: 1 }}
           language="json"
@@ -193,7 +188,7 @@ export default function OutputCell({
   const contentToDisplay = (normalizedOutput?.type === "text" && normalizedOutput.value) || "";
 
   return (
-    <CellWrapper>
+    <CellWrapper {...wrapperProps}>
       <Text whiteSpace="pre-wrap">{contentToDisplay}</Text>
     </CellWrapper>
   );

app/src/components/OutputsTable/OutputCell/PromptModal.tsx

@@ -5,30 +5,103 @@ import {
   ModalContent,
   ModalHeader,
   ModalOverlay,
+  VStack,
+  Text,
+  Box,
   type UseDisclosureReturn,
+  Link,
 } from "@chakra-ui/react";
-import { type RouterOutputs } from "~/utils/api";
+import { api, type RouterOutputs } from "~/utils/api";
 import { JSONTree } from "react-json-tree";
+import CopiableCode from "~/components/CopiableCode";
 
-export default function ExpandedModal(props: {
+const theme = {
+  scheme: "chalk",
+  author: "chris kempson (http://chriskempson.com)",
+  base00: "transparent",
+  base01: "#202020",
+  base02: "#303030",
+  base03: "#505050",
+  base04: "#b0b0b0",
+  base05: "#d0d0d0",
+  base06: "#e0e0e0",
+  base07: "#f5f5f5",
+  base08: "#fb9fb1",
+  base09: "#eda987",
+  base0A: "#ddb26f",
+  base0B: "#acc267",
+  base0C: "#12cfc0",
+  base0D: "#6fc2ef",
+  base0E: "#e1a3ee",
+  base0F: "#deaf8f",
+};
+
+export default function PromptModal(props: {
   cell: NonNullable<RouterOutputs["scenarioVariantCells"]["get"]>;
   disclosure: UseDisclosureReturn;
 }) {
+  const { data } = api.scenarioVariantCells.getTemplatedPromptMessage.useQuery(
+    {
+      cellId: props.cell.id,
+    },
+    {
+      enabled: props.disclosure.isOpen,
+    },
+  );
+
   return (
-    <Modal isOpen={props.disclosure.isOpen} onClose={props.disclosure.onClose} size="2xl">
+    <Modal isOpen={props.disclosure.isOpen} onClose={props.disclosure.onClose} size="xl">
       <ModalOverlay />
       <ModalContent>
-        <ModalHeader>Prompt</ModalHeader>
+        <ModalHeader>Prompt Details</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
+          <VStack py={4} w="">
+            <VStack w="full" alignItems="flex-start">
+              <Text fontWeight="bold">Full Prompt</Text>
+              <Box
+                w="full"
+                p={4}
+                alignItems="flex-start"
+                backgroundColor="blackAlpha.800"
+                borderRadius={4}
+              >
                 <JSONTree
                   data={props.cell.prompt}
-            invertTheme={true}
+                  theme={theme}
-            theme="chalk"
                   shouldExpandNodeInitially={() => true}
                   getItemString={() => ""}
                   hideRoot
                 />
+              </Box>
+            </VStack>
+            {data?.templatedPrompt && (
+              <VStack w="full" mt={4} alignItems="flex-start">
+                <Text fontWeight="bold">Templated prompt message:</Text>
+                <CopiableCode
+                  w="full"
+                  // bgColor="gray.100"
+                  p={4}
+                  borderWidth={1}
+                  whiteSpace="pre-wrap"
+                  code={data.templatedPrompt}
+                />
+              </VStack>
+            )}
+            {data?.learnMoreUrl && (
+              <Link
+                href={data.learnMoreUrl}
+                isExternal
+                color="blue.500"
+                fontWeight="bold"
+                fontSize="sm"
+                mt={4}
+                alignSelf="flex-end"
+              >
+                Learn More
+              </Link>
+            )}
+          </VStack>
         </ModalBody>
       </ModalContent>
     </Modal>

app/src/components/OutputsTable/ScenarioEditor.tsx

@@ -16,7 +16,7 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import { BsArrowsAngleExpand, BsX } from "react-icons/bs";
-import { cellPadding } from "../constants";
+import { cellPadding } from "./constants";
 import { FloatingLabelInput } from "./FloatingLabelInput";
 import { ScenarioEditorModal } from "./ScenarioEditorModal";
 
@@ -111,14 +111,11 @@ export default function ScenarioEditor({
         onDrop={onReorder}
         backgroundColor={isDragTarget ? "gray.100" : "transparent"}
       >
-        {variableLabels.length === 0 ? (
+        {
-          <Box color="gray.500">
-            {vars.data ? "No scenario variables configured" : "Loading..."}
-          </Box>
-        ) : (
           <VStack spacing={4} flex={1} py={2}>
             <HStack justifyContent="space-between" w="100%" align="center" spacing={0}>
               <Text flex={1}>Scenario</Text>
+              {variableLabels.length && (
                 <Tooltip label="Expand" hasArrow>
                   <IconButton
                     aria-label="Expand"
@@ -130,6 +127,7 @@ export default function ScenarioEditor({
                     variant="ghost"
                   />
                 </Tooltip>
+              )}
               {canModify && props.canHide && (
                 <Tooltip label="Delete" hasArrow>
                   <IconButton
@@ -150,7 +148,13 @@ export default function ScenarioEditor({
                 </Tooltip>
               )}
             </HStack>
-            {variableLabels.map((key) => {
+
+            {variableLabels.length === 0 ? (
+              <Box color="gray.500">
+                {vars.data ? "No scenario variables configured" : "Loading..."}
+              </Box>
+            ) : (
+              variableLabels.map((key) => {
                 const value = values[key] ?? "";
                 return (
                   <FloatingLabelInput
@@ -174,7 +178,8 @@ export default function ScenarioEditor({
                     onMouseLeave={() => setVariableInputHovered(false)}
                   />
                 );
-            })}
+              })
+            )}
             {hasChanged && (
               <HStack justify="right">
                 <Button
@@ -192,7 +197,7 @@ export default function ScenarioEditor({
               </HStack>
             )}
           </VStack>
-        )}
+        }
       </HStack>
       {scenarioEditorModalOpen && (
         <ScenarioEditorModal

app/src/components/OutputsTable/ScenarioEditorModal.tsx

@@ -65,11 +65,11 @@ export const ScenarioEditorModal = ({
     <Modal
       isOpen
       onClose={onClose}
-      size={{ base: "xl", sm: "2xl", md: "3xl", lg: "5xl", xl: "7xl" }}
+      size={{ base: "xl", sm: "2xl", md: "3xl", lg: "4xl", xl: "5xl" }}
     >
       <ModalOverlay />
       <ModalContent w={1200}>
-        <ModalHeader />
+        <ModalHeader>Edit Scenario</ModalHeader>
         <ModalCloseButton />
         <ModalBody maxW="unset">
           <VStack spacing={8}>

app/src/components/OutputsTable/ScenariosHeader.tsx

@@ -11,7 +11,7 @@ import {
   IconButton,
   Spinner,
 } from "@chakra-ui/react";
-import { cellPadding } from "../constants";
+import { cellPadding } from "./constants";
 import {
   useExperiment,
   useExperimentAccess,

app/src/components/OutputsTable/VariantHeader/VariantHeader.tsx

@@ -1,11 +1,11 @@
 import { useState, type DragEvent } from "react";
-import { type PromptVariant } from "../OutputsTable/types";
+import { type PromptVariant } from "../types";
 import { api } from "~/utils/api";
 import { RiDraggable } from "react-icons/ri";
 import { useExperimentAccess, useHandledAsyncCallback } from "~/utils/hooks";
 import { HStack, Icon, Text, GridItem, type GridItemProps } from "@chakra-ui/react"; // Changed here
 import { cellPadding, headerMinHeight } from "../constants";
-import AutoResizeTextArea from "../AutoResizeTextArea";
+import AutoResizeTextArea from "../../AutoResizeTextArea";
 import VariantHeaderMenuButton from "./VariantHeaderMenuButton";
 
 export default function VariantHeader(
@@ -75,7 +75,7 @@ export default function VariantHeader(
       padding={0}
       sx={{
         position: "sticky",
-        top: "-2",
+        top: "0",
         // Ensure that the menu always appears above the sticky header of other variants
         zIndex: menuOpen ? "dropdown" : 10,
       }}

app/src/components/OutputsTable/VariantHeader/VariantHeaderMenuButton.tsx

@@ -1,6 +1,4 @@
-import { type PromptVariant } from "../OutputsTable/types";
+import { useState } from "react";
-import { api } from "~/utils/api";
-import { useHandledAsyncCallback, useVisibleScenarioIds } from "~/utils/hooks";
 import {
   Icon,
   Menu,
@@ -14,10 +12,13 @@ import {
 } from "@chakra-ui/react";
 import { BsFillTrashFill, BsGear, BsStars } from "react-icons/bs";
 import { FaRegClone } from "react-icons/fa";
-import { useState } from "react";
-import { RefinePromptModal } from "../RefinePromptModal/RefinePromptModal";
 import { RiExchangeFundsFill } from "react-icons/ri";
-import { ChangeModelModal } from "../ChangeModelModal/ChangeModelModal";
+
+import { api } from "~/utils/api";
+import { useHandledAsyncCallback, useVisibleScenarioIds } from "~/utils/hooks";
+import { type PromptVariant } from "../types";
+import { RefinePromptModal } from "../../RefinePromptModal/RefinePromptModal";
+import { ChangeModelModal } from "../../ChangeModelModal/ChangeModelModal";
 
 export default function VariantHeaderMenuButton({
   variant,

app/src/components/OutputsTable/VariantStats.tsx

@@ -1,6 +1,6 @@
 import { HStack, Icon, Text, useToken } from "@chakra-ui/react";
 import { type PromptVariant } from "./types";
-import { cellPadding } from "../constants";
+import { cellPadding } from "./constants";
 import { api } from "~/utils/api";
 import chroma from "chroma-js";
 import { BsCurrencyDollar } from "react-icons/bs";

app/src/components/OutputsTable/index.tsx

@@ -3,13 +3,14 @@ import { api } from "~/utils/api";
 import AddVariantButton from "./AddVariantButton";
 import ScenarioRow from "./ScenarioRow";
 import VariantEditor from "./VariantEditor";
-import VariantHeader from "../VariantHeader/VariantHeader";
+import VariantHeader from "./VariantHeader/VariantHeader";
 import VariantStats from "./VariantStats";
 import { ScenariosHeader } from "./ScenariosHeader";
 import { borders } from "./styles";
 import { useScenarios } from "~/utils/hooks";
 import ScenarioPaginator from "./ScenarioPaginator";
 import { Fragment } from "react";
+import useScrolledPast from "./useHasScrolledPast";
 
 export default function OutputsTable({ experimentId }: { experimentId: string | undefined }) {
   const variants = api.promptVariants.list.useQuery(
@@ -18,6 +19,7 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
   );
 
   const scenarios = useScenarios();
+  const shouldFlattenHeader = useScrolledPast(50);
 
   if (!variants.data || !scenarios.data) return null;
 
@@ -63,8 +65,8 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
               variant={variant}
               canHide={variants.data.length > 1}
               rowStart={1}
-              borderTopLeftRadius={isFirst ? 8 : 0}
+              borderTopLeftRadius={isFirst && !shouldFlattenHeader ? 8 : 0}
-              borderTopRightRadius={isLast ? 8 : 0}
+              borderTopRightRadius={isLast && !shouldFlattenHeader ? 8 : 0}
               {...sharedProps}
             />
             <GridItem rowStart={2} {...sharedProps}>

app/src/components/OutputsTable/useHasScrolledPast.tsx

@@ -0,0 +1,34 @@
+import { useState, useEffect } from "react";
+
+const useScrolledPast = (scrollThreshold: number) => {
+  const [hasScrolledPast, setHasScrolledPast] = useState(true);
+
+  useEffect(() => {
+    const container = document.getElementById("output-container");
+
+    if (!container) {
+      console.warn('Element with id "outputs-container" not found.');
+      return;
+    }
+
+    const checkScroll = () => {
+      const { scrollTop } = container;
+
+      // Check if scrollTop is greater than or equal to scrollThreshold
+      setHasScrolledPast(scrollTop > scrollThreshold);
+    };
+
+    checkScroll();
+
+    container.addEventListener("scroll", checkScroll);
+
+    // Cleanup
+    return () => {
+      container.removeEventListener("scroll", checkScroll);
+    };
+  }, []);
+
+  return hasScrolledPast;
+};
+
+export default useScrolledPast;

app/src/components/Paginator.tsx

@@ -37,6 +37,8 @@ const Paginator = ({
   const goToLastPage = () => setPageParams({ page: lastPage }, "replace");
   const goToFirstPage = () => setPageParams({ page: 1 }, "replace");
 
+  if (count === 0) return null;
+
   return (
     <HStack
       pt={4}

app/src/components/experiments/ExperimentCard.tsx

@@ -14,21 +14,11 @@ import { formatTimePast } from "~/utils/dayjs";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { BsPlusSquare } from "react-icons/bs";
-import { api } from "~/utils/api";
+import { RouterOutputs, api } from "~/utils/api";
 import { useHandledAsyncCallback } from "~/utils/hooks";
 import { useAppStore } from "~/state/store";
 
-type ExperimentData = {
+export const ExperimentCard = ({ exp }: { exp: RouterOutputs["experiments"]["list"][0] }) => {
-  testScenarioCount: number;
-  promptVariantCount: number;
-  id: string;
-  label: string;
-  sortIndex: number;
-  createdAt: Date;
-  updatedAt: Date;
-};
-
-export const ExperimentCard = ({ exp }: { exp: ExperimentData }) => {
   return (
     <Card
       w="full"
@@ -45,7 +35,7 @@ export const ExperimentCard = ({ exp }: { exp: ExperimentData }) => {
         as={Link}
         w="full"
         h="full"
-        href={{ pathname: "/experiments/[id]", query: { id: exp.id } }}
+        href={{ pathname: "/experiments/[experimentSlug]", query: { experimentSlug: exp.slug } }}
         justify="space-between"
       >
         <HStack w="full" color="gray.700" justify="center">
@@ -89,8 +79,8 @@ export const NewExperimentCard = () => {
       projectId: selectedProjectId ?? "",
     });
     await router.push({
-      pathname: "/experiments/[id]",
+      pathname: "/experiments/[experimentSlug]",
-      query: { id: newExperiment.id },
+      query: { experimentSlug: newExperiment.slug },
     });
   }, [createMutation, router, selectedProjectId]);
 

app/src/components/experiments/ExperimentHeaderButtons/useOnForkButtonPressed.tsx

@@ -16,11 +16,14 @@ export const useOnForkButtonPressed = () => {
 
   const [onFork, isForking] = useHandledAsyncCallback(async () => {
     if (!experiment.data?.id || !selectedProjectId) return;
-    const forkedExperimentId = await forkMutation.mutateAsync({
+    const newExperiment = await forkMutation.mutateAsync({
       id: experiment.data.id,
       projectId: selectedProjectId,
     });
-    await router.push({ pathname: "/experiments/[id]", query: { id: forkedExperimentId } });
+    await router.push({
+      pathname: "/experiments/[experimentSlug]",
+      query: { experimentSlug: newExperiment.slug },
+    });
   }, [forkMutation, experiment.data?.id, router]);
 
   const onForkButtonPressed = useCallback(() => {

app/src/components/nav/ProjectMenu.tsx

@@ -15,7 +15,7 @@ import {
   Image,
   Box,
 } from "@chakra-ui/react";
-import React, { useEffect, useState } from "react";
+import { useEffect } from "react";
 import Link from "next/link";
 import { BsPlus, BsPersonCircle } from "react-icons/bs";
 import { type Project } from "@prisma/client";
@@ -67,7 +67,13 @@ export default function ProjectMenu() {
   );
 
   return (
-    <VStack w="full" alignItems="flex-start" spacing={0} py={1}>
+    <VStack
+      w="full"
+      alignItems="flex-start"
+      spacing={0}
+      py={1}
+      zIndex={popover.isOpen ? "dropdown" : undefined}
+    >
       <Popover
         placement="bottom"
         isOpen={popover.isOpen}
@@ -105,8 +111,8 @@ export default function ProjectMenu() {
         </PopoverTrigger>
         <PopoverContent
           _focusVisible={{ outline: "unset" }}
-          ml={-1}
+          w={220}
-          w={224}
+          ml={{ base: 2, md: 0 }}
           boxShadow="0 0 40px 4px rgba(0, 0, 0, 0.1);"
           fontSize="sm"
         >
@@ -176,7 +182,6 @@ const ProjectOption = ({
   onClose: () => void;
 }) => {
   const setSelectedProjectId = useAppStore((s) => s.setSelectedProjectId);
-  const [gearHovered, setGearHovered] = useState(false);
 
   return (
     <HStack
@@ -188,8 +193,8 @@ const ProjectOption = ({
       }}
       w="full"
       justifyContent="space-between"
-      _hover={gearHovered ? undefined : { bgColor: "gray.200", textDecoration: "none" }}
+      _hover={{ bgColor: "gray.200", textDecoration: "none" }}
-      color={isActive ? "blue.400" : undefined}
+      bgColor={isActive ? "gray.100" : undefined}
       py={2}
       px={4}
       borderRadius={4}

app/src/components/projectSettings/InviteMemberModal.tsx

@@ -0,0 +1,128 @@
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  FormHelperText,
+  HStack,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Spinner,
+  Text,
+  VStack,
+  RadioGroup,
+  Radio,
+} from "@chakra-ui/react";
+import { useState, useEffect } from "react";
+
+import { api } from "~/utils/api";
+import { useHandledAsyncCallback, useSelectedProject } from "~/utils/hooks";
+import { maybeReportError } from "~/utils/errorHandling/maybeReportError";
+import { type ProjectUserRole } from "@prisma/client";
+
+export const InviteMemberModal = ({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+}) => {
+  const selectedProject = useSelectedProject().data;
+  const utils = api.useContext();
+
+  const [email, setEmail] = useState("");
+  const [role, setRole] = useState<ProjectUserRole>("MEMBER");
+
+  useEffect(() => {
+    setEmail("");
+    setRole("MEMBER");
+  }, [isOpen]);
+
+  const emailIsValid = !email || !email.match(/.+@.+\..+/);
+
+  const inviteMemberMutation = api.users.inviteToProject.useMutation();
+
+  const [inviteMember, isInviting] = useHandledAsyncCallback(async () => {
+    if (!selectedProject?.id || !role) return;
+    const resp = await inviteMemberMutation.mutateAsync({
+      projectId: selectedProject.id,
+      email,
+      role,
+    });
+    if (maybeReportError(resp)) return;
+    await utils.projects.get.invalidate();
+    onClose();
+  }, [inviteMemberMutation, email, role, selectedProject?.id, onClose]);
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent w={1200}>
+        <ModalHeader>
+          <HStack>
+            <Text>Invite Member</Text>
+          </HStack>
+        </ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <VStack spacing={8} alignItems="flex-start">
+            <Text>
+              Invite a new member to <b>{selectedProject?.name}</b>.
+            </Text>
+
+            <RadioGroup
+              value={role}
+              onChange={(e) => setRole(e as ProjectUserRole)}
+              colorScheme="orange"
+            >
+              <VStack w="full" alignItems="flex-start">
+                <Radio value="MEMBER">
+                  <Text fontSize="sm">MEMBER</Text>
+                </Radio>
+                <Radio value="ADMIN">
+                  <Text fontSize="sm">ADMIN</Text>
+                </Radio>
+              </VStack>
+            </RadioGroup>
+            <FormControl>
+              <FormLabel>Email</FormLabel>
+              <Input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && (e.metaKey || e.ctrlKey || e.shiftKey)) {
+                    e.preventDefault();
+                    e.currentTarget.blur();
+                    inviteMember();
+                  }
+                }}
+              />
+              <FormHelperText>Enter the email of the person you want to invite.</FormHelperText>
+            </FormControl>
+          </VStack>
+        </ModalBody>
+        <ModalFooter mt={4}>
+          <HStack>
+            <Button colorScheme="gray" onClick={onClose} minW={24}>
+              <Text>Cancel</Text>
+            </Button>
+            <Button
+              colorScheme="orange"
+              onClick={inviteMember}
+              minW={24}
+              isDisabled={emailIsValid || isInviting}
+            >
+              {isInviting ? <Spinner boxSize={4} /> : <Text>Send Invitation</Text>}
+            </Button>
+          </HStack>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};

app/src/components/projectSettings/MemberTable.tsx

@@ -0,0 +1,145 @@
+import { useMemo, useState } from "react";
+import {
+  Table,
+  Thead,
+  Tr,
+  Th,
+  Tbody,
+  Td,
+  IconButton,
+  useDisclosure,
+  Text,
+  Button,
+} from "@chakra-ui/react";
+import { useSession } from "next-auth/react";
+import { BsTrash } from "react-icons/bs";
+import { type User } from "@prisma/client";
+
+import { useHandledAsyncCallback, useSelectedProject } from "~/utils/hooks";
+import { InviteMemberModal } from "./InviteMemberModal";
+import { RemoveMemberDialog } from "./RemoveMemberDialog";
+import { api } from "~/utils/api";
+import { maybeReportError } from "~/utils/errorHandling/maybeReportError";
+
+const MemberTable = () => {
+  const selectedProject = useSelectedProject().data;
+  const session = useSession().data;
+
+  const utils = api.useContext();
+
+  const [memberToRemove, setMemberToRemove] = useState<User | null>(null);
+  const inviteMemberModal = useDisclosure();
+
+  const cancelInvitationMutation = api.users.cancelProjectInvitation.useMutation();
+
+  const [cancelInvitation, isCancelling] = useHandledAsyncCallback(
+    async (invitationToken: string) => {
+      if (!selectedProject?.id) return;
+      const resp = await cancelInvitationMutation.mutateAsync({
+        invitationToken,
+      });
+      if (maybeReportError(resp)) return;
+      await utils.projects.get.invalidate();
+    },
+    [selectedProject?.id, cancelInvitationMutation],
+  );
+
+  const sortedMembers = useMemo(() => {
+    if (!selectedProject?.projectUsers) return [];
+    return selectedProject.projectUsers.sort((a, b) => {
+      if (a.role === b.role) return a.createdAt < b.createdAt ? -1 : 1;
+      // Take advantage of fact that ADMIN is alphabetically before MEMBER
+      return a.role < b.role ? -1 : 1;
+    });
+  }, [selectedProject?.projectUsers]);
+
+  return (
+    <>
+      <Table fontSize={{ base: "sm", md: "md" }}>
+        <Thead
+          sx={{
+            th: {
+              base: { px: 0 },
+              md: { px: 6 },
+            },
+          }}
+        >
+          <Tr>
+            <Th>Name</Th>
+            <Th display={{ base: "none", md: "table-cell" }}>Email</Th>
+            <Th>Role</Th>
+            {selectedProject?.role === "ADMIN" && <Th />}
+          </Tr>
+        </Thead>
+        <Tbody
+          sx={{
+            td: {
+              base: { px: 0 },
+              md: { px: 6 },
+            },
+          }}
+        >
+          {selectedProject &&
+            sortedMembers.map((member) => {
+              return (
+                <Tr key={member.id}>
+                  <Td>
+                    <Text fontWeight="bold">{member.user.name}</Text>
+                  </Td>
+                  <Td display={{ base: "none", md: "table-cell" }} h="full">
+                    {member.user.email}
+                  </Td>
+                  <Td fontSize={{ base: "xs", md: "sm" }}>{member.role}</Td>
+                  {selectedProject.role === "ADMIN" && (
+                    <Td textAlign="end">
+                      {member.user.id !== session?.user?.id &&
+                        member.user.id !== selectedProject.personalProjectUserId && (
+                          <IconButton
+                            aria-label="Remove member"
+                            colorScheme="red"
+                            icon={<BsTrash />}
+                            onClick={() => setMemberToRemove(member.user)}
+                          />
+                        )}
+                    </Td>
+                  )}
+                </Tr>
+              );
+            })}
+          {selectedProject?.projectUserInvitations?.map((invitation) => {
+            return (
+              <Tr key={invitation.id}>
+                <Td>
+                  <Text as="i">Invitation pending</Text>
+                </Td>
+                <Td>{invitation.email}</Td>
+                <Td fontSize="sm">{invitation.role}</Td>
+                {selectedProject.role === "ADMIN" && (
+                  <Td textAlign="end">
+                    <Button
+                      size="sm"
+                      colorScheme="red"
+                      variant="ghost"
+                      onClick={() => cancelInvitation(invitation.invitationToken)}
+                      isLoading={isCancelling}
+                    >
+                      Cancel
+                    </Button>
+                  </Td>
+                )}
+              </Tr>
+            );
+          })}
+        </Tbody>
+      </Table>
+      <InviteMemberModal isOpen={inviteMemberModal.isOpen} onClose={inviteMemberModal.onClose} />
+      <RemoveMemberDialog
+        member={memberToRemove}
+        isOpen={!!memberToRemove}
+        onClose={() => setMemberToRemove(null)}
+      />
+    </>
+  );
+};
+
+export default MemberTable;

app/src/components/projectSettings/RemoveMemberDialog.tsx

@@ -0,0 +1,71 @@
+import {
+  Button,
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogContent,
+  AlertDialogOverlay,
+  Text,
+  VStack,
+  Spinner,
+} from "@chakra-ui/react";
+import { type User } from "@prisma/client";
+
+import { useRouter } from "next/router";
+import { useRef } from "react";
+import { api } from "~/utils/api";
+import { useHandledAsyncCallback, useSelectedProject } from "~/utils/hooks";
+
+export const RemoveMemberDialog = ({
+  isOpen,
+  onClose,
+  member,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  member: User | null;
+}) => {
+  const selectedProject = useSelectedProject();
+  const removeUserMutation = api.users.removeUserFromProject.useMutation();
+  const utils = api.useContext();
+  const router = useRouter();
+
+  const cancelRef = useRef<HTMLButtonElement>(null);
+
+  const [onRemoveConfirm, isRemoving] = useHandledAsyncCallback(async () => {
+    if (!selectedProject.data?.id || !member?.id) return;
+    await removeUserMutation.mutateAsync({ projectId: selectedProject.data.id, userId: member.id });
+    await utils.projects.get.invalidate();
+    onClose();
+  }, [removeUserMutation, selectedProject, router]);
+
+  return (
+    <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
+      <AlertDialogOverlay>
+        <AlertDialogContent>
+          <AlertDialogHeader fontSize="lg" fontWeight="bold">
+            Remove Member
+          </AlertDialogHeader>
+
+          <AlertDialogBody>
+            <VStack spacing={4} alignItems="flex-start">
+              <Text>
+                Are you sure you want to remove <b>{member?.name}</b> from the project?
+              </Text>
+            </VStack>
+          </AlertDialogBody>
+
+          <AlertDialogFooter>
+            <Button ref={cancelRef} onClick={onClose}>
+              Cancel
+            </Button>
+            <Button colorScheme="red" onClick={onRemoveConfirm} ml={3} w={20}>
+              {isRemoving ? <Spinner /> : "Remove"}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialogOverlay>
+    </AlertDialog>
+  );
+};

app/src/components/requestLogs/LogFilters/AddFilterButton.tsx

@@ -0,0 +1,30 @@
+import { Button, HStack, Icon, Text } from "@chakra-ui/react";
+import { BsPlus } from "react-icons/bs";
+import { comparators, defaultFilterableFields } from "~/state/logFiltersSlice";
+import { useAppStore } from "~/state/store";
+
+const AddFilterButton = () => {
+  const addFilter = useAppStore((s) => s.logFilters.addFilter);
+
+  return (
+    <HStack
+      as={Button}
+      variant="ghost"
+      onClick={() =>
+        addFilter({
+          id: Date.now().toString(),
+          field: defaultFilterableFields[0],
+          comparator: comparators[0],
+          value: "",
+        })
+      }
+      spacing={0}
+      fontSize="sm"
+    >
+      <Icon as={BsPlus} boxSize={5} />
+      <Text>Add Filter</Text>
+    </HStack>
+  );
+};
+
+export default AddFilterButton;

app/src/components/requestLogs/LogFilters/LogFilter.tsx

@@ -0,0 +1,44 @@
+import { useCallback, useState } from "react";
+import { HStack, IconButton, Input } from "@chakra-ui/react";
+import { BsTrash } from "react-icons/bs";
+
+import { type LogFilter } from "~/state/logFiltersSlice";
+import { useAppStore } from "~/state/store";
+import { debounce } from "lodash-es";
+import SelectFieldDropdown from "./SelectFieldDropdown";
+import SelectComparatorDropdown from "./SelectComparatorDropdown";
+
+const LogFilter = ({ filter }: { filter: LogFilter }) => {
+  const updateFilter = useAppStore((s) => s.logFilters.updateFilter);
+  const deleteFilter = useAppStore((s) => s.logFilters.deleteFilter);
+
+  const [editedValue, setEditedValue] = useState(filter.value);
+
+  const debouncedUpdateFilter = useCallback(
+    debounce((filter: LogFilter) => updateFilter(filter), 500, {
+      leading: true,
+    }),
+    [updateFilter],
+  );
+
+  return (
+    <HStack>
+      <SelectFieldDropdown filter={filter} />
+      <SelectComparatorDropdown filter={filter} />
+      <Input
+        value={editedValue}
+        onChange={(e) => {
+          setEditedValue(e.target.value);
+          debouncedUpdateFilter({ ...filter, value: e.target.value });
+        }}
+      />
+      <IconButton
+        aria-label="Delete Filter"
+        icon={<BsTrash />}
+        onClick={() => deleteFilter(filter.id)}
+      />
+    </HStack>
+  );
+};
+
+export default LogFilter;

app/src/components/requestLogs/LogFilters/LogFilters.tsx

@@ -0,0 +1,30 @@
+import { VStack, Text } from "@chakra-ui/react";
+
+import AddFilterButton from "./AddFilterButton";
+import { useAppStore } from "~/state/store";
+import LogFilter from "./LogFilter";
+
+const LogFilters = () => {
+  const filters = useAppStore((s) => s.logFilters.filters);
+  return (
+    <VStack
+      bgColor="white"
+      borderRadius={8}
+      borderWidth={1}
+      w="full"
+      alignItems="flex-start"
+      p={4}
+      spacing={4}
+    >
+      <Text fontWeight="bold" color="gray.500">
+        Filters
+      </Text>
+      {filters.map((filter) => (
+        <LogFilter key={filter.id} filter={filter} />
+      ))}
+      <AddFilterButton />
+    </VStack>
+  );
+};
+
+export default LogFilters;

app/src/components/requestLogs/LogFilters/SelectComparatorDropdown.tsx

@@ -0,0 +1,19 @@
+import { comparators, type LogFilter } from "~/state/logFiltersSlice";
+import { useAppStore } from "~/state/store";
+import InputDropdown from "~/components/InputDropdown";
+
+const SelectComparatorDropdown = ({ filter }: { filter: LogFilter }) => {
+  const updateFilter = useAppStore((s) => s.logFilters.updateFilter);
+
+  const { comparator } = filter;
+
+  return (
+    <InputDropdown
+      options={comparators}
+      selectedOption={comparator}
+      onSelect={(option) => updateFilter({ ...filter, comparator: option })}
+    />
+  );
+};
+
+export default SelectComparatorDropdown;

app/src/components/requestLogs/LogFilters/SelectFieldDropdown.tsx

@@ -0,0 +1,22 @@
+import { defaultFilterableFields, type LogFilter } from "~/state/logFiltersSlice";
+import { useAppStore } from "~/state/store";
+import { useTagNames } from "~/utils/hooks";
+import InputDropdown from "~/components/InputDropdown";
+
+const SelectFieldDropdown = ({ filter }: { filter: LogFilter }) => {
+  const tagNames = useTagNames().data;
+
+  const updateFilter = useAppStore((s) => s.logFilters.updateFilter);
+
+  const { field } = filter;
+
+  return (
+    <InputDropdown
+      options={[...defaultFilterableFields, ...(tagNames || [])]}
+      selectedOption={field}
+      onSelect={(option) => updateFilter({ ...filter, field: option })}
+    />
+  );
+};
+
+export default SelectFieldDropdown;

app/src/components/requestLogs/LoggedCallsTable.tsx

@@ -5,14 +5,14 @@ import { TableHeader, TableRow } from "./TableRow";
 
 export default function LoggedCallsTable() {
   const [expandedRow, setExpandedRow] = useState<string | null>(null);
-  const { data: loggedCalls } = useLoggedCalls();
+  const loggedCalls = useLoggedCalls().data;
 
   return (
-    <Card width="100%" overflow="hidden">
+    <Card width="100%" overflowX="auto">
       <Table>
         <TableHeader showCheckbox />
         <Tbody>
-          {loggedCalls?.calls.map((loggedCall) => {
+          {loggedCalls?.calls?.map((loggedCall) => {
             return (
               <TableRow
                 key={loggedCall.id}

app/src/components/requestLogs/TableRow.tsx

@@ -21,7 +21,7 @@ import Link from "next/link";
 import { type RouterOutputs } from "~/utils/api";
 import { FormattedJson } from "./FormattedJson";
 import { useAppStore } from "~/state/store";
-import { useLoggedCalls } from "~/utils/hooks";
+import { useLoggedCalls, useTagNames } from "~/utils/hooks";
 import { useMemo } from "react";
 
 dayjs.extend(relativeTime);
@@ -34,27 +34,32 @@ export const TableHeader = ({ showCheckbox }: { showCheckbox?: boolean }) => {
   const addAll = useAppStore((s) => s.selectedLogs.addSelectedLogIds);
   const clearAll = useAppStore((s) => s.selectedLogs.clearSelectedLogIds);
   const allSelected = useMemo(() => {
-    if (!matchingLogIds) return false;
+    if (!matchingLogIds || !matchingLogIds.length) return false;
     return matchingLogIds.every((id) => selectedLogIds.has(id));
   }, [selectedLogIds, matchingLogIds]);
+  const tagNames = useTagNames().data;
   return (
     <Thead>
       <Tr>
         {showCheckbox && (
-          <Th>
+          <Th pr={0}>
-            <HStack w={8}>
+            <HStack minW={16}>
               <Checkbox
                 isChecked={allSelected}
                 onChange={() => {
                   allSelected ? clearAll() : addAll(matchingLogIds || []);
                 }}
               />
-              <Text>({selectedLogIds.size})</Text>
+              <Text>
+                ({selectedLogIds.size ? `${selectedLogIds.size}/` : ""}
+                {matchingLogIds?.length || 0})
+              </Text>
             </HStack>
           </Th>
         )}
-        <Th>Time</Th>
+        <Th>Sent At</Th>
         <Th>Model</Th>
+        {tagNames?.map((tagName) => <Th key={tagName}>{tagName}</Th>)}
         <Th isNumeric>Duration</Th>
         <Th isNumeric>Input tokens</Th>
         <Th isNumeric>Output tokens</Th>
@@ -76,22 +81,14 @@ export const TableRow = ({
   showCheckbox?: boolean;
 }) => {
   const isError = loggedCall.modelResponse?.statusCode !== 200;
-  const timeAgo = dayjs(loggedCall.requestedAt).fromNow();
+  const requestedAt = dayjs(loggedCall.requestedAt).format("MMMM D h:mm A");
   const fullTime = dayjs(loggedCall.requestedAt).toString();
 
-  const durationCell = (
-    <Td isNumeric>
-      {loggedCall.cacheHit ? (
-        <Text color="gray.500">Cached</Text>
-      ) : (
-        ((loggedCall.modelResponse?.durationMs ?? 0) / 1000).toFixed(2) + "s"
-      )}
-    </Td>
-  );
-
   const isChecked = useAppStore((s) => s.selectedLogs.selectedLogIds.has(loggedCall.id));
   const toggleChecked = useAppStore((s) => s.selectedLogs.toggleSelectedLogId);
 
+  const tagNames = useTagNames().data;
+
   return (
     <>
       <Tr
@@ -101,6 +98,7 @@ export const TableRow = ({
         sx={{
           "> td": { borderBottom: "none" },
         }}
+        fontSize="sm"
       >
         {showCheckbox && (
           <Td>
@@ -110,11 +108,11 @@ export const TableRow = ({
         <Td>
           <Tooltip label={fullTime} placement="top">
             <Box whiteSpace="nowrap" minW="120px">
-              {timeAgo}
+              {requestedAt}
             </Box>
           </Tooltip>
         </Td>
-        <Td width="100%">
+        <Td>
           <HStack justifyContent="flex-start">
             <Text
               colorScheme="purple"
@@ -124,12 +122,20 @@ export const TableRow = ({
               borderRadius={4}
               borderWidth={1}
               fontSize="xs"
+              whiteSpace="nowrap"
             >
               {loggedCall.model}
             </Text>
           </HStack>
         </Td>
-        {durationCell}
+        {tagNames?.map((tagName) => <Td key={tagName}>{loggedCall.tags[tagName]}</Td>)}
+        <Td isNumeric>
+          {loggedCall.cacheHit ? (
+            <Text color="gray.500">Cached</Text>
+          ) : (
+            ((loggedCall.modelResponse?.durationMs ?? 0) / 1000).toFixed(2) + "s"
+          )}
+        </Td>
         <Td isNumeric>{loggedCall.modelResponse?.inputTokens}</Td>
         <Td isNumeric>{loggedCall.modelResponse?.outputTokens}</Td>
         <Td sx={{ color: isError ? "red.500" : "green.500", fontWeight: "semibold" }} isNumeric>

app/src/env.mjs

@@ -21,6 +21,11 @@ export const env = createEnv({
     ANTHROPIC_API_KEY: z.string().default("placeholder"),
     SENTRY_AUTH_TOKEN: z.string().optional(),
     OPENPIPE_API_KEY: z.string().optional(),
+    SENDER_EMAIL: z.string().default("placeholder"),
+    SMTP_HOST: z.string().default("placeholder"),
+    SMTP_PORT: z.string().default("placeholder"),
+    SMTP_LOGIN: z.string().default("placeholder"),
+    SMTP_PASSWORD: z.string().default("placeholder"),
   },
 
   /**
@@ -58,6 +63,11 @@ export const env = createEnv({
     SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
     OPENPIPE_API_KEY: process.env.OPENPIPE_API_KEY,
     NEXT_PUBLIC_FF_SHOW_LOGGED_CALLS: process.env.NEXT_PUBLIC_FF_SHOW_LOGGED_CALLS,
+    SENDER_EMAIL: process.env.SENDER_EMAIL,
+    SMTP_HOST: process.env.SMTP_HOST,
+    SMTP_PORT: process.env.SMTP_PORT,
+    SMTP_LOGIN: process.env.SMTP_LOGIN,
+    SMTP_PASSWORD: process.env.SMTP_PASSWORD,
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.

app/src/modelProviders/frontendModelProviders.ts

@@ -1,6 +1,7 @@
 import openaiChatCompletionFrontend from "./openai-ChatCompletion/frontend";
 import replicateLlama2Frontend from "./replicate-llama2/frontend";
 import anthropicFrontend from "./anthropic-completion/frontend";
+import openpipeFrontend from "./openpipe-chat/frontend";
 import { type SupportedProvider, type FrontendModelProvider } from "./types";
 
 // Keep attributes here that need to be accessible from the frontend. We can't
@@ -10,6 +11,7 @@ const frontendModelProviders: Record<SupportedProvider, FrontendModelProvider<an
   "openai/ChatCompletion": openaiChatCompletionFrontend,
   "replicate/llama2": replicateLlama2Frontend,
   "anthropic/completion": anthropicFrontend,
+  "openpipe/Chat": openpipeFrontend,
 };
 
 export default frontendModelProviders;

app/src/modelProviders/modelProviders.ts

@@ -1,12 +1,14 @@
 import openaiChatCompletion from "./openai-ChatCompletion";
 import replicateLlama2 from "./replicate-llama2";
 import anthropicCompletion from "./anthropic-completion";
+import openpipeChatCompletion from "./openpipe-chat";
 import { type SupportedProvider, type ModelProvider } from "./types";
 
 const modelProviders: Record<SupportedProvider, ModelProvider<any, any, any>> = {
   "openai/ChatCompletion": openaiChatCompletion,
   "replicate/llama2": replicateLlama2,
   "anthropic/completion": anthropicCompletion,
+  "openpipe/Chat": openpipeChatCompletion,
 };
 
 export default modelProviders;

app/src/modelProviders/openai-ChatCompletion/refinementActions.ts

@@ -12,7 +12,6 @@ export const refinementActions: Record<string, RefinementAction> = {
   
       definePrompt("openai/ChatCompletion", {
           model: "gpt-4",
-          stream: true,
           messages: [
               {
               role: "system",
@@ -29,7 +28,6 @@ export const refinementActions: Record<string, RefinementAction> = {
   
       definePrompt("openai/ChatCompletion", {
           model: "gpt-4",
-          stream: true,
           messages: [
               {
               role: "system",
@@ -126,7 +124,6 @@ export const refinementActions: Record<string, RefinementAction> = {
   
       definePrompt("openai/ChatCompletion", {
         model: "gpt-4",
-        stream: true,
         messages: [
           {
             role: "system",
@@ -143,7 +140,6 @@ export const refinementActions: Record<string, RefinementAction> = {
   
       definePrompt("openai/ChatCompletion", {
         model: "gpt-4",
-        stream: true,
         messages: [
           {
             role: "system",
@@ -237,7 +233,6 @@ export const refinementActions: Record<string, RefinementAction> = {
   
       definePrompt("openai/ChatCompletion", {
         model: "gpt-3.5-turbo",
-        stream: true,
         messages: [
           {
             role: "system",

app/src/modelProviders/openpipe-chat/frontend.ts

@@ -0,0 +1,98 @@
+import { type OpenpipeChatOutput, type SupportedModel } from ".";
+import { type FrontendModelProvider } from "../types";
+import { refinementActions } from "./refinementActions";
+import {
+  templateOpenOrcaPrompt,
+  templateAlpacaInstructPrompt,
+  //   templateSystemUserAssistantPrompt,
+  templateInstructionInputResponsePrompt,
+  templateAiroborosPrompt,
+  templateGryphePrompt,
+  templateVicunaPrompt,
+} from "./templatePrompt";
+
+const frontendModelProvider: FrontendModelProvider<SupportedModel, OpenpipeChatOutput> = {
+  name: "OpenAI ChatCompletion",
+
+  models: {
+    "Open-Orca/OpenOrcaxOpenChat-Preview2-13B": {
+      name: "OpenOrcaxOpenChat-Preview2-13B",
+      contextWindow: 4096,
+      pricePerSecond: 0.0003,
+      speed: "medium",
+      provider: "openpipe/Chat",
+      learnMoreUrl: "https://huggingface.co/Open-Orca/OpenOrcaxOpenChat-Preview2-13B",
+      templatePrompt: templateOpenOrcaPrompt,
+    },
+    "Open-Orca/OpenOrca-Platypus2-13B": {
+      name: "OpenOrca-Platypus2-13B",
+      contextWindow: 4096,
+      pricePerSecond: 0.0003,
+      speed: "medium",
+      provider: "openpipe/Chat",
+      learnMoreUrl: "https://huggingface.co/Open-Orca/OpenOrca-Platypus2-13B",
+      templatePrompt: templateAlpacaInstructPrompt,
+      defaultStopTokens: ["</s>"],
+    },
+    // "stabilityai/StableBeluga-13B": {
+    //   name: "StableBeluga-13B",
+    //   contextWindow: 4096,
+    //   pricePerSecond: 0.0003,
+    //   speed: "medium",
+    //   provider: "openpipe/Chat",
+    //   learnMoreUrl: "https://huggingface.co/stabilityai/StableBeluga-13B",
+    //   templatePrompt: templateSystemUserAssistantPrompt,
+    // },
+    "NousResearch/Nous-Hermes-Llama2-13b": {
+      name: "Nous-Hermes-Llama2-13b",
+      contextWindow: 4096,
+      pricePerSecond: 0.0003,
+      speed: "medium",
+      provider: "openpipe/Chat",
+      learnMoreUrl: "https://huggingface.co/NousResearch/Nous-Hermes-Llama2-13b",
+      templatePrompt: templateInstructionInputResponsePrompt,
+    },
+    "jondurbin/airoboros-l2-13b-gpt4-2.0": {
+      name: "airoboros-l2-13b-gpt4-2.0",
+      contextWindow: 4096,
+      pricePerSecond: 0.0003,
+      speed: "medium",
+      provider: "openpipe/Chat",
+      learnMoreUrl: "https://huggingface.co/jondurbin/airoboros-l2-13b-gpt4-2.0",
+      templatePrompt: templateAiroborosPrompt,
+    },
+    "lmsys/vicuna-13b-v1.5": {
+      name: "vicuna-13b-v1.5",
+      contextWindow: 4096,
+      pricePerSecond: 0.0003,
+      speed: "medium",
+      provider: "openpipe/Chat",
+      learnMoreUrl: "https://huggingface.co/lmsys/vicuna-13b-v1.5",
+      templatePrompt: templateVicunaPrompt,
+    },
+    "Gryphe/MythoMax-L2-13b": {
+      name: "MythoMax-L2-13b",
+      contextWindow: 4096,
+      pricePerSecond: 0.0003,
+      speed: "medium",
+      provider: "openpipe/Chat",
+      learnMoreUrl: "https://huggingface.co/Gryphe/MythoMax-L2-13b",
+      templatePrompt: templateGryphePrompt,
+    },
+    "NousResearch/Nous-Hermes-llama-2-7b": {
+      name: "Nous-Hermes-llama-2-7b",
+      contextWindow: 4096,
+      pricePerSecond: 0.0003,
+      speed: "medium",
+      provider: "openpipe/Chat",
+      learnMoreUrl: "https://huggingface.co/NousResearch/Nous-Hermes-llama-2-7b",
+      templatePrompt: templateInstructionInputResponsePrompt,
+    },
+  },
+
+  refinementActions,
+
+  normalizeOutput: (output) => ({ type: "text", value: output }),
+};
+
+export default frontendModelProvider;

app/src/modelProviders/openpipe-chat/getCompletion.ts

@@ -0,0 +1,121 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import { isArray, isString } from "lodash-es";
+import OpenAI, { APIError } from "openai";
+
+import { type CompletionResponse } from "../types";
+import { type OpenpipeChatInput, type OpenpipeChatOutput } from ".";
+import frontendModelProvider from "./frontend";
+
+const modelEndpoints: Record<OpenpipeChatInput["model"], string> = {
+  "Open-Orca/OpenOrcaxOpenChat-Preview2-13B": "https://5ef82gjxk8kdys-8000.proxy.runpod.net/v1",
+  "Open-Orca/OpenOrca-Platypus2-13B": "https://lt5qlel6qcji8t-8000.proxy.runpod.net/v1",
+  // "stabilityai/StableBeluga-13B": "https://vcorl8mxni2ou1-8000.proxy.runpod.net/v1",
+  "NousResearch/Nous-Hermes-Llama2-13b": "https://ncv8pw3u0vb8j2-8000.proxy.runpod.net/v1",
+  "jondurbin/airoboros-l2-13b-gpt4-2.0": "https://9nrbx7oph4btou-8000.proxy.runpod.net/v1",
+  "lmsys/vicuna-13b-v1.5": "https://h88hkt3ux73rb7-8000.proxy.runpod.net/v1",
+  "Gryphe/MythoMax-L2-13b": "https://3l5jvhnxdgky3v-8000.proxy.runpod.net/v1",
+  "NousResearch/Nous-Hermes-llama-2-7b": "https://ua1bpc6kv3dgge-8000.proxy.runpod.net/v1",
+};
+
+export async function getCompletion(
+  input: OpenpipeChatInput,
+  onStream: ((partialOutput: OpenpipeChatOutput) => void) | null,
+): Promise<CompletionResponse<OpenpipeChatOutput>> {
+  const { model, messages, ...rest } = input;
+
+  const templatedPrompt = frontendModelProvider.models[model].templatePrompt?.(messages);
+
+  if (!templatedPrompt) {
+    return {
+      type: "error",
+      message: "Failed to generate prompt",
+      autoRetry: false,
+    };
+  }
+
+  const openai = new OpenAI({
+    baseURL: modelEndpoints[model],
+  });
+  const start = Date.now();
+  let finalCompletion: OpenpipeChatOutput = "";
+
+  const completionParams = {
+    model,
+    prompt: templatedPrompt,
+    ...rest,
+  };
+
+  if (!completionParams.stop && frontendModelProvider.models[model].defaultStopTokens) {
+    completionParams.stop = frontendModelProvider.models[model].defaultStopTokens;
+  }
+
+  try {
+    if (onStream) {
+      const resp = await openai.completions.create(
+        { ...completionParams, stream: true },
+        {
+          maxRetries: 0,
+        },
+      );
+
+      for await (const part of resp) {
+        finalCompletion += part.choices[0]?.text;
+        onStream(finalCompletion);
+      }
+      if (!finalCompletion) {
+        return {
+          type: "error",
+          message: "Streaming failed to return a completion",
+          autoRetry: false,
+        };
+      }
+    } else {
+      const resp = await openai.completions.create(
+        { ...completionParams, stream: false },
+        {
+          maxRetries: 0,
+        },
+      );
+      finalCompletion = resp.choices[0]?.text || "";
+      if (!finalCompletion) {
+        return {
+          type: "error",
+          message: "Failed to return a completion",
+          autoRetry: false,
+        };
+      }
+    }
+    const timeToComplete = Date.now() - start;
+
+    return {
+      type: "success",
+      statusCode: 200,
+      value: finalCompletion,
+      timeToComplete,
+    };
+  } catch (error: unknown) {
+    if (error instanceof APIError) {
+      // The types from the sdk are wrong
+      const rawMessage = error.message as string | string[];
+      // If the message is not a string, stringify it
+      const message = isString(rawMessage)
+        ? rawMessage
+        : isArray(rawMessage)
+        ? rawMessage.map((m) => m.toString()).join("\n")
+        : (rawMessage as any).toString();
+      return {
+        type: "error",
+        message,
+        autoRetry: error.status === 429 || error.status === 503,
+        statusCode: error.status,
+      };
+    } else {
+      console.error(error);
+      return {
+        type: "error",
+        message: (error as Error).message,
+        autoRetry: true,
+      };
+    }
+  }
+}

app/src/modelProviders/openpipe-chat/index.ts

@@ -0,0 +1,54 @@
+import { type JSONSchema4 } from "json-schema";
+import { type ModelProvider } from "../types";
+import inputSchema from "./input.schema.json";
+import { getCompletion } from "./getCompletion";
+import frontendModelProvider from "./frontend";
+
+const supportedModels = [
+  "Open-Orca/OpenOrcaxOpenChat-Preview2-13B",
+  "Open-Orca/OpenOrca-Platypus2-13B",
+  // "stabilityai/StableBeluga-13B",
+  "NousResearch/Nous-Hermes-Llama2-13b",
+  "jondurbin/airoboros-l2-13b-gpt4-2.0",
+  "lmsys/vicuna-13b-v1.5",
+  "Gryphe/MythoMax-L2-13b",
+  "NousResearch/Nous-Hermes-llama-2-7b",
+] as const;
+
+export type SupportedModel = (typeof supportedModels)[number];
+
+export type OpenpipeChatInput = {
+  model: SupportedModel;
+  messages: {
+    role: "system" | "user" | "assistant";
+    content: string;
+  }[];
+  temperature?: number;
+  top_p?: number;
+  stop?: string[] | string;
+  max_tokens?: number;
+  presence_penalty?: number;
+  frequency_penalty?: number;
+};
+
+export type OpenpipeChatOutput = string;
+
+export type OpenpipeChatModelProvider = ModelProvider<
+  SupportedModel,
+  OpenpipeChatInput,
+  OpenpipeChatOutput
+>;
+
+const modelProvider: OpenpipeChatModelProvider = {
+  getModel: (input) => input.model,
+  inputSchema: inputSchema as JSONSchema4,
+  canStream: true,
+  getCompletion,
+  getUsage: (input, output) => {
+    // TODO: Implement this
+    return null;
+  },
+  ...frontendModelProvider,
+};
+
+export default modelProvider;

app/src/modelProviders/openpipe-chat/input.schema.json

@@ -0,0 +1,96 @@
+{
+  "type": "object",
+  "properties": {
+    "model": {
+      "description": "ID of the model to use.",
+      "example": "Open-Orca/OpenOrcaxOpenChat-Preview2-13B",
+      "type": "string",
+      "enum": [
+        "Open-Orca/OpenOrcaxOpenChat-Preview2-13B",
+        "Open-Orca/OpenOrca-Platypus2-13B",
+        "NousResearch/Nous-Hermes-Llama2-13b",
+        "jondurbin/airoboros-l2-13b-gpt4-2.0",
+        "lmsys/vicuna-13b-v1.5",
+        "Gryphe/MythoMax-L2-13b",
+        "NousResearch/Nous-Hermes-llama-2-7b"
+      ]
+    },
+    "messages": {
+      "description": "A list of messages comprising the conversation so far.",
+      "type": "array",
+      "minItems": 1,
+      "items": {
+        "type": "object",
+        "properties": {
+          "role": {
+            "type": "string",
+            "enum": ["system", "user", "assistant"],
+            "description": "The role of the messages author. One of `system`, `user`, or `assistant`."
+          },
+          "content": {
+            "type": "string",
+            "description": "The contents of the message. `content` is required for all messages."
+          }
+        },
+        "required": ["role", "content"]
+      }
+    },
+    "temperature": {
+      "type": "number",
+      "minimum": 0,
+      "maximum": 2,
+      "default": 1,
+      "example": 1,
+      "nullable": true,
+      "description": "What sampling temperature to use, between 0 and 2. Higher values like 0.8 will make the output more random, while lower values like 0.2 will make it more focused and deterministic.\n\nWe generally recommend altering this or `top_p` but not both.\n"
+    },
+    "top_p": {
+      "type": "number",
+      "minimum": 0,
+      "maximum": 1,
+      "default": 1,
+      "example": 1,
+      "nullable": true,
+      "description": "An alternative to sampling with temperature, called nucleus sampling, where the model considers the results of the tokens with top_p probability mass. So 0.1 means only the tokens comprising the top 10% probability mass are considered.\n\nWe generally recommend altering this or `temperature` but not both.\n"
+    },
+    "stop": {
+      "description": "Up to 4 sequences where the API will stop generating further tokens.\n",
+      "default": null,
+      "oneOf": [
+        {
+          "type": "string",
+          "nullable": true
+        },
+        {
+          "type": "array",
+          "minItems": 1,
+          "maxItems": 4,
+          "items": {
+            "type": "string"
+          }
+        }
+      ]
+    },
+    "max_tokens": {
+      "description": "The maximum number of [tokens](/tokenizer) to generate in the chat completion.\n\nThe total length of input tokens and generated tokens is limited by the model's context length. [Example Python code](https://github.com/openai/openai-cookbook/blob/main/examples/How_to_count_tokens_with_tiktoken.ipynb) for counting tokens.\n",
+      "type": "integer"
+    },
+    "presence_penalty": {
+      "type": "number",
+      "default": 0,
+      "minimum": -2,
+      "maximum": 2,
+      "nullable": true,
+      "description": "Number between -2.0 and 2.0. Positive values penalize new tokens based on whether they appear in the text so far, increasing the model's likelihood to talk about new topics.\n\n[See more information about frequency and presence penalties.](/docs/api-reference/parameter-details)\n"
+    },
+    "frequency_penalty": {
+      "type": "number",
+      "default": 0,
+      "minimum": -2,
+      "maximum": 2,
+      "nullable": true,
+      "description": "Number between -2.0 and 2.0. Positive values penalize new tokens based on their existing frequency in the text so far, decreasing the model's likelihood to repeat the same line verbatim.\n\n[See more information about frequency and presence penalties.](/docs/api-reference/parameter-details)\n"
+    }
+  },
+  "required": ["model", "messages"]
+}

app/src/modelProviders/openpipe-chat/refinementActions.ts

@@ -0,0 +1,3 @@
+import { type RefinementAction } from "../types";
+
+export const refinementActions: Record<string, RefinementAction> = {};

app/src/modelProviders/openpipe-chat/templatePrompt.ts

@@ -0,0 +1,274 @@
+import { type OpenpipeChatInput } from ".";
+
+// User: Hello<|end_of_turn|>Assistant: Hi<|end_of_turn|>User: How are you today?<|end_of_turn|>Assistant:
+export const templateOpenOrcaPrompt = (messages: OpenpipeChatInput["messages"]) => {
+  const splitter = "<|end_of_turn|>";
+
+  const formattedMessages = messages.map((message) => {
+    if (message.role === "system" || message.role === "user") {
+      return "User: " + message.content;
+    } else {
+      return "Assistant: " + message.content;
+    }
+  });
+
+  let prompt = formattedMessages.join(splitter);
+
+  // Ensure that the prompt ends with an assistant message
+  const lastUserIndex = prompt.lastIndexOf("User:");
+  const lastAssistantIndex = prompt.lastIndexOf("Assistant:");
+  if (lastUserIndex > lastAssistantIndex) {
+    prompt += splitter + "Assistant:";
+  }
+
+  return prompt;
+};
+
+// ### Instruction:
+
+// <prompt> (without the <>)
+
+// ### Response: (leave two newlines for model to respond)
+export const templateAlpacaInstructPrompt = (messages: OpenpipeChatInput["messages"]) => {
+  const splitter = "\n\n";
+
+  const userTag = "### Instruction:\n\n";
+  const assistantTag = "### Response:\n\n";
+
+  const formattedMessages = messages.map((message) => {
+    if (message.role === "system" || message.role === "user") {
+      return userTag + message.content;
+    } else {
+      return assistantTag + message.content;
+    }
+  });
+
+  let prompt = formattedMessages.join(splitter);
+
+  // Ensure that the prompt ends with an assistant message
+  const lastUserIndex = prompt.lastIndexOf(userTag);
+  const lastAssistantIndex = prompt.lastIndexOf(assistantTag);
+  if (lastUserIndex > lastAssistantIndex) {
+    prompt += splitter + assistantTag;
+  }
+
+  return prompt;
+};
+
+// ### System:
+// This is a system prompt, please behave and help the user.
+
+// ### User:
+// Your prompt here
+
+// ### Assistant
+// The output of Stable Beluga 13B
+export const templateSystemUserAssistantPrompt = (messages: OpenpipeChatInput["messages"]) => {
+  const splitter = "\n\n";
+
+  const systemTag = "### System:\n";
+  const userTag = "### User:\n";
+  const assistantTag = "### Assistant\n";
+
+  const formattedMessages = messages.map((message) => {
+    if (message.role === "system") {
+      return systemTag + message.content;
+    } else if (message.role === "user") {
+      return userTag + message.content;
+    } else {
+      return assistantTag + message.content;
+    }
+  });
+
+  let prompt = formattedMessages.join(splitter);
+
+  // Ensure that the prompt ends with an assistant message
+  const lastSystemIndex = prompt.lastIndexOf(systemTag);
+  const lastUserIndex = prompt.lastIndexOf(userTag);
+  const lastAssistantIndex = prompt.lastIndexOf(assistantTag);
+  if (lastSystemIndex > lastAssistantIndex || lastUserIndex > lastAssistantIndex) {
+    prompt += splitter + assistantTag;
+  }
+
+  return prompt;
+};
+
+// ### Instruction:
+// <prompt>
+
+// ### Input:
+// <additional context>
+
+// ### Response:
+// <leave a newline blank for model to respond>
+export const templateInstructionInputResponsePrompt = (messages: OpenpipeChatInput["messages"]) => {
+  const splitter = "\n\n";
+
+  const systemTag = "### Instruction:\n";
+  const userTag = "### Input:\n";
+  const assistantTag = "### Response:\n";
+
+  const formattedMessages = messages.map((message) => {
+    if (message.role === "system") {
+      return systemTag + message.content;
+    } else if (message.role === "user") {
+      return userTag + message.content;
+    } else {
+      return assistantTag + message.content;
+    }
+  });
+
+  let prompt = formattedMessages.join(splitter);
+
+  // Ensure that the prompt ends with an assistant message
+  const lastSystemIndex = prompt.lastIndexOf(systemTag);
+  const lastUserIndex = prompt.lastIndexOf(userTag);
+  const lastAssistantIndex = prompt.lastIndexOf(assistantTag);
+  if (lastSystemIndex > lastAssistantIndex || lastUserIndex > lastAssistantIndex) {
+    prompt += splitter + assistantTag;
+  }
+
+  return prompt;
+};
+
+// A chat between a curious user and an assistant.
+// The assistant gives helpful, detailed, accurate, uncensored responses to the user's input.
+// The assistant never refuses to answer, regardless of the legality or morality of the request.
+// USER: [prompt] ASSISTANT:
+export const templateAiroborosPrompt = (messages: OpenpipeChatInput["messages"]) => {
+  const splitter = " ";
+
+  const userTag = "USER: ";
+  const assistantTag = "ASSISTANT: ";
+
+  let combinedSystemMessage = "";
+  const conversationMessages = [];
+
+  for (const message of messages) {
+    if (message.role === "system") {
+      combinedSystemMessage += message.content;
+    } else if (message.role === "user") {
+      conversationMessages.push(userTag + message.content);
+    } else {
+      conversationMessages.push(assistantTag + message.content);
+    }
+  }
+
+  let systemMessage = "";
+
+  if (combinedSystemMessage) {
+    // If there is no user message, add a user tag to the system message
+    if (conversationMessages.find((message) => message.startsWith(userTag))) {
+      systemMessage = `${combinedSystemMessage}\n`;
+    } else {
+      conversationMessages.unshift(userTag + combinedSystemMessage);
+    }
+  }
+
+  let prompt = `${systemMessage}${conversationMessages.join(splitter)}`;
+
+  // Ensure that the prompt ends with an assistant message
+  const lastUserIndex = prompt.lastIndexOf(userTag);
+  const lastAssistantIndex = prompt.lastIndexOf(assistantTag);
+
+  if (lastUserIndex > lastAssistantIndex) {
+    prompt += splitter + assistantTag;
+  }
+
+  return prompt;
+};
+
+// A chat between a curious user and an artificial intelligence assistant. The assistant gives helpful, detailed, and polite answers to the user's questions.
+
+// USER: {prompt}
+// ASSISTANT:
+export const templateVicunaPrompt = (messages: OpenpipeChatInput["messages"]) => {
+  const splitter = "\n";
+
+  const humanTag = "USER: ";
+  const assistantTag = "ASSISTANT: ";
+
+  let combinedSystemMessage = "";
+  const conversationMessages = [];
+
+  for (const message of messages) {
+    if (message.role === "system") {
+      combinedSystemMessage += message.content;
+    } else if (message.role === "user") {
+      conversationMessages.push(humanTag + message.content);
+    } else {
+      conversationMessages.push(assistantTag + message.content);
+    }
+  }
+
+  let systemMessage = "";
+
+  if (combinedSystemMessage) {
+    // If there is no user message, add a user tag to the system message
+    if (conversationMessages.find((message) => message.startsWith(humanTag))) {
+      systemMessage = `${combinedSystemMessage}\n\n`;
+    } else {
+      conversationMessages.unshift(humanTag + combinedSystemMessage);
+    }
+  }
+
+  let prompt = `${systemMessage}${conversationMessages.join(splitter)}`;
+
+  // Ensure that the prompt ends with an assistant message
+  const lastHumanIndex = prompt.lastIndexOf(humanTag);
+  const lastAssistantIndex = prompt.lastIndexOf(assistantTag);
+  if (lastHumanIndex > lastAssistantIndex) {
+    prompt += splitter + assistantTag;
+  }
+
+  return prompt.trim();
+};
+
+// <System prompt/Character Card>
+
+// ### Instruction:
+// Your instruction or question here.
+// For roleplay purposes, I suggest the following - Write <CHAR NAME>'s next reply in a chat between <YOUR NAME> and <CHAR NAME>. Write a single reply only.
+
+// ### Response:
+export const templateGryphePrompt = (messages: OpenpipeChatInput["messages"]) => {
+  const splitter = "\n\n";
+
+  const instructionTag = "### Instruction:\n";
+  const responseTag = "### Response:\n";
+
+  let combinedSystemMessage = "";
+  const conversationMessages = [];
+
+  for (const message of messages) {
+    if (message.role === "system") {
+      combinedSystemMessage += message.content;
+    } else if (message.role === "user") {
+      conversationMessages.push(instructionTag + message.content);
+    } else {
+      conversationMessages.push(responseTag + message.content);
+    }
+  }
+
+  let systemMessage = "";
+
+  if (combinedSystemMessage) {
+    // If there is no user message, add a user tag to the system message
+    if (conversationMessages.find((message) => message.startsWith(instructionTag))) {
+      systemMessage = `${combinedSystemMessage}\n\n`;
+    } else {
+      conversationMessages.unshift(instructionTag + combinedSystemMessage);
+    }
+  }
+
+  let prompt = `${systemMessage}${conversationMessages.join(splitter)}`;
+
+  // Ensure that the prompt ends with an assistant message
+  const lastInstructionIndex = prompt.lastIndexOf(instructionTag);
+  const lastAssistantIndex = prompt.lastIndexOf(responseTag);
+  if (lastInstructionIndex > lastAssistantIndex) {
+    prompt += splitter + responseTag;
+  }
+
+  return prompt;
+};

app/src/modelProviders/replicate-llama2/getCompletion.ts

@@ -8,7 +8,7 @@ const replicate = new Replicate({
 });
 
 const modelIds: Record<ReplicateLlama2Input["model"], string> = {
-  "7b-chat": "4f0b260b6a13eb53a6b1891f089d57c08f41003ae79458be5011303d81a394dc",
+  "7b-chat": "7b0bfc9aff140d5b75bacbed23e91fd3c34b01a1e958d32132de6e0a19796e2c",
   "13b-chat": "2a7f981751ec7fdf87b5b91ad4db53683a98082e9ff7bfd12c8cd5ea85980a52",
   "70b-chat": "2c1608e18606fad2812020dc541930f2d0495ce32eee50074220b87300bc16e1",
 };

app/src/modelProviders/types.ts

@@ -2,11 +2,13 @@ import { type JSONSchema4 } from "json-schema";
 import { type IconType } from "react-icons";
 import { type JsonValue } from "type-fest";
 import { z } from "zod";
+import { type OpenpipeChatInput } from "./openpipe-chat";
 
 export const ZodSupportedProvider = z.union([
   z.literal("openai/ChatCompletion"),
   z.literal("replicate/llama2"),
   z.literal("anthropic/completion"),
+  z.literal("openpipe/Chat"),
 ]);
 
 export type SupportedProvider = z.infer<typeof ZodSupportedProvider>;
@@ -22,6 +24,8 @@ export type Model = {
   description?: string;
   learnMoreUrl?: string;
   apiDocsUrl?: string;
+  templatePrompt?: (initialPrompt: OpenpipeChatInput["messages"]) => string;
+  defaultStopTokens?: string[];
 };
 
 export type ProviderModel = { provider: z.infer<typeof ZodSupportedProvider>; model: string };

app/src/pages/admin/jobs/index.tsx

@@ -0,0 +1,54 @@
+import { Card, Table, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react";
+import dayjs from "dayjs";
+import { isDate, isObject, isString } from "lodash-es";
+import AppShell from "~/components/nav/AppShell";
+import { type RouterOutputs, api } from "~/utils/api";
+
+const fieldsToShow: (keyof RouterOutputs["adminJobs"]["list"][0])[] = [
+  "id",
+  "queue_name",
+  "payload",
+  "priority",
+  "attempts",
+  "last_error",
+  "created_at",
+  "key",
+  "locked_at",
+  "run_at",
+];
+
+export default function Jobs() {
+  const jobs = api.adminJobs.list.useQuery({});
+
+  return (
+    <AppShell title="Admin Jobs">
+      <Card m={4} overflowX="auto">
+        <Table>
+          <Thead>
+            <Tr>
+              {fieldsToShow.map((field) => (
+                <Th key={field}>{field}</Th>
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {jobs.data?.map((job) => (
+              <Tr key={job.id}>
+                {fieldsToShow.map((field) => {
+                  // Check if object
+                  let value = job[field];
+                  if (isDate(value)) {
+                    value = dayjs(value).format("YYYY-MM-DD HH:mm:ss");
+                  } else if (isObject(value) && !isString(value)) {
+                    value = JSON.stringify(value);
+                  } // check if date
+                  return <Td key={field}>{value}</Td>;
+                })}
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </Card>
+    </AppShell>
+  );
+}

app/src/pages/experiments/[experimentSlug].tsx

@@ -26,26 +26,6 @@ import Head from "next/head";
 import PageHeaderContainer from "~/components/nav/PageHeaderContainer";
 import ProjectBreadcrumbContents from "~/components/nav/ProjectBreadcrumbContents";
 
-// TODO: import less to fix deployment with server side props
-// export const getServerSideProps = async (context: GetServerSidePropsContext<{ id: string }>) => {
-//   const experimentId = context.params?.id as string;
-
-//   const helpers = createServerSideHelpers({
-//     router: appRouter,
-//     ctx: createInnerTRPCContext({ session: null }),
-//     transformer: superjson, // optional - adds superjson serialization
-//   });
-
-//   // prefetch query
-//   await helpers.experiments.stats.prefetch({ id: experimentId });
-
-//   return {
-//     props: {
-//       trpcState: helpers.dehydrate(),
-//     },
-//   };
-// };
-
 export default function Experiment() {
   const router = useRouter();
   const utils = api.useContext();
@@ -53,9 +33,9 @@ export default function Experiment() {
 
   const experiment = useExperiment();
   const experimentStats = api.experiments.stats.useQuery(
-    { id: router.query.id as string },
+    { id: experiment.data?.id as string },
     {
-      enabled: !!router.query.id,
+      enabled: !!experiment.data?.id,
     },
   );
   const stats = experimentStats.data;
@@ -144,8 +124,8 @@ export default function Experiment() {
             <ExperimentHeaderButtons />
           </PageHeaderContainer>
           <ExperimentSettingsDrawer />
-          <Box w="100%" overflowX="auto" flex={1}>
+          <Box w="100%" overflowX="auto" flex={1} id="output-container">
-            <OutputsTable experimentId={router.query.id as string | undefined} />
+            <OutputsTable experimentId={experiment.data?.id} />
           </Box>
         </VStack>
       </AppShell>

app/src/pages/invitations/[invitationToken].tsx

@@ -0,0 +1,110 @@
+import { Center, Text, VStack, HStack, Button, Card } from "@chakra-ui/react";
+
+import { useRouter } from "next/router";
+import AppShell from "~/components/nav/AppShell";
+import { api } from "~/utils/api";
+import { useHandledAsyncCallback } from "~/utils/hooks";
+import { useAppStore } from "~/state/store";
+import { useSyncVariantEditor } from "~/state/sync";
+import { maybeReportError } from "~/utils/errorHandling/maybeReportError";
+
+export default function Invitation() {
+  const router = useRouter();
+  const utils = api.useContext();
+  useSyncVariantEditor();
+
+  const setSelectedProjectId = useAppStore((state) => state.setSelectedProjectId);
+
+  const invitationToken = router.query.invitationToken as string | undefined;
+
+  const invitation = api.users.getProjectInvitation.useQuery(
+    { invitationToken: invitationToken as string },
+    { enabled: !!invitationToken },
+  );
+
+  const cancelMutation = api.users.cancelProjectInvitation.useMutation();
+  const [declineInvitation, isDeclining] = useHandledAsyncCallback(async () => {
+    if (invitationToken) {
+      await cancelMutation.mutateAsync({
+        invitationToken,
+      });
+      await router.replace("/");
+    }
+  }, [cancelMutation, invitationToken]);
+
+  const acceptMutation = api.users.acceptProjectInvitation.useMutation();
+  const [acceptInvitation, isAccepting] = useHandledAsyncCallback(async () => {
+    if (invitationToken) {
+      const resp = await acceptMutation.mutateAsync({
+        invitationToken,
+      });
+      if (!maybeReportError(resp) && resp) {
+        await utils.projects.list.invalidate();
+        setSelectedProjectId(resp.payload);
+      }
+      await router.replace("/");
+    }
+  }, [acceptMutation, invitationToken]);
+
+  if (invitation.isLoading) {
+    return (
+      <AppShell requireAuth title="Loading...">
+        <Center h="full">
+          <Text>Loading...</Text>
+        </Center>
+      </AppShell>
+    );
+  }
+
+  if (!invitationToken || !invitation.data) {
+    return (
+      <AppShell requireAuth title="Invalid invitation token">
+        <Center h="full">
+          <Text>
+            The invitation you've received is invalid or expired. Please ask your project admin for
+            a new token.
+          </Text>
+        </Center>
+      </AppShell>
+    );
+  }
+
+  return (
+    <>
+      <AppShell requireAuth title="Invitation">
+        <Center h="full">
+          <Card>
+            <VStack
+              spacing={8}
+              w="full"
+              maxW="2xl"
+              p={16}
+              borderWidth={1}
+              borderRadius={8}
+              bgColor="white"
+            >
+              <Text fontSize="lg" fontWeight="bold">
+                You're invited! 🎉
+              </Text>
+              <Text textAlign="center">
+                You've been invited to join <b>{invitation.data.project.name}</b> by{" "}
+                <b>
+                  {invitation.data.sender.name} ({invitation.data.sender.email})
+                </b>
+                .
+              </Text>
+              <HStack spacing={4}>
+                <Button colorScheme="gray" isLoading={isDeclining} onClick={declineInvitation}>
+                  Decline
+                </Button>
+                <Button colorScheme="orange" isLoading={isAccepting} onClick={acceptInvitation}>
+                  Accept
+                </Button>
+              </HStack>
+            </VStack>
+          </Card>
+        </Center>
+      </AppShell>
+    </>
+  );
+}

app/src/pages/project/settings/index.tsx

@@ -9,9 +9,11 @@ import {
   Divider,
   Icon,
   useDisclosure,
+  Box,
+  Tooltip,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
-import { BsTrash } from "react-icons/bs";
+import { BsPlus, BsTrash } from "react-icons/bs";
 
 import AppShell from "~/components/nav/AppShell";
 import PageHeaderContainer from "~/components/nav/PageHeaderContainer";
@@ -21,6 +23,8 @@ import ProjectBreadcrumbContents from "~/components/nav/ProjectBreadcrumbContent
 import CopiableCode from "~/components/CopiableCode";
 import { DeleteProjectDialog } from "~/components/projectSettings/DeleteProjectDialog";
 import AutoResizeTextArea from "~/components/AutoResizeTextArea";
+import MemberTable from "~/components/projectSettings/MemberTable";
+import { InviteMemberModal } from "~/components/projectSettings/InviteMemberModal";
 
 export default function Settings() {
   const utils = api.useContext();
@@ -50,12 +54,13 @@ export default function Settings() {
     setName(selectedProject?.name);
   }, [selectedProject?.name]);
 
-  const deleteProjectOpen = useDisclosure();
+  const inviteMemberModal = useDisclosure();
+  const deleteProjectDialog = useDisclosure();
 
   return (
     <>
-      <AppShell>
+      <AppShell requireAuth>
-        <PageHeaderContainer>
+        <PageHeaderContainer px={{ base: 4, md: 8 }}>
           <Breadcrumb>
             <BreadcrumbItem>
               <ProjectBreadcrumbContents />
@@ -65,7 +70,7 @@ export default function Settings() {
             </BreadcrumbItem>
           </Breadcrumb>
         </PageHeaderContainer>
-        <VStack px={8} py={4} alignItems="flex-start" spacing={4}>
+        <VStack px={{ base: 4, md: 8 }} py={4} alignItems="flex-start" spacing={4}>
           <VStack spacing={0} alignItems="flex-start">
             <Text fontSize="2xl" fontWeight="bold">
               Project Settings
@@ -109,6 +114,37 @@ export default function Settings() {
               </Button>
             </VStack>
             <Divider backgroundColor="gray.300" />
+            <VStack w="full" alignItems="flex-start">
+              <Subtitle>Project Members</Subtitle>
+
+              <Text fontSize="sm">
+                Add members to your project to allow them to view and edit your project's data.
+              </Text>
+              <Box mt={4} w="full">
+                <MemberTable />
+              </Box>
+              <Tooltip
+                isDisabled={selectedProject?.role === "ADMIN"}
+                label="Only admins can invite new members"
+                hasArrow
+              >
+                <Button
+                  variant="outline"
+                  colorScheme="orange"
+                  borderRadius={4}
+                  onClick={inviteMemberModal.onOpen}
+                  mt={2}
+                  _disabled={{
+                    opacity: 0.6,
+                  }}
+                  isDisabled={selectedProject?.role !== "ADMIN"}
+                >
+                  <Icon as={BsPlus} boxSize={5} />
+                  <Text>Invite New Member</Text>
+                </Button>
+              </Tooltip>
+            </VStack>
+            <Divider backgroundColor="gray.300" />
             <VStack alignItems="flex-start">
               <Subtitle>Project API Key</Subtitle>
               <Text fontSize="sm">
@@ -141,7 +177,7 @@ export default function Settings() {
                   borderRadius={4}
                   mt={2}
                   height="auto"
-                  onClick={deleteProjectOpen.onOpen}
+                  onClick={deleteProjectDialog.onOpen}
                 >
                   <Icon as={BsTrash} />
                   <Text overflowWrap="break-word" whiteSpace="normal" py={2}>
@@ -153,7 +189,11 @@ export default function Settings() {
           </VStack>
         </VStack>
       </AppShell>
-      <DeleteProjectDialog isOpen={deleteProjectOpen.isOpen} onClose={deleteProjectOpen.onClose} />
+      <InviteMemberModal isOpen={inviteMemberModal.isOpen} onClose={inviteMemberModal.onClose} />
+      <DeleteProjectDialog
+        isOpen={deleteProjectDialog.isOpen}
+        onClose={deleteProjectDialog.onClose}
+      />
     </>
   );
 }

app/src/pages/request-logs/index.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Text, VStack, Divider, HStack } from "@chakra-ui/react";
 
 import AppShell from "~/components/nav/AppShell";
@@ -6,9 +7,14 @@ import LoggedCallsPaginator from "~/components/requestLogs/LoggedCallsPaginator"
 import ActionButton from "~/components/requestLogs/ActionButton";
 import { useAppStore } from "~/state/store";
 import { RiFlaskLine } from "react-icons/ri";
+import { FiFilter } from "react-icons/fi";
+import LogFilters from "~/components/requestLogs/LogFilters/LogFilters";
 
 export default function LoggedCalls() {
   const selectedLogIds = useAppStore((s) => s.selectedLogs.selectedLogIds);
+
+  const [filtersShown, setFiltersShown] = useState(true);
+
   return (
     <AppShell title="Request Logs" requireAuth>
       <VStack px={8} py={8} alignItems="flex-start" spacing={4} w="full">
@@ -17,6 +23,13 @@ export default function LoggedCalls() {
         </Text>
         <Divider />
         <HStack w="full" justifyContent="flex-end">
+          <ActionButton
+            onClick={() => {
+              setFiltersShown(!filtersShown);
+            }}
+            label={filtersShown ? "Hide Filters" : "Show Filters"}
+            icon={FiFilter}
+          />
           <ActionButton
             onClick={() => {
               console.log("experimenting with these ids", selectedLogIds);
@@ -26,6 +39,7 @@ export default function LoggedCalls() {
             isDisabled={selectedLogIds.size === 0}
           />
         </HStack>
+        {filtersShown && <LogFilters />}
         <LoggedCallTable />
         <LoggedCallsPaginator />
       </VStack>

app/src/server/api/external/v1Api.router.ts

@@ -75,7 +75,11 @@ export const v1ApiRouter = createOpenApiRouter({
         },
       });
 
-      await createTags(existingResponse.originalLoggedCallId, input.tags);
+      await createTags(
+        existingResponse.originalLoggedCall.projectId,
+        existingResponse.originalLoggedCallId,
+        input.tags,
+      );
       return {
         respPayload: existingResponse.respPayload,
       };
@@ -165,7 +169,7 @@ export const v1ApiRouter = createOpenApiRouter({
         }),
       ]);
 
-      await createTags(newLoggedCallId, input.tags);
+      await createTags(ctx.key.projectId, newLoggedCallId, input.tags);
       return { status: "ok" };
     }),
   localTestingOnlyGetLatestLoggedCall: openApiProtectedProc
@@ -229,8 +233,9 @@ export const v1ApiRouter = createOpenApiRouter({
     }),
 });
 
-async function createTags(loggedCallId: string, tags: Record<string, string>) {
+async function createTags(projectId: string, loggedCallId: string, tags: Record<string, string>) {
   const tagsToCreate = Object.entries(tags).map(([name, value]) => ({
+    projectId,
     loggedCallId,
     name: name.replaceAll(/[^a-zA-Z0-9_$]/g, "_"),
     value,

app/src/server/api/root.router.ts

@@ -11,6 +11,8 @@ import { datasetEntries } from "./routers/datasetEntries.router";
 import { projectsRouter } from "./routers/projects.router";
 import { dashboardRouter } from "./routers/dashboard.router";
 import { loggedCallsRouter } from "./routers/loggedCalls.router";
+import { usersRouter } from "./routers/users.router";
+import { adminJobsRouter } from "./routers/adminJobs.router";
 
 /**
  * This is the primary router for your server.
@@ -30,6 +32,8 @@ export const appRouter = createTRPCRouter({
   projects: projectsRouter,
   dashboard: dashboardRouter,
   loggedCalls: loggedCallsRouter,
+  users: usersRouter,
+  adminJobs: adminJobsRouter,
 });
 
 // export type definition of API

app/src/server/api/routers/adminJobs.router.ts

@@ -0,0 +1,18 @@
+import { z } from "zod";
+
+import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";
+import { kysely } from "~/server/db";
+import { requireIsAdmin } from "~/utils/accessControl";
+
+export const adminJobsRouter = createTRPCRouter({
+  list: protectedProcedure.input(z.object({})).query(async ({ ctx }) => {
+    await requireIsAdmin(ctx);
+
+    return await kysely
+      .selectFrom("graphile_worker.jobs")
+      .limit(100)
+      .selectAll()
+      .orderBy("created_at", "desc")
+      .execute();
+  }),
+});

app/src/server/api/routers/experiments.router.ts

@@ -85,15 +85,16 @@ export const experimentsRouter = createTRPCRouter({
       return experimentsWithCounts;
     }),
 
-  get: publicProcedure.input(z.object({ id: z.string() })).query(async ({ input, ctx }) => {
+  get: publicProcedure.input(z.object({ slug: z.string() })).query(async ({ input, ctx }) => {
-    await requireCanViewExperiment(input.id, ctx);
     const experiment = await prisma.experiment.findFirstOrThrow({
-      where: { id: input.id },
+      where: { slug: input.slug },
       include: {
         project: true,
       },
     });
 
+    await requireCanViewExperiment(experiment.id, ctx);
+
     const canModify = ctx.session?.user.id
       ? await canModifyExperiment(experiment.id, ctx.session?.user.id)
       : false;
@@ -290,7 +291,10 @@ export const experimentsRouter = createTRPCRouter({
         }),
       ]);
 
-      return newExperimentId;
+      const newExperiment = await prisma.experiment.findUniqueOrThrow({
+        where: { id: newExperimentId },
+      });
+      return newExperiment;
     }),
 
   create: protectedProcedure
@@ -335,7 +339,6 @@ export const experimentsRouter = createTRPCRouter({
           
           definePrompt("openai/ChatCompletion", {
             model: "gpt-3.5-turbo-0613",
-            stream: true,
             messages: [
               {
                 role: "system",

app/src/server/api/routers/loggedCalls.router.ts

@@ -1,33 +1,183 @@
 import { z } from "zod";
+import { type Expression, type SqlBool, sql, type RawBuilder } from "kysely";
+import { jsonArrayFrom } from "kysely/helpers/postgres";
+
 import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";
-import { prisma } from "~/server/db";
+import { kysely, prisma } from "~/server/db";
+import { comparators, defaultFilterableFields } from "~/state/logFiltersSlice";
 import { requireCanViewProject } from "~/utils/accessControl";
 
+// create comparator type based off of comparators
+const comparatorToSqlExpression = (comparator: (typeof comparators)[number], value: string) => {
+  return (reference: RawBuilder<unknown>): Expression<SqlBool> => {
+    switch (comparator) {
+      case "=":
+        return sql`${reference} = ${value}`;
+      case "!=":
+        // Handle NULL values
+        return sql`${reference} IS DISTINCT FROM ${value}`;
+      case "CONTAINS":
+        return sql`${reference} LIKE ${"%" + value + "%"}`;
+      case "NOT_CONTAINS":
+        return sql`(${reference} NOT LIKE ${"%" + value + "%"} OR ${reference} IS NULL)`;
+      default:
+        throw new Error("Unknown comparator");
+    }
+  };
+};
+
 export const loggedCallsRouter = createTRPCRouter({
   list: protectedProcedure
-    .input(z.object({ projectId: z.string(), page: z.number(), pageSize: z.number() }))
+    .input(
+      z.object({
+        projectId: z.string(),
+        page: z.number(),
+        pageSize: z.number(),
+        filters: z.array(
+          z.object({
+            field: z.string(),
+            comparator: z.enum(comparators),
+            value: z.string(),
+          }),
+        ),
+      }),
+    )
     .query(async ({ input, ctx }) => {
       const { projectId, page, pageSize } = input;
 
       await requireCanViewProject(projectId, ctx);
 
-      const calls = await prisma.loggedCall.findMany({
+      const baseQuery = kysely
-        where: { projectId },
+        .selectFrom("LoggedCall as lc")
-        orderBy: { requestedAt: "desc" },
+        .leftJoin("LoggedCallModelResponse as lcmr", "lc.id", "lcmr.originalLoggedCallId")
-        include: { tags: true, modelResponse: true },
+        .where((eb) => {
-        skip: (page - 1) * pageSize,
+          const wheres: Expression<SqlBool>[] = [eb("lc.projectId", "=", projectId)];
-        take: pageSize,
+
+          for (const filter of input.filters) {
+            if (!filter.value) continue;
+            const filterExpression = comparatorToSqlExpression(filter.comparator, filter.value);
+
+            if (filter.field === "Request") {
+              wheres.push(filterExpression(sql.raw(`lcmr."reqPayload"::text`)));
+            }
+            if (filter.field === "Response") {
+              wheres.push(filterExpression(sql.raw(`lcmr."respPayload"::text`)));
+            }
+            if (filter.field === "Model") {
+              wheres.push(filterExpression(sql.raw(`lc."model"`)));
+            }
+            if (filter.field === "Status Code") {
+              wheres.push(filterExpression(sql.raw(`lcmr."statusCode"::text`)));
+            }
+          }
+
+          return eb.and(wheres);
         });
 
-      const matchingLogs = await prisma.loggedCall.findMany({
+      const tagFilters = input.filters.filter(
-        where: { projectId },
+        (filter) =>
-        select: { id: true },
+          !defaultFilterableFields.includes(
+            filter.field as (typeof defaultFilterableFields)[number],
+          ),
+      );
+
+      let updatedBaseQuery = baseQuery;
+
+      for (let i = 0; i < tagFilters.length; i++) {
+        const filter = tagFilters[i];
+        if (!filter?.value) continue;
+        const tableAlias = `lct${i}`;
+        const filterExpression = comparatorToSqlExpression(filter.comparator, filter.value);
+
+        updatedBaseQuery = updatedBaseQuery
+          .leftJoin(`LoggedCallTag as ${tableAlias}`, (join) =>
+            join
+              .onRef("lc.id", "=", `${tableAlias}.loggedCallId`)
+              .on(`${tableAlias}.name`, "=", filter.field),
+          )
+          .where(filterExpression(sql.raw(`${tableAlias}.value`))) as unknown as typeof baseQuery;
+      }
+
+      const rawCalls = await updatedBaseQuery
+        .select((eb) => [
+          "lc.id as id",
+          "lc.requestedAt as requestedAt",
+          "model",
+          "cacheHit",
+          "lc.requestedAt",
+          "receivedAt",
+          "reqPayload",
+          "respPayload",
+          "model",
+          "inputTokens",
+          "outputTokens",
+          "cost",
+          "statusCode",
+          "durationMs",
+          jsonArrayFrom(
+            eb
+              .selectFrom("LoggedCallTag")
+              .select(["name", "value"])
+              .whereRef("loggedCallId", "=", "lc.id"),
+          ).as("tags"),
+        ])
+        .orderBy("lc.requestedAt", "desc")
+        .limit(pageSize)
+        .offset((page - 1) * pageSize)
+        .execute();
+
+      const calls = rawCalls.map((rawCall) => {
+        const tagsObject = rawCall.tags.reduce(
+          (acc, tag) => {
+            acc[tag.name] = tag.value;
+            return acc;
+          },
+          {} as Record<string, string | null>,
+        );
+
+        return {
+          id: rawCall.id,
+          requestedAt: rawCall.requestedAt,
+          model: rawCall.model,
+          cacheHit: rawCall.cacheHit,
+          modelResponse: {
+            receivedAt: rawCall.receivedAt,
+            reqPayload: rawCall.reqPayload,
+            respPayload: rawCall.respPayload,
+            inputTokens: rawCall.inputTokens,
+            outputTokens: rawCall.outputTokens,
+            cost: rawCall.cost,
+            statusCode: rawCall.statusCode,
+            durationMs: rawCall.durationMs,
+          },
+          tags: tagsObject,
+        };
       });
 
-      const count = await prisma.loggedCall.count({
+      const matchingLogIds = await updatedBaseQuery.select(["lc.id"]).execute();
-        where: { projectId },
+
+      const count = matchingLogIds.length;
+
+      return { calls, count, matchingLogIds: matchingLogIds.map((log) => log.id) };
+    }),
+  getTagNames: protectedProcedure
+    .input(z.object({ projectId: z.string() }))
+    .query(async ({ input, ctx }) => {
+      await requireCanViewProject(input.projectId, ctx);
+
+      const tags = await prisma.loggedCallTag.findMany({
+        distinct: ["name"],
+        where: {
+          projectId: input.projectId,
+        },
+        select: {
+          name: true,
+        },
+        orderBy: {
+          name: "asc",
+        },
       });
 
-      return { calls, count, matchingLogIds: matchingLogs.map((log) => log.id) };
+      return tags.map((tag) => tag.name);
     }),
 });

app/src/server/api/routers/projects.router.ts

@@ -51,6 +51,12 @@ export const projectsRouter = createTRPCRouter({
         include: {
           apiKeys: true,
           personalProjectUser: true,
+          projectUsers: {
+            include: {
+              user: true,
+            },
+          },
+          projectUserInvitations: true,
         },
       }),
       prisma.projectUser.findFirst({
@@ -58,7 +64,7 @@ export const projectsRouter = createTRPCRouter({
           userId: ctx.session.user.id,
           projectId: input.id,
           role: {
-            in: ["ADMIN", "MEMBER"],
+            in: ["ADMIN", "MEMBER", "VIEWER"],
           },
         },
       }),

app/src/server/api/routers/scenarioVariantCells.router.ts

@@ -1,4 +1,6 @@
+import { TRPCError } from "@trpc/server";
 import { z } from "zod";
+import modelProviders from "~/modelProviders/modelProviders";
 import { createTRPCRouter, protectedProcedure, publicProcedure } from "~/server/api/trpc";
 import { prisma } from "~/server/db";
 import { queueQueryModel } from "~/server/tasks/queryModel.task";
@@ -96,4 +98,46 @@ export const scenarioVariantCellsRouter = createTRPCRouter({
 
       await queueQueryModel(cell.id, true);
     }),
+  getTemplatedPromptMessage: publicProcedure
+    .input(
+      z.object({
+        cellId: z.string(),
+      }),
+    )
+    .query(async ({ input }) => {
+      const cell = await prisma.scenarioVariantCell.findUnique({
+        where: { id: input.cellId },
+        include: {
+          promptVariant: true,
+          modelResponses: true,
+        },
+      });
+
+      if (!cell) {
+        throw new TRPCError({
+          code: "NOT_FOUND",
+        });
+      }
+
+      const promptMessages = (cell.prompt as { messages: [] })["messages"];
+
+      if (!promptMessages) return null;
+
+      const { modelProvider, model } = cell.promptVariant;
+
+      const provider = modelProviders[modelProvider as keyof typeof modelProviders];
+
+      if (!provider) return null;
+
+      const modelObj = provider.models[model as keyof typeof provider.models];
+
+      const templatePrompt = modelObj?.templatePrompt;
+
+      if (!templatePrompt) return null;
+
+      return {
+        templatedPrompt: templatePrompt(promptMessages),
+        learnMoreUrl: modelObj.learnMoreUrl,
+      };
+    }),
 });

app/src/server/api/routers/users.router.ts

@@ -0,0 +1,232 @@
+import { v4 as uuidv4 } from "uuid";
+import { z } from "zod";
+
+import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";
+import { prisma } from "~/server/db";
+import { error, success } from "~/utils/errorHandling/standardResponses";
+import { requireIsProjectAdmin, requireNothing } from "~/utils/accessControl";
+import { TRPCError } from "@trpc/server";
+import { sendProjectInvitation } from "~/server/emails/sendProjectInvitation";
+
+export const usersRouter = createTRPCRouter({
+  inviteToProject: protectedProcedure
+    .input(
+      z.object({
+        projectId: z.string(),
+        email: z.string().email(),
+        role: z.enum(["ADMIN", "MEMBER", "VIEWER"]),
+      }),
+    )
+    .mutation(async ({ input, ctx }) => {
+      await requireIsProjectAdmin(input.projectId, ctx);
+
+      const user = await prisma.user.findUnique({
+        where: {
+          email: input.email,
+        },
+      });
+
+      if (user) {
+        const existingMembership = await prisma.projectUser.findUnique({
+          where: {
+            projectId_userId: {
+              projectId: input.projectId,
+              userId: user.id,
+            },
+          },
+        });
+
+        if (existingMembership) {
+          return error(`A user with ${input.email} is already a member of this project`);
+        }
+      }
+
+      const invitation = await prisma.userInvitation.upsert({
+        where: {
+          projectId_email: {
+            projectId: input.projectId,
+            email: input.email,
+          },
+        },
+        update: {
+          role: input.role,
+        },
+        create: {
+          projectId: input.projectId,
+          email: input.email,
+          role: input.role,
+          invitationToken: uuidv4(),
+          senderId: ctx.session.user.id,
+        },
+        include: {
+          project: {
+            select: {
+              name: true,
+            },
+          },
+        },
+      });
+
+      try {
+        await sendProjectInvitation({
+          invitationToken: invitation.invitationToken,
+          recipientEmail: input.email,
+          invitationSenderName: ctx.session.user.name || "",
+          invitationSenderEmail: ctx.session.user.email || "",
+          projectName: invitation.project.name,
+        });
+      } catch (e) {
+        // If we fail to send the email, we should delete the invitation
+        await prisma.userInvitation.delete({
+          where: {
+            invitationToken: invitation.invitationToken,
+          },
+        });
+        return error("Failed to send email");
+      }
+
+      return success();
+    }),
+  getProjectInvitation: protectedProcedure
+    .input(
+      z.object({
+        invitationToken: z.string(),
+      }),
+    )
+    .query(async ({ input, ctx }) => {
+      requireNothing(ctx);
+
+      const invitation = await prisma.userInvitation.findUnique({
+        where: {
+          invitationToken: input.invitationToken,
+        },
+        include: {
+          project: {
+            select: {
+              name: true,
+            },
+          },
+          sender: {
+            select: {
+              name: true,
+              email: true,
+            },
+          },
+        },
+      });
+
+      if (!invitation) {
+        throw new TRPCError({ code: "NOT_FOUND" });
+      }
+
+      return invitation;
+    }),
+  acceptProjectInvitation: protectedProcedure
+    .input(
+      z.object({
+        invitationToken: z.string(),
+      }),
+    )
+    .mutation(async ({ input, ctx }) => {
+      requireNothing(ctx);
+
+      const invitation = await prisma.userInvitation.findUnique({
+        where: {
+          invitationToken: input.invitationToken,
+        },
+      });
+
+      if (!invitation) {
+        throw new TRPCError({ code: "NOT_FOUND" });
+      }
+
+      await prisma.projectUser.create({
+        data: {
+          projectId: invitation.projectId,
+          userId: ctx.session.user.id,
+          role: invitation.role,
+        },
+      });
+
+      await prisma.userInvitation.delete({
+        where: {
+          invitationToken: input.invitationToken,
+        },
+      });
+
+      return success(invitation.projectId);
+    }),
+  cancelProjectInvitation: protectedProcedure
+    .input(
+      z.object({
+        invitationToken: z.string(),
+      }),
+    )
+    .mutation(async ({ input, ctx }) => {
+      requireNothing(ctx);
+
+      const invitation = await prisma.userInvitation.findUnique({
+        where: {
+          invitationToken: input.invitationToken,
+        },
+      });
+
+      if (!invitation) {
+        throw new TRPCError({ code: "NOT_FOUND" });
+      }
+
+      await prisma.userInvitation.delete({
+        where: {
+          invitationToken: input.invitationToken,
+        },
+      });
+
+      return success();
+    }),
+  editProjectUserRole: protectedProcedure
+    .input(
+      z.object({
+        projectId: z.string(),
+        userId: z.string(),
+        role: z.enum(["ADMIN", "MEMBER", "VIEWER"]),
+      }),
+    )
+    .mutation(async ({ input, ctx }) => {
+      await requireIsProjectAdmin(input.projectId, ctx);
+
+      await prisma.projectUser.update({
+        where: {
+          projectId_userId: {
+            projectId: input.projectId,
+            userId: input.userId,
+          },
+        },
+        data: {
+          role: input.role,
+        },
+      });
+
+      return success();
+    }),
+  removeUserFromProject: protectedProcedure
+    .input(
+      z.object({
+        projectId: z.string(),
+        userId: z.string(),
+      }),
+    )
+    .mutation(async ({ input, ctx }) => {
+      await requireIsProjectAdmin(input.projectId, ctx);
+
+      await prisma.projectUser.delete({
+        where: {
+          projectId_userId: {
+            projectId: input.projectId,
+            userId: input.userId,
+          },
+        },
+      });
+
+      return success();
+    }),
+});

app/src/server/db.ts

@@ -1,27 +1,6 @@
-import {
+import { type DB } from "./db.types";
-  type Experiment,
+
-  type PromptVariant,
+import { PrismaClient } from "@prisma/client";
-  type TestScenario,
-  type TemplateVariable,
-  type ScenarioVariantCell,
-  type ModelResponse,
-  type Evaluation,
-  type OutputEvaluation,
-  type Dataset,
-  type DatasetEntry,
-  type Project,
-  type ProjectUser,
-  type WorldChampEntrant,
-  type LoggedCall,
-  type LoggedCallModelResponse,
-  type LoggedCallTag,
-  type ApiKey,
-  type Account,
-  type Session,
-  type User,
-  type VerificationToken,
-  PrismaClient,
-} from "@prisma/client";
 import { Kysely, PostgresDialect } from "kysely";
 // TODO: Revert to normal import when our tsconfig.json is fixed
 // import { Pool } from "pg";
@@ -32,30 +11,6 @@ const Pool = (UntypedPool.default ? UntypedPool.default : UntypedPool) as typeof
 
 import { env } from "~/env.mjs";
 
-interface DB {
-  Experiment: Experiment;
-  PromptVariant: PromptVariant;
-  TestScenario: TestScenario;
-  TemplateVariable: TemplateVariable;
-  ScenarioVariantCell: ScenarioVariantCell;
-  ModelResponse: ModelResponse;
-  Evaluation: Evaluation;
-  OutputEvaluation: OutputEvaluation;
-  Dataset: Dataset;
-  DatasetEntry: DatasetEntry;
-  Project: Project;
-  ProjectUser: ProjectUser;
-  WorldChampEntrant: WorldChampEntrant;
-  LoggedCall: LoggedCall;
-  LoggedCallModelResponse: LoggedCallModelResponse;
-  LoggedCallTag: LoggedCallTag;
-  ApiKey: ApiKey;
-  Account: Account;
-  Session: Session;
-  User: User;
-  VerificationToken: VerificationToken;
-}
-
 const globalForPrisma = globalThis as unknown as {
   prisma: PrismaClient | undefined;
 };

app/src/server/db.types.ts

@@ -0,0 +1,336 @@
+import type { ColumnType } from "kysely";
+
+export type Generated<T> = T extends ColumnType<infer S, infer I, infer U>
+  ? ColumnType<S, I | undefined, U>
+  : ColumnType<T, T | undefined, T>;
+
+export type Int8 = ColumnType<string, string | number | bigint, string | number | bigint>;
+
+export type Json = ColumnType<JsonValue, string, string>;
+
+export type JsonArray = JsonValue[];
+
+export type JsonObject = {
+  [K in string]?: JsonValue;
+};
+
+export type JsonPrimitive = boolean | null | number | string;
+
+export type JsonValue = JsonArray | JsonObject | JsonPrimitive;
+
+export type Numeric = ColumnType<string, string | number, string | number>;
+
+export type Timestamp = ColumnType<Date, Date | string, Date | string>;
+
+export interface _PrismaMigrations {
+  id: string;
+  checksum: string;
+  finished_at: Timestamp | null;
+  migration_name: string;
+  logs: string | null;
+  rolled_back_at: Timestamp | null;
+  started_at: Generated<Timestamp>;
+  applied_steps_count: Generated<number>;
+}
+
+export interface Account {
+  id: string;
+  userId: string;
+  type: string;
+  provider: string;
+  providerAccountId: string;
+  refresh_token: string | null;
+  refresh_token_expires_in: number | null;
+  access_token: string | null;
+  expires_at: number | null;
+  token_type: string | null;
+  scope: string | null;
+  id_token: string | null;
+  session_state: string | null;
+}
+
+export interface ApiKey {
+  id: string;
+  name: string;
+  apiKey: string;
+  projectId: string;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Timestamp;
+}
+
+export interface Dataset {
+  id: string;
+  name: string;
+  projectId: string;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Timestamp;
+}
+
+export interface DatasetEntry {
+  id: string;
+  input: string;
+  output: string | null;
+  datasetId: string;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Timestamp;
+}
+
+export interface Evaluation {
+  id: string;
+  label: string;
+  value: string;
+  evalType: "CONTAINS" | "DOES_NOT_CONTAIN" | "GPT4_EVAL";
+  experimentId: string;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Timestamp;
+}
+
+export interface Experiment {
+  id: string;
+  label: string;
+  sortIndex: Generated<number>;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Timestamp;
+  projectId: string;
+}
+
+export interface GraphileWorkerJobQueues {
+  queue_name: string;
+  job_count: number;
+  locked_at: Timestamp | null;
+  locked_by: string | null;
+}
+
+export interface GraphileWorkerJobs {
+  id: Generated<Int8>;
+  queue_name: string | null;
+  task_identifier: string;
+  payload: Generated<Json>;
+  priority: Generated<number>;
+  run_at: Generated<Timestamp>;
+  attempts: Generated<number>;
+  max_attempts: Generated<number>;
+  last_error: string | null;
+  created_at: Generated<Timestamp>;
+  updated_at: Generated<Timestamp>;
+  key: string | null;
+  locked_at: Timestamp | null;
+  locked_by: string | null;
+  revision: Generated<number>;
+  flags: Json | null;
+}
+
+export interface GraphileWorkerKnownCrontabs {
+  identifier: string;
+  known_since: Timestamp;
+  last_execution: Timestamp | null;
+}
+
+export interface GraphileWorkerMigrations {
+  id: number;
+  ts: Generated<Timestamp>;
+}
+
+export interface LoggedCall {
+  id: string;
+  requestedAt: Timestamp;
+  cacheHit: boolean;
+  modelResponseId: string | null;
+  projectId: string;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Timestamp;
+  model: string | null;
+}
+
+export interface LoggedCallModelResponse {
+  id: string;
+  reqPayload: Json;
+  statusCode: number | null;
+  respPayload: Json | null;
+  errorMessage: string | null;
+  requestedAt: Timestamp;
+  receivedAt: Timestamp;
+  cacheKey: string | null;
+  durationMs: number | null;
+  inputTokens: number | null;
+  outputTokens: number | null;
+  finishReason: string | null;
+  completionId: string | null;
+  cost: Numeric | null;
+  originalLoggedCallId: string;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Timestamp;
+}
+
+export interface LoggedCallTag {
+  id: string;
+  name: string;
+  value: string | null;
+  loggedCallId: string;
+  projectId: string;
+}
+
+export interface ModelResponse {
+  id: string;
+  cacheKey: string;
+  respPayload: Json | null;
+  inputTokens: number | null;
+  outputTokens: number | null;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Timestamp;
+  scenarioVariantCellId: string;
+  cost: number | null;
+  requestedAt: Timestamp | null;
+  receivedAt: Timestamp | null;
+  statusCode: number | null;
+  errorMessage: string | null;
+  retryTime: Timestamp | null;
+  outdated: Generated<boolean>;
+}
+
+export interface OutputEvaluation {
+  id: string;
+  result: number;
+  details: string | null;
+  modelResponseId: string;
+  evaluationId: string;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Timestamp;
+}
+
+export interface Project {
+  id: string;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Timestamp;
+  personalProjectUserId: string | null;
+  name: Generated<string>;
+}
+
+export interface ProjectUser {
+  id: string;
+  role: "ADMIN" | "MEMBER" | "VIEWER";
+  projectId: string;
+  userId: string;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Timestamp;
+}
+
+export interface PromptVariant {
+  id: string;
+  label: string;
+  uiId: string;
+  visible: Generated<boolean>;
+  sortIndex: Generated<number>;
+  experimentId: string;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Timestamp;
+  promptConstructor: string;
+  model: string;
+  promptConstructorVersion: number;
+  modelProvider: string;
+}
+
+export interface ScenarioVariantCell {
+  id: string;
+  errorMessage: string | null;
+  promptVariantId: string;
+  testScenarioId: string;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Timestamp;
+  retrievalStatus: Generated<"COMPLETE" | "ERROR" | "IN_PROGRESS" | "PENDING">;
+  prompt: Json | null;
+  jobQueuedAt: Timestamp | null;
+  jobStartedAt: Timestamp | null;
+}
+
+export interface Session {
+  id: string;
+  sessionToken: string;
+  userId: string;
+  expires: Timestamp;
+}
+
+export interface TemplateVariable {
+  id: string;
+  label: string;
+  experimentId: string;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Timestamp;
+}
+
+export interface TestScenario {
+  id: string;
+  variableValues: Json;
+  uiId: string;
+  visible: Generated<boolean>;
+  sortIndex: Generated<number>;
+  experimentId: string;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Timestamp;
+}
+
+export interface User {
+  id: string;
+  name: string | null;
+  email: string | null;
+  emailVerified: Timestamp | null;
+  image: string | null;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Generated<Timestamp>;
+  role: Generated<"ADMIN" | "USER">;
+}
+
+export interface UserInvitation {
+  id: string;
+  projectId: string;
+  email: string;
+  role: "ADMIN" | "MEMBER" | "VIEWER";
+  invitationToken: string;
+  senderId: string;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Timestamp;
+}
+
+export interface VerificationToken {
+  identifier: string;
+  token: string;
+  expires: Timestamp;
+}
+
+export interface WorldChampEntrant {
+  id: string;
+  userId: string;
+  approved: Generated<boolean>;
+  createdAt: Generated<Timestamp>;
+  updatedAt: Timestamp;
+}
+
+export interface DB {
+  _prisma_migrations: _PrismaMigrations;
+  Account: Account;
+  ApiKey: ApiKey;
+  Dataset: Dataset;
+  DatasetEntry: DatasetEntry;
+  Evaluation: Evaluation;
+  Experiment: Experiment;
+  "graphile_worker.job_queues": GraphileWorkerJobQueues;
+  "graphile_worker.jobs": GraphileWorkerJobs;
+  "graphile_worker.known_crontabs": GraphileWorkerKnownCrontabs;
+  "graphile_worker.migrations": GraphileWorkerMigrations;
+  LoggedCall: LoggedCall;
+  LoggedCallModelResponse: LoggedCallModelResponse;
+  LoggedCallTag: LoggedCallTag;
+  ModelResponse: ModelResponse;
+  OutputEvaluation: OutputEvaluation;
+  Project: Project;
+  ProjectUser: ProjectUser;
+  PromptVariant: PromptVariant;
+  ScenarioVariantCell: ScenarioVariantCell;
+  Session: Session;
+  TemplateVariable: TemplateVariable;
+  TestScenario: TestScenario;
+  User: User;
+  UserInvitation: UserInvitation;
+  VerificationToken: VerificationToken;
+  WorldChampEntrant: WorldChampEntrant;
+}

app/src/server/emails/sendEmail.ts

@@ -0,0 +1,31 @@
+import { marked } from "marked";
+import nodemailer from "nodemailer";
+import { env } from "~/env.mjs";
+
+const transporter = nodemailer.createTransport({
+  // All the SMTP_ env vars come from https://app.brevo.com/settings/keys/smtp
+  // @ts-expect-error nodemailer types are wrong
+  host: env.SMTP_HOST,
+  port: env.SMTP_PORT,
+  auth: {
+    user: env.SMTP_LOGIN,
+    pass: env.SMTP_PASSWORD,
+  },
+});
+
+export const sendEmail = async (options: { to: string; subject: string; body: string }) => {
+  const bodyHtml = await marked.parseInline(options.body, { mangle: false });
+
+  try {
+    await transporter.sendMail({
+      from: env.SENDER_EMAIL,
+      to: options.to,
+      subject: options.subject,
+      html: bodyHtml,
+      text: options.body,
+    });
+  } catch (error) {
+    console.error("error sending email", error);
+    throw error;
+  }
+};

app/src/server/emails/sendProjectInvitation.ts

@@ -0,0 +1,29 @@
+import { env } from "~/env.mjs";
+import { sendEmail } from "./sendEmail";
+
+export const sendProjectInvitation = async ({
+  invitationToken,
+  recipientEmail,
+  invitationSenderName,
+  invitationSenderEmail,
+  projectName,
+}: {
+  invitationToken: string;
+  recipientEmail: string;
+  invitationSenderName: string;
+  invitationSenderEmail: string;
+  projectName: string;
+}) => {
+  const invitationLink = `${env.NEXT_PUBLIC_HOST}/invitations/${invitationToken}`;
+
+  const emailBody = `
+    <p>You have been invited to join ${projectName} by ${invitationSenderName} (${invitationSenderEmail}).</p>
+    <p>Click <a href="${invitationLink}">here</a> to accept the invitation.</p>
+    `;
+
+  await sendEmail({
+    to: recipientEmail,
+    subject: "You've been invited to join a project",
+    body: emailBody,
+  });
+};

app/src/server/tasks/defineTask.ts

@@ -1,15 +1,24 @@
-// Import necessary dependencies
+import { type Helpers, type Task, makeWorkerUtils } from "graphile-worker";
-import { quickAddJob, type Helpers, type Task } from "graphile-worker";
 import { env } from "~/env.mjs";
 
-// Define the defineTask function
+let workerUtilsPromise: ReturnType<typeof makeWorkerUtils> | null = null;
+
+function workerUtils() {
+  if (!workerUtilsPromise) {
+    workerUtilsPromise = makeWorkerUtils({
+      connectionString: env.DATABASE_URL,
+    });
+  }
+  return workerUtilsPromise;
+}
+
 function defineTask<TPayload>(
   taskIdentifier: string,
   taskHandler: (payload: TPayload, helpers: Helpers) => Promise<void>,
 ) {
   const enqueue = async (payload: TPayload, runAt?: Date) => {
     console.log("Enqueuing task", taskIdentifier, payload);
-    await quickAddJob({ connectionString: env.DATABASE_URL }, taskIdentifier, payload, { runAt });
+    await (await workerUtils()).addJob(taskIdentifier, payload, { runAt });
   };
 
   const handler = (payload: TPayload, helpers: Helpers) => {

app/src/state/logFiltersSlice.ts

@@ -0,0 +1,42 @@
+import { type SliceCreator } from "./store";
+
+export const comparators = ["=", "!=", "CONTAINS", "NOT_CONTAINS"] as const;
+
+export const defaultFilterableFields = ["Request", "Response", "Model", "Status Code"] as const;
+
+export interface LogFilter {
+  id: string;
+  field: string;
+  comparator: (typeof comparators)[number];
+  value: string;
+}
+
+export type LogFiltersSlice = {
+  filters: LogFilter[];
+  addFilter: (filter: LogFilter) => void;
+  updateFilter: (filter: LogFilter) => void;
+  deleteFilter: (id: string) => void;
+  clearSelectedLogIds: () => void;
+};
+
+export const createLogFiltersSlice: SliceCreator<LogFiltersSlice> = (set, get) => ({
+  filters: [],
+  addFilter: (filter: LogFilter) =>
+    set((state) => {
+      state.logFilters.filters.push(filter);
+    }),
+  updateFilter: (filter: LogFilter) =>
+    set((state) => {
+      const index = state.logFilters.filters.findIndex((f) => f.id === filter.id);
+      state.logFilters.filters[index] = filter;
+    }),
+  deleteFilter: (id: string) =>
+    set((state) => {
+      const index = state.logFilters.filters.findIndex((f) => f.id === id);
+      state.logFilters.filters.splice(index, 1);
+    }),
+  clearSelectedLogIds: () =>
+    set((state) => {
+      state.logFilters.filters = [];
+    }),
+});

app/src/state/selectedLogsSlice.ts

@@ -1,7 +1,5 @@
 import { type SliceCreator } from "./store";
 
-export const editorBackground = "#fafafa";
-
 export type SelectedLogsSlice = {
   selectedLogIds: Set<string>;
   toggleSelectedLogId: (id: string) => void;

app/src/state/store.ts

@@ -10,6 +10,7 @@ import {
 import { type APIClient } from "~/utils/api";
 import { persistOptions, type stateToPersist } from "./persist";
 import { type SelectedLogsSlice, createSelectedLogsSlice } from "./selectedLogsSlice";
+import { type LogFiltersSlice, createLogFiltersSlice } from "./logFiltersSlice";
 
 enableMapSet();
 
@@ -23,6 +24,7 @@ export type State = {
   selectedProjectId: string | null;
   setSelectedProjectId: (id: string) => void;
   selectedLogs: SelectedLogsSlice;
+  logFilters: LogFiltersSlice;
 };
 
 export type SliceCreator<T> = StateCreator<State, [["zustand/immer", never]], [], T>;
@@ -58,6 +60,7 @@ const useBaseStore = create<
           state.selectedProjectId = id;
         }),
       selectedLogs: createSelectedLogsSlice(set, get, ...rest),
+      logFilters: createLogFiltersSlice(set, get, ...rest),
     })),
     persistOptions,
   ),

app/src/theme/ChakraThemeProvider.tsx

@@ -18,7 +18,7 @@ const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpe
 
 const modalTheme = defineMultiStyleConfig({
   baseStyle: definePartsStyle({
-    dialog: { borderRadius: "sm" },
+    dialog: { borderRadius: "md", mx: 4 },
   }),
 });
 
@@ -45,7 +45,7 @@ const theme = extendTheme({
   components: {
     Button: {
       baseStyle: {
-        borderRadius: "sm",
+        borderRadius: "md",
       },
     },
     Input: {

app/src/utils/accessControl.ts

@@ -17,6 +17,8 @@ export const requireNothing = (ctx: TRPCContext) => {
 };
 
 export const requireIsProjectAdmin = async (projectId: string, ctx: TRPCContext) => {
+  ctx.markAccessControlRun();
+
   const userId = ctx.session?.user.id;
   if (!userId) {
     throw new TRPCError({ code: "UNAUTHORIZED" });
@@ -33,11 +35,11 @@ export const requireIsProjectAdmin = async (projectId: string, ctx: TRPCContext)
   if (!isAdmin) {
     throw new TRPCError({ code: "UNAUTHORIZED" });
   }
-
-  ctx.markAccessControlRun();
 };
 
 export const requireCanViewProject = async (projectId: string, ctx: TRPCContext) => {
+  ctx.markAccessControlRun();
+
   const userId = ctx.session?.user.id;
   if (!userId) {
     throw new TRPCError({ code: "UNAUTHORIZED" });
@@ -53,11 +55,11 @@ export const requireCanViewProject = async (projectId: string, ctx: TRPCContext)
   if (!canView) {
     throw new TRPCError({ code: "UNAUTHORIZED" });
   }
-
-  ctx.markAccessControlRun();
 };
 
 export const requireCanModifyProject = async (projectId: string, ctx: TRPCContext) => {
+  ctx.markAccessControlRun();
+
   const userId = ctx.session?.user.id;
   if (!userId) {
     throw new TRPCError({ code: "UNAUTHORIZED" });
@@ -74,11 +76,11 @@ export const requireCanModifyProject = async (projectId: string, ctx: TRPCContex
   if (!canModify) {
     throw new TRPCError({ code: "UNAUTHORIZED" });
   }
-
-  ctx.markAccessControlRun();
 };
 
 export const requireCanViewDataset = async (datasetId: string, ctx: TRPCContext) => {
+  ctx.markAccessControlRun();
+
   const dataset = await prisma.dataset.findFirst({
     where: {
       id: datasetId,
@@ -96,8 +98,6 @@ export const requireCanViewDataset = async (datasetId: string, ctx: TRPCContext)
   if (!dataset) {
     throw new TRPCError({ code: "UNAUTHORIZED" });
   }
-
-  ctx.markAccessControlRun();
 };
 
 export const requireCanModifyDataset = async (datasetId: string, ctx: TRPCContext) => {
@@ -105,13 +105,10 @@ export const requireCanModifyDataset = async (datasetId: string, ctx: TRPCContex
   await requireCanViewDataset(datasetId, ctx);
 };
 
-export const requireCanViewExperiment = async (experimentId: string, ctx: TRPCContext) => {
+export const requireCanViewExperiment = (experimentId: string, ctx: TRPCContext): Promise<void> => {
-  await prisma.experiment.findFirst({
-    where: { id: experimentId },
-  });
-
   // Right now all experiments are publicly viewable, so this is a no-op.
   ctx.markAccessControlRun();
+  return Promise.resolve();
 };
 
 export const canModifyExperiment = async (experimentId: string, userId: string) => {
@@ -136,6 +133,8 @@ export const canModifyExperiment = async (experimentId: string, userId: string)
 };
 
 export const requireCanModifyExperiment = async (experimentId: string, ctx: TRPCContext) => {
+  ctx.markAccessControlRun();
+
   const userId = ctx.session?.user.id;
   if (!userId) {
     throw new TRPCError({ code: "UNAUTHORIZED" });
@@ -144,6 +143,17 @@ export const requireCanModifyExperiment = async (experimentId: string, ctx: TRPC
   if (!(await canModifyExperiment(experimentId, userId))) {
     throw new TRPCError({ code: "UNAUTHORIZED" });
   }
-
+};
-  ctx.markAccessControlRun();
+
+export const requireIsAdmin = async (ctx: TRPCContext) => {
+  ctx.markAccessControlRun();
+
+  const userId = ctx.session?.user.id;
+  if (!userId) {
+    throw new TRPCError({ code: "UNAUTHORIZED" });
+  }
+
+  if (!(await isAdmin(userId))) {
+    throw new TRPCError({ code: "UNAUTHORIZED" });
+  }
 };

app/src/utils/hooks.ts

@@ -15,8 +15,8 @@ export const useExperiments = () => {
 export const useExperiment = () => {
   const router = useRouter();
   const experiment = api.experiments.get.useQuery(
-    { id: router.query.id as string },
+    { slug: router.query.experimentSlug as string },
-    { enabled: !!router.query.id },
+    { enabled: !!router.query.experimentSlug },
   );
 
   return experiment;
@@ -179,9 +179,29 @@ export const useScenarioVars = () => {
 export const useLoggedCalls = () => {
   const selectedProjectId = useAppStore((state) => state.selectedProjectId);
   const { page, pageSize } = usePageParams();
+  const filters = useAppStore((state) => state.logFilters.filters);
 
-  return api.loggedCalls.list.useQuery(
+  const { data, isLoading, ...rest } = api.loggedCalls.list.useQuery(
-    { projectId: selectedProjectId ?? "", page, pageSize },
+    { projectId: selectedProjectId ?? "", page, pageSize, filters },
+    { enabled: !!selectedProjectId },
+  );
+
+  const [stableData, setStableData] = useState(data);
+
+  useEffect(() => {
+    // Prevent annoying flashes while logs are loading from the server
+    if (!isLoading) {
+      setStableData(data);
+    }
+  }, [data, isLoading]);
+
+  return { data: stableData, isLoading, ...rest };
+};
+
+export const useTagNames = () => {
+  const selectedProjectId = useAppStore((state) => state.selectedProjectId);
+  return api.loggedCalls.getTagNames.useQuery(
+    { projectId: selectedProjectId ?? "" },
     { enabled: !!selectedProjectId },
   );
 };

client-libs/typescript/package.json

@@ -14,11 +14,13 @@
   "license": "Apache-2.0",
   "dependencies": {
     "form-data": "^4.0.0",
+    "lodash-es": "^4.17.21",
     "node-fetch": "^3.3.2",
     "openai-beta": "npm:openai@4.0.0-beta.7",
     "openai-legacy": "npm:openai@3.3.0"
   },
   "devDependencies": {
+    "@types/lodash-es": "^4.17.8",
     "@types/node": "^20.4.8",
     "dotenv": "^16.3.1",
     "tsx": "^3.12.7",

client-libs/typescript/src/openai/mergeChunks.ts

@@ -1,8 +1,9 @@
 import { ChatCompletion, ChatCompletionChunk } from "openai-beta/resources/chat";
+import { omit } from "lodash-es";
 
 export default function mergeChunks(
   base: ChatCompletion | null,
-  chunk: ChatCompletionChunk
+  chunk: ChatCompletionChunk,
 ): ChatCompletion {
   if (base === null) {
     return mergeChunks({ ...chunk, choices: [] }, chunk);

pnpm-lock.yaml

@@ -50,6 +50,9 @@ importers:
       '@prisma/client':
         specifier: ^4.14.0
         version: 4.14.0(prisma@4.14.0)
+      '@sendinblue/client':
+        specifier: ^3.3.1
+        version: 3.3.1
       '@sentry/nextjs':
         specifier: ^7.61.0
         version: 7.61.0(next@13.4.2)(react@18.2.0)(webpack@5.88.2)
@@ -131,18 +134,24 @@ importers:
       kysely:
         specifier: ^0.26.1
         version: 0.26.1
+      kysely-codegen:
+        specifier: ^0.10.1
+        version: 0.10.1(kysely@0.26.1)(pg@8.11.2)
       lodash-es:
         specifier: ^4.17.21
         version: 4.17.21
       lucide-react:
         specifier: ^0.265.0
         version: 0.265.0(react@18.2.0)
+      marked:
+        specifier: ^7.0.3
+        version: 7.0.3
       next:
         specifier: ^13.4.2
         version: 13.4.2(@babel/core@7.22.10)(react-dom@18.2.0)(react@18.2.0)
       next-auth:
         specifier: ^4.22.1
-        version: 4.22.1(next@13.4.2)(react-dom@18.2.0)(react@18.2.0)
+        version: 4.22.1(next@13.4.2)(nodemailer@6.9.4)(react-dom@18.2.0)(react@18.2.0)
       next-query-params:
         specifier: ^4.2.3
         version: 4.2.3(next@13.4.2)(react@18.2.0)(use-query-params@2.2.1)
@@ -152,6 +161,9 @@ importers:
       nextjs-routes:
         specifier: ^2.0.1
         version: 2.0.1(next@13.4.2)
+      nodemailer:
+        specifier: ^6.9.4
+        version: 6.9.4
       openai:
         specifier: 4.0.0-beta.7
         version: 4.0.0-beta.7
@@ -276,6 +288,9 @@ importers:
       '@types/node':
         specifier: ^18.16.0
         version: 18.16.0
+      '@types/nodemailer':
+        specifier: ^6.4.9
+        version: 6.4.9
       '@types/pg':
         specifier: ^8.10.2
         version: 8.10.2
@@ -345,6 +360,9 @@ importers:
       form-data:
         specifier: ^4.0.0
         version: 4.0.0
+      lodash-es:
+        specifier: ^4.17.21
+        version: 4.17.21
       node-fetch:
         specifier: ^3.3.2
         version: 3.3.2
@@ -355,6 +373,9 @@ importers:
         specifier: npm:openai@3.3.0
         version: /openai@3.3.0
     devDependencies:
+      '@types/lodash-es':
+        specifier: ^4.17.8
+        version: 4.17.8
       '@types/node':
         specifier: ^20.4.8
         version: 20.4.8
@@ -2433,7 +2454,7 @@ packages:
       next-auth: ^4
     dependencies:
       '@prisma/client': 4.14.0(prisma@4.14.0)
-      next-auth: 4.22.1(next@13.4.2)(react-dom@18.2.0)(react@18.2.0)
+      next-auth: 4.22.1(next@13.4.2)(nodemailer@6.9.4)(react-dom@18.2.0)(react@18.2.0)
     dev: false
 
   /@next/env@13.4.2:
@@ -2629,6 +2650,16 @@ packages:
     resolution: {integrity: sha512-0xd7qez0AQ+MbHatZTlI1gu5vkG8r7MYRUJAHPAHJBmGLs16zpkrpAVLvjQKQOqaXPDUBwOiJzNc00znHSCVBw==}
     dev: true
 
+  /@sendinblue/client@3.3.1:
+    resolution: {integrity: sha512-5xNGeT5gKD5XOvl5vHk682wvjJxRPnH3nc2vOZIaDX9XKuhoMaYXyEdqlP0R/Z6gEZiHhzpZxzrdiwlngGzsgw==}
+    dependencies:
+      '@types/bluebird': 3.5.38
+      '@types/request': 2.48.8
+      bluebird: 3.7.2
+      lodash: 4.17.21
+      request: 2.88.2
+    dev: false
+
   /@sentry-internal/tracing@7.61.0:
     resolution: {integrity: sha512-zTr+MXEG4SxNxif42LIgm2RQn+JRXL2NuGhRaKSD2i4lXKFqHVGlVdoWqY5UfqnnJPokiTWIj9ejR8I5HV8Ogw==}
     engines: {node: '>=8'}
@@ -2951,13 +2982,21 @@ packages:
     resolution: {integrity: sha512-oYO/U4VD1DavwrKuCSQWdLG+5K22SLPem2OQaHmFcQuwHoVeGC+JGVRji2MUqZUAIQZHEonOeVfAX09hYiLsdg==}
     dev: false
 
+  /@types/bluebird@3.5.38:
+    resolution: {integrity: sha512-yR/Kxc0dd4FfwtEoLZMoqJbM/VE/W7hXn/MIjb+axcwag0iFmSPK7OBUZq1YWLynJUoWQkfUrI7T0HDqGApNSg==}
+    dev: false
+
   /@types/body-parser@1.19.2:
     resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==}
     dependencies:
       '@types/connect': 3.4.35
-      '@types/node': 18.16.0
+      '@types/node': 20.4.10
     dev: true
 
+  /@types/caseless@0.12.2:
+    resolution: {integrity: sha512-6ckxMjBBD8URvjB6J3NcnuAn5Pkl7t3TizAg+xdlzzQGSPSmBcXf8KoIH0ua/i+tio+ZRUHEXp0HEmvaR4kt0w==}
+    dev: false
+
   /@types/chai-subset@1.3.3:
     resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==}
     dependencies:
@@ -3060,7 +3099,7 @@ packages:
   /@types/express-serve-static-core@4.17.35:
     resolution: {integrity: sha512-wALWQwrgiB2AWTT91CB62b6Yt0sNHpznUXeZEcnPU3DRdlDIz74x8Qg1UUYKSVFi+va5vKOLYRBI1bRKiLLKIg==}
     dependencies:
-      '@types/node': 18.16.0
+      '@types/node': 20.4.10
       '@types/qs': 6.9.7
       '@types/range-parser': 1.2.4
       '@types/send': 0.17.1
@@ -3153,6 +3192,12 @@ packages:
     resolution: {integrity: sha512-0mHckf6D2DiIAzh8fM8f3HQCvMKDpK94YQ0DSVkfWTG9BZleYIWudw9cJxX8oCk9bM+vAkDyujDV6dmKHbvQpg==}
     dev: true
 
+  /@types/nodemailer@6.4.9:
+    resolution: {integrity: sha512-XYG8Gv+sHjaOtUpiuytahMy2mM3rectgroNbs6R3djZEKmPNiIJwe9KqOJBGzKKnNZNKvnuvmugBgpq3w/S0ig==}
+    dependencies:
+      '@types/node': 20.4.10
+    dev: true
+
   /@types/parse-json@4.0.0:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
     dev: false
@@ -3212,6 +3257,15 @@ packages:
       '@types/scheduler': 0.16.3
       csstype: 3.1.2
 
+  /@types/request@2.48.8:
+    resolution: {integrity: sha512-whjk1EDJPcAR2kYHRbFl/lKeeKYTi05A15K9bnLInCVroNDCtXce57xKdI0/rQaA3K+6q0eFyUBPmqfSndUZdQ==}
+    dependencies:
+      '@types/caseless': 0.12.2
+      '@types/node': 20.4.10
+      '@types/tough-cookie': 4.0.2
+      form-data: 2.5.1
+    dev: false
+
   /@types/scheduler@0.16.3:
     resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
 
@@ -3231,9 +3285,13 @@ packages:
     dependencies:
       '@types/http-errors': 2.0.1
       '@types/mime': 3.0.1
-      '@types/node': 18.16.0
+      '@types/node': 20.4.10
     dev: true
 
+  /@types/tough-cookie@4.0.2:
+    resolution: {integrity: sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==}
+    dev: false
+
   /@types/unist@2.0.7:
     resolution: {integrity: sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==}
     dev: false
@@ -3729,6 +3787,17 @@ packages:
       is-shared-array-buffer: 1.0.2
     dev: true
 
+  /asn1@0.2.6:
+    resolution: {integrity: sha512-ix/FxPn0MDjeyJ7i/yoHGFt/EX6LyNbxSEhPPXODPL+KB0VPk86UYfL0lMdy+KCnv+fmvIzySwaK5COwqVbWTQ==}
+    dependencies:
+      safer-buffer: 2.1.2
+    dev: false
+
+  /assert-plus@1.0.0:
+    resolution: {integrity: sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==}
+    engines: {node: '>=0.8'}
+    dev: false
+
   /assert@2.0.0:
     resolution: {integrity: sha512-se5Cd+js9dXJnu6Ag2JFc00t+HmHOen+8Q+L7O9zI0PqQXr20uk2J0XQqMxZEeo5U50o8Nvmmx7dZrl+Ufr35A==}
     dependencies:
@@ -3768,6 +3837,14 @@ packages:
     resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
     engines: {node: '>= 0.4'}
 
+  /aws-sign2@0.7.0:
+    resolution: {integrity: sha512-08kcGqnYf/YmjoRhfxyu+CLxBjUtHLXLXX/vUfx9l2LYzG3c1m61nrpyFUZI6zeS+Li/wWMMidD9KgrqtGq3mA==}
+    dev: false
+
+  /aws4@1.12.0:
+    resolution: {integrity: sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg==}
+    dev: false
+
   /axe-core@4.7.2:
     resolution: {integrity: sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g==}
     engines: {node: '>=4'}
@@ -3857,6 +3934,12 @@ packages:
     engines: {node: ^4.5.0 || >= 5.9}
     dev: false
 
+  /bcrypt-pbkdf@1.0.2:
+    resolution: {integrity: sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==}
+    dependencies:
+      tweetnacl: 0.14.5
+    dev: false
+
   /big.js@5.2.2:
     resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
     dev: true
@@ -3866,6 +3949,10 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
+  /bluebird@3.7.2:
+    resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
+    dev: false
+
   /body-parser@1.20.1:
     resolution: {integrity: sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
@@ -3967,6 +4054,10 @@ packages:
   /caniuse-lite@1.0.30001519:
     resolution: {integrity: sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg==}
 
+  /caseless@0.12.0:
+    resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==}
+    dev: false
+
   /chai@4.3.7:
     resolution: {integrity: sha512-HLnAzZ2iupm25PlN0xFreAlBA5zaBSv3og0DdeGA4Ar6h6rJ3A0rolRUKJhSF2V10GZKDgWF/VmAEsNWjCRB+A==}
     engines: {node: '>=4'}
@@ -4218,6 +4309,10 @@ packages:
       toggle-selection: 1.0.6
     dev: false
 
+  /core-util-is@1.0.2:
+    resolution: {integrity: sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==}
+    dev: false
+
   /core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
     dev: false
@@ -4405,6 +4500,13 @@ packages:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
     dev: true
 
+  /dashdash@1.14.1:
+    resolution: {integrity: sha512-jRFi8UDGo6j+odZiEpjazZaWqEal3w/basFjQHQEwVtZJGDpxbH1MeYluwCS8Xq5wmLJooDlMgvVarmWfGM44g==}
+    engines: {node: '>=0.10'}
+    dependencies:
+      assert-plus: 1.0.0
+    dev: false
+
   /data-uri-to-buffer@4.0.1:
     resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
     engines: {node: '>= 12'}
@@ -4584,6 +4686,13 @@ packages:
       readable-stream: 2.3.8
     dev: false
 
+  /ecc-jsbn@0.1.2:
+    resolution: {integrity: sha512-eh9O+hwRHNbG4BLTjEl3nw044CkGm5X6LoaCf7LPp7UU8Qrt47JYNi6nPX8xjW97TKGKm1ouctg0QSpZe9qrnw==}
+    dependencies:
+      jsbn: 0.1.1
+      safer-buffer: 2.1.2
+    dev: false
+
   /ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
     dev: false
@@ -5243,6 +5352,15 @@ packages:
       type: 2.7.2
     dev: false
 
+  /extend@3.0.2:
+    resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+    dev: false
+
+  /extsprintf@1.3.0:
+    resolution: {integrity: sha512-11Ndz7Nv+mvAC1j0ktTa7fAb0vLyGGX+rMHNBYQviQDGU0Hw7lhctJANqbPhu9nV9/izT/IntTgZ7Im/9LJs9g==}
+    engines: {'0': node >=0.6.0}
+    dev: false
+
   /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -5371,10 +5489,32 @@ packages:
     dependencies:
       is-callable: 1.2.7
 
+  /forever-agent@0.6.1:
+    resolution: {integrity: sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==}
+    dev: false
+
   /form-data-encoder@1.7.2:
     resolution: {integrity: sha512-qfqtYan3rxrnCk1VYaA4H+Ms9xdpPqvLZa6xmMgFvhO32x7/3J/ExcTd6qpxM0vH2GdMI+poehyBZvqfMTto8A==}
     dev: false
 
+  /form-data@2.3.3:
+    resolution: {integrity: sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==}
+    engines: {node: '>= 0.12'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+    dev: false
+
+  /form-data@2.5.1:
+    resolution: {integrity: sha512-m21N3WOmEEURgk6B9GLOE4RuWOFf28Lhh9qGYeNlGq4VDXUlJy2th2slBNU8Gp8EzloYZOibZJ7t5ecIrFSjVA==}
+    engines: {node: '>= 0.12'}
+    dependencies:
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      mime-types: 2.1.35
+    dev: false
+
   /form-data@3.0.1:
     resolution: {integrity: sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==}
     engines: {node: '>= 6'}
@@ -5527,6 +5667,12 @@ packages:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
+  /getpass@0.1.7:
+    resolution: {integrity: sha512-0fzj9JxOLfJ+XGLhR8ze3unN0KZCgZwiSSDz168VERjK8Wl8kVSdcu2kspd4s4wtAa1y/qrVRiAA0WclVsu0ng==}
+    dependencies:
+      assert-plus: 1.0.0
+    dev: false
+
   /github-buttons@2.27.0:
     resolution: {integrity: sha512-PmfRMI2Rttg/2jDfKBeSl621sEznrsKF019SuoLdoNlO7qRUZaOyEI5Li4uW+79pVqnDtKfIEVuHTIJ5lgy64w==}
     dev: false
@@ -5688,6 +5834,20 @@ packages:
       uglify-js: 3.17.4
     dev: true
 
+  /har-schema@2.0.0:
+    resolution: {integrity: sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==}
+    engines: {node: '>=4'}
+    dev: false
+
+  /har-validator@5.1.5:
+    resolution: {integrity: sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==}
+    engines: {node: '>=6'}
+    deprecated: this library is no longer supported
+    dependencies:
+      ajv: 6.12.6
+      har-schema: 2.0.0
+    dev: false
+
   /has-bigints@1.0.2:
     resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==}
     dev: true
@@ -5776,6 +5936,15 @@ packages:
       toidentifier: 1.0.1
     dev: false
 
+  /http-signature@1.2.0:
+    resolution: {integrity: sha512-CAbnr6Rz4CYQkLYUtSNXxQPUH2gK8f3iWexVlsnMeD+GjlsQ0Xsy1cOX+mN3dtxYomRy21CiOzU8Uhw6OwncEQ==}
+    engines: {node: '>=0.8', npm: '>=1.3.7'}
+    dependencies:
+      assert-plus: 1.0.0
+      jsprim: 1.4.2
+      sshpk: 1.17.0
+    dev: false
+
   /https-proxy-agent@5.0.1:
     resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
     engines: {node: '>= 6'}
@@ -6046,6 +6215,10 @@ packages:
     dependencies:
       which-typed-array: 1.1.11
 
+  /is-typedarray@1.0.0:
+    resolution: {integrity: sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA==}
+    dev: false
+
   /is-weakref@1.0.2:
     resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==}
     dependencies:
@@ -6078,6 +6251,10 @@ packages:
     requiresBuild: true
     dev: false
 
+  /isstream@0.1.2:
+    resolution: {integrity: sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==}
+    dev: false
+
   /jest-worker@27.5.1:
     resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
     engines: {node: '>= 10.13.0'}
@@ -6109,6 +6286,10 @@ packages:
     dependencies:
       argparse: 2.0.1
 
+  /jsbn@0.1.1:
+    resolution: {integrity: sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==}
+    dev: false
+
   /jsesc@2.5.2:
     resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
     engines: {node: '>=4'}
@@ -6149,6 +6330,10 @@ packages:
   /json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
 
+  /json-schema@0.4.0:
+    resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
+    dev: false
+
   /json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: true
@@ -6157,6 +6342,10 @@ packages:
     resolution: {integrity: sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==}
     dev: false
 
+  /json-stringify-safe@5.0.1:
+    resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
+    dev: false
+
   /json5@1.0.2:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
@@ -6185,6 +6374,16 @@ packages:
     resolution: {integrity: sha512-S6cATIPVv1z0IlxdN+zUk5EPjkGCdnhN4wVSBlvoUO1tOLJootbo9CquNJmbIh4yikWHiUedhRYrNPn1arpEmQ==}
     dev: false
 
+  /jsprim@1.4.2:
+    resolution: {integrity: sha512-P2bSOMAc/ciLz6DzgjVlGJP9+BrJWu5UDGK70C2iweC5QBIeFf0ZXRvGjEj2uYgrY2MkAAhsSWHDWlFtEroZWw==}
+    engines: {node: '>=0.6.0'}
+    dependencies:
+      assert-plus: 1.0.0
+      extsprintf: 1.3.0
+      json-schema: 0.4.0
+      verror: 1.10.0
+    dev: false
+
   /jsx-ast-utils@3.3.5:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
@@ -6195,6 +6394,30 @@ packages:
       object.values: 1.1.6
     dev: true
 
+  /kysely-codegen@0.10.1(kysely@0.26.1)(pg@8.11.2):
+    resolution: {integrity: sha512-8Bslh952gN5gtucRv4jTZDFD18RBioS6M50zHfe5kwb5iSyEAunU4ZYMdHzkHraa4zxjg5/183XlOryBCXLRIw==}
+    hasBin: true
+    peerDependencies:
+      better-sqlite3: '>=7.6.2'
+      kysely: '>=0.19.12'
+      mysql2: ^2.3.3 || ^3.0.0
+      pg: ^8.8.0
+    peerDependenciesMeta:
+      better-sqlite3:
+        optional: true
+      mysql2:
+        optional: true
+      pg:
+        optional: true
+    dependencies:
+      chalk: 4.1.2
+      dotenv: 16.3.1
+      kysely: 0.26.1
+      micromatch: 4.0.5
+      minimist: 1.2.8
+      pg: 8.11.2
+    dev: false
+
   /kysely@0.26.1:
     resolution: {integrity: sha512-FVRomkdZofBu3O8SiwAOXrwbhPZZr8mBN5ZeUWyprH29jzvy6Inzqbd0IMmGxpd4rcOCL9HyyBNWBa8FBqDAdg==}
     engines: {node: '>=14.0.0'}
@@ -6352,6 +6575,12 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
+  /marked@7.0.3:
+    resolution: {integrity: sha512-ev2uM40p0zQ/GbvqotfKcSWEa59fJwluGZj5dcaUOwDRrB1F3dncdXy8NWUApk4fi8atU3kTBOwjyjZ0ud0dxw==}
+    engines: {node: '>= 16'}
+    hasBin: true
+    dev: false
+
   /md5@2.3.0:
     resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==}
     dependencies:
@@ -6409,7 +6638,6 @@ packages:
     dependencies:
       braces: 3.0.2
       picomatch: 2.3.1
-    dev: true
 
   /mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
@@ -6519,7 +6747,7 @@ packages:
   /neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
 
-  /next-auth@4.22.1(next@13.4.2)(react-dom@18.2.0)(react@18.2.0):
+  /next-auth@4.22.1(next@13.4.2)(nodemailer@6.9.4)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-NTR3f6W7/AWXKw8GSsgSyQcDW6jkslZLH8AiZa5PQ09w1kR8uHtR9rez/E9gAq/o17+p0JYHE8QjF3RoniiObA==}
     peerDependencies:
       next: ^12.2.5 || ^13
@@ -6535,6 +6763,7 @@ packages:
       cookie: 0.5.0
       jose: 4.14.4
       next: 13.4.2(@babel/core@7.22.10)(react-dom@18.2.0)(react@18.2.0)
+      nodemailer: 6.9.4
       oauth: 0.9.15
       openid-client: 5.4.3
       preact: 10.16.0
@@ -6670,11 +6899,20 @@ packages:
   /node-releases@2.0.13:
     resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
 
+  /nodemailer@6.9.4:
+    resolution: {integrity: sha512-CXjQvrQZV4+6X5wP6ZIgdehJamI63MFoYFGGPtHudWym9qaEHDNdPzaj5bfMCvxG1vhAileSWW90q7nL0N36mA==}
+    engines: {node: '>=6.0.0'}
+    dev: false
+
   /normalize-path@3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /oauth-sign@0.9.0:
+    resolution: {integrity: sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==}
+    dev: false
+
   /oauth@0.9.15:
     resolution: {integrity: sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==}
     dev: false
@@ -6966,6 +7204,10 @@ packages:
     resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
     dev: true
 
+  /performance-now@2.1.0:
+    resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==}
+    dev: false
+
   /pg-cloudflare@1.1.1:
     resolution: {integrity: sha512-xWPagP/4B6BgFO+EKz3JONXv3YDgvkbVrGw2mTo3D6tVDQRh1e7cqVGvyR3BE+eQgAvx1XhW/iEASj4/jCWl3Q==}
     requiresBuild: true
@@ -7243,6 +7485,10 @@ packages:
     resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
     dev: false
 
+  /psl@1.9.0:
+    resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==}
+    dev: false
+
   /punycode@2.3.0:
     resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
     engines: {node: '>=6'}
@@ -7261,6 +7507,11 @@ packages:
       side-channel: 1.0.4
     dev: false
 
+  /qs@6.5.3:
+    resolution: {integrity: sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==}
+    engines: {node: '>=0.6'}
+    dev: false
+
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
@@ -7689,6 +7940,33 @@ packages:
     engines: {git: '>=2.11.0', node: '>=16.6.0', npm: '>=7.19.0', yarn: '>=1.7.0'}
     dev: false
 
+  /request@2.88.2:
+    resolution: {integrity: sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==}
+    engines: {node: '>= 6'}
+    deprecated: request has been deprecated, see https://github.com/request/request/issues/3142
+    dependencies:
+      aws-sign2: 0.7.0
+      aws4: 1.12.0
+      caseless: 0.12.0
+      combined-stream: 1.0.8
+      extend: 3.0.2
+      forever-agent: 0.6.1
+      form-data: 2.3.3
+      har-validator: 5.1.5
+      http-signature: 1.2.0
+      is-typedarray: 1.0.0
+      isstream: 0.1.2
+      json-stringify-safe: 5.0.1
+      mime-types: 2.1.35
+      oauth-sign: 0.9.0
+      performance-now: 2.1.0
+      qs: 6.5.3
+      safe-buffer: 5.2.1
+      tough-cookie: 2.5.0
+      tunnel-agent: 0.6.0
+      uuid: 3.4.0
+    dev: false
+
   /require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -7999,6 +8277,22 @@ packages:
     engines: {node: '>= 10.x'}
     dev: false
 
+  /sshpk@1.17.0:
+    resolution: {integrity: sha512-/9HIEs1ZXGhSPE8X6Ccm7Nam1z8KcoCqPdI7ecm1N33EzAetWahvQWVqLZtaZQ+IDKX4IyA2o0gBzqIMkAagHQ==}
+    engines: {node: '>=0.10.0'}
+    hasBin: true
+    dependencies:
+      asn1: 0.2.6
+      assert-plus: 1.0.0
+      bcrypt-pbkdf: 1.0.2
+      dashdash: 1.14.1
+      ecc-jsbn: 0.1.2
+      getpass: 0.1.7
+      jsbn: 0.1.1
+      safer-buffer: 2.1.2
+      tweetnacl: 0.14.5
+    dev: false
+
   /stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
     dev: true
@@ -8286,6 +8580,14 @@ packages:
     engines: {node: '>=0.6'}
     dev: false
 
+  /tough-cookie@2.5.0:
+    resolution: {integrity: sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==}
+    engines: {node: '>=0.8'}
+    dependencies:
+      psl: 1.9.0
+      punycode: 2.3.0
+    dev: false
+
   /tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
     dev: false
@@ -8365,6 +8667,16 @@ packages:
     optionalDependencies:
       fsevents: 2.3.2
 
+  /tunnel-agent@0.6.0:
+    resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: false
+
+  /tweetnacl@0.14.5:
+    resolution: {integrity: sha512-KXXFFdAbFXY4geFIwoyNK+f5Z1b7swfXABfL7HXCmoIWMKU3dmS26672A4EeQtDzLKy7SXmfBu51JolvEKwtGA==}
+    dev: false
+
   /type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -8630,6 +8942,12 @@ packages:
     engines: {node: '>= 0.4.0'}
     dev: false
 
+  /uuid@3.4.0:
+    resolution: {integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==}
+    deprecated: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
+    hasBin: true
+    dev: false
+
   /uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
@@ -8645,6 +8963,15 @@ packages:
     engines: {node: '>= 0.8'}
     dev: false
 
+  /verror@1.10.0:
+    resolution: {integrity: sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==}
+    engines: {'0': node >=0.6.0}
+    dependencies:
+      assert-plus: 1.0.0
+      core-util-is: 1.0.2
+      extsprintf: 1.3.0
+    dev: false
+
   /victory-vendor@36.6.11:
     resolution: {integrity: sha512-nT8kCiJp8dQh8g991J/R5w5eE2KnO8EAIP0xocWlh9l2okngMWglOPoMZzJvek8Q1KUc4XE/mJxTZnvOB1sTYg==}
     dependencies: