Add debug modal for output cells

See the actual input that a model got for a specific cell. The formatting isn't great right now; should probably iterate on that.

.eslintrc.cjs

@@ -37,6 +37,7 @@ const config = {
       "warn",
       { vars: "all", varsIgnorePattern: "^_", args: "after-used", argsIgnorePattern: "^_" },
     ],
+    "react/no-unescaped-entities": "off",
   },
 };
 

@types/nextjs-routes.d.ts

@@ -13,10 +13,13 @@ declare module "nextjs-routes" {
   export type Route =
     | StaticRoute<"/account/signin">
     | DynamicRoute<"/api/auth/[...nextauth]", { "nextauth": string[] }>
+    | StaticRoute<"/api/experiments/og-image">
     | DynamicRoute<"/api/trpc/[trpc]", { "trpc": string }>
     | DynamicRoute<"/experiments/[id]", { "id": string }>
     | StaticRoute<"/experiments">
-    | StaticRoute<"/">;
+    | StaticRoute<"/">
+    | StaticRoute<"/world-champs">
+    | StaticRoute<"/world-champs/signup">;
 
   interface StaticRoute<Pathname> {
     pathname: Pathname;

package.json

@@ -25,8 +25,10 @@
     "@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",
@@ -41,6 +43,7 @@
     "@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",
@@ -62,7 +65,7 @@
     "next-auth": "^4.22.1",
     "next-query-params": "^4.2.3",
     "nextjs-routes": "^2.0.1",
-    "openai": "4.0.0-beta.2",
+    "openai": "4.0.0-beta.7",
     "pluralize": "^8.0.0",
     "posthog-js": "^1.68.4",
     "prettier": "^3.0.0",
@@ -71,6 +74,7 @@
     "react-diff-viewer": "^3.1.1",
     "react-dom": "18.2.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",
@@ -106,6 +110,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",

pnpm-lock.yaml

@@ -17,12 +17,18 @@ dependencies:
   '@babel/standalone':
     specifier: ^7.22.9
     version: 7.22.9
+  '@chakra-ui/anatomy':
+    specifier: ^2.2.0
+    version: 2.2.0
   '@chakra-ui/next-js':
     specifier: ^2.1.4
     version: 2.1.4(@chakra-ui/react@2.7.1)(@emotion/react@11.11.1)(next@13.4.2)(react@18.2.0)
   '@chakra-ui/react':
     specifier: ^2.7.1
     version: 2.7.1(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.6)(framer-motion@10.12.17)(react-dom@18.2.0)(react@18.2.0)
+  '@chakra-ui/styled-system':
+    specifier: ^2.9.1
+    version: 2.9.1
   '@emotion/react':
     specifier: ^11.11.1
     version: 11.11.1(@types/react@18.2.6)(react@18.2.0)
@@ -65,6 +71,9 @@ dependencies:
   '@trpc/server':
     specifier: ^10.26.0
     version: 10.26.0
+  '@vercel/og':
+    specifier: ^0.5.9
+    version: 0.5.9
   ast-types:
     specifier: ^0.14.2
     version: 0.14.2
@@ -129,8 +138,8 @@ dependencies:
     specifier: ^2.0.1
     version: 2.0.1(next@13.4.2)
   openai:
-    specifier: 4.0.0-beta.2
-    version: 4.0.0-beta.2
+    specifier: 4.0.0-beta.7
+    version: 4.0.0-beta.7
   pluralize:
     specifier: ^8.0.0
     version: 8.0.0
@@ -155,6 +164,9 @@ dependencies:
   react-icons:
     specifier: ^4.10.1
     version: 4.10.1(react@18.2.0)
+  react-json-tree:
+    specifier: ^0.18.0
+    version: 0.18.0(@types/react@18.2.6)(react@18.2.0)
   react-select:
     specifier: ^5.7.4
     version: 5.7.4(@types/react@18.2.6)(react-dom@18.2.0)(react@18.2.0)
@@ -256,6 +268,9 @@ devDependencies:
   '@typescript-eslint/parser':
     specifier: ^5.59.6
     version: 5.59.6(eslint@8.40.0)(typescript@5.0.4)
+  csv-parse:
+    specifier: ^5.4.0
+    version: 5.4.0
   eslint:
     specifier: ^8.40.0
     version: 8.40.0
@@ -680,6 +695,10 @@ packages:
     resolution: {integrity: sha512-pKfOS/mztc4sUXHNc8ypJ1gPWSolWT770jrgVRfolVbYlki8y5Y+As996zMF6k5lewTu6j9DQequ7Cc9a69IVQ==}
     dev: false
 
+  /@chakra-ui/anatomy@2.2.0:
+    resolution: {integrity: sha512-cD8Ms5C8+dFda0LrORMdxiFhAZwOIY1BSlCadz6/mHUIgNdQy13AHPrXiq6qWdMslqVHq10k5zH7xMPLt6kjFg==}
+    dev: false
+
   /@chakra-ui/avatar@2.2.11(@chakra-ui/system@2.5.8)(react@18.2.0):
     resolution: {integrity: sha512-CJFkoWvlCTDJTUBrKA/aVyG5Zz6TBEIVmmsJtqC6VcQuVDTxkWod8ruXnjb0LT2DUveL7xR5qZM9a5IXcsH3zg==}
     peerDependencies:
@@ -2650,10 +2669,24 @@ packages:
     resolution: {integrity: sha512-PDNlhP/1vyTgmNyiucGqGCdXIp7HIkkvKO50si3y3PcceeHvqtiKPaH1iJdz63jCWMVMbj2MElSxXPOeBvEVIQ==}
     requiresBuild: true
 
+  /@resvg/resvg-wasm@2.4.1:
+    resolution: {integrity: sha512-yi6R0HyHtsoWTRA06Col4WoDs7SvlXU3DLMNP2bdAgs7HK18dTEVl1weXgxRzi8gwLteGUbIg29zulxIB3GSdg==}
+    engines: {node: '>= 10'}
+    dev: false
+
   /@rushstack/eslint-patch@1.3.2:
     resolution: {integrity: sha512-V+MvGwaHH03hYhY+k6Ef/xKd6RYlc4q8WBx+2ANmipHJcKuktNcI/NgEsJgdSUF6Lw32njT6OnrRsKYCdgHjYw==}
     dev: true
 
+  /@shuding/opentype.js@1.4.0-beta.0:
+    resolution: {integrity: sha512-3NgmNyH3l/Hv6EvsWJbsvpcpUba6R8IREQ83nH83cyakCw7uM1arZKNfHwv1Wz6jgqrF/j4x5ELvR6PnK9nTcA==}
+    engines: {node: '>= 8.0.0'}
+    hasBin: true
+    dependencies:
+      fflate: 0.7.4
+      string.prototype.codepointat: 0.2.1
+    dev: false
+
   /@sinclair/typebox@0.27.8:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
     dev: true
@@ -2811,6 +2844,10 @@ packages:
       '@babel/types': 7.22.5
     dev: true
 
+  /@types/base16@1.0.2:
+    resolution: {integrity: sha512-oYO/U4VD1DavwrKuCSQWdLG+5K22SLPem2OQaHmFcQuwHoVeGC+JGVRji2MUqZUAIQZHEonOeVfAX09hYiLsdg==}
+    dev: false
+
   /@types/body-parser@1.19.2:
     resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==}
     dependencies:
@@ -2993,6 +3030,7 @@ packages:
 
   /@types/qs@6.9.7:
     resolution: {integrity: sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==}
+    dev: true
 
   /@types/range-parser@1.2.4:
     resolution: {integrity: sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==}
@@ -3183,6 +3221,15 @@ packages:
       eslint-visitor-keys: 3.4.1
     dev: true
 
+  /@vercel/og@0.5.9:
+    resolution: {integrity: sha512-CtjaV/BVHtNCjRtxGqn8Q6AKFLqcG34Byxr91+mY+4eqyp/09LVe9jEeY9WXjbaKvu8syWPMteTpY+YQUQYzSg==}
+    engines: {node: '>=16'}
+    dependencies:
+      '@resvg/resvg-wasm': 2.4.1
+      satori: 0.10.1
+      yoga-wasm-web: 0.3.3
+    dev: false
+
   /@vitest/expect@0.33.0:
     resolution: {integrity: sha512-sVNf+Gla3mhTCxNJx+wJLDPp/WcstOe0Ksqz4Vec51MmgMth/ia0MGFEkIZmVGeTL5HtjYR4Wl/ZxBxBXZJTzQ==}
     dependencies:
@@ -3629,6 +3676,15 @@ packages:
     resolution: {integrity: sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA==}
     dev: false
 
+  /base16@1.0.0:
+    resolution: {integrity: sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ==}
+    dev: false
+
+  /base64-js@0.0.8:
+    resolution: {integrity: sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==}
+    engines: {node: '>= 0.4'}
+    dev: false
+
   /base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: false
@@ -3750,6 +3806,10 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
+  /camelize@1.0.1:
+    resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
+    dev: false
+
   /caniuse-lite@1.0.30001517:
     resolution: {integrity: sha512-Vdhm5S11DaFVLlyiKu4hiUTkpZu+y1KA/rZZqVQfOD5YdDT/eQKlkt7NaE0WGOFgX32diqt9MiP9CAiFeRklaA==}
 
@@ -3878,10 +3938,24 @@ packages:
   /color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  /color-string@1.9.1:
+    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.2
+    dev: false
+
   /color2k@2.0.2:
     resolution: {integrity: sha512-kJhwH5nAwb34tmyuqq/lgjEKzlFXn1U99NlnB6Ws4qVaERcRUYeYP1cBw6BJ4vxaWStAUEef4WMr7WjOCnBt8w==}
     dev: false
 
+  /color@3.2.1:
+    resolution: {integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==}
+    dependencies:
+      color-convert: 1.9.3
+      color-string: 1.9.1
+    dev: false
+
   /combined-stream@1.0.8:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
@@ -4018,12 +4092,33 @@ packages:
     resolution: {integrity: sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==}
     dev: false
 
+  /css-background-parser@0.1.0:
+    resolution: {integrity: sha512-2EZLisiZQ+7m4wwur/qiYJRniHX4K5Tc9w93MT3AS0WS1u5kaZ4FKXlOTBhOjc+CgEgPiGY+fX1yWD8UwpEqUA==}
+    dev: false
+
   /css-box-model@1.2.1:
     resolution: {integrity: sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==}
     dependencies:
       tiny-invariant: 1.3.1
     dev: false
 
+  /css-box-shadow@1.0.0-3:
+    resolution: {integrity: sha512-9jaqR6e7Ohds+aWwmhe6wILJ99xYQbfmK9QQB9CcMjDbTxPZjwEmUQpU91OG05Xgm8BahT5fW+svbsQGjS/zPg==}
+    dev: false
+
+  /css-color-keywords@1.0.0:
+    resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==}
+    engines: {node: '>=4'}
+    dev: false
+
+  /css-to-react-native@3.2.0:
+    resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==}
+    dependencies:
+      camelize: 1.0.1
+      css-color-keywords: 1.0.0
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /csstype@2.6.21:
     resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
     dev: false
