Evaluation dashboard

apps/web/src/actions/connectedEvaluations/fetchConnectedDocuments.ts

@@ -0,0 +1,25 @@
+'use server'
+
+import { ConnectedEvaluationsRepository } from '@latitude-data/core/repositories'
+import { z } from 'zod'
+
+import { authProcedure } from '../procedures'
+
+export const fetchConnectedDocumentsAction = authProcedure
+  .createServerAction()
+  .input(
+    z.object({
+      evaluationId: z.number(),
+    }),
+  )
+  .handler(async ({ input, ctx }) => {
+    const connectedEvaluationsScope = new ConnectedEvaluationsRepository(
+      ctx.workspace.id,
+    )
+    const connectedDocuments =
+      await connectedEvaluationsScope.getConnectedDocumentsWithMetadata(
+        input.evaluationId,
+      )
+
+    return connectedDocuments.unwrap()
+  })

apps/web/src/app/(private)/_data-access/index.ts

@@ -5,6 +5,7 @@ import { findAllEvaluationTemplates } from '@latitude-data/core/data-access'
 import { NotFoundError } from '@latitude-data/core/lib/errors'
 import {
   CommitsRepository,
+  ConnectedEvaluationsRepository,
   DocumentLogsRepository,
   DocumentVersionsRepository,
   EvaluationsRepository,
@@ -186,3 +187,17 @@ export const getEvaluationsByDocumentUuidCached = cache(
     return result.unwrap()
   },
 )
+
+export const getConnectedDocumentsWithMetadataCached = cache(
+  async (evaluationId: number) => {
+    const { workspace } = await getCurrentUser()
+    const connectedEvaluationsScope = new ConnectedEvaluationsRepository(
+      workspace.id,
+    )
+    const result =
+      await connectedEvaluationsScope.getConnectedDocumentsWithMetadata(
+        evaluationId,
+      )
+    return result.unwrap()
+  },
+)

apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/_components/EvaluationTabs/index.tsx

@@ -1,20 +1,23 @@
 'use client'
 
