should be good

.github/workflows/run-tests.yml

@@ -7,42 +7,37 @@ on:
 
 jobs:
   run-tests:
-    name: "Playwright Tests"
     runs-on: ubuntu-latest
-    container:
-      image: mcr.microsoft.com/playwright:v1.43.0-jammy
     steps:
       - uses: actions/checkout@v4
-      - name: Install dependencies
-        run: npm ci
-      # - name: Cache node modules
-      #   id: cache-npm
-      #   uses: actions/cache@v4
-      #   env:
-      #     cache-name: cache-node-modules
-      #   with:
-      #     path: ~/.npm
-      #     key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-      #     restore-keys: |
-      #       ${{ runner.os }}-build-${{ env.cache-name }}-
-      #       ${{ runner.os }}-build-
-      #       ${{ runner.os }}-
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v4
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
 
-      # - name: Cache Playwright binaries
-      #   uses: actions/cache@v4
-      #   id: playwright-cache
-      #   with:
-      #     path: ~/.cache/ms-playwright
-      #     key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
-      #     restore-keys: |
-      #       ${{ runner.os }}-playwright-
+      - name: Cache Playwright binaries
+        uses: actions/cache@v4
+        id: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-playwright-
 
-      # - name: Install dependencies
-      #   run: npm ci
+      - name: Install dependencies
+        run: npm ci
 
-      # - name: Install Playwright
-      #   # if: steps.playwright-cache.outputs.cache-hit != 'true'
-      #   run: npx playwright install --with-deps chromium
+      - name: Install Playwright
+        # if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: npx playwright install --with-deps chromium
 
       - name: Start backend
         env:
@@ -65,16 +60,11 @@ jobs:
       - name: Run tests
         run: npx playwright test
         env:
-          HOME: /root
-
-      # - name: Run tests
-      #   run: npx playwright test
-      #   env:
-      #     BASE_URL: http://0.0.0.0:8080
-      #     DATABASE_URL: ${{ secrets.DATABASE_URL }}
-      # - uses: actions/upload-artifact@v4
-      #   if: ${{ !cancelled() }}
-      #   with:
-      #     name: playwright-report
-      #     path: playwright-report/
-      #     retention-days: 30
+          BASE_URL: http://0.0.0.0:8080
+          DATABASE_URL: ${{ secrets.DATABASE_URL }}
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

e2e/logs.spec.ts

