Properly use isDisabled

Update instructions
Pass variant to SelectModelModal
2023-07-20 22:54:38 -07:00 · 2023-07-20 22:42:51 -07:00 · 2023-07-20 22:39:32 -07:00 · 2023-07-20 22:39:14 -07:00 · 2023-07-20 22:38:42 -07:00 · 2023-07-20 22:38:09 -07:00
159 changed files with 2032 additions and 6556 deletions
--- a/.env.example
+++ b/.env.example
@@ -17,17 +17,12 @@ DATABASE_URL="postgresql://postgres:postgres@localhost:5432/openpipe?schema=publ
 # https://help.openai.com/en/articles/4936850-where-do-i-find-my-secret-api-key
 OPENAI_API_KEY=""

-# Replicate API token. Create a token here: https://replicate.com/account/api-tokens
-REPLICATE_API_TOKEN=""
-
 NEXT_PUBLIC_SOCKET_URL="http://localhost:3318"

 # Next Auth
 NEXTAUTH_SECRET="your_secret"
 NEXTAUTH_URL="http://localhost:3000"

-NEXT_PUBLIC_HOST="http://localhost:3000"
-
 # Next Auth Github Provider
 GITHUB_CLIENT_ID="your_client_id"
 GITHUB_CLIENT_SECRET="your_secret"
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -37,7 +37,6 @@ const config = {
      "warn",
      { vars: "all", varsIgnorePattern: "^_", args: "after-used", argsIgnorePattern: "^_" },
    ],
-    "react/no-unescaped-entities": "off",
  },
 };

--- a/.gitignore
+++ b/.gitignore
@@ -40,6 +40,3 @@ yarn-error.log*

 # typescript
 *.tsbuildinfo
-
-# Sentry Auth Token
-.sentryclirc
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,2 +1,2 @@
-*.schema.json
+src/codegen/openai.schema.json
 pnpm-lock.yaml
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,3 +1,6 @@
 {
-  "eslint.format.enable": true
+  "eslint.format.enable": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
 }