@@ -4031,6 +4126,10 @@ packages:
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
+  /csv-parse@5.4.0:
+    resolution: {integrity: sha512-JiQosUWiOFgp4hQn0an+SBoV9IKdqzhROM0iiN4LB7UpfJBlsSJlWl9nq4zGgxgMAzHJ6V4t29VAVD+3+2NJAg==}
+    dev: true
+
   /d@1.0.1:
     resolution: {integrity: sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==}
     dependencies:
@@ -4224,6 +4323,10 @@ packages:
   /electron-to-chromium@1.4.465:
     resolution: {integrity: sha512-XQcuHvEJRMU97UJ75e170mgcITZoz0lIyiaVjk6R+NMTJ8KBIvUHYd1779swgOppUlzxR+JsLpq59PumaXS1jQ==}
 
+  /emoji-regex@10.2.1:
+    resolution: {integrity: sha512-97g6QgOk8zlDRdgq1WxwgTMgEWGVAQvB5Fdpgc1MkNy56la5SKP9GsMXKDOdqwn90/41a8yPwIGk1Y6WVbeMQA==}
+    dev: false
+
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
     dev: false
@@ -4939,6 +5042,10 @@ packages:
     resolution: {integrity: sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==}
     dev: false
 
+  /fflate@0.7.4:
+    resolution: {integrity: sha512-5u2V/CDW15QM1XbbgS+0DfPxVB+jUKhWEKuuFuHncbk3tEEqzmoXL+2KyOFuKGqOnmdIy0/davWF1CkuwtibCw==}
+    dev: false
+
   /file-entry-cache@6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -5324,6 +5431,11 @@ packages:
       space-separated-tokens: 1.1.5
     dev: false
 
+  /hex-rgb@4.3.0:
+    resolution: {integrity: sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==}
+    engines: {node: '>=6'}
+    dev: false
+
   /highlight.js@10.7.3:
     resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
     dev: false
@@ -5460,6 +5572,10 @@ packages:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
     dev: false
 
+  /is-arrayish@0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+    dev: false
+
   /is-bigint@1.0.4:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
     dependencies:
@@ -5789,6 +5905,13 @@ packages:
       type-check: 0.4.0
     dev: true
 
+  /linebreak@1.1.0:
+    resolution: {integrity: sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==}
+    dependencies:
+      base64-js: 0.0.8
+      unicode-trie: 2.0.0
+    dev: false
+
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
     dev: false
@@ -5827,6 +5950,10 @@ packages:
     resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
     dev: false
 
+  /lodash.curry@4.1.1:
+    resolution: {integrity: sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==}
+    dev: false
+
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
     dev: true
@@ -6304,19 +6431,17 @@ packages:
       is-wsl: 2.2.0
     dev: true
 
-  /openai@4.0.0-beta.2:
-    resolution: {integrity: sha512-zTuAxBFe5nSO7LngbV+/O0udtgHWfXb2lFei8/sDY4GB5cOdnrRoSOtiyUfV65ANdvlI4F75oYZX7w067cxj3w==}
+  /openai@4.0.0-beta.7:
+    resolution: {integrity: sha512-jHjwvpMuGkNxiQ3erwLZsOvPEhcVrMtwtfNeYmGCjhbdB+oStVw/7pIhIPkualu8rlhLwgMR7awknIaN3IQcOA==}
     dependencies:
       '@types/node': 18.16.0
       '@types/node-fetch': 2.6.4
-      '@types/qs': 6.9.7
       abort-controller: 3.0.0
       agentkeepalive: 4.3.0
       digest-fetch: 1.3.0
       form-data-encoder: 1.7.2
       formdata-node: 4.4.1
       node-fetch: 2.6.12
-      qs: 6.11.2
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -6393,12 +6518,23 @@ packages:
     resolution: {integrity: sha512-HAKu/fG3HpHFO0AA8WE8q2g+gBJaZ9MG7fcKk+IJPLTGAD6Psw4443l+9DGRbOIh3/aXr7Phy0TjilYivJo5XQ==}
     dev: false
 
+  /pako@0.2.9:
+    resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
+    dev: false
+
   /parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
     dependencies:
       callsites: 3.1.0
 