@@ -15,8 +15,11 @@ test("make a log public", async ({ page, context }) => {
 
   await page.getByTestId("make-log-public-switch").click()
 
-  await page.getByTestId("copy-log-url-button").click()
-  publicLogUrl = await page.evaluate(() => navigator.clipboard.readText())
+  publicLogUrl = await page.evaluate(() => {
+    const urlParams = new URLSearchParams(window.location.search)
+    const selected = urlParams.get("selected")
+    return `${window.location.origin}/logs/${selected}`
+  })
 })
 
 test("unauthenticated user can access public log URL", async ({ browser }) => {

packages/frontend/components/blocks/CopyText.tsx

@@ -8,15 +8,14 @@ import {
 } from "@mantine/core"
 import { IconCheck, IconCopy } from "@tabler/icons-react"
 
-export const SuperCopyButton = ({ value, ...props }) => (
+export const SuperCopyButton = ({ value }) => (
   <CopyButton value={value} timeout={2000}>
     {({ copied, copy }) => (
       <Tooltip label={copied ? "Copied" : "Copy"} position="right">
         <ActionIcon
           color={copied ? "teal" : "gray"}
           variant="transparent"
           onClick={copy}
-          {...props}
         >
           {copied ? <IconCheck size="16px" /> : <IconCopy size="16px" />}
         </ActionIcon>

packages/frontend/components/blocks/RunInputOutput.tsx

@@ -167,8 +167,11 @@ export default function RunInputOutput({
                     URL to share {run?.isPublic ? "" : "with your team"}
                   </Text>
                   <SuperCopyButton
-                    data-testid="copy-log-url-button"
-                    value={`${window.location.origin}/logs/${run.id}`}
+                    value={
+                      run?.isPublic
+                        ? `${window.location.origin}/logs/${run.id}`
+                        : `${window.location.origin}/logs?selected=${run.id}`
+                    }
                   />
                 </Group>
                 {hasAccess(user.role, "logs", "update") && (

packages/frontend/pages/logs/index.tsx

@@ -50,9 +50,9 @@ import { formatDateTime } from "@/utils/format"
 import { fetcher } from "@/utils/fetcher"
 import { useProject, useOrg, useProjectInfiniteSWR } from "@/utils/dataHooks"
 import { useDebouncedState, useDidUpdate } from "@mantine/hooks"
-import Router from "next/router"
 import { ProjectContext } from "@/utils/context"
 import { CheckLogic, deserializeLogic, serializeLogic } from "shared"
+import { useRouter } from "next/router"
 
 const columns = {
   llm: [
@@ -135,6 +135,7 @@ const editCheck = (filters, id, params) => {
 }
 
 export default function Logs() {
+  const router = useRouter()
   const { projectId } = useContext(ProjectContext)
   const { project, isLoading: projectLoading } = useProject()
   const { org } = useOrg()
@@ -144,11 +145,11 @@ export default function Logs() {
     { id: "type", params: { type: "llm" } },
   ])
   const [showCheckBar, setShowCheckBar] = useState(false)
-  const [selected, setSelected] = useState(null)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
   const [serializedChecks, setSerializedChecks] = useState<string>("")
   const [type, setType] = useState<"llm" | "trace" | "thread">("llm")
 
-  const [query, setQuery] = useDebouncedState("", 300)
+  const [query, setQuery] = useDebouncedState<string | null>(null, 300)
 
   const {
     data: logs,
@@ -157,34 +158,54 @@ export default function Logs() {
     loadMore,
   } = useProjectInfiniteSWR(`/runs?${serializedChecks}`)
 
+  const selectedLog = logs?.filter(({ id }) => id === selectedId)[0]
+
   useDidUpdate(() => {
-    const serialized = serializeLogic(filters)
+    let serialized = serializeLogic(filters)
 
     if (typeof serialized === "string") {
       setSerializedChecks(serialized)
-      Router.replace(`/logs?${serialized}`)
+      if (selectedId) {
+        serialized += `&selected=${selectedId}`
+      }
+      router.replace(`/logs?${serialized}`)
     }
   }, [filters])
 
   useEffect(() => {
-    // restore filters from query params
+    // restore filters and selected log from query params
     try {
-      const params = window.location.search.replace("?", "")
-      if (params) {
-        const type = new URLSearchParams(params).get("type") || "llm"
-        if (type) setType(type as any)
+      const urlParams = new URLSearchParams(window.location.search)
+
+      const selectedId = urlParams.get("selected")
+      setSelectedId(selectedId)
+
+      const type = urlParams.get("type")
+      if (type === "llm" || type === "trace" || type === "thread") {
+        setType(type)
+      }
 
-        const search = new URLSearchParams(params).get("search")
-        if (search) setQuery(search as any)
+      const search = urlParams.get("search")
+      setQuery(search)
 
-        const filtersData = deserializeLogic(params)
-        if (filtersData) setChecks(filtersData)
+      const filtersData = deserializeLogic(urlParams.toString())
+      if (filtersData) {
+        setChecks(filtersData)
       }
     } catch (e) {
       console.error(e)
     }
   }, [])
 
+  useEffect(() => {
+    if (selectedId) {
+      router.push({
+        pathname: router.pathname,
+        query: { ...router.query, selected: selectedId },
+      })
+    }
+  }, [selectedId])
+
   useDidUpdate(() => {
     // Change type filter and remove filters imcompatible with type
     const newChecks = editCheck(filters, "type", { type }).filter(
@@ -348,33 +369,33 @@ export default function Logs() {
         </Stack>
 
         <Drawer
-          opened={!!selected}
+          opened={!!selectedId}
           size="xl"
           keepMounted
           position="right"
-          title={selected ? formatDateTime(selected.createdAt) : ""}
-          onClose={() => setSelected(null)}
+          title={selectedLog ? formatDateTime(selectedLog.createdAt) : ""}
+          onClose={() => setSelectedId(null)}
         >
-          {selected?.type === "llm" && (
+          {selectedLog?.type === "llm" && (
             <RunInputOutput
-              initialRun={selected}
+              initialRun={selectedLog}
               withPlayground={true}
               withShare={true}
             />
           )}
 
-          {selected?.type === "thread" && <ChatReplay run={selected} />}
+          {selectedLog?.type === "thread" && <ChatReplay run={selectedLog} />}
         </Drawer>
 
         <DataTable
           type={type}
           onRowClicked={(row) => {
             if (["agent", "chain"].includes(row.type)) {
               analytics.trackOnce("OpenTrace")
-              Router.push(`/traces/${row.id}`)
+              router.push(`/traces/${row.id}`)
             } else {
               analytics.trackOnce("OpenRun")
-              setSelected(row)
+              setSelectedId(row.id)
             }
           }}
           loading={loading || validating}