From fa267d4e3ffcc9141a061d9de87ff9636af2c336 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s?= <andresgutgon@gmail.com>
Date: Thu, 14 Nov 2024 17:09:55 +0100
Subject: [PATCH] Document logs history parameters tab in Playground (#592)

---
 .../Variables/hooks/useVariablesData.tsx      |   6 +-
 .../editor/_components/Playground/index.tsx   |   6 +-
 .../DocumentParams/DatasetParams/index.tsx    |  65 ++-------
 .../DocumentParams/HistoryLogParams/index.tsx |  96 ++++++++++++-
 .../HistoryLogParams/useLogHistoryParams.ts   | 129 ++++++++++++++++++
 .../HistoryLogParams/useSelectedRow.ts        |  36 +++++
 .../Playground/DocumentParams/Input/index.tsx |   2 +-
 .../DocumentParams/PaginationNav/index.tsx    |  58 ++++++++
 .../Playground/DocumentParams/index.tsx       |   8 +-
 .../EvaluationResultsTable.tsx                |   4 +-
 .../logs/_components/DocumentLogs/index.tsx   |  43 +++++-
 .../documents/[documentUuid]/logs/page.tsx    |  10 +-
 .../uuids/[uuid]/with-position/route.ts       |  35 +++++
 .../[documentUuid]/documentLogs/route.ts      |   5 +-
 .../src/hooks/useDocumentParameters/index.ts  |   7 +-
 .../hooks/useGenerateDocumentLogDetailUrl.ts  |  27 ++++
 apps/web/src/services/routes/api.ts           |  10 +-
 apps/web/src/stores/datasetPreviews.ts        |   4 +-
 .../web/src/stores/documentLogWithMetadata.ts |  32 ++---
 .../documentLogWithPaginationPosition.ts      |  43 ++++++
 apps/web/src/stores/documentLogs.ts           |  33 +++--
 packages/core/src/constants.ts                |   2 +
 .../src/lib/pagination/buildPagination.ts     |   3 +-
 .../computeDocumentLogsWithMetadata.ts        |   4 +-
 .../fetchDocumentLogWithPosition.ts           |  40 ++++++
 .../core/src/services/documentLogs/index.ts   |   1 +
 .../web-ui/src/lib/hooks/useLocalStorage.ts   |   1 +
 27 files changed, 596 insertions(+), 114 deletions(-)
 create mode 100644 apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/useLogHistoryParams.ts
 create mode 100644 apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/useSelectedRow.ts
 create mode 100644 apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/PaginationNav/index.tsx
 create mode 100644 apps/web/src/app/api/documentLogs/uuids/[uuid]/with-position/route.ts
 create mode 100644 apps/web/src/hooks/useGenerateDocumentLogDetailUrl.ts
 create mode 100644 apps/web/src/stores/documentLogWithPaginationPosition.ts
 create mode 100644 packages/core/src/services/documentLogs/fetchDocumentLogWithPosition.ts

diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/Playground/Variables/hooks/useVariablesData.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/Playground/Variables/hooks/useVariablesData.tsx
index 506f01fc2..8a766688e 100644
--- a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/Playground/Variables/hooks/useVariablesData.tsx
+++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/Playground/Variables/hooks/useVariablesData.tsx
@@ -13,9 +13,9 @@ import { PinnedDocumentation } from '../components/PinnedDocumentation'
 
 export const useVariablesData = (providerLog: ProviderLogDto) => {
   const [config, setConfig] = useState<Config>()
-  const { data: documentLogWithMetadata } = useDocumentLogWithMetadata(
-    providerLog.documentLogUuid,
-  )
+  const { data: documentLogWithMetadata } = useDocumentLogWithMetadata({
+    documentLogUuid: providerLog.documentLogUuid,
+  })
   const [isMessagesPinned, setIsMessagesPinned] = useState(false)
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
 
diff --git a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/Playground/index.tsx b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/Playground/index.tsx
index e7159df44..e25df5f92 100644
--- a/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/Playground/index.tsx
+++ b/apps/web/src/app/(private)/evaluations/(evaluation)/[evaluationUuid]/editor/_components/Playground/index.tsx
@@ -49,9 +49,9 @@ export default function Playground({
   const { data: providerLog } = useProviderLog(
     providerLogId ? Number(providerLogId) : undefined,
   )
-  const { data: documentLogWithMetadata } = useDocumentLogWithMetadata(
-    providerLog?.documentLogUuid,
-  )
+  const { data: documentLogWithMetadata } = useDocumentLogWithMetadata({
+    documentLogUuid: providerLog?.documentLogUuid,
+  })
   const parameters = useMemo(() => {
     if (!providerLog || !documentLogWithMetadata) {
       return {
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/DatasetParams/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/DatasetParams/index.tsx
index ef6d7c8a1..7db45de3b 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/DatasetParams/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/DatasetParams/index.tsx
@@ -1,61 +1,11 @@
-import {
-  Button,
-  cn,
-  ReactStateDispatch,
-  Select,
-  Text,
-} from '@latitude-data/web-ui'
+import { cn, ReactStateDispatch, Select } from '@latitude-data/web-ui'
 import { PlaygroundInputs } from '$/hooks/useDocumentParameters'
 
 import { ParamsSource } from '../index'
+import { ParametersPaginationNav } from '../PaginationNav'
 import { InputMapper } from './InputsMapper'
 import { type UseSelectDataset } from './useSelectDataset'
 
-const INDEX_ZERO_LIST = 1
-function DatasetRowsPagination({
-  currentIndex,
-  totalCount,
-  onRowChange,
-}: {
-  currentIndex: number | undefined
-  totalCount: number | undefined
-  onRowChange: (index: number) => void
-}) {
-  if (currentIndex === undefined || totalCount === undefined) return null
-
-  return (
-    <div className='flex items-center'>
-      <Button
-        size='default'
-        variant='ghost'
-        disabled={currentIndex <= 0}
-        iconProps={{
-          name: 'chevronLeft',
-        }}
-        onClick={() => onRowChange(currentIndex - 1)}
-      />
-      <div className='flex flex-row items-center gap-x-1'>
-        <Text.H5M color='foregroundMuted'>
-          {currentIndex + INDEX_ZERO_LIST}
-        </Text.H5M>
-        <div className='max-w-14' />
-        <Text.H5M color='foregroundMuted'>
-          of {totalCount} rows in dataset
-        </Text.H5M>
-      </div>
-      <Button
-        size='default'
-        variant='ghost'
-        disabled={currentIndex >= totalCount - INDEX_ZERO_LIST}
-        iconProps={{
-          name: 'chevronRight',
-        }}
-        onClick={() => onRowChange(currentIndex + 1)}
-      />
-    </div>
-  )
-}
-
 export function DatasetParams({
   inputs,
   datasetInfo: data,
@@ -68,9 +18,11 @@ export function DatasetParams({
   const selectedId = data.selectedDataset?.id
     ? String(data.selectedDataset.id)
     : undefined
+  const onPrevPage = (page: number) => data.onRowChange(page - 1)
+  const onNextPage = (page: number) => data.onRowChange(page + 1)
   return (
     <div className='flex flex-col gap-y-4'>
-      <div className='flex flex-row items-center justify-between gap-x-4'>
+      <div className='flex flex-row items-center justify-between gap-x-4 border-b border-border pb-2'>
         <Select
           name='datasetId'
           placeholder={data.isLoading ? 'Loading...' : 'Select dataset'}
@@ -80,10 +32,13 @@ export function DatasetParams({
           value={selectedId}
         />
         <div className='flex-none'>
-          <DatasetRowsPagination
+          <ParametersPaginationNav
+            zeroIndex
             currentIndex={data.selectedRowIndex}
             totalCount={data.totalRows}
-            onRowChange={data.onRowChange}
+            onPrevPage={onPrevPage}
+            onNextPage={onNextPage}
+            label='rows in dataset'
           />
         </div>
       </div>
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/index.tsx
index a72e36324..73db9af88 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/index.tsx
@@ -1,14 +1,104 @@
+import { DocumentLogWithMetadataAndError } from '@latitude-data/core/repositories'
+import { Badge, cn, Icon, Skeleton, Text, Tooltip } from '@latitude-data/web-ui'
 import {
   PlaygroundInput,
   PlaygroundInputs,
 } from '$/hooks/useDocumentParameters'
+import { useGenerateDocumentLogDetailUrl } from '$/hooks/useGenerateDocumentLogDetailUrl'
+import { format } from 'date-fns'
+import Link from 'next/link'
+
+import { InputParams } from '../Input'
+import { ParametersPaginationNav } from '../PaginationNav'
+import { useLogHistoryParams } from './useLogHistoryParams'
+
+function usePaginatedDocumentLogUrl({
+  page,
+  selectedLog,
+  isLoading,
+}: {
+  selectedLog: DocumentLogWithMetadataAndError | undefined
+  page: number | undefined
+  isLoading: boolean
+}) {
+  const uuid = selectedLog?.uuid
+  const { url } = useGenerateDocumentLogDetailUrl({
+    page,
+    documentLogUuid: uuid,
+  })
+
+  if (isLoading || !uuid || !url) return undefined
+
+  const shortCode = uuid.split('-')[0]
+  const createdAt = format(selectedLog.createdAt, 'PPp')
+  return {
+    url,
+    shortCode,
+    createdAt,
+    hasError: !!selectedLog.error.message,
+  }
+}
 
 export function HistoryLogParams({
-  inputs: _inputs,
-  setInput: _setInput,
+  inputs,
+  setInput,
+  setInputs,
 }: {
   inputs: PlaygroundInputs
   setInput: (param: string, value: PlaygroundInput) => void
+  setInputs: (newInputs: PlaygroundInputs) => void
 }) {
-  return <div>TODO: DatasetParams</div>
+  const data = useLogHistoryParams({ inputs, setInputs })
+  const urlData = usePaginatedDocumentLogUrl({
+    selectedLog: data.selectedLog,
+    page: data.page,
+    isLoading: data.isLoadingLog,
+  })
+  return (
+    <div className='flex flex-col gap-y-4'>
+      <div className='flex flex-row gap-x-4 justify-between items-center border-border border-b pb-2'>
+        <div className='flex-grow'>
+          {data.isLoadingLog ? (
+            <div className='flex flex-row gap-x-2 w-full'>
+              <Skeleton height='h3' className='w-2/3' />
+              <Skeleton height='h3' className='w-1/3' />
+            </div>
+          ) : null}
+          {!data.isLoadingLog && urlData ? (
+            <Link href={urlData.url}>
+              <div className='flex flex-row items-center gap-x-2'>
+                <Text.H5>{urlData.createdAt}</Text.H5>
+                {urlData.hasError ? (
+                  <Tooltip
+                    variant='destructive'
+                    trigger={
+                      <Badge variant='destructive'>{urlData.shortCode}</Badge>
+                    }
+                  >
+                    This log has an error
+                  </Tooltip>
+                ) : (
+                  <Badge variant='accent'>{urlData.shortCode}</Badge>
+                )}
+                <Icon name='externalLink' color='foregroundMuted' />
+              </div>
+            </Link>
+          ) : null}
+        </div>
+        <div>
+          <ParametersPaginationNav
+            disabled={data.isLoadingLog}
+            label='history logs'
+            currentIndex={data.position}
+            totalCount={data.count}
+            onPrevPage={data.onPrevPage}
+            onNextPage={data.onNextPage}
+          />
+        </div>
+      </div>
+      <div className={cn({ 'opacity-50': data.isLoading })}>
+        <InputParams inputs={inputs} setInput={setInput} />
+      </div>
+    </div>
+  )
 }
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/useLogHistoryParams.ts b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/useLogHistoryParams.ts
new file mode 100644
index 000000000..ca5b6e63d
--- /dev/null
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/useLogHistoryParams.ts
@@ -0,0 +1,129 @@
+import { useCallback, useState } from 'react'
+
+import { DocumentLog } from '@latitude-data/core/browser'
+import { useCurrentCommit, useCurrentProject } from '@latitude-data/web-ui'
+import { useCurrentDocument } from '$/app/providers/DocumentProvider'
+import { PlaygroundInputs } from '$/hooks/useDocumentParameters'
+import useDocumentLogs from '$/stores/documentLogs'
+import useDocumentLogWithPaginationPosition, {
+  LogWithPosition,
+} from '$/stores/documentLogWithPaginationPosition'
+import useDocumentLogsPagination from '$/stores/useDocumentLogsPagination'
+
+import { useSelectedLogRow } from './useSelectedRow'
+
+function getValue({ paramValue }: { paramValue: unknown | undefined }) {
+  try {
+    const value = JSON.stringify(paramValue)
+    return { value, includedInPrompt: paramValue !== undefined }
+  } catch {
+    return { value: '', includedInPrompt: false }
+  }
+}
+
+function mapLogParametersToInputs({
+  inputs,
+  parameters,
+}: {
+  inputs: PlaygroundInputs
+  parameters: DocumentLog['parameters'] | undefined
+}): PlaygroundInputs | undefined {
+  const params = parameters ?? {}
+  // No parameters
+  if (!Object.keys(params).length) return undefined
+
+  return Object.entries(inputs).reduce((acc, [key]) => {
+    acc[key] = getValue({ paramValue: params[key] })
+    return acc
+  }, {} as PlaygroundInputs)
+}
+
+const ONLY_ONE_PAGE = '1'
+export function useLogHistoryParams({
+  inputs,
+  setInputs,
+}: {
+  inputs: PlaygroundInputs
+  setInputs: (newInputs: PlaygroundInputs) => void
+}) {
+  const document = useCurrentDocument()
+  const { saveRowInfo, selectedRow } = useSelectedLogRow({ document })
+  const selectedLogUuid = selectedRow?.documentLogUuid
+  const { project } = useCurrentProject()
+  const { commit } = useCurrentCommit()
+  const { data: pagination, isLoading: isLoadingCounter } =
+    useDocumentLogsPagination({
+      projectId: project.id,
+      commitUuid: commit.uuid,
+      documentUuid: document.documentUuid,
+      page: '1', // Not used really. This is only for the counter.
+      pageSize: ONLY_ONE_PAGE,
+    })
+
+  const [position, setPosition] = useState<LogWithPosition | undefined>(
+    selectedLogUuid ? undefined : { position: 1, page: 1 },
+  )
+  const onFetchCurrentLog = useCallback(
+    (data: LogWithPosition) => {
+      setPosition(data)
+    },
+    [selectedLogUuid],
+  )
+  const { isLoading: isLoadingPosition } = useDocumentLogWithPaginationPosition(
+    {
+      documentLogUuid: selectedLogUuid,
+      onFetched: onFetchCurrentLog,
+    },
+  )
+
+  const { data: logs, isLoading: isLoadingLog } = useDocumentLogs({
+    documentUuid: position === undefined ? undefined : document.documentUuid,
+    commitUuid: commit.uuid,
+    projectId: project.id,
+    page: position === undefined ? undefined : String(position.position),
+    pageSize: ONLY_ONE_PAGE,
+    onFetched: (logs) => {
+      const log = logs[0]
+      if (!log) return
+
+      const newInputs = mapLogParametersToInputs({
+        inputs,
+        parameters: log.parameters,
+      })
+
+      if (!newInputs) return
+
+      setInputs(newInputs)
+      saveRowInfo({ documentLogUuid: log.uuid })
+    },
+  })
+
+  const updatePosition = useCallback((position: number) => {
+    setPosition((prev) =>
+      prev ? { ...prev, position } : { position, page: 1 },
+    )
+  }, [])
+
+  const onNextPage = useCallback(
+    (position: number) => updatePosition(position + 1),
+    [updatePosition],
+  )
+
+  const onPrevPage = useCallback(
+    (position: number) => updatePosition(position - 1),
+    [updatePosition],
+  )
+
+  const isLoading = isLoadingLog || isLoadingCounter
+  const log = logs?.[0]
+  return {
+    selectedLog: log,
+    isLoadingLog: isLoadingPosition || isLoadingLog,
+    isLoading,
+    page: position?.page,
+    position: position?.position,
+    count: pagination?.count ?? 0,
+    onNextPage,
+    onPrevPage,
+  }
+}
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/useSelectedRow.ts b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/useSelectedRow.ts
new file mode 100644
index 000000000..0e9b9593a
--- /dev/null
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/HistoryLogParams/useSelectedRow.ts
@@ -0,0 +1,36 @@
+import { useCallback } from 'react'
+
+import { DocumentVersion } from '@latitude-data/core/browser'
+import { AppLocalStorage, useLocalStorage } from '@latitude-data/web-ui'
+
+export type SelectedLogRow = {
+  documentLogUuid: string | undefined
+}
+
+type SelectedRowByDocumentDataset = Record<string, SelectedLogRow>
+export function useSelectedLogRow({ document }: { document: DocumentVersion }) {
+  const key = `${document.documentUuid}:documentLogUuid`
+  const { value: allValues, setValue } =
+    useLocalStorage<SelectedRowByDocumentDataset>({
+      key: AppLocalStorage.playgroundParamsSelectedLogRow,
+      defaultValue: {},
+    })
+
+  const saveRowInfo = useCallback(
+    ({ documentLogUuid }: SelectedLogRow) => {
+      setValue((prev) => {
+        return {
+          ...prev,
+          [key]: { documentLogUuid },
+        }
+      })
+    },
+    [allValues, key, setValue],
+  )
+
+  const selectedRow = allValues[key]
+  return {
+    selectedRow,
+    saveRowInfo,
+  }
+}
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/Input/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/Input/index.tsx
index 0d87bc682..a532559f3 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/Input/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/Input/index.tsx
@@ -51,7 +51,7 @@ export function InputParams({
                   </div>
                   <div className='flex flex-grow w-full'>
                     <TextArea
-                      value={value}
+                      value={value ?? ''}
                       minRows={1}
                       maxRows={6}
                       onChange={(e) => {
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/PaginationNav/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/PaginationNav/index.tsx
new file mode 100644
index 000000000..31a19b5fb
--- /dev/null
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/PaginationNav/index.tsx
@@ -0,0 +1,58 @@
+import { Button, Text } from '@latitude-data/web-ui'
+
+const INDEX_ZERO_LIST = 1
+export function ParametersPaginationNav({
+  currentIndex,
+  totalCount,
+  onNextPage,
+  onPrevPage,
+  label,
+  zeroIndex = false,
+  disabled = false,
+}: {
+  label: string
+  currentIndex: number | undefined
+  totalCount: number | undefined
+  onNextPage: (index: number) => void
+  onPrevPage: (index: number) => void
+  zeroIndex?: boolean
+  disabled?: boolean
+}) {
+  if (currentIndex === undefined || totalCount === undefined) return null
+
+  return (
+    <div className='flex items-center'>
+      <Button
+        size='default'
+        variant='ghost'
+        disabled={zeroIndex ? currentIndex <= 0 : currentIndex <= 1 || disabled}
+        iconProps={{
+          name: 'chevronLeft',
+        }}
+        onClick={() => onPrevPage(currentIndex)}
+      />
+      <div className='flex flex-row items-center gap-x-1'>
+        <Text.H5M color='foregroundMuted'>
+          {zeroIndex ? currentIndex + INDEX_ZERO_LIST : currentIndex}
+        </Text.H5M>
+        <div className='max-w-14' />
+        <Text.H5M color='foregroundMuted'>
+          of {totalCount} {label}
+        </Text.H5M>
+      </div>
+      <Button
+        size='default'
+        variant='ghost'
+        disabled={
+          disabled ||
+          currentIndex >=
+            (zeroIndex ? totalCount - INDEX_ZERO_LIST : totalCount)
+        }
+        iconProps={{
+          name: 'chevronRight',
+        }}
+        onClick={() => onNextPage(currentIndex)}
+      />
+    </div>
+  )
+}
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/index.tsx
index 4e06517b0..d5a4cc628 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/_components/DocumentEditor/Editor/Playground/DocumentParams/index.tsx
@@ -28,7 +28,7 @@ export type ParamsSource = (typeof PARAMS_SOURCE)[keyof typeof PARAMS_SOURCE]
 const TABS: TabSelectorOption<ParamsSource>[] = [
   { label: 'Manual', value: PARAMS_SOURCE.manual },
   { label: 'Dataset', value: PARAMS_SOURCE.dataset },
-  { label: 'History (soon)', value: PARAMS_SOURCE.history, disabled: true },
+  { label: 'History', value: PARAMS_SOURCE.history },
 ]
 
 type Props = {
@@ -63,7 +63,11 @@ function ParamsTabs({ inputs, setInput, setInputs }: Props) {
         />
       )}
       {selectedTab === PARAMS_SOURCE.history && (
-        <HistoryLogParams inputs={inputs} setInput={setInput} />
+        <HistoryLogParams
+          inputs={inputs}
+          setInput={setInput}
+          setInputs={setInputs}
+        />
       )}
     </div>
   )
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultsTable.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultsTable.tsx
index e1bd72742..806be4a1e 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultsTable.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/evaluations/[evaluationId]/_components/EvaluationResults/EvaluationResultsTable.tsx
@@ -2,6 +2,7 @@ import { forwardRef } from 'react'
 import { capitalize } from 'lodash-es'
 
 import {
+  DEFAULT_PAGINATION_SIZE,
   EvaluationDto,
   EvaluationResultableType,
 } from '@latitude-data/core/browser'
@@ -82,7 +83,8 @@ export const EvaluationResultsTable = forwardRef<HTMLTableElement, Props>(
   ) {
     const searchParams = useSearchParams()
     const page = searchParams.get('page') ?? '1'
-    const pageSize = searchParams.get('pageSize') ?? '25'
+    const pageSize =
+      searchParams.get('pageSize') ?? String(DEFAULT_PAGINATION_SIZE)
     const document = useCurrentDocument()
     const { commit } = useCurrentCommit()
     const { project } = useCurrentProject()
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/index.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/index.tsx
index 23bf0e4c8..249964a6a 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/index.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/_components/DocumentLogs/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
 import { DocumentLogWithMetadataAndError } from '@latitude-data/core/repositories'
 import {
@@ -13,7 +13,9 @@ import {
   EventArgs,
   useSockets,
 } from '$/components/Providers/WebsocketsProvider/useSockets'
+import { useGenerateDocumentLogDetailUrl } from '$/hooks/useGenerateDocumentLogDetailUrl'
 import useDocumentLogs, { documentLogPresenter } from '$/stores/documentLogs'
+import useDocumentLogWithPaginationPosition from '$/stores/documentLogWithPaginationPosition'
 import useProviderLogs from '$/stores/providerLogs'
 import { useSearchParams } from 'next/navigation'
 
@@ -66,10 +68,46 @@ const useDocumentLogSocket = (
   useSockets({ event: 'documentLogCreated', onMessage })
 }
 
+/**
+ * When this page receive ?logUuid=some-uuid it can happen 2 things
+ *
+ *   1. The `page=NUMBER` is correct and `selectedLog` is there.
+ *   2. There is no `page` param or is incorrect `selectedLog` is not there.
+ *
+ * We handle (2) here by looking the right page for the `logUuid` in the URL
+ */
+function useRedirectToLogDetail({
+  selectedLog,
+  documentLogUuid,
+}: {
+  selectedLog: DocumentLogWithMetadataAndError | undefined
+  documentLogUuid: string | undefined
+}) {
+  const mounted = useRef(false)
+  const { data: position, isLoading } = useDocumentLogWithPaginationPosition({
+    documentLogUuid: selectedLog ? undefined : documentLogUuid,
+  })
+  const { url } = useGenerateDocumentLogDetailUrl({
+    documentLogUuid,
+    page: position?.page,
+  })
+  useEffect(() => {
+    if (mounted.current) return
+    if (isLoading || !url) return
+
+    mounted.current = true
+    window.location.href = url
+  }, [url, isLoading])
+}
+
 export function DocumentLogs({
   documentLogs: serverDocumentLogs,
+  selectedLog: serverSelectedLog,
+  documentLogUuid,
 }: {
   documentLogs: DocumentLogWithMetadataAndError[]
+  selectedLog: DocumentLogWithMetadataAndError | undefined
+  documentLogUuid: string | undefined
 }) {
   const tableRef = useRef<HTMLTableElement>(null)
   const sidebarWrapperRef = useRef<HTMLDivElement>(null)
@@ -81,7 +119,7 @@ export function DocumentLogs({
   const { project } = useCurrentProject()
   const [selectedLog, setSelectedLog] = useState<
     DocumentLogWithMetadataAndError | undefined
-  >()
+  >(serverSelectedLog)
   const { data: providerLogs, isLoading: isProviderLogsLoading } =
     useProviderLogs({
       documentLogUuid: selectedLog?.uuid,
@@ -100,6 +138,7 @@ export function DocumentLogs({
   )
 
   useDocumentLogSocket(document.documentUuid, mutate)
+  useRedirectToLogDetail({ selectedLog, documentLogUuid })
 
   if (!documentLogs.length) {
     return (
diff --git a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/page.tsx b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/page.tsx
index ec5f766e1..6c22a9ace 100644
--- a/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/page.tsx
+++ b/apps/web/src/app/(private)/projects/[projectId]/versions/[commitUuid]/documents/[documentUuid]/logs/page.tsx
@@ -26,11 +26,19 @@ export default async function DocumentPage({
     page: searchParams.page as string | undefined,
     pageSize: searchParams.pageSize as string | undefined,
   })
+  const documentLogUuid = searchParams.logUuid?.toString()
+  const selectedLog = rows.find((r) => r.uuid === documentLogUuid)
   return (
     <div className='flex flex-grow min-h-0 flex-col w-full p-6 gap-2 min-w-0'>
       <TableWithHeader
         title='Logs'
-        table={<DocumentLogs documentLogs={rows} />}
+        table={
+          <DocumentLogs
+            documentLogs={rows}
+            documentLogUuid={documentLogUuid}
+            selectedLog={selectedLog}
+          />
+        }
         actions={
           <Link
             href={
diff --git a/apps/web/src/app/api/documentLogs/uuids/[uuid]/with-position/route.ts b/apps/web/src/app/api/documentLogs/uuids/[uuid]/with-position/route.ts
new file mode 100644
index 000000000..cfadcd414
--- /dev/null
+++ b/apps/web/src/app/api/documentLogs/uuids/[uuid]/with-position/route.ts
@@ -0,0 +1,35 @@
+import { Workspace } from '@latitude-data/core/browser'
+import { fetchDocumentLogWithPosition } from '@latitude-data/core/services/documentLogs/fetchDocumentLogWithPosition'
+import { authHandler } from '$/middlewares/authHandler'
+import { errorHandler } from '$/middlewares/errorHandler'
+import { NextRequest, NextResponse } from 'next/server'
+
+export const GET = errorHandler(
+  authHandler(
+    async (
+      _: NextRequest,
+      {
+        params,
+        workspace,
+      }: {
+        params: { uuid: string }
+        workspace: Workspace
+      },
+    ) => {
+      const uuid = params.uuid
+      const result = await fetchDocumentLogWithPosition({
+        workspace,
+        documentLogUuid: uuid,
+      })
+
+      if (result.error) {
+        return NextResponse.json(
+          { message: `Document Log not found with uuid: ${uuid}` },
+          { status: 404 },
+        )
+      }
+
+      return NextResponse.json(result.value, { status: 200 })
+    },
+  ),
+)
diff --git a/apps/web/src/app/api/projects/[projectId]/commits/[commitUuid]/documents/[documentUuid]/documentLogs/route.ts b/apps/web/src/app/api/projects/[projectId]/commits/[commitUuid]/documents/[documentUuid]/documentLogs/route.ts
index 4ce0e57e7..3df68638a 100644
--- a/apps/web/src/app/api/projects/[projectId]/commits/[commitUuid]/documents/[documentUuid]/documentLogs/route.ts
+++ b/apps/web/src/app/api/projects/[projectId]/commits/[commitUuid]/documents/[documentUuid]/documentLogs/route.ts
@@ -1,4 +1,4 @@
-import { Workspace } from '@latitude-data/core/browser'
+import { DEFAULT_PAGINATION_SIZE, Workspace } from '@latitude-data/core/browser'
 import { CommitsRepository } from '@latitude-data/core/repositories'
 import { computeDocumentLogsWithMetadataQuery } from '@latitude-data/core/services/documentLogs/computeDocumentLogsWithMetadata'
 import { authHandler } from '$/middlewares/authHandler'
@@ -29,7 +29,8 @@ export const GET = errorHandler(
         .then((r) => r.unwrap())
 
       const page = searchParams.get('page') ?? '1'
-      const pageSize = searchParams.get('pageSize') ?? '25'
+      const pageSize =
+        searchParams.get('pageSize') ?? String(DEFAULT_PAGINATION_SIZE)
       const rows = await computeDocumentLogsWithMetadataQuery({
         workspaceId: workspace.id,
         documentUuid,
diff --git a/apps/web/src/hooks/useDocumentParameters/index.ts b/apps/web/src/hooks/useDocumentParameters/index.ts
index f901fd7c0..a755fe76e 100644
--- a/apps/web/src/hooks/useDocumentParameters/index.ts
+++ b/apps/web/src/hooks/useDocumentParameters/index.ts
@@ -37,7 +37,12 @@ function convertInput(
     return { value: input, includedInPrompt: true }
   }
 
-  return input
+  if (!newParams) return input
+
+  return {
+    value: typeof input === 'string' ? input : input.value,
+    includedInPrompt: typeof input === 'string' ? true : input.includedInPrompt,
+  }
 }
 
 export function recalculateInputs({
diff --git a/apps/web/src/hooks/useGenerateDocumentLogDetailUrl.ts b/apps/web/src/hooks/useGenerateDocumentLogDetailUrl.ts
new file mode 100644
index 000000000..e43c9cf16
--- /dev/null
+++ b/apps/web/src/hooks/useGenerateDocumentLogDetailUrl.ts
@@ -0,0 +1,27 @@
+import { useCurrentCommit, useCurrentProject } from '@latitude-data/web-ui'
+import { useCurrentDocument } from '$/app/providers/DocumentProvider'
+import { ROUTES } from '$/services/routes'
+
+export function useGenerateDocumentLogDetailUrl({
+  page,
+  documentLogUuid,
+}: {
+  documentLogUuid: string | undefined
+  page: number | undefined
+}) {
+  const document = useCurrentDocument()
+  const { project } = useCurrentProject()
+  const { commit } = useCurrentCommit()
+  const queryParams = `page=${page}&logUuid=${documentLogUuid}`
+  const route = ROUTES.projects
+    .detail({ id: project.id })
+    .commits.detail({ uuid: commit.uuid })
+    .documents.detail({ uuid: document.documentUuid }).logs.root
+
+  const url = `${route}?${queryParams}`
+  if (page === undefined || !documentLogUuid) return { url: undefined }
+
+  return {
+    url,
+  }
+}
diff --git a/apps/web/src/services/routes/api.ts b/apps/web/src/services/routes/api.ts
index d7d343626..838b5a701 100644
--- a/apps/web/src/services/routes/api.ts
+++ b/apps/web/src/services/routes/api.ts
@@ -82,9 +82,13 @@ export const _API_ROUTES = {
       root: `/api/documentLogs/${id}`,
     }),
     uuids: {
-      detail: ({ uuid }: { uuid: string }) => ({
-        root: `/api/documentLogs/uuids/${uuid}`,
-      }),
+      detail: ({ uuid }: { uuid: string }) => {
+        const root = `/api/documentLogs/uuids/${uuid}`
+        return {
+          root,
+          withPosition: `${root}/with-position`,
+        }
+      },
     },
   },
   evaluations: {
diff --git a/apps/web/src/stores/datasetPreviews.ts b/apps/web/src/stores/datasetPreviews.ts
index e0b3c3d0e..1b4b4dd0e 100644
--- a/apps/web/src/stores/datasetPreviews.ts
+++ b/apps/web/src/stores/datasetPreviews.ts
@@ -27,9 +27,7 @@ export default function useDatasetPreview(
     fetcher,
     {
       ...opts,
-      onSuccess: (data) => {
-        onSuccess?.(data)
-      },
+      onSuccess,
     },
   )
 
diff --git a/apps/web/src/stores/documentLogWithMetadata.ts b/apps/web/src/stores/documentLogWithMetadata.ts
index 2b15f7ae3..825260866 100644
--- a/apps/web/src/stores/documentLogWithMetadata.ts
+++ b/apps/web/src/stores/documentLogWithMetadata.ts
@@ -1,32 +1,24 @@
 import { DocumentLogWithMetadata } from '@latitude-data/core/repositories'
+import useFetcher from '$/hooks/useFetcher'
 import { ROUTES } from '$/services/routes'
 import useSWR, { SWRConfiguration } from 'swr'
 
 export default function useDocumentLogWithMetadata(
-  documentLogUuid?: string | null,
+  {
+    documentLogUuid,
+  }: {
+    documentLogUuid?: string | null
+  },
   opts?: SWRConfiguration,
 ) {
+  const fetcher = useFetcher(
+    documentLogUuid
+      ? ROUTES.api.documentLogs.uuids.detail({ uuid: documentLogUuid }).root
+      : undefined,
+  )
   return useSWR<DocumentLogWithMetadata>(
     ['documentLogWithMetadata', documentLogUuid],
-    async () => {
-      if (!documentLogUuid) return []
-
-      const response = await fetch(
-        ROUTES.api.documentLogs.uuids.detail({ uuid: documentLogUuid }).root,
-        {
-          credentials: 'include',
-        },
-      )
-      if (!response.ok) {
-        const error = await response.json()
-
-        console.error(error)
-
-        return []
-      }
-
-      return response.json()
-    },
+    fetcher,
     opts,
   )
 }
diff --git a/apps/web/src/stores/documentLogWithPaginationPosition.ts b/apps/web/src/stores/documentLogWithPaginationPosition.ts
new file mode 100644
index 000000000..bf5e55dee
--- /dev/null
+++ b/apps/web/src/stores/documentLogWithPaginationPosition.ts
@@ -0,0 +1,43 @@
+import useFetcher from '$/hooks/useFetcher'
+import { ROUTES } from '$/services/routes'
+import useSWR, { SWRConfiguration } from 'swr'
+
+export type LogWithPosition = {
+  position: number
+  page: number
+}
+
+export default function useDocumentLogWithPaginationPosition(
+  {
+    documentLogUuid,
+    onFetched,
+  }: {
+    documentLogUuid?: string | null
+    onFetched?: (data: LogWithPosition) => void
+  },
+  opts?: SWRConfiguration,
+) {
+  const fetcher = useFetcher(
+    documentLogUuid
+      ? ROUTES.api.documentLogs.uuids.detail({ uuid: documentLogUuid })
+          .withPosition
+      : undefined,
+  )
+  const { data, isLoading } = useSWR<LogWithPosition>(
+    ['documentLogWithPosition', documentLogUuid],
+    fetcher,
+    {
+      ...opts,
+      onSuccess: (data) => {
+        if (!documentLogUuid) return
+
+        onFetched?.(data)
+      },
+    },
+  )
+
+  return {
+    data,
+    isLoading,
+  }
+}
diff --git a/apps/web/src/stores/documentLogs.ts b/apps/web/src/stores/documentLogs.ts
index 74406ab27..9b877b48e 100644
--- a/apps/web/src/stores/documentLogs.ts
+++ b/apps/web/src/stores/documentLogs.ts
@@ -12,20 +12,24 @@ export default function useDocumentLogs(
     projectId,
     page,
     pageSize,
+    onFetched,
   }: {
-    documentUuid: string
+    documentUuid?: string
     commitUuid: string
     projectId: number
-    page: string | null
+    page: string | null | undefined
     pageSize: string | null
+    onFetched?: (logs: DocumentLogWithMetadataAndError[]) => void
   },
   { fallbackData }: SWRConfiguration = {},
 ) {
   const fetcher = useFetcher(
-    ROUTES.api.projects
-      .detail(projectId)
-      .commits.detail(commitUuid)
-      .documents.detail(documentUuid).documentLogs.root,
+    documentUuid
+      ? ROUTES.api.projects
+          .detail(projectId)
+          .commits.detail(commitUuid)
+          .documents.detail(documentUuid).documentLogs.root
+      : undefined,
     {
       serializer: (rows) => rows.map(documentLogPresenter),
       searchParams: compactObject({
@@ -35,15 +39,22 @@ export default function useDocumentLogs(
     },
   )
 
-  const { data = EMPTY_ARRAY, mutate } = useSWR<
-    DocumentLogWithMetadataAndError[]
-  >(
+  const {
+    data = EMPTY_ARRAY,
+    isLoading,
+    mutate,
+  } = useSWR<DocumentLogWithMetadataAndError[]>(
     ['documentLogs', documentUuid, commitUuid, projectId, page, pageSize],
     fetcher,
-    { fallbackData },
+    {
+      fallbackData,
+      onSuccess: (logs) => {
+        onFetched?.(logs)
+      },
+    },
   )
 
-  return { data, mutate }
+  return { data, mutate, isLoading }
 }
 
 export function documentLogPresenter(
diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts
index 7967078e5..b3b7e2c85 100644
--- a/packages/core/src/constants.ts
+++ b/packages/core/src/constants.ts
@@ -407,3 +407,5 @@ export const resultConfigurationSchema = z.discriminatedUnion('type', [
     valueDescription: z.string().optional(),
   }),
 ])
+
+export const DEFAULT_PAGINATION_SIZE = 25
diff --git a/packages/core/src/lib/pagination/buildPagination.ts b/packages/core/src/lib/pagination/buildPagination.ts
index 98e92ca38..51a703d4c 100644
--- a/packages/core/src/lib/pagination/buildPagination.ts
+++ b/packages/core/src/lib/pagination/buildPagination.ts
@@ -1,3 +1,4 @@
+import { DEFAULT_PAGINATION_SIZE } from '../../constants'
 import {
   buildPaginatedUrl,
   parseSearchParams,
@@ -27,7 +28,7 @@ export function getPaginationParamsWithDefaults({
     page: parsePage(params?.page),
     pageSize: params?.pageSize
       ? Number(params.pageSize)
-      : (defaultPaginate?.pageSize ?? 25),
+      : (defaultPaginate?.pageSize ?? DEFAULT_PAGINATION_SIZE),
   }
 }
 
diff --git a/packages/core/src/services/documentLogs/computeDocumentLogsWithMetadata.ts b/packages/core/src/services/documentLogs/computeDocumentLogsWithMetadata.ts
index 308306176..aab06edc8 100644
--- a/packages/core/src/services/documentLogs/computeDocumentLogsWithMetadata.ts
+++ b/packages/core/src/services/documentLogs/computeDocumentLogsWithMetadata.ts
@@ -1,6 +1,6 @@
 import { and, desc, eq, isNotNull, or, sql } from 'drizzle-orm'
 
-import { Commit } from '../../browser'
+import { Commit, DEFAULT_PAGINATION_SIZE } from '../../browser'
 import { database } from '../../client'
 import { calculateOffset } from '../../lib/pagination/calculateOffset'
 import { DocumentLogsWithMetadataAndErrorsRepository } from '../../repositories/documentLogsWithMetadataAndErrorsRepository'
@@ -39,7 +39,7 @@ export function computeDocumentLogsWithMetadataQuery(
     draft,
     allowAnyDraft,
     page = '1',
-    pageSize = '25',
+    pageSize = String(DEFAULT_PAGINATION_SIZE),
   }: {
     workspaceId: number
     documentUuid?: string
diff --git a/packages/core/src/services/documentLogs/fetchDocumentLogWithPosition.ts b/packages/core/src/services/documentLogs/fetchDocumentLogWithPosition.ts
new file mode 100644
index 000000000..1b6a7c3bc
--- /dev/null
+++ b/packages/core/src/services/documentLogs/fetchDocumentLogWithPosition.ts
@@ -0,0 +1,40 @@
+import { and, eq, sql } from 'drizzle-orm'
+
+import { DEFAULT_PAGINATION_SIZE, Workspace } from '../../browser'
+import { database } from '../../client'
+import { Result } from '../../lib'
+import { documentLogs } from '../../schema'
+import { fetchDocumentLogWithMetadata } from './fetchDocumentLogWithMetadata'
+
+export async function fetchDocumentLogWithPosition(
+  {
+    workspace,
+    documentLogUuid,
+  }: {
+    workspace: Workspace
+    documentLogUuid: string | undefined
+  },
+  db = database,
+) {
+  const log = await fetchDocumentLogWithMetadata({
+    workspaceId: workspace.id,
+    documentLogUuid,
+  }).then((r) => r.unwrap())
+
+  const targetCreatedAtUTC = new Date(log.createdAt).toISOString()
+  const positionResult = await db
+    .select({
+      count: sql`COUNT(*)`.as('count'),
+    })
+    .from(documentLogs)
+    .where(
+      and(
+        sql`${documentLogs.createdAt} > ${targetCreatedAtUTC}`,
+        eq(documentLogs.documentUuid, log.documentUuid),
+      ),
+    )
+
+  const position = Number(positionResult[0]!.count)
+  const page = Math.ceil(position / DEFAULT_PAGINATION_SIZE)
+  return Result.ok({ position, page })
+}
diff --git a/packages/core/src/services/documentLogs/index.ts b/packages/core/src/services/documentLogs/index.ts
index e84b6bf43..1e9f514b0 100644
--- a/packages/core/src/services/documentLogs/index.ts
+++ b/packages/core/src/services/documentLogs/index.ts
@@ -3,5 +3,6 @@ export * from './addMessages'
 export * from './computeDocumentLogWithMetadata'
 export * from './computeDocumentLogsWithMetadata'
 export * from './fetchDocumentLogWithMetadata'
+export * from './fetchDocumentLogWithPosition'
 export * from './bulkUpload'
 export * from './evaluate'
diff --git a/packages/web-ui/src/lib/hooks/useLocalStorage.ts b/packages/web-ui/src/lib/hooks/useLocalStorage.ts
index 5f9f1fb9f..c97582767 100644
--- a/packages/web-ui/src/lib/hooks/useLocalStorage.ts
+++ b/packages/web-ui/src/lib/hooks/useLocalStorage.ts
@@ -15,6 +15,7 @@ export enum AppLocalStorage {
   playgroundInputs = 'playgroundInputs',
   playgroundParameterSource = 'playgroundParameterSource',
   playgroundParamsSelectedDatasetRow = 'playgroundParamsSelectedDatasetRow',
+  playgroundParamsSelectedLogRow = 'playgroundParamsSelectedLogRow',
 }
 
 const isLocalStorageAvailable = (() => {