+  /parse-css-color@0.2.1:
+    resolution: {integrity: sha512-bwS/GGIFV3b6KS4uwpzCFj4w297Yl3uqnSgIPsoQkx7GMLROXfMnWvxfNkL0oh8HVhZA4hvJoEoEIqonfJ3BWg==}
+    dependencies:
+      color-name: 1.1.4
+      hex-rgb: 4.3.0
+    dev: false
+
   /parse-entities@2.0.0:
     resolution: {integrity: sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==}
     dependencies:
@@ -6565,6 +6701,10 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
+  /postcss-value-parser@4.2.0:
+    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+    dev: false
+
   /postcss@8.4.14:
     resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
     engines: {node: ^10 || ^12 || >=14}
@@ -6734,13 +6874,6 @@ packages:
       side-channel: 1.0.4
     dev: false
 
-  /qs@6.11.2:
-    resolution: {integrity: sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==}
-    engines: {node: '>=0.6'}
-    dependencies:
-      side-channel: 1.0.4
-    dev: false
-
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
@@ -6777,6 +6910,18 @@ packages:
       webpack: 5.88.2
     dev: true
 
+  /react-base16-styling@0.9.1:
+    resolution: {integrity: sha512-1s0CY1zRBOQ5M3T61wetEpvQmsYSNtWEcdYzyZNxKa8t7oDvaOn9d21xrGezGAHFWLM7SHcktPuPTrvoqxSfKw==}
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@types/base16': 1.0.2
+      '@types/lodash': 4.14.195
+      base16: 1.0.0
+      color: 3.2.1
+      csstype: 3.1.2
+      lodash.curry: 4.1.1
+    dev: false
+
   /react-clientside-effect@1.2.6(react@18.2.0):
     resolution: {integrity: sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==}
     peerDependencies:
@@ -6851,6 +6996,19 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: true
 
+  /react-json-tree@0.18.0(@types/react@18.2.6)(react@18.2.0):
+    resolution: {integrity: sha512-Qe6HKSXrr++n9Y31nkRJ3XvQMATISpqigH1vEKhLwB56+nk5thTP0ITThpjxY6ZG/ubpVq/aEHIcyLP/OPHxeA==}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@types/lodash': 4.14.195
+      '@types/react': 18.2.6
+      react: 18.2.0
+      react-base16-styling: 0.9.1
+    dev: false
+
   /react-remove-scroll-bar@2.3.4(@types/react@18.2.6)(react@18.2.0):
     resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==}
     engines: {node: '>=10'}
@@ -7141,6 +7299,22 @@ packages:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
     dev: false
 
+  /satori@0.10.1:
+    resolution: {integrity: sha512-F4bTCkDp931tLb7+UCNPBuSQwXhikrUkI4fBQo6fA8lF0Evqqgg3nDyUpRktQpR5Ry1DIiIVqLyEwkAms87ykg==}
+    engines: {node: '>=16'}
+    dependencies:
+      '@shuding/opentype.js': 1.4.0-beta.0
+      css-background-parser: 0.1.0
+      css-box-shadow: 1.0.0-3
+      css-to-react-native: 3.2.0
+      emoji-regex: 10.2.1
+      escape-html: 1.0.3
+      linebreak: 1.1.0
+      parse-css-color: 0.2.1
+      postcss-value-parser: 4.2.0
+      yoga-wasm-web: 0.3.3
+    dev: false
+
   /scheduler@0.23.0:
     resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
     dependencies:
@@ -7246,6 +7420,12 @@ packages:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
     dev: true
 
+  /simple-swizzle@0.2.2:
+    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+    dependencies:
+      is-arrayish: 0.3.2
+    dev: false
+
   /slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -7368,6 +7548,10 @@ packages:
       strip-ansi: 6.0.1
     dev: false
 
+  /string.prototype.codepointat@0.2.1:
+    resolution: {integrity: sha512-2cBVCj6I4IOvEnjgO/hWqXjqBGsY+zwPmHl12Srk9IXSZ56Jwwmy+66XO5Iut/oQVR7t5ihYdLB0GMa4alEUcg==}
+    dev: false
+
   /string.prototype.matchall@4.0.8:
     resolution: {integrity: sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==}
     dependencies:
@@ -7594,6 +7778,10 @@ packages:
       globrex: 0.1.2
     dev: true
 
+  /tiny-inflate@1.0.3:
+    resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
+    dev: false
+
   /tiny-invariant@1.3.1:
     resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==}
     dev: false
@@ -7800,6 +7988,13 @@ packages:
       busboy: 1.6.0
     dev: true
 
+  /unicode-trie@2.0.0:
+    resolution: {integrity: sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==}
+    dependencies:
+      pako: 0.2.9
+      tiny-inflate: 1.0.3
+    dev: false
+
   /unpipe@1.0.0:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
@@ -8305,6 +8500,10 @@ packages:
     engines: {node: '>=12.20'}
     dev: true
 
+  /yoga-wasm-web@0.3.3:
+    resolution: {integrity: sha512-N+d4UJSJbt/R3wqY7Coqs5pcV0aUj2j9IaQ3rNj9bVCLld8tTGKRa2USARjnvZJWVx1NDmQev8EknoczaOQDOA==}
+    dev: false
+
   /zod@3.21.4:
     resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
     dev: false

prisma/datasets/validated_tweets.csv

@@ -0,0 +1,84 @@
+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 & 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 & @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

prisma/migrations/20230801195916_add_world_champs/migration.sql

@@ -0,0 +1,16 @@
+-- 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;

prisma/migrations/20230801234208_add_created_at_and_updated_at_to_users_table/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ADD COLUMN     "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;

prisma/schema.prisma

@@ -112,24 +112,24 @@ model ScenarioVariantCell {
 model ModelResponse {
     id String @id @default(uuid()) @db.Uuid
 
-    inputHash           String
-    requestedAt         DateTime?
-    receivedAt          DateTime?
-    output              Json?
-    cost                Float?
-    promptTokens        Int?
-    completionTokens    Int?
-    statusCode          Int?
-    errorMessage        String?
-    retryTime           DateTime?
-    outdated            Boolean @default(false)
+    inputHash        String
+    requestedAt      DateTime?
+    receivedAt       DateTime?
+    output           Json?
+    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[]
+    outputEvaluations     OutputEvaluation[]
 
     @@index([inputHash])
 }
@@ -150,8 +150,8 @@ model Evaluation {
     experimentId String     @db.Uuid
     experiment   Experiment @relation(fields: [experimentId], references: [id], onDelete: Cascade)
 
-    createdAt        DateTime           @default(now())
-    updatedAt        DateTime           @updatedAt
+    createdAt         DateTime           @default(now())
+    updatedAt         DateTime           @updatedAt
     outputEvaluations OutputEvaluation[]
 }
 
@@ -162,7 +162,7 @@ model OutputEvaluation {
     result  Float
     details String?
 
-    modelResponseId String      @db.Uuid
+    modelResponseId String        @db.Uuid
     modelResponse   ModelResponse @relation(fields: [modelResponseId], references: [id], onDelete: Cascade)
 
     evaluationId String     @db.Uuid
@@ -179,8 +179,8 @@ model Organization {
     personalOrgUserId String? @unique @db.Uuid
     PersonalOrgUser   User?   @relation(fields: [personalOrgUserId], references: [id], onDelete: Cascade)
 
-    createdAt        DateTime           @default(now())
-    updatedAt        DateTime           @updatedAt
+    createdAt         DateTime           @default(now())
+    updatedAt         DateTime           @updatedAt
     organizationUsers OrganizationUser[]
     experiments       Experiment[]
 }
@@ -208,6 +208,20 @@ 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
@@ -245,6 +259,10 @@ model User {
     sessions          Session[]
     organizationUsers OrganizationUser[]
     organizations     Organization[]
+    worldChampEntrant WorldChampEntrant?
+
+    createdAt DateTime @default(now())
+    updatedAt DateTime @default(now()) @updatedAt
 }
 
 model VerificationToken {

prisma/seedAgiEval.ts

@@ -0,0 +1,127 @@
+import { prisma } from "~/server/db";
+import { generateNewCell } from "~/server/utils/generateNewCell";
+import dedent from "dedent";
+import { execSync } from "child_process";
+import fs from "fs";
+
+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",
+        constructFnVersion: 1,
+        constructFn: 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}})",
+      },
+    ],
+  });
+}

