From 6ff3b4d3d4e0c911a86c2c738c367894099b4224 Mon Sep 17 00:00:00 2001
From: Gerard <clos.gerard@gmail.com>
Date: Mon, 30 Sep 2024 14:28:07 +0200
Subject: [PATCH] feature: better evaluation editor (#308)

Instead of a random list of inputs we display a collapsible box with the
contents of the provider log.
---
 .../Editor/Playground/Preview/index.tsx       |   1 -
 .../Variables/components/CopyButton.tsx       |  16 +++
 .../Variables/components/InputSection.tsx     |  31 +++++
 .../Variables/components/MessagesList.tsx     |  14 ++
 .../components/PinnedDocumentation.tsx        |  51 +++++++
 .../Variables/components/TooltipInfo.tsx      |  13 ++
 .../Variables/components/VariableSection.tsx  |  72 ++++++++++
 .../Variables/hooks/useVariablesData.tsx      | 125 ++++++++++++++++++
 .../Editor/Playground/Variables/index.tsx     |  60 +++++++++
 .../Playground/Variables/utils/constants.ts   |  10 ++
 .../Editor/Playground/index.tsx               |  79 +++++------
 .../EvaluationEditor/Editor/index.tsx         |   2 +-
 .../src/app/api/documentLogs/[id]/route.ts    |   1 +
 .../api/documentLogs/uuids/[uuid]/route.ts    |  42 ++++++
 .../components/ProjectDocumentSelector.tsx    |   4 +-
 .../AppLayout/Header/UsageIndicator/index.tsx |   2 +-
 .../src/presenters/providerLogPresenter.ts    |   7 +-
 .../web/src/stores/documentLogWithMetadata.ts |  31 +++++
 packages/core/src/services/evaluations/run.ts |   8 +-
 .../services/providerLogs/buildResponse.ts    |  10 ++
 .../core/src/services/providerLogs/index.ts   |   1 +
 .../web-ui/src/ds/atoms/CodeBlock/index.tsx   |  20 ++-
 packages/web-ui/src/ds/atoms/Icons/index.tsx  |  10 ++
 .../web-ui/src/ds/atoms/Popover/index.tsx     |  26 ++--
 .../web-ui/src/ds/atoms/Tooltip/index.tsx     |   2 +-
 .../src/ds/molecules/CollapsibleBox/index.tsx |  46 +++++++
 packages/web-ui/src/ds/molecules/index.ts     |   1 +
 packages/web-ui/src/ds/tokens/colors.ts       |   1 +
 packages/web-ui/styles.css                    |   3 +-
 packages/web-ui/tailwind.config.js            |   3 +-
 30 files changed, 619 insertions(+), 73 deletions(-)
 create mode 100644 apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/CopyButton.tsx
 create mode 100644 apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/InputSection.tsx
 create mode 100644 apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/MessagesList.tsx
 create mode 100644 apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/PinnedDocumentation.tsx
 create mode 100644 apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/TooltipInfo.tsx
 create mode 100644 apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/VariableSection.tsx
 create mode 100644 apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/hooks/useVariablesData.tsx
 create mode 100644 apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/index.tsx
 create mode 100644 apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/utils/constants.ts
 create mode 100644 apps/web/src/app/api/documentLogs/uuids/[uuid]/route.ts
 create mode 100644 apps/web/src/stores/documentLogWithMetadata.ts
 create mode 100644 packages/core/src/services/providerLogs/buildResponse.ts
 create mode 100644 packages/web-ui/src/ds/molecules/CollapsibleBox/index.tsx

diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Preview/index.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Preview/index.tsx
index 1c78f5232..0afefbcd3 100644
--- a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Preview/index.tsx
+++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Preview/index.tsx
@@ -59,7 +59,6 @@ export default function Preview({
       ref={containerRef}
       className='flex flex-col gap-3 h-full overflow-y-auto'
     >
-      <Text.H6M>Preview</Text.H6M>
       {(conversation?.messages ?? [])
         .filter((message) => message.role === 'assistant')
         .map((message, index) => (
diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/CopyButton.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/CopyButton.tsx
new file mode 100644
index 000000000..17013b944
--- /dev/null
+++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/CopyButton.tsx
@@ -0,0 +1,16 @@
+import { Button, Icon, toast } from '@latitude-data/web-ui'
+
+export const CopyButton = ({ text }: { text: string }) => (
+  <Button
+    variant='nope'
+    onClick={() => {
+      navigator.clipboard.writeText(text)
+      toast({
+        title: 'Copied to clipboard',
+        description: 'The snippet has been copied to your clipboard',
+      })
+    }}
+  >
+    <Icon name='clipboard' color='foregroundMuted' />
+  </Button>
+)
diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/InputSection.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/InputSection.tsx
new file mode 100644
index 000000000..58fecd343
--- /dev/null
+++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/InputSection.tsx
@@ -0,0 +1,31 @@
+import { Badge } from '@latitude-data/web-ui'
+
+import { TooltipInfo } from './TooltipInfo'
+
+export const InputSection = ({
+  title,
+  content,
+  tooltip,
+  type = 'text',
+}: {
+  title: string
+  content: string
+  tooltip: string
+  type?: string
+}) => (
+  <div className='flex flex-col gap-2'>
+    <div className='flex flex-row gap-2 items-center'>
+      <Badge variant='accent'>{title}</Badge>
+      <TooltipInfo text={tooltip} />
+    </div>
+    <div>
+      <input
+        type={type}
+        className='p-2 rounded-lg border bg-secondary resize-y text-xs'
+        value={content}
+        disabled
+        readOnly
+      />
+    </div>
+  </div>
+)
diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/MessagesList.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/MessagesList.tsx
new file mode 100644
index 000000000..decdcde55
--- /dev/null
+++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/MessagesList.tsx
@@ -0,0 +1,14 @@
+import { Text } from '@latitude-data/web-ui'
+
+import { CopyButton } from './CopyButton'
+
+export const MessagesList = ({ items }: { items: string[] }) => (
+  <ul className='list-none space-y-2 max-w-1/3'>
+    {items.map((item, index) => (
+      <li key={index} className='flex flex-shrink items-center gap-2'>
+        <CopyButton text={item} />
+        <Text.H6M>{item}</Text.H6M>
+      </li>
+    ))}
+  </ul>
+)
diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/PinnedDocumentation.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/PinnedDocumentation.tsx
new file mode 100644
index 000000000..a754a0079
--- /dev/null
+++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/PinnedDocumentation.tsx
@@ -0,0 +1,51 @@
+import { cn, CopyButton, Text } from '@latitude-data/web-ui'
+
+import { MessagesList } from './MessagesList'
+
+export const PinnedDocumentation = ({ isPinned }: { isPinned: boolean }) => {
+  const messageVariables = [
+    '{{messages.all}}',
+    '{{messages.first}}',
+    '{{messages.last}}',
+    '{{messages.user.all}}',
+    '{{messages.user.first}}',
+    '{{messages.user.last}}',
+    '{{messages.system.all}}',
+    '{{messages.system.first}}',
+    '{{messages.system.last}}',
+    '{{messages.assistant.all}}',
+    '{{messages.assistant.first}}',
+    '{{messages.assistant.last}}',
+  ]
+
+  return (
+    <div className={cn('flex flex-col gap-2', { 'py-4': !isPinned })}>
+      <Text.H6>
+        The <code>messages</code> variable contains all messages in the
+        conversation, with the following properties:
+      </Text.H6>
+      <div className='bg-backgroundCode p-4 rounded-lg'>
+        <div className='flex gap-4'>
+          <MessagesList items={messageVariables.slice(0, 6)} />
+          <MessagesList items={messageVariables.slice(6)} />
+        </div>
+      </div>
+      <Text.H6>
+        You can access these properties in your prompt template using JavaScript
+        object accessor syntax. E.g:
+      </Text.H6>
+      <div className='bg-backgroundCode p-4 rounded-lg relative overflow-x-auto'>
+        <Text.H6 noWrap>
+          {`{{messages.user.first}}`}{' '}
+          <Text.H6 noWrap color='foregroundMuted'>
+            /* This will print the first message from the user in the
+            conversation */
+          </Text.H6>
+        </Text.H6>
+        <div className='absolute top-4 right-2 bg-backgroundCode'>
+          <CopyButton content={`{{messages.user.first}}`} />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/TooltipInfo.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/TooltipInfo.tsx
new file mode 100644
index 000000000..66e2308d2
--- /dev/null
+++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/TooltipInfo.tsx
@@ -0,0 +1,13 @@
+import { Icon, Tooltip } from '@latitude-data/web-ui'
+
+export const TooltipInfo = ({ text }: { text: string }) => (
+  <Tooltip
+    trigger={
+      <div>
+        <Icon name='info' color='primary' />
+      </div>
+    }
+  >
+    {text}
+  </Tooltip>
+)
diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/VariableSection.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/VariableSection.tsx
new file mode 100644
index 000000000..7a5f73dd7
--- /dev/null
+++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/components/VariableSection.tsx
@@ -0,0 +1,72 @@
+import { ReactNode } from 'react'
+
+import { Badge, Button, cn, Icon, Popover, Text } from '@latitude-data/web-ui'
+
+import { PinnedDocumentation } from './PinnedDocumentation'
+import { TooltipInfo } from './TooltipInfo'
+
+export const VariableSection = ({
+  title,
+  content,
+  tooltip,
+  height = '36',
+  isPopoverOpen,
+  setIsPopoverOpen,
+  popoverContent,
+  isPinned,
+  onUnpin,
+}: {
+  title: string
+  content: string
+  tooltip?: string
+  height?: string
+  isPopoverOpen?: boolean
+  setIsPopoverOpen?: (isPopoverOpen: boolean) => void
+  popoverContent?: ReactNode
+  isPinned?: boolean
+  onUnpin?: () => void
+}) => (
+  <div className='flex flex-col gap-2'>
+    <div className='flex flex-row gap-2 items-center justify-between'>
+      <div className='flex flex-row gap-2 items-center'>
+        <Badge variant='accent'>{title}</Badge>
+        {tooltip && <TooltipInfo text={tooltip} />}
+      </div>
+      {popoverContent &&
+        (isPinned ? (
+          <Button variant='nope' onClick={onUnpin}>
+            <Icon name='pinOff' color='foregroundMuted' />
+            <Text.H6M color='foregroundMuted'>Unpin documentation</Text.H6M>
+          </Button>
+        ) : (
+          <Popover.Root open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+            <Popover.Trigger asChild>
+              <Button variant='nope'>
+                <Icon name='circleHelp' color='foregroundMuted' />
+                <Text.H6M color='foregroundMuted'>View documentation</Text.H6M>
+              </Button>
+            </Popover.Trigger>
+            <Popover.Content
+              align='end'
+              className='bg-white shadow-lg rounded-lg p-4 max-w-xl'
+            >
+              {popoverContent}
+            </Popover.Content>
+          </Popover.Root>
+        ))}
+    </div>
+    {isPinned && popoverContent && <PinnedDocumentation isPinned />}
+    <textarea
+      className={cn(
+        `w-full p-2 rounded-lg border bg-secondary resize-y text-xs`,
+        {
+          'h-36': height === '36',
+          'h-24': height === '24',
+        },
+      )}
+      value={content}
+      disabled
+      readOnly
+    />
+  </div>
+)
diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/hooks/useVariablesData.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/hooks/useVariablesData.tsx
new file mode 100644
index 000000000..60e598a37
--- /dev/null
+++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/hooks/useVariablesData.tsx
@@ -0,0 +1,125 @@
+import { useEffect, useState } from 'react'
+
+import { Config, readMetadata } from '@latitude-data/compiler'
+import { ProviderLogDto } from '@latitude-data/core/browser'
+import {
+  formatContext,
+  formatConversation,
+} from '@latitude-data/core/services/providerLogs/formatForEvaluation'
+import { Button, Icon, Tooltip } from '@latitude-data/web-ui'
+import useDocumentLogWithMetadata from '$/stores/documentLogWithMetadata'
+
+import { PinnedDocumentation } from '../components/PinnedDocumentation'
+
+export const useVariablesData = (providerLog: ProviderLogDto) => {
+  const [config, setConfig] = useState<Config>()
+  const { data: documentLogWithMetadata } = useDocumentLogWithMetadata(
+    providerLog.documentLogUuid,
+  )
+  const [isMessagesPinned, setIsMessagesPinned] = useState(false)
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+
+  useEffect(() => {
+    const fn = async () => {
+      if (!documentLogWithMetadata) return
+
+      const metadata = await readMetadata({
+        prompt: documentLogWithMetadata!.resolvedContent,
+      })
+      setConfig(metadata.config)
+    }
+
+    fn()
+  }, [documentLogWithMetadata])
+
+  const variableSections = [
+    {
+      title: 'messages',
+      content: JSON.stringify(formatConversation(providerLog), null, 2),
+      height: '36',
+      tooltip: 'The full conversation including the last assistant response',
+      popover: (
+        <div className='flex flex-col gap-4 relative pt-8'>
+          <div className='absolute top-2 right-2'>
+            <Button
+              variant='nope'
+              onClick={() => {
+                setIsMessagesPinned(true)
+                setIsPopoverOpen(false)
+              }}
+            >
+              <Tooltip
+                trigger={
+                  <div>
+                    <Icon
+                      name='pin'
+                      color={isMessagesPinned ? 'primary' : 'foregroundMuted'}
+                    />
+                  </div>
+                }
+              >
+                Pin documentation
+              </Tooltip>
+            </Button>
+          </div>
+          <PinnedDocumentation isPinned={false} />
+        </div>
+      ),
+    },
+    {
+      title: 'context',
+      content: formatContext(providerLog),
+      tooltip: 'The full conversation excluding the last assistant response',
+    },
+    {
+      title: 'response',
+      content: providerLog.response,
+      tooltip: 'The last assistant response',
+    },
+    {
+      title: 'prompt',
+      content: documentLogWithMetadata?.resolvedContent || '',
+      tooltip: 'The original prompt',
+    },
+    {
+      title: 'config',
+      content: config ? JSON.stringify(config, null, 2) : '',
+      tooltip: 'The prompt configuration used to generate the prompt',
+      height: '24',
+    },
+    {
+      title: 'parameters',
+      content: documentLogWithMetadata?.parameters
+        ? JSON.stringify(documentLogWithMetadata.parameters, null, 2)
+        : '',
+      tooltip: 'The parameters that were used to build the prompt for this log',
+      height: '24',
+    },
+  ]
+
+  const inputSections = [
+    {
+      title: 'duration',
+      content: documentLogWithMetadata?.duration?.toString() || '0',
+      tooltip: 'The time it took to run this prompt in milliseconds',
+      type: 'number',
+    },
+    {
+      title: 'cost',
+      content: documentLogWithMetadata?.costInMillicents
+        ? (documentLogWithMetadata?.costInMillicents / 1000).toString()
+        : '0',
+      tooltip: 'The cost of running this prompt in cents',
+      type: 'number',
+    },
+  ]
+
+  return {
+    variableSections,
+    inputSections,
+    isMessagesPinned,
+    setIsMessagesPinned,
+    isPopoverOpen,
+    setIsPopoverOpen,
+  }
+}
diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/index.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/index.tsx
new file mode 100644
index 000000000..5326f8d2e
--- /dev/null
+++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/index.tsx
@@ -0,0 +1,60 @@
+'use client'
+
+import { ProviderLogDto } from '@latitude-data/core/browser'
+import { Badge, CollapsibleBox } from '@latitude-data/web-ui'
+
+import { InputSection } from './components/InputSection'
+import { VariableSection } from './components/VariableSection'
+import { useVariablesData } from './hooks/useVariablesData'
+import { PARAMETERS } from './utils/constants'
+
+export const Variables = ({ providerLog }: { providerLog: ProviderLogDto }) => {
+  const {
+    variableSections,
+    inputSections,
+    isMessagesPinned,
+    setIsMessagesPinned,
+    isPopoverOpen,
+    setIsPopoverOpen,
+  } = useVariablesData(providerLog)
+
+  if (!providerLog) return null
+
+  const collapsedContent = (
+    <div className='flex flex-wrap gap-2'>
+      {PARAMETERS.map((param) => (
+        <Badge key={param} variant='accent'>
+          {param}
+        </Badge>
+      ))}
+    </div>
+  )
+
+  const expandedContent = (
+    <div className='flex flex-col gap-4'>
+      {variableSections.map((section) => (
+        <VariableSection
+          key={section.title}
+          {...section}
+          isPopoverOpen={isPopoverOpen}
+          setIsPopoverOpen={setIsPopoverOpen}
+          isPinned={isMessagesPinned}
+          onUnpin={() => setIsMessagesPinned(false)}
+          popoverContent={section.popover}
+        />
+      ))}
+      {inputSections.map((section) => (
+        <InputSection key={section.title} {...section} />
+      ))}
+    </div>
+  )
+
+  return (
+    <CollapsibleBox
+      title='Variables'
+      collapsedContent={collapsedContent}
+      expandedContent={expandedContent}
+      expandedHeight='720px'
+    />
+  )
+}
diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/utils/constants.ts b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/utils/constants.ts
new file mode 100644
index 000000000..493d0c5f6
--- /dev/null
+++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/Variables/utils/constants.ts
@@ -0,0 +1,10 @@
+export const PARAMETERS = [
+  'messages',
+  'context',
+  'response',
+  'prompt',
+  'parameters',
+  'config',
+  'duration',
+  'cost',
+]
diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/index.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/index.tsx
index 9556f24a4..67e361c58 100644
--- a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/index.tsx
+++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/Playground/index.tsx
@@ -8,7 +8,7 @@ import {
   formatContext,
   formatConversation,
 } from '@latitude-data/core/services/providerLogs/formatForEvaluation'
-import { Badge, Icon, Input, Text } from '@latitude-data/web-ui'
+import { Button, Icon, TableBlankSlate, Text } from '@latitude-data/web-ui'
 import { convertParams } from '$/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground'
 import { ROUTES } from '$/services/routes'
 import { useProviderLog } from '$/stores/providerLogs'
@@ -18,6 +18,26 @@ import { useSearchParams } from 'next/navigation'
 import { Header } from '../Header'
 import Chat, { EVALUATION_PARAMETERS } from './Chat'
 import Preview from './Preview'
+import { Variables } from './Variables'
+
+const BlankSlate = ({ evaluation }: { evaluation: EvaluationDto }) => (
+  <>
+    <Header title='Playground' />
+    <TableBlankSlate
+      description='Import data from an existing log to add it to your variables. Then test your evaluation prompt to see how it performs.'
+      link={
+        <Link
+          href={
+            ROUTES.evaluations.detail({ uuid: evaluation.uuid }).editor
+              .importLogs.root
+          }
+        >
+          <Button fancy>Import Log</Button>
+        </Link>
+      }
+    />
+  </>
+)
 
 export default function Playground({
   evaluation,
@@ -58,46 +78,29 @@ export default function Playground({
     }
   }, [setInput, providerLog])
 
+  if (!providerLog) {
+    return <BlankSlate evaluation={evaluation} />
+  }
+
   return (
     <>
-      <Header title='Playground' />
+      <div className='flex flex-row justify-between items-center'>
+        <Header title='Playground' />
+        {providerLog && (
+          <Link
+            className='flex flex-row gap-2 items-center'
+            href={
+              ROUTES.evaluations.detail({ uuid: evaluation.uuid }).editor
+                .importLogs.root
+            }
+          >
+            <Text.H5M>Import another log</Text.H5M> <Icon name='addSquare' />
+          </Link>
+        )}
+      </div>
       <div className='flex flex-col gap-6 h-full relative'>
-        <div className='flex flex-col gap-3'>
-          <div className='flex flex-row items-center justify-between gap-4'>
-            <Text.H6M>Variables</Text.H6M>
-            <Link
-              className='flex flex-row gap-2 items-center'
-              href={
-                ROUTES.evaluations.detail({ uuid: evaluation.uuid }).editor
-                  .importLogs.root
-              }
-            >
-              <Text.H5M>Import data from logs</Text.H5M>{' '}
-              <Icon name='addSquare' />
-            </Link>
-          </div>
-          {Object.keys(inputs).length > 0 ? (
-            Object.entries(inputs).map(([param, value], idx) => (
-              <div
-                className='flex flex-row gap-4 w-full items-center'
-                key={idx}
-              >
-                <Badge variant='accent'>&#123;&#123;{param}&#125;&#125;</Badge>
-                <div className='flex flex-grow w-full'>
-                  <Input
-                    value={value}
-                    onChange={(e) => setInput(param, e.currentTarget.value)}
-                  />
-                </div>
-              </div>
-            ))
-          ) : (
-            <Text.H6 color='foregroundMuted'>
-              No inputs. Use &#123;&#123; input_name &#125;&#125; to insert.
-            </Text.H6>
-          )}
-        </div>
-        <div className='flex flex-col gap-3 h-full'>
+        <Variables providerLog={providerLog} />
+        <div className='flex flex-col h-full'>
           <div className='flex flex-col flex-grow flex-shrink relative h-full overflow-y-auto'>
             <div className='absolute top-0 left-0 right-0 bottom-0'>
               {mode === 'preview' ? (
diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/index.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/index.tsx
index 0c4058133..875462c08 100644
--- a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/index.tsx
+++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/EvaluationEditor/Editor/index.tsx
@@ -92,7 +92,7 @@ export default function EvaluationEditor({
           />
         </Suspense>
       </div>
-      <div className='flex flex-col flex-1 gap-2'>
+      <div className='flex flex-col flex-1 gap-2 min-w-0 max-w-1/2'>
         <Playground evaluation={evaluation} metadata={metadata!} />
       </div>
     </div>
diff --git a/apps/web/src/app/api/documentLogs/[id]/route.ts b/apps/web/src/app/api/documentLogs/[id]/route.ts
index 522662314..f2932bf51 100644
--- a/apps/web/src/app/api/documentLogs/[id]/route.ts
+++ b/apps/web/src/app/api/documentLogs/[id]/route.ts
@@ -5,6 +5,7 @@ import { authHandler } from '$/middlewares/authHandler'
 import { errorHandler } from '$/middlewares/errorHandler'
 import { NextRequest, NextResponse } from 'next/server'
 
+// TODO: DRY with api/documentLogs/uuids/[uuid]/route.ts
 export const GET = errorHandler(
   authHandler(
     async (
diff --git a/apps/web/src/app/api/documentLogs/uuids/[uuid]/route.ts b/apps/web/src/app/api/documentLogs/uuids/[uuid]/route.ts
new file mode 100644
index 000000000..ddafa3a5e
--- /dev/null
+++ b/apps/web/src/app/api/documentLogs/uuids/[uuid]/route.ts
@@ -0,0 +1,42 @@
+import { Workspace } from '@latitude-data/core/browser'
+import { DocumentLogsRepository } from '@latitude-data/core/repositories'
+import { fetchDocumentLogWithMetadata } from '@latitude-data/core/services/documentLogs/fetchDocumentLogWithMetadata'
+import { authHandler } from '$/middlewares/authHandler'
+import { errorHandler } from '$/middlewares/errorHandler'
+import { NextRequest, NextResponse } from 'next/server'
+
+// TODO: DRY with api/documentLogs/[id]/route.ts
+export const GET = errorHandler(
+  authHandler(
+    async (
+      _: NextRequest,
+      {
+        params,
+        workspace,
+      }: {
+        params: { uuid: string }
+        workspace: Workspace
+      },
+    ) => {
+      const uuid = params.uuid
+
+      if (!uuid) {
+        return NextResponse.json(
+          { message: `Document Log not found with uuid: ${uuid}` },
+          { status: 404 },
+        )
+      }
+
+      const documentLogsRepo = new DocumentLogsRepository(workspace.id)
+      const _documentLog = await documentLogsRepo
+        .findByUuid(uuid)
+        .then((res) => res.unwrap())
+      const documentLog = await fetchDocumentLogWithMetadata({
+        workspaceId: workspace.id,
+        documentLogId: _documentLog.id,
+      }).then((res) => res.unwrap())
+
+      return NextResponse.json(documentLog, { status: 200 })
+    },
+  ),
+)
diff --git a/apps/web/src/components/ProjectDocumentSelector.tsx b/apps/web/src/components/ProjectDocumentSelector.tsx
index 15f61be6b..2b38d59c4 100644
--- a/apps/web/src/components/ProjectDocumentSelector.tsx
+++ b/apps/web/src/components/ProjectDocumentSelector.tsx
@@ -36,11 +36,13 @@ export function ProjectDocumentSelector({
           name='projectId'
           options={projects.map((p) => ({ label: p.name, value: p.id }))}
           onChange={handleProjectChange}
-          defaultValue={String(defaultProjectId)}
+          defaultValue={defaultProjectId ? String(defaultProjectId) : undefined}
+          placeholder='Select a project'
         />
       </FormField>
       <FormField label='Prompt' info={labelInfo}>
         <Select
+          placeholder='Select a prompt'
           disabled={!documents.length}
           name='documentUuid'
           options={documents.map((d) => ({
diff --git a/apps/web/src/components/layouts/AppLayout/Header/UsageIndicator/index.tsx b/apps/web/src/components/layouts/AppLayout/Header/UsageIndicator/index.tsx
index 5d98ea557..3c798ad53 100644
--- a/apps/web/src/components/layouts/AppLayout/Header/UsageIndicator/index.tsx
+++ b/apps/web/src/components/layouts/AppLayout/Header/UsageIndicator/index.tsx
@@ -8,12 +8,12 @@ import {
   Button,
   CircularProgress,
   CircularProgressProps,
+  Popover,
   Skeleton,
   Text,
 } from '@latitude-data/web-ui'
 import useWorkspaceUsage from '$/stores/workspaceUsage'
 import Link from 'next/link'
-import Popover from 'node_modules/@latitude-data/web-ui/src/ds/atoms/Popover'
 
 function UsageIndicatorCircle({
   data,
diff --git a/apps/web/src/presenters/providerLogPresenter.ts b/apps/web/src/presenters/providerLogPresenter.ts
index 1e7ebaaf4..40342f0e5 100644
--- a/apps/web/src/presenters/providerLogPresenter.ts
+++ b/apps/web/src/presenters/providerLogPresenter.ts
@@ -1,16 +1,13 @@
 import { omit } from 'lodash-es'
 
 import type { ProviderLog, ProviderLogDto } from '@latitude-data/core/browser'
+import { buildProviderLogResponse } from '@latitude-data/core/services/providerLogs/buildResponse'
 
 export default function providerLogPresenter(
   providerLog: ProviderLog,
 ): ProviderLogDto {
   return {
     ...omit(providerLog, 'responseText', 'responseObject'),
-    response:
-      providerLog.responseText ||
-      (providerLog.responseObject
-        ? JSON.stringify(providerLog.responseObject)
-        : ''),
+    response: buildProviderLogResponse(providerLog),
   }
 }
diff --git a/apps/web/src/stores/documentLogWithMetadata.ts b/apps/web/src/stores/documentLogWithMetadata.ts
new file mode 100644
index 000000000..b9d48b17c
--- /dev/null
+++ b/apps/web/src/stores/documentLogWithMetadata.ts
@@ -0,0 +1,31 @@
+import { DocumentLogWithMetadata } from '@latitude-data/core/repositories'
+import useSWR, { SWRConfiguration } from 'swr'
+
+export default function useDocumentLogWithMetadata(
+  documentLogUuid?: string | null,
+  opts?: SWRConfiguration,
+) {
+  return useSWR<DocumentLogWithMetadata>(
+    ['documentLogWithMetadata', documentLogUuid],
+    async () => {
+      if (!documentLogUuid) return []
+
+      const response = await fetch(
+        `/api/documentLogs/uuids/${documentLogUuid}`,
+        {
+          credentials: 'include',
+        },
+      )
+      if (!response.ok) {
+        const error = await response.json()
+
+        console.error(error)
+
+        return []
+      }
+
+      return response.json()
+    },
+    opts,
+  )
+}
diff --git a/packages/core/src/services/evaluations/run.ts b/packages/core/src/services/evaluations/run.ts
index 5c73f1ad4..d3f5e17b4 100644
--- a/packages/core/src/services/evaluations/run.ts
+++ b/packages/core/src/services/evaluations/run.ts
@@ -17,7 +17,11 @@ import { NotFoundError, Result } from '../../lib'
 import { runChain } from '../chains/run'
 import { computeDocumentLogWithMetadata } from '../documentLogs'
 import { buildProviderApikeysMap } from '../providerApiKeys/buildMap'
-import { formatContext, formatConversation } from '../providerLogs'
+import {
+  buildProviderLogResponse,
+  formatContext,
+  formatConversation,
+} from '../providerLogs'
 
 // Helper function to get the result schema based on evaluation type
 const getResultSchema = (type: EvaluationResultableType): JSONSchema7 => {
@@ -68,7 +72,7 @@ export const runEvaluation = async (
     parameters: {
       messages: formatConversation(lastProviderLog),
       context: formatContext(lastProviderLog),
-      response: lastProviderLog.responseText,
+      response: buildProviderLogResponse(lastProviderLog),
       prompt: documentLog.resolvedContent,
       parameters: documentLog.parameters,
       config: metadata.config,
diff --git a/packages/core/src/services/providerLogs/buildResponse.ts b/packages/core/src/services/providerLogs/buildResponse.ts
new file mode 100644
index 000000000..6849766f6
--- /dev/null
+++ b/packages/core/src/services/providerLogs/buildResponse.ts
@@ -0,0 +1,10 @@
+import { ProviderLog } from '../../browser'
+
+export function buildProviderLogResponse(providerLog: ProviderLog) {
+  return (
+    providerLog.responseText ||
+    (providerLog.responseObject
+      ? JSON.stringify(providerLog.responseObject)
+      : '')
+  )
+}
diff --git a/packages/core/src/services/providerLogs/index.ts b/packages/core/src/services/providerLogs/index.ts
index fb7753f67..419d51a7a 100644
--- a/packages/core/src/services/providerLogs/index.ts
+++ b/packages/core/src/services/providerLogs/index.ts
@@ -1,3 +1,4 @@
 export * from './create'
 export * from './formatForEvaluation'
 export * from './addMessages'
+export * from './buildResponse'
diff --git a/packages/web-ui/src/ds/atoms/CodeBlock/index.tsx b/packages/web-ui/src/ds/atoms/CodeBlock/index.tsx
index ad3da083d..c4e1c01d6 100644
--- a/packages/web-ui/src/ds/atoms/CodeBlock/index.tsx
+++ b/packages/web-ui/src/ds/atoms/CodeBlock/index.tsx
@@ -3,26 +3,36 @@ import React from 'react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism'
 
+import { cn } from '../../../lib/utils'
 import { CopyButton } from '../CopyButton'
 
 interface CodeBlockProps {
   language: string
   children: string
+  copy?: boolean
+  className?: string
 }
 
-export function CodeBlock({ language, children }: CodeBlockProps) {
+export function CodeBlock({
+  language,
+  children,
+  copy = true,
+  className,
+}: CodeBlockProps) {
   return (
     <div className='relative max-w-full'>
-      <div className='absolute top-4 right-2'>
-        <CopyButton content={children} color='foregroundMuted' />
-      </div>
+      {copy && (
+        <div className='absolute top-4 right-2 bg-backgroundCode'>
+          <CopyButton content={children} color='foregroundMuted' />
+        </div>
+      )}
       <SyntaxHighlighter
+        className={cn('text-sm', className)}
         language={language}
         style={oneLight}
         customStyle={{
           borderRadius: '0.375rem',
           padding: '1rem',
-          fontSize: '0.875rem',
           lineHeight: '1.25rem',
         }}
       >
diff --git a/packages/web-ui/src/ds/atoms/Icons/index.tsx b/packages/web-ui/src/ds/atoms/Icons/index.tsx
index f242e0a49..0a0236100 100644
--- a/packages/web-ui/src/ds/atoms/Icons/index.tsx
+++ b/packages/web-ui/src/ds/atoms/Icons/index.tsx
@@ -4,7 +4,9 @@ import {
   ChevronDown,
   ChevronLeft,
   ChevronRight,
+  ChevronUp,
   CircleAlert,
+  CircleHelp,
   CirclePlus,
   Code,
   Code2,
@@ -15,6 +17,7 @@ import {
   Eye,
   File,
   FilePlus,
+  FileQuestion,
   FileUpIcon,
   FolderClosed,
   FolderOpen,
@@ -25,6 +28,8 @@ import {
   Lock,
   Moon,
   Pencil,
+  Pin,
+  PinOff,
   RefreshCcw,
   SquareDot,
   SquareMinus,
@@ -46,6 +51,7 @@ const Icons = {
   addSquare: SquarePlus,
   alert: CircleAlert,
   check: CheckCircle2,
+  chevronUp: ChevronUp,
   chevronDown: ChevronDown,
   chevronRight: ChevronRight,
   chevronLeft: ChevronLeft,
@@ -77,6 +83,10 @@ const Icons = {
   pencil: Pencil,
   refresh: RefreshCcw,
   arrowRight: ArrowRightIcon,
+  fileQuestion: FileQuestion,
+  circleHelp: CircleHelp,
+  pin: Pin,
+  pinOff: PinOff,
 }
 
 export type IconName = keyof typeof Icons
diff --git a/packages/web-ui/src/ds/atoms/Popover/index.tsx b/packages/web-ui/src/ds/atoms/Popover/index.tsx
index 2885c61dc..4821fe239 100644
--- a/packages/web-ui/src/ds/atoms/Popover/index.tsx
+++ b/packages/web-ui/src/ds/atoms/Popover/index.tsx
@@ -15,13 +15,9 @@ const PopoverContent = forwardRef<HTMLDivElement, Props>(function Content(
 ) {
   const props = {
     ...rest,
-    className: cn(
-      className,
-      'will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade',
-      {
-        'custom-scrollbar': scrollable,
-      },
-    ),
+    className: cn(className, 'animate-in fade-in-0 slide-in-from-top-2', {
+      'custom-scrollbar': scrollable,
+    }),
   }
   if (!inPortal) return <RadixPopover.Content {...props} />
 
@@ -32,13 +28,11 @@ const PopoverContent = forwardRef<HTMLDivElement, Props>(function Content(
   )
 })
 
-namespace Popover {
-  export const Root = RadixPopover.Root
-  export const Anchor = RadixPopover.Anchor
-  export const Trigger = RadixPopover.Trigger
-  export const Portal = RadixPopover.Portal
-  export const Close = RadixPopover.Close
-  export const Content = PopoverContent
+export const Popover = {
+  Root: RadixPopover.Root,
+  Anchor: RadixPopover.Anchor,
+  Trigger: RadixPopover.Trigger,
+  Portal: RadixPopover.Portal,
+  Close: RadixPopover.Close,
+  Content: PopoverContent,
 }
-
-export default Popover
diff --git a/packages/web-ui/src/ds/atoms/Tooltip/index.tsx b/packages/web-ui/src/ds/atoms/Tooltip/index.tsx
index 409399625..5d1e176d3 100644
--- a/packages/web-ui/src/ds/atoms/Tooltip/index.tsx
+++ b/packages/web-ui/src/ds/atoms/Tooltip/index.tsx
@@ -67,7 +67,7 @@ function Tooltip({
   children,
   trigger,
   // Provider
-  delayDuration,
+  delayDuration = 200,
   disableHoverableContent,
 
   // Root
diff --git a/packages/web-ui/src/ds/molecules/CollapsibleBox/index.tsx b/packages/web-ui/src/ds/molecules/CollapsibleBox/index.tsx
new file mode 100644
index 000000000..76ff47f71
--- /dev/null
+++ b/packages/web-ui/src/ds/molecules/CollapsibleBox/index.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+import React, { useState } from 'react'
+
+import { Icon, Text } from '@latitude-data/web-ui'
+
+interface CollapsibleBoxProps {
+  title: string
+  collapsedContent: React.ReactNode
+  expandedContent: React.ReactNode
+  expandedHeight?: string
+}
+
+export const CollapsibleBox: React.FC<CollapsibleBoxProps> = ({
+  title,
+  collapsedContent,
+  expandedContent,
+  expandedHeight = 'auto',
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded)
+  }
+
+  return (
+    <div className='border rounded-lg'>
+      <div className='flex flex-col cursor-pointer' onClick={toggleExpand}>
+        <div className='flex justify-between items-center p-4'>
+          <Text.H5M>{title}</Text.H5M>
+          <Icon name={isExpanded ? 'chevronUp' : 'chevronDown'} />
+        </div>
+        {!isExpanded && <div className='px-4 pb-4'>{collapsedContent}</div>}
+      </div>
+      <div
+        className={`transition-all duration-300 ease-in-out overflow-y-auto`}
+        style={{
+          maxHeight: isExpanded ? expandedHeight : '0',
+          opacity: isExpanded ? 1 : 0,
+        }}
+      >
+        <div className='p-4'>{expandedContent}</div>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/web-ui/src/ds/molecules/index.ts b/packages/web-ui/src/ds/molecules/index.ts
index 0d4781183..da4cd2c6b 100644
--- a/packages/web-ui/src/ds/molecules/index.ts
+++ b/packages/web-ui/src/ds/molecules/index.ts
@@ -14,3 +14,4 @@ export * from './RangeBadge'
 export * from './Charts'
 export * from './EditableText'
 export * from './BlankSlateWithSteps'
+export * from './CollapsibleBox'
diff --git a/packages/web-ui/src/ds/tokens/colors.ts b/packages/web-ui/src/ds/tokens/colors.ts
index c674a6c54..cb6cacc41 100644
--- a/packages/web-ui/src/ds/tokens/colors.ts
+++ b/packages/web-ui/src/ds/tokens/colors.ts
@@ -1,6 +1,7 @@
 export const colors = {
   backgrounds: {
     transparent: 'bg-transparent',
+    backgroundCode: 'bg-backgroundCode',
   },
   textColors: {
     white: 'text-white',
diff --git a/packages/web-ui/styles.css b/packages/web-ui/styles.css
index 787351721..f2f47baf6 100644
--- a/packages/web-ui/styles.css
+++ b/packages/web-ui/styles.css
@@ -44,6 +44,7 @@
 @layer base {
   :root {
     --background: 255 255 255;
+    --background-code: 250 250 250;
     --background-gray: 252 252 252;
     --foreground: 3 7 17;
 
@@ -117,7 +118,7 @@
     --border: 31 41 55;
     --input: 31 41 55;
     --ring: 10 129 217;
-    
+
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
diff --git a/packages/web-ui/tailwind.config.js b/packages/web-ui/tailwind.config.js
index 19ee2c3df..9a1db9df0 100644
--- a/packages/web-ui/tailwind.config.js
+++ b/packages/web-ui/tailwind.config.js
@@ -22,6 +22,7 @@ export default {
         border: 'rgb(var(--border) / <alpha-value>)',
         input: 'rgb(var(--input) / <alpha-value>)',
         ring: 'rgb(var(--ring) / <alpha-value>)',
+        backgroundCode: 'rgb(var(--background-code) / <alpha-value>)',
         background: 'rgb(var(--background) / <alpha-value>)',
         'background-gray': 'rgb(var(--background-gray) / <alpha-value>)',
         foreground: 'rgb(var(--foreground) / <alpha-value>)',
@@ -95,7 +96,7 @@ export default {
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
-        'flash': 'flash-background 1s ease-in-out',
+        flash: 'flash-background 1s ease-in-out',
         'text-gradient': 'gradient-animation 3s linear infinite',
       },
       maxWidth: {