Support Claude Instant 1.2

Merge pull request #123 from OpenPipe/add-openapi
Add Logged Calls and projects
2023-08-09 14:43:54 -07:00 · 2023-08-09 14:37:17 -07:00 · 2023-08-09 14:26:15 -07:00 · 2023-08-09 01:22:04 -07:00 · 2023-08-09 01:21:42 -07:00 · 2023-08-08 18:30:02 -07:00
268 changed files with 8815 additions and 1746 deletions
--- a/.github/workflows/app-ci.yaml
+++ b/.github/workflows/app-ci.yaml
@@ -6,6 +6,10 @@ on:
  push:
    branches: [main]

+defaults:
+  run:
+    working-directory: app
+
 jobs:
  run-checks:
    runs-on: ubuntu-latest
--- a/README.md
+++ b/README.md
@@ -1,52 +1,62 @@
-<img src="https://github.com/openpipe/openpipe/assets/41524992/ca59596e-eb80-40f9-921f-6d67f6e6d8fa" width="72px" />
+<!-- <img src="https://github.com/openpipe/openpipe/assets/41524992/ca59596e-eb80-40f9-921f-6d67f6e6d8fa" width="72px" /> -->

 # OpenPipe

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

 ## Sample Experiments

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

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

-<img src="https://github.com/openpipe/openpipe/assets/176426/fc7624c6-5b65-4d4d-82b7-4a816f3e5678" alt="demo" height="400px">
-
-You can use our hosted version of OpenPipe at [https://openpipe.ai]. You can also clone this repository and [run it locally](#running-locally).
-
-## High-Level Features
-
-**Configure Multiple Prompts**  
-Set up multiple prompt configurations and compare their output side-by-side. Each configuration can be configured independently.
-
-**Visualize Responses**  
-Inspect prompt completions side-by-side.
-
-**Test Many Inputs**  
-OpenPipe lets you _template_ a prompt. Use the templating feature to run the prompts you're testing against many potential inputs for broader coverage of your problem space than you'd get with manual testing.
-
-**🪄 Auto-generate Test Scenarios**  
-OpenPipe includes a tool to generate new test scenarios based on your existing prompts and scenarios. Just click "Autogenerate Scenario" to try it out!
-
-**Prompt Validation and Typeahead**  
-We use OpenAI's OpenAPI spec to automatically provide typeahead and validate prompts.
-
-<img alt="typeahead" src="https://github.com/openpipe/openpipe/assets/176426/acc638f8-d851-4742-8d01-fe6f98890840" height="300px">
-
-**Function Call Support**  
-Natively supports [OpenAI function calls](https://openai.com/blog/function-calling-and-other-api-updates) on supported models.
-
-<img height="300px" alt="function calls" src="https://github.com/openpipe/openpipe/assets/176426/48ad13fe-af2f-4294-bf32-62015597fd9b">
-
 ## Supported Models

 - All models available through the OpenAI [chat completion API](https://platform.openai.com/docs/guides/gpt/chat-completions-api)
 - Llama2 [7b chat](https://replicate.com/a16z-infra/llama7b-v2-chat), [13b chat](https://replicate.com/a16z-infra/llama13b-v2-chat), [70b chat](https://replicate.com/replicate/llama70b-v2-chat).
 - Anthropic's [Claude 1 Instant](https://www.anthropic.com/index/introducing-claude) and [Claude 2](https://www.anthropic.com/index/claude-2)

+## Features
+
+### 🔍 Visualize Responses
+
+Inspect prompt completions side-by-side.
+
+### 🧪 Bulk-Test
+
+OpenPipe lets you _template_ a prompt. Use the templating feature to run the prompts you're testing against many potential inputs for broad coverage of your problem space.
+
+### 📟 Translate between Model APIs
+
+Write your prompt in one format and automatically convert it to work with any other model.
+
+<img width="480" alt="Screenshot 2023-08-01 at 11 55 38 PM" src="https://github.com/OpenPipe/OpenPipe/assets/41524992/1e19ccf2-96b6-4e93-a3a5-1449710d1b5b" alt="translate between models">
+
+<br><br>
+
+### 🛠️ Refine Your Prompts Automatically
+
+Use a growing database of best-practice refinements to improve your prompts automatically.
+
+<img width="480" alt="Screenshot 2023-08-01 at 11 55 38 PM" src="https://github.com/OpenPipe/OpenPipe/assets/41524992/87a27fe7-daef-445c-a5e2-1c82b23f9f99" alt="add function call">
+
+<br><br>
+
+### 🪄 Auto-generate Test Scenarios
+
+OpenPipe includes a tool to generate new test scenarios based on your existing prompts and scenarios. Just click "Autogenerate Scenario" to try it out!
+
+<img width="600" src="https://github.com/openpipe/openpipe/assets/41524992/219a844e-3f4e-4f6b-8066-41348b42977b" alt="auto-generate">
+
+<br><br>
+
 ## Running Locally

 1. Install [Postgresql](https://www.postgresql.org/download/).
--- a/app/.env.example
+++ b/app/.env.example
@@ -26,6 +26,11 @@ NEXT_PUBLIC_SOCKET_URL="http://localhost:3318"
 NEXTAUTH_SECRET="your_secret"
 NEXTAUTH_URL="http://localhost:3000"

+NEXT_PUBLIC_HOST="http://localhost:3000"
+
 # Next Auth Github Provider
 GITHUB_CLIENT_ID="your_client_id"
 GITHUB_CLIENT_SECRET="your_secret"
+
+OPENPIPE_BASE_URL="http://localhost:3000/api"
+OPENPIPE_API_KEY="your_key"
--- a/app/.eslintrc.cjs
+++ b/app/.eslintrc.cjs
--- a/app/.gitignore
+++ b/app/.gitignore
@@ -40,3 +40,6 @@ yarn-error.log*

 # typescript
 *.tsbuildinfo
+
+# Sentry Auth Token
+.sentryclirc
--- a/app/.prettierignore
+++ b/app/.prettierignore
--- a/app/.prettierrc
+++ b/app/.prettierrc
--- a/app/.tool-versions
+++ b/app/.tool-versions
--- a/app/.vscode/settings.json
+++ b/app/.vscode/settings.json
--- a/app/@types/nextjs-routes.d.ts
+++ b/app/@types/nextjs-routes.d.ts
@@ -12,12 +12,20 @@ declare module "nextjs-routes" {

  export type Route =
    | StaticRoute<"/account/signin">
+    | DynamicRoute<"/api/[...trpc]", { "trpc": string[] }>
    | DynamicRoute<"/api/auth/[...nextauth]", { "nextauth": string[] }>
    | StaticRoute<"/api/experiments/og-image">
+    | StaticRoute<"/api/openapi">
+    | StaticRoute<"/api/sentry-example-api">
    | DynamicRoute<"/api/trpc/[trpc]", { "trpc": string }>
+    | DynamicRoute<"/data/[id]", { "id": string }>
+    | StaticRoute<"/data">
    | DynamicRoute<"/experiments/[id]", { "id": string }>
    | StaticRoute<"/experiments">
    | StaticRoute<"/">
+    | StaticRoute<"/logged-calls">
+    | StaticRoute<"/project/settings">
+    | StaticRoute<"/sentry-example-page">
    | StaticRoute<"/world-champs">
    | StaticRoute<"/world-champs/signup">;

--- a/app/Dockerfile
+++ b/app/Dockerfile
@@ -20,6 +20,10 @@ FROM base as builder
 # Include all NEXT_PUBLIC_* env vars here
 ARG NEXT_PUBLIC_POSTHOG_KEY
 ARG NEXT_PUBLIC_SOCKET_URL
+ARG NEXT_PUBLIC_HOST
+ARG NEXT_PUBLIC_SENTRY_DSN
+ARG SENTRY_AUTH_TOKEN
+ARG NEXT_PUBLIC_FF_SHOW_LOGGED_CALLS

 WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
--- a/app/LICENSE
+++ b/app/LICENSE
--- a/app/next.config.mjs
+++ b/app/next.config.mjs
@@ -0,0 +1,61 @@
+import nextRoutes from "nextjs-routes/config";
+import { withSentryConfig } from "@sentry/nextjs";
+
+/**
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
+ * for Docker builds.
+ */
+const { env } = await import("./src/env.mjs");
+
+/** @type {import("next").NextConfig} */
+let config = {
+  reactStrictMode: true,
+
+  /**
+   * If you have `experimental: { appDir: true }` set, then you must comment the below `i18n` config
+   * out.
+   *
+   * @see https://github.com/vercel/next.js/issues/41980
+   */
+  i18n: {
+    locales: ["en"],
+    defaultLocale: "en",
+  },
+
+  rewrites: async () => [
+    {
+      source: "/ingest/:path*",
+      destination: "https://app.posthog.com/:path*",
+    },
+  ],
+
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.txt$/,
+      use: "raw-loader",
+    });
+    return config;
+  },
+};
+
+config = nextRoutes()(config);
+
+if (env.NEXT_PUBLIC_SENTRY_DSN && env.SENTRY_AUTH_TOKEN) {
+  // @ts-expect-error - `withSentryConfig` is not typed correctly
+  config = withSentryConfig(
+    config,
+    {
+      authToken: env.SENTRY_AUTH_TOKEN,
+      silent: true,
+      org: "openpipe",
+      project: "openpipe",
+    },
+    {
+      widenClientFileUpload: true,
+      tunnelRoute: "/monitoring",
+      disableLogger: true,
+    },
+  );
+}
+
+export default config;
--- a/app/openapitools.json
+++ b/app/openapitools.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/@openapitools/openapi-generator-cli/config.schema.json",
+  "spaces": 2,
+  "generator-cli": {
+    "version": "6.6.0"
+  }
+}
--- a/app/package.json
+++ b/app/package.json
@@ -16,17 +16,20 @@
    "postinstall": "prisma generate",
    "lint": "next lint",
    "start": "next start",
-    "codegen": "tsx src/codegen/export-openai-types.ts",
+    "codegen": "tsx src/server/scripts/client-codegen.ts",
    "seed": "tsx prisma/seed.ts",
-    "check": "concurrently 'pnpm lint' 'pnpm tsc' 'pnpm prettier . --check'"
+    "check": "concurrently 'pnpm lint' 'pnpm tsc' 'pnpm prettier . --check'",
+    "test": "pnpm vitest --no-threads"
  },
  "dependencies": {
    "@anthropic-ai/sdk": "^0.5.8",
    "@apidevtools/json-schema-ref-parser": "^10.1.0",
    "@babel/preset-typescript": "^7.22.5",
    "@babel/standalone": "^7.22.9",
+    "@chakra-ui/anatomy": "^2.2.0",
    "@chakra-ui/next-js": "^2.1.4",
    "@chakra-ui/react": "^2.7.1",
+    "@chakra-ui/styled-system": "^2.9.1",
    "@emotion/react": "^11.11.1",
    "@emotion/server": "^11.11.0",
    "@emotion/styled": "^11.11.0",
@@ -34,6 +37,7 @@
    "@monaco-editor/loader": "^1.3.3",
    "@next-auth/prisma-adapter": "^1.0.5",
    "@prisma/client": "^4.14.0",
+    "@sentry/nextjs": "^7.61.0",
    "@t3-oss/env-nextjs": "^0.3.1",
    "@tabler/icons-react": "^2.22.0",
    "@tanstack/react-query": "^4.29.7",
@@ -46,6 +50,7 @@
    "chroma-js": "^2.4.2",
    "concurrently": "^8.2.0",
    "cors": "^2.8.5",
+    "crypto-random-string": "^5.0.0",
    "dayjs": "^1.11.8",
    "dedent": "^1.0.1",
    "dotenv": "^16.3.1",
@@ -58,28 +63,37 @@
    "json-schema-to-typescript": "^13.0.2",
    "json-stringify-pretty-compact": "^4.0.0",
    "jsonschema": "^1.4.1",
+    "kysely": "^0.26.1",
    "lodash-es": "^4.17.21",
+    "lucide-react": "^0.265.0",
    "next": "^13.4.2",
    "next-auth": "^4.22.1",
    "next-query-params": "^4.2.3",
+    "nextjs-cors": "^2.1.2",
    "nextjs-routes": "^2.0.1",
-    "openai": "4.0.0-beta.2",
+    "openai": "4.0.0-beta.7",
+    "pg": "^8.11.2",
    "pluralize": "^8.0.0",
-    "posthog-js": "^1.68.4",
+    "posthog-js": "^1.75.3",
+    "posthog-node": "^3.1.1",
    "prettier": "^3.0.0",
    "prismjs": "^1.29.0",
    "react": "18.2.0",
    "react-diff-viewer": "^3.1.1",
    "react-dom": "18.2.0",
+    "react-github-btn": "^1.4.0",
    "react-icons": "^4.10.1",
+    "react-json-tree": "^0.18.0",
    "react-select": "^5.7.4",
    "react-syntax-highlighter": "^15.5.0",
    "react-textarea-autosize": "^8.5.0",
    "recast": "^0.23.3",
+    "recharts": "^2.7.2",
    "replicate": "^0.12.3",
    "socket.io": "^4.7.1",
    "socket.io-client": "^4.7.1",
    "superjson": "1.12.2",
+    "trpc-openapi": "^1.2.0",
    "tsx": "^3.12.7",
    "type-fest": "^4.0.0",
    "use-query-params": "^2.2.1",
@@ -99,6 +113,7 @@
    "@types/json-schema": "^7.0.12",
    "@types/lodash-es": "^4.17.8",
    "@types/node": "^18.16.0",
+    "@types/pg": "^8.10.2",
    "@types/pluralize": "^0.0.30",
    "@types/prismjs": "^1.26.0",
    "@types/react": "^18.2.6",
--- a/app/pnpm-lock.yaml
+++ b/app/pnpm-lock.yaml
--- a/app/prisma/datasets/validated_tweets.csv
+++ b/app/prisma/datasets/validated_tweets.csv
--- a/app/prisma/migrations/20230701015916_init/migration.sql
+++ b/app/prisma/migrations/20230701015916_init/migration.sql
--- a/app/prisma/migrations/20230701042329_add_time_to_complete_to_model_output/migration.sql
+++ b/app/prisma/migrations/20230701042329_add_time_to_complete_to_model_output/migration.sql
--- a/app/prisma/migrations/20230706193243_add_tokens_to_model_output/migration.sql
+++ b/app/prisma/migrations/20230706193243_add_tokens_to_model_output/migration.sql
--- a/app/prisma/migrations/20230706201223_add_evaluations/migration.sql
+++ b/app/prisma/migrations/20230706201223_add_evaluations/migration.sql
--- a/app/prisma/migrations/20230714004556_add_construct_fn_to_prompt_variant/migration.sql
+++ b/app/prisma/migrations/20230714004556_add_construct_fn_to_prompt_variant/migration.sql
--- a/app/prisma/migrations/20230714113205_create_scenariotvariant/migration.sql
+++ b/app/prisma/migrations/20230714113205_create_scenariotvariant/migration.sql
--- a/app/prisma/migrations/20230714182259_add_model_to_variant/migration.sql
+++ b/app/prisma/migrations/20230714182259_add_model_to_variant/migration.sql
--- a/app/prisma/migrations/20230715004031_remove_default_value_for_model/migration.sql
+++ b/app/prisma/migrations/20230715004031_remove_default_value_for_model/migration.sql
--- a/app/prisma/migrations/20230717203031_add_gpt4_eval/migration.sql
+++ b/app/prisma/migrations/20230717203031_add_gpt4_eval/migration.sql
--- a/app/prisma/migrations/20230718005301_add_gpt4_eval_type/migration.sql
+++ b/app/prisma/migrations/20230718005301_add_gpt4_eval_type/migration.sql
--- a/app/prisma/migrations/20230718201303_add_users_and_orgs/migration.sql
+++ b/app/prisma/migrations/20230718201303_add_users_and_orgs/migration.sql
--- a/app/prisma/migrations/20230719181731_remove_duplicate_scenario_variant_cell_fields/migration.sql
+++ b/app/prisma/migrations/20230719181731_remove_duplicate_scenario_variant_cell_fields/migration.sql
--- a/app/prisma/migrations/20230719224611_add_cost_to_model_output/migration.sql
+++ b/app/prisma/migrations/20230719224611_add_cost_to_model_output/migration.sql
--- a/app/prisma/migrations/20230720213215_add_model_providers/migration.sql
+++ b/app/prisma/migrations/20230720213215_add_model_providers/migration.sql
--- a/app/prisma/migrations/20230725005817_use_id_as_streaming_channel/migration.sql
+++ b/app/prisma/migrations/20230725005817_use_id_as_streaming_channel/migration.sql
--- a/app/prisma/migrations/20230725191512_migrate_model_response/migration.sql
+++ b/app/prisma/migrations/20230725191512_migrate_model_response/migration.sql
--- a/app/prisma/migrations/20230801195916_add_world_champs/migration.sql
+++ b/app/prisma/migrations/20230801195916_add_world_champs/migration.sql
--- a/app/prisma/migrations/20230801234208_add_created_at_and_updated_at_to_users_table/migration.sql
+++ b/app/prisma/migrations/20230801234208_add_created_at_and_updated_at_to_users_table/migration.sql
--- a/app/prisma/migrations/20230803163242_add_admin_role/migration.sql
+++ b/app/prisma/migrations/20230803163242_add_admin_role/migration.sql
@@ -0,0 +1,5 @@
+-- CreateEnum
+CREATE TYPE "UserRole" AS ENUM ('ADMIN', 'USER');
+
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "role" "UserRole" NOT NULL DEFAULT 'USER';
--- a/app/prisma/migrations/20230804042305_add_datasets/migration.sql
+++ b/app/prisma/migrations/20230804042305_add_datasets/migration.sql
@@ -0,0 +1,28 @@
+-- CreateTable
+CREATE TABLE "Dataset" (
+    "id" UUID NOT NULL,
+    "name" TEXT NOT NULL,
+    "organizationId" UUID NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Dataset_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "DatasetEntry" (
+    "id" UUID NOT NULL,
+    "input" TEXT NOT NULL,
+    "output" TEXT,
+    "datasetId" UUID NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "DatasetEntry_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "Dataset" ADD CONSTRAINT "Dataset_organizationId_fkey" FOREIGN KEY ("organizationId") REFERENCES "Organization"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "DatasetEntry" ADD CONSTRAINT "DatasetEntry_datasetId_fkey" FOREIGN KEY ("datasetId") REFERENCES "Dataset"("id") ON DELETE CASCADE ON UPDATE CASCADE;
--- a/app/prisma/migrations/20230805054033_migrate_construct_fn_to_prompt_constructor/migration.sql
+++ b/app/prisma/migrations/20230805054033_migrate_construct_fn_to_prompt_constructor/migration.sql
@@ -0,0 +1,13 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `constructFn` on the `PromptVariant` table. All the data in the column will be lost.
+  - You are about to drop the column `constructFnVersion` on the `PromptVariant` table. All the data in the column will be lost.
+  - Added the required column `promptConstructor` to the `PromptVariant` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `promptConstructorVersion` to the `PromptVariant` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+
+ALTER TABLE "PromptVariant" RENAME COLUMN "constructFn" TO "promptConstructor";
+ALTER TABLE "PromptVariant" RENAME COLUMN "constructFnVersion" TO "promptConstructorVersion";
--- a/app/prisma/migrations/20230806024615_add_logged_calls_and_api_keys/migration.sql
+++ b/app/prisma/migrations/20230806024615_add_logged_calls_and_api_keys/migration.sql
@@ -0,0 +1,90 @@
+-- CreateTable
+CREATE TABLE "LoggedCall" (
+    "id" UUID NOT NULL,
+    "startTime" TIMESTAMP(3) NOT NULL,
+    "cacheHit" BOOLEAN NOT NULL,
+    "modelResponseId" UUID NOT NULL,
+    "organizationId" UUID NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "LoggedCall_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "LoggedCallModelResponse" (
+    "id" UUID NOT NULL,
+    "reqPayload" JSONB NOT NULL,
+    "respStatus" INTEGER,
+    "respPayload" JSONB,
+    "error" TEXT,
+    "startTime" TIMESTAMP(3) NOT NULL,
+    "endTime" TIMESTAMP(3) NOT NULL,
+    "cacheKey" TEXT,
+    "durationMs" INTEGER,
+    "inputTokens" INTEGER,
+    "outputTokens" INTEGER,
+    "finishReason" TEXT,
+    "completionId" TEXT,
+    "totalCost" DECIMAL(18,12),
+    "originalLoggedCallId" UUID NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "LoggedCallModelResponse_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "LoggedCallTag" (
+    "id" UUID NOT NULL,
+    "name" TEXT NOT NULL,
+    "value" TEXT,
+    "loggedCallId" UUID NOT NULL,
+
+    CONSTRAINT "LoggedCallTag_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ApiKey" (
+    "id" UUID NOT NULL,
+    "name" TEXT NOT NULL,
+    "apiKey" TEXT NOT NULL,
+    "organizationId" UUID NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "ApiKey_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE INDEX "LoggedCall_startTime_idx" ON "LoggedCall"("startTime");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "LoggedCallModelResponse_originalLoggedCallId_key" ON "LoggedCallModelResponse"("originalLoggedCallId");
+
+-- CreateIndex
+CREATE INDEX "LoggedCallModelResponse_cacheKey_idx" ON "LoggedCallModelResponse"("cacheKey");
+
+-- CreateIndex
+CREATE INDEX "LoggedCallTag_name_idx" ON "LoggedCallTag"("name");
+
+-- CreateIndex
+CREATE INDEX "LoggedCallTag_name_value_idx" ON "LoggedCallTag"("name", "value");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ApiKey_apiKey_key" ON "ApiKey"("apiKey");
+
+-- AddForeignKey
+ALTER TABLE "LoggedCall" ADD CONSTRAINT "LoggedCall_modelResponseId_fkey" FOREIGN KEY ("modelResponseId") REFERENCES "LoggedCallModelResponse"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "LoggedCall" ADD CONSTRAINT "LoggedCall_organizationId_fkey" FOREIGN KEY ("organizationId") REFERENCES "Organization"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "LoggedCallModelResponse" ADD CONSTRAINT "LoggedCallModelResponse_originalLoggedCallId_fkey" FOREIGN KEY ("originalLoggedCallId") REFERENCES "LoggedCall"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "LoggedCallTag" ADD CONSTRAINT "LoggedCallTag_loggedCallId_fkey" FOREIGN KEY ("loggedCallId") REFERENCES "LoggedCall"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ApiKey" ADD CONSTRAINT "ApiKey_organizationId_fkey" FOREIGN KEY ("organizationId") REFERENCES "Organization"("id") ON DELETE CASCADE ON UPDATE CASCADE;
--- a/app/prisma/migrations/20230807044936_add_name_to_organization/migration.sql
+++ b/app/prisma/migrations/20230807044936_add_name_to_organization/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Organization" ADD COLUMN     "name" TEXT NOT NULL DEFAULT 'Project 1';
--- a/app/prisma/migrations/20230808034313_make_model_response_optional/migration.sql
+++ b/app/prisma/migrations/20230808034313_make_model_response_optional/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "LoggedCall" ALTER COLUMN "modelResponseId" DROP NOT NULL;
--- a/app/prisma/migrations/migration_lock.toml
+++ b/app/prisma/migrations/migration_lock.toml
--- a/app/prisma/schema.prisma
+++ b/app/prisma/schema.prisma
@@ -31,11 +31,11 @@ model Experiment {
 model PromptVariant {
    id String @id @default(uuid()) @db.Uuid

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

    uiId      String  @default(uuid()) @db.Uuid
    visible   Boolean @default(true)
@@ -174,15 +174,47 @@ model OutputEvaluation {
    @@unique([modelResponseId, evaluationId])
 }

+model Dataset {
+    id String @id @default(uuid()) @db.Uuid
+
+    name           String
+    datasetEntries DatasetEntry[]
+
+    organizationId String       @db.Uuid
+    organization   Organization @relation(fields: [organizationId], references: [id], onDelete: Cascade)
+
+    createdAt DateTime @default(now())
+    updatedAt DateTime @updatedAt
+}
+
+model DatasetEntry {
+    id String @id @default(uuid()) @db.Uuid
+
+    input  String
+    output String?
+
+    datasetId String   @db.Uuid
+    dataset   Dataset? @relation(fields: [datasetId], references: [id], onDelete: Cascade)
+
+    createdAt DateTime @default(now())
+    updatedAt DateTime @updatedAt
+}
+
+// TODO rename Organization to Project
 model Organization {
    id                String  @id @default(uuid()) @db.Uuid
+    name              String  @default("Project 1")
+
    personalOrgUserId String? @unique @db.Uuid
-    PersonalOrgUser   User?   @relation(fields: [personalOrgUserId], references: [id], onDelete: Cascade)
+    personalOrgUser   User?   @relation(fields: [personalOrgUserId], references: [id], onDelete: Cascade)

    createdAt         DateTime           @default(now())
    updatedAt         DateTime           @updatedAt
    organizationUsers OrganizationUser[]
    experiments       Experiment[]
+    datasets          Dataset[]
+    loggedCalls       LoggedCall[]
+    apiKeys           ApiKey[]
 }

 enum OrganizationUserRole {
@@ -222,6 +254,99 @@ model WorldChampEntrant {
    @@unique([userId])
 }

+model LoggedCall {
+    id String @id @default(uuid()) @db.Uuid
+
+    startTime DateTime
+
+    // True if this call was served from the cache, false otherwise
+    cacheHit Boolean
+
+    // A LoggedCall is always associated with a LoggedCallModelResponse. If this
+    // is a cache miss, we create a new LoggedCallModelResponse.
+    // If it's a cache hit, it's a pre-existing LoggedCallModelResponse.    
+    modelResponseId String?                 @db.Uuid
+    modelResponse   LoggedCallModelResponse? @relation(fields: [modelResponseId], references: [id], onDelete: Cascade)
+
+    // The responses created by this LoggedCall. Will be empty if this LoggedCall was a cache hit.
+    createdResponses LoggedCallModelResponse[] @relation(name: "ModelResponseOriginalCall")
+
+    organizationId String        @db.Uuid
+    organization   Organization? @relation(fields: [organizationId], references: [id], onDelete: Cascade)
+
+    tags LoggedCallTag[]
+
+    createdAt DateTime @default(now())
+    updatedAt DateTime @updatedAt
+
+    @@index([startTime])
+}
+
+model LoggedCallModelResponse {
+    id String @id @default(uuid()) @db.Uuid
+
+    reqPayload Json
+
+    // The HTTP status returned by the model provider
+    respStatus  Int?
+    respPayload Json?
+
+    // Should be null if the request was successful, and some string if the request failed.
+    error String?
+
+    startTime DateTime
+    endTime   DateTime
+
+    // Note: the function to calculate the cacheKey should include the project
+    // ID so we don't share cached responses between projects, which could be an
+    // attack vector. Also, we should only set the cacheKey on the model if the
+    // request was successful.
+    cacheKey String?
+
+    // Derived fields
+    durationMs   Int?
+    inputTokens  Int?
+    outputTokens Int?
+    finishReason String?
+    completionId String?
+    totalCost    Decimal? @db.Decimal(18, 12)
+
+    // The LoggedCall that created this LoggedCallModelResponse
+    originalLoggedCallId String     @unique @db.Uuid
+    originalLoggedCall   LoggedCall @relation(name: "ModelResponseOriginalCall", fields: [originalLoggedCallId], references: [id], onDelete: Cascade)
+
+    createdAt   DateTime     @default(now())
+    updatedAt   DateTime     @updatedAt
+    loggedCalls LoggedCall[]
+
+    @@index([cacheKey])
+}
+
+model LoggedCallTag {
+    id    String @id @default(uuid()) @db.Uuid
+    name  String
+    value String?
+
+    loggedCallId String        @db.Uuid
+    loggedCall   LoggedCall @relation(fields: [loggedCallId], references: [id], onDelete: Cascade)
+
+    @@index([name])
+    @@index([name, value])
+}
+
+model ApiKey {
+    id String @id @default(uuid()) @db.Uuid
+
+    name   String
+    apiKey String @unique
+
+    organizationId String        @db.Uuid
+    organization   Organization? @relation(fields: [organizationId], references: [id], onDelete: Cascade)
+
+    createdAt DateTime @default(now())
+    updatedAt DateTime @updatedAt
+}
+
 model Account {
    id                       String  @id @default(uuid()) @db.Uuid
    userId                   String  @db.Uuid
@@ -249,12 +374,20 @@ model Session {
    user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
 }

+enum UserRole {
+    ADMIN
+    USER
+}
+
 model User {
-    id                String             @id @default(uuid()) @db.Uuid
-    name              String?
-    email             String?            @unique
-    emailVerified     DateTime?
-    image             String?
+    id            String    @id @default(uuid()) @db.Uuid
+    name          String?
+    email         String?   @unique
+    emailVerified DateTime?
+    image         String?
+
+    role UserRole @default(USER)
+
    accounts          Account[]
    sessions          Session[]
    organizationUsers OrganizationUser[]
--- a/app/prisma/seed.ts
+++ b/app/prisma/seed.ts
@@ -1,6 +1,7 @@
 import { prisma } from "~/server/db";
 import dedent from "dedent";
 import { generateNewCell } from "~/server/utils/generateNewCell";
+import { promptConstructorVersion } from "~/promptConstructor/version";

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

@@ -51,8 +52,8 @@ await prisma.promptVariant.createMany({
      sortIndex: 0,
      model: "gpt-3.5-turbo-0613",
      modelProvider: "openai/ChatCompletion",
-      constructFnVersion: 1,
-      constructFn: dedent`
+      promptConstructorVersion,
+      promptConstructor: dedent`
        definePrompt("openai/ChatCompletion", {
          model: "gpt-3.5-turbo-0613",
          messages: [
@@ -70,8 +71,8 @@ await prisma.promptVariant.createMany({
      sortIndex: 1,
      model: "gpt-3.5-turbo-0613",
      modelProvider: "openai/ChatCompletion",
-      constructFnVersion: 1,
-      constructFn: dedent`
+      promptConstructorVersion,
+      promptConstructor: dedent`
        definePrompt("openai/ChatCompletion", {
          model: "gpt-3.5-turbo-0613",
          messages: [
--- a/app/prisma/seedAgiEval.ts
+++ b/app/prisma/seedAgiEval.ts
@@ -3,6 +3,7 @@ import { generateNewCell } from "~/server/utils/generateNewCell";
 import dedent from "dedent";
 import { execSync } from "child_process";
 import fs from "fs";
+import { promptConstructorVersion } from "~/promptConstructor/version";

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

@@ -98,8 +99,8 @@ for (const dataset of datasets) {
        sortIndex: 0,
        model: "gpt-3.5-turbo-0613",
        modelProvider: "openai/ChatCompletion",
-        constructFnVersion: 1,
-        constructFn: dedent`
+        promptConstructorVersion,
+        promptConstructor: dedent`
          definePrompt("openai/ChatCompletion", {
            model: "gpt-3.5-turbo-0613",
            messages: [
--- a/app/prisma/seedDashboard.ts
+++ b/app/prisma/seedDashboard.ts
--- a/app/prisma/seedTwitterSentiment.ts
+++ b/app/prisma/seedTwitterSentiment.ts
@@ -2,6 +2,7 @@ import { prisma } from "~/server/db";
 import dedent from "dedent";
 import fs from "fs";
 import { parse } from "csv-parse/sync";
+import { promptConstructorVersion } from "~/promptConstructor/version";

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

@@ -85,8 +86,8 @@ await prisma.promptVariant.createMany({
      sortIndex: 0,
      model: "gpt-3.5-turbo-0613",
      modelProvider: "openai/ChatCompletion",
-      constructFnVersion: 1,
-      constructFn: dedent`
+      promptConstructorVersion,
+      promptConstructor: dedent`
          definePrompt("openai/ChatCompletion", {
            model: "gpt-3.5-turbo-0613",
            messages: [
--- a/app/public/favicon.ico
+++ b/app/public/favicon.ico
--- a/app/public/favicons/android-chrome-192x192.png
+++ b/app/public/favicons/android-chrome-192x192.png
--- a/app/public/favicons/android-chrome-512x512.png
+++ b/app/public/favicons/android-chrome-512x512.png
--- a/app/public/favicons/apple-touch-icon.png
+++ b/app/public/favicons/apple-touch-icon.png
--- a/app/public/favicons/browserconfig.xml
+++ b/app/public/favicons/browserconfig.xml
--- a/app/public/favicons/favicon-16x16.png
+++ b/app/public/favicons/favicon-16x16.png
--- a/app/public/favicons/favicon-32x32.png
+++ b/app/public/favicons/favicon-32x32.png
--- a/app/public/favicons/favicon.ico
+++ b/app/public/favicons/favicon.ico
--- a/app/public/favicons/mstile-150x150.png
+++ b/app/public/favicons/mstile-150x150.png
--- a/app/public/favicons/safari-pinned-tab.svg
+++ b/app/public/favicons/safari-pinned-tab.svg
--- a/app/public/favicons/site.webmanifest
+++ b/app/public/favicons/site.webmanifest
--- a/app/public/fonts/Inconsolata_SemiExpanded-Medium.ttf
+++ b/app/public/fonts/Inconsolata_SemiExpanded-Medium.ttf
--- a/app/public/logo.svg
+++ b/app/public/logo.svg
--- a/app/public/og.png
+++ b/app/public/og.png
--- a/app/run-prod.sh
+++ b/app/run-prod.sh
@@ -5,6 +5,9 @@ set -e
 echo "Migrating the database"
 pnpm prisma migrate deploy

+echo "Migrating promptConstructors"
+pnpm tsx src/promptConstructor/migrate.ts
+
 echo "Starting the server"

 pnpm concurrently --kill-others \
--- a/app/sentry.client.config.ts
+++ b/app/sentry.client.config.ts
@@ -0,0 +1,33 @@
+// This file configures the initialization of Sentry on the client.
+// The config you add here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+import { env } from "~/env.mjs";
+
+if (env.NEXT_PUBLIC_SENTRY_DSN) {
+  Sentry.init({
+    dsn: env.NEXT_PUBLIC_SENTRY_DSN,
+
+    // Adjust this value in production, or use tracesSampler for greater control
+    tracesSampleRate: 1,
+
+    // Setting this option to true will print useful information to the console while you're setting up Sentry.
+    debug: false,
+
+    replaysOnErrorSampleRate: 1.0,
+
+    // This sets the sample rate to be 10%. You may want this to be 100% while
+    // in development and sample at a lower rate in production
+    replaysSessionSampleRate: 0.1,
+
+    // You can remove this option if you're not planning to use the Sentry Session Replay feature:
+    integrations: [
+      new Sentry.Replay({
+        // Additional Replay configuration goes in here, for example:
+        maskAllText: true,
+        blockAllMedia: true,
+      }),
+    ],
+  });
+}
--- a/app/sentry.edge.config.ts
+++ b/app/sentry.edge.config.ts
@@ -0,0 +1,19 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+import { env } from "~/env.mjs";
+
+if (env.NEXT_PUBLIC_SENTRY_DSN) {
+  Sentry.init({
+    dsn: env.NEXT_PUBLIC_SENTRY_DSN,
+
+    // Adjust this value in production, or use tracesSampler for greater control
+    tracesSampleRate: 1,
+
+    // Setting this option to true will print useful information to the console while you're setting up Sentry.
+    debug: false,
+  });
+}
--- a/app/sentry.server.config.ts
+++ b/app/sentry.server.config.ts
@@ -0,0 +1,18 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+import { env } from "~/env.mjs";
+
+if (env.NEXT_PUBLIC_SENTRY_DSN) {
+  Sentry.init({
+    dsn: env.NEXT_PUBLIC_SENTRY_DSN,
+
+    // Adjust this value in production, or use tracesSampler for greater control
+    tracesSampleRate: 1,
+
+    // Setting this option to true will print useful information to the console while you're setting up Sentry.
+    debug: false,
+  });
+}
--- a/app/src/components/AutoResizeTextArea.tsx
+++ b/app/src/components/AutoResizeTextArea.tsx
--- a/app/src/components/ChangeModelModal/ChangeModelModal.tsx
+++ b/app/src/components/ChangeModelModal/ChangeModelModal.tsx
@@ -68,7 +68,7 @@ export const ChangeModelModal = ({
      return;
    await replaceVariantMutation.mutateAsync({
      id: variant.id,
-      constructFn: modifiedPromptFn,
+      promptConstructor: modifiedPromptFn,
      streamScenarios: visibleScenarios,
    });
    await utils.promptVariants.list.invalidate();
@@ -107,7 +107,7 @@ export const ChangeModelModal = ({
            <ModelSearch selectedModel={selectedModel} setSelectedModel={setSelectedModel} />
            {isString(modifiedPromptFn) && (
              <CompareFunctions
-                originalFunction={variant.constructFn}
+                originalFunction={variant.promptConstructor}
                newFunction={modifiedPromptFn}
                leftTitle={originalLabel}
                rightTitle={convertedLabel}
--- a/app/src/components/ChangeModelModal/ModelSearch.tsx
+++ b/app/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)}
--- a/app/src/components/ChangeModelModal/ModelStatsCard.tsx
+++ b/app/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
--- a/app/src/components/CopiableCode.tsx
+++ b/app/src/components/CopiableCode.tsx
@@ -0,0 +1,40 @@
+import { HStack, Icon, IconButton, Tooltip, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import { MdContentCopy } from "react-icons/md";
+import { useHandledAsyncCallback } from "~/utils/hooks";
+
+const CopiableCode = ({ code }: { code: string }) => {
+  const [copied, setCopied] = useState(false);
+
+  const [copyToClipboard] = useHandledAsyncCallback(async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+  }, [code]);
+  return (
+    <HStack
+      backgroundColor="blackAlpha.800"
+      color="white"
+      borderRadius={4}
+      padding={3}
+      w="full"
+      justifyContent="space-between"
+    >
+      <Text fontFamily="inconsolata" fontWeight="bold" letterSpacing={0.5}>
+        {code}
+      </Text>
+      <Tooltip closeOnClick={false} label={copied ? "Copied!" : "Copy to clipboard"}>
+        <IconButton
+          aria-label="Copy"
+          icon={<Icon as={MdContentCopy} boxSize={5} />}
+          size="xs"
+          colorScheme="white"
+          variant="ghost"
+          onClick={copyToClipboard}
+          onMouseLeave={() => setCopied(false)}
+        />
+      </Tooltip>
+    </HStack>
+  );
+};
+
+export default CopiableCode;
--- a/src/components/RefinePromptModal/CustomInstructionsInput.tsx
+++ b/src/components/RefinePromptModal/CustomInstructionsInput.tsx
@@ -1,18 +1,29 @@
-import { Button, Spinner, InputGroup, InputRightElement, Icon, HStack } from "@chakra-ui/react";
+import {
+  Button,
+  Spinner,
+  InputGroup,
+  InputRightElement,
+  Icon,
+  HStack,
+  type InputGroupProps,
+} from "@chakra-ui/react";
 import { IoMdSend } from "react-icons/io";
-import AutoResizeTextArea from "../AutoResizeTextArea";
+import AutoResizeTextArea from "./AutoResizeTextArea";

 export const CustomInstructionsInput = ({
  instructions,
  setInstructions,
  loading,
  onSubmit,
+  placeholder = "Send custom instructions",
+  ...props
 }: {
  instructions: string;
  setInstructions: (instructions: string) => void;
  loading: boolean;
  onSubmit: () => void;
-}) => {
+  placeholder?: string;
+} & InputGroupProps) => {
  return (
    <InputGroup
      size="md"
@@ -22,6 +33,7 @@ export const CustomInstructionsInput = ({
      borderRadius={8}
      alignItems="center"
      colorScheme="orange"
+      {...props}
    >
      <AutoResizeTextArea
        value={instructions}
@@ -33,7 +45,7 @@ export const CustomInstructionsInput = ({
            onSubmit();
          }
        }}
-        placeholder="Send custom instructions"
+        placeholder={placeholder}
        py={4}
        pl={4}
        pr={12}
--- a/app/src/components/ExperimentSettingsDrawer/DeleteButton.tsx
+++ b/app/src/components/ExperimentSettingsDrawer/DeleteButton.tsx
@@ -14,6 +14,7 @@ import {
 import { useRouter } from "next/router";
 import { useRef } from "react";
 import { BsTrash } from "react-icons/bs";
+import { useAppStore } from "~/state/store";
 import { api } from "~/utils/api";
 import { useExperiment, useHandledAsyncCallback } from "~/utils/hooks";

@@ -23,6 +24,8 @@ export const DeleteButton = () => {
  const utils = api.useContext();
  const router = useRouter();

+  const closeDrawer = useAppStore((s) => s.closeDrawer);
+
  const { isOpen, onOpen, onClose } = useDisclosure();
  const cancelRef = useRef<HTMLButtonElement>(null);

@@ -31,6 +34,8 @@ export const DeleteButton = () => {
    await mutation.mutateAsync({ id: experiment.data.id });
    await utils.experiments.list.invalidate();
    await router.push({ pathname: "/experiments" });
+    closeDrawer();
+
    onClose();
  }, [mutation, experiment.data?.id, router]);

--- a/app/src/components/ExperimentSettingsDrawer/ExperimentSettingsDrawer.tsx
+++ b/app/src/components/ExperimentSettingsDrawer/ExperimentSettingsDrawer.tsx
--- a/app/src/components/Favicon.tsx
+++ b/app/src/components/Favicon.tsx
--- a/app/src/components/OutputsTable/AddVariantButton.tsx
+++ b/app/src/components/OutputsTable/AddVariantButton.tsx
--- a/app/src/components/OutputsTable/EditEvaluations.tsx
+++ b/app/src/components/OutputsTable/EditEvaluations.tsx
--- a/app/src/components/OutputsTable/EditScenarioVars.tsx
+++ b/app/src/components/OutputsTable/EditScenarioVars.tsx
--- a/app/src/components/OutputsTable/FloatingLabelInput.tsx
+++ b/app/src/components/OutputsTable/FloatingLabelInput.tsx
--- a/app/src/components/OutputsTable/OutputCell/OutputCell.tsx
+++ b/app/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, cell],
+  );
+
  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>
  );
 }
--- a/app/src/components/OutputsTable/OutputCell/OutputStats.tsx
+++ b/app/src/components/OutputsTable/OutputCell/OutputStats.tsx
@@ -23,8 +23,15 @@ export const OutputStats = ({
  const completionTokens = modelResponse.completionTokens;

  return (
-    <HStack w="full" align="center" color="gray.500" fontSize="2xs" mt={{ base: 0, md: 1 }}>
-      <HStack flex={1}>
+    <HStack
+      w="full"
+      align="center"
+      color="gray.500"
+      fontSize="2xs"
+      mt={{ base: 0, md: 1 }}
+      alignItems="flex-end"
+    >
+      <HStack flex={1} flexWrap="wrap">
        {modelResponse.outputEvaluations.map((evaluation) => {
          const passed = evaluation.result > 0.5;
          return (
--- a/app/src/components/OutputsTable/OutputCell/PromptModal.tsx
+++ b/app/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>
+  );
+}
--- a/app/src/components/OutputsTable/OutputCell/ResponseLog.tsx
+++ b/app/src/components/OutputsTable/OutputCell/ResponseLog.tsx
--- a/app/src/components/OutputsTable/OutputCell/RetryCountdown.tsx
+++ b/app/src/components/OutputsTable/OutputCell/RetryCountdown.tsx
--- a/app/src/components/OutputsTable/OutputCell/TopActions.tsx
+++ b/app/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" spacing={1}>
+      {cell && (
+        <>
+          <Tooltip label="See Prompt">
+            <IconButton
+              aria-label="See Prompt"
+              icon={<Icon as={BsInfoCircle} boxSize={3.5} />}
+              onClick={modalDisclosure.onOpen}
+              size="xs"
+              colorScheme="gray"
+              color="gray.500"
+              variant="ghost"
+            />
+          </Tooltip>
+          <ExpandedModal cell={cell} disclosure={modalDisclosure} />
+        </>
+      )}
+      {canModify && (
+        <Tooltip label="Refetch output">
+          <IconButton
+            size="xs"
+            color="gray.500"
+            variant="ghost"
+            cursor="pointer"
+            onClick={refetchOutput}
+            aria-label="refetch output"
+            icon={<Icon as={refetchingOutput ? Spinner : BsArrowClockwise} boxSize={4} />}
+          />
+        </Tooltip>
+      )}
+    </HStack>
+  );
+};
--- a/app/src/components/OutputsTable/ScenarioEditor.tsx
+++ b/app/src/components/OutputsTable/ScenarioEditor.tsx
@@ -1,9 +1,8 @@
-import { useEffect, 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,
@@ -12,14 +11,12 @@ import {
  Icon,
  IconButton,
  Spinner,
-  Stack,
+  Text,
  Tooltip,
  VStack,
-  Text,
 } from "@chakra-ui/react";
-import { cellPadding } from "../constants";
 import { BsArrowsAngleExpand, BsX } from "react-icons/bs";
-import { RiDraggable } from "react-icons/ri";
+import { cellPadding } from "../constants";
 import { FloatingLabelInput } from "./FloatingLabelInput";
 import { ScenarioEditorModal } from "./ScenarioEditorModal";

@@ -115,60 +112,44 @@ export default function ScenarioEditor({
        onDrop={onReorder}
        backgroundColor={isDragTarget ? "gray.100" : "transparent"}
      >
-        {canModify && props.canHide && (
-          <Stack
-            alignSelf="flex-start"
-            opacity={props.hovered ? 1 : 0}
-            spacing={0}
-            ml={-cellPadding.x}
-          >
-            <Tooltip label="Hide scenario" hasArrow>
-              {/* for some reason the tooltip can't position itself properly relative to the icon without the wrapping box */}
-              <Button
-                variant="unstyled"
-                color="gray.400"
-                height="unset"
-                width="unset"
-                minW="unset"
-                onClick={onHide}
-                _hover={{
-                  color: "gray.800",
-                  cursor: "pointer",
-                }}
-              >
-                <Icon as={hidingInProgress ? Spinner : BsX} boxSize={hidingInProgress ? 4 : 6} />
-              </Button>
-            </Tooltip>
-            <Icon
-              as={RiDraggable}
-              boxSize={6}
-              color="gray.400"
-              _hover={{ color: "gray.800", cursor: "pointer" }}
-            />
-          </Stack>
-        )}
-
        {variableLabels.length === 0 ? (
          <Box color="gray.500">
            {vars.data ? "No scenario variables configured" : "Loading..."}
          </Box>
        ) : (
          <VStack spacing={4} flex={1} py={2}>
-            <HStack justifyContent="space-between" w="100%">
-              <Text color="gray.500">Scenario</Text>
-              <IconButton
-                className="fullscreen-toggle"
-                aria-label="Maximize"
-                icon={<BsArrowsAngleExpand />}
-                onClick={() => setScenarioEditorModalOpen(true)}
-                boxSize={6}
-                borderRadius={4}
-                p={1.5}
-                minW={0}
-                colorScheme="gray"
-                color="gray.500"
-                variant="ghost"
-              />
+            <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] ?? "";
--- a/app/src/components/OutputsTable/ScenarioEditorModal.tsx
+++ b/app/src/components/OutputsTable/ScenarioEditorModal.tsx
@@ -1,7 +1,6 @@
 import {
  Button,
  HStack,
-  Icon,
  Modal,
  ModalBody,
  ModalCloseButton,
@@ -14,7 +13,6 @@ import {
  VStack,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
-import { BsFileTextFill } from "react-icons/bs";
 import { isEqual } from "lodash-es";

 import { api } from "~/utils/api";
@@ -60,8 +58,6 @@ export const ScenarioEditorModal = ({
    await utils.scenarios.list.invalidate();
  }, [mutation, values]);

-  console.log("scenario", scenario);
-
  const vars = api.templateVars.list.useQuery({ experimentId: experiment.data?.id ?? "" });
  const variableLabels = vars.data?.map((v) => v.label) ?? [];

@@ -73,12 +69,7 @@ export const ScenarioEditorModal = ({
    >
      <ModalOverlay />
      <ModalContent w={1200}>
-        <ModalHeader>
-          <HStack>
-            <Icon as={BsFileTextFill} />
-            <Text>Scenario</Text>
-          </HStack>
-        </ModalHeader>
+        <ModalHeader />
        <ModalCloseButton />
        <ModalBody maxW="unset">
          <VStack spacing={8}>
--- a/app/src/components/OutputsTable/ScenarioPaginator.tsx
+++ b/app/src/components/OutputsTable/ScenarioPaginator.tsx
@@ -0,0 +1,21 @@
+import { useScenarios } from "~/utils/hooks";
+import Paginator from "../Paginator";
+
+const ScenarioPaginator = () => {
+  const { data } = useScenarios();
+
+  if (!data) return null;
+
+  const { scenarios, startIndex, lastPage, count } = data;
+
+  return (
+    <Paginator
+      numItemsLoaded={scenarios.length}
+      startIndex={startIndex}
+      lastPage={lastPage}
+      count={count}
+    />
+  );
+};
+
+export default ScenarioPaginator;
--- a/app/src/components/OutputsTable/ScenarioRow.tsx
+++ b/app/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>
      ))}
    </>
--- a/app/src/components/OutputsTable/ScenariosHeader.tsx
+++ b/app/src/components/OutputsTable/ScenariosHeader.tsx
--- a/app/src/components/OutputsTable/VariantEditor.tsx
+++ b/app/src/components/OutputsTable/VariantEditor.tsx
@@ -47,7 +47,7 @@ export default function VariantEditor(props: { variant: PromptVariant }) {
    return () => window.removeEventListener("keydown", handleEsc);
  }, [isFullscreen, toggleFullscreen]);

-  const lastSavedFn = props.variant.constructFn;
+  const lastSavedFn = props.variant.promptConstructor;

  const modifierKey = useModifierKeyLabel();

@@ -96,7 +96,7 @@ export default function VariantEditor(props: { variant: PromptVariant }) {

    const resp = await replaceVariant.mutateAsync({
      id: props.variant.id,
-      constructFn: currentFn,
+      promptConstructor: currentFn,
      streamScenarios: visibleScenarios,
    });
    if (resp.status === "error") {
--- a/app/src/components/OutputsTable/VariantStats.tsx
+++ b/app/src/components/OutputsTable/VariantStats.tsx
@@ -43,12 +43,12 @@ export default function VariantStats(props: { variant: PromptVariant }) {
  return (
    <HStack
      justifyContent="space-between"
-      alignItems="center"
+      alignItems="flex-end"
      mx="2"
      fontSize="xs"
      py={cellPadding.y}
    >
-      <HStack px={cellPadding.x}>
+      <HStack px={cellPadding.x} flexWrap="wrap">
        {showNumFinished && (
          <Text>
            {data.outputCount} / {data.scenarioCount}
--- a/app/src/components/OutputsTable/index.tsx
+++ b/app/src/components/OutputsTable/index.tsx
@@ -35,7 +35,7 @@ export default function OutputsTable({ experimentId }: { experimentId: string |
      pb={24}
      pl={8}
      display="grid"
-      gridTemplateColumns={`250px repeat(${variants.data.length}, minmax(300px, 1fr)) auto`}
+      gridTemplateColumns={`250px repeat(${variants.data.length}, minmax(320px, 1fr)) auto`}
      sx={{
        "> *": {
          borderColor: "gray.300",
--- a/app/src/components/OutputsTable/styles.ts
+++ b/app/src/components/OutputsTable/styles.ts
--- a/app/src/components/OutputsTable/types.ts
+++ b/app/src/components/OutputsTable/types.ts
--- a/src/components/OutputsTable/ScenarioPaginator.tsx
+++ b/src/components/OutputsTable/ScenarioPaginator.tsx
@@ -5,15 +5,20 @@ import {
  BsChevronLeft,
  BsChevronRight,
 } from "react-icons/bs";
-import { usePage, useScenarios } from "~/utils/hooks";
+import { usePage } from "~/utils/hooks";

-const ScenarioPaginator = () => {
+const Paginator = ({
+  numItemsLoaded,
+  startIndex,
+  lastPage,
+  count,
+}: {
+  numItemsLoaded: number;
+  startIndex: number;
+  lastPage: number;
+  count: number;
+}) => {
  const [page, setPage] = usePage();
-  const { data } = useScenarios();
-
-  if (!data) return null;
-
-  const { scenarios, startIndex, lastPage, count } = data;

  const nextPage = () => {
    if (page < lastPage) {
@@ -49,7 +54,7 @@ const ScenarioPaginator = () => {
        icon={<BsChevronLeft />}
      />
      <Box>
-        {startIndex}-{startIndex + scenarios.length - 1} / {count}
+        {startIndex}-{startIndex + numItemsLoaded - 1} / {count}
      </Box>
      <IconButton
        variant="ghost"
@@ -71,4 +76,4 @@ const ScenarioPaginator = () => {
  );
 };

-export default ScenarioPaginator;
+export default Paginator;
--- a/app/src/components/RefinePromptModal/CompareFunctions.tsx
+++ b/app/src/components/RefinePromptModal/CompareFunctions.tsx
--- a/app/src/components/RefinePromptModal/RefineAction.tsx
+++ b/app/src/components/RefinePromptModal/RefineAction.tsx
--- a/app/src/components/RefinePromptModal/RefinePromptModal.tsx
+++ b/app/src/components/RefinePromptModal/RefinePromptModal.tsx
@@ -20,7 +20,7 @@ import { useHandledAsyncCallback, useVisibleScenarioIds } from "~/utils/hooks";
 import { type PromptVariant } from "@prisma/client";
 import { useState } from "react";
 import CompareFunctions from "./CompareFunctions";
-import { CustomInstructionsInput } from "./CustomInstructionsInput";
+import { CustomInstructionsInput } from "../CustomInstructionsInput";
 import { RefineAction } from "./RefineAction";
 import { isObject, isString } from "lodash-es";
 import { type RefinementAction, type SupportedProvider } from "~/modelProviders/types";
@@ -73,7 +73,7 @@ export const RefinePromptModal = ({
      return;
    await replaceVariantMutation.mutateAsync({
      id: variant.id,
-      constructFn: refinedPromptFn,
+      promptConstructor: refinedPromptFn,
      streamScenarios: visibleScenarios,
    });
    await utils.promptVariants.list.invalidate();
@@ -97,7 +97,7 @@ export const RefinePromptModal = ({
        <ModalCloseButton />
        <ModalBody maxW="unset">
          <VStack spacing={8}>
-            <VStack spacing={4}>
+            <VStack spacing={4} w="full">
              {Object.keys(refinementActions).length && (
                <>
                  <SimpleGrid columns={{ base: 1, md: 2 }} spacing={8}>
@@ -122,11 +122,11 @@ export const RefinePromptModal = ({
                instructions={instructions}
                setInstructions={setInstructions}
                loading={modificationInProgress}
-                onSubmit={getModifiedPromptFn}
+                onSubmit={() => getModifiedPromptFn()}
              />
            </VStack>
            <CompareFunctions
-              originalFunction={variant.constructFn}
+              originalFunction={variant.promptConstructor}
              newFunction={isString(refinedPromptFn) ? refinedPromptFn : undefined}
              maxH="40vh"
            />
--- a/app/src/components/StatsCard.tsx
+++ b/app/src/components/StatsCard.tsx
@@ -0,0 +1,26 @@
+import { VStack, HStack, type StackProps, Text, Divider } from "@chakra-ui/react";
+import Link, { type LinkProps } from "next/link";
+
+const StatsCard = ({
+  title,
+  href,
+  children,
+  ...rest
+}: { title: string; href: string } & StackProps & LinkProps) => {
+  return (
+    <VStack flex={1} borderWidth={1} padding={4} borderRadius={4} borderColor="gray.300" {...rest}>
+      <HStack w="full" justifyContent="space-between">
+        <Text fontSize="md" fontWeight="bold">
+          {title}
+        </Text>
+        <Link href={href}>
+          <Text color="blue">View all</Text>
+        </Link>
+      </HStack>
+      <Divider />
+      {children}
+    </VStack>
+  );
+};
+
+export default StatsCard;
--- a/app/src/components/VariantHeader/VariantHeader.tsx
+++ b/app/src/components/VariantHeader/VariantHeader.tsx
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Kyle Corbitt	f09dfe18be	Support Claude Instant 1.2	2023-08-09 14:43:54 -07:00
Kyle Corbitt	868d7084f0	Merge pull request #123 from OpenPipe/add-openapi Add Logged Calls and projects	2023-08-09 14:37:17 -07:00
Kyle Corbitt	f6f04e537e	project menu updates	2023-08-09 14:26:15 -07:00
David Corbitt	4feb3e5829	Avoid adding extra day to usage statistics	2023-08-09 01:22:04 -07:00
David Corbitt	c62ced867a	Increase dashboard seeding number	2023-08-09 01:21:42 -07:00
David Corbitt	7bb414026e	Fix typescript error	2023-08-08 18:30:02 -07:00
David Corbitt	1b2b6c1456	Send organizationId in fork mutation	2023-08-08 18:19:59 -07:00
David Corbitt	760bfbbe32	Fix issue with timezones	2023-08-08 18:15:42 -07:00
David Corbitt	3424aa36ba	Automatically push personalOrg into list	2023-08-08 17:20:20 -07:00
David Corbitt	ded86cba08	Add dashboard seed command	2023-08-08 16:39:42 -07:00
David Corbitt	65a0f9065f	Backfill usage statistics	2023-08-08 15:26:14 -07:00
David Corbitt	2861c64428	Fix prettier	2023-08-08 14:31:08 -07:00
David Corbitt	ca33bb0b08	Add beta to logged calls	2023-08-08 14:27:14 -07:00
David Corbitt	72e680e77c	Replace USE_OPENPIPE with OPENPIPE_API_KEY	2023-08-08 13:57:10 -07:00
David Corbitt	5dd7e67396	Make project options full width	2023-08-08 13:50:57 -07:00
David Corbitt	fd286f6874	Fix prettier	2023-08-08 13:47:54 -07:00
David Corbitt	7a4aa5f0aa	Use openpipe optionally in app	2023-08-08 13:45:46 -07:00
David Corbitt	cb791e3c73	Replace home page with logged calls page	2023-08-08 13:37:55 -07:00
David Corbitt	a2c322ff43	Add requireAuth to AppShell	2023-08-08 13:20:02 -07:00
David Corbitt	a2ace63f25	Hackily fix seeding	2023-08-08 12:24:14 -07:00
David Corbitt	41d06596cb	Fix prettier	2023-08-08 12:09:09 -07:00
David Corbitt	49c68fdbf2	Upsert personalOrg when listing orgs	2023-08-08 12:07:18 -07:00
David Corbitt	6188f55569	Fix dashboard stats	2023-08-08 11:49:08 -07:00
David Corbitt	ea91d692d3	Use crypto-random-string	2023-08-08 11:45:03 -07:00
David Corbitt	ae7acbfdd4	Require user to be able to view organization to get it	2023-08-08 11:40:58 -07:00
David Corbitt	b9396e63cc	Change /settings to /project/settings	2023-08-08 11:34:15 -07:00
David Corbitt	753a48f6e9	Use boxSize on ProjectBreadcrumbContents	2023-08-08 11:32:13 -07:00
David Corbitt	bd7c8b43b0	utlilize useHandledAsyncCallback in CopiableCode	2023-08-08 11:27:59 -07:00
David Corbitt	a1249f17c9	Add basic dashboard to homepage	2023-08-08 11:18:35 -07:00
David Corbitt	6f8db40f74	Fix logging	2023-08-08 11:12:04 -07:00
David Corbitt	8c5345a291	Allow user to open project menu on mobile	2023-08-08 10:20:10 -07:00
David Corbitt	f47010a6e7	Fix prettier	2023-08-07 21:45:36 -07:00
David Corbitt	6d32f1c06e	Allow admins to delete projects	2023-08-07 21:45:21 -07:00
David Corbitt	8fed9730da	Send api token properly	2023-08-07 21:04:38 -07:00
David Corbitt	0f9a83cf45	Assign experiments and datasets to correct org	2023-08-07 19:10:27 -07:00
David Corbitt	9f17d98736	Attempt to log (without api key)	2023-08-07 17:12:09 -07:00
David Corbitt	74029e5478	Close project menu after navigating	2023-08-07 15:21:03 -07:00
David Corbitt	d220cd30e8	Allow user to change projects	2023-08-07 15:18:23 -07:00
David Corbitt	c0f10cd522	Remove comment	2023-08-07 14:12:22 -07:00
David Corbitt	dc497dbd99	Query experiments and datasets by org	2023-08-07 14:10:32 -07:00
David Corbitt	f8f855adf4	Theme default divider	2023-08-07 14:10:01 -07:00
David Corbitt	8f49bace53	Backfill api keys	2023-08-07 13:08:33 -07:00
David Corbitt	c9f59bfb79	Add project to breadcrumb	2023-08-07 11:50:59 -07:00
David Corbitt	57166e96b4	Fix project settings IconLink	2023-08-07 11:21:59 -07:00
David Corbitt	1a838824ae	Use PageHeaderContainer for all breadcrumbs	2023-08-07 11:16:54 -07:00
David Corbitt	6b304f8456	Show selected org	2023-08-06 23:23:20 -07:00
David Corbitt	a53d70d8b2	Add basic typescript lib	2023-08-06 17:29:06 -07:00
David Corbitt	109a9ddb1e	Add js client lib	2023-08-06 13:50:43 -07:00
David Corbitt	7f8b574c9f	Add checkCache and report routes	2023-08-05 20:37:16 -07:00
Kyle Corbitt	9e859c199e	two LoggedCall tables	2023-08-05 17:56:51 -07:00
David Corbitt	deabbb094b	condense CellOptions	2023-08-05 16:01:09 -07:00
Kyle Corbitt	7637b94ea7	schema changes	2023-08-05 13:49:03 -07:00
Kyle Corbitt	721f1726eb	Merge pull request #122 from OpenPipe/app-dir Move app to app/ subdir	2023-08-05 10:08:31 -07:00
Kyle Corbitt	cfeb4dfa92	run render and CI in app subdir	2023-08-05 10:06:06 -07:00
Kyle Corbitt	21ef67ed4c	move app to app/ subdir	2023-08-05 10:00:10 -07:00
Kyle Corbitt	7707d451e0	Merge pull request #121 from OpenPipe/prompt-constructor Rename constructFn to promptConstructor	2023-08-05 09:32:35 -07:00
Kyle Corbitt	d82782adb4	Number experiments based only on current org Previously we were naming each new experiment based on the highest existing sort index globally, which doesn't make sense. Better to just use the local one.	2023-08-05 09:26:55 -07:00
Kyle Corbitt	e10589abff	Rename constructFn to promptConstructor It's a clearer name. Also reorganize the filesystem so all the promptConstructor related files are colocated.	2023-08-04 23:09:39 -07:00
Kyle Corbitt	01dcbfc896	Rename 'anthropic' to 'anthropic/completion' (#120 ) More consistency in the way we name our model providers.	2023-08-04 22:07:23 -07:00
Kyle Corbitt	50e0b34d30	newer replicate models	2023-08-04 21:18:52 -07:00
arcticfly	44bb9fc58d	Add outputs to entry generation (#119 )	2023-08-04 16:14:49 -07:00
David Corbitt	c0d3784f0c	Merge branch 'main' of github.com:corbt/prompt-lab	2023-08-04 16:06:45 -07:00
David Corbitt	e522026b71	Embold star	2023-08-04 16:06:34 -07:00
arcticfly	46b13d85b7	Update README.md	2023-08-04 12:00:38 -07:00
arcticfly	c12aa82a3e	Update README.md	2023-08-04 11:58:47 -07:00
arcticfly	b98bce8944	Add Datasets (#118 ) * Add dataset (without entries) * Fix dataset hook * Add dataset rows * Add buttons to import/generate data * Add GenerateDataModal * Autogenerate and save data * Fix prettier * Fix types * Add dataset pagination * Fix prettier * Use useDisclosure * Allow generate data modal fadeaway * hide/show data in env var * Fix prettier	2023-08-04 11:52:03 -07:00
arcticfly	f045c80dfd	Update README.md	2023-08-03 18:31:24 -07:00
arcticfly	3b460dff2a	Update README.md	2023-08-03 18:16:54 -07:00
David Corbitt	5fa5732804	Move demo up	2023-08-03 12:02:10 -07:00
arcticfly	28e6e2b9df	Wrap evals (#117 ) * Wrap eval outputs * Fix prettier * Decrease variant minWidth	2023-08-03 11:58:39 -07:00
Kyle Corbitt	54d1df4442	upload sourcemaps	2023-08-03 11:53:13 -07:00
David Corbitt	f69c2b5f23	Fix prettier	2023-08-03 11:48:05 -07:00
David Corbitt	51f0666f6a	Add table of contents to README	2023-08-03 11:40:29 -07:00
Kyle Corbitt	b67d974f4c	Merge pull request #116 from OpenPipe/sentry Add Sentry	2023-08-03 10:23:22 -07:00
Kyle Corbitt	33fb2db981	Add Sentry Visibility into errors in prod	2023-08-03 10:18:17 -07:00
Kyle Corbitt	e391379c3e	Merge pull request #115 from OpenPipe/admin Add admin role	2023-08-03 09:39:00 -07:00
Kyle Corbitt	8d1609dd52	Add admin role Allow privileged users to administer the system.	2023-08-03 09:35:13 -07:00
David Corbitt	f3380f302d	Simplify world champs screen	2023-08-02 23:57:44 -07:00
David Corbitt	3dba9c7ee1	Update posthog version	2023-08-02 23:30:15 -07:00
David Corbitt	e0e4f7a9d6	Fix mobile table padding	2023-08-02 23:08:49 -07:00
arcticfly	48293dc579	Add link to demo experiment (#114 )	2023-08-02 22:50:09 -07:00
arcticfly	38ac6243a0	Add server posthog events (#113 )	2023-08-02 14:21:07 -07:00
arcticfly	bd2f58e2a5	Improve posthog (#112 ) * Add SessionIdentifier * Identify by id * Rewrite posthog events * Add NEXT_PUBLIC_HOST to dockerfile * Fix default url * Move SessionIdentifier into analytics file	2023-08-02 13:30:25 -07:00
Kyle Corbitt	808e47c6b9	Merge pull request #111 from OpenPipe/gh-btn Update TopNavbar component to include a GitHub button	2023-08-02 10:15:26 -07:00
Kyle Corbitt	5945f0ed6b	Update TopNavbar component to include a GitHub button	2023-08-02 10:11:41 -07:00
arcticfly	6bc7d76d15	Update README.md	2023-08-02 00:59:05 -07:00
arcticfly	e9ed173e34	Update README.md	2023-08-02 00:57:24 -07:00
arcticfly	75d58d7021	Update README.md	2023-08-02 00:56:19 -07:00
arcticfly	896c8c5c57	Update README.md	2023-08-02 00:51:57 -07:00
arcticfly	ec5547d0b0	Update README.md with new features and gifs (#110 )	2023-08-02 00:46:48 -07:00
Kyle Corbitt	77e4e3b8c3	mobile styles	2023-08-01 23:08:35 -07:00
Kyle Corbitt	a1b03ddad1	Merge pull request #109 from OpenPipe/debug-prompts Add debug modal for output cells	2023-08-01 22:51:39 -07:00
Kyle Corbitt	6be32bea4c	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.	2023-08-01 22:49:38 -07:00
arcticfly	72c70e2a55	Improve conversion to/from Claude (#108 ) * Increase min width of prompt variant * Increase width of custom instructions input * Start recording API docs * Provide better instructions for converting to/from Claude * Fix prettier	2023-08-01 21:03:23 -07:00
arcticfly	026532f2c2	Model selection styling changes (#107 ) * Model selection styling changes * Fix prettier	2023-08-01 18:45:15 -07:00
Kyle Corbitt	f88538336f	fix types	2023-08-01 18:31:34 -07:00
Kyle Corbitt	3c7178115e	Merge pull request #105 from OpenPipe/bump-models Bump Replicate models	2023-08-01 18:26:16 -07:00
Kyle Corbitt	292aaf090a	Merge pull request #106 from OpenPipe/dark-mode Update global background color in ChakraThemeProvider	2023-08-01 18:25:57 -07:00
Kyle Corbitt	d9915dc41b	Update global background color in ChakraThemeProvider	2023-08-01 18:25:29 -07:00
David Corbitt	3560bcff14	Correct time stamps on waiting message	2023-08-01 18:09:23 -07:00