prisma/seedTwitterSentiment.ts

@@ -0,0 +1,113 @@
+import { prisma } from "~/server/db";
+import dedent from "dedent";
+import fs from "fs";
+import { parse } from "csv-parse/sync";
+
+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",
+      constructFnVersion: 1,
+      constructFn: 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}}",
+    },
+  ],
+});

src/components/ChangeModelModal/ModelSearch.tsx

@@ -22,8 +22,8 @@ export const ModelSearch = (props: {
   const [containerRef, containerDimensions] = useElementDimensions();
 
   return (
-    <VStack ref={containerRef as LegacyRef<HTMLDivElement>} w="full">
-      <Text>Browse Models</Text>
+    <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)}

src/components/ChangeModelModal/ModelStatsCard.tsx

@@ -23,16 +23,24 @@ export const ModelStatsCard = ({
         {label}
       </Text>
 
-      <VStack w="full" spacing={6} bgColor="gray.100" p={4} borderRadius={4}>
+      <VStack
+        w="full"
+        spacing={6}
+        borderWidth={1}
+        borderColor="gray.300"
+        p={4}
+        borderRadius={8}
+        fontFamily="inconsolata"
+      >
         <HStack w="full" align="flex-start">
-          <Text flex={1} fontSize="lg">
-            <Text as="span" color="gray.600">
-              {model.provider} /{" "}
-            </Text>
+          <VStack flex={1} fontSize="lg" alignItems="flex-start">
             <Text as="span" fontWeight="bold" color="gray.900">
               {model.name}
             </Text>
-          </Text>
+            <Text as="span" color="gray.600" fontSize="sm">
+              Provider: {model.provider}
+            </Text>
+          </VStack>
           <Link
             href={model.learnMoreUrl}
             isExternal

src/components/OutputsTable/FloatingLabelInput.tsx

@@ -37,7 +37,6 @@ export const FloatingLabelInput = ({
         borderColor={isFocused ? "blue.500" : "gray.400"}
         autoComplete="off"
         value={value}
-        maxHeight={32}
         overflowY="auto"
         overflowX="hidden"
         {...props}

src/components/OutputsTable/OutputCell/CellContent.tsx

@@ -1,19 +0,0 @@
-import { type StackProps, VStack } from "@chakra-ui/react";
-import { CellOptions } from "./CellOptions";
-
-export const CellContent = ({
-  hardRefetch,
-  hardRefetching,
-  children,
-  ...props
-}: {
-  hardRefetch: () => void;
-  hardRefetching: boolean;
-} & StackProps) => (
-  <VStack w="full" alignItems="flex-start" {...props}>
-    <CellOptions refetchingOutput={hardRefetching} refetchOutput={hardRefetch} />
-    <VStack w="full" alignItems="flex-start" maxH={500} overflowY="auto">
-      {children}
-    </VStack>
-  </VStack>
-);

src/components/OutputsTable/OutputCell/CellOptions.tsx

@@ -1,37 +0,0 @@
-import { Button, HStack, Icon, Spinner, 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">
-      {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={refetchingOutput ? Spinner : BsArrowClockwise} boxSize={4} />
-          </Button>
-        </Tooltip>
-      )}
-    </HStack>
-  );
-};

src/components/OutputsTable/OutputCell/OutputCell.tsx

@@ -1,17 +1,17 @@
 import { api } from "~/utils/api";
 import { type PromptVariant, type Scenario } from "../types";
-import { Text, VStack } from "@chakra-ui/react";
+import { type StackProps, Text, 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 } from "react";
+import { type ReactElement, useState, useEffect, Fragment, useCallback } from "react";
 import useSocket from "~/utils/useSocket";
 import { OutputStats } from "./OutputStats";
 import { RetryCountdown } from "./RetryCountdown";
 import frontendModelProviders from "~/modelProviders/frontendModelProviders";
 import { ResponseLog } from "./ResponseLog";
-import { CellContent } from "./CellContent";
+import { CellOptions } from "./TopActions";
 
 const WAITING_MESSAGE_INTERVAL = 20000;
 
@@ -72,37 +72,49 @@ export default function OutputCell({
   // TODO: disconnect from socket if we're not streaming anymore
   const streamedMessage = useSocket<OutputSchema>(cell?.id);
 
+  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],
+  );
+
   if (!vars) return null;
 
   if (!cell && !fetchingOutput)
     return (
-      <CellContent hardRefetching={hardRefetching} hardRefetch={hardRefetch}>
+      <CellWrapper>
         <Text color="gray.500">Error retrieving output</Text>
-      </CellContent>
+      </CellWrapper>
     );
 
   if (cell && cell.errorMessage) {
     return (
-      <CellContent hardRefetching={hardRefetching} hardRefetch={hardRefetch}>
+      <CellWrapper>
         <Text color="red.500">{cell.errorMessage}</Text>
-      </CellContent>
+      </CellWrapper>
     );
   }
 
   if (disabledReason) return <Text color="gray.500">{disabledReason}</Text>;
 
-  const mostRecentResponse = cell?.modelResponses[cell.modelResponses.length - 1];
   const showLogs = !streamedMessage && !mostRecentResponse?.output;
 
   if (showLogs)
     return (
-      <CellContent
-        hardRefetching={hardRefetching}
-        hardRefetch={hardRefetch}
-        alignItems="flex-start"
-        fontFamily="inconsolata, monospace"
-        spacing={0}
-      >
+      <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) => {
@@ -124,9 +136,13 @@ export default function OutputCell({
                 Array.from({ length: numWaitingMessages }, (_, i) => (
                   <ResponseLog
                     key={`waiting-${i}`}
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    time={new Date(response.requestedAt!.getTime() + i * WAITING_MESSAGE_INTERVAL)}
-                    title="Waiting for response"
+                    time={
+                      new Date(
+                        (response.requestedAt?.getTime?.() ?? 0) +
+                          (i + 1) * WAITING_MESSAGE_INTERVAL,
+                      )
+                    }
+                    title="Waiting for response..."
                   />
                 ))}
               {response.receivedAt && (
@@ -144,7 +160,7 @@ export default function OutputCell({
         {mostRecentResponse?.retryTime && (
           <RetryCountdown retryTime={mostRecentResponse.retryTime} />
         )}
-      </CellContent>
+      </CellWrapper>
     );
 
   const normalizedOutput = mostRecentResponse?.output
@@ -155,50 +171,27 @@ export default function OutputCell({
 
   if (mostRecentResponse?.output && normalizedOutput?.type === "json") {
     return (
-      <VStack
-        w="100%"
-        h="100%"
-        fontSize="xs"
-        flexWrap="wrap"
-        overflowX="hidden"
-        justifyContent="space-between"
-      >
-        <CellContent
-          hardRefetching={hardRefetching}
-          hardRefetch={hardRefetch}
-          w="full"
-          flex={1}
-          spacing={0}
+      <CellWrapper>
+        <SyntaxHighlighter
+          customStyle={{ overflowX: "unset", width: "100%", flex: 1 }}
+          language="json"
+          style={docco}
+          lineProps={{
+            style: { wordBreak: "break-all", whiteSpace: "pre-wrap" },
+          }}
+          wrapLines
         >
-          <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>
-        </CellContent>
-        <OutputStats modelResponse={mostRecentResponse} scenario={scenario} />
-      </VStack>
+          {stringify(normalizedOutput.value, { maxLength: 40 })}
+        </SyntaxHighlighter>
+      </CellWrapper>
     );
   }
 
   const contentToDisplay = (normalizedOutput?.type === "text" && normalizedOutput.value) || "";
 
   return (
-    <VStack w="100%" h="100%" justifyContent="space-between" whiteSpace="pre-wrap">
-      <VStack w="full" alignItems="flex-start" spacing={0}>
-        <CellContent hardRefetching={hardRefetching} hardRefetch={hardRefetch}>
-          <Text>{contentToDisplay}</Text>
-        </CellContent>
-      </VStack>
-      {mostRecentResponse?.output && (
-        <OutputStats modelResponse={mostRecentResponse} scenario={scenario} />
-      )}
-    </VStack>
+    <CellWrapper>
+      <Text>{contentToDisplay}</Text>
+    </CellWrapper>
   );
 }

src/components/OutputsTable/OutputCell/PromptModal.tsx

@@ -0,0 +1,36 @@
+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>
+  );
+}

src/components/OutputsTable/OutputCell/TopActions.tsx

@@ -0,0 +1,53 @@
+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>
+  );
+};

src/components/OutputsTable/ScenarioEditor.tsx

@@ -1,15 +1,24 @@
-import { type DragEvent } from "react";
-import { api } from "~/utils/api";
 import { isEqual } from "lodash-es";
-import { type Scenario } from "./types";
+import { useEffect, useState, type DragEvent } from "react";
+import { api } from "~/utils/api";
 import { useExperiment, useExperimentAccess, useHandledAsyncCallback } from "~/utils/hooks";
-import { useState } from "react";
+import { type Scenario } from "./types";
 
-import { Box, Button, Flex, HStack, Icon, Spinner, Stack, Tooltip, VStack } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  HStack,
+  Icon,
+  IconButton,
+  Spinner,
+  Text,
+  Tooltip,
+  VStack,
+} from "@chakra-ui/react";
+import { BsArrowsAngleExpand, BsX } from "react-icons/bs";
 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,
@@ -28,6 +37,10 @@ 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 ?? "" });
 
@@ -71,83 +84,82 @@ export default function ScenarioEditor({
     [reorderMutation, scenario.id],
   );
 
-  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>
-      )}
+  const [scenarioEditorModalOpen, setScenarioEditorModalOpen] = useState(false);
 
-      {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"
-              >
+  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 (
                 <FloatingLabelInput
+                  key={key}
                   label={key}
                   isDisabled={!canModify}
                   style={{ width: "100%" }}
+                  maxHeight={32}
                   value={value}
                   onChange={(e) => {
                     setValues((prev) => ({ ...prev, [key]: e.target.value }));
@@ -162,27 +174,34 @@ export default function ScenarioEditor({
                   onMouseEnter={() => setVariableInputHovered(true)}
                   onMouseLeave={() => setVariableInputHovered(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>
+              );
+            })}
+            {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)}
+        />
       )}
-    </HStack>
+    </>
   );
 }