+import { Evaluation } from '@latitude-data/core/browser'
 import { TabSelector } from '@latitude-data/web-ui'
 import { useNavigate } from '$/hooks/useNavigate'
 import { EvaluationRoutes, ROUTES } from '$/services/routes'
 import { useSelectedLayoutSegment } from 'next/navigation'
 
 export function EvaluationTabSelector({
-  evaluationUuid,
+  evaluation,
 }: {
-  evaluationUuid: string
+  evaluation: Evaluation
 }) {
   const router = useNavigate()
   const selectedSegment = useSelectedLayoutSegment() as EvaluationRoutes | null
 
   const pathTo = (evaluationRoute: EvaluationRoutes) => {
-    const evaluationDetail = ROUTES.evaluations.detail({ uuid: evaluationUuid })
+    const evaluationDetail = ROUTES.evaluations.detail({
+      uuid: evaluation.uuid,
+    })
     const detail = evaluationDetail[evaluationRoute] ?? evaluationDetail
     return detail.root
   }
@@ -23,7 +26,7 @@ export function EvaluationTabSelector({
     <div className='flex flex-row p-4 pb-0'>
       <TabSelector
         options={[
-          { label: 'History', value: EvaluationRoutes.dashboard },
+          { label: 'Dashboard', value: EvaluationRoutes.dashboard },
           { label: 'Editor', value: EvaluationRoutes.editor },
         ]}
         selected={selectedSegment ?? EvaluationRoutes.dashboard}

apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/_components/EvaluationTitle/index.tsx

@@ -1,22 +1,7 @@
-'use client'
-
-import { useMemo } from 'react'
-
+import { Evaluation } from '@latitude-data/core/browser'
 import { Text } from '@latitude-data/web-ui'
-import useEvaluations from '$/stores/evaluations'
-
-export function EvaluationTitle({
-  evaluationUuid,
-}: {
-  evaluationUuid: string
-}) {
-  const { data: evaluations } = useEvaluations()
-  const evaluation = useMemo(() => {
-    return evaluations?.find((evaluation) => evaluation.uuid === evaluationUuid)
-  }, [evaluations, evaluationUuid])
-
-  if (!evaluation) return null
 
+export function EvaluationTitle({ evaluation }: { evaluation: Evaluation }) {
   return (
     <div className='flex flex-row items-center justify-between p-4 pb-0'>
       <Text.H4B>{evaluation.name}</Text.H4B>

apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/dashboard/_components/ConnectedDocumentsTable/index.tsx

@@ -0,0 +1,115 @@
+'use client'
+
+import { useMemo } from 'react'
+
+import { HEAD_COMMIT } from '@latitude-data/core/browser'
+import type { ConnectedDocumentWithMetadata } from '@latitude-data/core/repositories'
+import {
+  Skeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Text,
+} from '@latitude-data/web-ui'
+import { formatCostInMillicents } from '$/app/_lib/formatCostInMillicents'
+import { useNavigate } from '$/hooks/useNavigate'
+import { ROUTES } from '$/services/routes'
+import useProjects from '$/stores/projects'
+
+const ConnectedDocumentTableRow = ({
+  document,
+  onSelect,
+}: {
+  document: ConnectedDocumentWithMetadata
+  onSelect: () => void
+}) => {
+  const { data: projects, isLoading: isProjectsLoading } = useProjects()
+  const projectName = useMemo(() => {
+    if (isProjectsLoading) return null
+
+    return projects?.find((project) => project.id === document.projectId)?.name
+  }, [document.projectId, isProjectsLoading, projects])
+
+  const promptPath = useMemo(() => {
+    return document.path.split('/').slice(0, -1).join('/')
+  }, [document.path])
+
+  const promptName = useMemo(() => {
+    return document.path.split('/').pop()
+  }, [document.path])
+
+  return (
+    <TableRow
+      key={document.documentUuid}
+      className='cursor-pointer border-b-[0.5px] h-12 max-h-12 border-border'
+      onClick={onSelect}
+    >
+      <TableCell className='nowrap'>
+        <Text.H4 color='foregroundMuted' noWrap>
+          {promptPath}
+          {Boolean(promptPath) && '/'}
+          <Text.H4 noWrap>{promptName}</Text.H4>
+        </Text.H4>
+      </TableCell>
+      <TableCell>
+        {isProjectsLoading ? (
+          <Skeleton className='w-full h-4 bg-muted animate-pulse' />
+        ) : (
+          <Text.H4 noWrap>{projectName}</Text.H4>
+        )}
+      </TableCell>
+      <TableCell>
+        <Text.H4 noWrap>{document.evaluationLogs}</Text.H4>
+      </TableCell>
+      <TableCell>
+        <Text.H4 noWrap>{document.totalTokens}</Text.H4>
+      </TableCell>
+      <TableCell>
+        <Text.H4 noWrap>
+          {formatCostInMillicents(document.costInMillicents ?? 0)}
+        </Text.H4>
+      </TableCell>
+    </TableRow>
+  )
+}
+
+export default function ConnectedDocumentsTable({
+  connectedDocumentsWithMetadata,
+}: {
+  connectedDocumentsWithMetadata: ConnectedDocumentWithMetadata[]
+}) {
+  const navigate = useNavigate()
+
+  return (
+    <Table className='table-auto'>
+      <TableHeader className='sticky top-0 z-10'>
+        <TableRow>
+          <TableHead>Prompt name</TableHead>
+          <TableHead>Project</TableHead>
+          <TableHead>Logs evaluated</TableHead>
+          <TableHead>Tokens</TableHead>
+          <TableHead>Cost</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody className='max-h-full overflow-y-auto'>
+        {connectedDocumentsWithMetadata.map((document) => (
+          <ConnectedDocumentTableRow
+            key={document.documentUuid}
+            document={document}
+            onSelect={() =>
+              navigate.push(
+                ROUTES.projects
+                  .detail({ id: document.projectId })
+                  .commits.detail({ uuid: HEAD_COMMIT })
+                  .documents.detail({ uuid: document.documentUuid }).logs.root, // TODO: Navigate to the document evaluation details page
+              )
+            }
+          />
+        ))}
+      </TableBody>
+    </Table>
+  )
+}

apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/dashboard/_components/EvaluationStats.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { readMetadata } from '@latitude-data/compiler'
+import { EvaluationDto } from '@latitude-data/core/browser'
+import { ConnectedDocumentWithMetadata } from '@latitude-data/core/repositories'
+import { Skeleton, Text } from '@latitude-data/web-ui'
+import { formatCostInMillicents } from '$/app/_lib/formatCostInMillicents'
+import useConnectedDocuments from '$/stores/connectedEvaluations'
+
+export function Stat({ label, value }: { label: string; value?: string }) {
+  return (
+    <div className='w-full min-w-[100px] max-w-[300px] h-24 flex flex-col gap-2 px-6 py-2 justify-center border border-border rounded-lg'>
+      <Text.H4M color='foregroundMuted'>{label}</Text.H4M>
+      {value == undefined ? (
+        <Skeleton className='w-[150px] h-8 bg-muted-foreground/10 animate-pulse' />
+      ) : (
+        <Text.H3B>{value}</Text.H3B>
+      )}
+    </div>
+  )
+}
+
+export default function EvaluationStats({
+  evaluation,
+  connectedDocumentsWithMetadata,
+}: {
+  evaluation: EvaluationDto
+  connectedDocumentsWithMetadata: ConnectedDocumentWithMetadata[]
+}) {
+  const [model, setModel] = useState<string>()
+  const { data: connectedDocuments, isLoading: connectedDocumentsLoading } =
+    useConnectedDocuments({ evaluation })
+
+  useEffect(() => {
+    readMetadata({ prompt: evaluation.metadata.prompt }).then((metadata) => {
+      const metadataModel = (metadata.config['model'] as string) ?? 'Unknown'
+      setModel(metadataModel)
+    })
+  }, [evaluation.metadata])
+
+  return (
+    <div className='flex gap-6'>
+      <Stat
+        label='Prompts'
+        value={
+          connectedDocumentsLoading
+            ? undefined
+            : connectedDocuments?.length.toString()
+        }
+      />
+      <Stat label='Model' value={model} />
+      <Stat
+        label='Logs'
+        value={connectedDocumentsWithMetadata
+          .reduce((acc, doc) => acc + doc.evaluationLogs, 0)
+          .toString()}
+      />
+      <Stat
+        label='Cost'
+        value={formatCostInMillicents(
+          connectedDocumentsWithMetadata.reduce(
+            (acc, doc) => acc + doc.costInMillicents,
+            0,
+          ),
+        )}
+      />
+    </div>
+  )
+}

apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/dashboard/page.tsx

@@ -1,3 +1,30 @@
-export default function DashboardPage() {
-  return null // --> layout.tsx
+import { Container } from '@latitude-data/web-ui'
+import {
+  getConnectedDocumentsWithMetadataCached,
+  getEvaluationByUuidCached,
+} from '$/app/(private)/_data-access'
+
+import ConnectedDocumentsTable from './_components/ConnectedDocumentsTable'
+import EvaluationStats from './_components/EvaluationStats'
+
+export default async function DashboardPage({
+  params,
+}: {
+  params: { evaluationUuid: string }
+}) {
+  const evaluation = await getEvaluationByUuidCached(params.evaluationUuid)
+  const connectedDocumentsWithMetadata =
+    await getConnectedDocumentsWithMetadataCached(evaluation.id)
+
+  return (
+    <Container>
+      <EvaluationStats
+        evaluation={evaluation}
+        connectedDocumentsWithMetadata={connectedDocumentsWithMetadata}
+      />
+      <ConnectedDocumentsTable
+        connectedDocumentsWithMetadata={connectedDocumentsWithMetadata}
+      />
+    </Container>
+  )
 }

apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/layout.tsx

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react'
 
+import { getEvaluationByUuidCached } from '$/app/(private)/_data-access'
+
 import { EvaluationTabSelector } from './_components/EvaluationTabs'
 import { EvaluationTitle } from './_components/EvaluationTitle'
 
@@ -10,10 +12,12 @@ export default async function EvaluationLayout({
   params: { evaluationUuid: string }
   children: ReactNode
 }) {
+  const evaluation = await getEvaluationByUuidCached(params.evaluationUuid)
+
   return (
     <div className='flex flex-col h-full'>
-      <EvaluationTitle evaluationUuid={params.evaluationUuid} />
-      <EvaluationTabSelector evaluationUuid={params.evaluationUuid} />
+      <EvaluationTabSelector evaluation={evaluation} />
+      <EvaluationTitle evaluation={evaluation} />
       <div className='flex-grow flex flex-col w-full overflow-hidden'>
         {children}
       </div>

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogInfo/Metadata.tsx

@@ -9,10 +9,11 @@ import {
   Text,
   Tooltip,
 } from '@latitude-data/web-ui'
+import { formatCostInMillicents } from '$/app/_lib/formatCostInMillicents'
 import useProviderApiKeys from '$/stores/providerApiKeys'
 import { format } from 'date-fns'
 
-import { formatCostInMillicents, formatDuration } from '../utils'
+import { formatDuration } from '../utils'
 
 function MetadataItem({
   label,

apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/DocumentLogsTable.tsx

@@ -12,8 +12,9 @@ import {
   TableRow,
   Text,
 } from '@latitude-data/web-ui'
+import { formatCostInMillicents } from '$/app/_lib/formatCostInMillicents'
 
-import { formatCostInMillicents, formatDuration, relativeTime } from './utils'
+import { formatDuration, relativeTime } from './utils'
 
 export const DocumentLogsTable = ({
   documentLogs,