--- a/@types/nextjs-routes.d.ts
+++ b/@types/nextjs-routes.d.ts
@@ -13,17 +13,10 @@ declare module "nextjs-routes" {
  export type Route =
    | StaticRoute<"/account/signin">
    | DynamicRoute<"/api/auth/[...nextauth]", { "nextauth": string[] }>
-    | StaticRoute<"/api/experiments/og-image">
-    | StaticRoute<"/api/sentry-example-api">
    | DynamicRoute<"/api/trpc/[trpc]", { "trpc": string }>
-    | DynamicRoute<"/data/[id]", { "id": string }>
-    | StaticRoute<"/data">
    | DynamicRoute<"/experiments/[id]", { "id": string }>
    | StaticRoute<"/experiments">
-    | StaticRoute<"/">
-    | StaticRoute<"/sentry-example-page">
-    | StaticRoute<"/world-champs">
-    | StaticRoute<"/world-champs/signup">;
+    | StaticRoute<"/">;

  interface StaticRoute<Pathname> {
    pathname: Pathname;
--- a/3
+++ b/3
@@ -20,9 +20,6 @@ FROM base as builder
 # Include all NEXT_PUBLIC_* env vars here
 ARG NEXT_PUBLIC_POSTHOG_KEY
 ARG NEXT_PUBLIC_SOCKET_URL
-ARG NEXT_PUBLIC_HOST
-ARG NEXT_PUBLIC_SENTRY_DSN
-ARG SENTRY_AUTH_TOKEN

 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
--- a/README.md
+++ b/README.md
@@ -1,61 +1,49 @@
-<!-- <img src="https://github.com/openpipe/openpipe/assets/41524992/ca59596e-eb80-40f9-921f-6d67f6e6d8fa" width="72px" /> -->
+<img src="https://github.com/openpipe/openpipe/assets/41524992/ca59596e-eb80-40f9-921f-6d67f6e6d8fa" width="72px" />

 # OpenPipe

-OpenPipe is a flexible playground for comparing and optimizing LLM prompts. It lets you quickly generate, test and compare candidate prompts, and can automatically [translate](#-translate-between-model-apis) those prompts between models.
-
-<img src="https://github.com/openpipe/openpipe/assets/41524992/219a844e-3f4e-4f6b-8066-41348b42977b" alt="demo">
-
-You can use our hosted version of OpenPipe at https://openpipe.ai. You can also clone this repository and [run it locally](#running-locally).
+OpenPipe is a flexible playground for comparing and optimizing LLM prompts. It lets you quickly generate, test and compare candidate prompts with realistic sample data.

 ## Sample Experiments

-These are simple experiments users have created that show how OpenPipe works. Feel free to fork them and start experimenting yourself.
+These are simple experiments users have created that show how OpenPipe works.

- [Twitter Sentiment Analysis](https://app.openpipe.ai/experiments/62c20a73-2012-4a64-973c-4b665ad46a57)
+- [Country Capitals](https://app.openpipe.ai/experiments/11111111-1111-1111-1111-111111111111)
 - [Reddit User Needs](https://app.openpipe.ai/experiments/22222222-2222-2222-2222-222222222222)
 - [OpenAI Function Calls](https://app.openpipe.ai/experiments/2ebbdcb3-ed51-456e-87dc-91f72eaf3e2b)
 - [Activity Classification](https://app.openpipe.ai/experiments/3950940f-ab6b-4b74-841d-7e9dbc4e4ff8)

-## Supported Models
+<img src="https://github.com/openpipe/openpipe/assets/176426/fc7624c6-5b65-4d4d-82b7-4a816f3e5678" alt="demo" height="400px">

- All models available through the OpenAI [chat completion API](https://platform.openai.com/docs/guides/gpt/chat-completions-api)
- Llama2 [7b chat](https://replicate.com/a16z-infra/llama7b-v2-chat), [13b chat](https://replicate.com/a16z-infra/llama13b-v2-chat), [70b chat](https://replicate.com/replicate/llama70b-v2-chat).
- Anthropic's [Claude 1 Instant](https://www.anthropic.com/index/introducing-claude) and [Claude 2](https://www.anthropic.com/index/claude-2)
+You can use our hosted version of OpenPipe at [https://openpipe.ai]. You can also clone this repository and [run it locally](#running-locally).

-## Features
+## High-Level Features

-### 🔍 Visualize Responses
+**Configure Multiple Prompts**  
+Set up multiple prompt configurations and compare their output side-by-side. Each configuration can be configured independently.

+**Visualize Responses**  
 Inspect prompt completions side-by-side.

-### 🧪 Bulk-Test
-
-OpenPipe lets you _template_ a prompt. Use the templating feature to run the prompts you're testing against many potential inputs for broad coverage of your problem space.
-
-### 📟 Translate between Model APIs
-
-Write your prompt in one format and automatically convert it to work with any other model.
-
-<img width="480" alt="Screenshot 2023-08-01 at 11 55 38 PM" src="https://github.com/OpenPipe/OpenPipe/assets/41524992/1e19ccf2-96b6-4e93-a3a5-1449710d1b5b" alt="translate between models">
-
-<br><br>
-
-### 🛠️ Refine Your Prompts Automatically
-
-Use a growing database of best-practice refinements to improve your prompts automatically.
-
-<img width="480" alt="Screenshot 2023-08-01 at 11 55 38 PM" src="https://github.com/OpenPipe/OpenPipe/assets/41524992/87a27fe7-daef-445c-a5e2-1c82b23f9f99" alt="add function call">
-
-<br><br>
-
-### 🪄 Auto-generate Test Scenarios
+**Test Many Inputs**  
+OpenPipe lets you _template_ a prompt. Use the templating feature to run the prompts you're testing against many potential inputs for broader coverage of your problem space than you'd get with manual testing.

+**🪄 Auto-generate Test Scenarios**  
 OpenPipe includes a tool to generate new test scenarios based on your existing prompts and scenarios. Just click "Autogenerate Scenario" to try it out!

-<img width="600" src="https://github.com/openpipe/openpipe/assets/41524992/219a844e-3f4e-4f6b-8066-41348b42977b" alt="auto-generate">
+**Prompt Validation and Typeahead**  
+We use OpenAI's OpenAPI spec to automatically provide typeahead and validate prompts.

-<br><br>
+<img alt="typeahead" src="https://github.com/openpipe/openpipe/assets/176426/acc638f8-d851-4742-8d01-fe6f98890840" height="300px">
+
+**Function Call Support**  
+Natively supports [OpenAI function calls](https://openai.com/blog/function-calling-and-other-api-updates) on supported models.
+
+<img height="300px" alt="function calls" src="https://github.com/openpipe/openpipe/assets/176426/48ad13fe-af2f-4294-bf32-62015597fd9b">
+
+## Supported Models
+
+OpenPipe currently supports GPT-3.5 and GPT-4. Wider model support is planned.

 ## Running Locally

--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,14 +1,13 @@
 import nextRoutes from "nextjs-routes/config";
-import { withSentryConfig } from "@sentry/nextjs";

 /**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
 * for Docker builds.
 */
-const { env } = await import("./src/env.mjs");
+await import("./src/env.mjs");

 /** @type {import("next").NextConfig} */
-let config = {
+const config = {
  reactStrictMode: true,

  /**
@@ -22,13 +21,6 @@ let config = {
    defaultLocale: "en",
  },

-  rewrites: async () => [
-    {
-      source: "/ingest/:path*",
-      destination: "https://app.posthog.com/:path*",
-    },
-  ],
-
  webpack: (config) => {
    config.module.rules.push({
      test: /\.txt$/,
@@ -38,24 +30,4 @@ let config = {
  },
 };

-config = nextRoutes()(config);
-
-if (env.NEXT_PUBLIC_SENTRY_DSN && env.SENTRY_AUTH_TOKEN) {
-  // @ts-expect-error - `withSentryConfig` is not typed correctly
-  config = withSentryConfig(
-    config,
-    {
-      authToken: env.SENTRY_AUTH_TOKEN,
-      silent: true,
-      org: "openpipe",
-      project: "openpipe",
-    },
-    {
-      widenClientFileUpload: true,
-      tunnelRoute: "/monitoring",
-      disableLogger: true,
-    },
-  );
-}
-
-export default config;
+export default nextRoutes()(config);
--- a/package.json
+++ b/package.json
@@ -12,24 +12,20 @@
    "dev:next": "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'",
+    "dev": "concurrently --kill-others 'pnpm dev:next' 'pnpm dev:wss'",
    "postinstall": "prisma generate",
    "lint": "next lint",
    "start": "next start",
    "codegen": "tsx src/codegen/export-openai-types.ts",
    "seed": "tsx prisma/seed.ts",
-    "check": "concurrently 'pnpm lint' 'pnpm tsc' 'pnpm prettier . --check'",
-    "test": "pnpm vitest --no-threads"
+    "check": "concurrently 'pnpm lint' 'pnpm tsc' 'pnpm prettier . --check'"
  },
  "dependencies": {
-    "@anthropic-ai/sdk": "^0.5.8",
    "@apidevtools/json-schema-ref-parser": "^10.1.0",
    "@babel/preset-typescript": "^7.22.5",
    "@babel/standalone": "^7.22.9",
-    "@chakra-ui/anatomy": "^2.2.0",
    "@chakra-ui/next-js": "^2.1.4",
    "@chakra-ui/react": "^2.7.1",
-    "@chakra-ui/styled-system": "^2.9.1",
    "@emotion/react": "^11.11.1",
    "@emotion/server": "^11.11.0",
    "@emotion/styled": "^11.11.0",
@@ -37,7 +33,6 @@
    "@monaco-editor/loader": "^1.3.3",
    "@next-auth/prisma-adapter": "^1.0.5",
    "@prisma/client": "^4.14.0",
-    "@sentry/nextjs": "^7.61.0",
    "@t3-oss/env-nextjs": "^0.3.1",
    "@tabler/icons-react": "^2.22.0",
    "@tanstack/react-query": "^4.29.7",
@@ -45,7 +40,6 @@
    "@trpc/next": "^10.26.0",
    "@trpc/react-query": "^10.26.0",
    "@trpc/server": "^10.26.0",
-    "@vercel/og": "^0.5.9",
    "ast-types": "^0.14.2",
    "chroma-js": "^2.4.2",
    "concurrently": "^8.2.0",
@@ -65,32 +59,25 @@
    "lodash-es": "^4.17.21",
    "next": "^13.4.2",
    "next-auth": "^4.22.1",
-    "next-query-params": "^4.2.3",
    "nextjs-routes": "^2.0.1",
-    "openai": "4.0.0-beta.7",
+    "openai": "4.0.0-beta.2",
    "pluralize": "^8.0.0",
-    "posthog-js": "^1.75.3",
-    "posthog-node": "^3.1.1",
+    "posthog-js": "^1.68.4",
    "prettier": "^3.0.0",
    "prismjs": "^1.29.0",
    "react": "18.2.0",
    "react-diff-viewer": "^3.1.1",
    "react-dom": "18.2.0",
-    "react-github-btn": "^1.4.0",
    "react-icons": "^4.10.1",
-    "react-json-tree": "^0.18.0",
    "react-select": "^5.7.4",
    "react-syntax-highlighter": "^15.5.0",
    "react-textarea-autosize": "^8.5.0",
    "recast": "^0.23.3",
-    "replicate": "^0.12.3",
    "socket.io": "^4.7.1",
    "socket.io-client": "^4.7.1",
    "superjson": "1.12.2",
    "tsx": "^3.12.7",
    "type-fest": "^4.0.0",
-    "use-query-params": "^2.2.1",
-    "uuid": "^9.0.0",
    "vite-tsconfig-paths": "^4.2.0",
    "zod": "^3.21.4",
    "zustand": "^4.3.9"
@@ -111,10 +98,8 @@
    "@types/react": "^18.2.6",
    "@types/react-dom": "^18.2.4",
    "@types/react-syntax-highlighter": "^15.5.7",
-    "@types/uuid": "^9.0.2",
    "@typescript-eslint/eslint-plugin": "^5.59.6",
    "@typescript-eslint/parser": "^5.59.6",
-    "csv-parse": "^5.4.0",
    "eslint": "^8.40.0",
    "eslint-config-next": "^13.4.2",
    "eslint-plugin-unused-imports": "^2.0.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/prisma/datasets/validated_tweets.csv
+++ b/prisma/datasets/validated_tweets.csv
@@ -1,84 +0,0 @@
-Text,sentiment,emotion
-@dell your customer service is horrible especially agent syedfaisal who has made this experience of purchasing a new computer downright awful and I’ll reconsider ever buying a Dell in the future @DellTech,negative,anger
-@zacokalo @Dell @DellCares @Dell give the man what he paid for!,neutral,anger
-"COOKING STREAM DAY!!! Ty to @Alienware for sponsoring this stream! I’ll be making a bunch of Japanese Alien themed foods hehe 
-
-Come check it out! https://t.co/m06tJQ06zk 
-
-#alienwarepartner #intelgaming @Dell @IntelGaming https://t.co/qOdQX2E8VD",positive,joy
-@emijuju_ @Alienware @Dell @intel Beautiful 😍❤️😻,positive,joy
-"What's your biggest data management challenge?     • Cloud complexity?   • Lengthy tech refresh cycles?   • Capital budget constraints?      Solve your challenges with as-a-Storage. Get simplicity, agility &amp; control with @Dell #APEX. https://t.co/mCblMtH931 https://t.co/eepKNZ4Ai3",neutral,optimism
-"This week we were at the ""Top Gun"" themed @Dell Product Expo. Eddie Muñoz met Maverick look-alike, California Tom Cruise (Jerome LeBlanc)!
-
-""I feel the need, the need for speed."" - Maverick
-#topgun #topgunmaverick #dell #delltechnologies #lockncharge https://t.co/QHYH2EbMjq",positive,joy
-"Itsss been more than a week...i m following up with dell for troubleshootings...my https://t.co/lWhg2YKhQa suffering so as my hard earned money...hightly disappointed...contd..
-@DellCares @Dell",negative,sadness
-"@ashu_k7 @Dell Pathetic!!!!! I Dont mind taking legal action, this is deficency of service for which the customer is nt getting help..",negative,anger
-@ashu_k7 @Dell Making life unhappy is the new tag line of #Dell,negative,sadness
-"@Dell If you are buying a Dell, make sure you are making your life hell.
-Better buy other laptops. If you wanted to opt for Dell better opt for garbage on the streets.",negative,anger
-"MY DESK'S FINAL FORM? Seriously, I'm finally happy with my monitor setup here... and I'll keep this setup whenever I move... FOREVER. What do you think?
-https://t.co/WJZ2JXtOnX
-@Alienware @Dell cheers. https://t.co/6Whhldfpv0",positive,joy
-"@Dell Dell Alienware computer has had software problems with SupportAssist since purchase.  Dell, despite paying for Premium Support, has never fixed issues.  Latest solution was to erase everything and reload....SupportAssist still doesn't work.",negative,anger
-"HUGE congratulations to Startup Battle 3.0 winner ➡️ @Ox_Fulfillment x @cyborgcharu for being featured in @BusinessInsider &amp; @Dell showcasing the journey at Ox! 🚀🚀🚀
-
-We love to see our portfolio companies continuing to BUILD SOMETHING FROM NOTHING! 🔥 https://t.co/awBkn5ippB",positive,joy
-@Dell happy Friday!,positive,joy
-"@intel Core i5 1135G7 - 4732 points
-@intel Core i5 1235 - 6619 points 
-@Dell Latitude 5420 x 5430.
-Cinebench R23. Good job Intel!",positive,joy
-@Dell india we purchased 52 docking station and we have around 100 users using dell laptop as well as dell monitor now they are refusing to replace my faulty product and disconnecting my every call....,negative,anger
-"It's another year ans another day But cant fill it in yet the child hood dreams.
-It's my birthdy today. Can anyone of you guys bless me with  a simplest gaming oc that can run 
-@DOTA2 ?
-@Dell @HP @VastGG @Acer @Alienware @Lenovo @toshiba @IBM @Fujitsu_Global @NEC https://t.co/69G8tL9sN8",neutral,joy
-"@idoccor @Dell That's always the decision—wait, or, look elsewhere. In this case, I think I unfortunately need to wait since there are only two monitors with these specs and I don't like the other one 😂",negative,sadness
-"@MichaelDell @Dell @DellCares For how long this will continue. It is high time you either fix the problem for good or replace the complete laptop. Spent over 60+ hours with Customer Care teams, which is not helping. Cannot keep going on like this.",negative,anger
-"@Dell @DellCares but no, not really",neutral,sadness
-"Business innovation requires insight, agility and efficiency. How do you get there? RP PRO, LLC recommends starting by proactively managing IT infrastructure with #OpenManage Systems from @Dell. https://t.co/fBcK1lfFMu https://t.co/xWHLkkHCjn",neutral,optimism
-@Dell Yessirrrrr #NationalCoffeeDay,positive,joy
-"New blog post from @Dell shared on https://t.co/EgfPChB8AT 
-
-Re-routing Our Connected and Autonomous Future https://t.co/AW8EHQrbd6
-
-#future #futuretech #techinnovation https://t.co/koX8stKPsr",neutral,joy
-"In a free-market economy, the folks @IronMountain can set prices as they see fit. Their customers are also free to find better prices at competitors like @Dell 
-@H3CGlobal @HPE
-https://t.co/reZ56DNTBI",neutral,optimism
-"Delighted to chat with many of our partners here in person at @Intel Innovation! @Dell, @Lenovo, @Supermicro_SMCI, @QuantaQCT #IntelON https://t.co/BxIeGW8deN",positive,joy
-"A special gracias to our Startup Chica San Antonio 2022 sponsors @eBay, @jcpenney, @Barbie, @HEB, @Dell, @Honda, @SouthsideSATX💜✨ https://t.co/lZ6WWkziHl",positive,joy
-"When your team decides to start supporting developers, your #ops must change too. More from @cote and @Dell Developer Community Manager @barton808: https://t.co/W6f1oMiTgV",neutral,optimism
-@EmDStowers @LASERGIANT1 @ohwormongod @Ludovician_Vega @Dell our boy snitchin,neutral,anger
-A 1st place dmi:Design Value Award goes to @Dell for a packaging modernization initiative that helped them get closer to their corporate Moonshot Sustainability Goal of 100% recycled or renewable packaging by 2030. More at https://t.co/dnhZWWLCQC #designvalue #DVA22,positive,optimism
-Reducing deployment and maintenance complexity is the goal behind @dell and @WindRiver's new collaboration. https://t.co/2PxQgPuHUU,positive,optimism
-@jaserhunter @Dell Love the sales pitch lol,positive,joy
-@Dell india we purchased 52 docking station and we have around 100 users using dell laptop as well as dell monitor now they are refusing to replace my faulty product and disconnecting my every call....,negative,anger
-@ashu_k7 @Dell One more example.. their technical support is also worse. https://t.co/20atSgI4fg,negative,anger
-*angry screeches about @Dell proprietary MBR windows 8.1 partitions not being able to save as an img in clonezilla *,negative,anger
-@socialitebooks @BBYC_Gamers @Dell @Alienware @BestBuyCanada @intelcanada Congratulations!!!,positive,joy
-"Thank you to the @dell team for coming out to volunteer today! We truly appreciate your hard work and look forward to seeing you again soon!
-
-If you and your team are interested in helping out at the UMLAUF, visit our website for more information: https://t.co/lVfsZT2ogS https://t.co/eLz0FY0y4M",positive,joy
-"@TheCaramelGamer @intel @bravadogaming @Intel_Africa @Dell @DellTech @DellTechMEA @Alienware @IntelUK we love to see it. 
-
-Also also actually actually whoever did that artwork? 🔥🔥🔥 am a fan.",positive,joy
-"LOVING MY DELL 2 IN 1 LAPTOP
-YAYY 🥳🥳
-@Dell #DellInspiron #DellLaptop https://t.co/vib96jf3tC",positive,joy
-@Azure @OracleItalia @AWS_Italy @lenovoitalia @Dell discussing the future of #HPC during the #hpcroundtable22 in Turin today #highperformancecomputing https://t.co/jJ1WqBulPF,neutral,joy
-Attracting talent @AmericanChamber. @marg_cola @Dell speaks of quality of life connectivity and the Opportunity for development being so crucial. Housing  availability is now impacting on decision making for potential candidates. #WhyCork,positive,optimism
-.@Dell partners with @WindRiver on modular cloud-native telecommunications infrastructure https://t.co/4SWATspwCP @SiliconANGLE @Mike_Wheatley @holgermu @constellationr,neutral,joy
-@Dell Not buy Dell Inspiron laptop,neutral,sadness
-"@dell #delltechforum reminding us IDC have predicted that by 2024, 50% of everything we consume in technology will be as a service https://t.co/3UBiZJX0LE",neutral,optimism
-@RachMurph @HETTShow @Dell Thank you for coming! Great evening,positive,joy
-Congratulations to Jason M of Moncton NB on winning a @Dell  @Alienware m15 R7 15.6″ gaming laptop from @BestBuyCanada and @intelcanada's gaming days #contest on the blog. Visit https://t.co/VryaY5Rvv9 to learn about tech and for chances to win new tech. https://t.co/T6n0dzF6oL,positive,joy
-@MattVisiwig @Dell Sour taste for sure 😶 But don't let ego distract you from what you really want to buy 😁,neutral,optimism
-"Massive thank you goes to sponsors @HendersonLoggie @lindsaysnews @Dell @unity, all of our fantastic judges and mentors and the team at @EGX and @ExCeLLondon. 
-
-Big congratulations also to all of our other @AbertayDare teams - an amazing year! #Dare2022 https://t.co/jYe4agO7lW",positive,joy
-"@timetcetera @rahaug Nah, I just need @Dell to start paying me comissions 😂",neutral,joy
-"""Whether you’re an engineer, a designer, or work in supply chain management or sales, there are always opportunities to think about sustainability and how you can do things more efficiently."" 👏 — Oliver Campbell, Director of Packaging Engineering, @Dell https://t.co/vUJLTWNFwP https://t.co/GJWAzGfAxJ",positive,optimism
-"Hi, my name is @listerepvp and I support @Dell, always.",positive,joy
--- a/prisma/migrations/20230725005817_use_id_as_streaming_channel/migration.sql
+++ b/prisma/migrations/20230725005817_use_id_as_streaming_channel/migration.sql
@@ -1,8 +0,0 @@
-/*
-  Warnings:
-
-  - You are about to drop the column `streamingChannel` on the `ScenarioVariantCell` table. All the data in the column will be lost.
-
-*/
-- AlterTable
-ALTER TABLE "ScenarioVariantCell" DROP COLUMN "streamingChannel";
--- a/prisma/migrations/20230725191512_migrate_model_response/migration.sql
+++ b/prisma/migrations/20230725191512_migrate_model_response/migration.sql
@@ -1,52 +0,0 @@
-- DropForeignKey
-ALTER TABLE "ModelOutput" DROP CONSTRAINT "ModelOutput_scenarioVariantCellId_fkey";
-
-- DropForeignKey
-ALTER TABLE "OutputEvaluation" DROP CONSTRAINT "OutputEvaluation_modelOutputId_fkey";
-
-- DropIndex
-DROP INDEX "OutputEvaluation_modelOutputId_evaluationId_key";
-
-- AlterTable
-ALTER TABLE "OutputEvaluation" RENAME COLUMN "modelOutputId" TO "modelResponseId";
-
-- AlterTable
-ALTER TABLE "ScenarioVariantCell" DROP COLUMN "retryTime",
-DROP COLUMN "statusCode",
-ADD COLUMN     "jobQueuedAt" TIMESTAMP(3),
-ADD COLUMN     "jobStartedAt" TIMESTAMP(3);
-
-ALTER TABLE "ModelOutput" RENAME TO "ModelResponse";
-
-ALTER TABLE "ModelResponse" 
-ADD COLUMN "requestedAt" TIMESTAMP(3),
-ADD COLUMN "receivedAt" TIMESTAMP(3),
-ADD COLUMN "statusCode" INTEGER,
-ADD COLUMN "errorMessage" TEXT,
-ADD COLUMN "retryTime" TIMESTAMP(3),
-ADD COLUMN "outdated" BOOLEAN NOT NULL DEFAULT false;
-
-- 3. Remove the unnecessary column
-ALTER TABLE "ModelResponse"
-DROP COLUMN "timeToComplete";
-
-- AlterTable
-ALTER TABLE "ModelResponse" RENAME CONSTRAINT "ModelOutput_pkey" TO "ModelResponse_pkey";
-ALTER TABLE "ModelResponse" ALTER COLUMN "output" DROP NOT NULL;
-
-- DropIndex
-DROP INDEX "ModelOutput_scenarioVariantCellId_key";
-
-- AddForeignKey
-ALTER TABLE "ModelResponse" ADD CONSTRAINT "ModelResponse_scenarioVariantCellId_fkey" FOREIGN KEY ("scenarioVariantCellId") REFERENCES "ScenarioVariantCell"("id") ON DELETE CASCADE ON UPDATE CASCADE;
-
-- RenameIndex
-ALTER INDEX "ModelOutput_inputHash_idx" RENAME TO "ModelResponse_inputHash_idx";
-
-- CreateIndex
-CREATE UNIQUE INDEX "OutputEvaluation_modelResponseId_evaluationId_key" ON "OutputEvaluation"("modelResponseId", "evaluationId");
-
-- AddForeignKey
-ALTER TABLE "OutputEvaluation" ADD CONSTRAINT "OutputEvaluation_modelResponseId_fkey" FOREIGN KEY ("modelResponseId") REFERENCES "ModelResponse"("id") ON DELETE CASCADE ON UPDATE CASCADE;
-
-
--- a/prisma/migrations/20230801195916_add_world_champs/migration.sql
+++ b/prisma/migrations/20230801195916_add_world_champs/migration.sql
@@ -1,16 +0,0 @@
-- CreateTable
-CREATE TABLE "WorldChampEntrant" (
-    "id" UUID NOT NULL,
-    "userId" UUID NOT NULL,
-    "approved" BOOLEAN NOT NULL DEFAULT false,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" TIMESTAMP(3) NOT NULL,
-
-    CONSTRAINT "WorldChampEntrant_pkey" PRIMARY KEY ("id")
-);
-
-- CreateIndex
-CREATE UNIQUE INDEX "WorldChampEntrant_userId_key" ON "WorldChampEntrant"("userId");
-
-- AddForeignKey
-ALTER TABLE "WorldChampEntrant" ADD CONSTRAINT "WorldChampEntrant_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
--- a/prisma/migrations/20230801234208_add_created_at_and_updated_at_to_users_table/migration.sql
+++ b/prisma/migrations/20230801234208_add_created_at_and_updated_at_to_users_table/migration.sql
@@ -1,3 +0,0 @@
-- AlterTable
-ALTER TABLE "User" ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
--- a/prisma/migrations/20230803163242_add_admin_role/migration.sql
+++ b/prisma/migrations/20230803163242_add_admin_role/migration.sql
@@ -1,5 +0,0 @@
-- CreateEnum
-CREATE TYPE "UserRole" AS ENUM ('ADMIN', 'USER');
-
-- AlterTable
-ALTER TABLE "User" ADD COLUMN     "role" "UserRole" NOT NULL DEFAULT 'USER';
--- a/prisma/migrations/20230804042305_add_datasets/migration.sql
+++ b/prisma/migrations/20230804042305_add_datasets/migration.sql
@@ -1,28 +0,0 @@
-- CreateTable
-CREATE TABLE "Dataset" (
-    "id" UUID NOT NULL,
-    "name" TEXT NOT NULL,
-    "organizationId" UUID NOT NULL,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" TIMESTAMP(3) NOT NULL,
-
-    CONSTRAINT "Dataset_pkey" PRIMARY KEY ("id")
-);
-
-- CreateTable
-CREATE TABLE "DatasetEntry" (
-    "id" UUID NOT NULL,
-    "input" TEXT NOT NULL,
-    "output" TEXT,
-    "datasetId" UUID NOT NULL,
-    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "updatedAt" TIMESTAMP(3) NOT NULL,
-
-    CONSTRAINT "DatasetEntry_pkey" PRIMARY KEY ("id")
-);
-
-- AddForeignKey
-ALTER TABLE "Dataset" ADD CONSTRAINT "Dataset_organizationId_fkey" FOREIGN KEY ("organizationId") REFERENCES "Organization"("id") ON DELETE CASCADE ON UPDATE CASCADE;
-
-- AddForeignKey
-ALTER TABLE "DatasetEntry" ADD CONSTRAINT "DatasetEntry_datasetId_fkey" FOREIGN KEY ("datasetId") REFERENCES "Dataset"("id") ON DELETE CASCADE ON UPDATE CASCADE;
--- a/prisma/migrations/20230805054033_migrate_construct_fn_to_prompt_constructor/migration.sql
+++ b/prisma/migrations/20230805054033_migrate_construct_fn_to_prompt_constructor/migration.sql
@@ -1,13 +0,0 @@
-/*
-  Warnings:
-
-  - You are about to drop the column `constructFn` on the `PromptVariant` table. All the data in the column will be lost.
-  - You are about to drop the column `constructFnVersion` on the `PromptVariant` table. All the data in the column will be lost.
-  - Added the required column `promptConstructor` to the `PromptVariant` table without a default value. This is not possible if the table is not empty.
-  - Added the required column `promptConstructorVersion` to the `PromptVariant` table without a default value. This is not possible if the table is not empty.
-
-*/
-- AlterTable
-
-ALTER TABLE "PromptVariant" RENAME COLUMN "constructFn" TO "promptConstructor";
-ALTER TABLE "PromptVariant" RENAME COLUMN "constructFnVersion" TO "promptConstructorVersion";
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -22,20 +22,20 @@ model Experiment {
    createdAt DateTime @default(now())
    updatedAt DateTime @updatedAt

-    templateVariables TemplateVariable[]
-    promptVariants    PromptVariant[]
-    testScenarios     TestScenario[]
-    evaluations       Evaluation[]
+    TemplateVariable TemplateVariable[]
+    PromptVariant    PromptVariant[]
+    TestScenario     TestScenario[]
+    Evaluation       Evaluation[]
 }

 model PromptVariant {
    id String @id @default(uuid()) @db.Uuid

-    label                    String
-    promptConstructor        String
-    promptConstructorVersion Int
-    model                    String
-    modelProvider            String
+    label              String
+    constructFn        String
+    constructFnVersion Int
+    model              String
+    modelProvider      String

    uiId      String  @default(uuid()) @db.Uuid
    visible   Boolean @default(true)
@@ -90,11 +90,13 @@ enum CellRetrievalStatus {
 model ScenarioVariantCell {
    id String @id @default(uuid()) @db.Uuid

-    retrievalStatus CellRetrievalStatus @default(COMPLETE)
-    jobQueuedAt     DateTime?
-    jobStartedAt    DateTime?
-    modelResponses  ModelResponse[]
-    errorMessage    String? // Contains errors that occurred independently of model responses
+    statusCode       Int?
+    errorMessage     String?
+    retryTime        DateTime?
+    streamingChannel String?
+    retrievalStatus  CellRetrievalStatus @default(COMPLETE)
+
+    modelOutput ModelOutput?

    promptVariantId String        @db.Uuid
    promptVariant   PromptVariant @relation(fields: [promptVariantId], references: [id], onDelete: Cascade)
@@ -109,28 +111,24 @@ model ScenarioVariantCell {
    @@unique([promptVariantId, testScenarioId])
 }

-model ModelResponse {
+model ModelOutput {
    id String @id @default(uuid()) @db.Uuid

    inputHash        String
-    requestedAt      DateTime?
-    receivedAt       DateTime?
-    output           Json?
+    output           Json
+    timeToComplete   Int    @default(0)
    cost             Float?
    promptTokens     Int?
    completionTokens Int?
-    statusCode       Int?
-    errorMessage     String?
-    retryTime        DateTime?
-    outdated         Boolean   @default(false)

    createdAt DateTime @default(now())
    updatedAt DateTime @updatedAt

    scenarioVariantCellId String              @db.Uuid
    scenarioVariantCell   ScenarioVariantCell @relation(fields: [scenarioVariantCellId], references: [id], onDelete: Cascade)
-    outputEvaluations     OutputEvaluation[]
+    outputEvaluation      OutputEvaluation[]

+    @@unique([scenarioVariantCellId])
    @@index([inputHash])
 }

@@ -150,9 +148,9 @@ model Evaluation {
    experimentId String     @db.Uuid
    experiment   Experiment @relation(fields: [experimentId], references: [id], onDelete: Cascade)

-    createdAt         DateTime           @default(now())
-    updatedAt         DateTime           @updatedAt
-    outputEvaluations OutputEvaluation[]
+    createdAt        DateTime           @default(now())
+    updatedAt        DateTime           @updatedAt
+    OutputEvaluation OutputEvaluation[]
 }

 model OutputEvaluation {
@@ -162,8 +160,8 @@ model OutputEvaluation {
    result  Float
    details String?

-    modelResponseId String        @db.Uuid
-    modelResponse   ModelResponse @relation(fields: [modelResponseId], references: [id], onDelete: Cascade)
+    modelOutputId String      @db.Uuid
+    modelOutput   ModelOutput @relation(fields: [modelOutputId], references: [id], onDelete: Cascade)

    evaluationId String     @db.Uuid
    evaluation   Evaluation @relation(fields: [evaluationId], references: [id], onDelete: Cascade)
@@ -171,33 +169,7 @@ model OutputEvaluation {
    createdAt DateTime @default(now())
    updatedAt DateTime @updatedAt

-    @@unique([modelResponseId, evaluationId])
-}
-
-model Dataset {
-    id String @id @default(uuid()) @db.Uuid
-
-    name           String
-    datasetEntries DatasetEntry[]
-
-    organizationId String       @db.Uuid
-    organization   Organization @relation(fields: [organizationId], references: [id], onDelete: Cascade)
-
-    createdAt DateTime @default(now())
-    updatedAt DateTime @updatedAt
-}
-
-model DatasetEntry {
-    id String @id @default(uuid()) @db.Uuid
-
-    input  String
-    output String?
-
-    datasetId String   @db.Uuid
-    dataset   Dataset? @relation(fields: [datasetId], references: [id], onDelete: Cascade)
-
-    createdAt DateTime @default(now())
-    updatedAt DateTime @updatedAt
+    @@unique([modelOutputId, evaluationId])
 }

 model Organization {
@@ -205,11 +177,10 @@ model Organization {
    personalOrgUserId String? @unique @db.Uuid
    PersonalOrgUser   User?   @relation(fields: [personalOrgUserId], references: [id], onDelete: Cascade)

-    createdAt         DateTime           @default(now())
-    updatedAt         DateTime           @updatedAt
-    organizationUsers OrganizationUser[]
-    experiments       Experiment[]
-    datasets          Dataset[]
+    createdAt        DateTime           @default(now())
+    updatedAt        DateTime           @updatedAt
+    OrganizationUser OrganizationUser[]
+    Experiment       Experiment[]
 }

 enum OrganizationUserRole {
@@ -235,20 +206,6 @@ model OrganizationUser {
    @@unique([organizationId, userId])
 }

-model WorldChampEntrant {
-    id String @id @default(uuid()) @db.Uuid
-
-    userId String @db.Uuid
-    user   User   @relation(fields: [userId], references: [id], onDelete: Cascade)
-
-    approved Boolean @default(false)
-
-    createdAt DateTime @default(now())
-    updatedAt DateTime @updatedAt
-
-    @@unique([userId])
-}
-
 model Account {
    id                       String  @id @default(uuid()) @db.Uuid
    userId                   String  @db.Uuid
@@ -276,28 +233,16 @@ model Session {
    user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
 }

-enum UserRole {
-    ADMIN
-    USER
-}
-
 model User {
-    id            String    @id @default(uuid()) @db.Uuid
-    name          String?
-    email         String?   @unique
-    emailVerified DateTime?
-    image         String?
-
-    role UserRole @default(USER)
-
-    accounts          Account[]
-    sessions          Session[]
-    organizationUsers OrganizationUser[]
-    organizations     Organization[]
-    worldChampEntrant WorldChampEntrant?
-
-    createdAt DateTime @default(now())
-    updatedAt DateTime @default(now()) @updatedAt
+    id               String             @id @default(uuid()) @db.Uuid
+    name             String?
+    email            String?            @unique
+    emailVerified    DateTime?
+    image            String?
+    accounts         Account[]
+    sessions         Session[]
+    OrganizationUser OrganizationUser[]
+    Organization     Organization[]
 }

 model VerificationToken {
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -1,20 +1,15 @@
 import { prisma } from "~/server/db";
 import dedent from "dedent";
 import { generateNewCell } from "~/server/utils/generateNewCell";
-import { promptConstructorVersion } from "~/promptConstructor/version";

 const defaultId = "11111111-1111-1111-1111-111111111111";

 await prisma.organization.deleteMany({
  where: { id: defaultId },
 });
-
-// If there's an existing org, just seed into it
-const org =
-  (await prisma.organization.findFirst({})) ??
-  (await prisma.organization.create({
-    data: { id: defaultId },
-  }));
+await prisma.organization.create({
+  data: { id: defaultId },
+});

 await prisma.experiment.deleteMany({
  where: {
@@ -26,7 +21,7 @@ await prisma.experiment.create({
  data: {
    id: defaultId,
    label: "Country Capitals Example",
-    organizationId: org.id,
+    organizationId: defaultId,
  },
 });

@@ -52,8 +47,8 @@ await prisma.promptVariant.createMany({
      sortIndex: 0,
      model: "gpt-3.5-turbo-0613",
      modelProvider: "openai/ChatCompletion",
-      promptConstructorVersion,
-      promptConstructor: dedent`
+      constructFnVersion: 1,
+      constructFn: dedent`
        definePrompt("openai/ChatCompletion", {
          model: "gpt-3.5-turbo-0613",
          messages: [
@@ -71,8 +66,8 @@ await prisma.promptVariant.createMany({
      sortIndex: 1,
      model: "gpt-3.5-turbo-0613",
      modelProvider: "openai/ChatCompletion",
-      promptConstructorVersion,
-      promptConstructor: dedent`
+      constructFnVersion: 1,
+      constructFn: dedent`
        definePrompt("openai/ChatCompletion", {
          model: "gpt-3.5-turbo-0613",
          messages: [
@@ -108,41 +103,30 @@ await prisma.testScenario.deleteMany({
  },
 });

-const countries = [
-  "Afghanistan",
-  "Albania",
-  "Algeria",
-  "Andorra",
-  "Angola",
-  "Antigua and Barbuda",
-  "Argentina",
-  "Armenia",
-  "Australia",
-  "Austria",
-  "Austrian Empire",
-  "Azerbaijan",
-  "Baden",
-  "Bahamas, The",
-  "Bahrain",
-  "Bangladesh",
-  "Barbados",
-  "Bavaria",
-  "Belarus",
-  "Belgium",
-  "Belize",
-  "Benin (Dahomey)",
-  "Bolivia",
-  "Bosnia and Herzegovina",
-  "Botswana",
-];
 await prisma.testScenario.createMany({
-  data: countries.map((country, i) => ({
-    experimentId: defaultId,
-    sortIndex: i,
-    variableValues: {
-      country: country,
+  data: [
+    {
+      experimentId: defaultId,
+      sortIndex: 0,
+      variableValues: {
+        country: "Spain",
+      },
    },
-  })),
+    {
+      experimentId: defaultId,
+      sortIndex: 1,
+      variableValues: {
+        country: "USA",
+      },
+    },
+    {
+      experimentId: defaultId,
+      sortIndex: 2,
+      variableValues: {
+        country: "Chile",
+      },
+    },
+  ],
 });

 const variants = await prisma.promptVariant.findMany({
@@ -165,5 +149,5 @@ await Promise.all(
        testScenarioId: scenario.id,
      })),
    )
-    .map((cell) => generateNewCell(cell.promptVariantId, cell.testScenarioId, { stream: false })),
+    .map((cell) => generateNewCell(cell.promptVariantId, cell.testScenarioId)),
 );
--- a/prisma/seedAgiEval.ts
+++ b/prisma/seedAgiEval.ts
@@ -1,128 +0,0 @@
-import { prisma } from "~/server/db";
-import { generateNewCell } from "~/server/utils/generateNewCell";
-import dedent from "dedent";
-import { execSync } from "child_process";
-import fs from "fs";
-import { promptConstructorVersion } from "~/promptConstructor/version";
-
-const defaultId = "11111111-1111-1111-1111-111111111112";
-
-await prisma.organization.deleteMany({
-  where: { id: defaultId },
-});
-
-// If there's an existing org, just seed into it
-const org =
-  (await prisma.organization.findFirst({})) ??
-  (await prisma.organization.create({
-    data: { id: defaultId },
-  }));
-
-// Clone the repo from git@github.com:microsoft/AGIEval.git into a tmp dir if it doesn't exist
-const tmpDir = "/tmp/agi-eval";
-if (!fs.existsSync(tmpDir)) {
-  execSync(`git clone git@github.com:microsoft/AGIEval.git ${tmpDir}`);
-}
-
-const datasets = [
-  "sat-en",
-  "sat-math",
-  "lsat-rc",
-  "lsat-ar",
-  "aqua-rat",
-  "logiqa-en",
-  "lsat-lr",
-  "math",
-];
-
-type Scenario = {
-  passage: string | null;
-  question: string;
-  options: string[] | null;
-  label: string;
-};
-
-for (const dataset of datasets) {
-  const experimentName = `AGI-Eval: ${dataset}`;
-  const oldExperiment = await prisma.experiment.findFirst({
-    where: {
-      label: experimentName,
-      organizationId: org.id,
-    },
-  });
-  if (oldExperiment) {
-    await prisma.experiment.deleteMany({
-      where: { id: oldExperiment.id },
-    });
-  }
-
-  const experiment = await prisma.experiment.create({
-    data: {
-      id: oldExperiment?.id ?? undefined,
-      label: experimentName,
-      organizationId: org.id,
-    },
-  });
-
-  const scenarios: Scenario[] = fs
-    .readFileSync(`${tmpDir}/data/v1/${dataset}.jsonl`, "utf8")
-    .split("\n")
-    .filter((line) => line.length > 0)
-    .map((line) => JSON.parse(line) as Scenario);
-  console.log("scenarios", scenarios.length);
-
-  await prisma.testScenario.createMany({
-    data: scenarios.slice(0, 30).map((scenario, i) => ({
-      experimentId: experiment.id,
-      sortIndex: i,
-      variableValues: {
-        passage: scenario.passage,
-        question: scenario.question,
-        options: scenario.options?.join("\n"),
-        label: scenario.label,
-      },
-    })),
-  });
-
-  await prisma.templateVariable.createMany({
-    data: ["passage", "question", "options", "label"].map((label) => ({
-      experimentId: experiment.id,
-      label,
-    })),
-  });
-
-  await prisma.promptVariant.createMany({
-    data: [
-      {
-        experimentId: experiment.id,
-        label: "Prompt Variant 1",
-        sortIndex: 0,
-        model: "gpt-3.5-turbo-0613",
-        modelProvider: "openai/ChatCompletion",
-        promptConstructorVersion,
-        promptConstructor: dedent`
-          definePrompt("openai/ChatCompletion", {
-            model: "gpt-3.5-turbo-0613",
-            messages: [
-              {
-                role: "user",
-                content: \`Passage: ${"$"}{scenario.passage}\n\nQuestion: ${"$"}{scenario.question}\n\nOptions: ${"$"}{scenario.options}\n\n Respond with just the letter of the best option in the format Answer: (A).\`
-              }
-            ],
-            temperature: 0,
-          })`,
-      },
-    ],
-  });
-
-  await prisma.evaluation.createMany({
-    data: [
-      {
-        experimentId: experiment.id,
-        label: "Eval",
-        evalType: "CONTAINS",
-        value: "Answer: ({{label}})",
-      },
-    ],
-  });
-}
--- a/prisma/seedTwitterSentiment.ts
+++ b/prisma/seedTwitterSentiment.ts
@@ -1,114 +0,0 @@
-import { prisma } from "~/server/db";
-import dedent from "dedent";
-import fs from "fs";
-import { parse } from "csv-parse/sync";
-import { promptConstructorVersion } from "~/promptConstructor/version";
-
-const defaultId = "11111111-1111-1111-1111-111111111112";
-
-await prisma.organization.deleteMany({
-  where: { id: defaultId },
-});
-
-// If there's an existing org, just seed into it
-const org =
-  (await prisma.organization.findFirst({})) ??
-  (await prisma.organization.create({
-    data: { id: defaultId },
-  }));
-
-type Scenario = {
-  text: string;
-  sentiment: string;
-  emotion: string;
-};
-
-const experimentName = `Twitter Sentiment Analysis`;
-const oldExperiment = await prisma.experiment.findFirst({
-  where: {
-    label: experimentName,
-    organizationId: org.id,
-  },
-});
-if (oldExperiment) {
-  await prisma.experiment.deleteMany({
-    where: { id: oldExperiment.id },
-  });
-}
-
-const experiment = await prisma.experiment.create({
-  data: {
-    id: oldExperiment?.id ?? undefined,
-    label: experimentName,
-    organizationId: org.id,
-  },
-});
-
-const content = fs.readFileSync("./prisma/datasets/validated_tweets.csv", "utf8");
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const records: any[] = parse(content, { delimiter: ",", from_line: 2 });
-
-console.log("records", records);
-
-const scenarios: Scenario[] = records.map((row) => ({
-  text: row[0],
-  sentiment: row[1],
-  emotion: row[2],
-}));
-
-console.log("scenarios", scenarios.length);
-
-await prisma.testScenario.createMany({
-  data: scenarios.slice(0, 30).map((scenario, i) => ({
-    experimentId: experiment.id,
-    sortIndex: i,
-    variableValues: {
-      text: scenario.text,
-      sentiment: scenario.sentiment,
-      emotion: scenario.emotion,
-    },
-  })),
-});
-
-await prisma.templateVariable.createMany({
-  data: ["text", "sentiment", "emotion"].map((label) => ({
-    experimentId: experiment.id,
-    label,
-  })),
-});
-
-await prisma.promptVariant.createMany({
-  data: [
-    {
-      experimentId: experiment.id,
-      label: "Prompt Variant 1",
-      sortIndex: 0,
-      model: "gpt-3.5-turbo-0613",
-      modelProvider: "openai/ChatCompletion",
-      promptConstructorVersion,
-      promptConstructor: dedent`
-          definePrompt("openai/ChatCompletion", {
-            model: "gpt-3.5-turbo-0613",
-            messages: [
-              {
-                role: "user",
-                content: \`Text: ${"$"}{scenario.text}\n\nRespond with the sentiment (negative|neutral|positive) and emotion (optimism|joy|anger|sadness) of the tweet in this format: "answer: <sentiment>-<emotion>".\`
-              }
-            ],
-            temperature: 0,
-          })`,
-    },
-  ],
-});
-
-await prisma.evaluation.createMany({
-  data: [
-    {
-      experimentId: experiment.id,
-      label: "Eval",
-      evalType: "CONTAINS",
-      value: "answer: {{sentiment}}-{{emotion}}",
-    },
-  ],
-});
--- a/public/fonts/Inconsolata_SemiExpanded-Medium.ttf
+++ b/public/fonts/Inconsolata_SemiExpanded-Medium.ttf
--- a/public/og.png
+++ b/public/og.png
--- a/run-prod.sh
+++ b/run-prod.sh
@@ -5,11 +5,5 @@ set -e
 echo "Migrating the database"
 pnpm prisma migrate deploy

-echo "Migrating promptConstructors"
-pnpm tsx src/promptConstructor/migrate.ts
-
 echo "Starting the server"
-
-pnpm concurrently --kill-others \
-  "pnpm start" \
-  "pnpm tsx src/server/tasks/worker.ts"
+pnpm start
--- a/sentry.client.config.ts
+++ b/sentry.client.config.ts
@@ -1,33 +0,0 @@
-// This file configures the initialization of Sentry on the client.
-// The config you add here will be used whenever a users loads a page in their browser.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import * as Sentry from "@sentry/nextjs";
-import { env } from "~/env.mjs";
-
-if (env.NEXT_PUBLIC_SENTRY_DSN) {
-  Sentry.init({
-    dsn: env.NEXT_PUBLIC_SENTRY_DSN,
-
-    // Adjust this value in production, or use tracesSampler for greater control
-    tracesSampleRate: 1,
-
-    // Setting this option to true will print useful information to the console while you're setting up Sentry.
-    debug: false,
-
-    replaysOnErrorSampleRate: 1.0,
-
-    // This sets the sample rate to be 10%. You may want this to be 100% while
-    // in development and sample at a lower rate in production
-    replaysSessionSampleRate: 0.1,
-
-    // You can remove this option if you're not planning to use the Sentry Session Replay feature:
-    integrations: [
-      new Sentry.Replay({
-        // Additional Replay configuration goes in here, for example:
-        maskAllText: true,
-        blockAllMedia: true,
-      }),
-    ],
-  });
-}
--- a/sentry.edge.config.ts
+++ b/sentry.edge.config.ts
@@ -1,19 +0,0 @@
-// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
-// The config you add here will be used whenever one of the edge features is loaded.
-// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import * as Sentry from "@sentry/nextjs";
-import { env } from "~/env.mjs";
-
-if (env.NEXT_PUBLIC_SENTRY_DSN) {
-  Sentry.init({
-    dsn: env.NEXT_PUBLIC_SENTRY_DSN,
-
-    // Adjust this value in production, or use tracesSampler for greater control
-    tracesSampleRate: 1,
-
-    // Setting this option to true will print useful information to the console while you're setting up Sentry.
-    debug: false,
-  });
-}
--- a/sentry.server.config.ts
+++ b/sentry.server.config.ts
@@ -1,18 +0,0 @@
-// This file configures the initialization of Sentry on the server.
-// The config you add here will be used whenever the server handles a request.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import * as Sentry from "@sentry/nextjs";
-import { env } from "~/env.mjs";
-
-if (env.NEXT_PUBLIC_SENTRY_DSN) {
-  Sentry.init({
-    dsn: env.NEXT_PUBLIC_SENTRY_DSN,
-
-    // Adjust this value in production, or use tracesSampler for greater control
-    tracesSampleRate: 1,
-
-    // Setting this option to true will print useful information to the console while you're setting up Sentry.
-    debug: false,
-  });
-}
--- a/src/components/ChangeModelModal/ModelSearch.tsx
+++ b/src/components/ChangeModelModal/ModelSearch.tsx
@@ -1,36 +0,0 @@
-import { Text, VStack } from "@chakra-ui/react";
-import { type LegacyRef } from "react";
-import Select from "react-select";
-import { useElementDimensions } from "~/utils/hooks";
-
-import { flatMap } from "lodash-es";
-import frontendModelProviders from "~/modelProviders/frontendModelProviders";
-import { type ProviderModel } from "~/modelProviders/types";
-import { modelLabel } from "~/utils/utils";
-
-const modelOptions = flatMap(Object.entries(frontendModelProviders), ([providerId, provider]) =>
-  Object.entries(provider.models).map(([modelId]) => ({
-    provider: providerId,
-    model: modelId,
-  })),
-) as ProviderModel[];
-
-export const ModelSearch = (props: {
-  selectedModel: ProviderModel;
-  setSelectedModel: (model: ProviderModel) => void;
-}) => {
-  const [containerRef, containerDimensions] = useElementDimensions();
-
-  return (
-    <VStack ref={containerRef as LegacyRef<HTMLDivElement>} w="full" fontFamily="inconsolata">
-      <Text fontWeight="bold">Browse Models</Text>
-      <Select<ProviderModel>
-        styles={{ control: (provided) => ({ ...provided, width: containerDimensions?.width }) }}
-        getOptionLabel={(data) => modelLabel(data.provider, data.model)}
-        getOptionValue={(data) => modelLabel(data.provider, data.model)}
-        options={modelOptions}
-        onChange={(option) => option && props.setSelectedModel(option)}
-      />
-    </VStack>
-  );
-};
--- a/src/components/ChangeModelModal/ModelStatsCard.tsx
+++ b/src/components/ChangeModelModal/ModelStatsCard.tsx
@@ -1,117 +0,0 @@
-import {
-  GridItem,
-  HStack,
-  Link,
-  SimpleGrid,
-  Text,
-  VStack,
-  type StackProps,
-} from "@chakra-ui/react";
-import { type lookupModel } from "~/utils/utils";
-
-export const ModelStatsCard = ({
-  label,
-  model,
-}: {
-  label: string;
-  model: ReturnType<typeof lookupModel>;
-}) => {
-  if (!model) return null;
-  return (
-    <VStack w="full" align="start">
-      <Text fontWeight="bold" fontSize="sm" textTransform="uppercase">
-        {label}
-      </Text>
-
-      <VStack
-        w="full"
-        spacing={6}
-        borderWidth={1}
-        borderColor="gray.300"
-        p={4}
-        borderRadius={8}
-        fontFamily="inconsolata"
-      >
-        <HStack w="full" align="flex-start">
-          <VStack flex={1} fontSize="lg" alignItems="flex-start">
-            <Text as="span" fontWeight="bold" color="gray.900">
-              {model.name}
-            </Text>
-            <Text as="span" color="gray.600" fontSize="sm">
-              Provider: {model.provider}
-            </Text>
-          </VStack>
-          <Link
-            href={model.learnMoreUrl}
-            isExternal
-            color="blue.500"
-            fontWeight="bold"
-            fontSize="sm"
-            ml={2}
-          >
-            Learn More
-          </Link>
-        </HStack>
-        <SimpleGrid
-          w="full"
-          justifyContent="space-between"
-          alignItems="flex-start"
-          fontSize="sm"
-          columns={{ base: 2, md: 4 }}
-        >
-          <SelectedModelLabeledInfo label="Context Window" info={model.contextWindow} />
-          {model.promptTokenPrice && (
-            <SelectedModelLabeledInfo
-              label="Input"
-              info={
-                <Text>
-                  ${(model.promptTokenPrice * 1000).toFixed(3)}
-                  <Text color="gray.500"> / 1K tokens</Text>
-                </Text>
-              }
-            />
-          )}
-          {model.completionTokenPrice && (
-            <SelectedModelLabeledInfo
-              label="Output"
-              info={
-                <Text>
-                  ${(model.completionTokenPrice * 1000).toFixed(3)}
-                  <Text color="gray.500"> / 1K tokens</Text>
-                </Text>
-              }
-            />
-          )}
-          {model.pricePerSecond && (
-            <SelectedModelLabeledInfo
-              label="Price"
-              info={
-                <Text>
-                  ${model.pricePerSecond.toFixed(3)}
-                  <Text color="gray.500"> / second</Text>
-                </Text>
-              }
-            />
-          )}
-          <SelectedModelLabeledInfo label="Speed" info={<Text>{model.speed}</Text>} />
-        </SimpleGrid>
-      </VStack>
-    </VStack>
-  );
-};
-
-const SelectedModelLabeledInfo = ({
-  label,
-  info,
-  ...props
-}: {
-  label: string;
-  info: string | number | React.ReactElement;
-} & StackProps) => (
-  <GridItem>
-    <VStack alignItems="flex-start" {...props}>
-      <Text fontWeight="bold">{label}</Text>
-      <Text>{info}</Text>
-    </VStack>
-  </GridItem>
-);
--- a/src/components/ExperimentSettingsDrawer/DeleteButton.tsx
+++ b/src/components/ExperimentSettingsDrawer/DeleteButton.tsx
@@ -1,69 +0,0 @@
-import {
-  Button,
-  Icon,
-  AlertDialog,
-  AlertDialogBody,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogContent,
-  AlertDialogOverlay,
-  useDisclosure,
-  Text,
-} from "@chakra-ui/react";
-
-import { useRouter } from "next/router";
-import { useRef } from "react";
-import { BsTrash } from "react-icons/bs";
-import { api } from "~/utils/api";
-import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks";
-
-export const DeleteButton = () => {
-  const experiment = useExperiment();
-  const mutation = api.experiments.delete.useMutation();
-  const utils = api.useContext();
-  const router = useRouter();
-
-  const { isOpen, onOpen, onClose } = useDisclosure();
-  const cancelRef = useRef<HTMLButtonElement>(null);
-
-  const [onDeleteConfirm] = useHandledAsyncCallback(async () => {
-    if (!experiment.data?.id) return;
-    await mutation.mutateAsync({ id: experiment.data.id });
-    await utils.experiments.list.invalidate();
-    await router.push({ pathname: "/experiments" });
-    onClose();
-  }, [mutation, experiment.data?.id, router]);
-
-  return (
-    <>
-      <Button size="sm" variant="ghost" colorScheme="red" fontWeight="normal" onClick={onOpen}>
-        <Icon as={BsTrash} boxSize={4} />
-        <Text ml={2}>Delete Experiment</Text>
-      </Button>
-
-      <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
-        <AlertDialogOverlay>
-          <AlertDialogContent>
-            <AlertDialogHeader fontSize="lg" fontWeight="bold">
-              Delete Experiment
-            </AlertDialogHeader>
-
-            <AlertDialogBody>
-              If you delete this experiment all the associated prompts and scenarios will be deleted
-              as well. Are you sure?
-            </AlertDialogBody>
-
-            <AlertDialogFooter>
-              <Button ref={cancelRef} onClick={onClose}>
-                Cancel
-              </Button>
-              <Button colorScheme="red" onClick={onDeleteConfirm} ml={3}>
-                Delete
-              </Button>
-            </AlertDialogFooter>
-          </AlertDialogContent>
-        </AlertDialogOverlay>
-      </AlertDialog>
-    </>
-  );
-};
--- a/src/components/OutputsTable/AddVariantButton.tsx
+++ b/src/components/OutputsTable/AddVariantButton.tsx
@@ -1,57 +0,0 @@
-import { Box, Flex, Icon, Spinner } from "@chakra-ui/react";
-import { BsPlus } from "react-icons/bs";
-import { Text } from "@chakra-ui/react";
-import { api } from "~/utils/api";
-import {
-  useExperiment,
-  useExperimentAccess,
-  useHandledAsyncCallback,
-  useVisibleScenarioIds,
-} from "~/utils/hooks";
-import { cellPadding } from "../constants";
-import { ActionButton } from "./ScenariosHeader";
-
-export default function AddVariantButton() {
-  const experiment = useExperiment();
-  const mutation = api.promptVariants.create.useMutation();
-  const utils = api.useContext();
-  const visibleScenarios = useVisibleScenarioIds();
-
-  const [onClick, loading] = useHandledAsyncCallback(async () => {
-    if (!experiment.data) return;
-    await mutation.mutateAsync({
-      experimentId: experiment.data.id,
-      streamScenarios: visibleScenarios,
-    });
-    await utils.promptVariants.list.invalidate();
-  }, [mutation]);
-
-  const { canModify } = useExperimentAccess();
-  if (!canModify) return <Box w={cellPadding.x} />;
-
-  return (
-    <Flex w="100%" justifyContent="flex-end">
-      <ActionButton
-        onClick={onClick}
-        py={5}
-        leftIcon={<Icon as={loading ? Spinner : BsPlus} boxSize={6} mr={loading ? 1 : 0} />}
-      >
-        <Text display={{ base: "none", md: "flex" }}>Add Variant</Text>
-      </ActionButton>
-      {/* <Button
-        alignItems="center"
-        justifyContent="center"
-        fontWeight="normal"
-        bgColor="transparent"
-        _hover={{ bgColor: "gray.100" }}
-        px={cellPadding.x}
-        onClick={onClick}
-        height="unset"
-        minH={headerMinHeight}
-      >
-        <Icon as={loading ? Spinner : BsPlus} boxSize={6} mr={loading ? 1 : 0} />
-        <Text display={{ base: "none", md: "flex" }}>Add Variant</Text>
-      </Button> */}
-    </Flex>
-  );
-}
--- a/src/components/OutputsTable/FloatingLabelInput.tsx
+++ b/src/components/OutputsTable/FloatingLabelInput.tsx
@@ -37,6 +37,7 @@ export const FloatingLabelInput = ({
        borderColor={isFocused ? "blue.500" : "gray.400"}
        autoComplete="off"
        value={value}
+        maxHeight={32}
        overflowY="auto"
        overflowX="hidden"
        {...props}
--- a/src/components/OutputsTable/NewScenarioButton.tsx
+++ b/src/components/OutputsTable/NewScenarioButton.tsx
@@ -0,0 +1,61 @@
+import { Button, type ButtonProps, HStack, Spinner, Icon } from "@chakra-ui/react";
+import { BsPlus } from "react-icons/bs";
+import { api } from "~/utils/api";
+import { useExperiment, useExperimentAccess, useHandledAsyncCallback } from "~/utils/hooks";
+
+// Extracted Button styling into reusable component
+const StyledButton = ({ children, onClick }: ButtonProps) => (
+  <Button
+    fontWeight="normal"
+    bgColor="transparent"
+    _hover={{ bgColor: "gray.100" }}
+    px={2}
+    onClick={onClick}
+  >
+    {children}
+  </Button>
+);
+
+export default function NewScenarioButton() {
+  const { canModify } = useExperimentAccess();
+
+  const experiment = useExperiment();
+  const mutation = api.scenarios.create.useMutation();
+  const utils = api.useContext();
+
+  const [onClick] = useHandledAsyncCallback(async () => {
+    if (!experiment.data) return;
+    await mutation.mutateAsync({
+      experimentId: experiment.data.id,
+    });
+    await utils.scenarios.list.invalidate();
+  }, [mutation]);
+
+  const [onAutogenerate, autogenerating] = useHandledAsyncCallback(async () => {
+    if (!experiment.data) return;
+    await mutation.mutateAsync({
+      experimentId: experiment.data.id,
+      autogenerate: true,
+    });
+    await utils.scenarios.list.invalidate();
+  }, [mutation]);
+
+  if (!canModify) return null;
+
+  return (
+    <HStack spacing={2}>
+      <StyledButton onClick={onClick}>
+        <Icon as={BsPlus} boxSize={6} />
+        Add Scenario
+      </StyledButton>
+      <StyledButton onClick={onAutogenerate}>
+        <Icon
+          as={autogenerating ? Spinner : BsPlus}
+          boxSize={autogenerating ? 4 : 6}
+          mr={autogenerating ? 2 : 0}
+        />
+        Autogenerate Scenario
+      </StyledButton>
+    </HStack>
+  );
+}
--- a/src/components/OutputsTable/NewVariantButton.tsx
+++ b/src/components/OutputsTable/NewVariantButton.tsx
@@ -0,0 +1,40 @@
+import { Box, Button, Icon, Spinner, Text } from "@chakra-ui/react";
+import { BsPlus } from "react-icons/bs";
+import { api } from "~/utils/api";
+import { useExperiment, useExperimentAccess, useHandledAsyncCallback } from "~/utils/hooks";
+import { cellPadding, headerMinHeight } from "../constants";
+
+export default function NewVariantButton() {
+  const experiment = useExperiment();
+  const mutation = api.promptVariants.create.useMutation();
+  const utils = api.useContext();
+
+  const [onClick, loading] = useHandledAsyncCallback(async () => {
+    if (!experiment.data) return;
+    await mutation.mutateAsync({
+      experimentId: experiment.data.id,
+    });
+    await utils.promptVariants.list.invalidate();
+  }, [mutation]);
+
+  const { canModify } = useExperimentAccess();
+  if (!canModify) return <Box w={cellPadding.x} />;
+
+  return (
+    <Button
+      w="100%"
+      alignItems="center"
+      justifyContent="center"
+      fontWeight="normal"
+      bgColor="transparent"
+      _hover={{ bgColor: "gray.100" }}
+      px={cellPadding.x}
+      onClick={onClick}
+      height="unset"
+      minH={headerMinHeight}
+    >
+      <Icon as={loading ? Spinner : BsPlus} boxSize={6} mr={loading ? 1 : 0} />
+      <Text display={{ base: "none", md: "flex" }}>Add Variant</Text>
+    </Button>
+  );
+}
--- a/src/components/OutputsTable/OutputCell/CellOptions.tsx
+++ b/src/components/OutputsTable/OutputCell/CellOptions.tsx
@@ -0,0 +1,37 @@
+import { Button, HStack, Icon, Tooltip } from "@chakra-ui/react";
+import { BsArrowClockwise } from "react-icons/bs";
+import { useExperimentAccess } from "~/utils/hooks";
+
+export const CellOptions = ({
+  refetchingOutput,
+  refetchOutput,
+}: {
+  refetchingOutput: boolean;
+  refetchOutput: () => void;
+}) => {
+  const { canModify } = useExperimentAccess();
+  return (
+    <HStack justifyContent="flex-end" w="full">
+      {!refetchingOutput && canModify && (
+        <Tooltip label="Refetch output" aria-label="refetch output">
+          <Button
+            size="xs"
+            w={4}
+            h={4}
+            py={4}
+            px={4}
+            minW={0}
+            borderRadius={8}
+            color="gray.500"
+            variant="ghost"
+            cursor="pointer"
+            onClick={refetchOutput}
+            aria-label="refetch output"
+          >
+            <Icon as={BsArrowClockwise} boxSize={4} />
+          </Button>
+        </Tooltip>
+      )}
+    </HStack>
+  );
+};
--- a/src/components/OutputsTable/OutputCell/RetryCountdown.tsx
+++ b/src/components/OutputsTable/OutputCell/RetryCountdown.tsx
@@ -1,12 +1,21 @@
-import { Text } from "@chakra-ui/react";
+import { type ScenarioVariantCell } from "@prisma/client";
+import { VStack, Text } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 import pluralize from "pluralize";

-export const RetryCountdown = ({ retryTime }: { retryTime: Date }) => {
+export const ErrorHandler = ({
+  cell,
+  refetchOutput,
+}: {
+  cell: ScenarioVariantCell;
+  refetchOutput: () => void;
+}) => {
  const [msToWait, setMsToWait] = useState(0);

  useEffect(() => {
-    const initialWaitTime = retryTime.getTime() - Date.now();
+    if (!cell.retryTime) return;
+
+    const initialWaitTime = cell.retryTime.getTime() - Date.now();
    const msModuloOneSecond = initialWaitTime % 1000;
    let remainingTime = initialWaitTime - msModuloOneSecond;
    setMsToWait(remainingTime);
@@ -27,13 +36,18 @@ export const RetryCountdown = ({ retryTime }: { retryTime: Date }) => {
      clearInterval(interval);
      clearTimeout(timeout);
    };
-  }, [retryTime]);
-
-  if (msToWait <= 0) return null;
+  }, [cell.retryTime, cell.statusCode, setMsToWait, refetchOutput]);

  return (
-    <Text color="red.600" fontSize="sm">
-      Retrying in {pluralize("second", Math.ceil(msToWait / 1000), true)}...
-    </Text>
+    <VStack w="full">
+      <Text color="red.600" wordBreak="break-word">
+        {cell.errorMessage}
+      </Text>
+      {msToWait > 0 && (
+        <Text color="red.600" fontSize="sm">
+          Retrying in {pluralize("second", Math.ceil(msToWait / 1000), true)}...
+        </Text>
+      )}
+    </VStack>
  );
 };
--- a/src/components/OutputsTable/OutputCell/OutputCell.tsx
+++ b/src/components/OutputsTable/OutputCell/OutputCell.tsx
@@ -1,19 +1,16 @@
 import { api } from "~/utils/api";
 import { type PromptVariant, type Scenario } from "../types";
-import { type StackProps, Text, VStack } from "@chakra-ui/react";
+import { Spinner, Text, Center, VStack } from "@chakra-ui/react";
 import { useExperiment, 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 { type ReactElement, useState, useEffect } from "react";
 import useSocket from "~/utils/useSocket";
 import { OutputStats } from "./OutputStats";
-import { RetryCountdown } from "./RetryCountdown";
-import frontendModelProviders from "~/modelProviders/frontendModelProviders";
-import { ResponseLog } from "./ResponseLog";
-import { CellOptions } from "./TopActions";
-
-const WAITING_MESSAGE_INTERVAL = 20000;
+import { ErrorHandler } from "./ErrorHandler";
+import { CellOptions } from "./CellOptions";
+import modelProvidersFrontend from "~/modelProviders/modelProvidersFrontend";

 export default function OutputCell({
  scenario,
@@ -43,7 +40,7 @@ export default function OutputCell({
  );

  const provider =
-    frontendModelProviders[variant.modelProvider as keyof typeof frontendModelProviders];
+    modelProvidersFrontend[variant.modelProvider as keyof typeof modelProvidersFrontend];

  type OutputSchema = Parameters<typeof provider.normalizeOutput>[0];

@@ -63,135 +60,77 @@ export default function OutputCell({

  const awaitingOutput =
    !cell ||
-    !cell.evalsComplete ||
    cell.retrievalStatus === "PENDING" ||
    cell.retrievalStatus === "IN_PROGRESS" ||
    hardRefetching;
  useEffect(() => setRefetchInterval(awaitingOutput ? 1000 : 0), [awaitingOutput]);

-  // TODO: disconnect from socket if we're not streaming anymore
-  const streamedMessage = useSocket<OutputSchema>(cell?.id);
+  const modelOutput = cell?.modelOutput;

-  const mostRecentResponse = cell?.modelResponses[cell.modelResponses.length - 1];
-
-  const CellWrapper = useCallback(
-    ({ children, ...props }: StackProps) => (
-      <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>
-    ),
-    [hardRefetching, hardRefetch, mostRecentResponse, scenario, cell],
-  );
+  // Disconnect from socket if we're not streaming anymore
+  const streamedMessage = useSocket<OutputSchema>(cell?.streamingChannel);

  if (!vars) return null;

-  if (!cell && !fetchingOutput)
-    return (
-      <CellWrapper>
-        <Text color="gray.500">Error retrieving output</Text>
-      </CellWrapper>
-    );
-
-  if (cell && cell.errorMessage) {
-    return (
-      <CellWrapper>
-        <Text color="red.500">{cell.errorMessage}</Text>
-      </CellWrapper>
-    );
-  }
-
  if (disabledReason) return <Text color="gray.500">{disabledReason}</Text>;

-  const showLogs = !streamedMessage && !mostRecentResponse?.output;
-
-  if (showLogs)
+  if (awaitingOutput && !streamedMessage)
    return (
-      <CellWrapper 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) => {
-          let numWaitingMessages = 0;
-          const relativeWaitingTime = response.receivedAt
-            ? response.receivedAt.getTime()
-            : Date.now();
-          if (response.requestedAt) {
-            numWaitingMessages = Math.floor(
-              (relativeWaitingTime - response.requestedAt.getTime()) / WAITING_MESSAGE_INTERVAL,
-            );
-          }
-          return (
-            <Fragment key={response.id}>
-              {response.requestedAt && (
-                <ResponseLog time={response.requestedAt} title="Request sent to API" />
-              )}
-              {response.requestedAt &&
-                Array.from({ length: numWaitingMessages }, (_, i) => (
-                  <ResponseLog
-                    key={`waiting-${i}`}
-                    time={
-                      new Date(
-                        (response.requestedAt?.getTime?.() ?? 0) +
-                          (i + 1) * WAITING_MESSAGE_INTERVAL,
-                      )
-                    }
-                    title="Waiting for response..."
-                  />
-                ))}
-              {response.receivedAt && (
-                <ResponseLog
-                  time={response.receivedAt}
-                  title="Response received from API"
-                  message={`statusCode: ${response.statusCode ?? ""}\n ${
-                    response.errorMessage ?? ""
-                  }`}
-                />
-              )}
-            </Fragment>
-          );
-        }) ?? null}
-        {mostRecentResponse?.retryTime && (
-          <RetryCountdown retryTime={mostRecentResponse.retryTime} />
-        )}
-      </CellWrapper>
+      <Center h="100%" w="100%">
+        <Spinner />
+      </Center>
    );

-  const normalizedOutput = mostRecentResponse?.output
-    ? provider.normalizeOutput(mostRecentResponse?.output)
+  if (!cell && !fetchingOutput) return <Text color="gray.500">Error retrieving output</Text>;
+
+  if (cell && cell.errorMessage) {
+    return <ErrorHandler cell={cell} refetchOutput={hardRefetch} />;
+  }
+
+  const normalizedOutput = modelOutput
+    ? provider.normalizeOutput(modelOutput.output as unknown as OutputSchema)
    : streamedMessage
    ? provider.normalizeOutput(streamedMessage)
    : null;

-  if (mostRecentResponse?.output && normalizedOutput?.type === "json") {
+  if (modelOutput && normalizedOutput?.type === "json") {
    return (
-      <CellWrapper>
-        <SyntaxHighlighter
-          customStyle={{ overflowX: "unset", width: "100%", flex: 1 }}
-          language="json"
-          style={docco}
-          lineProps={{
-            style: { wordBreak: "break-all", whiteSpace: "pre-wrap" },
-          }}
-          wrapLines
-        >
-          {stringify(normalizedOutput.value, { maxLength: 40 })}
-        </SyntaxHighlighter>
-      </CellWrapper>
+      <VStack
+        w="100%"
+        h="100%"
+        fontSize="xs"
+        flexWrap="wrap"
+        overflowX="hidden"
+        justifyContent="space-between"
+      >
+        <VStack w="full" flex={1} spacing={0}>
+          <CellOptions refetchingOutput={hardRefetching} refetchOutput={hardRefetch} />
+          <SyntaxHighlighter
+            customStyle={{ overflowX: "unset", width: "100%", flex: 1 }}
+            language="json"
+            style={docco}
+            lineProps={{
+              style: { wordBreak: "break-all", whiteSpace: "pre-wrap" },
+            }}
+            wrapLines
+          >
+            {stringify(normalizedOutput.value, { maxLength: 40 })}
+          </SyntaxHighlighter>
+        </VStack>
+        <OutputStats modelOutput={modelOutput} scenario={scenario} />
+      </VStack>
    );
  }

  const contentToDisplay = (normalizedOutput?.type === "text" && normalizedOutput.value) || "";

  return (
-    <CellWrapper>
-      <Text>{contentToDisplay}</Text>
-    </CellWrapper>
+    <VStack w="100%" h="100%" justifyContent="space-between" whiteSpace="pre-wrap">
+      <VStack w="full" alignItems="flex-start" spacing={0}>
+        <CellOptions refetchingOutput={hardRefetching} refetchOutput={hardRefetch} />
+        <Text>{contentToDisplay}</Text>
+      </VStack>
+      {modelOutput && <OutputStats modelOutput={modelOutput} scenario={scenario} />}
+    </VStack>
  );
 }
--- a/src/components/OutputsTable/OutputCell/OutputStats.tsx
+++ b/src/components/OutputsTable/OutputCell/OutputStats.tsx
@@ -7,39 +7,28 @@ import { CostTooltip } from "~/components/tooltip/CostTooltip";
 const SHOW_TIME = true;

 export const OutputStats = ({
-  modelResponse,
+  modelOutput,
 }: {
-  modelResponse: NonNullable<
-    NonNullable<RouterOutputs["scenarioVariantCells"]["get"]>["modelResponses"][0]
+  modelOutput: NonNullable<
+    NonNullable<RouterOutputs["scenarioVariantCells"]["get"]>["modelOutput"]
  >;
  scenario: Scenario;
 }) => {
-  const timeToComplete =
-    modelResponse.receivedAt && modelResponse.requestedAt
-      ? modelResponse.receivedAt.getTime() - modelResponse.requestedAt.getTime()
-      : 0;
+  const timeToComplete = modelOutput.timeToComplete;

-  const promptTokens = modelResponse.promptTokens;
-  const completionTokens = modelResponse.completionTokens;
+  const promptTokens = modelOutput.promptTokens;
+  const completionTokens = modelOutput.completionTokens;

  return (
-    <HStack
-      w="full"
-      align="center"
-      color="gray.500"
-      fontSize="2xs"
-      mt={{ base: 0, md: 1 }}
-      alignItems="flex-end"
-    >
-      <HStack flex={1} flexWrap="wrap">
-        {modelResponse.outputEvaluations.map((evaluation) => {
+    <HStack w="full" align="center" color="gray.500" fontSize="2xs" mt={{ base: 0, md: 1 }}>
+      <HStack flex={1}>
+        {modelOutput.outputEvaluation.map((evaluation) => {
          const passed = evaluation.result > 0.5;
          return (
            <Tooltip
              isDisabled={!evaluation.details}
              label={evaluation.details}
              key={evaluation.id}
-              shouldWrapChildren
            >
              <HStack spacing={0}>
                <Text>{evaluation.evaluation.label}</Text>
@@ -53,15 +42,15 @@ export const OutputStats = ({
          );
        })}
      </HStack>
-      {modelResponse.cost && (
+      {modelOutput.cost && (
        <CostTooltip
          promptTokens={promptTokens}
          completionTokens={completionTokens}
-          cost={modelResponse.cost}
+          cost={modelOutput.cost}
        >
          <HStack spacing={0}>
            <Icon as={BsCurrencyDollar} />
-            <Text mr={1}>{modelResponse.cost.toFixed(3)}</Text>
+            <Text mr={1}>{modelOutput.cost.toFixed(3)}</Text>
          </HStack>
        </CostTooltip>
      )}
--- a/src/components/OutputsTable/OutputCell/PromptModal.tsx
+++ b/src/components/OutputsTable/OutputCell/PromptModal.tsx
@@ -1,36 +0,0 @@
-import {
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
-  type UseDisclosureReturn,
-} from "@chakra-ui/react";
-import { type RouterOutputs } from "~/utils/api";
-import { JSONTree } from "react-json-tree";
-
-export default function ExpandedModal(props: {
-  cell: NonNullable<RouterOutputs["scenarioVariantCells"]["get"]>;
-  disclosure: UseDisclosureReturn;
-}) {
-  return (
-    <Modal isOpen={props.disclosure.isOpen} onClose={props.disclosure.onClose} size="2xl">
-      <ModalOverlay />
-      <ModalContent>
-        <ModalHeader>Prompt</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <JSONTree
-            data={props.cell.prompt}
-            invertTheme={true}
-            theme="chalk"
-            shouldExpandNodeInitially={() => true}
-            getItemString={() => ""}
-            hideRoot
-          />
-        </ModalBody>
-      </ModalContent>
-    </Modal>
-  );
-}
--- a/src/components/OutputsTable/OutputCell/ResponseLog.tsx
+++ b/src/components/OutputsTable/OutputCell/ResponseLog.tsx
@@ -1,22 +0,0 @@
-import { HStack, VStack, Text } from "@chakra-ui/react";
-import dayjs from "dayjs";
-
-export const ResponseLog = ({
-  time,
-  title,
-  message,
-}: {
-  time: Date;
-  title: string;
-  message?: string;
-}) => {
-  return (
-    <VStack spacing={0} alignItems="flex-start">
-      <HStack>
-        <Text>{dayjs(time).format("HH:mm:ss")}</Text>
-        <Text>{title}</Text>
-      </HStack>
-      {message && <Text pl={4}>{message}</Text>}
-    </VStack>
-  );
-};
--- a/src/components/OutputsTable/OutputCell/TopActions.tsx
+++ b/src/components/OutputsTable/OutputCell/TopActions.tsx
@@ -1,53 +0,0 @@
-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 { type RouterOutputs } from "~/utils/api";
-
-export const CellOptions = ({
-  cell,
-  refetchingOutput,
-  refetchOutput,
-}: {
-  cell: RouterOutputs["scenarioVariantCells"]["get"];
-  refetchingOutput: boolean;
-  refetchOutput: () => void;
-}) => {
-  const { canModify } = useExperimentAccess();
-
-  const modalDisclosure = useDisclosure();
-
-  return (
-    <HStack justifyContent="flex-end" w="full">
-      {cell && (
-        <>
-          <Tooltip label="See Prompt">
-            <IconButton
-              aria-label="See Prompt"
-              icon={<Icon as={BsInfoCircle} boxSize={4} />}
-              onClick={modalDisclosure.onOpen}
-              size="xs"
-              colorScheme="gray"
-              color="gray.500"
-              variant="ghost"
-            />
-          </Tooltip>
-          <ExpandedModal cell={cell} disclosure={modalDisclosure} />
-        </>
-      )}
-      {canModify && (
-        <Tooltip label="Refetch output">
-          <IconButton
-            size="xs"
-            color="gray.500"
-            variant="ghost"
-            cursor="pointer"
-            onClick={refetchOutput}
-            aria-label="refetch output"
-            icon={<Icon as={refetchingOutput ? Spinner : BsArrowClockwise} boxSize={4} />}
-          />
-        </Tooltip>
-      )}
-    </HStack>
-  );
-};
--- a/src/components/OutputsTable/ScenarioEditor.tsx
+++ b/src/components/OutputsTable/ScenarioEditor.tsx
@@ -1,24 +1,15 @@
-import { isEqual } from "lodash-es";
-import { useEffect, useState, type DragEvent } from "react";
+import { type DragEvent } from "react";
 import { api } from "~/utils/api";
-import { useExperiment, useExperimentAccess, useHandledAsyncCallback } from "~/utils/hooks";
+import { isEqual } from "lodash-es";
 import { type Scenario } from "./types";
+import { useExperiment, useExperimentAccess, useHandledAsyncCallback } from "~/utils/hooks";
+import { useState } from "react";

-import {
-  Box,
-  Button,
-  HStack,
-  Icon,
-  IconButton,
-  Spinner,
-  Text,
-  Tooltip,
-  VStack,
-} from "@chakra-ui/react";
-import { BsArrowsAngleExpand, BsX } from "react-icons/bs";
+import { Box, Button, Flex, HStack, Icon, Spinner, Stack, Tooltip, VStack } from "@chakra-ui/react";
 import { cellPadding } from "../constants";
+import { BsX } from "react-icons/bs";
+import { RiDraggable } from "react-icons/ri";
 import { FloatingLabelInput } from "./FloatingLabelInput";
-import { ScenarioEditorModal } from "./ScenarioEditorModal";

 export default function ScenarioEditor({
  scenario,
@@ -37,10 +28,6 @@ export default function ScenarioEditor({

  const [values, setValues] = useState<Record<string, string>>(savedValues);

-  useEffect(() => {
-    if (savedValues) setValues(savedValues);
-  }, [savedValues]);
-
  const experiment = useExperiment();
  const vars = api.templateVars.list.useQuery({ experimentId: experiment.data?.id ?? "" });

@@ -84,82 +71,83 @@ export default function ScenarioEditor({
    [reorderMutation, scenario.id],
  );

-  const [scenarioEditorModalOpen, setScenarioEditorModalOpen] = useState(false);
-
  return (
-    <>
-      <HStack
-        alignItems="flex-start"
-        px={cellPadding.x}
-        py={cellPadding.y}
-        spacing={0}
-        height="100%"
-        draggable={!variableInputHovered}
-        onDragStart={(e) => {
-          e.dataTransfer.setData("text/plain", scenario.id);
-          e.currentTarget.style.opacity = "0.4";
-        }}
-        onDragEnd={(e) => {
-          e.currentTarget.style.opacity = "1";
-        }}
-        onDragOver={(e) => {
-          e.preventDefault();
-          setIsDragTarget(true);
-        }}
-        onDragLeave={() => {
-          setIsDragTarget(false);
-        }}
-        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>
-              <Tooltip label="Expand" hasArrow>
-                <IconButton
-                  aria-label="Expand"
-                  icon={<Icon as={BsArrowsAngleExpand} boxSize={3} />}
-                  onClick={() => setScenarioEditorModalOpen(true)}
-                  size="xs"
-                  colorScheme="gray"
-                  color="gray.500"
-                  variant="ghost"
-                />
-              </Tooltip>
-              {canModify && props.canHide && (
-                <Tooltip label="Delete" hasArrow>
-                  <IconButton
-                    aria-label="Delete"
-                    icon={
-                      <Icon
-                        as={hidingInProgress ? Spinner : BsX}
-                        boxSize={hidingInProgress ? 4 : 6}
-                      />
-                    }
-                    onClick={onHide}
-                    size="xs"
-                    display="flex"
-                    colorScheme="gray"
-                    color="gray.500"
-                    variant="ghost"
-                  />
-                </Tooltip>
-              )}
-            </HStack>
-            {variableLabels.map((key) => {
-              const value = values[key] ?? "";
-              return (
+    <HStack
+      alignItems="flex-start"
+      px={cellPadding.x}
+      py={cellPadding.y}
+      spacing={0}
+      height="100%"
+      draggable={!variableInputHovered}
+      onDragStart={(e) => {
+        e.dataTransfer.setData("text/plain", scenario.id);
+        e.currentTarget.style.opacity = "0.4";
+      }}
+      onDragEnd={(e) => {
+        e.currentTarget.style.opacity = "1";
+      }}
+      onDragOver={(e) => {
+        e.preventDefault();
+        setIsDragTarget(true);
+      }}
+      onDragLeave={() => {
+        setIsDragTarget(false);
+      }}
+      onDrop={onReorder}
+      backgroundColor={isDragTarget ? "gray.100" : "transparent"}
+    >
+      {canModify && props.canHide && (
+        <Stack
+          alignSelf="flex-start"
+          opacity={props.hovered ? 1 : 0}
+          spacing={0}
+          ml={-cellPadding.x}
+        >
+          <Tooltip label="Hide scenario" hasArrow>
+            {/* for some reason the tooltip can't position itself properly relative to the icon without the wrapping box */}
+            <Button
+              variant="unstyled"
+              color="gray.400"
+              height="unset"
+              width="unset"
+              minW="unset"
+              onClick={onHide}
+              _hover={{
+                color: "gray.800",
+                cursor: "pointer",
+              }}
+            >
+              <Icon as={hidingInProgress ? Spinner : BsX} boxSize={hidingInProgress ? 4 : 6} />
+            </Button>
+          </Tooltip>
+          <Icon
+            as={RiDraggable}
+            boxSize={6}
+            color="gray.400"
+            _hover={{ color: "gray.800", cursor: "pointer" }}
+          />
+        </Stack>
+      )}
+
+      {variableLabels.length === 0 ? (
+        <Box color="gray.500">{vars.data ? "No scenario variables configured" : "Loading..."}</Box>
+      ) : (
+        <VStack spacing={4} flex={1} py={2}>
+          {variableLabels.map((key) => {
+            const value = values[key] ?? "";
+            const layoutDirection = value.length > 20 ? "column" : "row";
+            return (
+              <Flex
+                key={key}
+                direction={layoutDirection}
+                alignItems={layoutDirection === "column" ? "flex-start" : "center"}
+                flexWrap="wrap"
+                width="full"
+              >
                <FloatingLabelInput
-                  key={key}
                  label={key}
                  isDisabled={!canModify}
                  style={{ width: "100%" }}
-                  maxHeight={32}
                  value={value}
                  onChange={(e) => {
                    setValues((prev) => ({ ...prev, [key]: e.target.value }));
@@ -174,34 +162,27 @@ export default function ScenarioEditor({
                  onMouseEnter={() => setVariableInputHovered(true)}
                  onMouseLeave={() => setVariableInputHovered(false)}
                />
-              );
-            })}
-            {hasChanged && (
-              <HStack justify="right">
-                <Button
-                  size="sm"
-                  onMouseDown={() => {
-                    setValues(savedValues);
-                  }}
-                  colorScheme="gray"
-                >
-                  Reset
-                </Button>
-                <Button size="sm" onMouseDown={onSave} colorScheme="blue">
-                  Save
-                </Button>
-              </HStack>
-            )}
-          </VStack>
-        )}
-      </HStack>
-      {scenarioEditorModalOpen && (
-        <ScenarioEditorModal
-          scenarioId={scenario.id}
-          initialValues={savedValues}
-          onClose={() => setScenarioEditorModalOpen(false)}
-        />
+              </Flex>
+            );
+          })}
+          {hasChanged && (
+            <HStack justify="right">
+              <Button
+                size="sm"
+                onMouseDown={() => {
+                  setValues(savedValues);
+                }}
+                colorScheme="gray"
+              >
+                Reset
+              </Button>
+              <Button size="sm" onMouseDown={onSave} colorScheme="blue">
+                Save
+              </Button>
+            </HStack>
+          )}
+        </VStack>
      )}
-    </>
+    </HStack>
  );
 }
--- a/src/components/OutputsTable/ScenarioEditorModal.tsx
+++ b/src/components/OutputsTable/ScenarioEditorModal.tsx
@@ -1,123 +0,0 @@
-import {
-  Button,
-  HStack,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Spinner,
-  Text,
-  VStack,
-} from "@chakra-ui/react";
-import { useEffect, useState } from "react";
-import { isEqual } from "lodash-es";
-
-import { api } from "~/utils/api";
-import {
-  useScenario,
-  useHandledAsyncCallback,
-  useExperiment,
-  useExperimentAccess,
-} from "~/utils/hooks";
-import { FloatingLabelInput } from "./FloatingLabelInput";
-
-export const ScenarioEditorModal = ({
-  scenarioId,
-  initialValues,
-  onClose,
-}: {
-  scenarioId: string;
-  initialValues: Record<string, string>;
-  onClose: () => void;
-}) => {
-  const utils = api.useContext();
-  const experiment = useExperiment();
-  const { canModify } = useExperimentAccess();
-  const scenario = useScenario(scenarioId);
-
-  const savedValues = scenario.data?.variableValues as Record<string, string>;
-
-  const [values, setValues] = useState<Record<string, string>>(initialValues);
-
-  useEffect(() => {
-    if (savedValues) setValues(savedValues);
-  }, [savedValues]);
-
-  const hasChanged = !isEqual(savedValues, values);
-
-  const mutation = api.scenarios.replaceWithValues.useMutation();
-
-  const [onSave, saving] = useHandledAsyncCallback(async () => {
-    await mutation.mutateAsync({
-      id: scenarioId,
-      values,
-    });
-    await utils.scenarios.list.invalidate();
-  }, [mutation, values]);
-
-  const vars = api.templateVars.list.useQuery({ experimentId: experiment.data?.id ?? "" });
-  const variableLabels = vars.data?.map((v) => v.label) ?? [];
-
-  return (
-    <Modal
-      isOpen
-      onClose={onClose}
-      size={{ base: "xl", sm: "2xl", md: "3xl", lg: "5xl", xl: "7xl" }}
-    >
-      <ModalOverlay />
-      <ModalContent w={1200}>
-        <ModalHeader />
-        <ModalCloseButton />
-        <ModalBody maxW="unset">
-          <VStack spacing={8}>
-            {values &&
-              variableLabels.map((key) => {
-                const value = values[key] ?? "";
-                return (
-                  <FloatingLabelInput
-                    key={key}
-                    label={key}
-                    isDisabled={!canModify}
-                    _disabled={{ opacity: 1 }}
-                    style={{ width: "100%" }}
-                    value={value}
-                    onChange={(e) => {
-                      setValues((prev) => ({ ...prev, [key]: e.target.value }));
-                    }}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-                        e.preventDefault();
-                        e.currentTarget.blur();
-                        onSave();
-                      }
-                    }}
-                  />
-                );
-              })}
-          </VStack>
-        </ModalBody>
-
-        <ModalFooter>
-          {canModify && (
-            <HStack>
-              <Button
-                colorScheme="gray"
-                onClick={() => setValues(savedValues)}
-                minW={24}
-                isDisabled={!hasChanged}
-              >
-                <Text>Reset</Text>
-              </Button>
-              <Button colorScheme="blue" onClick={onSave} minW={24} isDisabled={!hasChanged}>
-                {saving ? <Spinner boxSize={4} /> : <Text>Save</Text>}
-              </Button>
-            </HStack>
-          )}
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};
--- a/src/components/OutputsTable/ScenarioPaginator.tsx
+++ b/src/components/OutputsTable/ScenarioPaginator.tsx
@@ -1,21 +0,0 @@
-import { useScenarios } from "~/utils/hooks";
-import Paginator from "../Paginator";
-
-const ScenarioPaginator = () => {
-  const { data } = useScenarios();
-
-  if (!data) return null;
-
-  const { scenarios, startIndex, lastPage, count } = data;
-
-  return (
-    <Paginator
-      numItemsLoaded={scenarios.length}
-      startIndex={startIndex}
-      lastPage={lastPage}
-      count={count}
-    />
-  );
-};
-
-export default ScenarioPaginator;
--- a/src/components/OutputsTable/ScenarioRow.tsx
+++ b/src/components/OutputsTable/ScenarioRow.tsx
@@ -1,15 +1,14 @@
-import { GridItem } from "@chakra-ui/react";
+import { Box, GridItem } from "@chakra-ui/react";
 import React, { useState } from "react";
+import { cellPadding } from "../constants";
 import OutputCell from "./OutputCell/OutputCell";
 import ScenarioEditor from "./ScenarioEditor";
 import type { PromptVariant, Scenario } from "./types";
-import { borders } from "./styles";

 const ScenarioRow = (props: {
  scenario: Scenario;
  variants: PromptVariant[];
  canHide: boolean;
-  rowStart: number;
 }) => {
  const [isHovered, setIsHovered] = useState(false);

@@ -22,23 +21,19 @@ const ScenarioRow = (props: {
        onMouseLeave={() => setIsHovered(false)}
        sx={isHovered ? highlightStyle : undefined}
        borderLeftWidth={1}
-        {...borders}
-        rowStart={props.rowStart}
-        colStart={1}
      >
        <ScenarioEditor scenario={props.scenario} hovered={isHovered} canHide={props.canHide} />
      </GridItem>
-      {props.variants.map((variant, i) => (
+      {props.variants.map((variant) => (
        <GridItem
          key={variant.id}
          onMouseEnter={() => setIsHovered(true)}
          onMouseLeave={() => setIsHovered(false)}
          sx={isHovered ? highlightStyle : undefined}
-          rowStart={props.rowStart}
-          colStart={i + 2}
-          {...borders}
        >
-          <OutputCell key={variant.id} scenario={props.scenario} variant={variant} />
+          <Box h="100%" w="100%" px={cellPadding.x} py={cellPadding.y}>
+            <OutputCell key={variant.id} scenario={props.scenario} variant={variant} />
+          </Box>
        </GridItem>
      ))}
    </>
--- a/src/components/OutputsTable/ScenariosHeader.tsx
+++ b/src/components/OutputsTable/ScenariosHeader.tsx
@@ -1,82 +1,52 @@
-import {
-  Button,
-  type ButtonProps,
-  HStack,
-  Text,
-  Icon,
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuItem,
-  IconButton,
-  Spinner,
-} from "@chakra-ui/react";
+import { Button, GridItem, HStack, Heading } from "@chakra-ui/react";
 import { cellPadding } from "../constants";
-import {
-  useExperiment,
-  useExperimentAccess,
-  useHandledAsyncCallback,
-  useScenarios,
-} from "~/utils/hooks";
-import { BsGear, BsPencil, BsPlus, BsStars } from "react-icons/bs";
+import { useElementDimensions, useExperimentAccess } from "~/utils/hooks";
+import { stickyHeaderStyle } from "./styles";
+import { BsPencil } from "react-icons/bs";
 import { useAppStore } from "~/state/store";
-import { api } from "~/utils/api";

-export const ActionButton = (props: ButtonProps) => (
-  <Button size="sm" variant="ghost" color="gray.600" {...props} />
-);
-
-export const ScenariosHeader = () => {
+export const ScenariosHeader = ({
+  headerRows,
+  numScenarios,
+}: {
+  headerRows: number;
+  numScenarios: number;
+}) => {
  const openDrawer = useAppStore((s) => s.openDrawer);
  const { canModify } = useExperimentAccess();
-  const scenarios = useScenarios();

-  const experiment = useExperiment();
-  const createScenarioMutation = api.scenarios.create.useMutation();
-  const utils = api.useContext();
-
-  const [onAddScenario, loading] = useHandledAsyncCallback(
-    async (autogenerate: boolean) => {
-      if (!experiment.data) return;
-      await createScenarioMutation.mutateAsync({
-        experimentId: experiment.data.id,
-        autogenerate,
-      });
-      await utils.scenarios.list.invalidate();
-    },
-    [createScenarioMutation],
-  );
+  const [ref, dimensions] = useElementDimensions();
+  const topValue = dimensions ? `-${dimensions.height - 24}px` : "-455px";

  return (
-    <HStack w="100%" pb={cellPadding.y} pt={0} align="center" spacing={0}>
-      <Text fontSize={16} fontWeight="bold">
-        Scenarios ({scenarios.data?.count})
-      </Text>
-      {canModify && (
-        <Menu>
-          <MenuButton
-            as={IconButton}
-            mt={1}
+    <GridItem
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ref={ref as any}
+      display="flex"
+      alignItems="flex-end"
+      rowSpan={headerRows}
+      px={cellPadding.x}
+      py={cellPadding.y}
+      // Only display the part of the grid item that has content
+      sx={{ ...stickyHeaderStyle, top: topValue }}
+    >
+      <HStack w="100%">
+        <Heading size="xs" fontWeight="bold" flex={1}>
+          Scenarios ({numScenarios})
+        </Heading>
+        {canModify && (
+          <Button
+            size="xs"
            variant="ghost"
-            aria-label="Edit Scenarios"
-            icon={<Icon as={loading ? Spinner : BsGear} />}
-          />
-          <MenuList fontSize="md" zIndex="dropdown" mt={-3}>
-            <MenuItem
-              icon={<Icon as={BsPlus} boxSize={6} mx="-5px" />}
-              onClick={() => onAddScenario(false)}
-            >
-              Add Scenario
-            </MenuItem>
-            <MenuItem icon={<BsStars />} onClick={() => onAddScenario(true)}>
-              Autogenerate Scenario
-            </MenuItem>
-            <MenuItem icon={<BsPencil />} onClick={openDrawer}>
-              Edit Vars
-            </MenuItem>
-          </MenuList>
-        </Menu>
-      )}
-    </HStack>
+            color="gray.500"
+            aria-label="Edit"
+            leftIcon={<BsPencil />}
+            onClick={openDrawer}
+          >
+            Edit Vars
+          </Button>
+        )}
+      </HStack>
+    </GridItem>
  );
 };
--- a/src/components/ExperimentSettingsDrawer/ExperimentSettingsDrawer.tsx
+++ b/src/components/ExperimentSettingsDrawer/ExperimentSettingsDrawer.tsx
@@ -6,14 +6,13 @@ import {
  DrawerHeader,
  DrawerOverlay,
  Heading,
-  VStack,
+  Stack,
 } from "@chakra-ui/react";
-import EditScenarioVars from "../OutputsTable/EditScenarioVars";
-import EditEvaluations from "../OutputsTable/EditEvaluations";
+import EditScenarioVars from "./EditScenarioVars";
+import EditEvaluations from "./EditEvaluations";
 import { useAppStore } from "~/state/store";
-import { DeleteButton } from "./DeleteButton";

-export default function ExperimentSettingsDrawer() {
+export default function SettingsDrawer() {
  const isOpen = useAppStore((state) => state.drawerOpen);
  const closeDrawer = useAppStore((state) => state.closeDrawer);

@@ -23,16 +22,13 @@ export default function ExperimentSettingsDrawer() {
      <DrawerContent>
        <DrawerCloseButton />
        <DrawerHeader>
-          <Heading size="md">Experiment Settings</Heading>
+          <Heading size="md">Settings</Heading>
        </DrawerHeader>
-        <DrawerBody h="full" pb={4}>
-          <VStack h="full" justifyContent="space-between">
-            <VStack spacing={6}>
-              <EditScenarioVars />
-              <EditEvaluations />
-            </VStack>
-            <DeleteButton />
-          </VStack>
+        <DrawerBody>
+          <Stack spacing={6}>
+            <EditScenarioVars />
+            <EditEvaluations />
+          </Stack>
        </DrawerBody>
      </DrawerContent>
    </Drawer>
--- a/src/components/OutputsTable/VariantEditor.tsx
+++ b/src/components/OutputsTable/VariantEditor.tsx
@@ -1,53 +1,18 @@
-import {
-  Box,
-  Button,
-  HStack,
-  IconButton,
-  Spinner,
-  Text,
-  Tooltip,
-  useToast,
-} from "@chakra-ui/react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { FiMaximize, FiMinimize } from "react-icons/fi";
-import { editorBackground } from "~/state/sharedVariantEditor.slice";
-import { useAppStore } from "~/state/store";
-import { api } from "~/utils/api";
-import {
-  useExperimentAccess,
-  useHandledAsyncCallback,
-  useModifierKeyLabel,
-  useVisibleScenarioIds,
-} from "~/utils/hooks";
+import { Box, Button, HStack, Spinner, Tooltip, useToast, Text } from "@chakra-ui/react";
+import { useRef, useEffect, useState, useCallback } from "react";
+import { useExperimentAccess, useHandledAsyncCallback, useModifierKeyLabel } from "~/utils/hooks";
 import { type PromptVariant } from "./types";
+import { api } from "~/utils/api";
+import { useAppStore } from "~/state/store";

 export default function VariantEditor(props: { variant: PromptVariant }) {
  const { canModify } = useExperimentAccess();
  const monaco = useAppStore.use.sharedVariantEditor.monaco();
  const editorRef = useRef<ReturnType<NonNullable<typeof monaco>["editor"]["create"]> | null>(null);
-  const containerRef = useRef<HTMLDivElement | null>(null);
  const [editorId] = useState(() => `editor_${Math.random().toString(36).substring(7)}`);
  const [isChanged, setIsChanged] = useState(false);

-  const [isFullscreen, setIsFullscreen] = useState(false);
-
-  const toggleFullscreen = useCallback(() => {
-    setIsFullscreen((prev) => !prev);
-    editorRef.current?.focus();
-  }, [setIsFullscreen]);
-
-  useEffect(() => {
-    const handleEsc = (event: KeyboardEvent) => {
-      if (event.key === "Escape" && isFullscreen) {
-        toggleFullscreen();
-      }
-    };
-
-    window.addEventListener("keydown", handleEsc);
-    return () => window.removeEventListener("keydown", handleEsc);
-  }, [isFullscreen, toggleFullscreen]);
-
-  const lastSavedFn = props.variant.promptConstructor;
+  const lastSavedFn = props.variant.constructFn;

  const modifierKey = useModifierKeyLabel();

@@ -68,7 +33,6 @@ export default function VariantEditor(props: { variant: PromptVariant }) {
  const replaceVariant = api.promptVariants.replaceVariant.useMutation();
  const utils = api.useContext();
  const toast = useToast();
-  const visibleScenarios = useVisibleScenarioIds();

  const [onSave, saveInProgress] = useHandledAsyncCallback(async () => {
    if (!editorRef.current) return;
@@ -96,8 +60,7 @@ export default function VariantEditor(props: { variant: PromptVariant }) {

    const resp = await replaceVariant.mutateAsync({
      id: props.variant.id,
-      promptConstructor: currentFn,
-      streamScenarios: visibleScenarios,
+      constructFn: currentFn,
    });
    if (resp.status === "error") {
      return toast({
@@ -136,23 +99,11 @@ export default function VariantEditor(props: { variant: PromptVariant }) {
        readOnly: !canModify,
      });

-      // Workaround because otherwise the commands only work on whatever
-      // editor was loaded on the page last.
-      // https://github.com/microsoft/monaco-editor/issues/2947#issuecomment-1422265201
      editorRef.current.onDidFocusEditorText(() => {
-        editorRef.current?.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, onSave);
-
-        editorRef.current?.addCommand(
-          monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyF,
-          toggleFullscreen,
-        );
-
-        // Exit fullscreen with escape
-        editorRef.current?.addCommand(monaco.KeyCode.Escape, () => {
-          if (isFullscreen) {
-            toggleFullscreen();
-          }
-        });
+        // Workaround because otherwise the command only works on whatever
+        // editor was loaded on the page last.
+        // https://github.com/microsoft/monaco-editor/issues/2947#issuecomment-1422265201
+        editorRef.current?.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, onSave);
      });

      editorRef.current.onDidChangeModelContent(checkForChanges);
@@ -181,40 +132,8 @@ export default function VariantEditor(props: { variant: PromptVariant }) {
  }, [canModify]);

  return (
-    <Box
-      w="100%"
-      ref={containerRef}
-      sx={
-        isFullscreen
-          ? {
-              position: "fixed",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-            }
-          : { h: "400px", w: "100%" }
-      }
-      bgColor={editorBackground}
-      zIndex={isFullscreen ? 1000 : "unset"}
-      pos="relative"
-      _hover={{ ".fullscreen-toggle": { opacity: 1 } }}
-    >
-      <Box id={editorId} w="100%" h="100%" />
-      <Tooltip label={`${modifierKey} + ⇧ + F`}>
-        <IconButton
-          className="fullscreen-toggle"
-          aria-label="Minimize"
-          icon={isFullscreen ? <FiMinimize /> : <FiMaximize />}
-          position="absolute"
-          top={2}
-          right={2}
-          onClick={toggleFullscreen}
-          opacity={0}
-          transition="opacity 0.2s"
-        />
-      </Tooltip>
-
+    <Box w="100%" pos="relative">
+      <div id={editorId} style={{ height: "400px", width: "100%" }}></div>
      {isChanged && (
        <HStack pos="absolute" bottom={2} right={2}>
          <Button
@@ -227,7 +146,7 @@ export default function VariantEditor(props: { variant: PromptVariant }) {
          >
            Reset
          </Button>
-          <Tooltip label={`${modifierKey} + S`}>
+          <Tooltip label={`${modifierKey} + Enter`}>
            <Button size="sm" onClick={onSave} colorScheme="blue" w={16} disabled={saveInProgress}>
              {saveInProgress ? <Spinner boxSize={4} /> : <Text>Save</Text>}
            </Button>
--- a/src/components/OutputsTable/VariantStats.tsx
+++ b/src/components/OutputsTable/VariantStats.tsx
@@ -21,14 +21,17 @@ export default function VariantStats(props: { variant: PromptVariant }) {
        completionTokens: 0,
        scenarioCount: 0,
        outputCount: 0,
-        awaitingEvals: false,
+        awaitingRetrievals: false,
      },
      refetchInterval,
    },
  );

  // Poll every two seconds while we are waiting for LLM retrievals to finish
-  useEffect(() => setRefetchInterval(data.awaitingEvals ? 5000 : 0), [data.awaitingEvals]);
+  useEffect(
+    () => setRefetchInterval(data.awaitingRetrievals ? 2000 : 0),
+    [data.awaitingRetrievals],
+  );

  const [passColor, neutralColor, failColor] = useToken("colors", [
    "green.500",
@@ -43,17 +46,17 @@ export default function VariantStats(props: { variant: PromptVariant }) {
  return (
    <HStack
      justifyContent="space-between"
-      alignItems="flex-end"
+      alignItems="center"
      mx="2"
      fontSize="xs"
      py={cellPadding.y}
    >
-      <HStack px={cellPadding.x} flexWrap="wrap">
-        {showNumFinished && (
-          <Text>
-            {data.outputCount} / {data.scenarioCount}
-          </Text>
-        )}
+      {showNumFinished && (
+        <Text>
+          {data.outputCount} / {data.scenarioCount}
+        </Text>
+      )}
+      <HStack px={cellPadding.x}>
        {data.evalResults.map((result) => {
          const passedFrac = result.passCount / result.totalCount;
          return (
@@ -66,7 +69,7 @@ export default function VariantStats(props: { variant: PromptVariant }) {
          );
        })}
      </HStack>
-      {data.overallCost && (
+      {data.overallCost && !data.awaitingRetrievals && (
        <CostTooltip
          promptTokens={data.promptTokens}
          completionTokens={data.completionTokens}
--- a/src/components/OutputsTable/index.tsx
+++ b/src/components/OutputsTable/index.tsx
@@ -1,15 +1,13 @@
-import { Grid, GridItem, type GridItemProps } from "@chakra-ui/react";
+import { Grid, GridItem } from "@chakra-ui/react";
 import { api } from "~/utils/api";
-import AddVariantButton from "./AddVariantButton";
+import NewScenarioButton from "./NewScenarioButton";
+import NewVariantButton from "./NewVariantButton";
 import ScenarioRow from "./ScenarioRow";
 import VariantEditor from "./VariantEditor";
 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 { stickyHeaderStyle } from "./styles";

 export default function OutputsTable({ experimentId }: { experimentId: string | undefined }) {
  const variants = api.promptVariants.list.useQuery(
@@ -17,91 +15,68 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
    { enabled: !!experimentId },
  );

-  const scenarios = useScenarios();
+  const scenarios = api.scenarios.list.useQuery(
+    { experimentId: experimentId as string },
+    { enabled: !!experimentId },
+  );

  if (!variants.data || !scenarios.data) return null;

-  const allCols = variants.data.length + 2;
-  const variantHeaderRows = 3;
-  const scenarioHeaderRows = 1;
-  const scenarioFooterRows = 1;
-  const visibleScenariosCount = scenarios.data.scenarios.length;
-  const allRows =
-    variantHeaderRows + scenarioHeaderRows + visibleScenariosCount + scenarioFooterRows;
+  const allCols = variants.data.length + 1;
+  const headerRows = 3;

  return (
    <Grid
-      pt={4}
+      p={4}
      pb={24}
-      pl={8}
      display="grid"
-      gridTemplateColumns={`250px repeat(${variants.data.length}, minmax(320px, 1fr)) auto`}
+      gridTemplateColumns={`250px repeat(${variants.data.length}, minmax(300px, 1fr)) auto`}
      sx={{
        "> *": {
          borderColor: "gray.300",
+          borderBottomWidth: 1,
+          borderRightWidth: 1,
        },
      }}
      fontSize="sm"
    >
-      <GridItem rowSpan={variantHeaderRows}>
-        <AddVariantButton />
-      </GridItem>
-
-      {variants.data.map((variant, i) => {
-        const sharedProps: GridItemProps = {
-          ...borders,
-          colStart: i + 2,
-          borderLeftWidth: i === 0 ? 1 : 0,
-          marginLeft: i === 0 ? "-1px" : 0,
-          backgroundColor: "gray.100",
-        };
-        return (
-          <Fragment key={variant.uiId}>
-            <VariantHeader
-              variant={variant}
-              canHide={variants.data.length > 1}
-              rowStart={1}
-              {...sharedProps}
-            />
-            <GridItem rowStart={2} {...sharedProps}>
-              <VariantEditor variant={variant} />
-            </GridItem>
-            <GridItem rowStart={3} {...sharedProps}>
-              <VariantStats variant={variant} />
-            </GridItem>
-          </Fragment>
-        );
-      })}
+      <ScenariosHeader headerRows={headerRows} numScenarios={scenarios.data.length} />

+      {variants.data.map((variant) => (
+        <VariantHeader key={variant.uiId} variant={variant} canHide={variants.data.length > 1} />
+      ))}
      <GridItem
-        colSpan={allCols - 1}
-        rowStart={variantHeaderRows + 1}
-        colStart={1}
-        {...borders}
-        borderRightWidth={0}
+        rowSpan={scenarios.data.length + headerRows}
+        padding={0}
+        // Have to use `style` instead of emotion style props to work around css specificity issues conflicting with the "> *" selector on Grid
+        style={{ borderRightWidth: 0, borderBottomWidth: 0 }}
+        h={8}
+        sx={stickyHeaderStyle}
      >
-        <ScenariosHeader />
+        <NewVariantButton />
      </GridItem>

-      {scenarios.data.scenarios.map((scenario, i) => (
+      {variants.data.map((variant) => (
+        <GridItem key={variant.uiId}>
+          <VariantEditor variant={variant} />
+        </GridItem>
+      ))}
+      {variants.data.map((variant) => (
+        <GridItem key={variant.uiId}>
+          <VariantStats variant={variant} />
+        </GridItem>
+      ))}
+      {scenarios.data.map((scenario) => (
        <ScenarioRow
-          rowStart={i + variantHeaderRows + scenarioHeaderRows + 2}
          key={scenario.uiId}
          scenario={scenario}
          variants={variants.data}
-          canHide={visibleScenariosCount > 1}
+          canHide={scenarios.data.length > 1}
        />
      ))}
-      <GridItem
-        rowStart={variantHeaderRows + scenarioHeaderRows + visibleScenariosCount + 2}
-        colStart={1}
-        colSpan={allCols}
-      >
-        <ScenarioPaginator />
+      <GridItem borderBottomWidth={0} borderRightWidth={0} w="100%" colSpan={allCols} padding={0}>
+        <NewScenarioButton />
      </GridItem>
-
-      {/* Add some extra padding on the right, because when the table is too wide to fit in the viewport `pr` on the Grid isn't respected. */}
-      <GridItem rowStart={1} colStart={allCols} rowSpan={allRows} w={4} borderBottomWidth={0} />
    </Grid>
  );
 }
--- a/src/components/OutputsTable/styles.ts
+++ b/src/components/OutputsTable/styles.ts
@@ -1,6 +1,8 @@
-import { type GridItemProps } from "@chakra-ui/react";
+import { type SystemStyleObject } from "@chakra-ui/react";

-export const borders: GridItemProps = {
-  borderRightWidth: 1,
-  borderBottomWidth: 1,
+export const stickyHeaderStyle: SystemStyleObject = {
+  position: "sticky",
+  top: "0",
+  backgroundColor: "#fff",
+  zIndex: 10,
 };
--- a/src/components/OutputsTable/types.ts
+++ b/src/components/OutputsTable/types.ts
@@ -2,4 +2,4 @@ import { type RouterOutputs } from "~/utils/api";

 export type PromptVariant = NonNullable<RouterOutputs["promptVariants"]["list"]>[0];

-export type Scenario = NonNullable<RouterOutputs["scenarios"]["list"]>["scenarios"][0];
+export type Scenario = NonNullable<RouterOutputs["scenarios"]["list"]>[0];
--- a/src/components/Paginator.tsx
+++ b/src/components/Paginator.tsx
@@ -1,79 +0,0 @@
-import { Box, HStack, IconButton } from "@chakra-ui/react";
-import {
-  BsChevronDoubleLeft,
-  BsChevronDoubleRight,
-  BsChevronLeft,
-  BsChevronRight,
-} from "react-icons/bs";
-import { usePage } from "~/utils/hooks";
-
-const Paginator = ({
-  numItemsLoaded,
-  startIndex,
-  lastPage,
-  count,
-}: {
-  numItemsLoaded: number;
-  startIndex: number;
-  lastPage: number;
-  count: number;
-}) => {
-  const [page, setPage] = usePage();
-
-  const nextPage = () => {
-    if (page < lastPage) {
-      setPage(page + 1, "replace");
-    }
-  };
-
-  const prevPage = () => {
-    if (page > 1) {
-      setPage(page - 1, "replace");
-    }
-  };
-
-  const goToLastPage = () => setPage(lastPage, "replace");
-  const goToFirstPage = () => setPage(1, "replace");
-
-  return (
-    <HStack pt={4}>
-      <IconButton
-        variant="ghost"
-        size="sm"
-        onClick={goToFirstPage}
-        isDisabled={page === 1}
-        aria-label="Go to first page"
-        icon={<BsChevronDoubleLeft />}
-      />
-      <IconButton
-        variant="ghost"
-        size="sm"
-        onClick={prevPage}
-        isDisabled={page === 1}
-        aria-label="Previous page"
-        icon={<BsChevronLeft />}
-      />
-      <Box>
-        {startIndex}-{startIndex + numItemsLoaded - 1} / {count}
-      </Box>
-      <IconButton
-        variant="ghost"
-        size="sm"
-        onClick={nextPage}
-        isDisabled={page === lastPage}
-        aria-label="Next page"
-        icon={<BsChevronRight />}
-      />
-      <IconButton
-        variant="ghost"
-        size="sm"
-        onClick={goToLastPage}
-        isDisabled={page === lastPage}
-        aria-label="Go to last page"
-        icon={<BsChevronDoubleRight />}
-      />
-    </HStack>
-  );
-};
-
-export default Paginator;
--- a/src/components/RefinePromptModal/CustomInstructionsInput.tsx
+++ b/src/components/RefinePromptModal/CustomInstructionsInput.tsx
@@ -1,29 +1,18 @@
-import {
-  Button,
-  Spinner,
-  InputGroup,
-  InputRightElement,
-  Icon,
-  HStack,
-  type InputGroupProps,
-} from "@chakra-ui/react";
+import { Button, Spinner, InputGroup, InputRightElement, Icon, HStack } from "@chakra-ui/react";
 import { IoMdSend } from "react-icons/io";
-import AutoResizeTextArea from "./AutoResizeTextArea";
+import AutoResizeTextArea from "../AutoResizeTextArea";

 export const CustomInstructionsInput = ({
  instructions,
  setInstructions,
  loading,
  onSubmit,
-  placeholder = "Send custom instructions",
-  ...props
 }: {
  instructions: string;
  setInstructions: (instructions: string) => void;
  loading: boolean;
  onSubmit: () => void;
-  placeholder?: string;
-} & InputGroupProps) => {
+}) => {
  return (
    <InputGroup
      size="md"
@@ -33,7 +22,6 @@ export const CustomInstructionsInput = ({
      borderRadius={8}
      alignItems="center"
      colorScheme="orange"
-      {...props}
    >
      <AutoResizeTextArea
        value={instructions}
@@ -45,7 +33,7 @@ export const CustomInstructionsInput = ({
            onSubmit();
          }
        }}
-        placeholder={placeholder}
+        placeholder="Send custom instructions"
        py={4}
        pl={4}
        pr={12}
--- a/src/components/RefinePromptModal/RefineOption.tsx
+++ b/src/components/RefinePromptModal/RefineOption.tsx
@@ -1,23 +1,22 @@
 import { HStack, Icon, Heading, Text, VStack, GridItem } from "@chakra-ui/react";
 import { type IconType } from "react-icons";
-import { BsStars } from "react-icons/bs";
+import { refineOptions, type RefineOptionLabel } from "./refineOptions";

-export const RefineAction = ({
+export const RefineOption = ({
  label,
-  icon,
-  desciption,
  activeLabel,
+  icon,
  onClick,
  loading,
 }: {
-  label: string;
-  icon?: IconType;
-  desciption: string;
-  activeLabel: string | undefined;
-  onClick: (label: string) => void;
+  label: RefineOptionLabel;
+  activeLabel: RefineOptionLabel | undefined;
+  icon: IconType;
+  onClick: (label: RefineOptionLabel) => void;
  loading: boolean;
 }) => {
  const isActive = activeLabel === label;
+  const desciption = refineOptions[label].description;

  return (
    <GridItem w="80" h="44">
@@ -45,7 +44,7 @@ export const RefineAction = ({
        opacity={loading ? 0.5 : 1}
      >
        <HStack cursor="pointer" spacing={6} fontSize="sm" fontWeight="medium" color="gray.500">
-          <Icon as={icon || BsStars} boxSize={12} />
+          <Icon as={icon} boxSize={12} />
          <Heading size="md" fontFamily="inconsolata, monospace">
            {label}
          </Heading>
--- a/src/components/RefinePromptModal/RefinePromptModal.tsx
+++ b/src/components/RefinePromptModal/RefinePromptModal.tsx
@@ -15,16 +15,17 @@ import {
  SimpleGrid,
 } from "@chakra-ui/react";
 import { BsStars } from "react-icons/bs";
+import { VscJson } from "react-icons/vsc";
+import { TfiThought } from "react-icons/tfi";
 import { api } from "~/utils/api";
-import { useHandledAsyncCallback, useVisibleScenarioIds } from "~/utils/hooks";
+import { useHandledAsyncCallback } from "~/utils/hooks";
 import { type PromptVariant } from "@prisma/client";
 import { useState } from "react";
 import CompareFunctions from "./CompareFunctions";
-import { CustomInstructionsInput } from "../CustomInstructionsInput";
-import { RefineAction } from "./RefineAction";
+import { CustomInstructionsInput } from "./CustomInstructionsInput";
+import { type RefineOptionLabel, refineOptions } from "./refineOptions";
+import { RefineOption } from "./RefineOption";
 import { isObject, isString } from "lodash-es";
-import { type RefinementAction, type SupportedProvider } from "~/modelProviders/types";
-import frontendModelProviders from "~/modelProviders/frontendModelProviders";

 export const RefinePromptModal = ({
  variant,
@@ -34,32 +35,26 @@ export const RefinePromptModal = ({
  onClose: () => void;
 }) => {
  const utils = api.useContext();
-  const visibleScenarios = useVisibleScenarioIds();
-
-  const refinementActions =
-    frontendModelProviders[variant.modelProvider as SupportedProvider].refinementActions || {};

  const { mutateAsync: getModifiedPromptMutateAsync, data: refinedPromptFn } =
    api.promptVariants.getModifiedPromptFn.useMutation();
  const [instructions, setInstructions] = useState<string>("");

-  const [activeRefineActionLabel, setActiveRefineActionLabel] = useState<string | undefined>(
-    undefined,
-  );
+  const [activeRefineOptionLabel, setActiveRefineOptionLabel] = useState<
+    RefineOptionLabel | undefined
+  >(undefined);

  const [getModifiedPromptFn, modificationInProgress] = useHandledAsyncCallback(
-    async (label?: string) => {
+    async (label?: RefineOptionLabel) => {
      if (!variant.experimentId) return;
-      const updatedInstructions = label
-        ? (refinementActions[label] as RefinementAction).instructions
-        : instructions;
-      setActiveRefineActionLabel(label);
+      const updatedInstructions = label ? refineOptions[label].instructions : instructions;
+      setActiveRefineOptionLabel(label);
      await getModifiedPromptMutateAsync({
        id: variant.id,
        instructions: updatedInstructions,
      });
    },
-    [getModifiedPromptMutateAsync, onClose, variant, instructions, setActiveRefineActionLabel],
+    [getModifiedPromptMutateAsync, onClose, variant, instructions, setActiveRefineOptionLabel],
  );

  const replaceVariantMutation = api.promptVariants.replaceVariant.useMutation();
@@ -73,8 +68,7 @@ export const RefinePromptModal = ({
      return;
    await replaceVariantMutation.mutateAsync({
      id: variant.id,
-      promptConstructor: refinedPromptFn,
-      streamScenarios: visibleScenarios,
+      constructFn: refinedPromptFn,
    });
    await utils.promptVariants.list.invalidate();
    onClose();
@@ -97,36 +91,35 @@ export const RefinePromptModal = ({
        <ModalCloseButton />
        <ModalBody maxW="unset">
          <VStack spacing={8}>
-            <VStack spacing={4} w="full">
-              {Object.keys(refinementActions).length && (
-                <>
-                  <SimpleGrid columns={{ base: 1, md: 2 }} spacing={8}>
-                    {Object.keys(refinementActions).map((label) => (
-                      <RefineAction
-                        key={label}
-                        label={label}
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        icon={refinementActions[label]!.icon}
-                        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                        desciption={refinementActions[label]!.description}
-                        activeLabel={activeRefineActionLabel}
-                        onClick={getModifiedPromptFn}
-                        loading={modificationInProgress}
-                      />
-                    ))}
-                  </SimpleGrid>
-                  <Text color="gray.500">or</Text>
-                </>
-              )}
+            <VStack spacing={4}>
+              <SimpleGrid columns={{ base: 1, md: 2 }} spacing={8}>
+                <RefineOption
+                  label="Convert to function call"
+                  activeLabel={activeRefineOptionLabel}
+                  icon={VscJson}
+                  onClick={getModifiedPromptFn}
+                  loading={modificationInProgress}
+                />
+                <RefineOption
+                  label="Add chain of thought"
+                  activeLabel={activeRefineOptionLabel}
+                  icon={TfiThought}
+                  onClick={getModifiedPromptFn}
+                  loading={modificationInProgress}
+                />
+              </SimpleGrid>
+              <HStack>
+                <Text color="gray.500">or</Text>
+              </HStack>
              <CustomInstructionsInput
                instructions={instructions}
                setInstructions={setInstructions}
                loading={modificationInProgress}
-                onSubmit={() => getModifiedPromptFn()}
+                onSubmit={getModifiedPromptFn}
              />
            </VStack>
            <CompareFunctions
-              originalFunction={variant.promptConstructor}
+              originalFunction={variant.constructFn}
              newFunction={isString(refinedPromptFn) ? refinedPromptFn : undefined}
              maxH="40vh"
            />
--- a/src/components/RefinePromptModal/refineOptions.ts
+++ b/src/components/RefinePromptModal/refineOptions.ts
@@ -0,0 +1,237 @@
+// Super hacky, but we'll redo the organization when we have more models
+
+export type RefineOptionLabel = "Add chain of thought" | "Convert to function call";
+
+export const refineOptions: Record<
+  RefineOptionLabel,
+  { description: string; instructions: string }
+> = {
+  "Add chain of thought": {
+    description: "Asking the model to plan its answer can increase accuracy.",
+    instructions: `Adding chain of thought means asking the model to think about its answer before it gives it to you. This is useful for getting more accurate answers. Do not add an assistant message.
+      
+    This is what a prompt looks like before adding chain of thought:
+    
+    definePrompt("openai/ChatCompletion", {
+        model: "gpt-4",
+        stream: true,
+        messages: [
+            {
+            role: "system",
+            content: \`Evaluate sentiment.\`,
+            },
+            {
+            role: "user",
+            content: \`This is the user's message: \${scenario.user_message}. Return "positive" or "negative" or "neutral"\`,
+            },
+        ],
+    });
+
+    This is what one looks like after adding chain of thought:
+
+    definePrompt("openai/ChatCompletion", {
+        model: "gpt-4",
+        stream: true,
+        messages: [
+            {
+            role: "system",
+            content: \`Evaluate sentiment.\`,
+            },
+            {
+            role: "user",
+            content: \`This is the user's message: \${scenario.user_message}. Return "positive" or "negative" or "neutral". Explain your answer before you give a score, then return the score on a new line.\`,
+            },
+        ],
+    });
+
+    Here's another example:
+
+    Before:
+
+    definePrompt("openai/ChatCompletion", {
+        model: "gpt-3.5-turbo",
+        messages: [
+          {
+            role: "user",
+            content: \`Title: \${scenario.title}
+      Body: \${scenario.body}
+      
+      Need: \${scenario.need}
+      
+      Rate likelihood on 1-3 scale.\`,
+          },
+        ],
+        temperature: 0,
+        functions: [
+          {
+            name: "score_post",
+            parameters: {
+              type: "object",
+              properties: {
+                score: {
+                  type: "number",
+                },
+              },
+            },
+          },
+        ],
+        function_call: {
+          name: "score_post",
+        },
+      });
+
+    After:
+
+    definePrompt("openai/ChatCompletion", {
+        model: "gpt-3.5-turbo",
+        messages: [
+          {
+            role: "user",
+            content: \`Title: \${scenario.title}
+      Body: \${scenario.body}
+      
+      Need: \${scenario.need}
+      
+      Rate likelihood on 1-3 scale. Provide an explanation, but always provide a score afterward.\`,
+          },
+        ],
+        temperature: 0,
+        functions: [
+          {
+            name: "score_post",
+            parameters: {
+              type: "object",
+              properties: {
+                explanation: {
+                  type: "string",
+                }
+                score: {
+                  type: "number",
+                },
+              },
+            },
+          },
+        ],
+        function_call: {
+          name: "score_post",
+        },
+      });
+
+    Add chain of thought to the original prompt.`,
+  },
+  "Convert to function call": {
+    description: "Use function calls to get output from the model in a more structured way.",
+    instructions: `OpenAI functions are a specialized way for an LLM to return output.
+    
+    This is what a prompt looks like before adding a function:
+    
+    definePrompt("openai/ChatCompletion", {
+      model: "gpt-4",
+      stream: true,
+      messages: [
+        {
+          role: "system",
+          content: \`Evaluate sentiment.\`,
+        },
+        {
+          role: "user",
+          content: \`This is the user's message: \${scenario.user_message}. Return "positive" or "negative" or "neutral"\`,
+        },
+      ],
+    });
+  
+    This is what one looks like after adding a function:
+  
+    definePrompt("openai/ChatCompletion", {
+      model: "gpt-4",
+      stream: true,
+      messages: [
+        {
+          role: "system",
+          content: "Evaluate sentiment.",
+        },
+        {
+          role: "user",
+          content: scenario.user_message,
+        },
+      ],
+      functions: [
+        {
+          name: "extract_sentiment",
+          parameters: {
+            type: "object", // parameters must always be an object with a properties key
+            properties: { // properties key is required
+              sentiment: {
+                type: "string",
+                description: "one of positive/negative/neutral",
+              },
+            },
+          },
+        },
+      ],
+      function_call: {
+        name: "extract_sentiment",
+      },
+    });
+
+    Here's another example of adding a function:
+
+    Before:
+
+    definePrompt("openai/ChatCompletion", {
+        model: "gpt-3.5-turbo",
+        messages: [
+          {
+            role: "user",
+            content: \`Here is the title and body of a reddit post I am interested in:
+
+            title: \${scenario.title}
+            body: \${scenario.body}
+            
+            On a scale from 1 to 3, how likely is it that the person writing this post has the following need? If you are not sure, make your best guess, or answer 1.
+            
+            Need: \${scenario.need}
+            
+            Answer one integer between 1 and 3.\`,
+          },
+        ],
+        temperature: 0,
+    });
+
+    After:
+
+    definePrompt("openai/ChatCompletion", {
+        model: "gpt-3.5-turbo",
+        messages: [
+          {
+            role: "user",
+            content: \`Title: \${scenario.title}
+      Body: \${scenario.body}
+      
+      Need: \${scenario.need}
+      
+      Rate likelihood on 1-3 scale.\`,
+          },
+        ],
+        temperature: 0,
+        functions: [
+          {
+            name: "score_post",
+            parameters: {
+              type: "object",
+              properties: {
+                score: {
+                  type: "number",
+                },
+              },
+            },
+          },
+        ],
+        function_call: {
+          name: "score_post",
+        },
+      });
+    
+    Add an OpenAI function that takes one or more nested parameters that match the expected output from this prompt.`,
+  },
+};
--- a/src/components/SelectModelModal/ModelStatsCard.tsx
+++ b/src/components/SelectModelModal/ModelStatsCard.tsx
@@ -0,0 +1,89 @@
+import {
+  VStack,
+  Text,
+  HStack,
+  type StackProps,
+  GridItem,
+  SimpleGrid,
+  Link,
+} from "@chakra-ui/react";
+import { modelStats } from "~/modelProviders/modelStats";
+import { type SupportedModel } from "~/server/types";
+
+export const ModelStatsCard = ({ label, model }: { label: string; model: SupportedModel }) => {
+  const stats = modelStats[model];
+  return (
+    <VStack w="full" align="start">
+      <Text fontWeight="bold" fontSize="sm" textTransform="uppercase">
+        {label}
+      </Text>
+
+      <VStack w="full" spacing={6} bgColor="gray.100" p={4} borderRadius={4}>
+        <HStack w="full" align="flex-start">
+          <Text flex={1} fontSize="lg">
+            <Text as="span" color="gray.600">
+              {stats.provider} /{" "}
+            </Text>
+            <Text as="span" fontWeight="bold" color="gray.900">
+              {model}
+            </Text>
+          </Text>
+          <Link
+            href={stats.learnMoreUrl}
+            isExternal
+            color="blue.500"
+            fontWeight="bold"
+            fontSize="sm"
+            ml={2}
+          >
+            Learn More
+          </Link>
+        </HStack>
+        <SimpleGrid
+          w="full"
+          justifyContent="space-between"
+          alignItems="flex-start"
+          fontSize="sm"
+          columns={{ base: 2, md: 4 }}
+        >
+          <SelectedModelLabeledInfo label="Context" info={stats.contextLength} />
+          <SelectedModelLabeledInfo
+            label="Input"
+            info={
+              <Text>
+                ${(stats.promptTokenPrice * 1000).toFixed(3)}
+                <Text color="gray.500"> / 1K tokens</Text>
+              </Text>
+            }
+          />
+          <SelectedModelLabeledInfo
+            label="Output"
+            info={
+              <Text>
+                ${(stats.promptTokenPrice * 1000).toFixed(3)}
+                <Text color="gray.500"> / 1K tokens</Text>
+              </Text>
+            }
+          />
+          <SelectedModelLabeledInfo label="Speed" info={<Text>{stats.speed}</Text>} />
+        </SimpleGrid>
+      </VStack>
+    </VStack>
+  );
+};
+
+const SelectedModelLabeledInfo = ({
+  label,
+  info,
+  ...props
+}: {
+  label: string;
+  info: string | number | React.ReactElement;
+} & StackProps) => (
+  <GridItem>
+    <VStack alignItems="flex-start" {...props}>
+      <Text fontWeight="bold">{label}</Text>
+      <Text>{info}</Text>
+    </VStack>
+  </GridItem>
+);
--- a/src/components/SelectModelModal/SelectModelModal.tsx
+++ b/src/components/SelectModelModal/SelectModelModal.tsx
@@ -1,7 +1,5 @@
 import {
  Button,
-  HStack,
-  Icon,
  Modal,
  ModalBody,
  ModalCloseButton,
@@ -9,37 +7,33 @@ import {
  ModalFooter,
  ModalHeader,
  ModalOverlay,
-  Spinner,
-  Text,
  VStack,
+  Text,
+  Spinner,
+  HStack,
+  Icon,
 } from "@chakra-ui/react";
+import { RiExchangeFundsFill } from "react-icons/ri";
+import { useState } from "react";
+import { type SupportedModel } from "~/server/types";
+import { ModelStatsCard } from "./ModelStatsCard";
+import { SelectModelSearch } from "./SelectModelSearch";
+import { api } from "~/utils/api";
+import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks";
+import CompareFunctions from "../RefinePromptModal/CompareFunctions";
 import { type PromptVariant } from "@prisma/client";
 import { isObject, isString } from "lodash-es";
-import { useState } from "react";
-import { RiExchangeFundsFill } from "react-icons/ri";
-import { type ProviderModel } from "~/modelProviders/types";
-import { api } from "~/utils/api";
-import { useExperiment, useHandledAsyncCallback, useVisibleScenarioIds } from "~/utils/hooks";
-import { lookupModel, modelLabel } from "~/utils/utils";
-import CompareFunctions from "../RefinePromptModal/CompareFunctions";
-import { ModelSearch } from "./ModelSearch";
-import { ModelStatsCard } from "./ModelStatsCard";

-export const ChangeModelModal = ({
+export const SelectModelModal = ({
  variant,
  onClose,
 }: {
  variant: PromptVariant;
  onClose: () => void;
 }) => {
-  const originalModel = lookupModel(variant.modelProvider, variant.model);
-  const [selectedModel, setSelectedModel] = useState({
-    provider: variant.modelProvider,
-    model: variant.model,
-  } as ProviderModel);
-  const [convertedModel, setConvertedModel] = useState<ProviderModel | undefined>();
-  const visibleScenarios = useVisibleScenarioIds();
-
+  const originalModel = variant.model as SupportedModel;
+  const [selectedModel, setSelectedModel] = useState<SupportedModel>(originalModel);
+  const [convertedModel, setConvertedModel] = useState<SupportedModel | undefined>(undefined);
  const utils = api.useContext();

  const experiment = useExperiment();
@@ -68,18 +62,12 @@ export const ChangeModelModal = ({
      return;
    await replaceVariantMutation.mutateAsync({
      id: variant.id,
-      promptConstructor: modifiedPromptFn,
-      streamScenarios: visibleScenarios,
+      constructFn: modifiedPromptFn,
    });
    await utils.promptVariants.list.invalidate();
    onClose();
  }, [replaceVariantMutation, variant, onClose, modifiedPromptFn]);

-  const originalLabel = modelLabel(variant.modelProvider, variant.model);
-  const selectedLabel = modelLabel(selectedModel.provider, selectedModel.model);
-  const convertedLabel =
-    convertedModel && modelLabel(convertedModel.provider, convertedModel.model);
-
  return (
    <Modal
      isOpen
@@ -98,19 +86,16 @@ export const ChangeModelModal = ({
        <ModalBody maxW="unset">
          <VStack spacing={8}>
            <ModelStatsCard label="Original Model" model={originalModel} />
-            {originalLabel !== selectedLabel && (
-              <ModelStatsCard
-                label="New Model"
-                model={lookupModel(selectedModel.provider, selectedModel.model)}
-              />
+            {originalModel !== selectedModel && (
+              <ModelStatsCard label="New Model" model={selectedModel} />
            )}
-            <ModelSearch selectedModel={selectedModel} setSelectedModel={setSelectedModel} />
+            <SelectModelSearch selectedModel={selectedModel} setSelectedModel={setSelectedModel} />
            {isString(modifiedPromptFn) && (
              <CompareFunctions
-                originalFunction={variant.promptConstructor}
+                originalFunction={variant.constructFn}
                newFunction={modifiedPromptFn}
-                leftTitle={originalLabel}
-                rightTitle={convertedLabel}
+                leftTitle={originalModel}
+                rightTitle={convertedModel}
              />
            )}
          </VStack>
@@ -122,7 +107,7 @@ export const ChangeModelModal = ({
              colorScheme="gray"
              onClick={getModifiedPromptFn}
              minW={24}
-              isDisabled={originalLabel === selectedLabel || modificationInProgress}
+              isDisabled={originalModel === selectedModel || modificationInProgress}
            >
              {modificationInProgress ? <Spinner boxSize={4} /> : <Text>Convert</Text>}
            </Button>
--- a/src/components/SelectModelModal/SelectModelSearch.tsx
+++ b/src/components/SelectModelModal/SelectModelSearch.tsx
@@ -0,0 +1,47 @@
+import { VStack, Text } from "@chakra-ui/react";
+import { type LegacyRef, useCallback } from "react";
+import Select, { type SingleValue } from "react-select";
+import { type SupportedModel } from "~/server/types";
+import { useElementDimensions } from "~/utils/hooks";
+
+const modelOptions: { value: SupportedModel; label: string }[] = [
+  { value: "gpt-3.5-turbo", label: "gpt-3.5-turbo" },
+  { value: "gpt-3.5-turbo-0613", label: "gpt-3.5-turbo-0613" },
+  { value: "gpt-3.5-turbo-16k", label: "gpt-3.5-turbo-16k" },
+  { value: "gpt-3.5-turbo-16k-0613", label: "gpt-3.5-turbo-16k-0613" },
+  { value: "gpt-4", label: "gpt-4" },
+  { value: "gpt-4-0613", label: "gpt-4-0613" },
+  { value: "gpt-4-32k", label: "gpt-4-32k" },
+  { value: "gpt-4-32k-0613", label: "gpt-4-32k-0613" },
+];
+
+export const SelectModelSearch = ({
+  selectedModel,
+  setSelectedModel,
+}: {
+  selectedModel: SupportedModel;
+  setSelectedModel: (model: SupportedModel) => void;
+}) => {
+  const handleSelection = useCallback(
+    (option: SingleValue<{ value: SupportedModel; label: string }>) => {
+      if (!option) return;
+      setSelectedModel(option.value);
+    },
+    [setSelectedModel],
+  );
+  const selectedOption = modelOptions.find((option) => option.value === selectedModel);
+
+  const [containerRef, containerDimensions] = useElementDimensions();
+
+  return (
+    <VStack ref={containerRef as LegacyRef<HTMLDivElement>} w="full">
+      <Text>Browse Models</Text>
+      <Select
+        styles={{ control: (provided) => ({ ...provided, width: containerDimensions?.width }) }}
+        value={selectedOption}
+        options={modelOptions}
+        onChange={handleSelection}
+      />
+    </VStack>
+  );
+};
--- a/src/components/VariantHeader/VariantHeader.tsx
+++ b/src/components/VariantHeader/VariantHeader.tsx
@@ -3,33 +3,28 @@ import { type PromptVariant } from "../OutputsTable/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 { HStack, Icon, Text, GridItem } from "@chakra-ui/react"; // Changed here
 import { cellPadding, headerMinHeight } from "../constants";
 import AutoResizeTextArea from "../AutoResizeTextArea";
+import { stickyHeaderStyle } from "../OutputsTable/styles";
 import VariantHeaderMenuButton from "./VariantHeaderMenuButton";

-export default function VariantHeader(
-  allProps: {
-    variant: PromptVariant;
-    canHide: boolean;
-  } & GridItemProps,
-) {
-  const { variant, canHide, ...gridItemProps } = allProps;
+export default function VariantHeader(props: { variant: PromptVariant; canHide: boolean }) {
  const { canModify } = useExperimentAccess();
  const utils = api.useContext();
  const [isDragTarget, setIsDragTarget] = useState(false);
  const [isInputHovered, setIsInputHovered] = useState(false);
-  const [label, setLabel] = useState(variant.label);
+  const [label, setLabel] = useState(props.variant.label);

  const updateMutation = api.promptVariants.update.useMutation();
  const [onSaveLabel] = useHandledAsyncCallback(async () => {
-    if (label && label !== variant.label) {
+    if (label && label !== props.variant.label) {
      await updateMutation.mutateAsync({
-        id: variant.id,
+        id: props.variant.id,
        updates: { label: label },
      });
    }
-  }, [updateMutation, variant.id, variant.label, label]);
+  }, [updateMutation, props.variant.id, props.variant.label, label]);

  const reorderMutation = api.promptVariants.reorder.useMutation();
  const [onReorder] = useHandledAsyncCallback(
@@ -37,7 +32,7 @@ export default function VariantHeader(
      e.preventDefault();
      setIsDragTarget(false);
      const draggedId = e.dataTransfer.getData("text/plain");
-      const droppedId = variant.id;
+      const droppedId = props.variant.id;
      if (!draggedId || !droppedId || draggedId === droppedId) return;
      await reorderMutation.mutateAsync({
        draggedId,
@@ -45,26 +40,16 @@ export default function VariantHeader(
      });
      await utils.promptVariants.list.invalidate();
    },
-    [reorderMutation, variant.id],
+    [reorderMutation, props.variant.id],
  );

  const [menuOpen, setMenuOpen] = useState(false);

  if (!canModify) {
    return (
-      <GridItem
-        padding={0}
-        sx={{
-          position: "sticky",
-          top: "0",
-          // Ensure that the menu always appears above the sticky header of other variants
-          zIndex: menuOpen ? "dropdown" : 10,
-        }}
-        borderTopWidth={1}
-        {...gridItemProps}
-      >
+      <GridItem padding={0} sx={stickyHeaderStyle} borderTopWidth={1}>
        <Text fontSize={16} fontWeight="bold" px={cellPadding.x} py={cellPadding.y}>
-          {variant.label}
+          {props.variant.label}
        </Text>
      </GridItem>
    );
@@ -74,21 +59,19 @@ export default function VariantHeader(
    <GridItem
      padding={0}
      sx={{
-        position: "sticky",
-        top: "0",
+        ...stickyHeaderStyle,
        // Ensure that the menu always appears above the sticky header of other variants
-        zIndex: menuOpen ? "dropdown" : 10,
+        zIndex: menuOpen ? "dropdown" : stickyHeaderStyle.zIndex,
      }}
      borderTopWidth={1}
-      {...gridItemProps}
    >
      <HStack
-        spacing={2}
+        spacing={4}
        alignItems="flex-start"
        minH={headerMinHeight}
        draggable={!isInputHovered}
        onDragStart={(e) => {
-          e.dataTransfer.setData("text/plain", variant.id);
+          e.dataTransfer.setData("text/plain", props.variant.id);
          e.currentTarget.style.opacity = "0.4";
        }}
        onDragEnd={(e) => {
@@ -102,8 +85,7 @@ export default function VariantHeader(
          setIsDragTarget(false);
        }}
        onDrop={onReorder}
-        backgroundColor={isDragTarget ? "gray.200" : "gray.100"}
-        h="full"
+        backgroundColor={isDragTarget ? "gray.100" : "transparent"}
      >
        <Icon
          as={RiDraggable}
@@ -130,8 +112,8 @@ export default function VariantHeader(
          onMouseLeave={() => setIsInputHovered(false)}
        />
        <VariantHeaderMenuButton
-          variant={variant}
-          canHide={canHide}
+          variant={props.variant}
+          canHide={props.canHide}
          menuOpen={menuOpen}
          setMenuOpen={setMenuOpen}
        />
--- a/src/components/VariantHeader/VariantHeaderMenuButton.tsx
+++ b/src/components/VariantHeader/VariantHeaderMenuButton.tsx
@@ -1,7 +1,8 @@
 import { type PromptVariant } from "../OutputsTable/types";
 import { api } from "~/utils/api";
-import { useHandledAsyncCallback, useVisibleScenarioIds } from "~/utils/hooks";
+import { useHandledAsyncCallback } from "~/utils/hooks";
 import {
+  Button,
  Icon,
  Menu,
  MenuButton,
@@ -10,14 +11,13 @@ import {
  MenuDivider,
  Text,
  Spinner,
-  IconButton,
 } 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 { SelectModelModal } from "../SelectModelModal/SelectModelModal";

 export default function VariantHeaderMenuButton({
  variant,
@@ -33,13 +33,11 @@ export default function VariantHeaderMenuButton({
  const utils = api.useContext();

  const duplicateMutation = api.promptVariants.create.useMutation();
-  const visibleScenarios = useVisibleScenarioIds();

  const [duplicateVariant, duplicationInProgress] = useHandledAsyncCallback(async () => {
    await duplicateMutation.mutateAsync({
      experimentId: variant.experimentId,
      variantId: variant.id,
-      streamScenarios: visibleScenarios,
    });
    await utils.promptVariants.list.invalidate();
  }, [duplicateMutation, variant.experimentId, variant.id]);
@@ -52,18 +50,21 @@ export default function VariantHeaderMenuButton({
    await utils.promptVariants.list.invalidate();
  }, [hideMutation, variant.id]);

-  const [changeModelModalOpen, setChangeModelModalOpen] = useState(false);
+  const [selectModelModalOpen, setSelectModelModalOpen] = useState(false);
  const [refinePromptModalOpen, setRefinePromptModalOpen] = useState(false);

  return (
    <>
      <Menu isOpen={menuOpen} onOpen={() => setMenuOpen(true)} onClose={() => setMenuOpen(false)}>
-        <MenuButton
-          as={IconButton}
-          variant="ghost"
-          aria-label="Edit Scenarios"
-          icon={<Icon as={duplicationInProgress ? Spinner : BsGear} />}
-        />
+        {duplicationInProgress ? (
+          <Spinner boxSize={4} mx={3} my={3} />
+        ) : (
+          <MenuButton>
+            <Button variant="ghost">
+              <Icon as={BsGear} />
+            </Button>
+          </MenuButton>
+        )}

        <MenuList mt={-3} fontSize="md">
          <MenuItem icon={<Icon as={FaRegClone} boxSize={4} w={5} />} onClick={duplicateVariant}>
@@ -71,7 +72,7 @@ export default function VariantHeaderMenuButton({
          </MenuItem>
          <MenuItem
            icon={<Icon as={RiExchangeFundsFill} boxSize={5} />}
-            onClick={() => setChangeModelModalOpen(true)}
+            onClick={() => setSelectModelModalOpen(true)}
          >
            Change Model
          </MenuItem>
@@ -96,8 +97,8 @@ export default function VariantHeaderMenuButton({
          )}
        </MenuList>
      </Menu>
-      {changeModelModalOpen && (
-        <ChangeModelModal variant={variant} onClose={() => setChangeModelModalOpen(false)} />
+      {selectModelModalOpen && (
+        <SelectModelModal variant={variant} onClose={() => setSelectModelModalOpen(false)} />
      )}
      {refinePromptModalOpen && (
        <RefinePromptModal variant={variant} onClose={() => setRefinePromptModalOpen(false)} />
--- a/src/components/datasets/DatasetCard.tsx
+++ b/src/components/datasets/DatasetCard.tsx
@@ -1,110 +0,0 @@
-import {
-  HStack,
-  Icon,
-  VStack,
-  Text,
-  Divider,
-  Spinner,
-  AspectRatio,
-  SkeletonText,
-} from "@chakra-ui/react";
-import { RiDatabase2Line } from "react-icons/ri";
-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 { useHandledAsyncCallback } from "~/utils/hooks";
-
-type DatasetData = {
-  name: string;
-  numEntries: number;
-  id: string;
-  createdAt: Date;
-  updatedAt: Date;
-};
-
-export const DatasetCard = ({ dataset }: { dataset: DatasetData }) => {
-  return (
-    <AspectRatio ratio={1.2} w="full">
-      <VStack
-        as={Link}
-        href={{ pathname: "/data/[id]", query: { id: dataset.id } }}
-        bg="gray.50"
-        _hover={{ bg: "gray.100" }}
-        transition="background 0.2s"
-        cursor="pointer"
-        borderColor="gray.200"
-        borderWidth={1}
-        p={4}
-        justify="space-between"
-      >
-        <HStack w="full" color="gray.700" justify="center">
-          <Icon as={RiDatabase2Line} boxSize={4} />
-          <Text fontWeight="bold">{dataset.name}</Text>
-        </HStack>
-        <HStack h="full" spacing={4} flex={1} align="center">
-          <CountLabel label="Rows" count={dataset.numEntries} />
-        </HStack>
-        <HStack w="full" color="gray.500" fontSize="xs" textAlign="center">
-          <Text flex={1}>Created {formatTimePast(dataset.createdAt)}</Text>
-          <Divider h={4} orientation="vertical" />
-          <Text flex={1}>Updated {formatTimePast(dataset.updatedAt)}</Text>
-        </HStack>
-      </VStack>
-    </AspectRatio>
-  );
-};
-
-const CountLabel = ({ label, count }: { label: string; count: number }) => {
-  return (
-    <VStack alignItems="center" flex={1}>
-      <Text color="gray.500" fontWeight="bold">
-        {label}
-      </Text>
-      <Text fontSize="sm" color="gray.500">
-        {count}
-      </Text>
-    </VStack>
-  );
-};
-
-export const NewDatasetCard = () => {
-  const router = useRouter();
-  const createMutation = api.datasets.create.useMutation();
-  const [createDataset, isLoading] = useHandledAsyncCallback(async () => {
-    const newDataset = await createMutation.mutateAsync({ label: "New Dataset" });
-    await router.push({ pathname: "/data/[id]", query: { id: newDataset.id } });
-  }, [createMutation, router]);
-
-  return (
-    <AspectRatio ratio={1.2} w="full">
-      <VStack
-        align="center"
-        justify="center"
-        _hover={{ cursor: "pointer", bg: "gray.50" }}
-        transition="background 0.2s"
-        cursor="pointer"
-        borderColor="gray.200"
-        borderWidth={1}
-        p={4}
-        onClick={createDataset}
-      >
-        <Icon as={isLoading ? Spinner : BsPlusSquare} boxSize={8} />
-        <Text display={{ base: "none", md: "block" }} ml={2}>
-          New Dataset
-        </Text>
-      </VStack>
-    </AspectRatio>
-  );
-};
-
-export const DatasetCardSkeleton = () => (
-  <AspectRatio ratio={1.2} w="full">
-    <VStack align="center" borderColor="gray.200" borderWidth={1} p={4} bg="gray.50">
-      <SkeletonText noOfLines={1} w="80%" />
-      <SkeletonText noOfLines={2} w="60%" />
-      <SkeletonText noOfLines={1} w="80%" />
-    </VStack>
-  </AspectRatio>
-);
--- a/src/components/datasets/DatasetEntriesPaginator.tsx
+++ b/src/components/datasets/DatasetEntriesPaginator.tsx
@@ -1,21 +0,0 @@
-import { useDatasetEntries } from "~/utils/hooks";
-import Paginator from "../Paginator";
-
-const DatasetEntriesPaginator = () => {
-  const { data } = useDatasetEntries();
-
-  if (!data) return null;
-
-  const { entries, startIndex, lastPage, count } = data;
-
-  return (
-    <Paginator
-      numItemsLoaded={entries.length}
-      startIndex={startIndex}
-      lastPage={lastPage}
-      count={count}
-    />
-  );
-};
-
-export default DatasetEntriesPaginator;
--- a/src/components/datasets/DatasetEntriesTable.tsx
+++ b/src/components/datasets/DatasetEntriesTable.tsx
@@ -1,31 +0,0 @@
-import { type StackProps, VStack, Table, Th, Tr, Thead, Tbody, Text } from "@chakra-ui/react";
-import { useDatasetEntries } from "~/utils/hooks";
-import TableRow from "./TableRow";
-import DatasetEntriesPaginator from "./DatasetEntriesPaginator";
-
-const DatasetEntriesTable = (props: StackProps) => {
-  const { data } = useDatasetEntries();
-
-  return (
-    <VStack justifyContent="space-between" {...props}>
-      <Table variant="simple" sx={{ "table-layout": "fixed", width: "full" }}>
-        <Thead>
-          <Tr>
-            <Th>Input</Th>
-            <Th>Output</Th>
-          </Tr>
-        </Thead>
-        <Tbody>{data?.entries.map((entry) => <TableRow key={entry.id} entry={entry} />)}</Tbody>
-      </Table>
-      {(!data || data.entries.length) === 0 ? (
-        <Text alignSelf="flex-start" pl={6} color="gray.500">
-          No entries found
-        </Text>
-      ) : (
-        <DatasetEntriesPaginator />
-      )}
-    </VStack>
-  );
-};
-
-export default DatasetEntriesTable;
--- a/src/components/datasets/DatasetHeaderButtons/DatasetHeaderButtons.tsx
+++ b/src/components/datasets/DatasetHeaderButtons/DatasetHeaderButtons.tsx
@@ -1,26 +0,0 @@
-import { Button, HStack, useDisclosure } from "@chakra-ui/react";
-import { BiImport } from "react-icons/bi";
-import { BsStars } from "react-icons/bs";
-
-import { GenerateDataModal } from "./GenerateDataModal";
-
-export const DatasetHeaderButtons = () => {
-  const generateModalDisclosure = useDisclosure();
-
-  return (
-    <>
-      <HStack>
-        <Button leftIcon={<BiImport />} colorScheme="blue" variant="ghost">
-          Import Data
-        </Button>
-        <Button leftIcon={<BsStars />} colorScheme="blue" onClick={generateModalDisclosure.onOpen}>
-          Generate Data
-        </Button>
-      </HStack>
-      <GenerateDataModal
-        isOpen={generateModalDisclosure.isOpen}
-        onClose={generateModalDisclosure.onClose}
-      />
-    </>
-  );
-};
--- a/src/components/datasets/DatasetHeaderButtons/GenerateDataModal.tsx
+++ b/src/components/datasets/DatasetHeaderButtons/GenerateDataModal.tsx
@@ -1,128 +0,0 @@
-import {
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
-  ModalFooter,
-  Text,
-  HStack,
-  VStack,
-  Icon,
-  NumberInput,
-  NumberInputField,
-  NumberInputStepper,
-  NumberIncrementStepper,
-  NumberDecrementStepper,
-  Button,
-} from "@chakra-ui/react";
-import { BsStars } from "react-icons/bs";
-import { useState } from "react";
-import { useDataset, useHandledAsyncCallback } from "~/utils/hooks";
-import { api } from "~/utils/api";
-import AutoResizeTextArea from "~/components/AutoResizeTextArea";
-
-export const GenerateDataModal = ({
-  isOpen,
-  onClose,
-}: {
-  isOpen: boolean;
-  onClose: () => void;
-}) => {
-  const utils = api.useContext();
-
-  const datasetId = useDataset().data?.id;
-
-  const [numToGenerate, setNumToGenerate] = useState<number>(20);
-  const [inputDescription, setInputDescription] = useState<string>(
-    "Each input should contain an email body. Half of the emails should contain event details, and the other half should not.",
-  );
-  const [outputDescription, setOutputDescription] = useState<string>(
-    `Each output should contain "true" or "false", where "true" indicates that the email contains event details.`,
-  );
-
-  const generateEntriesMutation = api.datasetEntries.autogenerateEntries.useMutation();
-
-  const [generateEntries, generateEntriesInProgress] = useHandledAsyncCallback(async () => {
-    if (!inputDescription || !outputDescription || !numToGenerate || !datasetId) return;
-    await generateEntriesMutation.mutateAsync({
-      datasetId,
-      inputDescription,
-      outputDescription,
-      numToGenerate,
-    });
-    await utils.datasetEntries.list.invalidate();
-    onClose();
-  }, [
-    generateEntriesMutation,
-    onClose,
-    inputDescription,
-    outputDescription,
-    numToGenerate,
-    datasetId,
-  ]);
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} size={{ base: "xl", sm: "2xl", md: "3xl" }}>
-      <ModalOverlay />
-      <ModalContent w={1200}>
-        <ModalHeader>
-          <HStack>
-            <Icon as={BsStars} />
-            <Text>Generate Data</Text>
-          </HStack>
-        </ModalHeader>
-        <ModalCloseButton />
-        <ModalBody maxW="unset">
-          <VStack w="full" spacing={8} padding={8} alignItems="flex-start">
-            <VStack alignItems="flex-start" spacing={2}>
-              <Text fontWeight="bold">Number of Rows:</Text>
-              <NumberInput
-                step={5}
-                defaultValue={15}
-                min={0}
-                max={100}
-                onChange={(valueString) => setNumToGenerate(parseInt(valueString) || 0)}
-                value={numToGenerate}
-                w="24"
-              >
-                <NumberInputField />
-                <NumberInputStepper>
-                  <NumberIncrementStepper />
-                  <NumberDecrementStepper />
-                </NumberInputStepper>
-              </NumberInput>
-            </VStack>
-            <VStack alignItems="flex-start" w="full" spacing={2}>
-              <Text fontWeight="bold">Input Description:</Text>
-              <AutoResizeTextArea
-                value={inputDescription}
-                onChange={(e) => setInputDescription(e.target.value)}
-                placeholder="Each input should contain..."
-              />
-            </VStack>
-            <VStack alignItems="flex-start" w="full" spacing={2}>
-              <Text fontWeight="bold">Output Description (optional):</Text>
-              <AutoResizeTextArea
-                value={outputDescription}
-                onChange={(e) => setOutputDescription(e.target.value)}
-                placeholder="The output should contain..."
-              />
-            </VStack>
-          </VStack>
-        </ModalBody>
-        <ModalFooter>
-          <Button
-            colorScheme="blue"
-            isLoading={generateEntriesInProgress}
-            isDisabled={!numToGenerate || !inputDescription || !outputDescription}
-            onClick={generateEntries}
-          >
-            Generate
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  );
-};
--- a/src/components/datasets/TableRow.tsx
+++ b/src/components/datasets/TableRow.tsx
@@ -1,13 +0,0 @@
-import { Td, Tr } from "@chakra-ui/react";
-import { type DatasetEntry } from "@prisma/client";
-
-const TableRow = ({ entry }: { entry: DatasetEntry }) => {
-  return (
-    <Tr key={entry.id}>
-      <Td>{entry.input}</Td>
-      <Td>{entry.output}</Td>
-    </Tr>
-  );
-};
-
-export default TableRow;
--- a/src/components/experiments/ExperimentCard.tsx
+++ b/src/components/experiments/ExperimentCard.tsx
@@ -1,13 +1,4 @@
-import {
-  HStack,
-  Icon,
-  VStack,
-  Text,
-  Divider,
-  Spinner,
-  AspectRatio,
-  SkeletonText,
-} from "@chakra-ui/react";
+import { HStack, Icon, VStack, Text, Divider, Spinner, AspectRatio } from "@chakra-ui/react";
 import { RiFlaskLine } from "react-icons/ri";
 import { formatTimePast } from "~/utils/dayjs";
 import Link from "next/link";
@@ -102,13 +93,3 @@ export const NewExperimentCard = () => {
    </AspectRatio>
  );
 };
-
-export const ExperimentCardSkeleton = () => (
-  <AspectRatio ratio={1.2} w="full">
-    <VStack align="center" borderColor="gray.200" borderWidth={1} p={4} bg="gray.50">
-      <SkeletonText noOfLines={1} w="80%" />
-      <SkeletonText noOfLines={2} w="60%" />
-      <SkeletonText noOfLines={1} w="80%" />
-    </VStack>
-  </AspectRatio>
-);
--- a/src/components/experiments/ExperimentHeaderButtons/DeleteDialog.tsx
+++ b/src/components/experiments/ExperimentHeaderButtons/DeleteDialog.tsx
@@ -1,57 +0,0 @@
-import {
-  Button,
-  AlertDialog,
-  AlertDialogBody,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogContent,
-  AlertDialogOverlay,
-} from "@chakra-ui/react";
-
-import { useRouter } from "next/router";
-import { useRef } from "react";
-import { api } from "~/utils/api";
-import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks";
-
-export const DeleteDialog = ({ onClose }: { onClose: () => void }) => {
-  const experiment = useExperiment();
-  const deleteMutation = api.experiments.delete.useMutation();
-  const utils = api.useContext();
-  const router = useRouter();
-
-  const cancelRef = useRef<HTMLButtonElement>(null);
-
-  const [onDeleteConfirm] = useHandledAsyncCallback(async () => {
-    if (!experiment.data?.id) return;
-    await deleteMutation.mutateAsync({ id: experiment.data.id });
-    await utils.experiments.list.invalidate();
-    await router.push({ pathname: "/experiments" });
-    onClose();
-  }, [deleteMutation, experiment.data?.id, router]);
-
-  return (
-    <AlertDialog isOpen leastDestructiveRef={cancelRef} onClose={onClose}>
-      <AlertDialogOverlay>
-        <AlertDialogContent>
-          <AlertDialogHeader fontSize="lg" fontWeight="bold">
-            Delete Experiment
-          </AlertDialogHeader>
-
-          <AlertDialogBody>
-            If you delete this experiment all the associated prompts and scenarios will be deleted
-            as well. Are you sure?
-          </AlertDialogBody>
-
-          <AlertDialogFooter>
-            <Button ref={cancelRef} onClick={onClose}>
-              Cancel
-            </Button>
-            <Button colorScheme="red" onClick={onDeleteConfirm} ml={3}>
-              Delete
-            </Button>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialogOverlay>
-    </AlertDialog>
-  );
-};
--- a/src/components/experiments/ExperimentHeaderButtons/ExperimentHeaderButtons.tsx
+++ b/src/components/experiments/ExperimentHeaderButtons/ExperimentHeaderButtons.tsx
@@ -1,42 +0,0 @@
-import { Button, HStack, Icon, Spinner, Text } from "@chakra-ui/react";
-import { useOnForkButtonPressed } from "./useOnForkButtonPressed";
-import { useExperiment } from "~/utils/hooks";
-import { BsGearFill } from "react-icons/bs";
-import { TbGitFork } from "react-icons/tb";
-import { useAppStore } from "~/state/store";
-
-export const ExperimentHeaderButtons = () => {
-  const experiment = useExperiment();
-
-  const canModify = experiment.data?.access.canModify ?? false;
-
-  const { onForkButtonPressed, isForking } = useOnForkButtonPressed();
-
-  const openDrawer = useAppStore((s) => s.openDrawer);
-
-  if (experiment.isLoading) return null;
-
-  return (
-    <HStack spacing={0} mt={{ base: 2, md: 0 }}>
-      <Button
-        onClick={onForkButtonPressed}
-        mr={4}
-        colorScheme={canModify ? undefined : "orange"}
-        bgColor={canModify ? undefined : "orange.400"}
-        minW={0}
-        variant={{ base: "solid", md: canModify ? "ghost" : "solid" }}
-      >
-        {isForking ? <Spinner boxSize={5} /> : <Icon as={TbGitFork} boxSize={5} />}
-        <Text ml={2}>Fork</Text>
-      </Button>
-      {canModify && (
-        <Button variant={{ base: "solid", md: "ghost" }} onClick={openDrawer}>
-          <HStack>
-            <Icon as={BsGearFill} />
-            <Text>Settings</Text>
-          </HStack>
-        </Button>
-      )}
-    </HStack>
-  );
-};
--- a/src/components/experiments/ExperimentHeaderButtons/useOnForkButtonPressed.tsx
+++ b/src/components/experiments/ExperimentHeaderButtons/useOnForkButtonPressed.tsx
@@ -1,30 +0,0 @@
-import { useCallback } from "react";
-import { api } from "~/utils/api";
-import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks";
-import { signIn, useSession } from "next-auth/react";
-import { useRouter } from "next/router";
-
-export const useOnForkButtonPressed = () => {
-  const router = useRouter();
-
-  const user = useSession().data;
-  const experiment = useExperiment();
-
-  const forkMutation = api.experiments.fork.useMutation();
-
-  const [onFork, isForking] = useHandledAsyncCallback(async () => {
-    if (!experiment.data?.id) return;
-    const forkedExperimentId = await forkMutation.mutateAsync({ id: experiment.data.id });
-    await router.push({ pathname: "/experiments/[id]", query: { id: forkedExperimentId } });
-  }, [forkMutation, experiment.data?.id, router]);
-
-  const onForkButtonPressed = useCallback(() => {
-    if (user === null) {
-      signIn("github").catch(console.error);
-    } else {
-      onFork();
-    }
-  }, [onFork, user]);
-
-  return { onForkButtonPressed, isForking };
-};
--- a/src/components/nav/AppShell.tsx
+++ b/src/components/nav/AppShell.tsx
@@ -8,43 +8,42 @@ import {
  Text,
  Box,
  type BoxProps,
-  Link as ChakraLink,
+  type LinkProps,
+  Link,
  Flex,
 } from "@chakra-ui/react";
 import Head from "next/head";
-import Link, { type LinkProps } from "next/link";
 import { BsGithub, BsPersonCircle } from "react-icons/bs";
 import { useRouter } from "next/router";
 import { type IconType } from "react-icons";
-import { RiDatabase2Line, RiFlaskLine } from "react-icons/ri";
+import { RiFlaskLine } from "react-icons/ri";
 import { signIn, useSession } from "next-auth/react";
 import UserMenu from "./UserMenu";
-import { env } from "~/env.mjs";

-type IconLinkProps = BoxProps & LinkProps & { label?: string; icon: IconType; href: string };
+type IconLinkProps = BoxProps & LinkProps & { label?: string; icon: IconType };

-const IconLink = ({ icon, label, href, color, ...props }: IconLinkProps) => {
+const IconLink = ({ icon, label, href, target, color, ...props }: IconLinkProps) => {
  const router = useRouter();
  const isActive = href && router.pathname.startsWith(href);
  return (
-    <Link href={href} style={{ width: "100%" }}>
-      <HStack
-        w="full"
-        p={4}
-        color={color}
-        as={ChakraLink}
-        bgColor={isActive ? "gray.200" : "transparent"}
-        _hover={{ bgColor: "gray.300", textDecoration: "none" }}
-        justifyContent="start"
-        cursor="pointer"
-        {...props}
-      >
-        <Icon as={icon} boxSize={6} mr={2} />
-        <Text fontWeight="bold" fontSize="sm">
-          {label}
-        </Text>
-      </HStack>
-    </Link>
+    <HStack
+      w="full"
+      p={4}
+      color={color}
+      as={Link}
+      href={href}
+      target={target}
+      bgColor={isActive ? "gray.200" : "transparent"}
+      _hover={{ bgColor: "gray.200", textDecoration: "none" }}
+      justifyContent="start"
+      cursor="pointer"
+      {...props}
+    >
+      <Icon as={icon} boxSize={6} mr={2} />
+      <Text fontWeight="bold" fontSize="sm">
+        {label}
+      </Text>
+    </HStack>
  );
 };

@@ -73,37 +72,21 @@ const NavSidebar = () => {
        {user != null && (
          <>
            <IconLink icon={RiFlaskLine} label="Experiments" href="/experiments" />
-            {env.NEXT_PUBLIC_SHOW_DATA && (
-              <IconLink icon={RiDatabase2Line} label="Data" href="/data" />
-            )}
          </>
        )}
        {user === null && (
-          <HStack
-            w="full"
-            p={4}
-            as={ChakraLink}
-            _hover={{ bgColor: "gray.300", textDecoration: "none" }}
-            justifyContent="start"
-            cursor="pointer"
+          <IconLink
+            icon={BsPersonCircle}
+            label="Sign In"
            onClick={() => {
              signIn("github").catch(console.error);
            }}
-          >
-            <Icon as={BsPersonCircle} boxSize={6} mr={2} />
-            <Text fontWeight="bold" fontSize="sm">
-              Sign In
-            </Text>
-          </HStack>
+          />
        )}
      </VStack>
-      {user ? (
-        <UserMenu user={user} borderColor={"gray.200"} borderTopWidth={1} borderBottomWidth={1} />
-      ) : (
-        <Divider />
-      )}
+      {user ? <UserMenu user={user} /> : <Divider />}
      <VStack spacing={0} align="center">
-        <ChakraLink
+        <Link
          href="https://github.com/openpipe/openpipe"
          target="_blank"
          color="gray.500"
@@ -111,7 +94,7 @@ const NavSidebar = () => {
          p={2}
        >
          <Icon as={BsGithub} boxSize={6} />
-        </ChakraLink>
+        </Link>
      </VStack>
    </VStack>
  );
--- a/src/components/nav/UserMenu.tsx
+++ b/src/components/nav/UserMenu.tsx
@@ -8,16 +8,12 @@ import {
  PopoverTrigger,
  PopoverContent,
  Link,
-  useColorMode,
-  type StackProps,
 } from "@chakra-ui/react";
 import { type Session } from "next-auth";
 import { signOut } from "next-auth/react";
 import { BsBoxArrowRight, BsChevronRight, BsPersonCircle } from "react-icons/bs";

-export default function UserMenu({ user, ...rest }: { user: Session } & StackProps) {
-  const { colorMode } = useColorMode();
-
+export default function UserMenu({ user }: { user: Session }) {
  const profileImage = user.user.image ? (
    <Image src={user.user.image} alt="profile picture" boxSize={8} borderRadius="50%" />
  ) : (
@@ -33,10 +29,12 @@ export default function UserMenu({ user, ...rest }: { user: Session } & StackPro
            px={3}
            spacing={3}
            py={2}
-            {...rest}
+            borderColor={"gray.200"}
+            borderTopWidth={1}
+            borderBottomWidth={1}
            cursor="pointer"
            _hover={{
-              bgColor: colorMode === "light" ? "gray.200" : "gray.700",
+              bgColor: "gray.200",
            }}
          >
            {profileImage}
--- a/src/env.mjs
+++ b/src/env.mjs
@@ -9,6 +9,7 @@ export const env = createEnv({
  server: {
    DATABASE_URL: z.string().url(),
    NODE_ENV: z.enum(["development", "test", "production"]).default("development"),
+    OPENAI_API_KEY: z.string().min(1),
    RESTRICT_PRISMA_LOGS: z
      .string()
      .optional()
@@ -16,10 +17,6 @@ export const env = createEnv({
      .transform((val) => val.toLowerCase() === "true"),
    GITHUB_CLIENT_ID: z.string().min(1),
    GITHUB_CLIENT_SECRET: z.string().min(1),
-    OPENAI_API_KEY: z.string().min(1),
-    REPLICATE_API_TOKEN: z.string().default("placeholder"),
-    ANTHROPIC_API_KEY: z.string().default("placeholder"),
-    SENTRY_AUTH_TOKEN: z.string().optional(),
  },

  /**
@@ -30,9 +27,6 @@ export const env = createEnv({
  client: {
    NEXT_PUBLIC_POSTHOG_KEY: z.string().optional(),
    NEXT_PUBLIC_SOCKET_URL: z.string().url().default("http://localhost:3318"),
-    NEXT_PUBLIC_HOST: z.string().url().default("http://localhost:3000"),
-    NEXT_PUBLIC_SENTRY_DSN: z.string().optional(),
-    NEXT_PUBLIC_SHOW_DATA: z.string().optional(),
  },

  /**
@@ -46,14 +40,8 @@ export const env = createEnv({
    RESTRICT_PRISMA_LOGS: process.env.RESTRICT_PRISMA_LOGS,
    NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
    NEXT_PUBLIC_SOCKET_URL: process.env.NEXT_PUBLIC_SOCKET_URL,
-    NEXT_PUBLIC_HOST: process.env.NEXT_PUBLIC_HOST,
-    NEXT_PUBLIC_SHOW_DATA: process.env.NEXT_PUBLIC_SHOW_DATA,
    GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID,
    GITHUB_CLIENT_SECRET: process.env.GITHUB_CLIENT_SECRET,
-    REPLICATE_API_TOKEN: process.env.REPLICATE_API_TOKEN,
-    ANTHROPIC_API_KEY: process.env.ANTHROPIC_API_KEY,
-    NEXT_PUBLIC_SENTRY_DSN: process.env.NEXT_PUBLIC_SENTRY_DSN,
-    SENTRY_AUTH_TOKEN: process.env.SENTRY_AUTH_TOKEN,
  },
  /**
   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
--- a/src/modelProviders/anthropic-completion/codegen/codegen.ts
+++ b/src/modelProviders/anthropic-completion/codegen/codegen.ts
@@ -1,69 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
-import YAML from "yaml";
-import fs from "fs";
-import path from "path";
-import { openapiSchemaToJsonSchema } from "@openapi-contrib/openapi-schema-to-json-schema";
-import $RefParser from "@apidevtools/json-schema-ref-parser";
-import { type JSONObject } from "superjson/dist/types";
-import assert from "assert";
-import { type JSONSchema4Object } from "json-schema";
-import { isObject } from "lodash-es";
-
-// @ts-expect-error for some reason missing from types
-import parserEstree from "prettier/plugins/estree";
-import parserBabel from "prettier/plugins/babel";
-import prettier from "prettier/standalone";
-
-const OPENAPI_URL =
-  "https://raw.githubusercontent.com/tryAGI/Anthropic/1c0871e861de60a4c3a843cb90e17d63e86c234a/docs/openapi.yaml";
-
-// Fetch the openapi document
-const response = await fetch(OPENAPI_URL);
-const openApiYaml = await response.text();
-
-// Parse the yaml document
-let schema = YAML.parse(openApiYaml) as JSONObject;
-schema = openapiSchemaToJsonSchema(schema);
-
-const jsonSchema = await $RefParser.dereference(schema);
-
-assert("components" in jsonSchema);
-const completionRequestSchema = jsonSchema.components.schemas
-  .CreateCompletionRequest as JSONSchema4Object;
-
-// We need to do a bit of surgery here since the Monaco editor doesn't like
-// the fact that the schema says `model` can be either a string or an enum,
-// and displays a warning in the editor. Let's stick with just an enum for
-// now and drop the string option.
-assert(
-  "properties" in completionRequestSchema &&
-    isObject(completionRequestSchema.properties) &&
-    "model" in completionRequestSchema.properties &&
-    isObject(completionRequestSchema.properties.model),
-);
-
-const modelProperty = completionRequestSchema.properties.model;
-assert(
-  "oneOf" in modelProperty &&
-    Array.isArray(modelProperty.oneOf) &&
-    modelProperty.oneOf.length === 2 &&
-    isObject(modelProperty.oneOf[1]) &&
-    "enum" in modelProperty.oneOf[1],
-  "Expected model to have oneOf length of 2",
-);
-modelProperty.type = "string";
-modelProperty.enum = modelProperty.oneOf[1].enum;
-delete modelProperty["oneOf"];
-
-// Get the directory of the current script
-const currentDirectory = path.dirname(import.meta.url).replace("file://", "");
-
-// Write the JSON schema to a file in the current directory
-fs.writeFileSync(
-  path.join(currentDirectory, "input.schema.json"),
-  await prettier.format(JSON.stringify(completionRequestSchema, null, 2), {
-    parser: "json",
-    plugins: [parserBabel, parserEstree],
-  }),
-);
--- a/src/modelProviders/anthropic-completion/codegen/input.schema.json
+++ b/src/modelProviders/anthropic-completion/codegen/input.schema.json
@@ -1,63 +0,0 @@
-{
-  "type": "object",
-  "properties": {
-    "model": {
-      "description": "The model that will complete your prompt.",
-      "x-oaiTypeLabel": "string",
-      "type": "string",
-      "enum": [
-        "claude-2",
-        "claude-2.0",
-        "claude-instant-1",
-        "claude-instant-1.1"
-      ]
-    },
-    "prompt": {
-      "description": "The prompt that you want Claude to complete.\n\nFor proper response generation you will need to format your prompt as follows:\n\"\\n\\nHuman: all instructions for the assistant\\n\\nAssistant:\". The prompt string should begin with the characters \"Human:\" and end with \"Assistant:\".",
-      "default": "<|endoftext|>",
-      "example": "\\n\\nHuman: What is the correct translation of ${scenario.input}? I would like a long analysis followed by a short answer.\\n\\nAssistant:",
-      "type": "string"
-    },
-    "max_tokens_to_sample": {
-      "type": "integer",
-      "minimum": 1,
-      "default": 256,
-      "nullable": true,
-      "description": "The maximum number of tokens to generate before stopping."
-    },
-    "temperature": {
-      "type": "number",
-      "minimum": 0,
-      "maximum": 1,
-      "nullable": true,
-      "description": "Amount of randomness injected into the response.\n\nDefaults to 1."
-    },
-    "top_p": {
-      "type": "number",
-      "minimum": 0,
-      "maximum": 1,
-      "nullable": true,
-      "description": "Use nucleus sampling.\n\nYou should either alter temperature or top_p, but not both.\n"
-    },
-    "top_k": {
-      "type": "number",
-      "minimum": 0,
-      "default": 5,
-      "nullable": true,
-      "description": "Only sample from the top K options for each subsequent token."
-    },
-    "stream": {
-      "description": "Whether to incrementally stream the response using server-sent events.",
-      "type": "boolean",
-      "nullable": true,
-      "default": false
-    },
-    "stop_sequences": {
-      "description": "Sequences that will cause the model to stop generating completion text.\nBy default, our models stop on \"\\n\\nHuman:\".",
-      "default": null,
-      "nullable": true,
-      "type": "array"
-    }
-  },
-  "required": ["model", "prompt", "max_tokens_to_sample"]
-}
--- a/src/modelProviders/anthropic-completion/frontend.ts
+++ b/src/modelProviders/anthropic-completion/frontend.ts
@@ -1,42 +0,0 @@
-import { type Completion } from "@anthropic-ai/sdk/resources";
-import { type SupportedModel } from ".";
-import { type FrontendModelProvider } from "../types";
-import { refinementActions } from "./refinementActions";
-
-const frontendModelProvider: FrontendModelProvider<SupportedModel, Completion> = {
-  name: "Replicate Llama2",
-
-  models: {
-    "claude-2.0": {
-      name: "Claude 2.0",
-      contextWindow: 100000,
-      promptTokenPrice: 11.02 / 1000000,
-      completionTokenPrice: 32.68 / 1000000,
-      speed: "medium",
-      provider: "anthropic/completion",
-      learnMoreUrl: "https://www.anthropic.com/product",
-      apiDocsUrl: "https://docs.anthropic.com/claude/reference/complete_post",
-    },
-    "claude-instant-1.1": {
-      name: "Claude Instant 1.1",
-      contextWindow: 100000,
-      promptTokenPrice: 1.63 / 1000000,
-      completionTokenPrice: 5.51 / 1000000,
-      speed: "fast",
-      provider: "anthropic/completion",
-      learnMoreUrl: "https://www.anthropic.com/product",
-      apiDocsUrl: "https://docs.anthropic.com/claude/reference/complete_post",
-    },
-  },
-
-  refinementActions,
-
-  normalizeOutput: (output) => {
-    return {
-      type: "text",
-      value: output.completion,
-    };
-  },
-};
-
-export default frontendModelProvider;
--- a/src/modelProviders/anthropic-completion/getCompletion.ts
+++ b/src/modelProviders/anthropic-completion/getCompletion.ts
@@ -1,86 +0,0 @@
-import { env } from "~/env.mjs";
-import { type CompletionResponse } from "../types";
-
-import Anthropic, { APIError } from "@anthropic-ai/sdk";
-import { type Completion, type CompletionCreateParams } from "@anthropic-ai/sdk/resources";
-import { isObject, isString } from "lodash-es";
-
-const anthropic = new Anthropic({
-  apiKey: env.ANTHROPIC_API_KEY,
-});
-
-export async function getCompletion(
-  input: CompletionCreateParams,
-  onStream: ((partialOutput: Completion) => void) | null,
-): Promise<CompletionResponse<Completion>> {
-  const start = Date.now();
-  let finalCompletion: Completion | null = null;
-
-  try {
-    if (onStream) {
-      const resp = await anthropic.completions.create(
-        { ...input, stream: true },
-        {
-          maxRetries: 0,
-        },
-      );
-
-      for await (const part of resp) {
-        if (finalCompletion === null) {
-          finalCompletion = part;
-        } else {
-          finalCompletion = { ...part, completion: finalCompletion.completion + part.completion };
-        }
-        onStream(finalCompletion);
-      }
-      if (!finalCompletion) {
-        return {
-          type: "error",
-          message: "Streaming failed to return a completion",
-          autoRetry: false,
-        };
-      }
-    } else {
-      const resp = await anthropic.completions.create(
-        { ...input, stream: false },
-        {
-          maxRetries: 0,
-        },
-      );
-      finalCompletion = resp;
-    }
-    const timeToComplete = Date.now() - start;
-
-    return {
-      type: "success",
-      statusCode: 200,
-      value: finalCompletion,
-      timeToComplete,
-    };
-  } catch (error: unknown) {
-    console.log("CAUGHT ERROR", error);
-    if (error instanceof APIError) {
-      const message =
-        isObject(error.error) &&
-        "error" in error.error &&
-        isObject(error.error.error) &&
-        "message" in error.error.error &&
-        isString(error.error.error.message)
-          ? error.error.error.message
-          : error.message;
-
-      return {
-        type: "error",
-        message,
-        autoRetry: error.status === 429 || error.status === 503,
-        statusCode: error.status,
-      };
-    } else {
-      return {
-        type: "error",
-        message: (error as Error).message,
-        autoRetry: true,
-      };
-    }
-  }
-}
--- a/src/modelProviders/anthropic-completion/index.ts
+++ b/src/modelProviders/anthropic-completion/index.ts
@@ -1,34 +0,0 @@
-import { type JSONSchema4 } from "json-schema";
-import { type ModelProvider } from "../types";
-import inputSchema from "./codegen/input.schema.json";
-import { getCompletion } from "./getCompletion";
-import frontendModelProvider from "./frontend";
-import type { Completion, CompletionCreateParams } from "@anthropic-ai/sdk/resources";
-
-const supportedModels = ["claude-2.0", "claude-instant-1.1"] as const;
-
-export type SupportedModel = (typeof supportedModels)[number];
-
-export type AnthropicProvider = ModelProvider<SupportedModel, CompletionCreateParams, Completion>;
-
-const modelProvider: AnthropicProvider = {
-  getModel: (input) => {
-    if (supportedModels.includes(input.model as SupportedModel))
-      return input.model as SupportedModel;
-
-    const modelMaps: Record<string, SupportedModel> = {
-      "claude-2": "claude-2.0",
-      "claude-instant-1": "claude-instant-1.1",
-    };
-
-    if (input.model in modelMaps) return modelMaps[input.model] as SupportedModel;
-
-    return null;
-  },
-  inputSchema: inputSchema as JSONSchema4,
-  canStream: true,
-  getCompletion,
-  ...frontendModelProvider,
-};
-
-export default modelProvider;
--- a/src/modelProviders/anthropic-completion/refinementActions.ts
+++ b/src/modelProviders/anthropic-completion/refinementActions.ts
@@ -1,3 +0,0 @@
-import { type RefinementAction } from "../types";
-
-export const refinementActions: Record<string, RefinementAction> = {};
--- a/src/modelProviders/frontendModelProviders.ts
+++ b/src/modelProviders/frontendModelProviders.ts
@@ -1,15 +0,0 @@
-import openaiChatCompletionFrontend from "./openai-ChatCompletion/frontend";
-import replicateLlama2Frontend from "./replicate-llama2/frontend";
-import anthropicFrontend from "./anthropic-completion/frontend";
-import { type SupportedProvider, type FrontendModelProvider } from "./types";
-
-// Keep attributes here that need to be accessible from the frontend. We can't
-// just include them in the default `modelProviders` object because it has some
-// transient dependencies that can only be imported on the server.
-const frontendModelProviders: Record<SupportedProvider, FrontendModelProvider<any, any>> = {
-  "openai/ChatCompletion": openaiChatCompletionFrontend,
-  "replicate/llama2": replicateLlama2Frontend,
-  "anthropic/completion": anthropicFrontend,
-};
-
-export default frontendModelProviders;
--- a/src/modelProviders/modelProviders.ts
+++ b/src/modelProviders/modelProviders.ts
@@ -1,12 +1,7 @@
 import openaiChatCompletion from "./openai-ChatCompletion";
-import replicateLlama2 from "./replicate-llama2";
-import anthropicCompletion from "./anthropic-completion";
-import { type SupportedProvider, type ModelProvider } from "./types";

-const modelProviders: Record<SupportedProvider, ModelProvider<any, any, any>> = {
+const modelProviders = {
  "openai/ChatCompletion": openaiChatCompletion,
-  "replicate/llama2": replicateLlama2,
-  "anthropic/completion": anthropicCompletion,
-};
+} as const;

 export default modelProviders;
--- a/src/modelProviders/modelProvidersFrontend.ts
+++ b/src/modelProviders/modelProvidersFrontend.ts
@@ -0,0 +1,10 @@
+import modelProviderFrontend from "./openai-ChatCompletion/frontend";
+
+// Keep attributes here that need to be accessible from the frontend. We can't
+// just include them in the default `modelProviders` object because it has some
+// transient dependencies that can only be imported on the server.
+const modelProvidersFrontend = {
+  "openai/ChatCompletion": modelProviderFrontend,
+} as const;
+
+export default modelProvidersFrontend;
--- a/src/modelProviders/modelStats.ts
+++ b/src/modelProviders/modelStats.ts
@@ -0,0 +1,77 @@
+import { type SupportedModel } from "../server/types";
+
+interface ModelStats {
+  contextLength: number;
+  promptTokenPrice: number;
+  completionTokenPrice: number;
+  speed: "fast" | "medium" | "slow";
+  provider: "OpenAI";
+  learnMoreUrl: string;
+}
+
+export const modelStats: Record<SupportedModel, ModelStats> = {
+  "gpt-4": {
+    contextLength: 8192,
+    promptTokenPrice: 0.00003,
+    completionTokenPrice: 0.00006,
+    speed: "medium",
+    provider: "OpenAI",
+    learnMoreUrl: "https://openai.com/gpt-4",
+  },
+  "gpt-4-0613": {
+    contextLength: 8192,
+    promptTokenPrice: 0.00003,
+    completionTokenPrice: 0.00006,
+    speed: "medium",
+    provider: "OpenAI",
+    learnMoreUrl: "https://openai.com/gpt-4",
+  },
+  "gpt-4-32k": {
+    contextLength: 32768,
+    promptTokenPrice: 0.00006,
+    completionTokenPrice: 0.00012,
+    speed: "medium",
+    provider: "OpenAI",
+    learnMoreUrl: "https://openai.com/gpt-4",
+  },
+  "gpt-4-32k-0613": {
+    contextLength: 32768,
+    promptTokenPrice: 0.00006,
+    completionTokenPrice: 0.00012,
+    speed: "medium",
+    provider: "OpenAI",
+    learnMoreUrl: "https://openai.com/gpt-4",
+  },
+  "gpt-3.5-turbo": {
+    contextLength: 4096,
+    promptTokenPrice: 0.0000015,
+    completionTokenPrice: 0.000002,
+    speed: "fast",
+    provider: "OpenAI",
+    learnMoreUrl: "https://platform.openai.com/docs/guides/gpt/chat-completions-api",
+  },
+  "gpt-3.5-turbo-0613": {
+    contextLength: 4096,
+    promptTokenPrice: 0.0000015,
+    completionTokenPrice: 0.000002,
+    speed: "fast",
+    provider: "OpenAI",
+    learnMoreUrl: "https://platform.openai.com/docs/guides/gpt/chat-completions-api",
+  },
+  "gpt-3.5-turbo-16k": {
+    contextLength: 16384,
+    promptTokenPrice: 0.000003,
+    completionTokenPrice: 0.000004,
+    speed: "fast",
+    provider: "OpenAI",
+    learnMoreUrl: "https://platform.openai.com/docs/guides/gpt/chat-completions-api",
+  },
+  "gpt-3.5-turbo-16k-0613": {
+    contextLength: 16384,
+    promptTokenPrice: 0.000003,
+    completionTokenPrice: 0.000004,
+    speed: "fast",
+    provider: "OpenAI",
+    learnMoreUrl: "https://platform.openai.com/docs/guides/gpt/chat-completions-api",
+  },
+};
--- a/src/modelProviders/openai-ChatCompletion/codegen/codegen.ts
+++ b/src/modelProviders/openai-ChatCompletion/codegen/codegen.ts
@@ -56,14 +56,6 @@ modelProperty.type = "string";
 modelProperty.enum = modelProperty.oneOf[1].enum;
 delete modelProperty["oneOf"];

-// The default of "inf" confuses the Typescript generator, so can just remove it
-assert(
-  "max_tokens" in completionRequestSchema.properties &&
-    isObject(completionRequestSchema.properties.max_tokens) &&
-    "default" in completionRequestSchema.properties.max_tokens,
-);
-delete completionRequestSchema.properties.max_tokens["default"];
-
 // Get the directory of the current script
 const currentDirectory = path.dirname(import.meta.url).replace("file://", "");

--- a/src/modelProviders/openai-ChatCompletion/codegen/input.schema.json
+++ b/src/modelProviders/openai-ChatCompletion/codegen/input.schema.json
@@ -150,6 +150,7 @@
    },
    "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",
+      "default": "inf",
      "type": "integer"
    },
    "presence_penalty": {
--- a/src/modelProviders/openai-ChatCompletion/frontend.ts
+++ b/src/modelProviders/openai-ChatCompletion/frontend.ts
@@ -1,53 +1,8 @@
 import { type JsonValue } from "type-fest";
-import { type SupportedModel } from ".";
-import { type FrontendModelProvider } from "../types";
-import { type ChatCompletion } from "openai/resources/chat";
-import { refinementActions } from "./refinementActions";
-
-const frontendModelProvider: FrontendModelProvider<SupportedModel, ChatCompletion> = {
-  name: "OpenAI ChatCompletion",
-
-  models: {
-    "gpt-4-0613": {
-      name: "GPT-4",
-      contextWindow: 8192,
-      promptTokenPrice: 0.00003,
-      completionTokenPrice: 0.00006,
-      speed: "medium",
-      provider: "openai/ChatCompletion",
-      learnMoreUrl: "https://openai.com/gpt-4",
-    },
-    "gpt-4-32k-0613": {
-      name: "GPT-4 32k",
-      contextWindow: 32768,
-      promptTokenPrice: 0.00006,
-      completionTokenPrice: 0.00012,
-      speed: "medium",
-      provider: "openai/ChatCompletion",
-      learnMoreUrl: "https://openai.com/gpt-4",
-    },
-    "gpt-3.5-turbo-0613": {
-      name: "GPT-3.5 Turbo",
-      contextWindow: 4096,
-      promptTokenPrice: 0.0000015,
-      completionTokenPrice: 0.000002,
-      speed: "fast",
-      provider: "openai/ChatCompletion",
-      learnMoreUrl: "https://platform.openai.com/docs/guides/gpt/chat-completions-api",
-    },
-    "gpt-3.5-turbo-16k-0613": {
-      name: "GPT-3.5 Turbo 16k",
-      contextWindow: 16384,
-      promptTokenPrice: 0.000003,
-      completionTokenPrice: 0.000004,
-      speed: "fast",
-      provider: "openai/ChatCompletion",
-      learnMoreUrl: "https://platform.openai.com/docs/guides/gpt/chat-completions-api",
-    },
-  },
-
-  refinementActions,
+import { type OpenaiChatModelProvider } from ".";
+import { type ModelProviderFrontend } from "../types";

+const modelProviderFrontend: ModelProviderFrontend<OpenaiChatModelProvider> = {
  normalizeOutput: (output) => {
    const message = output.choices[0]?.message;
    if (!message)
@@ -84,4 +39,4 @@ const frontendModelProvider: FrontendModelProvider<SupportedModel, ChatCompletio
  },
 };

-export default frontendModelProvider;
+export default modelProviderFrontend;
--- a/src/modelProviders/openai-ChatCompletion/getCompletion.ts
+++ b/src/modelProviders/openai-ChatCompletion/getCompletion.ts
@@ -6,12 +6,12 @@ import {
 } from "openai/resources/chat";
 import { countOpenAIChatTokens } from "~/utils/countTokens";
 import { type CompletionResponse } from "../types";
-import { isArray, isString, omit } from "lodash-es";
+import { omit } from "lodash-es";
 import { openai } from "~/server/utils/openai";
+import { type OpenAIChatModel } from "~/server/types";
 import { truthyFilter } from "~/utils/utils";
 import { APIError } from "openai";
-import frontendModelProvider from "./frontend";
-import modelProvider, { type SupportedModel } from ".";
+import { modelStats } from "../modelStats";

 const mergeStreamedChunks = (
  base: ChatCompletion | null,
@@ -40,8 +40,6 @@ const mergeStreamedChunks = (
          ((choice.delta.function_call.arguments as string) ?? "");
      }
    } else {
-      // @ts-expect-error the types are correctly telling us that finish_reason
-      // could be null, but don't want to fix it right now.
      choices.push({ ...omit(choice, "delta"), message: { role: "assistant", ...choice.delta } });
    }
  }
@@ -62,11 +60,9 @@ export async function getCompletion(
  let finalCompletion: ChatCompletion | null = null;
  let promptTokens: number | undefined = undefined;
  let completionTokens: number | undefined = undefined;
-  const modelName = modelProvider.getModel(input) as SupportedModel;

  try {
    if (onStream) {
-      console.log("got started");
      const resp = await openai.chat.completions.create(
        { ...input, stream: true },
        {
@@ -74,11 +70,9 @@ export async function getCompletion(
        },
      );
      for await (const part of resp) {
-        console.log("got part", part);
        finalCompletion = mergeStreamedChunks(finalCompletion, part);
        onStream(finalCompletion);
      }
-      console.log("got final", finalCompletion);
      if (!finalCompletion) {
        return {
          type: "error",
@@ -87,9 +81,12 @@ export async function getCompletion(
        };
      }
      try {
-        promptTokens = countOpenAIChatTokens(modelName, input.messages);
+        promptTokens = countOpenAIChatTokens(
+          input.model as keyof typeof OpenAIChatModel,
+          input.messages,
+        );
        completionTokens = countOpenAIChatTokens(
-          modelName,
+          input.model as keyof typeof OpenAIChatModel,
          finalCompletion.choices.map((c) => c.message).filter(truthyFilter),
        );
      } catch (err) {
@@ -109,10 +106,10 @@ export async function getCompletion(
    }
    const timeToComplete = Date.now() - start;

-    const { promptTokenPrice, completionTokenPrice } = frontendModelProvider.models[modelName];
+    const stats = modelStats[input.model as keyof typeof OpenAIChatModel];
    let cost = undefined;
-    if (promptTokenPrice && completionTokenPrice && promptTokens && completionTokens) {
-      cost = promptTokens * promptTokenPrice + completionTokens * completionTokenPrice;
+    if (stats && promptTokens && completionTokens) {
+      cost = promptTokens * stats.promptTokenPrice + completionTokens * stats.completionTokenPrice;
    }

    return {
@@ -125,18 +122,11 @@ export async function getCompletion(
      cost,
    };
  } catch (error: unknown) {
+    console.error("ERROR IS", error);
    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,
+        message: error.message,
        autoRetry: error.status === 429 || error.status === 503,
        statusCode: error.status,
      };
--- a/src/modelProviders/openai-ChatCompletion/index.ts
+++ b/src/modelProviders/openai-ChatCompletion/index.ts
@@ -3,7 +3,6 @@ import { type ModelProvider } from "../types";
 import inputSchema from "./codegen/input.schema.json";
 import { type ChatCompletion, type CompletionCreateParams } from "openai/resources/chat";
 import { getCompletion } from "./getCompletion";
-import frontendModelProvider from "./frontend";

 const supportedModels = [
  "gpt-4-0613",
@@ -12,7 +11,7 @@ const supportedModels = [
  "gpt-3.5-turbo-16k-0613",
 ] as const;

-export type SupportedModel = (typeof supportedModels)[number];
+type SupportedModel = (typeof supportedModels)[number];

 export type OpenaiChatModelProvider = ModelProvider<
  SupportedModel,
@@ -21,6 +20,25 @@ export type OpenaiChatModelProvider = ModelProvider<
 >;

 const modelProvider: OpenaiChatModelProvider = {
+  name: "OpenAI ChatCompletion",
+  models: {
+    "gpt-4-0613": {
+      name: "GPT-4",
+      learnMore: "https://openai.com/gpt-4",
+    },
+    "gpt-4-32k-0613": {
+      name: "GPT-4 32k",
+      learnMore: "https://openai.com/gpt-4",
+    },
+    "gpt-3.5-turbo-0613": {
+      name: "GPT-3.5 Turbo",
+      learnMore: "https://platform.openai.com/docs/guides/gpt/chat-completions-api",
+    },
+    "gpt-3.5-turbo-16k-0613": {
+      name: "GPT-3.5 Turbo 16k",
+      learnMore: "https://platform.openai.com/docs/guides/gpt/chat-completions-api",
+    },
+  },
  getModel: (input) => {
    if (supportedModels.includes(input.model as SupportedModel))
      return input.model as SupportedModel;
@@ -37,9 +55,8 @@ const modelProvider: OpenaiChatModelProvider = {
    return null;
  },
  inputSchema: inputSchema as JSONSchema4,
-  canStream: true,
+  shouldStream: (input) => input.stream ?? false,
  getCompletion,
-  ...frontendModelProvider,
 };

 export default modelProvider;
--- a/src/modelProviders/openai-ChatCompletion/refinementActions.ts
+++ b/src/modelProviders/openai-ChatCompletion/refinementActions.ts
@@ -1,279 +0,0 @@
-import { TfiThought } from "react-icons/tfi";
-import { type RefinementAction } from "../types";
-import { VscJson } from "react-icons/vsc";
-
-export const refinementActions: Record<string, RefinementAction> = {
-  "Add chain of thought": {
-    icon: VscJson,
-    description: "Asking the model to plan its answer can increase accuracy.",
-    instructions: `Adding chain of thought means asking the model to think about its answer before it gives it to you. This is useful for getting more accurate answers. Do not add an assistant message.
-  
-      This is what a prompt looks like before adding chain of thought:
-  
-      definePrompt("openai/ChatCompletion", {
-          model: "gpt-4",
-          stream: true,
-          messages: [
-              {
-              role: "system",
-              content: \`Evaluate sentiment.\`,
-              },
-              {
-              role: "user",
-              content: \`This is the user's message: \${scenario.user_message}. Return "positive" or "negative" or "neutral"\`,
-              },
-          ],
-      });
-  
-      This is what one looks like after adding chain of thought:
-  
-      definePrompt("openai/ChatCompletion", {
-          model: "gpt-4",
-          stream: true,
-          messages: [
-              {
-              role: "system",
-              content: \`Evaluate sentiment.\`,
-              },
-              {
-              role: "user",
-              content: \`This is the user's message: \${scenario.user_message}. Return "positive" or "negative" or "neutral". Explain your answer before you give a score, then return the score on a new line.\`,
-              },
-          ],
-      });
-  
-      Here's another example:
-  
-      Before:
-  
-      definePrompt("openai/ChatCompletion", {
-          model: "gpt-3.5-turbo",
-          messages: [
-            {
-              role: "user",
-              content: \`Title: \${scenario.title}
-        Body: \${scenario.body}
-  
-        Need: \${scenario.need}
-  
-        Rate likelihood on 1-3 scale.\`,
-            },
-          ],
-          temperature: 0,
-          functions: [
-            {
-              name: "score_post",
-              parameters: {
-                type: "object",
-                properties: {
-                  score: {
-                    type: "number",
-                  },
-                },
-              },
-            },
-          ],
-          function_call: {
-            name: "score_post",
-          },
-        });
-  
-      After:
-  
-      definePrompt("openai/ChatCompletion", {
-          model: "gpt-3.5-turbo",
-          messages: [
-            {
-              role: "user",
-              content: \`Title: \${scenario.title}
-        Body: \${scenario.body}
-  
-        Need: \${scenario.need}
-  
-        Rate likelihood on 1-3 scale. Provide an explanation, but always provide a score afterward.\`,
-            },
-          ],
-          temperature: 0,
-          functions: [
-            {
-              name: "score_post",
-              parameters: {
-                type: "object",
-                properties: {
-                  explanation: {
-                    type: "string",
-                  }
-                  score: {
-                    type: "number",
-                  },
-                },
-              },
-            },
-          ],
-          function_call: {
-            name: "score_post",
-          },
-        });
-  
-      Add chain of thought to the original prompt.`,
-  },
-  "Convert to function call": {
-    icon: TfiThought,
-    description: "Use function calls to get output from the model in a more structured way.",
-    instructions: `OpenAI functions are a specialized way for an LLM to return output.
-  
-      This is what a prompt looks like before adding a function:
-  
-      definePrompt("openai/ChatCompletion", {
-        model: "gpt-4",
-        stream: true,
-        messages: [
-          {
-            role: "system",
-            content: \`Evaluate sentiment.\`,
-          },
-          {
-            role: "user",
-            content: \`This is the user's message: \${scenario.user_message}. Return "positive" or "negative" or "neutral"\`,
-          },
-        ],
-      });
-  
-      This is what one looks like after adding a function:
-  
-      definePrompt("openai/ChatCompletion", {
-        model: "gpt-4",
-        stream: true,
-        messages: [
-          {
-            role: "system",
-            content: "Evaluate sentiment.",
-          },
-          {
-            role: "user",
-            content: scenario.user_message,
-          },
-        ],
-        functions: [
-          {
-            name: "extract_sentiment",
-            parameters: {
-              type: "object", // parameters must always be an object with a properties key
-              properties: { // properties key is required
-                sentiment: {
-                  type: "string",
-                  description: "one of positive/negative/neutral",
-                },
-              },
-            },
-          },
-        ],
-        function_call: {
-          name: "extract_sentiment",
-        },
-      });
-  
-      Here's another example of adding a function:
-  
-      Before:
-  
-      definePrompt("openai/ChatCompletion", {
-          model: "gpt-3.5-turbo",
-          messages: [
-            {
-              role: "user",
-              content: \`Here is the title and body of a reddit post I am interested in:
-  
-              title: \${scenario.title}
-              body: \${scenario.body}
-  
-              On a scale from 1 to 3, how likely is it that the person writing this post has the following need? If you are not sure, make your best guess, or answer 1.
-  
-              Need: \${scenario.need}
-  
-              Answer one integer between 1 and 3.\`,
-            },
-          ],
-          temperature: 0,
-      });
-  
-      After:
-  
-      definePrompt("openai/ChatCompletion", {
-          model: "gpt-3.5-turbo",
-          messages: [
-            {
-              role: "user",
-              content: \`Title: \${scenario.title}
-        Body: \${scenario.body}
-  
-        Need: \${scenario.need}
-  
-        Rate likelihood on 1-3 scale.\`,
-            },
-          ],
-          temperature: 0,
-          functions: [
-            {
-              name: "score_post",
-              parameters: {
-                type: "object",
-                properties: {
-                  score: {
-                    type: "number",
-                  },
-                },
-              },
-            },
-          ],
-          function_call: {
-            name: "score_post",
-          },
-        });
-  
-      Another example
-  
-      Before:
-  
-      definePrompt("openai/ChatCompletion", {
-        model: "gpt-3.5-turbo",
-        stream: true,
-        messages: [
-          {
-            role: "system",
-            content: \`Write 'Start experimenting!' in \${scenario.language}\`,
-          },
-        ],
-      });
-  
-      After:
-  
-      definePrompt("openai/ChatCompletion", {
-        model: "gpt-3.5-turbo",
-        messages: [
-          {
-            role: "system",
-            content: \`Write 'Start experimenting!' in \${scenario.language}\`,
-          },
-        ],
-        functions: [
-          {
-            name: "write_in_language",
-            parameters: {
-              type: "object",
-              properties: {
-                text: {
-                  type: "string",
-                },
-              },
-            },
-          },
-        ],
-        function_call: {
-          name: "write_in_language",
-        },
-      });
-  
-      Add an OpenAI function that takes one or more nested parameters that match the expected output from this prompt.`,
-  },
-};
--- a/src/modelProviders/replicate-llama2/frontend.ts
+++ b/src/modelProviders/replicate-llama2/frontend.ts
@@ -1,45 +0,0 @@
-import { type SupportedModel, type ReplicateLlama2Output } from ".";
-import { type FrontendModelProvider } from "../types";
-import { refinementActions } from "./refinementActions";
-
-const frontendModelProvider: FrontendModelProvider<SupportedModel, ReplicateLlama2Output> = {
-  name: "Replicate Llama2",
-
-  models: {
-    "7b-chat": {
-      name: "LLama 2 7B Chat",
-      contextWindow: 4096,
-      pricePerSecond: 0.0023,
-      speed: "fast",
-      provider: "replicate/llama2",
-      learnMoreUrl: "https://replicate.com/a16z-infra/llama7b-v2-chat",
-    },
-    "13b-chat": {
-      name: "LLama 2 13B Chat",
-      contextWindow: 4096,
-      pricePerSecond: 0.0023,
-      speed: "medium",
-      provider: "replicate/llama2",
-      learnMoreUrl: "https://replicate.com/a16z-infra/llama13b-v2-chat",
-    },
-    "70b-chat": {
-      name: "LLama 2 70B Chat",
-      contextWindow: 4096,
-      pricePerSecond: 0.0032,
-      speed: "slow",
-      provider: "replicate/llama2",
-      learnMoreUrl: "https://replicate.com/replicate/llama70b-v2-chat",
-    },
-  },
-
-  refinementActions,
-
-  normalizeOutput: (output) => {
-    return {
-      type: "text",
-      value: output.join(""),
-    };
-  },
-};
-
-export default frontendModelProvider;
--- a/src/modelProviders/replicate-llama2/getCompletion.ts
+++ b/src/modelProviders/replicate-llama2/getCompletion.ts
@@ -1,60 +0,0 @@
-import { env } from "~/env.mjs";
-import { type ReplicateLlama2Input, type ReplicateLlama2Output } from ".";
-import { type CompletionResponse } from "../types";
-import Replicate from "replicate";
-
-const replicate = new Replicate({
-  auth: env.REPLICATE_API_TOKEN || "",
-});
-
-const modelIds: Record<ReplicateLlama2Input["model"], string> = {
-  "7b-chat": "4f0b260b6a13eb53a6b1891f089d57c08f41003ae79458be5011303d81a394dc",
-  "13b-chat": "2a7f981751ec7fdf87b5b91ad4db53683a98082e9ff7bfd12c8cd5ea85980a52",
-  "70b-chat": "2c1608e18606fad2812020dc541930f2d0495ce32eee50074220b87300bc16e1",
-};
-
-export async function getCompletion(
-  input: ReplicateLlama2Input,
-  onStream: ((partialOutput: string[]) => void) | null,
-): Promise<CompletionResponse<ReplicateLlama2Output>> {
-  const start = Date.now();
-
-  const { model, ...rest } = input;
-
-  try {
-    const prediction = await replicate.predictions.create({
-      version: modelIds[model],
-      input: rest,
-    });
-
-    const interval = onStream
-      ? // eslint-disable-next-line @typescript-eslint/no-misused-promises
-        setInterval(async () => {
-          const partialPrediction = await replicate.predictions.get(prediction.id);
-
-          if (partialPrediction.output) onStream(partialPrediction.output as ReplicateLlama2Output);
-        }, 500)
-      : null;
-
-    const resp = await replicate.wait(prediction, {});
-    if (interval) clearInterval(interval);
-
-    const timeToComplete = Date.now() - start;
-
-    if (resp.error) throw new Error(resp.error as string);
-
-    return {
-      type: "success",
-      statusCode: 200,
-      value: resp.output as ReplicateLlama2Output,
-      timeToComplete,
-    };
-  } catch (error: unknown) {
-    console.error("ERROR IS", error);
-    return {
-      type: "error",
-      message: (error as Error).message,
-      autoRetry: true,
-    };
-  }
-}
--- a/src/modelProviders/replicate-llama2/index.ts
+++ b/src/modelProviders/replicate-llama2/index.ts
@@ -1,81 +0,0 @@
-import { type ModelProvider } from "../types";
-import frontendModelProvider from "./frontend";
-import { getCompletion } from "./getCompletion";
-
-const supportedModels = ["7b-chat", "13b-chat", "70b-chat"] as const;
-
-export type SupportedModel = (typeof supportedModels)[number];
-
-export type ReplicateLlama2Input = {
-  model: SupportedModel;
-  prompt: string;
-  max_length?: number;
-  temperature?: number;
-  top_p?: number;
-  repetition_penalty?: number;
-  debug?: boolean;
-};
-
-export type ReplicateLlama2Output = string[];
-
-export type ReplicateLlama2Provider = ModelProvider<
-  SupportedModel,
-  ReplicateLlama2Input,
-  ReplicateLlama2Output
->;
-
-const modelProvider: ReplicateLlama2Provider = {
-  getModel: (input) => {
-    if (supportedModels.includes(input.model)) return input.model;
-
-    return null;
-  },
-  inputSchema: {
-    type: "object",
-    properties: {
-      model: {
-        type: "string",
-        enum: supportedModels as unknown as string[],
-      },
-      system_prompt: {
-        type: "string",
-        description:
-          "System prompt to send to Llama v2. This is prepended to the prompt and helps guide system behavior.",
-      },
-      prompt: {
-        type: "string",
-        description: "Prompt to send to Llama v2.",
-      },
-      max_new_tokens: {
-        type: "number",
-        description:
-          "Maximum number of tokens to generate. A word is generally 2-3 tokens (minimum: 1)",
-      },
-      temperature: {
-        type: "number",
-        description:
-          "Adjusts randomness of outputs, 0.1 is a good starting value. (minimum: 0.01; maximum: 5)",
-      },
-      top_p: {
-        type: "number",
-        description:
-          "When decoding text, samples from the top p percentage of most likely tokens; lower to ignore less likely tokens (minimum: 0.01; maximum: 1)",
-      },
-      repetition_penalty: {
-        type: "number",
-        description:
-          "Penalty for repeated words in generated text; 1 is no penalty, values greater than 1 discourage repetition, less than 1 encourage it. (minimum: 0.01; maximum: 5)",
-      },
-      debug: {
-        type: "boolean",
-        description: "provide debugging output in logs",
-      },
-    },
-    required: ["model", "prompt"],
-  },
-  canStream: true,
-  getCompletion,
-  ...frontendModelProvider,
-};
-
-export default modelProvider;
--- a/src/modelProviders/replicate-llama2/refinementActions.ts
+++ b/src/modelProviders/replicate-llama2/refinementActions.ts
@@ -1,3 +0,0 @@
-import { type RefinementAction } from "../types";
-
-export const refinementActions: Record<string, RefinementAction> = {};
--- a/src/modelProviders/types.ts
+++ b/src/modelProviders/types.ts
@@ -1,39 +1,9 @@
 import { type JSONSchema4 } from "json-schema";
-import { type IconType } from "react-icons";
 import { type JsonValue } from "type-fest";
-import { z } from "zod";

-export const ZodSupportedProvider = z.union([
-  z.literal("openai/ChatCompletion"),
-  z.literal("replicate/llama2"),
-  z.literal("anthropic/completion"),
-]);
-
-export type SupportedProvider = z.infer<typeof ZodSupportedProvider>;
-
-export type Model = {
+type ModelProviderModel = {
  name: string;
-  contextWindow: number;
-  promptTokenPrice?: number;
-  completionTokenPrice?: number;
-  pricePerSecond?: number;
-  speed: "fast" | "medium" | "slow";
-  provider: SupportedProvider;
-  description?: string;
-  learnMoreUrl?: string;
-  apiDocsUrl?: string;
-};
-
-export type ProviderModel = { provider: z.infer<typeof ZodSupportedProvider>; model: string };
-
-export type RefinementAction = { icon?: IconType; description: string; instructions: string };
-
-export type FrontendModelProvider<SupportedModels extends string, OutputSchema> = {
-  name: string;
-  models: Record<SupportedModels, Model>;
-  refinementActions?: Record<string, RefinementAction>;
-
-  normalizeOutput: (output: OutputSchema) => NormalizedOutput;
+  learnMore: string;
 };

 export type CompletionResponse<T> =
@@ -49,8 +19,10 @@ export type CompletionResponse<T> =
    };

 export type ModelProvider<SupportedModels extends string, InputSchema, OutputSchema> = {
+  name: string;
+  models: Record<SupportedModels, ModelProviderModel>;
  getModel: (input: InputSchema) => SupportedModels | null;
-  canStream: boolean;
+  shouldStream: (input: InputSchema) => boolean;
  inputSchema: JSONSchema4;
  getCompletion: (
    input: InputSchema,
@@ -59,7 +31,7 @@ export type ModelProvider<SupportedModels extends string, InputSchema, OutputSch

  // This is just a convenience for type inference, don't use it at runtime
  _outputSchema?: OutputSchema | null;
-} & FrontendModelProvider<SupportedModels, OutputSchema>;
+};

 export type NormalizedOutput =
  | {
@@ -70,3 +42,7 @@ export type NormalizedOutput =
      type: "json";
      value: JsonValue;
    };
+
+export type ModelProviderFrontend<ModelProviderT extends ModelProvider<any, any, any>> = {
+  normalizeOutput: (output: NonNullable<ModelProviderT["_outputSchema"]>) => NormalizedOutput;
+};
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -3,12 +3,10 @@ import { SessionProvider } from "next-auth/react";
 import { type AppType } from "next/app";
 import { api } from "~/utils/api";
 import Favicon from "~/components/Favicon";
+import "~/utils/analytics";
 import Head from "next/head";
 import { ChakraThemeProvider } from "~/theme/ChakraThemeProvider";
 import { SyncAppStore } from "~/state/sync";
-import NextAdapterApp from "next-query-params/app";
-import { QueryParamProvider } from "use-query-params";
-import { SessionIdentifier } from "~/utils/analytics/clientAnalytics";

 const MyApp: AppType<{ session: Session | null }> = ({
  Component,
@@ -21,26 +19,12 @@ const MyApp: AppType<{ session: Session | null }> = ({
          name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
        />
-        <meta name="og:title" content="OpenPipe: Open-Source Lab for LLMs" key="title" />
-        <meta
-          name="og:description"
-          content="OpenPipe is a powerful playground for quickly optimizing performance, cost, and speed across models."
-          key="description"
-        />
-        <meta name="og:image" content="/og.png" key="og-image" />
-        <meta property="og:image:height" content="630" />
-        <meta property="og:image:width" content="1200" />
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:image" content="/og.png" />
      </Head>
      <SessionProvider session={session}>
        <SyncAppStore />
        <Favicon />
-        <SessionIdentifier />
        <ChakraThemeProvider>
-          <QueryParamProvider adapter={NextAdapterApp}>
-            <Component {...pageProps} />
-          </QueryParamProvider>
+          <Component {...pageProps} />
        </ChakraThemeProvider>
      </SessionProvider>
    </>
--- a/src/pages/api/experiments/og-image.tsx
+++ b/src/pages/api/experiments/og-image.tsx
@@ -1,81 +0,0 @@
-import { ImageResponse } from "@vercel/og";
-import { type NextApiRequest, type NextApiResponse } from "next";
-
-export const config = {
-  runtime: "experimental-edge",
-};
-
-const inconsolataRegularFontP = fetch(
-  new URL("../../../../public/fonts/Inconsolata_SemiExpanded-Medium.ttf", import.meta.url),
-).then((res) => res.arrayBuffer());
-
-const OgImage = async (req: NextApiRequest, _res: NextApiResponse) => {
-  // @ts-expect-error - nextUrl is not defined on NextApiRequest for some reason
-  const searchParams = req.nextUrl?.searchParams as URLSearchParams;
-  const experimentLabel = searchParams.get("experimentLabel");
-  const variantsCount = searchParams.get("variantsCount");
-  const scenariosCount = searchParams.get("scenariosCount");
-
-  const inconsolataRegularFont = await inconsolataRegularFontP;
-
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          fontSize: 48,
-          padding: "48px",
-          background: "white",
-          position: "relative",
-        }}
-      >
-        <div
-          style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            display: "flex",
-            alignItems: "center",
-            padding: 48,
-          }}
-        >
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
-            src="https://app.openpipe.ai/logo.svg"
-            alt="OpenPipe Logo"
-            height={100}
-            width={120}
-          />
-          <div style={{ marginLeft: 24, fontSize: 64, fontFamily: "Inconsolata" }}>OpenPipe</div>
-        </div>
-
-        <div style={{ display: "flex", fontSize: 72, marginTop: 108 }}>{experimentLabel}</div>
-        <div style={{ display: "flex", flexDirection: "column", marginTop: 36 }}>
-          <div style={{ display: "flex" }}>
-            <span style={{ width: 320 }}>Variants:</span> {variantsCount}
-          </div>
-          <div style={{ display: "flex", marginTop: 24 }}>
-            <span style={{ width: 320 }}>Scenarios:</span> {scenariosCount}
-          </div>
-        </div>
-      </div>
-    ),
-    {
-      fonts: [
-        {
-          name: "inconsolata",
-          data: inconsolataRegularFont,
-          style: "normal",
-          weight: 400,
-        },
-      ],
-    },
-  );
-};
-
-export default OgImage;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
David Corbitt	01343efb6a	Properly use isDisabled	2023-07-20 22:54:38 -07:00
David Corbitt	c7aaaea426	Update instructions	2023-07-20 22:42:51 -07:00
David Corbitt	332e7afb0c	Pass variant to SelectModelModal	2023-07-20 22:39:32 -07:00
David Corbitt	fe08e29f47	Show prompt comparison in SelectModelModal	2023-07-20 22:39:14 -07:00
David Corbitt	89ce730e52	Accept newModel in getModifiedPromptFn	2023-07-20 22:38:42 -07:00
David Corbitt	ad87c1b2eb	Change RefinePromptModal styles	2023-07-20 22:38:09 -07:00
David Corbitt	58ddc72cbb	Make CompareFunctions more configurable	2023-07-20 22:36:21 -07:00