opencode/packages/app/e2e/performance/timeline/session-tab-switch-probe.ts

import { expect, type Page } from "@playwright/test"
import { classifySessionSwitch, isStableDestination, type SessionSwitchSample } from "./session-tab-switch-metrics"

type SessionSwitchProbe = {
  samples: SessionSwitchSample[]
  stop: () => void
}

async function installSessionSwitchProbe(
  page: Page,
  input: {
    destinationIDs: string[]
    sourceIDs: string[]
    lastID: string
    requiredPartID?: string
    requireBottomAnchor?: boolean
    href: string
  },
) {
  await page.evaluate(({ destinationIDs, sourceIDs, lastID, requiredPartID, requireBottomAnchor, href }) => {
    const destination = new Set(destinationIDs)
    const source = new Set(sourceIDs)
    const samples: SessionSwitchSample[] = []
    let started: number | undefined
    let running = true
    const reviewLevels: Record<string, string> = {
      panel: "#review-panel",
      tabs: '#review-panel [data-component="tabs"]',
      body: '#review-panel [data-slot="session-review-v2-body"]',
      review: '#review-panel [data-component="session-review-v2"]',
      preview: '#review-panel [data-slot="session-review-v2-preview"]',
      scroll: '#review-panel [data-slot="session-review-v2-diff-scroll"]',
      file: '#review-panel [data-component="file"][data-mode="diff"]',
    }
    const initialReviewNodes: Record<string, Element | null> = {}
    const sample = () => {
      if (!running || started === undefined) return
      setTimeout(() => {
        if (!running || started === undefined) return
        const observedAtMs = performance.now() - started
        const reviewPanel = document.querySelector<HTMLElement>("#review-panel")
        const reviewFile = reviewPanel?.querySelector('[data-component="file"][data-mode="diff"]')
        const initialReviewFile = initialReviewNodes.file
        const replacedLevels = Object.entries(reviewLevels).flatMap(([name, selector]) => {
          const initial = initialReviewNodes[name]
          if (!initial) return []
          const current = document.querySelector(selector)
          return current && current !== initial ? [name] : []
        })
        const review = reviewPanel
          ? {
              fileHost: !!reviewFile,
              fileHostReplaced: !!initialReviewFile && !!reviewFile && reviewFile !== initialReviewFile,
              header:
                reviewPanel
                  .querySelector<HTMLElement>('[data-slot="session-review-v2-file-header"]')
                  ?.textContent?.trim() ?? "",
              replacedLevels,
            }
          : undefined
        const root = [...document.querySelectorAll<HTMLElement>(".scroll-view__viewport")].find((element) =>
          element.querySelector("[data-timeline-row]"),
        )
        if (root) {
          const view = root.getBoundingClientRect()
          const visible = [...root.querySelectorAll<HTMLElement>("[data-message-id]")]
            .filter((element) => {
              const rect = element.getBoundingClientRect()
              return rect.bottom > view.top && rect.top < view.bottom
            })
            .map((element) => element.dataset.messageId!)
          const hasVisibleRows = [...root.querySelectorAll<HTMLElement>("[data-timeline-key]")].some((element) => {
            const rect = element.getBoundingClientRect()
            return rect.bottom > view.top && rect.top < view.bottom
          })
          const requiredPartVisible = requiredPartID
            ? [...root.querySelectorAll<HTMLElement>("[data-timeline-part-id]")].some((element) => {
                if (element.dataset.timelinePartId !== requiredPartID) return false
                const rect = element.getBoundingClientRect()
                return rect.width > 0 && rect.height > 0 && rect.bottom > view.top && rect.top < view.bottom
              })
            : undefined
          const spacer = root.querySelector<HTMLElement>('[data-timeline-row="bottom-spacer"]')?.getBoundingClientRect()
          samples.push({
            observedAtMs,
            destination: visible.filter((id) => destination.has(id)),
            source: visible.filter((id) => source.has(id)),
            hasVisibleRows,
            last: visible.includes(lastID),
            requiredPartVisible,
            bottomAnchorRequired: requireBottomAnchor !== false,
            bottomErrorPx: spacer ? spacer.bottom - view.bottom : undefined,
            review,
          })
        } else {
          samples.push({
            observedAtMs,
            destination: [],
            source: [],
            hasVisibleRows: false,
            last: false,
            requiredPartVisible: requiredPartID ? false : undefined,
            bottomAnchorRequired: requireBottomAnchor !== false,
            review,
          })
        }
        requestAnimationFrame(sample)
      }, 0)
    }
    document.addEventListener(
      "click",
      (event) => {
        const link = event.target instanceof Element ? event.target.closest("a") : undefined
        if (link?.getAttribute("href") !== href) return
        started = performance.now()
        for (const [name, selector] of Object.entries(reviewLevels)) {
          initialReviewNodes[name] = document.querySelector(selector)
        }
        requestAnimationFrame(sample)
      },
      { capture: true, once: true },
    )
    ;(window as Window & { __sessionSwitchProbe?: SessionSwitchProbe }).__sessionSwitchProbe = {
      samples,
      stop: () => {
        running = false
      },
    }
  }, input)
}