src/components/OutputsTable/ScenarioEditorModal.tsx

@@ -0,0 +1,123 @@
+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>
+  );
+};

src/components/OutputsTable/ScenarioRow.tsx

@@ -1,6 +1,5 @@
-import { Box, GridItem } from "@chakra-ui/react";
+import { 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";
@@ -39,9 +38,7 @@ const ScenarioRow = (props: {
           colStart={i + 2}
           {...borders}
         >
-          <Box h="100%" w="100%" px={cellPadding.x} py={cellPadding.y}>
-            <OutputCell key={variant.id} scenario={props.scenario} variant={variant} />
-          </Box>
+          <OutputCell key={variant.id} scenario={props.scenario} variant={variant} />
         </GridItem>
       ))}
     </>

src/components/OutputsTable/VariantStats.tsx

@@ -48,12 +48,12 @@ export default function VariantStats(props: { variant: PromptVariant }) {
       fontSize="xs"
       py={cellPadding.y}
     >
-      {showNumFinished && (
-        <Text>
-          {data.outputCount} / {data.scenarioCount}
-        </Text>
-      )}
       <HStack px={cellPadding.x}>
+        {showNumFinished && (
+          <Text>
+            {data.outputCount} / {data.scenarioCount}
+          </Text>
+        )}
         {data.evalResults.map((result) => {
           const passedFrac = result.passCount / result.totalCount;
           return (

src/components/OutputsTable/index.tsx

@@ -9,32 +9,15 @@ import { ScenariosHeader } from "./ScenariosHeader";
 import { borders } from "./styles";
 import { useScenarios } from "~/utils/hooks";
 import ScenarioPaginator from "./ScenarioPaginator";
-import { Fragment, useEffect, useState } from "react";
+import { Fragment } from "react";
 
-export default function OutputsTable({
-  experimentId,
-  func,
-}: {
-  experimentId: string | undefined;
-  func: () => void;
-}) {
+export default function OutputsTable({ experimentId }: { experimentId: string | undefined }) {
   const variants = api.promptVariants.list.useQuery(
     { experimentId: experimentId as string },
     { enabled: !!experimentId },
   );
 
   const scenarios = useScenarios();
-  const [newFunc, setNewFunc] = useState<() => void | null>();
-
-  useEffect(() => {
-    console.log('func', func)
-    if (func) {
-      setNewFunc(prev => {
-        console.log('Setting newFunc from', prev, 'to', func);
-        return func;
-    });
-    }
-  }, [func]);
 
   if (!variants.data || !scenarios.data) return null;
 
@@ -63,7 +46,7 @@ export default function OutputsTable({
       <GridItem rowSpan={variantHeaderRows}>
         <AddVariantButton />
       </GridItem>
-      {newFunc && newFunc.toString()}
+
       {variants.data.map((variant, i) => {
         const sharedProps: GridItemProps = {
           ...borders,

src/components/nav/AppShell.tsx

@@ -84,7 +84,11 @@ const NavSidebar = () => {
           />
         )}
       </VStack>
-      {user ? <UserMenu user={user} /> : <Divider />}
+      {user ? (
+        <UserMenu user={user} borderColor={"gray.200"} borderTopWidth={1} borderBottomWidth={1} />
+      ) : (
+        <Divider />
+      )}
       <VStack spacing={0} align="center">
         <Link
           href="https://github.com/openpipe/openpipe"

src/components/nav/UserMenu.tsx

@@ -8,12 +8,16 @@ 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 }: { user: Session }) {
+export default function UserMenu({ user, ...rest }: { user: Session } & StackProps) {
+  const { colorMode } = useColorMode();
+
   const profileImage = user.user.image ? (
     <Image src={user.user.image} alt="profile picture" boxSize={8} borderRadius="50%" />
   ) : (
@@ -29,12 +33,10 @@ export default function UserMenu({ user }: { user: Session }) {
             px={3}
             spacing={3}
             py={2}
-            borderColor={"gray.200"}
-            borderTopWidth={1}
-            borderBottomWidth={1}
+            {...rest}
             cursor="pointer"
             _hover={{
-              bgColor: "gray.200",
+              bgColor: colorMode === "light" ? "gray.200" : "gray.700",
             }}
           >
             {profileImage}

src/modelProviders/openai-ChatCompletion/getCompletion.ts

@@ -6,7 +6,7 @@ import {
 } from "openai/resources/chat";
 import { countOpenAIChatTokens } from "~/utils/countTokens";
 import { type CompletionResponse } from "../types";
-import { omit } from "lodash-es";
+import { isArray, isString, omit } from "lodash-es";
 import { openai } from "~/server/utils/openai";
 import { truthyFilter } from "~/utils/utils";
 import { APIError } from "openai";
@@ -40,6 +40,8 @@ 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 } });
     }
   }
@@ -64,6 +66,7 @@ export async function getCompletion(
 
   try {
     if (onStream) {
+      console.log("got started");
       const resp = await openai.chat.completions.create(
         { ...input, stream: true },
         {
@@ -71,9 +74,11 @@ 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",
@@ -121,9 +126,17 @@ export async function getCompletion(
     };
   } catch (error: unknown) {
     if (error instanceof APIError) {
+      // The types from the sdk are wrong
+      const rawMessage = error.message as string | string[];
+      // If the message is not a string, stringify it
+      const message = isString(rawMessage)
+        ? rawMessage
+        : isArray(rawMessage)
+        ? rawMessage.map((m) => m.toString()).join("\n")
+        : (rawMessage as any).toString();
       return {
         type: "error",
-        message: error.message,
+        message,
         autoRetry: error.status === 429 || error.status === 503,
         statusCode: error.status,
       };

src/modelProviders/replicate-llama2/getCompletion.ts

@@ -8,9 +8,9 @@ const replicate = new Replicate({
 });
 
 const modelIds: Record<ReplicateLlama2Input["model"], string> = {
-  "7b-chat": "5ec5fdadd80ace49f5a2b2178cceeb9f2f77c493b85b1131002c26e6b2b13184",
-  "13b-chat": "6b4da803a2382c08868c5af10a523892f38e2de1aafb2ee55b020d9efef2fdb8",
-  "70b-chat": "2d19859030ff705a87c746f7e96eea03aefb71f166725aee39692f1476566d48",
+  "7b-chat": "058333670f2a6e88cf1b29b8183405b17bb997767282f790b82137df8c090c1f",
+  "13b-chat": "d5da4236b006f967ceb7da037be9cfc3924b20d21fed88e1e94f19d56e2d3111",
+  "70b-chat": "2c1608e18606fad2812020dc541930f2d0495ce32eee50074220b87300bc16e1",
 };
 
 export async function getCompletion(

src/modelProviders/replicate-llama2/index.ts

@@ -54,7 +54,7 @@ const modelProvider: ReplicateLlama2Provider = {
       temperature: {
         type: "number",
         description:
-          "Adjusts randomness of outputs, greater than 1 is random and 0 is deterministic, 0.75 is a good starting value. (minimum: 0.01; maximum: 5)",
+          "Adjusts randomness of outputs, 0.1 is a good starting value. (minimum: 0.01; maximum: 5)",
       },
       top_p: {
         type: "number",

src/pages/_app.tsx

@@ -21,6 +21,17 @@ 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 />

src/pages/api/experiments/og-image.tsx

@@ -0,0 +1,81 @@
+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;

src/pages/experiments/[id].tsx

@@ -22,13 +22,42 @@ import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks";
 import { useAppStore } from "~/state/store";
 import { useSyncVariantEditor } from "~/state/sync";
 import { HeaderButtons } from "~/components/experiments/HeaderButtons/HeaderButtons";
+import Head from "next/head";
+
+// TODO: import less to fix deployment with server side props
+// export const getServerSideProps = async (context: GetServerSidePropsContext<{ id: string }>) => {
+//   const experimentId = context.params?.id as string;
+
+//   const helpers = createServerSideHelpers({
+//     router: appRouter,
+//     ctx: createInnerTRPCContext({ session: null }),
+//     transformer: superjson, // optional - adds superjson serialization
+//   });
+
+//   // prefetch query
+//   await helpers.experiments.stats.prefetch({ id: experimentId });
+
+//   return {
+//     props: {
+//       trpcState: helpers.dehydrate(),
+//     },
+//   };
+// };
 
 export default function Experiment() {
   const router = useRouter();
-  const experiment = useExperiment();
   const utils = api.useContext();
   useSyncVariantEditor();
 
+  const experiment = useExperiment();
+  const experimentStats = api.experiments.stats.useQuery(
+    { id: router.query.id as string },
+    {
+      enabled: !!router.query.id,
+    },
+  );
+  const stats = experimentStats.data;
+
   useEffect(() => {
     useAppStore.getState().sharedVariantEditor.loadMonaco().catch(console.error);
   });
@@ -61,62 +90,66 @@ export default function Experiment() {
 
   const canModify = experiment.data?.access.canModify ?? false;
 
-  const y = "5"
-  const z = {abc: "123"}
-
-  const func = () => {
-    const u = 12;
-    const m = `hello ${y} ${z.abc} ${u} world`;
-  }
-
   return (
-    <AppShell title={experiment.data?.label}>
-      <VStack h="full">
-        <Flex
-          px={4}
-          py={2}
-          w="full"
-          direction={{ base: "column", sm: "row" }}
-          alignItems={{ base: "flex-start", sm: "center" }}
-        >
-          <Breadcrumb flex={1}>
-            <BreadcrumbItem>
-              <Link href="/experiments">
-                <Flex alignItems="center" _hover={{ textDecoration: "underline" }}>
-                  <Icon as={RiFlaskLine} boxSize={4} mr={2} /> Experiments
-                </Flex>
-              </Link>
-            </BreadcrumbItem>
-            <BreadcrumbItem isCurrentPage>
-              {canModify ? (
-                <Input
-                  size="sm"
-                  value={label}
-                  onChange={(e) => setLabel(e.target.value)}
-                  onBlur={onSaveLabel}
-                  borderWidth={1}
-                  borderColor="transparent"
-                  fontSize={16}
-                  px={0}
-                  minW={{ base: 100, lg: 300 }}
-                  flex={1}
-                  _hover={{ borderColor: "gray.300" }}
-                  _focus={{ borderColor: "blue.500", outline: "none" }}
-                />
-              ) : (
-                <Text fontSize={16} px={0} minW={{ base: 100, lg: 300 }} flex={1}>
-                  {experiment.data?.label}
-                </Text>
-              )}
-            </BreadcrumbItem>
-          </Breadcrumb>
-          <HeaderButtons />
-        </Flex>
-        <ExperimentSettingsDrawer />
-        <Box w="100%" overflowX="auto" flex={1}>
-          <OutputsTable experimentId={router.query.id as string | undefined} func={func} />
-        </Box>
-      </VStack>
-    </AppShell>
+    <>
+      {stats && (
+        <Head>
+          <meta property="og:title" content={stats.experimentLabel} key="title" />
+          <meta
+            property="og:image"
+            content={`/api/experiments/og-image?experimentLabel=${stats.experimentLabel}&variantsCount=${stats.promptVariantCount}&scenariosCount=${stats.testScenarioCount}`}
+            key="og-image"
+          />
+        </Head>
+      )}
+      <AppShell title={experiment.data?.label}>
+        <VStack h="full">
+          <Flex
+            px={4}
+            py={2}
+            w="full"
+            direction={{ base: "column", sm: "row" }}
+            alignItems={{ base: "flex-start", sm: "center" }}
+          >
+            <Breadcrumb flex={1}>
+              <BreadcrumbItem>
+                <Link href="/experiments">
+                  <Flex alignItems="center" _hover={{ textDecoration: "underline" }}>
+                    <Icon as={RiFlaskLine} boxSize={4} mr={2} /> Experiments
+                  </Flex>
+                </Link>
+              </BreadcrumbItem>
+              <BreadcrumbItem isCurrentPage>
+                {canModify ? (
+                  <Input
+                    size="sm"
+                    value={label}
+                    onChange={(e) => setLabel(e.target.value)}
+                    onBlur={onSaveLabel}
+                    borderWidth={1}
+                    borderColor="transparent"
+                    fontSize={16}
+                    px={0}
+                    minW={{ base: 100, lg: 300 }}
+                    flex={1}
+                    _hover={{ borderColor: "gray.300" }}
+                    _focus={{ borderColor: "blue.500", outline: "none" }}
+                  />
+                ) : (
+                  <Text fontSize={16} px={0} minW={{ base: 100, lg: 300 }} flex={1}>
+                    {experiment.data?.label}
+                  </Text>
+                )}
+              </BreadcrumbItem>
+            </Breadcrumb>
+            <HeaderButtons />
+          </Flex>
+          <ExperimentSettingsDrawer />
+          <Box w="100%" overflowX="auto" flex={1}>
+            <OutputsTable experimentId={router.query.id as string | undefined} />
+          </Box>
+        </VStack>
+      </AppShell>
+    </>
   );
 }

src/pages/world-champs/index.tsx

@@ -0,0 +1,15 @@
+import { type GetServerSideProps } from "next";
+
+// eslint-disable-next-line @typescript-eslint/require-await
+export const getServerSideProps: GetServerSideProps = async () => {
+  return {
+    redirect: {
+      destination: "/world-champs/signup",
+      permanent: false,
+    },
+  };
+};
+
+export default function WorldChamps() {
+  return null;
+}

src/pages/world-champs/signup.tsx

@@ -0,0 +1,217 @@
+import {
+  Box,
+  type BoxProps,
+  Button,
+  DarkMode,
+  GlobalStyle,
+  HStack,
+  Heading,
+  Icon,
+  Link,
+  Table,
+  Tbody,
+  Td,
+  Text,
+  type TextProps,
+  Th,
+  Tr,
+  VStack,
+  useInterval,
+  Image,
+} from "@chakra-ui/react";
+import { signIn, useSession } from "next-auth/react";
+import Head from "next/head";
+import { useCallback, useState } from "react";
+import { BsGithub } from "react-icons/bs";
+import UserMenu from "~/components/nav/UserMenu";
+import { api } from "~/utils/api";
+import dayjs from "~/utils/dayjs";
+import { useHandledAsyncCallback } from "~/utils/hooks";
+
+const TopNavbar = () => (
+  <DarkMode>
+    <GlobalStyle />
+    <HStack px={4} py={2}>
+      <HStack as={Link} href="/" _hover={{ textDecoration: "none" }} spacing={0} py={2} pr={16}>
+        <Image src="/logo.svg" alt="" boxSize={6} mr={4} />
+        <Heading size="md" fontFamily="inconsolata, monospace">
+          OpenPipe
+        </Heading>
+      </HStack>
+    </HStack>
+  </DarkMode>
+);
+
+// Shows how long until the competition starts. Refreshes every second
+function CountdownTimer(props: { date: Date } & TextProps) {
+  const [now, setNow] = useState(dayjs());
+
+  useInterval(() => {
+    setNow(dayjs());
+  }, 1000);
+
+  const { date, ...rest } = props;
+
+  const kickoff = dayjs(date);
+  const diff = kickoff.diff(now, "second");
+  const days = Math.floor(diff / 86400);
+  const hours = Math.floor((diff % 86400) / 3600);
+  const minutes = Math.floor((diff % 3600) / 60);
+  const seconds = Math.floor(diff % 60);
+
+  return (
+    <Text {...rest} suppressHydrationWarning>
+      <Text as="span" fontWeight="bold">
+        Kickoff in
+      </Text>{" "}
+      {days}d {hours}h {minutes}m {seconds}s
+    </Text>
+  );
+}
+
+function ApplicationStatus(props: BoxProps) {
+  const user = useSession().data;
+  const entrant = api.worldChamps.userStatus.useQuery().data;
+  const applyMutation = api.worldChamps.apply.useMutation();
+
+  const utils = api.useContext();
+
+  const [onSignIn] = useHandledAsyncCallback(async () => {
+    await signIn("github");
+  }, []);
+
+  const [onApply] = useHandledAsyncCallback(async () => {
+    await applyMutation.mutateAsync();
+    await utils.worldChamps.userStatus.invalidate();
+  }, []);
+
+  const Wrapper = useCallback(
+    (wrapperProps: BoxProps) => (
+      <Box {...props} {...wrapperProps} minH="120px" alignItems="center" justifyItems="center" />
+    ),
+    [props],
+  );
+
+  if (user === null) {
+    return (
+      <Wrapper>
+        <Button onClick={onSignIn} colorScheme="orange" leftIcon={<Icon as={BsGithub} />}>
+          Connect GitHub to apply
+        </Button>
+      </Wrapper>
+    );
+  } else if (user) {
+    return (
+      <Wrapper>
+        <HStack spacing={8}>
+          <UserMenu user={user} borderRadius={2} borderColor={"gray.700"} borderWidth={1} pr={6} />
+          <Box flex={1}>
+            {entrant?.approved ? (
+              <Text fontSize="sm">
+                You're accepted! We'll send you more details before August 14th.
+              </Text>
+            ) : entrant ? (
+              <Text fontSize="sm">
+                Application submitted successfully! We'll notify you by email before August 14th.
+              </Text>
+            ) : (
+              <Button onClick={onApply} colorScheme="orange">
+                Apply to compete
+              </Button>
+            )}
+          </Box>
+        </HStack>
+      </Wrapper>
+    );
+  }
+
+  return <Wrapper />;
+}
+
+export default function Signup() {
+  return (
+    <DarkMode>
+      <GlobalStyle />
+
+      <Head>
+        <title>🏆 Prompt Engineering World Championships</title>
+        <meta property="og:title" content="🏆 Prompt Engineering World Championships" key="title" />
+        <meta
+          property="og:description"
+          content="Think you have what it takes to be the best? Compete with the world's top prompt engineers and see where you rank!"
+          key="description"
+        />
+      </Head>
+
+      <Box color="gray.200" minH="100vh" w="full">
+        <TopNavbar />
+        <VStack mx="auto" py={24} maxW="2xl" align="start" fontSize="lg">
+          <Heading size="lg">🏆 Prompt Engineering World Championships</Heading>
+          <CountdownTimer
+            date={new Date("2023-08-14T00:00:00Z")}
+            fontSize="2xl"
+            alignSelf="center"
+            color="gray.500"
+          />
+
+          <ApplicationStatus py={8} alignSelf="center" />
+
+          <Text fontSize="lg">
+            Think you have what it takes to be the best? Compete with the world's top prompt
+            engineers and see where you rank!
+          </Text>
+
+          <Heading size="lg" pt={12} alignSelf="left">
+            Event Details
+          </Heading>
+          <Table variant="simple">
+            <Tbody>
+              <Tr>
+                <Th>Kickoff</Th>
+                <Td>August 14</Td>
+              </Tr>
+              <Tr>
+                <Th>Prize</Th>
+                <Td>$15,000 grand prize + smaller category prizes.</Td>
+              </Tr>
+              <Tr>
+                <Th>Events</Th>
+                <Td>
+                  Optimize prompts for multiple tasks selected from academic benchmarks and
+                  real-world applications.
+                </Td>
+              </Tr>
+              <Tr>
+                <Th>Models</Th>
+                <Td>Separate "weight classes" for GPT 3.5, Claude Instant, and Llama 2.</Td>
+              </Tr>
+              <Tr>
+                <Th>Qualifications</Th>
+                <Td>Open to entrants with any level of experience.</Td>
+              </Tr>
+              <Tr>
+                <Th>Certificates</Th>
+                <Td>Certificate of mastery for all qualifying participants.</Td>
+              </Tr>
+              <Tr>
+                <Th>Cost</Th>
+                <Td>
+                  <strong>Free</strong>. We'll cover your inference budget.
+                </Td>
+              </Tr>
+              <Tr>
+                <Th>Questions?</Th>
+                <Td>
+                  <Link href="mailto:world-champs@openpipe.ai" textDecor="underline">
+                    Email us
+                  </Link>{" "}
+                  with any follow-up questions!
+                </Td>
+              </Tr>
+            </Tbody>
+          </Table>
+        </VStack>
+      </Box>
+    </DarkMode>
+  );
+}

src/server/api/root.router.ts

@@ -5,6 +5,7 @@ import { scenariosRouter } from "./routers/scenarios.router";
 import { scenarioVariantCellsRouter } from "./routers/scenarioVariantCells.router";
 import { templateVarsRouter } from "./routers/templateVariables.router";
 import { evaluationsRouter } from "./routers/evaluations.router";
+import { worldChampsRouter } from "./routers/worldChamps.router";
 
 /**
  * This is the primary router for your server.
@@ -18,6 +19,7 @@ export const appRouter = createTRPCRouter({
   scenarioVariantCells: scenarioVariantCellsRouter,
   templateVars: templateVarsRouter,
   evaluations: evaluationsRouter,
+  worldChamps: worldChampsRouter,
 });
 
 // export type definition of API

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

@@ -15,6 +15,33 @@ import userOrg from "~/server/utils/userOrg";
 import generateTypes from "~/modelProviders/generateTypes";
 
 export const experimentsRouter = createTRPCRouter({
+  stats: publicProcedure.input(z.object({ id: z.string() })).query(async ({ input, ctx }) => {
+    await requireCanViewExperiment(input.id, ctx);
+
+    const [experiment, promptVariantCount, testScenarioCount] = await prisma.$transaction([
+      prisma.experiment.findFirstOrThrow({
+        where: { id: input.id },
+      }),
+      prisma.promptVariant.count({
+        where: {
+          experimentId: input.id,
+          visible: true,
+        },
+      }),
+      prisma.testScenario.count({
+        where: {
+          experimentId: input.id,
+          visible: true,
+        },
+      }),
+    ]);
+
+    return {
+      experimentLabel: experiment.label,
+      promptVariantCount,
+      testScenarioCount,
+    };
+  }),
   list: protectedProcedure.query(async ({ ctx }) => {
     // Anyone can list experiments
     requireNothing(ctx);

src/server/api/routers/scenarios.router.ts

@@ -41,7 +41,21 @@ export const scenariosRouter = createTRPCRouter({
         count,
       };
     }),
+  get: protectedProcedure.input(z.object({ id: z.string() })).query(async ({ input, ctx }) => {
+    const scenario = await prisma.testScenario.findUnique({
+      where: {
+        id: input.id,
+      },
+    });
 
+    if (!scenario) {
+      throw new Error(`Scenario with id ${input.id} does not exist`);
+    }
+
+    await requireCanViewExperiment(scenario.experimentId, ctx);
+
+    return scenario;
+  }),
   create: protectedProcedure
     .input(
       z.object({

src/server/api/routers/worldChamps.router.ts

@@ -0,0 +1,36 @@
+import { createTRPCRouter, protectedProcedure, publicProcedure } from "~/server/api/trpc";
+import { prisma } from "~/server/db";
+import { requireNothing } from "~/utils/accessControl";
+
+export const worldChampsRouter = createTRPCRouter({
+  userStatus: publicProcedure.query(async ({ ctx }) => {
+    const userId = ctx.session?.user.id;
+
+    if (!userId) {
+      return null;
+    }
+
+    return await prisma.worldChampEntrant.findUnique({
+      where: { userId },
+    });
+  }),
+
+  apply: protectedProcedure.mutation(async ({ ctx }) => {
+    const userId = ctx.session.user.id;
+    requireNothing(ctx);
+
+    const existingEntrant = await prisma.worldChampEntrant.findUnique({
+      where: { userId },
+    });
+
+    if (existingEntrant) {
+      return existingEntrant;
+    }
+
+    return await prisma.worldChampEntrant.create({
+      data: {
+        userId,
+      },
+    });
+  }),
+});

src/server/api/trpc.ts

@@ -40,7 +40,7 @@ const noOp = () => {};
  *
  * @see https://create.t3.gg/en/usage/trpc#-serverapitrpcts
  */
-const createInnerTRPCContext = (opts: CreateContextOptions) => {
+export const createInnerTRPCContext = (opts: CreateContextOptions) => {
   return {
     session: opts.session,
     prisma,

src/server/scripts/studio-prod.sh

@@ -0,0 +1,12 @@
+#! /bin/bash
+
+set -e
+cd "$(dirname "$0")/../../.."
+
+
+set -o allexport
+source .env
+set +o allexport
+
+echo "Connecting to prod db"
+DATABASE_URL=$PROD_DATABASE_URL pnpm prisma studio

src/server/utils/deriveNewContructFn.ts

@@ -3,7 +3,7 @@ import ivm from "isolated-vm";
 import dedent from "dedent";
 import { openai } from "./openai";
 import { isObject } from "lodash-es";
-import { type CompletionCreateParams } from "openai/resources/chat/completions";
+import type { CreateChatCompletionRequestMessage } from "openai/resources/chat/completions";
 import formatPromptConstructor from "~/utils/formatPromptConstructor";
 import { type SupportedProvider, type Model } from "~/modelProviders/types";
 import modelProviders from "~/modelProviders/modelProviders";
@@ -44,14 +44,14 @@ const requestUpdatedPromptFunction = async (
   let newContructionFn = "";
   for (let i = 0; i < NUM_RETRIES; i++) {
     try {
-      const messages: CompletionCreateParams.CreateChatCompletionRequestNonStreaming.Message[] = [
+      const messages: CreateChatCompletionRequestMessage[] = [
         {
           role: "system",
           content: `Your job is to update prompt constructor functions. Here is the api shape for the current model:\n---\n${JSON.stringify(
             originalModelProvider.inputSchema,
             null,
             2,
-          )}\n\nDo not add any assistant messages.`,
+          )}\n\nDo not add any assistant messages. Do not add any extra fields to the schema. Try to keep temperature consistent.`,
         },
         {
           role: "user",

src/server/utils/openai.ts

@@ -2,4 +2,5 @@ import { env } from "~/env.mjs";
 
 import OpenAI from "openai";
 
-export const openai = new OpenAI({ apiKey: env.OPENAI_API_KEY });
+// Set a dummy key so it doesn't fail at build time
+export const openai = new OpenAI({ apiKey: env.OPENAI_API_KEY ?? "dummy-key" });

src/theme/ChakraThemeProvider.tsx

@@ -1,11 +1,31 @@
 import { extendTheme } from "@chakra-ui/react";
 import "@fontsource/inconsolata";
 import { ChakraProvider } from "@chakra-ui/react";
+import { modalAnatomy } from "@chakra-ui/anatomy";
+import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system";
 
 const systemFont =
   'ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"';
 
+/* eslint-disable @typescript-eslint/unbound-method */
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(
+  modalAnatomy.keys,
+);
+
+const modalTheme = defineMultiStyleConfig({
+  baseStyle: definePartsStyle({
+    dialog: { borderRadius: "sm" },
+  }),
+});
+
 const theme = extendTheme({
+  styles: {
+    global: (props: { colorMode: "dark" | "light" }) => ({
+      "html, body": {
+        backgroundColor: props.colorMode === "dark" ? "gray.900" : "white",
+      },
+    }),
+  },
   fonts: {
     heading: systemFont,
     body: systemFont,
@@ -32,6 +52,7 @@ const theme = extendTheme({
         },
       },
     },
+    Modal: modalTheme,
   },
 });
 

src/utils/dayjs.ts

@@ -7,3 +7,5 @@ dayjs.extend(relativeTime);
 
 export const formatTimePast = (date: Date) =>
   dayjs.duration(dayjs(date).diff(dayjs())).humanize(true);
+
+export default dayjs;

src/utils/hooks.ts

@@ -107,4 +107,8 @@ export const useScenarios = () => {
   );
 };
 
+export const useScenario = (scenarioId: string) => {
+  return api.scenarios.get.useQuery({ id: scenarioId });
+};
+
 export const useVisibleScenarioIds = () => useScenarios().data?.scenarios.map((s) => s.id) ?? [];