async function waitForStableSessionSwitch(page: Page) {
  await page.waitForFunction(() => {
    const samples = (window as Window & { __sessionSwitchProbe?: SessionSwitchProbe }).__sessionSwitchProbe?.samples
    if (!samples) return false
    return samples.some((_, index) => {
      const stable = samples.slice(index, index + 3)
      return (
        stable.length === 3 &&
        stable.every(
          (sample) =>
            sample.destination.length > 0 &&
            sample.source.length === 0 &&
            sample.last &&
            sample.requiredPartVisible !== false &&
            (sample.bottomAnchorRequired === false || Math.abs(sample.bottomErrorPx ?? Infinity) <= 1),
        )
      )
    })
  })
}

async function collectSessionSwitchResult(page: Page) {
  const samples = await page.evaluate(() => {
    const probe = (window as Window & { __sessionSwitchProbe?: SessionSwitchProbe }).__sessionSwitchProbe!
    probe.stop()
    return probe.samples
  })
  return classifySessionSwitch(samples)
}

export async function measureSessionSwitch(
  page: Page,
  input: {
    destinationIDs: string[]
    sourceIDs: string[]
    lastID: string
    requiredPartID?: string
    requireBottomAnchor?: boolean
    href: string
    switch: () => Promise<void>
  },
) {
  const { switch: run, ...probe } = input
  await installSessionSwitchProbe(page, probe)
  try {
    await run()
    await waitForStableSessionSwitch(page)
    return await collectSessionSwitchResult(page)
  } finally {
    await page.evaluate(() => {
      ;(window as Window & { __sessionSwitchProbe?: SessionSwitchProbe }).__sessionSwitchProbe?.stop()
    })
  }
}

export async function waitForStableTimeline(page: Page, lastID: string) {
  const samples: Pick<SessionSwitchSample, "last" | "bottomErrorPx">[] = []
  await expect
    .poll(
      async () => {
        samples.push(
          await page.evaluate(
            (lastID) =>
              new Promise<Pick<SessionSwitchSample, "last" | "bottomErrorPx">>((resolve) => {
                requestAnimationFrame(() =>
                  setTimeout(() => {
                    const root = [...document.querySelectorAll<HTMLElement>(".scroll-view__viewport")].find((element) =>
                      element.querySelector("[data-timeline-row]"),
                    )
                    if (!root) {
                      resolve({ last: false })
                      return
                    }
                    const view = root.getBoundingClientRect()
                    const last = [...root.querySelectorAll<HTMLElement>("[data-message-id]")].some((element) => {
                      if (element.dataset.messageId !== lastID) return false
                      const rect = element.getBoundingClientRect()
                      return rect.bottom > view.top && rect.top < view.bottom
                    })
                    const spacer = root
                      .querySelector<HTMLElement>('[data-timeline-row="bottom-spacer"]')
                      ?.getBoundingClientRect()
                    resolve({ last, bottomErrorPx: spacer ? spacer.bottom - view.bottom : undefined })
                  }, 0),
                )
              }),
            lastID,
          ),
        )
        return isStableDestination(samples.slice(-3))
      },
      { timeout: 30_000, intervals: [0] },
    )
    .toBe(true)
}