From 1410edb3e91c767ecb41e7f23f67cd61357b0171 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Wed, 27 May 2026 15:02:29 +0200
Subject: [PATCH 01/11] layout: setup new page for session details

---
 ui/src/app.tsx                                |  2 +-
 .../new/hooks/useActiveCapture.ts             | 17 ++++
 .../new/hooks/useActiveOccurrences.ts         | 21 +++++
 .../session-details/new/session-details.tsx   | 93 +++++++++++++++++++
 .../session-details/new/session-info.tsx      | 63 +++++++++++++
 .../session-details/new/session-plots.tsx     | 22 +++++
 ui/src/utils/language.ts                      |  1 +
 7 files changed, 218 insertions(+), 1 deletion(-)
 create mode 100644 ui/src/pages/session-details/new/hooks/useActiveCapture.ts
 create mode 100644 ui/src/pages/session-details/new/hooks/useActiveOccurrences.ts
 create mode 100644 ui/src/pages/session-details/new/session-details.tsx
 create mode 100644 ui/src/pages/session-details/new/session-info.tsx
 create mode 100644 ui/src/pages/session-details/new/session-plots.tsx

diff --git a/ui/src/app.tsx b/ui/src/app.tsx
index 5f686e0e2..f882c8d06 100644
--- a/ui/src/app.tsx
+++ b/ui/src/app.tsx
@@ -36,7 +36,7 @@ import { Storage } from 'pages/project/storage/storage'
 import { Summary } from 'pages/project/summary/summary'
 import { Team } from 'pages/project/team/team'
 import { Projects } from 'pages/projects/projects'
-import SessionDetails from 'pages/session-details/session-details'
+import SessionDetails from 'pages/session-details/new/session-details'
 import { Sessions } from 'pages/sessions/sessions'
 import { Species } from 'pages/species/species'
 import { TaxaListDetails } from 'pages/taxa-list-details/taxa-list-details'
diff --git a/ui/src/pages/session-details/new/hooks/useActiveCapture.ts b/ui/src/pages/session-details/new/hooks/useActiveCapture.ts
new file mode 100644
index 000000000..6fb8d4862
--- /dev/null
+++ b/ui/src/pages/session-details/new/hooks/useActiveCapture.ts
@@ -0,0 +1,17 @@
+import { useSearchParams } from 'react-router-dom'
+
+const SEARCH_PARAM_KEY = 'capture'
+
+export const useActiveCaptureId = (defaultValue?: string) => {
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const activeCaptureId = searchParams.get(SEARCH_PARAM_KEY) ?? defaultValue
+
+  const setActiveCaptureId = (captureId: string) => {
+    searchParams.delete(SEARCH_PARAM_KEY)
+    searchParams.set(SEARCH_PARAM_KEY, captureId)
+    setSearchParams(searchParams, { replace: true })
+  }
+
+  return { activeCaptureId, setActiveCaptureId }
+}
diff --git a/ui/src/pages/session-details/new/hooks/useActiveOccurrences.ts b/ui/src/pages/session-details/new/hooks/useActiveOccurrences.ts
new file mode 100644
index 000000000..79115b79f
--- /dev/null
+++ b/ui/src/pages/session-details/new/hooks/useActiveOccurrences.ts
@@ -0,0 +1,21 @@
+import { useCallback } from 'react'
+import { useSearchParams } from 'react-router-dom'
+
+const SEARCH_PARAM_KEY = 'occurrence'
+
+export const useActiveOccurrences = () => {
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const activeOccurrences = searchParams.getAll(SEARCH_PARAM_KEY)
+
+  const setActiveOccurrences = useCallback(
+    (occurrences: string[]) => {
+      searchParams.delete(SEARCH_PARAM_KEY)
+      occurrences.forEach((o) => searchParams.append(SEARCH_PARAM_KEY, o))
+      setSearchParams(searchParams, { replace: true })
+    },
+    [searchParams, setSearchParams]
+  )
+
+  return { activeOccurrences, setActiveOccurrences }
+}
diff --git a/ui/src/pages/session-details/new/session-details.tsx b/ui/src/pages/session-details/new/session-details.tsx
new file mode 100644
index 000000000..fc75afd2a
--- /dev/null
+++ b/ui/src/pages/session-details/new/session-details.tsx
@@ -0,0 +1,93 @@
+import { ErrorState } from 'components/error-state/error-state'
+import { useSessionDetails } from 'data-services/hooks/sessions/useSessionDetails'
+import { Box, LoadingSpinner, PageHeader, Tabs } from 'nova-ui-kit'
+import { useContext, useEffect } from 'react'
+import { Helmet } from 'react-helmet-async'
+import { useParams } from 'react-router-dom'
+import { BreadcrumbContext } from 'utils/breadcrumbContext'
+import { STRING, translate } from 'utils/language'
+import { useActiveCaptureId } from './hooks/useActiveCapture'
+import { useActiveOccurrences } from './hooks/useActiveOccurrences'
+import { SessionInfo } from './session-info'
+import { SessionPlots } from './session-plots'
+
+const TABS = {
+  FIELDS: 'fields',
+  CHARTS: 'charts',
+}
+
+export const SessionDetails = () => {
+  const { id } = useParams()
+  const { setDetailBreadcrumb } = useContext(BreadcrumbContext)
+  const { activeOccurrences } = useActiveOccurrences()
+  const { activeCaptureId } = useActiveCaptureId()
+  const { session, isLoading, error } = useSessionDetails(id as string, {
+    capture: activeCaptureId,
+    occurrence: activeOccurrences[0],
+  })
+
+  useEffect(() => {
+    setDetailBreadcrumb(session ? { title: session.label } : undefined)
+
+    return () => {
+      setDetailBreadcrumb(undefined)
+    }
+  }, [session])
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[320px]">
+        <LoadingSpinner />
+      </div>
+    )
+  }
+
+  if (!session || error) {
+    return <ErrorState error={error} />
+  }
+
+  return (
+    <>
+      <Helmet>
+        <meta name="og:image" content={session.exampleCaptures[0]?.src} />
+      </Helmet>
+      <PageHeader
+        title={session.label}
+        subTitle={translate(STRING.RESULTS_CAPTURES, {
+          total: session?.numImages ?? 0,
+        })}
+        isLoading={isLoading}
+        tooltip={translate(STRING.TOOLTIP_SESSION)}
+      />
+      <div className="flex flex-col gap-6 mt-6 md:flex-row">
+        <Box className="p-2 bg-background rounded-lg md:min-w-72 md:p-4 md:rounded-xl">
+          <Tabs.Root defaultValue={TABS.FIELDS}>
+            <Tabs.List>
+              <Tabs.Trigger
+                value={TABS.FIELDS}
+                label={translate(STRING.TAB_ITEM_FIELDS)}
+              />
+              <Tabs.Trigger
+                value={TABS.CHARTS}
+                label={translate(STRING.TAB_ITEM_CHARTS)}
+              />
+            </Tabs.List>
+            <Tabs.Content value={TABS.FIELDS}>
+              <SessionInfo session={session} />
+            </Tabs.Content>
+            <Tabs.Content value={TABS.CHARTS}>
+              <div className="w-96 space-y-4">
+                <SessionPlots session={session} />
+              </div>
+            </Tabs.Content>
+          </Tabs.Root>
+        </Box>
+        <div className="grow rounded-lg aspect-video border border-border md:rounded-xl">
+          <></>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default SessionDetails
diff --git a/ui/src/pages/session-details/new/session-info.tsx b/ui/src/pages/session-details/new/session-info.tsx
new file mode 100644
index 000000000..325ae8831
--- /dev/null
+++ b/ui/src/pages/session-details/new/session-info.tsx
@@ -0,0 +1,63 @@
+import { SessionDetails } from 'data-services/models/session-details'
+import { InfoBlock } from 'nova-ui-kit'
+import { useParams } from 'react-router-dom'
+import { APP_ROUTES } from 'utils/constants'
+import { getAppRoute } from 'utils/getAppRoute'
+import { STRING, translate } from 'utils/language'
+
+export const SessionInfo = ({ session }: { session: SessionDetails }) => {
+  const { projectId } = useParams()
+
+  const fields = [
+    {
+      label: translate(STRING.FIELD_LABEL_ID),
+      value: session.id,
+    },
+    {
+      label: translate(STRING.FIELD_LABEL_DEPLOYMENT),
+      value: session.deploymentLabel,
+      to: APP_ROUTES.DEPLOYMENT_DETAILS({
+        projectId: projectId as string,
+        deploymentId: session.deploymentId,
+      }),
+    },
+    {
+      label: translate(STRING.FIELD_LABEL_DATE),
+      value: session.datespanLabel,
+    },
+    {
+      label: translate(STRING.FIELD_LABEL_TIME),
+      value: session.timespanLabel,
+    },
+    {
+      label: translate(STRING.FIELD_LABEL_DURATION),
+      value: session.durationLabel,
+    },
+    {
+      label: translate(STRING.FIELD_LABEL_CAPTURES),
+      value: session.numImages,
+    },
+    {
+      label: translate(STRING.FIELD_LABEL_OCCURRENCES),
+      value: session.numOccurrences,
+      to: getAppRoute({
+        to: APP_ROUTES.OCCURRENCES({ projectId: projectId as string }),
+        filters: { event: session.id },
+      }),
+    },
+    ...(session.numTaxa !== undefined
+      ? [
+          {
+            label: translate(STRING.FIELD_LABEL_TAXA),
+            value: session.numTaxa,
+            to: getAppRoute({
+              to: APP_ROUTES.TAXA({ projectId: projectId as string }),
+              filters: { event: session.id },
+            }),
+          },
+        ]
+      : []),
+  ]
+
+  return <InfoBlock fields={fields} />
+}
diff --git a/ui/src/pages/session-details/new/session-plots.tsx b/ui/src/pages/session-details/new/session-plots.tsx
new file mode 100644
index 000000000..e601cd119
--- /dev/null
+++ b/ui/src/pages/session-details/new/session-plots.tsx
@@ -0,0 +1,22 @@
+import { Plot } from 'components/plot/lazy-plot'
+import { SessionDetails } from 'data-services/models/session-details'
+
+export const SessionPlots = ({ session }: { session: SessionDetails }) => (
+  <>
+    {session.summaryData.map((summary, index) => {
+      if (summary.data.x.length <= 1) {
+        return null
+      }
+
+      return (
+        <Plot
+          key={index}
+          data={summary.data}
+          orientation={summary.orientation}
+          title={summary.title}
+          type={summary.type}
+        />
+      )
+    })}
+  </>
+)
diff --git a/ui/src/utils/language.ts b/ui/src/utils/language.ts
index e432a04d7..8cf0b7214 100644
--- a/ui/src/utils/language.ts
+++ b/ui/src/utils/language.ts
@@ -314,6 +314,7 @@ export enum STRING {
   REJECT_ID,
   REMOVE_MEMBER,
   REMOVE_TAXA_LIST_TAXON,
+  RESULTS_CAPTURES,
   RESULTS_MEMBERS,
   RESULTS,
   SELECT_COLUMNS,

From 3f33386727d616fef6d7e9b9e2274ccff976ebd9 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Wed, 27 May 2026 15:47:42 +0200
Subject: [PATCH 02/11] layout: render capture and include capture navigation
 and star button

---
 .../new/capture-navigation.tsx                | 112 ++++++
 .../new/capture/capture.module.scss           |  70 ++++
 .../session-details/new/capture/capture.tsx   | 318 ++++++++++++++++++
 .../session-details/new/session-details.tsx   | 132 ++++++--
 .../pages/session-details/new/star-button.tsx |  44 +++
 ui/src/pages/session-details/new/utils.tsx    |  81 +++++
 6 files changed, 728 insertions(+), 29 deletions(-)
 create mode 100644 ui/src/pages/session-details/new/capture-navigation.tsx
 create mode 100644 ui/src/pages/session-details/new/capture/capture.module.scss
 create mode 100644 ui/src/pages/session-details/new/capture/capture.tsx
 create mode 100644 ui/src/pages/session-details/new/star-button.tsx
 create mode 100644 ui/src/pages/session-details/new/utils.tsx

diff --git a/ui/src/pages/session-details/new/capture-navigation.tsx b/ui/src/pages/session-details/new/capture-navigation.tsx
new file mode 100644
index 000000000..050a86bb4
--- /dev/null
+++ b/ui/src/pages/session-details/new/capture-navigation.tsx
@@ -0,0 +1,112 @@
+import { CaptureDetails } from 'data-services/models/capture-details'
+import { TimelineTick } from 'data-services/models/timeline-tick'
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
+import { Button } from 'nova-ui-kit'
+import { useEffect, useState } from 'react'
+import { STRING, translate } from 'utils/language'
+import { findClosestCaptureId } from './utils'
+
+export const CaptureNavigation = ({
+  activeCapture,
+  snapToDetections,
+  timeline,
+  setActiveCaptureId,
+}: {
+  activeCapture?: CaptureDetails
+  snapToDetections?: boolean
+  timeline: TimelineTick[]
+  setActiveCaptureId: (captureId: string) => void
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(activeCapture?.currentIndex)
+  const [totalCaptures, setTotalCaptures] = useState(
+    activeCapture?.totalCaptures
+  )
+
+  useEffect(() => {
+    if (activeCapture) {
+      setCurrentIndex(activeCapture.currentIndex)
+      setTotalCaptures(activeCapture.totalCaptures)
+    }
+  }, [activeCapture])
+
+  const goToPrev = () => {
+    if (!activeCapture) {
+      return
+    }
+
+    const prevCaptureId = snapToDetections
+      ? findClosestCaptureId({
+          maxDate: activeCapture.date,
+          snapToDetections: true,
+          targetDate: activeCapture.date,
+          timeline,
+        })
+      : activeCapture.prevCaptureId
+
+    if (prevCaptureId) {
+      setActiveCaptureId(prevCaptureId)
+    }
+  }
+
+  const goToNext = () => {
+    if (!activeCapture) {
+      return
+    }
+
+    const nextCaptureId = snapToDetections
+      ? findClosestCaptureId({
+          minDate: activeCapture.date,
+          snapToDetections: true,
+          targetDate: activeCapture.date,
+          timeline,
+        })
+      : activeCapture.nextCaptureId
+
+    if (nextCaptureId) {
+      setActiveCaptureId(nextCaptureId)
+    }
+  }
+
+  // Listen to key down events
+  useEffect(() => {
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowLeft') {
+        e.preventDefault()
+        goToPrev()
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault()
+        goToNext()
+      }
+    }
+
+    document.addEventListener('keydown', onKeyDown)
+
+    return () => document.removeEventListener('keydown', onKeyDown)
+  }, [goToPrev, goToNext])
+
+  return (
+    <div className="flex items-center justify-center gap-4">
+      <Button
+        aria-label={translate(STRING.PREVIOUS)}
+        disabled={!activeCapture?.prevCaptureId}
+        onClick={goToPrev}
+        size="icon"
+        variant="outline"
+      >
+        <ChevronLeftIcon className="w-4 h-4" />
+      </Button>
+      <span className="pt-0.5">
+        {currentIndex?.toLocaleString()} / {totalCaptures?.toLocaleString()}
+      </span>
+      <Button
+        aria-label={translate(STRING.NEXT)}
+        disabled={!activeCapture?.nextCaptureId}
+        onClick={goToNext}
+        size="icon"
+        variant="outline"
+      >
+        <ChevronRightIcon className="w-4 h-4" />
+      </Button>
+    </div>
+  )
+}
diff --git a/ui/src/pages/session-details/new/capture/capture.module.scss b/ui/src/pages/session-details/new/capture/capture.module.scss
new file mode 100644
index 000000000..04ddb8334
--- /dev/null
+++ b/ui/src/pages/session-details/new/capture/capture.module.scss
@@ -0,0 +1,70 @@
+.wrapper {
+  position: relative;
+  width: 100%;
+  height: 0;
+}
+
+.image,
+.overlay,
+.details,
+.detections,
+.loadingWrapper {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.details {
+  .overlay {
+    opacity: 0;
+    transition: opacity 250ms ease-in-out;
+  }
+
+  &.showOverlay {
+    .overlay {
+      opacity: 1;
+    }
+  }
+}
+
+.detection {
+  position: absolute;
+  box-sizing: border-box;
+  outline: 2px solid var(--color-success);
+  border-radius: 2px;
+
+  &.warning {
+    outline-color: var(--color-warning);
+  }
+
+  &.alert {
+    outline-color: var(--color-destructive);
+  }
+
+  &.filtered {
+    outline: 2px solid var(--color-neutral-500);
+  }
+
+  &.active {
+    outline: 2px solid var(--color-secondary-400);
+  }
+
+  &.clickable {
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+.loadingWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media only screen and (max-width: $breakpoint-md) {
+  .wrapper {
+    grid-column: span 2;
+  }
+}
diff --git a/ui/src/pages/session-details/new/capture/capture.tsx b/ui/src/pages/session-details/new/capture/capture.tsx
new file mode 100644
index 000000000..d2c61fb7d
--- /dev/null
+++ b/ui/src/pages/session-details/new/capture/capture.tsx
@@ -0,0 +1,318 @@
+import classNames from 'classnames'
+import { DeterminationScore } from 'components/determination-score'
+import { useOccurrenceDetails } from 'data-services/hooks/occurrences/useOccurrenceDetails'
+import { CaptureDetection } from 'data-services/models/capture'
+import { Dialog, LoadingSpinner, Tooltip } from 'nova-ui-kit'
+import {
+  OccurrenceDetails,
+  TABS,
+} from 'pages/occurrence-details/occurrence-details'
+import { useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { SCORE_THRESHOLDS } from 'utils/constants'
+import { STRING, translate } from 'utils/language'
+import { useActiveOccurrences } from '../hooks/useActiveOccurrences'
+import styles from './capture.module.scss'
+
+const FALLBACK_RATIO = 16 / 9
+
+interface BoxStyle {
+  width: string
+  height: string
+  top: string
+  left: string
+}
+
+interface CaptureProps {
+  defaultFilters: boolean
+  detections: CaptureDetection[]
+  height: number | null
+  showDetections?: boolean
+  src?: string
+  width: number | null
+}
+
+export const Capture = ({
+  defaultFilters,
+  detections,
+  height,
+  showDetections,
+  src,
+  width,
+}: CaptureProps) => {
+  const [naturalSize, setNaturalSize] = useState<{
+    width: number
+    height: number
+  }>()
+  const imageRef = useRef<HTMLImageElement>(null)
+  const [isLoading, setIsLoading] = useState<boolean>()
+  const [renderOverlay, setRenderOverlay] = useState<boolean>()
+
+  useLayoutEffect(() => {
+    if (!imageRef.current) {
+      return
+    }
+
+    setIsLoading(true)
+    setNaturalSize(undefined)
+
+    if (src) {
+      imageRef.current.src = src
+      imageRef.current.onload = () => {
+        if (imageRef.current?.width && imageRef.current.height) {
+          setNaturalSize({
+            width: imageRef.current.naturalWidth,
+            height: imageRef.current.naturalHeight,
+          })
+        }
+        setIsLoading(false)
+      }
+
+      imageRef.current.onerror = () => {
+        setNaturalSize(undefined)
+        setIsLoading(false)
+      }
+    }
+  }, [src])
+
+  useLayoutEffect(() => {
+    // Ugly hack to make overlay correct on first render
+    setRenderOverlay(true)
+  }, [])
+
+  const boxStyles = useMemo(
+    () =>
+      detections.reduce((result: { [key: string]: BoxStyle }, detection) => {
+        const [boxLeft, boxTop, boxRight, boxBottom] = detection.bbox
+        const boxWidth = boxRight - boxLeft
+        const boxHeight = boxBottom - boxTop
+
+        const _width = naturalSize?.width ?? width
+        const _height = naturalSize?.height ?? height
+
+        if (!_width || !_height) {
+          return result
+        }
+
+        result[detection.id] = {
+          width: `${(boxWidth / _width) * 100}%`,
+          height: `${(boxHeight / _height) * 100}%`,
+          top: `${(boxTop / _height) * 100}%`,
+          left: `${(boxLeft / _width) * 100}%`,
+        }
+
+        return result
+      }, {}),
+    [width, height, naturalSize, detections]
+  )
+
+  const ratio = useMemo(() => {
+    if (naturalSize) {
+      return naturalSize.width / naturalSize.height
+    }
+
+    if (width && height) {
+      return width / height
+    }
+
+    return FALLBACK_RATIO
+  }, [width, height, naturalSize])
+
+  return (
+    <div
+      className={classNames(styles.wrapper)}
+      style={{
+        paddingBottom: `${(1 / ratio) * 100}%`,
+      }}
+    >
+      <img ref={imageRef} className={styles.image} />
+      <div
+        className={classNames(styles.details, {
+          [styles.showOverlay]: showDetections,
+        })}
+      >
+        {renderOverlay && <CaptureOverlay boxStyles={boxStyles} />}
+        <CaptureDetections
+          boxStyles={boxStyles}
+          defaultFilters={defaultFilters}
+          detections={detections}
+          showDetections={showDetections}
+        />
+      </div>
+      {isLoading && (
+        <div className={styles.loadingWrapper}>
+          <LoadingSpinner />
+        </div>
+      )}
+    </div>
+  )
+}
+
+const CaptureOverlay = ({
+  boxStyles,
+}: {
+  boxStyles: { [key: number]: BoxStyle }
+}) => (
+  <svg className={styles.overlay}>
+    <defs>
+      <mask id="holes">
+        <rect width="100%" height="100%" fill="white" />
+        {Object.entries(boxStyles).map(([id, style]) => (
+          <rect
+            key={id}
+            x={style.left}
+            y={style.top}
+            width={style.width}
+            height={style.height}
+            fill="black"
+          />
+        ))}
+      </mask>
+    </defs>
+    <rect
+      fill="black"
+      fillOpacity={0.2}
+      width="100%"
+      height="100%"
+      mask="url(#holes)"
+    />
+  </svg>
+)
+
+const CaptureDetections = ({
+  boxStyles,
+  defaultFilters,
+  detections,
+  showDetections,
+}: {
+  boxStyles: { [key: number]: BoxStyle }
+  defaultFilters: boolean
+  detections: CaptureDetection[]
+  showDetections?: boolean
+}) => {
+  const containerRef = useRef(null)
+  const [activeOccurrence, setActiveOccurrence] = useState<string>()
+  const { activeOccurrences, setActiveOccurrences } = useActiveOccurrences()
+
+  const toggleActiveState = (occurrenceId: string) => {
+    const isActive = activeOccurrences.includes(occurrenceId)
+
+    if (isActive) {
+      setActiveOccurrences(
+        activeOccurrences.filter((occurrence) => occurrence !== occurrenceId)
+      )
+    } else {
+      setActiveOccurrences([...activeOccurrences, occurrenceId])
+    }
+  }
+
+  return (
+    <>
+      <div className={styles.detections} ref={containerRef}>
+        {Object.entries(boxStyles).map(([id, style]) => {
+          const detection = detections.find((d) => d.id === id)
+
+          const isActive = detection?.occurrenceId
+            ? activeOccurrences.includes(detection.occurrenceId)
+            : false
+
+          if (!detection || (!showDetections && !isActive)) {
+            return null
+          }
+
+          return (
+            <Tooltip.Provider key={detection.id} delayDuration={0}>
+              <Tooltip.Root open={isActive ? isActive : undefined}>
+                <Tooltip.Trigger asChild>
+                  <div
+                    style={style}
+                    className={classNames(styles.detection, {
+                      [styles.active]: isActive,
+                      [styles.filtered]: defaultFilters
+                        ? !detection.occurrenceMeetsCriteria
+                        : false,
+                      [styles.alert]: detection.score < SCORE_THRESHOLDS.ALERT,
+                      [styles.warning]:
+                        detection.score < SCORE_THRESHOLDS.WARNING,
+                      [styles.clickable]: !!detection.occurrenceId,
+                    })}
+                    onClick={() => {
+                      if (detection.occurrenceId) {
+                        toggleActiveState(detection?.occurrenceId)
+                      }
+                    }}
+                  />
+                </Tooltip.Trigger>
+                <Tooltip.Content
+                  className="p-3 z-[1]"
+                  collisionBoundary={containerRef?.current}
+                  side="bottom"
+                >
+                  <div className="flex flex-col items-start gap-1">
+                    <button
+                      className="body-base text-primary font-medium"
+                      disabled={!detection.occurrenceId}
+                      onClick={() =>
+                        setActiveOccurrence(detection.occurrenceId)
+                      }
+                    >
+                      <span>{detection.label}</span>
+                    </button>
+                    <DeterminationScore
+                      score={detection.score}
+                      scoreLabel={detection.scoreLabel}
+                      verified={detection.score === 1}
+                    />
+                  </div>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            </Tooltip.Provider>
+          )
+        })}
+        {activeOccurrence ? (
+          <OccurrenceDetailsDialog
+            id={activeOccurrence}
+            onClose={() => setActiveOccurrence(undefined)}
+          />
+        ) : null}
+      </div>
+    </>
+  )
+}
+
+const OccurrenceDetailsDialog = ({
+  id,
+  onClose,
+}: {
+  id: string
+  onClose: () => void
+}) => {
+  const [selectedView, setSelectedView] = useState<string | undefined>(
+    TABS.FIELDS
+  )
+  const { occurrence, isLoading, error } = useOccurrenceDetails(id)
+
+  return (
+    <Dialog.Root
+      open={!!id}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose()
+        }
+      }}
+    >
+      <Dialog.Content
+        ariaCloselabel={translate(STRING.CLOSE)}
+        isLoading={isLoading}
+        error={error}
+      >
+        {occurrence ? (
+          <OccurrenceDetails
+            occurrence={occurrence}
+            selectedTab={selectedView}
+            setSelectedTab={setSelectedView}
+          />
+        ) : null}
+      </Dialog.Content>
+    </Dialog.Root>
+  )
+}
diff --git a/ui/src/pages/session-details/new/session-details.tsx b/ui/src/pages/session-details/new/session-details.tsx
index fc75afd2a..afbf113a2 100644
--- a/ui/src/pages/session-details/new/session-details.tsx
+++ b/ui/src/pages/session-details/new/session-details.tsx
@@ -1,22 +1,29 @@
 import { ErrorState } from 'components/error-state/error-state'
+import { useCaptureDetails } from 'data-services/hooks/captures/useCaptureDetails'
 import { useSessionDetails } from 'data-services/hooks/sessions/useSessionDetails'
+import { useSessionTimeline } from 'data-services/hooks/sessions/useSessionTimeline'
+import { SessionDetails } from 'data-services/models/session-details'
 import { Box, LoadingSpinner, PageHeader, Tabs } from 'nova-ui-kit'
-import { useContext, useEffect } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
 import { BreadcrumbContext } from 'utils/breadcrumbContext'
 import { STRING, translate } from 'utils/language'
+import { useUser } from 'utils/user/userContext'
+import { CaptureNavigation } from './capture-navigation'
+import { Capture } from './capture/capture'
 import { useActiveCaptureId } from './hooks/useActiveCapture'
 import { useActiveOccurrences } from './hooks/useActiveOccurrences'
 import { SessionInfo } from './session-info'
 import { SessionPlots } from './session-plots'
+import { StarButton } from './star-button'
 
 const TABS = {
   FIELDS: 'fields',
   CHARTS: 'charts',
 }
 
-export const SessionDetails = () => {
+export const SessionDetailsPage = () => {
   const { id } = useParams()
   const { setDetailBreadcrumb } = useContext(BreadcrumbContext)
   const { activeOccurrences } = useActiveOccurrences()
@@ -59,35 +66,102 @@ export const SessionDetails = () => {
         isLoading={isLoading}
         tooltip={translate(STRING.TOOLTIP_SESSION)}
       />
-      <div className="flex flex-col gap-6 mt-6 md:flex-row">
-        <Box className="p-2 bg-background rounded-lg md:min-w-72 md:p-4 md:rounded-xl">
-          <Tabs.Root defaultValue={TABS.FIELDS}>
-            <Tabs.List>
-              <Tabs.Trigger
-                value={TABS.FIELDS}
-                label={translate(STRING.TAB_ITEM_FIELDS)}
-              />
-              <Tabs.Trigger
-                value={TABS.CHARTS}
-                label={translate(STRING.TAB_ITEM_CHARTS)}
-              />
-            </Tabs.List>
-            <Tabs.Content value={TABS.FIELDS}>
-              <SessionInfo session={session} />
-            </Tabs.Content>
-            <Tabs.Content value={TABS.CHARTS}>
-              <div className="w-96 space-y-4">
-                <SessionPlots session={session} />
-              </div>
-            </Tabs.Content>
-          </Tabs.Root>
-        </Box>
-        <div className="grow rounded-lg aspect-video border border-border md:rounded-xl">
-          <></>
+      <Content session={session} />
+    </>
+  )
+}
+
+const Content = ({ session }: { session: SessionDetails }) => {
+  // Settings
+  const [poll, setPoll] = useState(false)
+
+  // Data
+  const { projectId } = useParams()
+  const { user } = useUser()
+  const { activeCaptureId, setActiveCaptureId } = useActiveCaptureId(
+    session.firstCapture?.id
+  )
+  const { capture: activeCapture } = useCaptureDetails({
+    id: activeCaptureId as string,
+    poll,
+    projectId: projectId as string,
+  })
+  const { timeline = [] } = useSessionTimeline(session.id)
+
+  useEffect(() => {
+    // If the active capture has a job in progress, we want to poll the endpoint so we can show job updates
+    if (activeCapture?.hasJobInProgress) {
+      setPoll(true)
+    } else {
+      setPoll(false)
+    }
+  }, [activeCapture])
+
+  if (!session.firstCapture) {
+    return null
+  }
+
+  return (
+    <div className="flex flex-col gap-6 mt-6 md:flex-row">
+      <Box className="p-2 bg-background rounded-lg md:min-w-72 md:p-4 md:rounded-xl">
+        <Tabs.Root defaultValue={TABS.FIELDS}>
+          <Tabs.List>
+            <Tabs.Trigger
+              value={TABS.FIELDS}
+              label={translate(STRING.TAB_ITEM_FIELDS)}
+            />
+            <Tabs.Trigger
+              value={TABS.CHARTS}
+              label={translate(STRING.TAB_ITEM_CHARTS)}
+            />
+          </Tabs.List>
+          <Tabs.Content value={TABS.FIELDS}>
+            <SessionInfo session={session} />
+          </Tabs.Content>
+          <Tabs.Content value={TABS.CHARTS}>
+            <div className="w-96 space-y-4">
+              <SessionPlots session={session} />
+            </div>
+          </Tabs.Content>
+        </Tabs.Root>
+      </Box>
+      <div className="grow flex flex-col bg-background rounded-lg border border-border overflow-hidden md:rounded-xl">
+        <div className="grow flex items-center justify-center">
+          <Capture
+            defaultFilters
+            detections={activeCapture?.detections ?? []}
+            height={activeCapture?.height ?? session.firstCapture.height}
+            showDetections
+            src={activeCapture?.src}
+            width={activeCapture?.width ?? session.firstCapture.width}
+          />
+        </div>
+        <div className="grid grid-cols-3 p-6 border-t border-border">
+          <div className="flex items-center gap-2">
+            {activeCapture ? (
+              <>
+                <span className="pt-0.5 text-muted-foreground">
+                  {activeCapture.dateTimeLabel}
+                </span>
+                <StarButton
+                  capture={activeCapture}
+                  canStar={user.loggedIn && activeCapture.canStar}
+                />
+              </>
+            ) : null}
+          </div>
+          <div className="flex items-center justify-center">
+            <CaptureNavigation
+              activeCapture={activeCapture}
+              timeline={timeline}
+              setActiveCaptureId={setActiveCaptureId}
+            />
+          </div>
+          <div />
         </div>
       </div>
-    </>
+    </div>
   )
 }
 
-export default SessionDetails
+export default SessionDetailsPage
diff --git a/ui/src/pages/session-details/new/star-button.tsx b/ui/src/pages/session-details/new/star-button.tsx
new file mode 100644
index 000000000..3a25f6f85
--- /dev/null
+++ b/ui/src/pages/session-details/new/star-button.tsx
@@ -0,0 +1,44 @@
+import { useStarCapture } from 'data-services/hooks/captures/useStarCapture'
+import { CaptureDetails as Capture } from 'data-services/models/capture-details'
+import { Loader2Icon, StarIcon } from 'lucide-react'
+import { BasicTooltip, Button } from 'nova-ui-kit'
+import { STRING, translate } from 'utils/language'
+
+export const StarButton = ({
+  capture,
+  canStar,
+}: {
+  capture: Capture
+  canStar: boolean
+}) => {
+  const isStarred = capture.isStarred ?? false
+  const { starCapture, isLoading } = useStarCapture(capture.id, isStarred)
+  const tooltipContent = canStar
+    ? isStarred
+      ? translate(STRING.STARRED)
+      : translate(STRING.STAR)
+    : translate(STRING.MESSAGE_PERMISSIONS_MISSING)
+
+  return (
+    <BasicTooltip asChild content={tooltipContent}>
+      <Button
+        disabled={!canStar}
+        aria-label={
+          isStarred ? translate(STRING.STARRED) : translate(STRING.STAR)
+        }
+        onClick={() => starCapture()}
+        size="icon"
+        variant="ghost"
+      >
+        {isLoading ? (
+          <Loader2Icon className="w-4 h-4 animate-spin" />
+        ) : (
+          <StarIcon
+            className="w-4 h-4 transition-colors"
+            fill={isStarred ? 'currentColor' : 'transparent'}
+          />
+        )}
+      </Button>
+    </BasicTooltip>
+  )
+}
diff --git a/ui/src/pages/session-details/new/utils.tsx b/ui/src/pages/session-details/new/utils.tsx
new file mode 100644
index 000000000..137c5fc5a
--- /dev/null
+++ b/ui/src/pages/session-details/new/utils.tsx
@@ -0,0 +1,81 @@
+import { TimelineTick } from 'data-services/models/timeline-tick'
+
+export const findClosestCaptureId = ({
+  maxDate,
+  minDate,
+  snapToDetections,
+  targetDate,
+  timeline,
+}: {
+  maxDate?: Date
+  minDate?: Date
+  snapToDetections?: boolean
+  targetDate: Date
+  timeline: TimelineTick[]
+}) => {
+  let closestCaptureId: string | undefined
+  let smallestDifference = Infinity
+
+  timeline.forEach((timelineTick) => {
+    if (!timelineTick.representativeCaptureId) {
+      return
+    }
+
+    if (snapToDetections && !timelineTick.numDetections) {
+      return
+    }
+
+    if (minDate && timelineTick.startDate <= minDate) {
+      return
+    }
+
+    if (maxDate && timelineTick.endDate >= maxDate) {
+      return
+    }
+
+    const difference = Math.abs(
+      timelineTick.startDate.getTime() - targetDate.getTime()
+    )
+
+    if (difference < smallestDifference) {
+      smallestDifference = difference
+      closestCaptureId = timelineTick.representativeCaptureId
+    }
+  })
+
+  return closestCaptureId
+}
+
+export const dateToValue = ({
+  date,
+  startDate,
+  endDate,
+}: {
+  date: Date
+  startDate: Date
+  endDate: Date
+}) => {
+  if (endDate.getTime() === startDate.getTime()) {
+    return 50
+  }
+
+  return (
+    ((date.getTime() - startDate.getTime()) /
+      (endDate.getTime() - startDate.getTime())) *
+    100
+  )
+}
+
+export const valueToDate = ({
+  value,
+  startDate,
+  endDate,
+}: {
+  value: number
+  startDate: Date
+  endDate: Date
+}) =>
+  new Date(
+    startDate.getTime() +
+      ((endDate.getTime() - startDate.getTime()) * value) / 100
+  )

From 4f2be11ba4f2711a6770ffd837d29d6c8151e4d9 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Thu, 28 May 2026 12:58:17 +0200
Subject: [PATCH 03/11] layout: render activity plot and timeline slider +
 cleanup

---
 ui/src/nova-ui-kit/components/slider/dial.svg |   3 -
 .../components/slider/timestamp-slider.tsx    |  46 -----
 .../new/activity-plot/activity-plot.tsx       | 178 ++++++++++++++++++
 .../new/activity-plot/lazy-activity-plot.tsx  |  20 ++
 .../new/activity-plot/useDynamicPlotWidth.ts  |  25 +++
 .../session-details/new/session-details.tsx   | 123 ++++++------
 .../new/timeline-slider}/styles.module.scss   |  11 +-
 .../new/timeline-slider/timeline-slider.tsx   | 107 +++++++++++
 8 files changed, 406 insertions(+), 107 deletions(-)
 delete mode 100644 ui/src/nova-ui-kit/components/slider/dial.svg
 delete mode 100644 ui/src/nova-ui-kit/components/slider/timestamp-slider.tsx
 create mode 100644 ui/src/pages/session-details/new/activity-plot/activity-plot.tsx
 create mode 100644 ui/src/pages/session-details/new/activity-plot/lazy-activity-plot.tsx
 create mode 100644 ui/src/pages/session-details/new/activity-plot/useDynamicPlotWidth.ts
 rename ui/src/{nova-ui-kit/components/slider => pages/session-details/new/timeline-slider}/styles.module.scss (80%)
 create mode 100644 ui/src/pages/session-details/new/timeline-slider/timeline-slider.tsx

diff --git a/ui/src/nova-ui-kit/components/slider/dial.svg b/ui/src/nova-ui-kit/components/slider/dial.svg
deleted file mode 100644
index 69dacc0d0..000000000
--- a/ui/src/nova-ui-kit/components/slider/dial.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="28" height="22" viewBox="0 0 28 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4861 1.74566C12.6726 -0.0362191 15.2899 -0.0377217 16.4784 1.7428L26.8858 17.3345C28.2165 19.328 26.7875 22 24.3906 22H3.60169C1.20638 22 -0.22295 19.3311 1.10458 17.3373L11.4861 1.74566Z" fill="#DEDEDF"/>
-</svg>
diff --git a/ui/src/nova-ui-kit/components/slider/timestamp-slider.tsx b/ui/src/nova-ui-kit/components/slider/timestamp-slider.tsx
deleted file mode 100644
index 4529fde61..000000000
--- a/ui/src/nova-ui-kit/components/slider/timestamp-slider.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as _Slider from '@radix-ui/react-slider'
-import Dial from './dial.svg?react'
-import styles from './styles.module.scss'
-
-interface TimestampSliderProps {
-  labels: string[]
-  value: number
-  valueLabel?: string
-  onValueChange: (value: number) => void
-  onValueCommit: (value: number) => void
-}
-
-export const TimestampSlider = ({
-  labels,
-  value,
-  valueLabel,
-  onValueChange,
-  onValueCommit,
-}: TimestampSliderProps) => (
-  <div className={styles.timestampSlider}>
-    <_Slider.Root
-      className={styles.sliderRoot}
-      min={0}
-      max={100}
-      step={0.01}
-      value={[value]}
-      onValueChange={(values) => onValueChange(values[0])}
-      onValueCommit={(values) => onValueCommit(values[0])}
-    >
-      <_Slider.Track className={styles.sliderTrack}>
-        <_Slider.Range className={styles.sliderRange} />
-      </_Slider.Track>
-      <_Slider.Thumb className={styles.sliderThumb}>
-        {valueLabel && <span className={styles.label}>{valueLabel}</span>}
-        <Dial />
-      </_Slider.Thumb>
-    </_Slider.Root>
-    <div className={styles.labels}>
-      {labels.map((label, index) => (
-        <span key={index} className={styles.label}>
-          {label}
-        </span>
-      ))}
-    </div>
-  </div>
-)
diff --git a/ui/src/pages/session-details/new/activity-plot/activity-plot.tsx b/ui/src/pages/session-details/new/activity-plot/activity-plot.tsx
new file mode 100644
index 000000000..4d384fc18
--- /dev/null
+++ b/ui/src/pages/session-details/new/activity-plot/activity-plot.tsx
@@ -0,0 +1,178 @@
+import { SessionDetails } from 'data-services/models/session-details'
+import { TimelineTick } from 'data-services/models/timeline-tick'
+import { CONSTANTS } from 'nova-ui-kit'
+import { useRef } from 'react'
+import Plot from 'react-plotly.js'
+import { getCompactTimespanString } from 'utils/date/getCompactTimespanString/getCompactTimespanString'
+import { findClosestCaptureId } from '../utils'
+import { useDynamicPlotWidth } from './useDynamicPlotWidth'
+
+const fontFamily = 'Mazzard'
+const fontSize = 14
+const lineColorCaptures = CONSTANTS.COLORS.neutral[300]
+const lineColorDetections = CONSTANTS.COLOR_THEME.secondary.DEFAULT
+const spikeColor = CONSTANTS.COLOR_THEME.foreground
+const textColor = CONSTANTS.COLOR_THEME.foreground
+const tooltipBgColor = CONSTANTS.COLOR_THEME.background
+const tooltipBorderColor = CONSTANTS.COLOR_THEME.border
+
+export interface ActivityPlotProps {
+  session: SessionDetails
+  setActiveCaptureId: (captureId: string) => void
+  snapToDetections?: boolean
+  timeline: TimelineTick[]
+}
+
+const ActivityPlot = ({
+  session,
+  snapToDetections,
+  timeline,
+  setActiveCaptureId,
+}: ActivityPlotProps) => {
+  const containerRef = useRef(null)
+  const width = useDynamicPlotWidth(containerRef)
+
+  // Calculate the average number of captures
+  const avgCaptures =
+    timeline.reduce((sum, tick) => sum + tick.numCaptures, 0) / timeline.length
+
+  // Calculate the maximum deviation from the average
+  const maxDeviation = Math.max(
+    ...timeline.map((tick) => Math.abs(tick.numCaptures - avgCaptures))
+  )
+
+  // Set the y-axis range to be centered around the average
+  const yAxisMin = Math.max(0, avgCaptures - maxDeviation)
+  const yAxisMax = avgCaptures + maxDeviation
+
+  return (
+    <div style={{ margin: '0 14px -10px' }}>
+      <div ref={containerRef}>
+        <Plot
+          style={{ display: 'block' }}
+          data={[
+            {
+              x: timeline.map(
+                (timelineTick) => new Date(timelineTick.startDate)
+              ),
+              y: timeline.map((timelineTick) => timelineTick.numCaptures),
+              hovertemplate: 'Captures: %{y}<extra></extra>',
+              fill: 'tozeroy',
+              type: 'scatter',
+              mode: 'lines',
+              line: { color: lineColorCaptures, width: 1 },
+              name: 'Captures',
+              yaxis: 'y',
+            },
+            {
+              x: timeline.map(
+                (timelineTick) => new Date(timelineTick.startDate)
+              ),
+              y: timeline.map((timelineTick) => timelineTick.avgDetections),
+              hovertemplate: 'Avg. detections: %{y}<extra></extra>',
+              fill: 'tozeroy',
+              type: 'scatter',
+              mode: 'lines',
+              line: { color: lineColorDetections, width: 1 },
+              name: 'Avg. detections',
+              yaxis: 'y2',
+            },
+          ]}
+          layout={{
+            height: 100,
+            width: width,
+            paper_bgcolor: 'transparent',
+            plot_bgcolor: 'transparent',
+            margin: {
+              l: 0,
+              r: 0,
+              b: 0,
+              t: 0,
+              pad: 0,
+            },
+            hovermode: 'x unified',
+            // y-axis for captures
+            yaxis: {
+              showgrid: false,
+              showticklabels: false,
+              zeroline: false,
+              rangemode: 'nonnegative',
+              fixedrange: true,
+              range: [yAxisMin, yAxisMax],
+              side: 'left',
+            },
+            // y-axis for detections
+            yaxis2: {
+              showgrid: false,
+              showticklabels: false,
+              zeroline: false,
+              rangemode: 'nonnegative',
+              fixedrange: true,
+              range: [0, Math.max(session.detectionsMaxCount ?? 0, 1)], // Ensure a minimum range of 1
+              side: 'right',
+              overlaying: 'y',
+            },
+            xaxis: {
+              fixedrange: true,
+              range: [new Date(session.startDate), new Date(session.endDate)],
+              showgrid: false,
+              showline: false,
+              showticklabels: false,
+              spikecolor: spikeColor,
+              spikethickness: -2,
+              ticktext: timeline.map((timelineTick) =>
+                getCompactTimespanString({
+                  date1: timelineTick.startDate,
+                  date2: timelineTick.endDate,
+                  options: {
+                    second: true,
+                  },
+                })
+              ),
+              tickvals: timeline.map(
+                (timelineTick) => new Date(timelineTick.startDate)
+              ),
+              zeroline: false,
+            },
+            hoverlabel: {
+              bgcolor: tooltipBgColor,
+              bordercolor: tooltipBorderColor,
+              font: {
+                family: fontFamily,
+                size: fontSize,
+                color: textColor,
+              },
+            },
+            showlegend: false,
+          }}
+          config={{
+            displayModeBar: false,
+          }}
+          onClick={(data) => {
+            const timelineTickIndex = data.points[0].pointIndex
+            const timelineTick = timeline[timelineTickIndex]
+
+            if (!timelineTick) {
+              return
+            }
+
+            const captureId =
+              snapToDetections || !timelineTick.representativeCaptureId
+                ? findClosestCaptureId({
+                    snapToDetections,
+                    timeline,
+                    targetDate: timelineTick.startDate,
+                  })
+                : timelineTick.representativeCaptureId
+
+            if (captureId) {
+              setActiveCaptureId(captureId)
+            }
+          }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default ActivityPlot
diff --git a/ui/src/pages/session-details/new/activity-plot/lazy-activity-plot.tsx b/ui/src/pages/session-details/new/activity-plot/lazy-activity-plot.tsx
new file mode 100644
index 000000000..f0de0a6d8
--- /dev/null
+++ b/ui/src/pages/session-details/new/activity-plot/lazy-activity-plot.tsx
@@ -0,0 +1,20 @@
+import { ErrorBoundary } from 'components/error-boundary/error-boundary'
+import { LoadingSpinner } from 'nova-ui-kit'
+import React, { Suspense } from 'react'
+import { ActivityPlotProps } from './activity-plot'
+
+const _ActivityPlot = React.lazy(() => import('./activity-plot'))
+
+export const ActivityPlot = (props: ActivityPlotProps) => (
+  <Suspense
+    fallback={
+      <div>
+        <LoadingSpinner size={32} />
+      </div>
+    }
+  >
+    <ErrorBoundary>
+      <_ActivityPlot {...props} />
+    </ErrorBoundary>
+  </Suspense>
+)
diff --git a/ui/src/pages/session-details/new/activity-plot/useDynamicPlotWidth.ts b/ui/src/pages/session-details/new/activity-plot/useDynamicPlotWidth.ts
new file mode 100644
index 000000000..4fb19bdde
--- /dev/null
+++ b/ui/src/pages/session-details/new/activity-plot/useDynamicPlotWidth.ts
@@ -0,0 +1,25 @@
+import { RefObject, useEffect, useState } from 'react'
+
+export const useDynamicPlotWidth = (containerRef: RefObject<HTMLElement>) => {
+  const [width, setWidth] = useState<number>()
+
+  useEffect(() => {
+    const updateState = () => {
+      const container = containerRef.current
+
+      if (container) {
+        setWidth(container.clientWidth)
+      }
+    }
+
+    updateState()
+
+    window.addEventListener('resize', updateState)
+
+    return () => {
+      window.removeEventListener('resize', updateState)
+    }
+  }, [containerRef])
+
+  return width
+}
diff --git a/ui/src/pages/session-details/new/session-details.tsx b/ui/src/pages/session-details/new/session-details.tsx
index afbf113a2..3dbc2e362 100644
--- a/ui/src/pages/session-details/new/session-details.tsx
+++ b/ui/src/pages/session-details/new/session-details.tsx
@@ -10,6 +10,7 @@ import { useParams } from 'react-router-dom'
 import { BreadcrumbContext } from 'utils/breadcrumbContext'
 import { STRING, translate } from 'utils/language'
 import { useUser } from 'utils/user/userContext'
+import ActivityPlot from './activity-plot/activity-plot'
 import { CaptureNavigation } from './capture-navigation'
 import { Capture } from './capture/capture'
 import { useActiveCaptureId } from './hooks/useActiveCapture'
@@ -17,6 +18,7 @@ import { useActiveOccurrences } from './hooks/useActiveOccurrences'
 import { SessionInfo } from './session-info'
 import { SessionPlots } from './session-plots'
 import { StarButton } from './star-button'
+import { TimelineSlider } from './timeline-slider/timeline-slider'
 
 const TABS = {
   FIELDS: 'fields',
@@ -102,64 +104,79 @@ const Content = ({ session }: { session: SessionDetails }) => {
   }
 
   return (
-    <div className="flex flex-col gap-6 mt-6 md:flex-row">
-      <Box className="p-2 bg-background rounded-lg md:min-w-72 md:p-4 md:rounded-xl">
-        <Tabs.Root defaultValue={TABS.FIELDS}>
-          <Tabs.List>
-            <Tabs.Trigger
-              value={TABS.FIELDS}
-              label={translate(STRING.TAB_ITEM_FIELDS)}
+    <div className="flex flex-col gap-6">
+      <div className="flex flex-col gap-6 mt-6 md:flex-row">
+        <Box className="p-2 bg-background rounded-lg md:min-w-72 md:p-4 md:rounded-xl">
+          <Tabs.Root defaultValue={TABS.FIELDS}>
+            <Tabs.List>
+              <Tabs.Trigger
+                value={TABS.FIELDS}
+                label={translate(STRING.TAB_ITEM_FIELDS)}
+              />
+              <Tabs.Trigger
+                value={TABS.CHARTS}
+                label={translate(STRING.TAB_ITEM_CHARTS)}
+              />
+            </Tabs.List>
+            <Tabs.Content value={TABS.FIELDS}>
+              <SessionInfo session={session} />
+            </Tabs.Content>
+            <Tabs.Content value={TABS.CHARTS}>
+              <div className="w-96 space-y-4">
+                <SessionPlots session={session} />
+              </div>
+            </Tabs.Content>
+          </Tabs.Root>
+        </Box>
+        <div className="grow flex flex-col bg-background rounded-lg border border-border overflow-hidden md:rounded-xl">
+          <div className="grow flex items-center justify-center">
+            <Capture
+              defaultFilters
+              detections={activeCapture?.detections ?? []}
+              height={activeCapture?.height ?? session.firstCapture.height}
+              showDetections
+              src={activeCapture?.src}
+              width={activeCapture?.width ?? session.firstCapture.width}
             />
-            <Tabs.Trigger
-              value={TABS.CHARTS}
-              label={translate(STRING.TAB_ITEM_CHARTS)}
-            />
-          </Tabs.List>
-          <Tabs.Content value={TABS.FIELDS}>
-            <SessionInfo session={session} />
-          </Tabs.Content>
-          <Tabs.Content value={TABS.CHARTS}>
-            <div className="w-96 space-y-4">
-              <SessionPlots session={session} />
-            </div>
-          </Tabs.Content>
-        </Tabs.Root>
-      </Box>
-      <div className="grow flex flex-col bg-background rounded-lg border border-border overflow-hidden md:rounded-xl">
-        <div className="grow flex items-center justify-center">
-          <Capture
-            defaultFilters
-            detections={activeCapture?.detections ?? []}
-            height={activeCapture?.height ?? session.firstCapture.height}
-            showDetections
-            src={activeCapture?.src}
-            width={activeCapture?.width ?? session.firstCapture.width}
-          />
-        </div>
-        <div className="grid grid-cols-3 p-6 border-t border-border">
-          <div className="flex items-center gap-2">
-            {activeCapture ? (
-              <>
-                <span className="pt-0.5 text-muted-foreground">
-                  {activeCapture.dateTimeLabel}
-                </span>
-                <StarButton
-                  capture={activeCapture}
-                  canStar={user.loggedIn && activeCapture.canStar}
-                />
-              </>
-            ) : null}
           </div>
-          <div className="flex items-center justify-center">
-            <CaptureNavigation
-              activeCapture={activeCapture}
-              timeline={timeline}
-              setActiveCaptureId={setActiveCaptureId}
-            />
+          <div className="grid grid-cols-3 p-6 border-t border-border">
+            <div className="flex items-center gap-2">
+              {activeCapture ? (
+                <>
+                  <span className="pt-0.5 text-muted-foreground">
+                    {activeCapture.dateTimeLabel}
+                  </span>
+                  <StarButton
+                    capture={activeCapture}
+                    canStar={user.loggedIn && activeCapture.canStar}
+                  />
+                </>
+              ) : null}
+            </div>
+            <div className="flex items-center justify-center">
+              <CaptureNavigation
+                activeCapture={activeCapture}
+                timeline={timeline}
+                setActiveCaptureId={setActiveCaptureId}
+              />
+            </div>
+            <div />
           </div>
-          <div />
         </div>
       </div>
+      <div className="bg-background rounded-lg border border-border p-4">
+        <ActivityPlot
+          session={session}
+          setActiveCaptureId={setActiveCaptureId}
+          timeline={timeline}
+        />
+        <TimelineSlider
+          activeCapture={activeCapture}
+          session={session}
+          setActiveCaptureId={setActiveCaptureId}
+          timeline={timeline}
+        />
+      </div>
     </div>
   )
 }
diff --git a/ui/src/nova-ui-kit/components/slider/styles.module.scss b/ui/src/pages/session-details/new/timeline-slider/styles.module.scss
similarity index 80%
rename from ui/src/nova-ui-kit/components/slider/styles.module.scss
rename to ui/src/pages/session-details/new/timeline-slider/styles.module.scss
index 64abd5025..43d161cf5 100644
--- a/ui/src/nova-ui-kit/components/slider/styles.module.scss
+++ b/ui/src/pages/session-details/new/timeline-slider/styles.module.scss
@@ -5,9 +5,9 @@
 
   .label {
     display: block;
-    @include body-small();
+    @include body-overline();
     font-weight: 600;
-    color: var(--color-generic-white);
+    color: var(--color-primary);
     text-transform: uppercase;
     white-space: nowrap;
   }
@@ -17,7 +17,8 @@
     justify-content: space-between;
 
     .label {
-      color: var(--color-neutral-500);
+      @include body-overline-small();
+      color: var(--color-muted-foreground);
     }
   }
 
@@ -36,7 +37,7 @@
 
   .sliderTrack {
     position: relative;
-    background-color: var(--color-neutral-400);
+    background-color: var(--color-neutral-300);
     flex-grow: 1;
     border-radius: 2px;
     height: 4px;
@@ -44,7 +45,7 @@
 
   .sliderRange {
     position: absolute;
-    background-color: var(--color-neutral-400);
+    background-color: var(--color-neutral-300);
     border-radius: 2px;
     height: 100%;
   }
diff --git a/ui/src/pages/session-details/new/timeline-slider/timeline-slider.tsx b/ui/src/pages/session-details/new/timeline-slider/timeline-slider.tsx
new file mode 100644
index 000000000..5b67c7fc8
--- /dev/null
+++ b/ui/src/pages/session-details/new/timeline-slider/timeline-slider.tsx
@@ -0,0 +1,107 @@
+import * as _Slider from '@radix-ui/react-slider'
+import { Capture } from 'data-services/models/capture'
+import { SessionDetails } from 'data-services/models/session-details'
+import { TimelineTick } from 'data-services/models/timeline-tick'
+import { TriangleIcon } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { getFormatedTimeString } from 'utils/date/getFormatedTimeString/getFormatedTimeString'
+import { dateToValue, findClosestCaptureId, valueToDate } from '../utils'
+import styles from './styles.module.scss'
+
+export const TimelineSlider = ({
+  activeCapture,
+  session,
+  setActiveCaptureId,
+  snapToDetections,
+  timeline,
+}: {
+  activeCapture?: Capture
+  session: SessionDetails
+  setActiveCaptureId: (captireId: string) => void
+  snapToDetections?: boolean
+  timeline: TimelineTick[]
+}) => {
+  const [value, setValue] = useState(0)
+  const startDate = session.startDate
+  const endDate = session.endDate
+  const showLabels = session.startDate.getTime() !== session.endDate.getTime()
+
+  useEffect(() => {
+    if (activeCapture) {
+      setValue(dateToValue({ date: activeCapture.date, startDate, endDate }))
+    }
+  }, [activeCapture])
+
+  return (
+    <Slider
+      labels={
+        showLabels
+          ? [
+              getFormatedTimeString({ date: startDate }),
+              getFormatedTimeString({ date: endDate }),
+            ]
+          : []
+      }
+      value={value}
+      onValueChange={(value) => setValue(value)}
+      onValueCommit={(value) => {
+        // Update active capture based on date
+        const targetDate = valueToDate({ value, startDate, endDate })
+        const captureId = findClosestCaptureId({
+          snapToDetections,
+          targetDate,
+          timeline,
+        })
+
+        if (captureId && activeCapture?.id !== captureId) {
+          setActiveCaptureId(captureId)
+        } else if (activeCapture) {
+          setValue(
+            dateToValue({ date: activeCapture.date, startDate, endDate })
+          )
+        }
+      }}
+    />
+  )
+}
+
+const Slider = ({
+  labels,
+  value,
+  valueLabel,
+  onValueChange,
+  onValueCommit,
+}: {
+  labels: string[]
+  value: number
+  valueLabel?: string
+  onValueChange: (value: number) => void
+  onValueCommit: (value: number) => void
+}) => (
+  <div className={styles.timestampSlider}>
+    <_Slider.Root
+      className={styles.sliderRoot}
+      min={0}
+      max={100}
+      step={0.01}
+      value={[value]}
+      onValueChange={(values) => onValueChange(values[0])}
+      onValueCommit={(values) => onValueCommit(values[0])}
+    >
+      <_Slider.Track className={styles.sliderTrack}>
+        <_Slider.Range className={styles.sliderRange} />
+      </_Slider.Track>
+      <_Slider.Thumb className={styles.sliderThumb}>
+        {valueLabel && <span className={styles.label}>{valueLabel}</span>}
+        <TriangleIcon className="text-primary" />
+      </_Slider.Thumb>
+    </_Slider.Root>
+    <div className={styles.labels}>
+      {labels.map((label, index) => (
+        <span key={index} className={styles.label}>
+          {label}
+        </span>
+      ))}
+    </div>
+  </div>
+)

From 1c18ca65b6231918beb63fa749c34f82eef491dd Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Fri, 29 May 2026 10:32:46 +0200
Subject: [PATCH 04/11] layout: include capture info

---
 .../components/info-block/info-block.tsx      |  2 +-
 .../session-details/new/capture-info.tsx      | 47 ++++++++++++++++
 .../session-details/new/session-details.tsx   | 53 ++++++++++++++++---
 3 files changed, 93 insertions(+), 9 deletions(-)
 create mode 100644 ui/src/pages/session-details/new/capture-info.tsx

diff --git a/ui/src/nova-ui-kit/components/info-block/info-block.tsx b/ui/src/nova-ui-kit/components/info-block/info-block.tsx
index 3ae84f52e..b08162e48 100644
--- a/ui/src/nova-ui-kit/components/info-block/info-block.tsx
+++ b/ui/src/nova-ui-kit/components/info-block/info-block.tsx
@@ -62,7 +62,7 @@ export const InfoBlockFieldValue = ({
           </span>
         </Link>
       ) : (
-        <span className="body-base">{valueLabel}</span>
+        <span className="body-base break-all">{valueLabel}</span>
       )}
     </>
   )
diff --git a/ui/src/pages/session-details/new/capture-info.tsx b/ui/src/pages/session-details/new/capture-info.tsx
new file mode 100644
index 000000000..30638bd65
--- /dev/null
+++ b/ui/src/pages/session-details/new/capture-info.tsx
@@ -0,0 +1,47 @@
+import { CaptureDetails } from 'data-services/models/capture-details'
+import { InfoBlock } from 'nova-ui-kit'
+import { useParams } from 'react-router-dom'
+import { APP_ROUTES } from 'utils/constants'
+import { getAppRoute } from 'utils/getAppRoute'
+import { STRING, translate } from 'utils/language'
+
+export const CaptureInfo = ({ capture }: { capture: CaptureDetails }) => {
+  const { projectId } = useParams()
+
+  const fields = [
+    {
+      label: translate(STRING.FIELD_LABEL_ID),
+      value: capture.id,
+    },
+    {
+      label: translate(STRING.FIELD_LABEL_FILE_SIZE),
+      value: capture.fileSize,
+    },
+    {
+      label: translate(STRING.FIELD_LABEL_RESOLUTION),
+      value: capture.dimensionsLabel,
+    },
+    {
+      label: translate(STRING.FIELD_LABEL_FILENAME),
+      value: capture.filename,
+    },
+    {
+      label: translate(STRING.FIELD_LABEL_PATH),
+      value: capture.path,
+    },
+    {
+      label: translate(STRING.FIELD_LABEL_OCCURRENCES),
+      value: capture.numOccurrences,
+      to: getAppRoute({
+        to: APP_ROUTES.OCCURRENCES({ projectId: projectId as string }),
+        filters: { detections__source_image: capture.id },
+      }),
+    },
+    {
+      label: translate(STRING.FIELD_LABEL_TAXA),
+      value: capture.numTaxa,
+    },
+  ]
+
+  return <InfoBlock fields={fields} />
+}
diff --git a/ui/src/pages/session-details/new/session-details.tsx b/ui/src/pages/session-details/new/session-details.tsx
index 3dbc2e362..ce3b958d5 100644
--- a/ui/src/pages/session-details/new/session-details.tsx
+++ b/ui/src/pages/session-details/new/session-details.tsx
@@ -3,7 +3,16 @@ import { useCaptureDetails } from 'data-services/hooks/captures/useCaptureDetail
 import { useSessionDetails } from 'data-services/hooks/sessions/useSessionDetails'
 import { useSessionTimeline } from 'data-services/hooks/sessions/useSessionTimeline'
 import { SessionDetails } from 'data-services/models/session-details'
-import { Box, LoadingSpinner, PageHeader, Tabs } from 'nova-ui-kit'
+import { ExternalLinkIcon } from 'lucide-react'
+import {
+  BasicTooltip,
+  Box,
+  buttonVariants,
+  LoadingSpinner,
+  PageHeader,
+  Tabs,
+} from 'nova-ui-kit'
+import { cn } from 'nova-ui-kit/utils'
 import { useContext, useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
@@ -11,6 +20,7 @@ import { BreadcrumbContext } from 'utils/breadcrumbContext'
 import { STRING, translate } from 'utils/language'
 import { useUser } from 'utils/user/userContext'
 import ActivityPlot from './activity-plot/activity-plot'
+import { CaptureInfo } from './capture-info'
 import { CaptureNavigation } from './capture-navigation'
 import { Capture } from './capture/capture'
 import { useActiveCaptureId } from './hooks/useActiveCapture'
@@ -21,7 +31,8 @@ import { StarButton } from './star-button'
 import { TimelineSlider } from './timeline-slider/timeline-slider'
 
 const TABS = {
-  FIELDS: 'fields',
+  SESSION: 'session',
+  CAPTURE: 'capture',
   CHARTS: 'charts',
 }
 
@@ -106,20 +117,31 @@ const Content = ({ session }: { session: SessionDetails }) => {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-6 mt-6 md:flex-row">
-        <Box className="p-2 bg-background rounded-lg md:min-w-72 md:p-4 md:rounded-xl">
-          <Tabs.Root defaultValue={TABS.FIELDS}>
+        <Box className="p-2 bg-background rounded-lg md:p-4 md:rounded-xl">
+          <Tabs.Root defaultValue={TABS.SESSION}>
             <Tabs.List>
               <Tabs.Trigger
-                value={TABS.FIELDS}
-                label={translate(STRING.TAB_ITEM_FIELDS)}
+                value={TABS.SESSION}
+                label={translate(STRING.TAB_ITEM_SESSION)}
+              />
+              <Tabs.Trigger
+                value={TABS.CAPTURE}
+                label={translate(STRING.TAB_ITEM_CAPTURE)}
               />
               <Tabs.Trigger
                 value={TABS.CHARTS}
                 label={translate(STRING.TAB_ITEM_CHARTS)}
               />
             </Tabs.List>
-            <Tabs.Content value={TABS.FIELDS}>
-              <SessionInfo session={session} />
+            <Tabs.Content value={TABS.SESSION}>
+              <div className="w-72">
+                <SessionInfo session={session} />
+              </div>
+            </Tabs.Content>
+            <Tabs.Content value={TABS.CAPTURE}>
+              <div className="w-72">
+                {activeCapture ? <CaptureInfo capture={activeCapture} /> : null}
+              </div>
             </Tabs.Content>
             <Tabs.Content value={TABS.CHARTS}>
               <div className="w-96 space-y-4">
@@ -150,6 +172,21 @@ const Content = ({ session }: { session: SessionDetails }) => {
                     capture={activeCapture}
                     canStar={user.loggedIn && activeCapture.canStar}
                   />
+                  <BasicTooltip
+                    asChild
+                    content={translate(STRING.TOOLTIP_VIEW_SOURCE_FILE)}
+                  >
+                    <a
+                      href={activeCapture.url}
+                      className={cn(
+                        buttonVariants({ size: 'icon', variant: 'ghost' })
+                      )}
+                      rel="noreferrer"
+                      target="_blank"
+                    >
+                      <ExternalLinkIcon className="w-4 h-4" />
+                    </a>
+                  </BasicTooltip>
                 </>
               ) : null}
             </div>

From 16c6d5942379e59be705c5370ece5ad393f80bfb Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Fri, 29 May 2026 11:15:16 +0200
Subject: [PATCH 05/11] layout: setup view settings

---
 .../filtering/default-filter-control.tsx      |  9 +-
 .../components/checkbox/checkbox.module.scss  | 16 ----
 .../components/checkbox/checkbox.tsx          | 16 +---
 .../column-settings.module.scss               | 20 -----
 .../table/column-settings/column-settings.tsx | 45 +++++-----
 ui/src/nova-ui-kit/index.ts                   |  2 +-
 .../session-details/new/capture/capture.tsx   |  2 +-
 .../session-details/new/session-details.tsx   | 19 +++-
 .../session-details/new/view-settings.tsx     | 89 +++++++++++++++++++
 .../session-details/playback/playback.tsx     | 12 +--
 10 files changed, 132 insertions(+), 98 deletions(-)
 delete mode 100644 ui/src/nova-ui-kit/components/table/column-settings/column-settings.module.scss
 create mode 100644 ui/src/pages/session-details/new/view-settings.tsx

diff --git a/ui/src/components/filtering/default-filter-control.tsx b/ui/src/components/filtering/default-filter-control.tsx
index 888d71efa..ef8673c5e 100644
--- a/ui/src/components/filtering/default-filter-control.tsx
+++ b/ui/src/components/filtering/default-filter-control.tsx
@@ -49,20 +49,13 @@ export const DefaultFiltersControl = ({ field }: { field: string }) => {
 }
 
 export const DefaultFiltersTooltip = ({
-  className,
   project,
 }: {
-  className?: string
   project: ProjectDetails
 }) => (
   <Popover.Root>
     <Popover.Trigger asChild>
-      <Button
-        aria-label={translate(STRING.INFO)}
-        className={className}
-        size="icon"
-        variant="ghost"
-      >
+      <Button aria-label={translate(STRING.INFO)} size="icon" variant="ghost">
         <InfoIcon className="w-4 h-4" />
       </Button>
     </Popover.Trigger>
diff --git a/ui/src/nova-ui-kit/components/checkbox/checkbox.module.scss b/ui/src/nova-ui-kit/components/checkbox/checkbox.module.scss
index c63648fcd..d72cddbeb 100644
--- a/ui/src/nova-ui-kit/components/checkbox/checkbox.module.scss
+++ b/ui/src/nova-ui-kit/components/checkbox/checkbox.module.scss
@@ -14,10 +14,6 @@
   border: 1px solid var(--color-border);
   flex-shrink: 0;
 
-  &.neutral {
-    border-color: var(--color-neutral-400);
-  }
-
   &:focus-visible {
     box-shadow: 0 0 0 2px var(--color-generic-black);
   }
@@ -50,18 +46,6 @@
   color: var(--color-muted-foreground);
   margin-left: 6px;
 
-  &.success {
-    color: var(--color-success);
-  }
-
-  &.alert {
-    color: var(--color-accent);
-  }
-
-  &.neutral {
-    color: var(--color-generic-white);
-  }
-
   &.disabled {
     opacity: 0.5;
   }
diff --git a/ui/src/nova-ui-kit/components/checkbox/checkbox.tsx b/ui/src/nova-ui-kit/components/checkbox/checkbox.tsx
index 4d8ca6961..5a5276e54 100644
--- a/ui/src/nova-ui-kit/components/checkbox/checkbox.tsx
+++ b/ui/src/nova-ui-kit/components/checkbox/checkbox.tsx
@@ -3,19 +3,11 @@ import classNames from 'classnames'
 import { CheckIcon, MinusIcon } from 'lucide-react'
 import styles from './checkbox.module.scss'
 
-export enum CheckboxTheme {
-  Default = 'default',
-  Success = 'success',
-  Alert = 'alert',
-  Neutral = 'neutral',
-}
-
 interface CheckboxProps {
   checked: boolean | 'indeterminate'
   disabled?: boolean
   id?: string
   label?: string
-  theme?: CheckboxTheme
   onCheckedChange?: (checked: boolean) => void
 }
 
@@ -24,15 +16,12 @@ export const Checkbox = ({
   disabled,
   id,
   label,
-  theme = CheckboxTheme.Default,
   onCheckedChange,
 }: CheckboxProps) => (
   <div className={styles.wrapper}>
     <_Checkbox.Root
       checked={checked}
-      className={classNames(styles.checkboxRoot, {
-        [styles.neutral]: theme === CheckboxTheme.Neutral,
-      })}
+      className={styles.checkboxRoot}
       disabled={disabled}
       id={id}
       onCheckedChange={onCheckedChange}
@@ -48,9 +37,6 @@ export const Checkbox = ({
       <label
         htmlFor={id}
         className={classNames(styles.label, {
-          [styles.success]: theme === CheckboxTheme.Success,
-          [styles.alert]: theme === CheckboxTheme.Alert,
-          [styles.neutral]: theme === CheckboxTheme.Neutral,
           [styles.disabled]: disabled,
         })}
       >
diff --git a/ui/src/nova-ui-kit/components/table/column-settings/column-settings.module.scss b/ui/src/nova-ui-kit/components/table/column-settings/column-settings.module.scss
deleted file mode 100644
index d5bca332e..000000000
--- a/ui/src/nova-ui-kit/components/table/column-settings/column-settings.module.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.wrapper {
-  width: auto !important;
-  min-width: 180px;
-  padding: 24px;
-  box-sizing: border-box;
-}
-
-.description {
-  display: block;
-  @include body-small();
-  font-weight: 600;
-  color: var(--color-muted-foreground);
-  margin-bottom: 16px;
-}
-
-.settings {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
diff --git a/ui/src/nova-ui-kit/components/table/column-settings/column-settings.tsx b/ui/src/nova-ui-kit/components/table/column-settings/column-settings.tsx
index 03c061b1d..1d79f6925 100644
--- a/ui/src/nova-ui-kit/components/table/column-settings/column-settings.tsx
+++ b/ui/src/nova-ui-kit/components/table/column-settings/column-settings.tsx
@@ -1,7 +1,6 @@
 import { Columns3CogIcon } from 'lucide-react'
 import { BasicTooltip, Button, Checkbox, Popover } from 'nova-ui-kit'
 import { STRING, translate } from 'utils/language'
-import styles from './column-settings.module.scss'
 
 interface ColumnSettingsProps {
   columns: { id: string; name: string }[]
@@ -27,29 +26,27 @@ export const ColumnSettings = ({
         </Button>
       </Popover.Trigger>
     </BasicTooltip>
-    <Popover.Content className={styles.wrapper} align="end" side="bottom">
-      <div>
-        <span className={styles.description}>
-          {translate(STRING.TABLE_COLUMNS)}
-        </span>
-        <div className={styles.settings}>
-          {columns.map((column) =>
-            column.name.length ? (
-              <Checkbox
-                key={column.id}
-                checked={columnSettings[column.id]}
-                id={column.id}
-                label={column.name}
-                onCheckedChange={(checked) => {
-                  onColumnSettingsChange({
-                    ...columnSettings,
-                    [column.id]: checked,
-                  })
-                }}
-              />
-            ) : null
-          )}
-        </div>
+    <Popover.Content className="grid gap-4" align="end" side="bottom">
+      <span className="body-base font-semibold text-muted-foreground">
+        {translate(STRING.TABLE_COLUMNS)}
+      </span>
+      <div className="grid gap-2">
+        {columns.map((column) =>
+          column.name.length ? (
+            <Checkbox
+              key={column.id}
+              checked={columnSettings[column.id]}
+              id={column.id}
+              label={column.name}
+              onCheckedChange={(checked) => {
+                onColumnSettingsChange({
+                  ...columnSettings,
+                  [column.id]: checked,
+                })
+              }}
+            />
+          ) : null
+        )}
       </div>
     </Popover.Content>
   </Popover.Root>
diff --git a/ui/src/nova-ui-kit/index.ts b/ui/src/nova-ui-kit/index.ts
index 82f52bb1b..0e60f3ce8 100644
--- a/ui/src/nova-ui-kit/index.ts
+++ b/ui/src/nova-ui-kit/index.ts
@@ -9,7 +9,7 @@ export { Button } from './components/button/index'
 export { SaveButton } from './components/button/save-button'
 export { Calendar } from './components/calendar'
 export { Card, CardSize } from './components/card/card'
-export { Checkbox, CheckboxTheme } from './components/checkbox/checkbox'
+export { Checkbox } from './components/checkbox/checkbox'
 export { CodeBlock } from './components/code-block'
 export * as Collapsible from './components/collapsible'
 export { ComboBox } from './components/combo-box/combo-box'
diff --git a/ui/src/pages/session-details/new/capture/capture.tsx b/ui/src/pages/session-details/new/capture/capture.tsx
index d2c61fb7d..f9da38228 100644
--- a/ui/src/pages/session-details/new/capture/capture.tsx
+++ b/ui/src/pages/session-details/new/capture/capture.tsx
@@ -127,7 +127,7 @@ export const Capture = ({
       <img ref={imageRef} className={styles.image} />
       <div
         className={classNames(styles.details, {
-          [styles.showOverlay]: showDetections,
+          [styles.showOverlay]: showDetections && detections.length,
         })}
       >
         {renderOverlay && <CaptureOverlay boxStyles={boxStyles} />}
diff --git a/ui/src/pages/session-details/new/session-details.tsx b/ui/src/pages/session-details/new/session-details.tsx
index ce3b958d5..0279edfd0 100644
--- a/ui/src/pages/session-details/new/session-details.tsx
+++ b/ui/src/pages/session-details/new/session-details.tsx
@@ -29,6 +29,7 @@ import { SessionInfo } from './session-info'
 import { SessionPlots } from './session-plots'
 import { StarButton } from './star-button'
 import { TimelineSlider } from './timeline-slider/timeline-slider'
+import { ViewSettings } from './view-settings'
 
 const TABS = {
   SESSION: 'session',
@@ -87,6 +88,11 @@ export const SessionDetailsPage = () => {
 const Content = ({ session }: { session: SessionDetails }) => {
   // Settings
   const [poll, setPoll] = useState(false)
+  const [settings, setSettings] = useState({
+    defaultFilters: true,
+    showDetections: true,
+    snapToDetections: session.numDetections ? true : false,
+  })
 
   // Data
   const { projectId } = useParams()
@@ -153,10 +159,10 @@ const Content = ({ session }: { session: SessionDetails }) => {
         <div className="grow flex flex-col bg-background rounded-lg border border-border overflow-hidden md:rounded-xl">
           <div className="grow flex items-center justify-center">
             <Capture
-              defaultFilters
+              defaultFilters={settings.defaultFilters}
               detections={activeCapture?.detections ?? []}
               height={activeCapture?.height ?? session.firstCapture.height}
-              showDetections
+              showDetections={settings.showDetections}
               src={activeCapture?.src}
               width={activeCapture?.width ?? session.firstCapture.width}
             />
@@ -197,7 +203,13 @@ const Content = ({ session }: { session: SessionDetails }) => {
                 setActiveCaptureId={setActiveCaptureId}
               />
             </div>
-            <div />
+            <div className="flex items-center justify-end">
+              <ViewSettings
+                session={session}
+                onSettingsChange={setSettings}
+                settings={settings}
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -205,6 +217,7 @@ const Content = ({ session }: { session: SessionDetails }) => {
         <ActivityPlot
           session={session}
           setActiveCaptureId={setActiveCaptureId}
+          snapToDetections={settings.snapToDetections}
           timeline={timeline}
         />
         <TimelineSlider
diff --git a/ui/src/pages/session-details/new/view-settings.tsx b/ui/src/pages/session-details/new/view-settings.tsx
new file mode 100644
index 000000000..c94a63438
--- /dev/null
+++ b/ui/src/pages/session-details/new/view-settings.tsx
@@ -0,0 +1,89 @@
+import { DefaultFiltersTooltip } from 'components/filtering/default-filter-control'
+import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
+import { SessionDetails } from 'data-services/models/session-details'
+import { SettingsIcon } from 'lucide-react'
+import { BasicTooltip, Button, Checkbox, Popover } from 'nova-ui-kit'
+import { useParams } from 'react-router-dom'
+import { STRING, translate } from 'utils/language'
+
+export const ViewSettings = ({
+  onSettingsChange,
+  session,
+  settings,
+}: {
+  onSettingsChange: (settings: {
+    defaultFilters: boolean
+    showDetections: boolean
+    snapToDetections: boolean
+  }) => void
+  session: SessionDetails
+  settings: {
+    defaultFilters: boolean
+    showDetections: boolean
+    snapToDetections: boolean
+  }
+}) => {
+  const { projectId } = useParams()
+  const { project } = useProjectDetails(projectId as string, true)
+
+  return (
+    <Popover.Root>
+      <BasicTooltip asChild content={translate(STRING.VIEW_SETTINGS)}>
+        <Popover.Trigger asChild>
+          <Button
+            aria-label={translate(STRING.VIEW_SETTINGS)}
+            size="icon"
+            variant="ghost"
+          >
+            <SettingsIcon className="w-4 h-4" />
+          </Button>
+        </Popover.Trigger>
+      </BasicTooltip>
+      <Popover.Content className="grid gap-4" align="end" side="bottom">
+        <span className="body-base font-semibold text-muted-foreground">
+          {translate(STRING.VIEW_SETTINGS)}
+        </span>
+        <div className="grid gap-2">
+          <Checkbox
+            id="show-detections"
+            label="Show detections"
+            checked={settings.showDetections}
+            onCheckedChange={() =>
+              onSettingsChange({
+                ...settings,
+                showDetections: !settings.showDetections,
+              })
+            }
+          />
+          <div className="flex items-center gap-1">
+            <Checkbox
+              id="default-filters"
+              label="Default filters"
+              checked={settings.defaultFilters}
+              onCheckedChange={() =>
+                onSettingsChange({
+                  ...settings,
+                  defaultFilters: !settings.defaultFilters,
+                })
+              }
+              disabled // If enabled we should refetch session data based on this setting
+            />
+            {project ? <DefaultFiltersTooltip project={project} /> : null}
+          </div>
+          <Checkbox
+            id="snap-to-detections"
+            label="Snap to images with detections"
+            checked={settings.snapToDetections}
+            onCheckedChange={() =>
+              onSettingsChange({
+                ...settings,
+                snapToDetections: !settings.snapToDetections,
+              })
+            }
+            disabled={session.numDetections ? false : true}
+          />
+        </div>
+      </Popover.Content>
+    </Popover.Root>
+  )
+}
diff --git a/ui/src/pages/session-details/playback/playback.tsx b/ui/src/pages/session-details/playback/playback.tsx
index 71c80bc83..8c75cba22 100644
--- a/ui/src/pages/session-details/playback/playback.tsx
+++ b/ui/src/pages/session-details/playback/playback.tsx
@@ -4,7 +4,7 @@ import { useCaptureDetails } from 'data-services/hooks/captures/useCaptureDetail
 import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
 import { useSessionTimeline } from 'data-services/hooks/sessions/useSessionTimeline'
 import { SessionDetails } from 'data-services/models/session-details'
-import { Checkbox, CheckboxTheme } from 'nova-ui-kit'
+import { Checkbox } from 'nova-ui-kit'
 import { useEffect, useState } from 'react'
 import { ActivityPlot } from './activity-plot/lazy-activity-plot'
 import { CaptureDetails } from './capture-details/capture-details'
@@ -74,7 +74,6 @@ export const Playback = ({
               label="Show detections"
               checked={showDetections}
               onCheckedChange={setShowDetections}
-              theme={CheckboxTheme.Neutral}
             />
             <div className="flex items-center gap-1">
               <Checkbox
@@ -82,21 +81,14 @@ export const Playback = ({
                 label="Default filters"
                 checked={defaultFilters}
                 onCheckedChange={setDefaultFilters}
-                theme={CheckboxTheme.Neutral}
               />
-              {project ? (
-                <DefaultFiltersTooltip
-                  className="text-neutral-200 hover:bg-transparent"
-                  project={project}
-                />
-              ) : null}
+              {project ? <DefaultFiltersTooltip project={project} /> : null}
             </div>
             <Checkbox
               id="snap-to-detections"
               label="Snap to images with detections"
               checked={snapToDetections}
               onCheckedChange={setSnapToDetections}
-              theme={CheckboxTheme.Neutral}
               disabled={session.numDetections ? false : true}
             />
           </div>

From a4f3ec4f6ccf26df435949499fbfae766630356a Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Fri, 29 May 2026 12:49:25 +0200
Subject: [PATCH 06/11] layout: setup processing popover

---
 .../status-marker/status-marker.module.scss   |   4 +-
 ui/src/nova-ui-kit/global.scss                |   2 +-
 .../pages/deployments/deployment-columns.tsx  |   2 +-
 .../capture-sets/capture-set-columns.tsx      |   2 +-
 .../new/process/process-now.tsx               |  52 +++++
 .../session-details/new/process/process.tsx   |  94 ++++++++
 .../session-details/new/session-details.tsx   | 221 +++++++++---------
 .../capture-details/capture-details.tsx       |   4 +-
 8 files changed, 268 insertions(+), 113 deletions(-)
 create mode 100644 ui/src/pages/session-details/new/process/process-now.tsx
 create mode 100644 ui/src/pages/session-details/new/process/process.tsx

diff --git a/ui/src/nova-ui-kit/components/status/status-marker/status-marker.module.scss b/ui/src/nova-ui-kit/components/status/status-marker/status-marker.module.scss
index 3860f5e00..069a75dbf 100644
--- a/ui/src/nova-ui-kit/components/status/status-marker/status-marker.module.scss
+++ b/ui/src/nova-ui-kit/components/status/status-marker/status-marker.module.scss
@@ -1,6 +1,6 @@
 .statusMarker {
-  width: 12px;
-  height: 12px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
   background-color: var(--color-border);
 }
diff --git a/ui/src/nova-ui-kit/global.scss b/ui/src/nova-ui-kit/global.scss
index ded841ea7..6dd11a959 100644
--- a/ui/src/nova-ui-kit/global.scss
+++ b/ui/src/nova-ui-kit/global.scss
@@ -89,5 +89,5 @@
 }
 
 .bubble-label {
-  @include body-number-small();
+  @include bubble-label();
 }
diff --git a/ui/src/pages/deployments/deployment-columns.tsx b/ui/src/pages/deployments/deployment-columns.tsx
index f29cb2ab1..95fb1a9f4 100644
--- a/ui/src/pages/deployments/deployment-columns.tsx
+++ b/ui/src/pages/deployments/deployment-columns.tsx
@@ -80,7 +80,7 @@ export const columns = ({
   },
   {
     id: 'status',
-    name: 'Latest job status',
+    name: translate(STRING.FIELD_LABEL_LATEST_JOB_STATUS),
     tooltip: translate(STRING.TOOLTIP_LATEST_JOB_STATUS, {
       type: translate(STRING.ENTITY_TYPE_DEPLOYMENT),
     }),
diff --git a/ui/src/pages/project/capture-sets/capture-set-columns.tsx b/ui/src/pages/project/capture-sets/capture-set-columns.tsx
index 1da9b5d9a..9ca6381c0 100644
--- a/ui/src/pages/project/capture-sets/capture-set-columns.tsx
+++ b/ui/src/pages/project/capture-sets/capture-set-columns.tsx
@@ -48,7 +48,7 @@ export const columns = ({
   },
   {
     id: 'status',
-    name: 'Latest job status',
+    name: translate(STRING.FIELD_LABEL_LATEST_JOB_STATUS),
     tooltip: translate(STRING.TOOLTIP_LATEST_JOB_STATUS, {
       type: translate(STRING.ENTITY_TYPE_CAPTURE_SET),
     }),
diff --git a/ui/src/pages/session-details/new/process/process-now.tsx b/ui/src/pages/session-details/new/process/process-now.tsx
new file mode 100644
index 000000000..87be45555
--- /dev/null
+++ b/ui/src/pages/session-details/new/process/process-now.tsx
@@ -0,0 +1,52 @@
+import { useCreateJob } from 'data-services/hooks/jobs/useCreateJob'
+import { CaptureDetails } from 'data-services/models/capture-details'
+import { CheckIcon, Loader2Icon } from 'lucide-react'
+import { Button } from 'nova-ui-kit'
+import { useParams } from 'react-router-dom'
+import { STRING, translate } from 'utils/language'
+import { UserPermission } from 'utils/user/types'
+
+export const ProcessNow = ({
+  capture,
+  pipelineId,
+}: {
+  capture: CaptureDetails
+  pipelineId?: string
+}) => {
+  const { projectId } = useParams()
+  const { createJob, isLoading, isSuccess } = useCreateJob()
+  const canProcess = capture.userPermissions.includes(
+    UserPermission.RunSingleImage
+  )
+  const disabled = capture.hasJobInProgress || !pipelineId || !canProcess
+  // @TODO: also check if pipeline is healthy/available
+
+  return (
+    <Button
+      disabled={disabled}
+      onClick={() => {
+        if (!capture) {
+          return
+        }
+
+        createJob({
+          delay: 0,
+          name: `Capture #${capture.id}`,
+          sourceImage: capture.id,
+          pipeline: pipelineId,
+          projectId: projectId as string,
+          startNow: true,
+        })
+      }}
+      size="small"
+      variant="success"
+    >
+      <span>{translate(STRING.PROCESS_NOW)}</span>
+      {isSuccess ? (
+        <CheckIcon className="w-4 h-4 ml-2" />
+      ) : isLoading ? (
+        <Loader2Icon className="w-4 h-4 ml-2 animate-spin" />
+      ) : null}
+    </Button>
+  )
+}
diff --git a/ui/src/pages/session-details/new/process/process.tsx b/ui/src/pages/session-details/new/process/process.tsx
new file mode 100644
index 000000000..32d831f32
--- /dev/null
+++ b/ui/src/pages/session-details/new/process/process.tsx
@@ -0,0 +1,94 @@
+import { FormRow, FormSection } from 'components/form/layout/layout'
+import { API_ROUTES } from 'data-services/constants'
+import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
+import { CaptureDetails } from 'data-services/models/capture-details'
+import { ChevronDownIcon } from 'lucide-react'
+import {
+  Button,
+  EntityPicker,
+  InputContent,
+  Popover,
+  StatusMarker,
+} from 'nova-ui-kit'
+import { useState } from 'react'
+import { Link, useParams } from 'react-router-dom'
+import { APP_ROUTES } from 'utils/constants'
+import { getAppRoute } from 'utils/getAppRoute'
+import { STRING, translate } from 'utils/language'
+import { UserPermission } from 'utils/user/types'
+import { ProcessNow } from './process-now'
+
+export const Process = ({ capture }: { capture: CaptureDetails }) => {
+  const { projectId } = useParams()
+  const { project } = useProjectDetails(projectId as string, true)
+  const [pipelineId, setPipelineId] = useState(
+    project?.settings.defaultProcessingPipeline?.id
+  )
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <Button size="small" variant="outline">
+          {capture.currentJob &&
+          capture.currentJob.status.code !== 'SUCCESS' ? (
+            <StatusMarker color={capture.currentJob.status.color} />
+          ) : null}
+          <span>{translate(STRING.PROCESS)}</span>
+          <ChevronDownIcon className="w-4 h-4" />
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content className="p-0 w-96" align="end">
+        <FormSection
+          title={translate(STRING.PROCESS)}
+          description={
+            capture.userPermissions.includes(UserPermission.RunSingleImage)
+              ? translate(STRING.MESSAGE_PROCESS_NOW_TOOLTIP)
+              : translate(STRING.MESSAGE_PERMISSIONS_MISSING)
+          }
+        >
+          <div className="flex flex-col items-end gap-4">
+            <EntityPicker
+              collection={API_ROUTES.PIPELINES}
+              onValueChange={setPipelineId}
+              value={pipelineId}
+            />
+            <ProcessNow capture={capture} pipelineId={pipelineId} />
+          </div>
+        </FormSection>
+        {capture.currentJob ?? capture.numJobs ? (
+          <FormSection>
+            <FormRow>
+              <InputContent
+                label={translate(STRING.FIELD_LABEL_LATEST_JOB_STATUS)}
+              >
+                {capture.currentJob ? (
+                  <div className="flex items-center gap-2">
+                    <StatusMarker color={capture.currentJob.status.color} />
+                    <span className="pt-0.5 body-base">
+                      {capture.currentJob.status.label}
+                    </span>
+                  </div>
+                ) : null}
+              </InputContent>
+              <InputContent label={translate(STRING.FIELD_LABEL_JOBS)}>
+                <Link
+                  className="bubble-label"
+                  to={getAppRoute({
+                    to: APP_ROUTES.JOBS({
+                      projectId: projectId as string,
+                    }),
+                    filters: {
+                      source_image_single: capture.id,
+                    },
+                  })}
+                >
+                  <span>{capture.numJobs}</span>
+                </Link>
+              </InputContent>
+            </FormRow>
+          </FormSection>
+        ) : null}
+      </Popover.Content>
+    </Popover.Root>
+  )
+}
diff --git a/ui/src/pages/session-details/new/session-details.tsx b/ui/src/pages/session-details/new/session-details.tsx
index 0279edfd0..27b533e1d 100644
--- a/ui/src/pages/session-details/new/session-details.tsx
+++ b/ui/src/pages/session-details/new/session-details.tsx
@@ -25,6 +25,7 @@ import { CaptureNavigation } from './capture-navigation'
 import { Capture } from './capture/capture'
 import { useActiveCaptureId } from './hooks/useActiveCapture'
 import { useActiveOccurrences } from './hooks/useActiveOccurrences'
+import { Process } from './process/process'
 import { SessionInfo } from './session-info'
 import { SessionPlots } from './session-plots'
 import { StarButton } from './star-button'
@@ -72,14 +73,7 @@ export const SessionDetailsPage = () => {
       <Helmet>
         <meta name="og:image" content={session.exampleCaptures[0]?.src} />
       </Helmet>
-      <PageHeader
-        title={session.label}
-        subTitle={translate(STRING.RESULTS_CAPTURES, {
-          total: session?.numImages ?? 0,
-        })}
-        isLoading={isLoading}
-        tooltip={translate(STRING.TOOLTIP_SESSION)}
-      />
+
       <Content session={session} />
     </>
   )
@@ -121,113 +115,126 @@ const Content = ({ session }: { session: SessionDetails }) => {
   }
 
   return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-col gap-6 mt-6 md:flex-row">
-        <Box className="p-2 bg-background rounded-lg md:p-4 md:rounded-xl">
-          <Tabs.Root defaultValue={TABS.SESSION}>
-            <Tabs.List>
-              <Tabs.Trigger
-                value={TABS.SESSION}
-                label={translate(STRING.TAB_ITEM_SESSION)}
-              />
-              <Tabs.Trigger
-                value={TABS.CAPTURE}
-                label={translate(STRING.TAB_ITEM_CAPTURE)}
-              />
-              <Tabs.Trigger
-                value={TABS.CHARTS}
-                label={translate(STRING.TAB_ITEM_CHARTS)}
+    <>
+      <PageHeader
+        title={session.label}
+        subTitle={translate(STRING.RESULTS_CAPTURES, {
+          total: session?.numImages ?? 0,
+        })}
+        tooltip={translate(STRING.TOOLTIP_SESSION)}
+      >
+        {activeCapture ? <Process capture={activeCapture} /> : null}
+      </PageHeader>
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-6 mt-6 md:flex-row">
+          <Box className="p-2 bg-background rounded-lg md:p-4 md:rounded-xl">
+            <Tabs.Root defaultValue={TABS.SESSION}>
+              <Tabs.List>
+                <Tabs.Trigger
+                  value={TABS.SESSION}
+                  label={translate(STRING.TAB_ITEM_SESSION)}
+                />
+                <Tabs.Trigger
+                  value={TABS.CAPTURE}
+                  label={translate(STRING.TAB_ITEM_CAPTURE)}
+                />
+                <Tabs.Trigger
+                  value={TABS.CHARTS}
+                  label={translate(STRING.TAB_ITEM_CHARTS)}
+                />
+              </Tabs.List>
+              <Tabs.Content value={TABS.SESSION}>
+                <div className="w-72">
+                  <SessionInfo session={session} />
+                </div>
+              </Tabs.Content>
+              <Tabs.Content value={TABS.CAPTURE}>
+                <div className="w-72">
+                  {activeCapture ? (
+                    <CaptureInfo capture={activeCapture} />
+                  ) : null}
+                </div>
+              </Tabs.Content>
+              <Tabs.Content value={TABS.CHARTS}>
+                <div className="w-96 space-y-4">
+                  <SessionPlots session={session} />
+                </div>
+              </Tabs.Content>
+            </Tabs.Root>
+          </Box>
+          <div className="grow flex flex-col bg-background rounded-lg border border-border overflow-hidden md:rounded-xl">
+            <div className="grow flex items-center justify-center">
+              <Capture
+                defaultFilters={settings.defaultFilters}
+                detections={activeCapture?.detections ?? []}
+                height={activeCapture?.height ?? session.firstCapture.height}
+                showDetections={settings.showDetections}
+                src={activeCapture?.src}
+                width={activeCapture?.width ?? session.firstCapture.width}
               />
-            </Tabs.List>
-            <Tabs.Content value={TABS.SESSION}>
-              <div className="w-72">
-                <SessionInfo session={session} />
+            </div>
+            <div className="grid grid-cols-3 p-6 border-t border-border">
+              <div className="flex items-center gap-2">
+                {activeCapture ? (
+                  <>
+                    <span className="pt-0.5 text-muted-foreground">
+                      {activeCapture.dateTimeLabel}
+                    </span>
+                    <StarButton
+                      capture={activeCapture}
+                      canStar={user.loggedIn && activeCapture.canStar}
+                    />
+                    <BasicTooltip
+                      asChild
+                      content={translate(STRING.TOOLTIP_VIEW_SOURCE_FILE)}
+                    >
+                      <a
+                        href={activeCapture.url}
+                        className={cn(
+                          buttonVariants({ size: 'icon', variant: 'ghost' })
+                        )}
+                        rel="noreferrer"
+                        target="_blank"
+                      >
+                        <ExternalLinkIcon className="w-4 h-4" />
+                      </a>
+                    </BasicTooltip>
+                  </>
+                ) : null}
               </div>
-            </Tabs.Content>
-            <Tabs.Content value={TABS.CAPTURE}>
-              <div className="w-72">
-                {activeCapture ? <CaptureInfo capture={activeCapture} /> : null}
+              <div className="flex items-center justify-center">
+                <CaptureNavigation
+                  activeCapture={activeCapture}
+                  timeline={timeline}
+                  setActiveCaptureId={setActiveCaptureId}
+                />
               </div>
-            </Tabs.Content>
-            <Tabs.Content value={TABS.CHARTS}>
-              <div className="w-96 space-y-4">
-                <SessionPlots session={session} />
+              <div className="flex items-center justify-end">
+                <ViewSettings
+                  session={session}
+                  onSettingsChange={setSettings}
+                  settings={settings}
+                />
               </div>
-            </Tabs.Content>
-          </Tabs.Root>
-        </Box>
-        <div className="grow flex flex-col bg-background rounded-lg border border-border overflow-hidden md:rounded-xl">
-          <div className="grow flex items-center justify-center">
-            <Capture
-              defaultFilters={settings.defaultFilters}
-              detections={activeCapture?.detections ?? []}
-              height={activeCapture?.height ?? session.firstCapture.height}
-              showDetections={settings.showDetections}
-              src={activeCapture?.src}
-              width={activeCapture?.width ?? session.firstCapture.width}
-            />
-          </div>
-          <div className="grid grid-cols-3 p-6 border-t border-border">
-            <div className="flex items-center gap-2">
-              {activeCapture ? (
-                <>
-                  <span className="pt-0.5 text-muted-foreground">
-                    {activeCapture.dateTimeLabel}
-                  </span>
-                  <StarButton
-                    capture={activeCapture}
-                    canStar={user.loggedIn && activeCapture.canStar}
-                  />
-                  <BasicTooltip
-                    asChild
-                    content={translate(STRING.TOOLTIP_VIEW_SOURCE_FILE)}
-                  >
-                    <a
-                      href={activeCapture.url}
-                      className={cn(
-                        buttonVariants({ size: 'icon', variant: 'ghost' })
-                      )}
-                      rel="noreferrer"
-                      target="_blank"
-                    >
-                      <ExternalLinkIcon className="w-4 h-4" />
-                    </a>
-                  </BasicTooltip>
-                </>
-              ) : null}
-            </div>
-            <div className="flex items-center justify-center">
-              <CaptureNavigation
-                activeCapture={activeCapture}
-                timeline={timeline}
-                setActiveCaptureId={setActiveCaptureId}
-              />
-            </div>
-            <div className="flex items-center justify-end">
-              <ViewSettings
-                session={session}
-                onSettingsChange={setSettings}
-                settings={settings}
-              />
             </div>
           </div>
         </div>
+        <div className="bg-background rounded-lg border border-border p-4">
+          <ActivityPlot
+            session={session}
+            setActiveCaptureId={setActiveCaptureId}
+            snapToDetections={settings.snapToDetections}
+            timeline={timeline}
+          />
+          <TimelineSlider
+            activeCapture={activeCapture}
+            session={session}
+            setActiveCaptureId={setActiveCaptureId}
+            timeline={timeline}
+          />
+        </div>
       </div>
-      <div className="bg-background rounded-lg border border-border p-4">
-        <ActivityPlot
-          session={session}
-          setActiveCaptureId={setActiveCaptureId}
-          snapToDetections={settings.snapToDetections}
-          timeline={timeline}
-        />
-        <TimelineSlider
-          activeCapture={activeCapture}
-          session={session}
-          setActiveCaptureId={setActiveCaptureId}
-          timeline={timeline}
-        />
-      </div>
-    </div>
+    </>
   )
 }
 
diff --git a/ui/src/pages/session-details/playback/capture-details/capture-details.tsx b/ui/src/pages/session-details/playback/capture-details/capture-details.tsx
index 9f28e5653..9050a06db 100644
--- a/ui/src/pages/session-details/playback/capture-details/capture-details.tsx
+++ b/ui/src/pages/session-details/playback/capture-details/capture-details.tsx
@@ -80,7 +80,9 @@ export const CaptureDetails = ({
         ) : null}
         {user.loggedIn && capture.currentJob ? (
           <div>
-            <span className={styles.label}>Latest job status</span>
+            <span className={styles.label}>
+              {translate(STRING.FIELD_LABEL_LATEST_JOB_STATUS)}
+            </span>
             <JobDetails job={capture.currentJob} />
           </div>
         ) : null}

From 82c2bf596f459f3e7c7490470fae26b94e38be36 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Fri, 29 May 2026 12:57:08 +0200
Subject: [PATCH 07/11] chore: cleanup code

---
 ui/src/app.tsx                                |   2 +-
 .../{new => }/activity-plot/activity-plot.tsx |   2 +-
 .../activity-plot/lazy-activity-plot.tsx      |   0
 .../activity-plot/useDynamicPlotWidth.ts      |   0
 .../{new => }/capture-info.tsx                |   0
 .../{new => }/capture-navigation.tsx          |   0
 .../{new => }/capture/capture.module.scss     |   0
 .../{new => }/capture/capture.tsx             |   0
 .../{new => }/hooks/useActiveCapture.ts       |   0
 .../{new => }/hooks/useActiveOccurrences.ts   |   0
 .../session-details/new/session-details.tsx   | 241 --------------
 .../playback/activity-plot/activity-plot.tsx  | 169 ----------
 .../lazy-activity-plot.module.scss            |   6 -
 .../activity-plot/lazy-activity-plot.tsx      |  21 --
 .../playback/activity-plot/types.ts           |   9 -
 .../activity-plot/useDynamicPlotWidth.ts      |  25 --
 .../capture-details.module.scss               |  50 ---
 .../capture-details/capture-details.tsx       | 278 ----------------
 .../capture-job/capture-job-dialog.tsx        |  40 ---
 .../capture-job/capture-job.tsx               |  18 -
 .../capture-job/process-now.tsx               |  60 ----
 .../capture-navigation.module.scss            |  18 -
 .../capture-navigation/capture-navigation.tsx | 115 -------
 .../playback/frame/frame.module.scss          |  70 ----
 .../session-details/playback/frame/frame.tsx  | 312 ------------------
 .../session-details/playback/frame/types.ts   |   6 -
 .../playback/playback.module.scss             | 103 ------
 .../session-details/playback/playback.tsx     | 137 --------
 .../session-captures-slider.tsx               |  72 ----
 .../playback/useActiveCapture.ts              |  17 -
 .../playback/useActiveOccurrences.ts          |  21 --
 .../pages/session-details/playback/utils.tsx  |  81 -----
 .../{new => }/process/process-now.tsx         |   0
 .../{new => }/process/process.tsx             |   0
 .../session-details.module.scss               |  47 ---
 .../pages/session-details/session-details.tsx | 241 +++++++++++---
 .../{new => }/session-info.tsx                |   0
 .../session-info/session-info.module.scss     |  13 -
 .../session-info/session-info.tsx             |  71 ----
 .../{new => }/session-plots.tsx               |   0
 .../session-details/{new => }/star-button.tsx |   0
 .../timeline-slider/styles.module.scss        |   0
 .../timeline-slider/timeline-slider.tsx       |   2 +-
 .../pages/session-details/{new => }/utils.tsx |   0
 .../{new => }/view-settings.tsx               |   0
 45 files changed, 202 insertions(+), 2045 deletions(-)
 rename ui/src/pages/session-details/{new => }/activity-plot/activity-plot.tsx (99%)
 rename ui/src/pages/session-details/{new => }/activity-plot/lazy-activity-plot.tsx (100%)
 rename ui/src/pages/session-details/{new => }/activity-plot/useDynamicPlotWidth.ts (100%)
 rename ui/src/pages/session-details/{new => }/capture-info.tsx (100%)
 rename ui/src/pages/session-details/{new => }/capture-navigation.tsx (100%)
 rename ui/src/pages/session-details/{new => }/capture/capture.module.scss (100%)
 rename ui/src/pages/session-details/{new => }/capture/capture.tsx (100%)
 rename ui/src/pages/session-details/{new => }/hooks/useActiveCapture.ts (100%)
 rename ui/src/pages/session-details/{new => }/hooks/useActiveOccurrences.ts (100%)
 delete mode 100644 ui/src/pages/session-details/new/session-details.tsx
 delete mode 100644 ui/src/pages/session-details/playback/activity-plot/activity-plot.tsx
 delete mode 100644 ui/src/pages/session-details/playback/activity-plot/lazy-activity-plot.module.scss
 delete mode 100644 ui/src/pages/session-details/playback/activity-plot/lazy-activity-plot.tsx
 delete mode 100644 ui/src/pages/session-details/playback/activity-plot/types.ts
 delete mode 100644 ui/src/pages/session-details/playback/activity-plot/useDynamicPlotWidth.ts
 delete mode 100644 ui/src/pages/session-details/playback/capture-details/capture-details.module.scss
 delete mode 100644 ui/src/pages/session-details/playback/capture-details/capture-details.tsx
 delete mode 100644 ui/src/pages/session-details/playback/capture-details/capture-job/capture-job-dialog.tsx
 delete mode 100644 ui/src/pages/session-details/playback/capture-details/capture-job/capture-job.tsx
 delete mode 100644 ui/src/pages/session-details/playback/capture-details/capture-job/process-now.tsx
 delete mode 100644 ui/src/pages/session-details/playback/capture-navigation/capture-navigation.module.scss
 delete mode 100644 ui/src/pages/session-details/playback/capture-navigation/capture-navigation.tsx
 delete mode 100644 ui/src/pages/session-details/playback/frame/frame.module.scss
 delete mode 100644 ui/src/pages/session-details/playback/frame/frame.tsx
 delete mode 100644 ui/src/pages/session-details/playback/frame/types.ts
 delete mode 100644 ui/src/pages/session-details/playback/playback.module.scss
 delete mode 100644 ui/src/pages/session-details/playback/playback.tsx
 delete mode 100644 ui/src/pages/session-details/playback/session-captures-slider/session-captures-slider.tsx
 delete mode 100644 ui/src/pages/session-details/playback/useActiveCapture.ts
 delete mode 100644 ui/src/pages/session-details/playback/useActiveOccurrences.ts
 delete mode 100644 ui/src/pages/session-details/playback/utils.tsx
 rename ui/src/pages/session-details/{new => }/process/process-now.tsx (100%)
 rename ui/src/pages/session-details/{new => }/process/process.tsx (100%)
 delete mode 100644 ui/src/pages/session-details/session-details.module.scss
 rename ui/src/pages/session-details/{new => }/session-info.tsx (100%)
 delete mode 100644 ui/src/pages/session-details/session-info/session-info.module.scss
 delete mode 100644 ui/src/pages/session-details/session-info/session-info.tsx
 rename ui/src/pages/session-details/{new => }/session-plots.tsx (100%)
 rename ui/src/pages/session-details/{new => }/star-button.tsx (100%)
 rename ui/src/pages/session-details/{new => }/timeline-slider/styles.module.scss (100%)
 rename ui/src/pages/session-details/{new => }/timeline-slider/timeline-slider.tsx (97%)
 rename ui/src/pages/session-details/{new => }/utils.tsx (100%)
 rename ui/src/pages/session-details/{new => }/view-settings.tsx (100%)

diff --git a/ui/src/app.tsx b/ui/src/app.tsx
index f882c8d06..5f686e0e2 100644
--- a/ui/src/app.tsx
+++ b/ui/src/app.tsx
@@ -36,7 +36,7 @@ import { Storage } from 'pages/project/storage/storage'
 import { Summary } from 'pages/project/summary/summary'
 import { Team } from 'pages/project/team/team'
 import { Projects } from 'pages/projects/projects'
-import SessionDetails from 'pages/session-details/new/session-details'
+import SessionDetails from 'pages/session-details/session-details'
 import { Sessions } from 'pages/sessions/sessions'
 import { Species } from 'pages/species/species'
 import { TaxaListDetails } from 'pages/taxa-list-details/taxa-list-details'
diff --git a/ui/src/pages/session-details/new/activity-plot/activity-plot.tsx b/ui/src/pages/session-details/activity-plot/activity-plot.tsx
similarity index 99%
rename from ui/src/pages/session-details/new/activity-plot/activity-plot.tsx
rename to ui/src/pages/session-details/activity-plot/activity-plot.tsx
index 4d384fc18..9c61728dd 100644
--- a/ui/src/pages/session-details/new/activity-plot/activity-plot.tsx
+++ b/ui/src/pages/session-details/activity-plot/activity-plot.tsx
@@ -23,7 +23,7 @@ export interface ActivityPlotProps {
   timeline: TimelineTick[]
 }
 
-const ActivityPlot = ({
+export const ActivityPlot = ({
   session,
   snapToDetections,
   timeline,
diff --git a/ui/src/pages/session-details/new/activity-plot/lazy-activity-plot.tsx b/ui/src/pages/session-details/activity-plot/lazy-activity-plot.tsx
similarity index 100%
rename from ui/src/pages/session-details/new/activity-plot/lazy-activity-plot.tsx
rename to ui/src/pages/session-details/activity-plot/lazy-activity-plot.tsx
diff --git a/ui/src/pages/session-details/new/activity-plot/useDynamicPlotWidth.ts b/ui/src/pages/session-details/activity-plot/useDynamicPlotWidth.ts
similarity index 100%
rename from ui/src/pages/session-details/new/activity-plot/useDynamicPlotWidth.ts
rename to ui/src/pages/session-details/activity-plot/useDynamicPlotWidth.ts
diff --git a/ui/src/pages/session-details/new/capture-info.tsx b/ui/src/pages/session-details/capture-info.tsx
similarity index 100%
rename from ui/src/pages/session-details/new/capture-info.tsx
rename to ui/src/pages/session-details/capture-info.tsx
diff --git a/ui/src/pages/session-details/new/capture-navigation.tsx b/ui/src/pages/session-details/capture-navigation.tsx
similarity index 100%
rename from ui/src/pages/session-details/new/capture-navigation.tsx
rename to ui/src/pages/session-details/capture-navigation.tsx
diff --git a/ui/src/pages/session-details/new/capture/capture.module.scss b/ui/src/pages/session-details/capture/capture.module.scss
similarity index 100%
rename from ui/src/pages/session-details/new/capture/capture.module.scss
rename to ui/src/pages/session-details/capture/capture.module.scss
diff --git a/ui/src/pages/session-details/new/capture/capture.tsx b/ui/src/pages/session-details/capture/capture.tsx
similarity index 100%
rename from ui/src/pages/session-details/new/capture/capture.tsx
rename to ui/src/pages/session-details/capture/capture.tsx
diff --git a/ui/src/pages/session-details/new/hooks/useActiveCapture.ts b/ui/src/pages/session-details/hooks/useActiveCapture.ts
similarity index 100%
rename from ui/src/pages/session-details/new/hooks/useActiveCapture.ts
rename to ui/src/pages/session-details/hooks/useActiveCapture.ts
diff --git a/ui/src/pages/session-details/new/hooks/useActiveOccurrences.ts b/ui/src/pages/session-details/hooks/useActiveOccurrences.ts
similarity index 100%
rename from ui/src/pages/session-details/new/hooks/useActiveOccurrences.ts
rename to ui/src/pages/session-details/hooks/useActiveOccurrences.ts
diff --git a/ui/src/pages/session-details/new/session-details.tsx b/ui/src/pages/session-details/new/session-details.tsx
deleted file mode 100644
index 27b533e1d..000000000
--- a/ui/src/pages/session-details/new/session-details.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-import { ErrorState } from 'components/error-state/error-state'
-import { useCaptureDetails } from 'data-services/hooks/captures/useCaptureDetails'
-import { useSessionDetails } from 'data-services/hooks/sessions/useSessionDetails'
-import { useSessionTimeline } from 'data-services/hooks/sessions/useSessionTimeline'
-import { SessionDetails } from 'data-services/models/session-details'
-import { ExternalLinkIcon } from 'lucide-react'
-import {
-  BasicTooltip,
-  Box,
-  buttonVariants,
-  LoadingSpinner,
-  PageHeader,
-  Tabs,
-} from 'nova-ui-kit'
-import { cn } from 'nova-ui-kit/utils'
-import { useContext, useEffect, useState } from 'react'
-import { Helmet } from 'react-helmet-async'
-import { useParams } from 'react-router-dom'
-import { BreadcrumbContext } from 'utils/breadcrumbContext'
-import { STRING, translate } from 'utils/language'
-import { useUser } from 'utils/user/userContext'
-import ActivityPlot from './activity-plot/activity-plot'
-import { CaptureInfo } from './capture-info'
-import { CaptureNavigation } from './capture-navigation'
-import { Capture } from './capture/capture'
-import { useActiveCaptureId } from './hooks/useActiveCapture'
-import { useActiveOccurrences } from './hooks/useActiveOccurrences'
-import { Process } from './process/process'
-import { SessionInfo } from './session-info'
-import { SessionPlots } from './session-plots'
-import { StarButton } from './star-button'
-import { TimelineSlider } from './timeline-slider/timeline-slider'
-import { ViewSettings } from './view-settings'
-
-const TABS = {
-  SESSION: 'session',
-  CAPTURE: 'capture',
-  CHARTS: 'charts',
-}
-
-export const SessionDetailsPage = () => {
-  const { id } = useParams()
-  const { setDetailBreadcrumb } = useContext(BreadcrumbContext)
-  const { activeOccurrences } = useActiveOccurrences()
-  const { activeCaptureId } = useActiveCaptureId()
-  const { session, isLoading, error } = useSessionDetails(id as string, {
-    capture: activeCaptureId,
-    occurrence: activeOccurrences[0],
-  })
-
-  useEffect(() => {
-    setDetailBreadcrumb(session ? { title: session.label } : undefined)
-
-    return () => {
-      setDetailBreadcrumb(undefined)
-    }
-  }, [session])
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center min-h-[320px]">
-        <LoadingSpinner />
-      </div>
-    )
-  }
-
-  if (!session || error) {
-    return <ErrorState error={error} />
-  }
-
-  return (
-    <>
-      <Helmet>
-        <meta name="og:image" content={session.exampleCaptures[0]?.src} />
-      </Helmet>
-
-      <Content session={session} />
-    </>
-  )
-}
-
-const Content = ({ session }: { session: SessionDetails }) => {
-  // Settings
-  const [poll, setPoll] = useState(false)
-  const [settings, setSettings] = useState({
-    defaultFilters: true,
-    showDetections: true,
-    snapToDetections: session.numDetections ? true : false,
-  })
-
-  // Data
-  const { projectId } = useParams()
-  const { user } = useUser()
-  const { activeCaptureId, setActiveCaptureId } = useActiveCaptureId(
-    session.firstCapture?.id
-  )
-  const { capture: activeCapture } = useCaptureDetails({
-    id: activeCaptureId as string,
-    poll,
-    projectId: projectId as string,
-  })
-  const { timeline = [] } = useSessionTimeline(session.id)
-
-  useEffect(() => {
-    // If the active capture has a job in progress, we want to poll the endpoint so we can show job updates
-    if (activeCapture?.hasJobInProgress) {
-      setPoll(true)
-    } else {
-      setPoll(false)
-    }
-  }, [activeCapture])
-
-  if (!session.firstCapture) {
-    return null
-  }
-
-  return (
-    <>
-      <PageHeader
-        title={session.label}
-        subTitle={translate(STRING.RESULTS_CAPTURES, {
-          total: session?.numImages ?? 0,
-        })}
-        tooltip={translate(STRING.TOOLTIP_SESSION)}
-      >
-        {activeCapture ? <Process capture={activeCapture} /> : null}
-      </PageHeader>
-      <div className="flex flex-col gap-6">
-        <div className="flex flex-col gap-6 mt-6 md:flex-row">
-          <Box className="p-2 bg-background rounded-lg md:p-4 md:rounded-xl">
-            <Tabs.Root defaultValue={TABS.SESSION}>
-              <Tabs.List>
-                <Tabs.Trigger
-                  value={TABS.SESSION}
-                  label={translate(STRING.TAB_ITEM_SESSION)}
-                />
-                <Tabs.Trigger
-                  value={TABS.CAPTURE}
-                  label={translate(STRING.TAB_ITEM_CAPTURE)}
-                />
-                <Tabs.Trigger
-                  value={TABS.CHARTS}
-                  label={translate(STRING.TAB_ITEM_CHARTS)}
-                />
-              </Tabs.List>
-              <Tabs.Content value={TABS.SESSION}>
-                <div className="w-72">
-                  <SessionInfo session={session} />
-                </div>
-              </Tabs.Content>
-              <Tabs.Content value={TABS.CAPTURE}>
-                <div className="w-72">
-                  {activeCapture ? (
-                    <CaptureInfo capture={activeCapture} />
-                  ) : null}
-                </div>
-              </Tabs.Content>
-              <Tabs.Content value={TABS.CHARTS}>
-                <div className="w-96 space-y-4">
-                  <SessionPlots session={session} />
-                </div>
-              </Tabs.Content>
-            </Tabs.Root>
-          </Box>
-          <div className="grow flex flex-col bg-background rounded-lg border border-border overflow-hidden md:rounded-xl">
-            <div className="grow flex items-center justify-center">
-              <Capture
-                defaultFilters={settings.defaultFilters}
-                detections={activeCapture?.detections ?? []}
-                height={activeCapture?.height ?? session.firstCapture.height}
-                showDetections={settings.showDetections}
-                src={activeCapture?.src}
-                width={activeCapture?.width ?? session.firstCapture.width}
-              />
-            </div>
-            <div className="grid grid-cols-3 p-6 border-t border-border">
-              <div className="flex items-center gap-2">
-                {activeCapture ? (
-                  <>
-                    <span className="pt-0.5 text-muted-foreground">
-                      {activeCapture.dateTimeLabel}
-                    </span>
-                    <StarButton
-                      capture={activeCapture}
-                      canStar={user.loggedIn && activeCapture.canStar}
-                    />
-                    <BasicTooltip
-                      asChild
-                      content={translate(STRING.TOOLTIP_VIEW_SOURCE_FILE)}
-                    >
-                      <a
-                        href={activeCapture.url}
-                        className={cn(
-                          buttonVariants({ size: 'icon', variant: 'ghost' })
-                        )}
-                        rel="noreferrer"
-                        target="_blank"
-                      >
-                        <ExternalLinkIcon className="w-4 h-4" />
-                      </a>
-                    </BasicTooltip>
-                  </>
-                ) : null}
-              </div>
-              <div className="flex items-center justify-center">
-                <CaptureNavigation
-                  activeCapture={activeCapture}
-                  timeline={timeline}
-                  setActiveCaptureId={setActiveCaptureId}
-                />
-              </div>
-              <div className="flex items-center justify-end">
-                <ViewSettings
-                  session={session}
-                  onSettingsChange={setSettings}
-                  settings={settings}
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="bg-background rounded-lg border border-border p-4">
-          <ActivityPlot
-            session={session}
-            setActiveCaptureId={setActiveCaptureId}
-            snapToDetections={settings.snapToDetections}
-            timeline={timeline}
-          />
-          <TimelineSlider
-            activeCapture={activeCapture}
-            session={session}
-            setActiveCaptureId={setActiveCaptureId}
-            timeline={timeline}
-          />
-        </div>
-      </div>
-    </>
-  )
-}
-
-export default SessionDetailsPage
diff --git a/ui/src/pages/session-details/playback/activity-plot/activity-plot.tsx b/ui/src/pages/session-details/playback/activity-plot/activity-plot.tsx
deleted file mode 100644
index c0cd3aae7..000000000
--- a/ui/src/pages/session-details/playback/activity-plot/activity-plot.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import { CONSTANTS } from 'nova-ui-kit'
-import { useRef } from 'react'
-import Plot from 'react-plotly.js'
-import { getCompactTimespanString } from 'utils/date/getCompactTimespanString/getCompactTimespanString'
-import { findClosestCaptureId } from '../utils'
-import { ActivityPlotProps } from './types'
-import { useDynamicPlotWidth } from './useDynamicPlotWidth'
-
-const fontFamily = 'Mazzard, sans-serif'
-const lineColorCaptures = CONSTANTS.COLORS.neutral[500]
-const lineColorDetections = CONSTANTS.COLORS.secondary[500]
-const spikeColor = CONSTANTS.COLORS.generic.white
-const textColor = CONSTANTS.COLOR_THEME.muted.foreground
-const tooltipBgColor = CONSTANTS.COLORS.generic.white
-const tooltipBorderColor = CONSTANTS.COLOR_THEME.muted.foreground
-
-const ActivityPlot = ({
-  session,
-  snapToDetections,
-  timeline,
-  setActiveCaptureId,
-}: ActivityPlotProps) => {
-  const containerRef = useRef(null)
-  const width = useDynamicPlotWidth(containerRef)
-
-  // Calculate the average number of captures
-  const avgCaptures =
-    timeline.reduce((sum, tick) => sum + tick.numCaptures, 0) / timeline.length
-
-  // Calculate the maximum deviation from the average
-  const maxDeviation = Math.max(
-    ...timeline.map((tick) => Math.abs(tick.numCaptures - avgCaptures))
-  )
-
-  // Set the y-axis range to be centered around the average
-  const yAxisMin = Math.max(0, avgCaptures - maxDeviation)
-  const yAxisMax = avgCaptures + maxDeviation
-
-  return (
-    <div style={{ margin: '0 14px -10px' }}>
-      <div ref={containerRef}>
-        <Plot
-          style={{ display: 'block' }}
-          data={[
-            {
-              x: timeline.map(
-                (timelineTick) => new Date(timelineTick.startDate)
-              ),
-              y: timeline.map((timelineTick) => timelineTick.numCaptures),
-              hovertemplate: 'Captures: %{y}<extra></extra>',
-              fill: 'tozeroy',
-              type: 'scatter',
-              mode: 'lines',
-              line: { color: lineColorCaptures, width: 1 },
-              name: 'Captures',
-              yaxis: 'y',
-            },
-            {
-              x: timeline.map(
-                (timelineTick) => new Date(timelineTick.startDate)
-              ),
-              y: timeline.map((timelineTick) => timelineTick.avgDetections),
-              hovertemplate: 'Avg. detections: %{y}<extra></extra>',
-              fill: 'tozeroy',
-              type: 'scatter',
-              mode: 'lines',
-              line: { color: lineColorDetections, width: 1 },
-              name: 'Avg. detections',
-              yaxis: 'y2',
-            },
-          ]}
-          layout={{
-            height: 100,
-            width: width,
-            paper_bgcolor: 'transparent',
-            plot_bgcolor: 'transparent',
-            margin: {
-              l: 0,
-              r: 0,
-              b: 0,
-              t: 0,
-              pad: 0,
-            },
-            hovermode: 'x unified',
-            // y-axis for captures
-            yaxis: {
-              showgrid: false,
-              showticklabels: false,
-              zeroline: false,
-              rangemode: 'nonnegative',
-              fixedrange: true,
-              range: [yAxisMin, yAxisMax],
-              side: 'left',
-            },
-            // y-axis for detections
-            yaxis2: {
-              showgrid: false,
-              showticklabels: false,
-              zeroline: false,
-              rangemode: 'nonnegative',
-              fixedrange: true,
-              range: [0, Math.max(session.detectionsMaxCount ?? 0, 1)], // Ensure a minimum range of 1
-              side: 'right',
-              overlaying: 'y',
-            },
-            xaxis: {
-              fixedrange: true,
-              range: [new Date(session.startDate), new Date(session.endDate)],
-              showgrid: false,
-              showline: false,
-              showticklabels: false,
-              spikecolor: spikeColor,
-              spikethickness: -2,
-              ticktext: timeline.map((timelineTick) =>
-                getCompactTimespanString({
-                  date1: timelineTick.startDate,
-                  date2: timelineTick.endDate,
-                  options: {
-                    second: true,
-                  },
-                })
-              ),
-              tickvals: timeline.map(
-                (timelineTick) => new Date(timelineTick.startDate)
-              ),
-              zeroline: false,
-            },
-            hoverlabel: {
-              bgcolor: tooltipBgColor,
-              bordercolor: tooltipBorderColor,
-              font: {
-                family: fontFamily,
-                size: 12,
-                color: textColor,
-              },
-            },
-            showlegend: false,
-          }}
-          config={{
-            displayModeBar: false,
-          }}
-          onClick={(data) => {
-            const timelineTickIndex = data.points[0].pointIndex
-            const timelineTick = timeline[timelineTickIndex]
-
-            if (!timelineTick) {
-              return
-            }
-
-            const captureId =
-              snapToDetections || !timelineTick.representativeCaptureId
-                ? findClosestCaptureId({
-                    snapToDetections,
-                    timeline,
-                    targetDate: timelineTick.startDate,
-                  })
-                : timelineTick.representativeCaptureId
-
-            if (captureId) {
-              setActiveCaptureId(captureId)
-            }
-          }}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default ActivityPlot
diff --git a/ui/src/pages/session-details/playback/activity-plot/lazy-activity-plot.module.scss b/ui/src/pages/session-details/playback/activity-plot/lazy-activity-plot.module.scss
deleted file mode 100644
index fbd54d943..000000000
--- a/ui/src/pages/session-details/playback/activity-plot/lazy-activity-plot.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.loadingWrapper {
-  height: 100px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
diff --git a/ui/src/pages/session-details/playback/activity-plot/lazy-activity-plot.tsx b/ui/src/pages/session-details/playback/activity-plot/lazy-activity-plot.tsx
deleted file mode 100644
index 267a2b5a8..000000000
--- a/ui/src/pages/session-details/playback/activity-plot/lazy-activity-plot.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ErrorBoundary } from 'components/error-boundary/error-boundary'
-import { LoadingSpinner } from 'nova-ui-kit'
-import React, { Suspense } from 'react'
-import styles from './lazy-activity-plot.module.scss'
-import { ActivityPlotProps } from './types'
-
-const _ActivityPlot = React.lazy(() => import('./activity-plot'))
-
-export const ActivityPlot = (props: ActivityPlotProps) => (
-  <Suspense
-    fallback={
-      <div className={styles.loadingWrapper}>
-        <LoadingSpinner size={32} />
-      </div>
-    }
-  >
-    <ErrorBoundary>
-      <_ActivityPlot {...props} />
-    </ErrorBoundary>
-  </Suspense>
-)
diff --git a/ui/src/pages/session-details/playback/activity-plot/types.ts b/ui/src/pages/session-details/playback/activity-plot/types.ts
deleted file mode 100644
index f96e2663e..000000000
--- a/ui/src/pages/session-details/playback/activity-plot/types.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { SessionDetails } from 'data-services/models/session-details'
-import { TimelineTick } from 'data-services/models/timeline-tick'
-
-export interface ActivityPlotProps {
-  session: SessionDetails
-  snapToDetections?: boolean
-  timeline: TimelineTick[]
-  setActiveCaptureId: (captureId: string) => void
-}
diff --git a/ui/src/pages/session-details/playback/activity-plot/useDynamicPlotWidth.ts b/ui/src/pages/session-details/playback/activity-plot/useDynamicPlotWidth.ts
deleted file mode 100644
index 4fb19bdde..000000000
--- a/ui/src/pages/session-details/playback/activity-plot/useDynamicPlotWidth.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { RefObject, useEffect, useState } from 'react'
-
-export const useDynamicPlotWidth = (containerRef: RefObject<HTMLElement>) => {
-  const [width, setWidth] = useState<number>()
-
-  useEffect(() => {
-    const updateState = () => {
-      const container = containerRef.current
-
-      if (container) {
-        setWidth(container.clientWidth)
-      }
-    }
-
-    updateState()
-
-    window.addEventListener('resize', updateState)
-
-    return () => {
-      window.removeEventListener('resize', updateState)
-    }
-  }, [containerRef])
-
-  return width
-}
diff --git a/ui/src/pages/session-details/playback/capture-details/capture-details.module.scss b/ui/src/pages/session-details/playback/capture-details/capture-details.module.scss
deleted file mode 100644
index 0dedcb269..000000000
--- a/ui/src/pages/session-details/playback/capture-details/capture-details.module.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-.starButtonWrapper {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  display: flex;
-  gap: 8px;
-}
-
-.infoWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-  overflow: hidden;
-}
-
-.jobControls {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  margin-top: 4px;
-}
-
-.label {
-  display: block;
-  @include body-overline();
-  font-weight: 600;
-  color: var(--color-neutral-500);
-  margin-bottom: 4px;
-}
-
-.value {
-  display: block;
-  @include body-base();
-  color: var(--color-generic-white);
-
-  &.bubble {
-    height: auto;
-    padding: 6px 8px 4px;
-    border-radius: 4px;
-    border: 1px solid var(--color-neutral-600);
-    background-color: var(--color-neutral-600);
-    font-weight: 600;
-  }
-}
-
-@media only screen and (max-width: $breakpoint-md) {
-  .infoWrapper {
-    display: none;
-  }
-}
diff --git a/ui/src/pages/session-details/playback/capture-details/capture-details.tsx b/ui/src/pages/session-details/playback/capture-details/capture-details.tsx
deleted file mode 100644
index 9050a06db..000000000
--- a/ui/src/pages/session-details/playback/capture-details/capture-details.tsx
+++ /dev/null
@@ -1,278 +0,0 @@
-import classNames from 'classnames'
-import { useStarCapture } from 'data-services/hooks/captures/useStarCapture'
-import { usePipelines } from 'data-services/hooks/pipelines/usePipelines'
-import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
-import { CaptureDetails as Capture } from 'data-services/models/capture-details'
-import { Job } from 'data-services/models/job'
-import { ProcessingService } from 'data-services/models/processing-service'
-import { ExternalLinkIcon, Loader2Icon, StarIcon } from 'lucide-react'
-import { BasicTooltip, Button, buttonVariants, Select } from 'nova-ui-kit'
-import { useState } from 'react'
-import { Link, useParams } from 'react-router-dom'
-import { APP_ROUTES } from 'utils/constants'
-import { getAppRoute } from 'utils/getAppRoute'
-import { STRING, translate } from 'utils/language'
-import { useUser } from 'utils/user/userContext'
-import styles from './capture-details.module.scss'
-import { CaptureJobDialog } from './capture-job/capture-job-dialog'
-import { ProcessNow } from './capture-job/process-now'
-
-export const CaptureDetails = ({
-  capture,
-  captureId,
-  defaultFilters,
-}: {
-  capture?: Capture
-  captureId: string
-  defaultFilters: boolean
-}) => {
-  const { user } = useUser()
-  const { projectId } = useParams()
-
-  if (!capture) {
-    return null
-  }
-
-  return (
-    <>
-      <div className={styles.starButtonWrapper}>
-        {user.loggedIn && (
-          <StarButton
-            capture={capture}
-            captureId={captureId}
-            canStar={capture.canStar}
-          />
-        )}
-        <a
-          href={capture.url}
-          className={classNames(
-            buttonVariants({ size: 'icon' }),
-            'rounded-md !bg-neutral-700 text-neutral-200'
-          )}
-          rel="noreferrer"
-          target="_blank"
-        >
-          <ExternalLinkIcon className="w-4 h-4" />
-        </a>
-      </div>
-      <div className={styles.infoWrapper}>
-        <div className="flex items-start gap-8">
-          <div>
-            <span className={styles.label}>
-              {translate(STRING.FIELD_LABEL_TIMESTAMP)}
-            </span>
-            <span className={styles.value}>{capture.dateTimeLabel}</span>
-          </div>
-          <div>
-            <span className={styles.label}>
-              {translate(STRING.FIELD_LABEL_SIZE)}
-            </span>
-            <span className={styles.value}>{capture.sizeLabel}</span>
-          </div>
-        </div>
-        {user.loggedIn ? (
-          <div>
-            <span className={styles.label}>
-              {translate(STRING.FIELD_LABEL_PROCESS)}
-            </span>
-            <JobControls capture={capture} />
-          </div>
-        ) : null}
-        {user.loggedIn && capture.currentJob ? (
-          <div>
-            <span className={styles.label}>
-              {translate(STRING.FIELD_LABEL_LATEST_JOB_STATUS)}
-            </span>
-            <JobDetails job={capture.currentJob} />
-          </div>
-        ) : null}
-        <div className="flex items-start gap-8">
-          <div>
-            <span className={styles.label}>
-              {translate(STRING.FIELD_LABEL_JOBS)}
-            </span>
-            <Link
-              to={getAppRoute({
-                to: APP_ROUTES.JOBS({
-                  projectId: projectId as string,
-                }),
-                filters: {
-                  source_image_single: capture.id,
-                },
-              })}
-            >
-              <span className={classNames(styles.value, styles.bubble)}>
-                {capture.numJobs}
-              </span>
-            </Link>
-          </div>
-          <div>
-            <span className={styles.label}>
-              {translate(STRING.FIELD_LABEL_OCCURRENCES)}
-            </span>
-            <Link
-              to={getAppRoute({
-                to: APP_ROUTES.OCCURRENCES({
-                  projectId: projectId as string,
-                }),
-                filters: defaultFilters
-                  ? {
-                      detections__source_image: capture.id,
-                    }
-                  : {
-                      detections__source_image: capture.id,
-                      apply_defaults: 'false',
-                    },
-              })}
-            >
-              <span className={classNames(styles.value, styles.bubble)}>
-                {defaultFilters
-                  ? capture.numOccurrences
-                  : capture.numDetections}
-              </span>
-            </Link>
-          </div>
-          <div>
-            <span className={styles.label}>
-              {translate(STRING.FIELD_LABEL_TAXA)}
-            </span>
-            <span
-              className={classNames(styles.value, styles.bubble)}
-              style={{ backgroundColor: 'transparent', border: 'none' }}
-            >
-              {capture.numTaxa}
-            </span>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}
-
-const StarButton = ({
-  capture,
-  captureFetching,
-  captureId,
-  canStar,
-}: {
-  capture?: Capture
-  captureFetching?: boolean
-  captureId: string
-  canStar: boolean
-}) => {
-  const isStarred = capture?.isStarred ?? false
-  const { starCapture, isLoading } = useStarCapture(captureId, isStarred)
-  const tooltipContent = canStar
-    ? isStarred
-      ? translate(STRING.STARRED)
-      : translate(STRING.STAR)
-    : translate(STRING.MESSAGE_PERMISSIONS_MISSING)
-
-  return (
-    <BasicTooltip asChild content={tooltipContent}>
-      <Button
-        aria-label={
-          isStarred ? translate(STRING.STARRED) : translate(STRING.STAR)
-        }
-        className="rounded-md !bg-neutral-700 text-neutral-200"
-        disabled={!canStar}
-        size="icon"
-        onClick={() => starCapture()}
-      >
-        {isLoading || captureFetching ? (
-          <Loader2Icon className="w-4 h-4 animate-spin" />
-        ) : (
-          <StarIcon
-            className="w-4 h-4 transition-colors"
-            fill={isStarred ? 'currentColor' : 'transparent'}
-          />
-        )}
-      </Button>
-    </BasicTooltip>
-  )
-}
-
-const JobControls = ({ capture }: { capture?: Capture }) => {
-  const { projectId } = useParams()
-  const { project } = useProjectDetails(projectId as string, true)
-  const [selectedPipelineId, setSelectedPipelineId] = useState(
-    project?.settings.defaultProcessingPipeline?.id
-  )
-
-  return (
-    <div className={styles.jobControls}>
-      <PipelinesPicker
-        value={selectedPipelineId}
-        onValueChange={setSelectedPipelineId}
-      />
-      <ProcessNow capture={capture} pipelineId={selectedPipelineId} />
-    </div>
-  )
-}
-
-const JobDetails = ({ job }: { job: Job }) => (
-  <div className="flex items-center justify-between gap-4">
-    <div className="flex items-center gap-2">
-      <div
-        className="w-2 h-2 rounded-full"
-        style={{ backgroundColor: job.status.color }}
-      />
-      <span className={classNames(styles.value, 'pt-0.5')}>
-        {job.status.label}
-      </span>
-    </div>
-    <CaptureJobDialog id={job.id} />
-  </div>
-)
-
-const PipelinesPicker = ({
-  value,
-  onValueChange,
-}: {
-  value?: string
-  onValueChange: (value?: string) => void
-}) => {
-  const { projectId } = useParams()
-  const { pipelines = [], isLoading } = usePipelines({
-    projectId: projectId as string,
-  })
-
-  return (
-    <Select.Root
-      disabled={pipelines.length === 0}
-      onValueChange={onValueChange}
-      value={value ?? ''}
-    >
-      <Select.Trigger
-        className="w-auto max-w-full h-8 grow !bg-neutral-700 border-none text-neutral-200 body-small focus:ring-0 focus:ring-offset-0"
-        loading={isLoading}
-      >
-        <Select.Value className="truncate" placeholder="Select a pipeline" />
-      </Select.Trigger>
-      <Select.Content>
-        {pipelines.map((p) => (
-          <Select.Item
-            className="h-8 body-small"
-            key={p.name}
-            value={String(p.id)}
-            disabled={!p.currentProcessingService.online}
-          >
-            <div className="flex items-center gap-4">
-              <div
-                className="w-2 h-2 rounded-full mb-0.5 shrink-0"
-                style={{
-                  backgroundColor: p.currentProcessingService.service
-                    ? p.currentProcessingService.service?.status.color
-                    : ProcessingService.getStatusInfo('OFFLINE').color,
-                }}
-              />
-              <span className="whitespace-nowrap text-ellipsis overflow-hidden">
-                {p.name}
-              </span>
-            </div>
-          </Select.Item>
-        ))}
-      </Select.Content>
-    </Select.Root>
-  )
-}
diff --git a/ui/src/pages/session-details/playback/capture-details/capture-job/capture-job-dialog.tsx b/ui/src/pages/session-details/playback/capture-details/capture-job/capture-job-dialog.tsx
deleted file mode 100644
index f7e962a2a..000000000
--- a/ui/src/pages/session-details/playback/capture-details/capture-job/capture-job-dialog.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useJobDetails } from 'data-services/hooks/jobs/useJobDetails'
-import _ from 'lodash'
-import { EyeIcon } from 'lucide-react'
-import { BasicTooltip, Button, Dialog } from 'nova-ui-kit'
-import { JobDetails } from 'pages/job-details/job-details'
-import { useState } from 'react'
-import { STRING, translate } from 'utils/language'
-
-export const CaptureJobDialog = ({ id }: { id: string }) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const { job, isLoading, isFetching, error } = useJobDetails(id, isOpen)
-  const title = translate(STRING.ENTITY_DETAILS, {
-    type: _.capitalize(translate(STRING.ENTITY_TYPE_JOB)),
-  })
-
-  return (
-    <Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
-      <BasicTooltip asChild content={title}>
-        <Dialog.Trigger asChild>
-          <Button
-            aria-label={title}
-            size="icon"
-            className="rounded-md !bg-neutral-700 text-neutral-200"
-          >
-            <EyeIcon className="w-4 h-4" />
-          </Button>
-        </Dialog.Trigger>
-      </BasicTooltip>
-      <Dialog.Content
-        ariaCloselabel={translate(STRING.CLOSE)}
-        isLoading={isLoading}
-        error={error}
-      >
-        {job ? (
-          <JobDetails job={job} title={title} isFetching={isFetching} />
-        ) : null}
-      </Dialog.Content>
-    </Dialog.Root>
-  )
-}
diff --git a/ui/src/pages/session-details/playback/capture-details/capture-job/capture-job.tsx b/ui/src/pages/session-details/playback/capture-details/capture-job/capture-job.tsx
deleted file mode 100644
index 7f7ebf451..000000000
--- a/ui/src/pages/session-details/playback/capture-details/capture-job/capture-job.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { CaptureDetails } from 'data-services/models/capture-details'
-import { CaptureJobDialog } from './capture-job-dialog'
-import { ProcessNow } from './process-now'
-
-export const CaptureJob = ({
-  capture,
-  pipelineId,
-}: {
-  capture?: CaptureDetails
-  pipelineId?: string
-}) => (
-  <>
-    <div style={capture?.jobs.length ? undefined : { gridColumn: 'span 2' }}>
-      <ProcessNow capture={capture} pipelineId={pipelineId} />
-    </div>
-    {capture?.jobs.length ? <CaptureJobDialog id={capture.jobs[0].id} /> : null}
-  </>
-)
diff --git a/ui/src/pages/session-details/playback/capture-details/capture-job/process-now.tsx b/ui/src/pages/session-details/playback/capture-details/capture-job/process-now.tsx
deleted file mode 100644
index b8416e89e..000000000
--- a/ui/src/pages/session-details/playback/capture-details/capture-job/process-now.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useCreateJob } from 'data-services/hooks/jobs/useCreateJob'
-import { CaptureDetails } from 'data-services/models/capture-details'
-import { CheckIcon, Loader2Icon } from 'lucide-react'
-import { BasicTooltip, Button } from 'nova-ui-kit'
-import { useParams } from 'react-router-dom'
-import { STRING, translate } from 'utils/language'
-import { UserPermission } from 'utils/user/types'
-
-export const ProcessNow = ({
-  capture,
-  pipelineId,
-}: {
-  capture?: CaptureDetails
-  pipelineId?: string
-}) => {
-  const { projectId } = useParams()
-  const { createJob, isLoading, isSuccess } = useCreateJob()
-  const canProcess = capture?.userPermissions.includes(
-    UserPermission.RunSingleImage
-  )
-  const disabled =
-    !capture || capture.hasJobInProgress || !pipelineId || !canProcess
-
-  // @TODO: hasJobInProgress, replace with if pipeline is healthy/available
-
-  const tooltipContent = canProcess
-    ? translate(STRING.MESSAGE_PROCESS_NOW_TOOLTIP)
-    : translate(STRING.MESSAGE_PERMISSIONS_MISSING)
-
-  return (
-    <BasicTooltip asChild content={tooltipContent}>
-      <Button
-        className="rounded-md !bg-neutral-700 text-neutral-200"
-        disabled={disabled}
-        onClick={() => {
-          if (!capture) {
-            return
-          }
-
-          createJob({
-            delay: 0,
-            name: `Capture #${capture.id}`,
-            sourceImage: capture.id,
-            pipeline: pipelineId,
-            projectId: projectId as string,
-            startNow: true,
-          })
-        }}
-        size="small"
-      >
-        <span>{translate(STRING.PROCESS_NOW)}</span>
-        {isSuccess ? (
-          <CheckIcon className="w-4 h-4 ml-2" />
-        ) : isLoading ? (
-          <Loader2Icon className="w-4 h-4 ml-2 animate-spin" />
-        ) : null}
-      </Button>
-    </BasicTooltip>
-  )
-}
diff --git a/ui/src/pages/session-details/playback/capture-navigation/capture-navigation.module.scss b/ui/src/pages/session-details/playback/capture-navigation/capture-navigation.module.scss
deleted file mode 100644
index e63422273..000000000
--- a/ui/src/pages/session-details/playback/capture-navigation/capture-navigation.module.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: flex-start;
-  height: 48px;
-  gap: 32px;
-  padding: 0 8px;
-  border: 1px solid var(--color-neutral-600);
-  border-radius: 24px;
-  box-sizing: border-box;
-
-  span {
-    @include body-overline-small();
-    font-weight: 600;
-    color: var(--color-generic-white);
-  }
-}
diff --git a/ui/src/pages/session-details/playback/capture-navigation/capture-navigation.tsx b/ui/src/pages/session-details/playback/capture-navigation/capture-navigation.tsx
deleted file mode 100644
index 7827ad613..000000000
--- a/ui/src/pages/session-details/playback/capture-navigation/capture-navigation.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { CaptureDetails } from 'data-services/models/capture-details'
-import { TimelineTick } from 'data-services/models/timeline-tick'
-import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
-import { Button } from 'nova-ui-kit'
-import { useEffect, useState } from 'react'
-import { STRING, translate } from 'utils/language'
-import { findClosestCaptureId } from '../utils'
-import styles from './capture-navigation.module.scss'
-
-export const CaptureNavigation = ({
-  activeCapture,
-  snapToDetections,
-  timeline,
-  setActiveCaptureId,
-}: {
-  activeCapture?: CaptureDetails
-  snapToDetections?: boolean
-  timeline: TimelineTick[]
-  setActiveCaptureId: (captureId: string) => void
-}) => {
-  const [currentIndex, setCurrentIndex] = useState(activeCapture?.currentIndex)
-  const [totalCaptures, setTotalCaptures] = useState(
-    activeCapture?.totalCaptures
-  )
-
-  useEffect(() => {
-    if (activeCapture) {
-      setCurrentIndex(activeCapture.currentIndex)
-      setTotalCaptures(activeCapture.totalCaptures)
-    }
-  }, [activeCapture])
-
-  const goToPrev = () => {
-    if (!activeCapture) {
-      return
-    }
-
-    const prevCaptureId = snapToDetections
-      ? findClosestCaptureId({
-          maxDate: activeCapture.date,
-          snapToDetections: true,
-          targetDate: activeCapture.date,
-          timeline,
-        })
-      : activeCapture.prevCaptureId
-
-    if (prevCaptureId) {
-      setActiveCaptureId(prevCaptureId)
-    }
-  }
-
-  const goToNext = () => {
-    if (!activeCapture) {
-      return
-    }
-
-    const nextCaptureId = snapToDetections
-      ? findClosestCaptureId({
-          minDate: activeCapture.date,
-          snapToDetections: true,
-          targetDate: activeCapture.date,
-          timeline,
-        })
-      : activeCapture.nextCaptureId
-
-    if (nextCaptureId) {
-      setActiveCaptureId(nextCaptureId)
-    }
-  }
-
-  // Listen to key down events
-  useEffect(() => {
-    const onKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'ArrowLeft') {
-        e.preventDefault()
-        goToPrev()
-      } else if (e.key === 'ArrowRight') {
-        e.preventDefault()
-        goToNext()
-      }
-    }
-
-    document.addEventListener('keydown', onKeyDown)
-
-    return () => document.removeEventListener('keydown', onKeyDown)
-  }, [goToPrev, goToNext])
-
-  return (
-    <div className={styles.wrapper}>
-      <Button
-        aria-label={translate(STRING.PREVIOUS)}
-        className="!bg-neutral-700 text-neutral-200"
-        disabled={!activeCapture?.prevCaptureId}
-        onClick={goToPrev}
-        size="icon"
-      >
-        <ChevronLeftIcon className="w-4 h-4" />
-      </Button>
-      {totalCaptures && (
-        <span>
-          {currentIndex?.toLocaleString()} / {totalCaptures.toLocaleString()}
-        </span>
-      )}
-      <Button
-        aria-label={translate(STRING.NEXT)}
-        className="!bg-neutral-700 text-neutral-200"
-        disabled={!activeCapture?.nextCaptureId}
-        onClick={goToNext}
-        size="icon"
-      >
-        <ChevronRightIcon className="w-4 h-4" />
-      </Button>
-    </div>
-  )
-}
diff --git a/ui/src/pages/session-details/playback/frame/frame.module.scss b/ui/src/pages/session-details/playback/frame/frame.module.scss
deleted file mode 100644
index 04ddb8334..000000000
--- a/ui/src/pages/session-details/playback/frame/frame.module.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-.wrapper {
-  position: relative;
-  width: 100%;
-  height: 0;
-}
-
-.image,
-.overlay,
-.details,
-.detections,
-.loadingWrapper {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  vertical-align: middle;
-}
-
-.details {
-  .overlay {
-    opacity: 0;
-    transition: opacity 250ms ease-in-out;
-  }
-
-  &.showOverlay {
-    .overlay {
-      opacity: 1;
-    }
-  }
-}
-
-.detection {
-  position: absolute;
-  box-sizing: border-box;
-  outline: 2px solid var(--color-success);
-  border-radius: 2px;
-
-  &.warning {
-    outline-color: var(--color-warning);
-  }
-
-  &.alert {
-    outline-color: var(--color-destructive);
-  }
-
-  &.filtered {
-    outline: 2px solid var(--color-neutral-500);
-  }
-
-  &.active {
-    outline: 2px solid var(--color-secondary-400);
-  }
-
-  &.clickable {
-    &:hover {
-      cursor: pointer;
-    }
-  }
-}
-
-.loadingWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@media only screen and (max-width: $breakpoint-md) {
-  .wrapper {
-    grid-column: span 2;
-  }
-}
diff --git a/ui/src/pages/session-details/playback/frame/frame.tsx b/ui/src/pages/session-details/playback/frame/frame.tsx
deleted file mode 100644
index e5e9ab5b6..000000000
--- a/ui/src/pages/session-details/playback/frame/frame.tsx
+++ /dev/null
@@ -1,312 +0,0 @@
-import classNames from 'classnames'
-import { DeterminationScore } from 'components/determination-score'
-import { useOccurrenceDetails } from 'data-services/hooks/occurrences/useOccurrenceDetails'
-import { CaptureDetection } from 'data-services/models/capture'
-import { Dialog, LoadingSpinner, Tooltip } from 'nova-ui-kit'
-import {
-  OccurrenceDetails,
-  TABS,
-} from 'pages/occurrence-details/occurrence-details'
-import { useLayoutEffect, useMemo, useRef, useState } from 'react'
-import { SCORE_THRESHOLDS } from 'utils/constants'
-import { STRING, translate } from 'utils/language'
-import { useActiveOccurrences } from '../useActiveOccurrences'
-import styles from './frame.module.scss'
-import { BoxStyle } from './types'
-
-const FALLBACK_RATIO = 16 / 9
-
-interface FrameProps {
-  defaultFilters: boolean
-  detections: CaptureDetection[]
-  height: number | null
-  showDetections?: boolean
-  src?: string
-  width: number | null
-}
-
-export const Frame = ({
-  defaultFilters,
-  detections,
-  height,
-  showDetections,
-  src,
-  width,
-}: FrameProps) => {
-  const [naturalSize, setNaturalSize] = useState<{
-    width: number
-    height: number
-  }>()
-  const imageRef = useRef<HTMLImageElement>(null)
-  const [isLoading, setIsLoading] = useState<boolean>()
-  const [renderOverlay, setRenderOverlay] = useState<boolean>()
-
-  useLayoutEffect(() => {
-    if (!imageRef.current) {
-      return
-    }
-
-    setIsLoading(true)
-    setNaturalSize(undefined)
-
-    if (src) {
-      imageRef.current.src = src
-      imageRef.current.onload = () => {
-        if (imageRef.current?.width && imageRef.current.height) {
-          setNaturalSize({
-            width: imageRef.current.naturalWidth,
-            height: imageRef.current.naturalHeight,
-          })
-        }
-        setIsLoading(false)
-      }
-
-      imageRef.current.onerror = () => {
-        setNaturalSize(undefined)
-        setIsLoading(false)
-      }
-    }
-  }, [src])
-
-  useLayoutEffect(() => {
-    // Ugly hack to make overlay correct on first render
-    setRenderOverlay(true)
-  }, [])
-
-  const boxStyles = useMemo(
-    () =>
-      detections.reduce((result: { [key: string]: BoxStyle }, detection) => {
-        const [boxLeft, boxTop, boxRight, boxBottom] = detection.bbox
-        const boxWidth = boxRight - boxLeft
-        const boxHeight = boxBottom - boxTop
-
-        const _width = naturalSize?.width ?? width
-        const _height = naturalSize?.height ?? height
-
-        if (!_width || !_height) {
-          return result
-        }
-
-        result[detection.id] = {
-          width: `${(boxWidth / _width) * 100}%`,
-          height: `${(boxHeight / _height) * 100}%`,
-          top: `${(boxTop / _height) * 100}%`,
-          left: `${(boxLeft / _width) * 100}%`,
-        }
-
-        return result
-      }, {}),
-    [width, height, naturalSize, detections]
-  )
-
-  const ratio = useMemo(() => {
-    if (naturalSize) {
-      return naturalSize.width / naturalSize.height
-    }
-
-    if (width && height) {
-      return width / height
-    }
-
-    return FALLBACK_RATIO
-  }, [width, height, naturalSize])
-
-  return (
-    <div
-      className={classNames(styles.wrapper)}
-      style={{
-        paddingBottom: `${(1 / ratio) * 100}%`,
-      }}
-    >
-      <img ref={imageRef} className={styles.image} />
-      <div
-        className={classNames(styles.details, {
-          [styles.showOverlay]: showDetections,
-        })}
-      >
-        {renderOverlay && <FrameOverlay boxStyles={boxStyles} />}
-        <FrameDetections
-          boxStyles={boxStyles}
-          defaultFilters={defaultFilters}
-          detections={detections}
-          showDetections={showDetections}
-        />
-      </div>
-      {isLoading && (
-        <div className={styles.loadingWrapper}>
-          <LoadingSpinner />
-        </div>
-      )}
-    </div>
-  )
-}
-
-const FrameOverlay = ({
-  boxStyles,
-}: {
-  boxStyles: { [key: number]: BoxStyle }
-}) => (
-  <svg className={styles.overlay}>
-    <defs>
-      <mask id="holes">
-        <rect width="100%" height="100%" fill="white" />
-        {Object.entries(boxStyles).map(([id, style]) => (
-          <rect
-            key={id}
-            x={style.left}
-            y={style.top}
-            width={style.width}
-            height={style.height}
-            fill="black"
-          />
-        ))}
-      </mask>
-    </defs>
-    <rect
-      fill="black"
-      fillOpacity={0.2}
-      width="100%"
-      height="100%"
-      mask="url(#holes)"
-    />
-  </svg>
-)
-
-const FrameDetections = ({
-  boxStyles,
-  defaultFilters,
-  detections,
-  showDetections,
-}: {
-  boxStyles: { [key: number]: BoxStyle }
-  defaultFilters: boolean
-  detections: CaptureDetection[]
-  showDetections?: boolean
-}) => {
-  const containerRef = useRef(null)
-  const [activeOccurrence, setActiveOccurrence] = useState<string>()
-  const { activeOccurrences, setActiveOccurrences } = useActiveOccurrences()
-
-  const toggleActiveState = (occurrenceId: string) => {
-    const isActive = activeOccurrences.includes(occurrenceId)
-
-    if (isActive) {
-      setActiveOccurrences(
-        activeOccurrences.filter((occurrence) => occurrence !== occurrenceId)
-      )
-    } else {
-      setActiveOccurrences([...activeOccurrences, occurrenceId])
-    }
-  }
-
-  return (
-    <>
-      <div className={styles.detections} ref={containerRef}>
-        {Object.entries(boxStyles).map(([id, style]) => {
-          const detection = detections.find((d) => d.id === id)
-
-          const isActive = detection?.occurrenceId
-            ? activeOccurrences.includes(detection.occurrenceId)
-            : false
-
-          if (!detection || (!showDetections && !isActive)) {
-            return null
-          }
-
-          return (
-            <Tooltip.Provider key={detection.id} delayDuration={0}>
-              <Tooltip.Root open={isActive ? isActive : undefined}>
-                <Tooltip.Trigger asChild>
-                  <div
-                    style={style}
-                    className={classNames(styles.detection, {
-                      [styles.active]: isActive,
-                      [styles.filtered]: defaultFilters
-                        ? !detection.occurrenceMeetsCriteria
-                        : false,
-                      [styles.alert]: detection.score < SCORE_THRESHOLDS.ALERT,
-                      [styles.warning]:
-                        detection.score < SCORE_THRESHOLDS.WARNING,
-                      [styles.clickable]: !!detection.occurrenceId,
-                    })}
-                    onClick={() => {
-                      if (detection.occurrenceId) {
-                        toggleActiveState(detection?.occurrenceId)
-                      }
-                    }}
-                  />
-                </Tooltip.Trigger>
-                <Tooltip.Content
-                  className="p-3 z-[1]"
-                  collisionBoundary={containerRef?.current}
-                  side="bottom"
-                >
-                  <div className="flex flex-col items-start gap-1">
-                    <button
-                      className="body-base text-primary font-medium"
-                      disabled={!detection.occurrenceId}
-                      onClick={() =>
-                        setActiveOccurrence(detection.occurrenceId)
-                      }
-                    >
-                      <span>{detection.label}</span>
-                    </button>
-                    <DeterminationScore
-                      score={detection.score}
-                      scoreLabel={detection.scoreLabel}
-                      verified={detection.score === 1}
-                    />
-                  </div>
-                </Tooltip.Content>
-              </Tooltip.Root>
-            </Tooltip.Provider>
-          )
-        })}
-        {activeOccurrence ? (
-          <OccurrenceDetailsDialog
-            id={activeOccurrence}
-            onClose={() => setActiveOccurrence(undefined)}
-          />
-        ) : null}
-      </div>
-    </>
-  )
-}
-
-export const OccurrenceDetailsDialog = ({
-  id,
-  onClose,
-}: {
-  id: string
-  onClose: () => void
-}) => {
-  const [selectedView, setSelectedView] = useState<string | undefined>(
-    TABS.FIELDS
-  )
-  const { occurrence, isLoading, error } = useOccurrenceDetails(id)
-
-  return (
-    <Dialog.Root
-      open={!!id}
-      onOpenChange={(open) => {
-        if (!open) {
-          onClose()
-        }
-      }}
-    >
-      <Dialog.Content
-        ariaCloselabel={translate(STRING.CLOSE)}
-        isLoading={isLoading}
-        error={error}
-      >
-        {occurrence ? (
-          <OccurrenceDetails
-            occurrence={occurrence}
-            selectedTab={selectedView}
-            setSelectedTab={setSelectedView}
-          />
-        ) : null}
-      </Dialog.Content>
-    </Dialog.Root>
-  )
-}
diff --git a/ui/src/pages/session-details/playback/frame/types.ts b/ui/src/pages/session-details/playback/frame/types.ts
deleted file mode 100644
index 464eb6e47..000000000
--- a/ui/src/pages/session-details/playback/frame/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface BoxStyle {
-  width: string
-  height: string
-  top: string
-  left: string
-}
diff --git a/ui/src/pages/session-details/playback/playback.module.scss b/ui/src/pages/session-details/playback/playback.module.scss
deleted file mode 100644
index 41528d1dc..000000000
--- a/ui/src/pages/session-details/playback/playback.module.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-.wrapper {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.sidebar {
-  background-color: var(--color-neutral-800);
-  border-bottom: 1px solid var(--color-neutral-600);
-  position: relative;
-}
-
-.sidebarContent {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 64px;
-  box-sizing: border-box;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.sidebarSection {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 16px;
-
-  .title {
-    display: block;
-    @include body-large();
-    font-weight: 600;
-    color: var(--color-generic-white);
-  }
-
-  .label {
-    display: block;
-    @include body-overline();
-    font-weight: 600;
-    color: var(--color-neutral-500);
-  }
-}
-
-.captureNavigationWrapper {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 16px;
-}
-
-.licenseInfoWrapper {
-  flex: 1;
-  text-align: right;
-
-  p {
-    color: var(--color-neutral-500);
-  }
-
-  p a {
-    color: var(--color-generic-white);
-  }
-}
-
-.bottomBar {
-  grid-column: span 2;
-  background-color: var(--color-neutral-800);
-  padding: 32px;
-}
-
-@media only screen and (max-width: $breakpoint-md) {
-  .sidebar {
-    grid-column: span 2;
-  }
-
-  .sidebarContent {
-    position: static;
-  }
-
-  .sidebarSection:last-child {
-    display: none;
-  }
-
-  .bottomBar {
-    display: flex;
-    flex-direction: column;
-    padding: 16px;
-  }
-
-  .captureNavigationWrapper {
-    margin-bottom: 32px;
-    gap: 32px;
-    flex-direction: column-reverse;
-    justify-content: flex-start;
-  }
-
-  .licenseInfoWrapper {
-    text-align: left;
-  }
-}
diff --git a/ui/src/pages/session-details/playback/playback.tsx b/ui/src/pages/session-details/playback/playback.tsx
deleted file mode 100644
index 8c75cba22..000000000
--- a/ui/src/pages/session-details/playback/playback.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import { DefaultFiltersTooltip } from 'components/filtering/default-filter-control'
-import { LicenseInfo } from 'components/license-info/license-info'
-import { useCaptureDetails } from 'data-services/hooks/captures/useCaptureDetails'
-import { useProjectDetails } from 'data-services/hooks/projects/useProjectDetails'
-import { useSessionTimeline } from 'data-services/hooks/sessions/useSessionTimeline'
-import { SessionDetails } from 'data-services/models/session-details'
-import { Checkbox } from 'nova-ui-kit'
-import { useEffect, useState } from 'react'
-import { ActivityPlot } from './activity-plot/lazy-activity-plot'
-import { CaptureDetails } from './capture-details/capture-details'
-import { CaptureNavigation } from './capture-navigation/capture-navigation'
-import { Frame } from './frame/frame'
-import styles from './playback.module.scss'
-import { SessionCapturesSlider } from './session-captures-slider/session-captures-slider'
-import { useActiveCaptureId } from './useActiveCapture'
-
-export const Playback = ({
-  session,
-  projectId,
-}: {
-  session: SessionDetails
-  projectId?: string
-}) => {
-  const { project } = useProjectDetails(projectId as string, true)
-  const { timeline = [] } = useSessionTimeline(session.id)
-  const [poll, setPoll] = useState(false)
-  const [showDetections, setShowDetections] = useState(true)
-  const [defaultFilters, setDefaultFilters] = useState(true)
-  const [snapToDetections, setSnapToDetections] = useState(
-    session.numDetections ? true : false
-  )
-  const { activeCaptureId, setActiveCaptureId } = useActiveCaptureId(
-    session.firstCapture?.id
-  )
-  const { capture: activeCapture } = useCaptureDetails({
-    id: activeCaptureId as string,
-    poll,
-    projectId: projectId as string,
-  })
-
-  useEffect(() => {
-    // If the active capture has a job in progress, we want to poll the endpoint so we can show job updates
-    if (activeCapture?.hasJobInProgress) {
-      setPoll(true)
-    } else {
-      setPoll(false)
-    }
-  }, [activeCapture])
-
-  const detections = activeCapture?.detections ?? []
-
-  if (!session.firstCapture) {
-    return null
-  }
-
-  return (
-    <div className={styles.wrapper}>
-      <div className={styles.sidebar}>
-        <div className={styles.sidebarContent}>
-          {activeCaptureId && (
-            <div className={styles.sidebarSection}>
-              <span className={styles.title}>Capture #{activeCaptureId}</span>
-              <CaptureDetails
-                capture={activeCapture}
-                captureId={activeCaptureId}
-                defaultFilters={defaultFilters}
-              />
-            </div>
-          )}
-          <div className={styles.sidebarSection}>
-            <span className={styles.title}>View settings</span>
-            <Checkbox
-              id="show-detections"
-              label="Show detections"
-              checked={showDetections}
-              onCheckedChange={setShowDetections}
-            />
-            <div className="flex items-center gap-1">
-              <Checkbox
-                id="default-filters"
-                label="Default filters"
-                checked={defaultFilters}
-                onCheckedChange={setDefaultFilters}
-              />
-              {project ? <DefaultFiltersTooltip project={project} /> : null}
-            </div>
-            <Checkbox
-              id="snap-to-detections"
-              label="Snap to images with detections"
-              checked={snapToDetections}
-              onCheckedChange={setSnapToDetections}
-              disabled={session.numDetections ? false : true}
-            />
-          </div>
-        </div>
-      </div>
-      <Frame
-        defaultFilters={defaultFilters}
-        detections={detections}
-        height={activeCapture?.height ?? session.firstCapture.height}
-        showDetections={showDetections}
-        src={activeCapture?.src}
-        width={activeCapture?.width ?? session.firstCapture.width}
-      />
-      <div className={styles.bottomBar}>
-        <div className={styles.captureNavigationWrapper}>
-          <CaptureNavigation
-            activeCapture={activeCapture}
-            snapToDetections={snapToDetections}
-            timeline={timeline}
-            setActiveCaptureId={setActiveCaptureId}
-          />
-          <div className={styles.licenseInfoWrapper}>
-            <LicenseInfo />
-          </div>
-        </div>
-        <div>
-          <ActivityPlot
-            session={session}
-            snapToDetections={snapToDetections}
-            timeline={timeline}
-            setActiveCaptureId={setActiveCaptureId}
-          />
-          {timeline.length > 0 && (
-            <SessionCapturesSlider
-              session={session}
-              snapToDetections={snapToDetections}
-              timeline={timeline}
-              activeCapture={activeCapture}
-              setActiveCaptureId={setActiveCaptureId}
-            />
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/ui/src/pages/session-details/playback/session-captures-slider/session-captures-slider.tsx b/ui/src/pages/session-details/playback/session-captures-slider/session-captures-slider.tsx
deleted file mode 100644
index 334d83b34..000000000
--- a/ui/src/pages/session-details/playback/session-captures-slider/session-captures-slider.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Capture } from 'data-services/models/capture'
-import { SessionDetails } from 'data-services/models/session-details'
-import { TimelineTick } from 'data-services/models/timeline-tick'
-import { TimestampSlider } from 'nova-ui-kit/components/slider/timestamp-slider'
-import { useEffect, useState } from 'react'
-import { getFormatedTimeString } from 'utils/date/getFormatedTimeString/getFormatedTimeString'
-import { dateToValue, findClosestCaptureId, valueToDate } from '../utils'
-
-export const SessionCapturesSlider = ({
-  snapToDetections,
-  session,
-  timeline,
-  activeCapture,
-  setActiveCaptureId,
-}: {
-  snapToDetections?: boolean
-  session: SessionDetails
-  timeline: TimelineTick[]
-  activeCapture?: Capture
-  setActiveCaptureId: (captireId: string) => void
-}) => {
-  const [value, setValue] = useState(0)
-  const startDate = session.startDate
-  const endDate = session.endDate
-  const showLabels = session.startDate.getTime() !== session.endDate.getTime()
-
-  useEffect(() => {
-    if (activeCapture) {
-      setValue(dateToValue({ date: activeCapture.date, startDate, endDate }))
-    }
-  }, [activeCapture])
-
-  return (
-    <div>
-      <TimestampSlider
-        labels={
-          showLabels
-            ? [
-                getFormatedTimeString({ date: startDate }),
-                getFormatedTimeString({ date: endDate }),
-              ]
-            : []
-        }
-        value={value}
-        valueLabel={getFormatedTimeString({
-          date: valueToDate({ value, startDate, endDate }),
-          options: { second: true },
-        })}
-        onValueChange={(value) => {
-          setValue(value)
-        }}
-        onValueCommit={(value) => {
-          // Update active capture based on date
-          const targetDate = valueToDate({ value, startDate, endDate })
-          const captureId = findClosestCaptureId({
-            snapToDetections,
-            targetDate,
-            timeline,
-          })
-
-          if (captureId && activeCapture?.id !== captureId) {
-            setActiveCaptureId(captureId)
-          } else if (activeCapture) {
-            setValue(
-              dateToValue({ date: activeCapture.date, startDate, endDate })
-            )
-          }
-        }}
-      />
-    </div>
-  )
-}
diff --git a/ui/src/pages/session-details/playback/useActiveCapture.ts b/ui/src/pages/session-details/playback/useActiveCapture.ts
deleted file mode 100644
index 6fb8d4862..000000000
--- a/ui/src/pages/session-details/playback/useActiveCapture.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useSearchParams } from 'react-router-dom'
-
-const SEARCH_PARAM_KEY = 'capture'
-
-export const useActiveCaptureId = (defaultValue?: string) => {
-  const [searchParams, setSearchParams] = useSearchParams()
-
-  const activeCaptureId = searchParams.get(SEARCH_PARAM_KEY) ?? defaultValue
-
-  const setActiveCaptureId = (captureId: string) => {
-    searchParams.delete(SEARCH_PARAM_KEY)
-    searchParams.set(SEARCH_PARAM_KEY, captureId)
-    setSearchParams(searchParams, { replace: true })
-  }
-
-  return { activeCaptureId, setActiveCaptureId }
-}
diff --git a/ui/src/pages/session-details/playback/useActiveOccurrences.ts b/ui/src/pages/session-details/playback/useActiveOccurrences.ts
deleted file mode 100644
index 79115b79f..000000000
--- a/ui/src/pages/session-details/playback/useActiveOccurrences.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useCallback } from 'react'
-import { useSearchParams } from 'react-router-dom'
-
-const SEARCH_PARAM_KEY = 'occurrence'
-
-export const useActiveOccurrences = () => {
-  const [searchParams, setSearchParams] = useSearchParams()
-
-  const activeOccurrences = searchParams.getAll(SEARCH_PARAM_KEY)
-
-  const setActiveOccurrences = useCallback(
-    (occurrences: string[]) => {
-      searchParams.delete(SEARCH_PARAM_KEY)
-      occurrences.forEach((o) => searchParams.append(SEARCH_PARAM_KEY, o))
-      setSearchParams(searchParams, { replace: true })
-    },
-    [searchParams, setSearchParams]
-  )
-
-  return { activeOccurrences, setActiveOccurrences }
-}
diff --git a/ui/src/pages/session-details/playback/utils.tsx b/ui/src/pages/session-details/playback/utils.tsx
deleted file mode 100644
index 137c5fc5a..000000000
--- a/ui/src/pages/session-details/playback/utils.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { TimelineTick } from 'data-services/models/timeline-tick'
-
-export const findClosestCaptureId = ({
-  maxDate,
-  minDate,
-  snapToDetections,
-  targetDate,
-  timeline,
-}: {
-  maxDate?: Date
-  minDate?: Date
-  snapToDetections?: boolean
-  targetDate: Date
-  timeline: TimelineTick[]
-}) => {
-  let closestCaptureId: string | undefined
-  let smallestDifference = Infinity
-
-  timeline.forEach((timelineTick) => {
-    if (!timelineTick.representativeCaptureId) {
-      return
-    }
-
-    if (snapToDetections && !timelineTick.numDetections) {
-      return
-    }
-
-    if (minDate && timelineTick.startDate <= minDate) {
-      return
-    }
-
-    if (maxDate && timelineTick.endDate >= maxDate) {
-      return
-    }
-
-    const difference = Math.abs(
-      timelineTick.startDate.getTime() - targetDate.getTime()
-    )
-
-    if (difference < smallestDifference) {
-      smallestDifference = difference
-      closestCaptureId = timelineTick.representativeCaptureId
-    }
-  })
-
-  return closestCaptureId
-}
-
-export const dateToValue = ({
-  date,
-  startDate,
-  endDate,
-}: {
-  date: Date
-  startDate: Date
-  endDate: Date
-}) => {
-  if (endDate.getTime() === startDate.getTime()) {
-    return 50
-  }
-
-  return (
-    ((date.getTime() - startDate.getTime()) /
-      (endDate.getTime() - startDate.getTime())) *
-    100
-  )
-}
-
-export const valueToDate = ({
-  value,
-  startDate,
-  endDate,
-}: {
-  value: number
-  startDate: Date
-  endDate: Date
-}) =>
-  new Date(
-    startDate.getTime() +
-      ((endDate.getTime() - startDate.getTime()) * value) / 100
-  )
diff --git a/ui/src/pages/session-details/new/process/process-now.tsx b/ui/src/pages/session-details/process/process-now.tsx
similarity index 100%
rename from ui/src/pages/session-details/new/process/process-now.tsx
rename to ui/src/pages/session-details/process/process-now.tsx
diff --git a/ui/src/pages/session-details/new/process/process.tsx b/ui/src/pages/session-details/process/process.tsx
similarity index 100%
rename from ui/src/pages/session-details/new/process/process.tsx
rename to ui/src/pages/session-details/process/process.tsx
diff --git a/ui/src/pages/session-details/session-details.module.scss b/ui/src/pages/session-details/session-details.module.scss
deleted file mode 100644
index 0f54db522..000000000
--- a/ui/src/pages/session-details/session-details.module.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-.loadingWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 320px;
-}
-
-.main {
-  position: relative;
-}
-
-.fetchInfoWrapper {
-  position: absolute;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  top: 0;
-  right: 0;
-  transform: translateY(-100%);
-}
-
-.playbackWrapper {
-  display: flex;
-  align-items: stretch;
-  justify-content: space-between;
-  margin-bottom: 32px;
-
-  > * {
-    width: 100%;
-  }
-}
-
-.sessionInfo {
-  width: 100%;
-}
-
-.text {
-  @include body-base();
-  color: var(--color-foreground);
-}
-
-@media only screen and (max-width: $breakpoint-md) {
-  .playbackWrapper {
-    margin-bottom: 16px;
-  }
-}
diff --git a/ui/src/pages/session-details/session-details.tsx b/ui/src/pages/session-details/session-details.tsx
index 6f3396564..4dc8e5d26 100644
--- a/ui/src/pages/session-details/session-details.tsx
+++ b/ui/src/pages/session-details/session-details.tsx
@@ -1,20 +1,45 @@
 import { ErrorState } from 'components/error-state/error-state'
-import { PlotGrid } from 'components/plot-grid/plot-grid'
-import { Plot } from 'components/plot/lazy-plot'
+import { useCaptureDetails } from 'data-services/hooks/captures/useCaptureDetails'
 import { useSessionDetails } from 'data-services/hooks/sessions/useSessionDetails'
-import { Box, LoadingSpinner } from 'nova-ui-kit'
-import { useContext, useEffect } from 'react'
+import { useSessionTimeline } from 'data-services/hooks/sessions/useSessionTimeline'
+import { SessionDetails } from 'data-services/models/session-details'
+import { ExternalLinkIcon } from 'lucide-react'
+import {
+  BasicTooltip,
+  Box,
+  buttonVariants,
+  LoadingSpinner,
+  PageHeader,
+  Tabs,
+} from 'nova-ui-kit'
+import { cn } from 'nova-ui-kit/utils'
+import { useContext, useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useParams } from 'react-router-dom'
 import { BreadcrumbContext } from 'utils/breadcrumbContext'
-import { Playback } from './playback/playback'
-import { useActiveCaptureId } from './playback/useActiveCapture'
-import { useActiveOccurrences } from './playback/useActiveOccurrences'
-import styles from './session-details.module.scss'
-import { SessionInfo } from './session-info/session-info'
+import { STRING, translate } from 'utils/language'
+import { useUser } from 'utils/user/userContext'
+import { ActivityPlot } from './activity-plot/lazy-activity-plot'
+import { CaptureInfo } from './capture-info'
+import { CaptureNavigation } from './capture-navigation'
+import { Capture } from './capture/capture'
+import { useActiveCaptureId } from './hooks/useActiveCapture'
+import { useActiveOccurrences } from './hooks/useActiveOccurrences'
+import { Process } from './process/process'
+import { SessionInfo } from './session-info'
+import { SessionPlots } from './session-plots'
+import { StarButton } from './star-button'
+import { TimelineSlider } from './timeline-slider/timeline-slider'
+import { ViewSettings } from './view-settings'
 
-export const SessionDetails = () => {
-  const { id, projectId } = useParams()
+const TABS = {
+  SESSION: 'session',
+  CAPTURE: 'capture',
+  CHARTS: 'charts',
+}
+
+export const SessionDetailsPage = () => {
+  const { id } = useParams()
   const { setDetailBreadcrumb } = useContext(BreadcrumbContext)
   const { activeOccurrences } = useActiveOccurrences()
   const { activeCaptureId } = useActiveCaptureId()
@@ -33,7 +58,7 @@ export const SessionDetails = () => {
 
   if (isLoading) {
     return (
-      <div className={styles.loadingWrapper}>
+      <div className="flex items-center justify-center min-h-[320px]">
         <LoadingSpinner />
       </div>
     )
@@ -44,41 +69,173 @@ export const SessionDetails = () => {
   }
 
   return (
-    <div className={styles.main}>
+    <>
       <Helmet>
         <meta name="og:image" content={session.exampleCaptures[0]?.src} />
       </Helmet>
-      <div className={styles.playbackWrapper}>
-        <Playback session={session} projectId={projectId} />
-      </div>
-      <PlotGrid>
-        <Box className="bg-background">
-          <div className={styles.sessionInfo}>
-            <SessionInfo session={session} />
-          </div>
-        </Box>
-        {session.summaryData.map((summary, index) => {
-          if (summary.data.x.length <= 1) {
-            return null
-          }
 
-          return (
-            <Box
-              key={index}
-              className="bg-background flex items-center justify-center"
-            >
-              <Plot
-                title={summary.title}
-                data={summary.data}
-                orientation={summary.orientation}
-                type={summary.type}
-              />
-            </Box>
-          )
+      <Content session={session} />
+    </>
+  )
+}
+
+const Content = ({ session }: { session: SessionDetails }) => {
+  // Settings
+  const [poll, setPoll] = useState(false)
+  const [settings, setSettings] = useState({
+    defaultFilters: true,
+    showDetections: true,
+    snapToDetections: session.numDetections ? true : false,
+  })
+
+  // Data
+  const { projectId } = useParams()
+  const { user } = useUser()
+  const { activeCaptureId, setActiveCaptureId } = useActiveCaptureId(
+    session.firstCapture?.id
+  )
+  const { capture: activeCapture } = useCaptureDetails({
+    id: activeCaptureId as string,
+    poll,
+    projectId: projectId as string,
+  })
+  const { timeline = [] } = useSessionTimeline(session.id)
+
+  useEffect(() => {
+    // If the active capture has a job in progress, we want to poll the endpoint so we can show job updates
+    if (activeCapture?.hasJobInProgress) {
+      setPoll(true)
+    } else {
+      setPoll(false)
+    }
+  }, [activeCapture])
+
+  if (!session.firstCapture) {
+    return null
+  }
+
+  return (
+    <>
+      <PageHeader
+        title={session.label}
+        subTitle={translate(STRING.RESULTS_CAPTURES, {
+          total: session?.numImages ?? 0,
         })}
-      </PlotGrid>
-    </div>
+        tooltip={translate(STRING.TOOLTIP_SESSION)}
+      >
+        {activeCapture ? <Process capture={activeCapture} /> : null}
+      </PageHeader>
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-6 mt-6 md:flex-row">
+          <Box className="p-2 bg-background rounded-lg md:p-4 md:rounded-xl">
+            <Tabs.Root defaultValue={TABS.SESSION}>
+              <Tabs.List>
+                <Tabs.Trigger
+                  value={TABS.SESSION}
+                  label={translate(STRING.TAB_ITEM_SESSION)}
+                />
+                <Tabs.Trigger
+                  value={TABS.CAPTURE}
+                  label={translate(STRING.TAB_ITEM_CAPTURE)}
+                />
+                <Tabs.Trigger
+                  value={TABS.CHARTS}
+                  label={translate(STRING.TAB_ITEM_CHARTS)}
+                />
+              </Tabs.List>
+              <Tabs.Content value={TABS.SESSION}>
+                <div className="w-72">
+                  <SessionInfo session={session} />
+                </div>
+              </Tabs.Content>
+              <Tabs.Content value={TABS.CAPTURE}>
+                <div className="w-72">
+                  {activeCapture ? (
+                    <CaptureInfo capture={activeCapture} />
+                  ) : null}
+                </div>
+              </Tabs.Content>
+              <Tabs.Content value={TABS.CHARTS}>
+                <div className="w-96 space-y-4">
+                  <SessionPlots session={session} />
+                </div>
+              </Tabs.Content>
+            </Tabs.Root>
+          </Box>
+          <div className="grow flex flex-col bg-background rounded-lg border border-border overflow-hidden md:rounded-xl">
+            <div className="grow flex items-center justify-center">
+              <Capture
+                defaultFilters={settings.defaultFilters}
+                detections={activeCapture?.detections ?? []}
+                height={activeCapture?.height ?? session.firstCapture.height}
+                showDetections={settings.showDetections}
+                src={activeCapture?.src}
+                width={activeCapture?.width ?? session.firstCapture.width}
+              />
+            </div>
+            <div className="grid grid-cols-3 p-6 border-t border-border">
+              <div className="flex items-center gap-2">
+                {activeCapture ? (
+                  <>
+                    <span className="pt-0.5 text-muted-foreground">
+                      {activeCapture.dateTimeLabel}
+                    </span>
+                    <StarButton
+                      capture={activeCapture}
+                      canStar={user.loggedIn && activeCapture.canStar}
+                    />
+                    <BasicTooltip
+                      asChild
+                      content={translate(STRING.TOOLTIP_VIEW_SOURCE_FILE)}
+                    >
+                      <a
+                        href={activeCapture.url}
+                        className={cn(
+                          buttonVariants({ size: 'icon', variant: 'ghost' })
+                        )}
+                        rel="noreferrer"
+                        target="_blank"
+                      >
+                        <ExternalLinkIcon className="w-4 h-4" />
+                      </a>
+                    </BasicTooltip>
+                  </>
+                ) : null}
+              </div>
+              <div className="flex items-center justify-center">
+                <CaptureNavigation
+                  activeCapture={activeCapture}
+                  timeline={timeline}
+                  setActiveCaptureId={setActiveCaptureId}
+                />
+              </div>
+              <div className="flex items-center justify-end">
+                <ViewSettings
+                  session={session}
+                  onSettingsChange={setSettings}
+                  settings={settings}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="bg-background rounded-lg border border-border p-4">
+          <ActivityPlot
+            session={session}
+            setActiveCaptureId={setActiveCaptureId}
+            snapToDetections={settings.snapToDetections}
+            timeline={timeline}
+          />
+          <TimelineSlider
+            activeCapture={activeCapture}
+            session={session}
+            setActiveCaptureId={setActiveCaptureId}
+            timeline={timeline}
+          />
+        </div>
+      </div>
+    </>
   )
 }
 
-export default SessionDetails
+export default SessionDetailsPage
diff --git a/ui/src/pages/session-details/new/session-info.tsx b/ui/src/pages/session-details/session-info.tsx
similarity index 100%
rename from ui/src/pages/session-details/new/session-info.tsx
rename to ui/src/pages/session-details/session-info.tsx
diff --git a/ui/src/pages/session-details/session-info/session-info.module.scss b/ui/src/pages/session-details/session-info/session-info.module.scss
deleted file mode 100644
index 75fc61f9a..000000000
--- a/ui/src/pages/session-details/session-info/session-info.module.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.content {
-  width: 100%;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  column-gap: 16px;
-}
-
-.title {
-  @include body-large();
-  font-weight: 600;
-  color: var(--color-foreground);
-  margin: 0 0 16px 0;
-}
diff --git a/ui/src/pages/session-details/session-info/session-info.tsx b/ui/src/pages/session-details/session-info/session-info.tsx
deleted file mode 100644
index 3aec2140b..000000000
--- a/ui/src/pages/session-details/session-info/session-info.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Session } from 'data-services/models/session'
-import { InfoBlock } from 'nova-ui-kit'
-import { useParams } from 'react-router-dom'
-import { APP_ROUTES } from 'utils/constants'
-import { getAppRoute } from 'utils/getAppRoute'
-import { STRING, translate } from 'utils/language'
-import styles from './session-info.module.scss'
-
-export const SessionInfo = ({ session }: { session: Session }) => {
-  const { projectId } = useParams()
-
-  const fields = [
-    {
-      label: translate(STRING.FIELD_LABEL_ID),
-      value: session.id,
-    },
-    {
-      label: translate(STRING.FIELD_LABEL_DEPLOYMENT),
-      value: session.deploymentLabel,
-      to: APP_ROUTES.DEPLOYMENT_DETAILS({
-        projectId: projectId as string,
-        deploymentId: session.deploymentId,
-      }),
-    },
-    {
-      label: translate(STRING.FIELD_LABEL_DATE),
-      value: session.datespanLabel,
-    },
-    {
-      label: translate(STRING.FIELD_LABEL_TIME),
-      value: session.timespanLabel,
-    },
-    {
-      label: translate(STRING.FIELD_LABEL_DURATION),
-      value: session.durationLabel,
-    },
-    {
-      label: translate(STRING.FIELD_LABEL_CAPTURES),
-      value: session.numImages,
-    },
-    {
-      label: translate(STRING.FIELD_LABEL_OCCURRENCES),
-      value: session.numOccurrences,
-      to: getAppRoute({
-        to: APP_ROUTES.OCCURRENCES({ projectId: projectId as string }),
-        filters: { event: session.id },
-      }),
-    },
-    ...(session.numTaxa !== undefined
-      ? [
-          {
-            label: translate(STRING.FIELD_LABEL_TAXA),
-            value: session.numTaxa,
-            to: getAppRoute({
-              to: APP_ROUTES.TAXA({ projectId: projectId as string }),
-              filters: { event: session.id },
-            }),
-          },
-        ]
-      : []),
-  ]
-
-  return (
-    <div className={styles.container}>
-      <h1 className={styles.title}>{session.label}</h1>
-      <div className={styles.content}>
-        <InfoBlock fields={fields} />
-      </div>
-    </div>
-  )
-}
diff --git a/ui/src/pages/session-details/new/session-plots.tsx b/ui/src/pages/session-details/session-plots.tsx
similarity index 100%
rename from ui/src/pages/session-details/new/session-plots.tsx
rename to ui/src/pages/session-details/session-plots.tsx
diff --git a/ui/src/pages/session-details/new/star-button.tsx b/ui/src/pages/session-details/star-button.tsx
similarity index 100%
rename from ui/src/pages/session-details/new/star-button.tsx
rename to ui/src/pages/session-details/star-button.tsx
diff --git a/ui/src/pages/session-details/new/timeline-slider/styles.module.scss b/ui/src/pages/session-details/timeline-slider/styles.module.scss
similarity index 100%
rename from ui/src/pages/session-details/new/timeline-slider/styles.module.scss
rename to ui/src/pages/session-details/timeline-slider/styles.module.scss
diff --git a/ui/src/pages/session-details/new/timeline-slider/timeline-slider.tsx b/ui/src/pages/session-details/timeline-slider/timeline-slider.tsx
similarity index 97%
rename from ui/src/pages/session-details/new/timeline-slider/timeline-slider.tsx
rename to ui/src/pages/session-details/timeline-slider/timeline-slider.tsx
index 5b67c7fc8..8be496ab7 100644
--- a/ui/src/pages/session-details/new/timeline-slider/timeline-slider.tsx
+++ b/ui/src/pages/session-details/timeline-slider/timeline-slider.tsx
@@ -93,7 +93,7 @@ const Slider = ({
       </_Slider.Track>
       <_Slider.Thumb className={styles.sliderThumb}>
         {valueLabel && <span className={styles.label}>{valueLabel}</span>}
-        <TriangleIcon className="text-primary" />
+        <TriangleIcon className="text-primary bg-background" />
       </_Slider.Thumb>
     </_Slider.Root>
     <div className={styles.labels}>
diff --git a/ui/src/pages/session-details/new/utils.tsx b/ui/src/pages/session-details/utils.tsx
similarity index 100%
rename from ui/src/pages/session-details/new/utils.tsx
rename to ui/src/pages/session-details/utils.tsx
diff --git a/ui/src/pages/session-details/new/view-settings.tsx b/ui/src/pages/session-details/view-settings.tsx
similarity index 100%
rename from ui/src/pages/session-details/new/view-settings.tsx
rename to ui/src/pages/session-details/view-settings.tsx

From 24bffc564e00fd8a227dff743dfbb4ef18d03c6b Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Fri, 29 May 2026 13:17:53 +0200
Subject: [PATCH 08/11] layout: adjust for small screens

---
 ui/src/nova-ui-kit/components/tabs/tabs.tsx    |  8 +++++---
 .../pages/session-details/session-details.tsx  | 18 +++++++++---------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/ui/src/nova-ui-kit/components/tabs/tabs.tsx b/ui/src/nova-ui-kit/components/tabs/tabs.tsx
index d8b3f971d..1b03e56b4 100644
--- a/ui/src/nova-ui-kit/components/tabs/tabs.tsx
+++ b/ui/src/nova-ui-kit/components/tabs/tabs.tsx
@@ -43,13 +43,15 @@ const Trigger = ({ value, label }: { value: string; label: string }) => (
 )
 
 const Content = ({
-  value,
   children,
+  className,
+  value,
 }: {
-  value: string
   children: ReactNode
+  className?: string
+  value: string
 }) => (
-  <Tabs.Content value={value} tabIndex={-1}>
+  <Tabs.Content className={className} tabIndex={-1} value={value}>
     {children}
   </Tabs.Content>
 )
diff --git a/ui/src/pages/session-details/session-details.tsx b/ui/src/pages/session-details/session-details.tsx
index 4dc8e5d26..5de8048a6 100644
--- a/ui/src/pages/session-details/session-details.tsx
+++ b/ui/src/pages/session-details/session-details.tsx
@@ -125,8 +125,8 @@ const Content = ({ session }: { session: SessionDetails }) => {
       >
         {activeCapture ? <Process capture={activeCapture} /> : null}
       </PageHeader>
-      <div className="flex flex-col gap-6">
-        <div className="flex flex-col gap-6 mt-6 md:flex-row">
+      <div className="flex flex-col gap-4 md:gap-6">
+        <div className="flex flex-col gap-4 mt-6 md:flex-row md:gap-6">
           <Box className="p-2 bg-background rounded-lg md:p-4 md:rounded-xl">
             <Tabs.Root defaultValue={TABS.SESSION}>
               <Tabs.List>
@@ -155,7 +155,7 @@ const Content = ({ session }: { session: SessionDetails }) => {
                   ) : null}
                 </div>
               </Tabs.Content>
-              <Tabs.Content value={TABS.CHARTS}>
+              <Tabs.Content className="overflow-x-auto" value={TABS.CHARTS}>
                 <div className="w-96 space-y-4">
                   <SessionPlots session={session} />
                 </div>
@@ -163,7 +163,7 @@ const Content = ({ session }: { session: SessionDetails }) => {
             </Tabs.Root>
           </Box>
           <div className="grow flex flex-col bg-background rounded-lg border border-border overflow-hidden md:rounded-xl">
-            <div className="grow flex items-center justify-center">
+            <div className="grow flex items-center justify-center bg-foreground">
               <Capture
                 defaultFilters={settings.defaultFilters}
                 detections={activeCapture?.detections ?? []}
@@ -173,11 +173,11 @@ const Content = ({ session }: { session: SessionDetails }) => {
                 width={activeCapture?.width ?? session.firstCapture.width}
               />
             </div>
-            <div className="grid grid-cols-3 p-6 border-t border-border">
-              <div className="flex items-center gap-2">
+            <div className="flex flex-wrap justify-between gap-x-8 gap-y-2 p-2 border-t border-border md:p-6">
+              <div className="flex-1 flex items-center gap-2">
                 {activeCapture ? (
                   <>
-                    <span className="pt-0.5 text-muted-foreground">
+                    <span className="pt-0.5 text-muted-foreground truncate">
                       {activeCapture.dateTimeLabel}
                     </span>
                     <StarButton
@@ -209,7 +209,7 @@ const Content = ({ session }: { session: SessionDetails }) => {
                   setActiveCaptureId={setActiveCaptureId}
                 />
               </div>
-              <div className="flex items-center justify-end">
+              <div className="flex-1 flex items-center justify-end">
                 <ViewSettings
                   session={session}
                   onSettingsChange={setSettings}
@@ -219,7 +219,7 @@ const Content = ({ session }: { session: SessionDetails }) => {
             </div>
           </div>
         </div>
-        <div className="bg-background rounded-lg border border-border p-4">
+        <div className="bg-background rounded-lg border border-border p-2 md:p-4">
           <ActivityPlot
             session={session}
             setActiveCaptureId={setActiveCaptureId}

From e8c848e6f86af5138807fe4eb42e47b5dad29dd0 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Fri, 29 May 2026 13:18:18 +0200
Subject: [PATCH 09/11] feat: add new translation keys

---
 ui/src/utils/language.ts | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/ui/src/utils/language.ts b/ui/src/utils/language.ts
index 8cf0b7214..21e2b81c2 100644
--- a/ui/src/utils/language.ts
+++ b/ui/src/utils/language.ts
@@ -101,8 +101,8 @@ export enum STRING {
   FIELD_LABEL_EMAIL,
   FIELD_LABEL_ENDPOINT,
   FIELD_LABEL_ERRORS,
-  FIELD_LABEL_FILENAME,
   FIELD_LABEL_FILE_SIZE,
+  FIELD_LABEL_FILENAME,
   FIELD_LABEL_FINISHED_AT,
   FIELD_LABEL_FIRST_DATE,
   FIELD_LABEL_FORMAT,
@@ -114,9 +114,10 @@ export enum STRING {
   FIELD_LABEL_JOB,
   FIELD_LABEL_JOBS,
   FIELD_LABEL_KEY,
-  FIELD_LABEL_LAST_SEEN,
   FIELD_LABEL_LAST_DATE,
+  FIELD_LABEL_LAST_SEEN,
   FIELD_LABEL_LAST_SYNCED,
+  FIELD_LABEL_LATEST_JOB_STATUS,
   FIELD_LABEL_LATITUDE,
   FIELD_LABEL_LOCATION,
   FIELD_LABEL_LOGS,
@@ -240,11 +241,13 @@ export enum STRING {
 
   /* TAB_ITEM */
   TAB_ITEM_ALL_PROJECTS,
+  TAB_ITEM_CAPTURE,
   TAB_ITEM_CHARTS,
   TAB_ITEM_FIELDS,
   TAB_ITEM_GALLERY,
   TAB_ITEM_IDENTIFICATION,
   TAB_ITEM_MY_PROJECTS,
+  TAB_ITEM_SESSION,
   TAB_ITEM_TABLE,
 
   /* JOB STATUS */
@@ -270,8 +273,8 @@ export enum STRING {
   TOOLTIP_SCORE,
   TOOLTIP_SESSION,
   TOOLTIP_SITE,
-
   TOOLTIP_STORAGE,
+  TOOLTIP_VIEW_SOURCE_FILE,
 
   /* OTHER */
   ABOUT_ROLE,
@@ -309,6 +312,7 @@ export enum STRING {
   OR,
   OVERVIEW,
   PIPELINES,
+  PROCESS,
   RECENT,
   REJECT_ID_SHORT,
   REJECT_ID,
@@ -342,6 +346,7 @@ export enum STRING {
   VERIFIED_BY,
   VERIFIED,
   VIEW_IN_SESSION,
+  VIEW_SETTINGS,
   YOU,
 }
 
@@ -369,12 +374,13 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.EXPAND]: 'Expand',
   [STRING.LOGIN]: 'Login',
   [STRING.LOGOUT]: 'Logout',
-  [STRING.MORE]: 'More',
   [STRING.MANAGE_ACCESS]: 'Manage access',
+  [STRING.MORE]: 'More',
   [STRING.NEXT]: 'Next',
   [STRING.POPULATE]: 'Populate',
   [STRING.PREVIOUS]: 'Previous',
   [STRING.PROCESS_NOW]: 'Process now',
+  [STRING.PROCESS]: 'Process',
   [STRING.QUEUED]: 'Queued',
   [STRING.REFRESH]: 'Refresh',
   [STRING.REGISTER_PIPELINES]: 'Register pipelines',
@@ -426,8 +432,8 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.FIELD_LABEL_EMAIL]: 'Email',
   [STRING.FIELD_LABEL_ENDPOINT]: 'Endpoint URL',
   [STRING.FIELD_LABEL_ERRORS]: 'Errors',
-  [STRING.FIELD_LABEL_FILENAME]: 'Filename',
   [STRING.FIELD_LABEL_FILE_SIZE]: 'File size',
+  [STRING.FIELD_LABEL_FILENAME]: 'Filename',
   [STRING.FIELD_LABEL_FINISHED_AT]: 'Finished at',
   [STRING.FIELD_LABEL_FIRST_DATE]: 'First date',
   [STRING.FIELD_LABEL_FORMAT]: 'Format',
@@ -439,9 +445,10 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.FIELD_LABEL_JOB]: 'Job',
   [STRING.FIELD_LABEL_JOBS]: 'Jobs',
   [STRING.FIELD_LABEL_KEY]: 'Key',
-  [STRING.FIELD_LABEL_LAST_SEEN]: 'Last seen',
   [STRING.FIELD_LABEL_LAST_DATE]: 'Last date',
+  [STRING.FIELD_LABEL_LAST_SEEN]: 'Last seen',
   [STRING.FIELD_LABEL_LAST_SYNCED]: 'Last synced with data source',
+  [STRING.FIELD_LABEL_LATEST_JOB_STATUS]: 'Latest job status',
   [STRING.FIELD_LABEL_LATITUDE]: 'Latitude',
   [STRING.FIELD_LABEL_LOCATION]: 'Location',
   [STRING.FIELD_LABEL_LOGS]: 'Logs',
@@ -568,7 +575,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.MESSAGE_PERMISSIONS_MISSING]:
     'Permissions missing to perform the action',
   [STRING.MESSAGE_PROCESS_NOW_TOOLTIP]:
-    'Process this single image with presets',
+    'Process this single capture with presets',
   [STRING.MESSAGE_REMOVE_MEMBER_CONFIRM]:
     'Are you sure you want to remove {{user}} from the team?',
   [STRING.MESSAGE_REMOVE_TAXA_LIST_TAXON_CONFIRM]:
@@ -612,11 +619,13 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
 
   /* TAB_ITEM */
   [STRING.TAB_ITEM_ALL_PROJECTS]: 'All projects',
+  [STRING.TAB_ITEM_CAPTURE]: 'Capture',
   [STRING.TAB_ITEM_CHARTS]: 'Charts',
   [STRING.TAB_ITEM_FIELDS]: 'Fields',
   [STRING.TAB_ITEM_GALLERY]: 'Gallery view',
   [STRING.TAB_ITEM_IDENTIFICATION]: 'Identification',
   [STRING.TAB_ITEM_MY_PROJECTS]: 'My projects',
+  [STRING.TAB_ITEM_SESSION]: 'Session',
   [STRING.TAB_ITEM_TABLE]: 'Table view',
 
   /* JOB STATUS */
@@ -657,6 +666,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
     'A site is a physical location where monitoring is taking place. One or many stations can be connected to a site.',
   [STRING.TOOLTIP_STORAGE]:
     'A storage is a place where captures are kept, for example a S3 bucket. One or many stations can be connected to a storage.',
+  [STRING.TOOLTIP_VIEW_SOURCE_FILE]: 'View source file',
 
   /* OTHER */
   [STRING.ABOUT_ROLE]: 'About role',
@@ -699,6 +709,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.REJECT_ID]: 'Reject ID',
   [STRING.REMOVE_MEMBER]: 'Remove member',
   [STRING.REMOVE_TAXA_LIST_TAXON]: 'Remove taxon',
+  [STRING.RESULTS_CAPTURES]: '{{total}} capture(s)',
   [STRING.RESULTS_MEMBERS]: '{{total}} member(s)',
   [STRING.RESULTS]: '{{total}} result(s)',
   [STRING.SELECT_COLUMNS]: 'Select columns',
@@ -726,6 +737,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.VERIFIED_BY]: 'Verified by\n{{name}}',
   [STRING.VERIFIED]: 'Verified',
   [STRING.VIEW_IN_SESSION]: 'View in session',
+  [STRING.VIEW_SETTINGS]: 'View settings',
   [STRING.YOU]: 'You',
 }
 

From 5333611713379a978f66a151a9e6ae11b8694f8f Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Fri, 29 May 2026 16:56:00 +0200
Subject: [PATCH 10/11] feat: add snap to detections controls

---
 .../session-details/capture-navigation.tsx    | 83 ++++++++++++++-----
 .../pages/session-details/view-settings.tsx   |  2 +-
 ui/src/utils/language.ts                      |  2 +
 3 files changed, 64 insertions(+), 23 deletions(-)

diff --git a/ui/src/pages/session-details/capture-navigation.tsx b/ui/src/pages/session-details/capture-navigation.tsx
index 050a86bb4..d918d628a 100644
--- a/ui/src/pages/session-details/capture-navigation.tsx
+++ b/ui/src/pages/session-details/capture-navigation.tsx
@@ -1,19 +1,22 @@
 import { CaptureDetails } from 'data-services/models/capture-details'
 import { TimelineTick } from 'data-services/models/timeline-tick'
-import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react'
-import { Button } from 'nova-ui-kit'
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+} from 'lucide-react'
+import { BasicTooltip, Button } from 'nova-ui-kit'
 import { useEffect, useState } from 'react'
 import { STRING, translate } from 'utils/language'
 import { findClosestCaptureId } from './utils'
 
 export const CaptureNavigation = ({
   activeCapture,
-  snapToDetections,
   timeline,
   setActiveCaptureId,
 }: {
   activeCapture?: CaptureDetails
-  snapToDetections?: boolean
   timeline: TimelineTick[]
   setActiveCaptureId: (captureId: string) => void
 }) => {
@@ -30,18 +33,25 @@ export const CaptureNavigation = ({
   }, [activeCapture])
 
   const goToPrev = () => {
+    if (!activeCapture?.prevCaptureId) {
+      return
+    }
+
+    setActiveCaptureId(activeCapture.prevCaptureId)
+  }
+
+  const goToPrevWithDetections = () => {
     if (!activeCapture) {
       return
     }
 
-    const prevCaptureId = snapToDetections
-      ? findClosestCaptureId({
-          maxDate: activeCapture.date,
-          snapToDetections: true,
-          targetDate: activeCapture.date,
-          timeline,
-        })
-      : activeCapture.prevCaptureId
+    const prevCaptureId =
+      findClosestCaptureId({
+        maxDate: activeCapture.date,
+        snapToDetections: true,
+        targetDate: activeCapture.date,
+        timeline,
+      }) ?? activeCapture.prevCaptureId
 
     if (prevCaptureId) {
       setActiveCaptureId(prevCaptureId)
@@ -49,18 +59,25 @@ export const CaptureNavigation = ({
   }
 
   const goToNext = () => {
+    if (!activeCapture?.nextCaptureId) {
+      return
+    }
+
+    setActiveCaptureId(activeCapture.nextCaptureId)
+  }
+
+  const goToNextWithDetections = () => {
     if (!activeCapture) {
       return
     }
 
-    const nextCaptureId = snapToDetections
-      ? findClosestCaptureId({
-          minDate: activeCapture.date,
-          snapToDetections: true,
-          targetDate: activeCapture.date,
-          timeline,
-        })
-      : activeCapture.nextCaptureId
+    const nextCaptureId =
+      findClosestCaptureId({
+        minDate: activeCapture.date,
+        snapToDetections: true,
+        targetDate: activeCapture.date,
+        timeline,
+      }) ?? activeCapture.nextCaptureId
 
     if (nextCaptureId) {
       setActiveCaptureId(nextCaptureId)
@@ -85,7 +102,18 @@ export const CaptureNavigation = ({
   }, [goToPrev, goToNext])
 
   return (
-    <div className="flex items-center justify-center gap-4">
+    <div className="flex items-center justify-center gap-1">
+      <BasicTooltip asChild content={translate(STRING.SNAP_TO_DETECTIONS)}>
+        <Button
+          aria-label={translate(STRING.SNAP_TO_DETECTIONS)}
+          disabled={!activeCapture?.prevCaptureId}
+          onClick={goToPrevWithDetections}
+          size="icon"
+          variant="outline"
+        >
+          <ChevronsLeftIcon className="w-4 h-4" />
+        </Button>
+      </BasicTooltip>
       <Button
         aria-label={translate(STRING.PREVIOUS)}
         disabled={!activeCapture?.prevCaptureId}
@@ -95,7 +123,7 @@ export const CaptureNavigation = ({
       >
         <ChevronLeftIcon className="w-4 h-4" />
       </Button>
-      <span className="pt-0.5">
+      <span className="pt-0.5 px-3">
         {currentIndex?.toLocaleString()} / {totalCaptures?.toLocaleString()}
       </span>
       <Button
@@ -107,6 +135,17 @@ export const CaptureNavigation = ({
       >
         <ChevronRightIcon className="w-4 h-4" />
       </Button>
+      <BasicTooltip asChild content={translate(STRING.SNAP_TO_DETECTIONS)}>
+        <Button
+          aria-label={translate(STRING.SNAP_TO_DETECTIONS)}
+          disabled={!activeCapture?.nextCaptureId}
+          onClick={goToNextWithDetections}
+          size="icon"
+          variant="outline"
+        >
+          <ChevronsRightIcon className="w-4 h-4" />
+        </Button>
+      </BasicTooltip>
     </div>
   )
 }
diff --git a/ui/src/pages/session-details/view-settings.tsx b/ui/src/pages/session-details/view-settings.tsx
index c94a63438..5cd145f4a 100644
--- a/ui/src/pages/session-details/view-settings.tsx
+++ b/ui/src/pages/session-details/view-settings.tsx
@@ -72,7 +72,7 @@ export const ViewSettings = ({
           </div>
           <Checkbox
             id="snap-to-detections"
-            label="Snap to images with detections"
+            label={translate(STRING.SNAP_TO_DETECTIONS)}
             checked={settings.snapToDetections}
             onCheckedChange={() =>
               onSettingsChange({
diff --git a/ui/src/utils/language.ts b/ui/src/utils/language.ts
index 21e2b81c2..871ee54f7 100644
--- a/ui/src/utils/language.ts
+++ b/ui/src/utils/language.ts
@@ -328,6 +328,7 @@ export enum STRING {
   SET_PASSWORD_DETAILS,
   SET_PASSWORD,
   SETTINGS,
+  SNAP_TO_DETECTIONS,
   SORT_BY,
   SORT_JOBS_ACTIVITY,
   SORT_OCCURRENCE_UPDATES,
@@ -719,6 +720,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.SET_PASSWORD_DETAILS]: 'Please set a new password for your acccount.',
   [STRING.SET_PASSWORD]: 'Set password',
   [STRING.SETTINGS]: 'Settings',
+  [STRING.SNAP_TO_DETECTIONS]: 'Snap to captures with detections',
   [STRING.SORT_BY]: 'Sort by',
   [STRING.SORT_JOBS_ACTIVITY]: 'Jobs activity',
   [STRING.SORT_OCCURRENCE_UPDATES]: 'Occurrence updates',

From 1a9ffeb83bad0c72a34a1ee82fcc49370fd173e8 Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Fri, 29 May 2026 17:09:11 +0200
Subject: [PATCH 11/11] fix: address PR comments

---
 ui/src/nova-ui-kit/global.scss                | 26 +++++++++----------
 .../session-details/process/process-now.tsx   |  3 ++-
 .../pages/session-details/process/process.tsx | 12 ++++-----
 .../pages/session-details/session-details.tsx |  9 ++++---
 ui/src/pages/session-details/star-button.tsx  | 16 +++++++-----
 .../timeline-slider/styles.module.scss        |  4 +--
 .../pages/session-details/view-settings.tsx   |  4 +--
 ui/src/utils/language.ts                      |  2 ++
 8 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/ui/src/nova-ui-kit/global.scss b/ui/src/nova-ui-kit/global.scss
index 6dd11a959..3f974a894 100644
--- a/ui/src/nova-ui-kit/global.scss
+++ b/ui/src/nova-ui-kit/global.scss
@@ -41,53 +41,53 @@
 }
 
 .heading-large {
-  @include heading-large();
+  @include heading-large;
 }
 
 .heading-medium {
-  @include heading-medium();
+  @include heading-medium;
 }
 
 .heading-small {
-  @include heading-small();
+  @include heading-small;
 }
 
 .body-xlarge {
-  @include body-xlarge();
+  @include body-xlarge;
 }
 
 .body-large {
-  @include body-large();
+  @include body-large;
 }
 
 .body-base {
-  @include body-base();
+  @include body-base;
 }
 
 .body-small {
-  @include body-small();
+  @include body-small;
 }
 
 .body-overline {
-  @include body-overline();
+  @include body-overline;
 }
 
 .body-overline-small {
-  @include body-overline-small();
+  @include body-overline-small;
 }
 
 .body-overline-xsmall {
-  @include body-overline-xsmall();
+  @include body-overline-xsmall;
 }
 
 .body-number {
-  @include body-number();
+  @include body-number;
 }
 
 .body-number-small {
-  @include body-number-small();
+  @include body-number-small;
 }
 
 .bubble-label {
-  @include bubble-label();
+  @include bubble-label;
 }
diff --git a/ui/src/pages/session-details/process/process-now.tsx b/ui/src/pages/session-details/process/process-now.tsx
index 87be45555..6fa53d63e 100644
--- a/ui/src/pages/session-details/process/process-now.tsx
+++ b/ui/src/pages/session-details/process/process-now.tsx
@@ -18,7 +18,8 @@ export const ProcessNow = ({
   const canProcess = capture.userPermissions.includes(
     UserPermission.RunSingleImage
   )
-  const disabled = capture.hasJobInProgress || !pipelineId || !canProcess
+  const disabled =
+    isLoading || capture.hasJobInProgress || !pipelineId || !canProcess
   // @TODO: also check if pipeline is healthy/available
 
   return (
diff --git a/ui/src/pages/session-details/process/process.tsx b/ui/src/pages/session-details/process/process.tsx
index 32d831f32..f32779685 100644
--- a/ui/src/pages/session-details/process/process.tsx
+++ b/ui/src/pages/session-details/process/process.tsx
@@ -58,18 +58,18 @@ export const Process = ({ capture }: { capture: CaptureDetails }) => {
         {capture.currentJob ?? capture.numJobs ? (
           <FormSection>
             <FormRow>
-              <InputContent
-                label={translate(STRING.FIELD_LABEL_LATEST_JOB_STATUS)}
-              >
-                {capture.currentJob ? (
+              {capture.currentJob ? (
+                <InputContent
+                  label={translate(STRING.FIELD_LABEL_LATEST_JOB_STATUS)}
+                >
                   <div className="flex items-center gap-2">
                     <StatusMarker color={capture.currentJob.status.color} />
                     <span className="pt-0.5 body-base">
                       {capture.currentJob.status.label}
                     </span>
                   </div>
-                ) : null}
-              </InputContent>
+                </InputContent>
+              ) : null}
               <InputContent label={translate(STRING.FIELD_LABEL_JOBS)}>
                 <Link
                   className="bubble-label"
diff --git a/ui/src/pages/session-details/session-details.tsx b/ui/src/pages/session-details/session-details.tsx
index 5de8048a6..cf7d9bbfa 100644
--- a/ui/src/pages/session-details/session-details.tsx
+++ b/ui/src/pages/session-details/session-details.tsx
@@ -70,10 +70,11 @@ export const SessionDetailsPage = () => {
 
   return (
     <>
-      <Helmet>
-        <meta name="og:image" content={session.exampleCaptures[0]?.src} />
-      </Helmet>
-
+      {session.exampleCaptures[0] ? (
+        <Helmet>
+          <meta name="og:image" content={session.exampleCaptures[0]?.src} />
+        </Helmet>
+      ) : null}
       <Content session={session} />
     </>
   )
diff --git a/ui/src/pages/session-details/star-button.tsx b/ui/src/pages/session-details/star-button.tsx
index 3a25f6f85..b6f7ab029 100644
--- a/ui/src/pages/session-details/star-button.tsx
+++ b/ui/src/pages/session-details/star-button.tsx
@@ -13,16 +13,18 @@ export const StarButton = ({
 }) => {
   const isStarred = capture.isStarred ?? false
   const { starCapture, isLoading } = useStarCapture(capture.id, isStarred)
-  const tooltipContent = canStar
-    ? isStarred
-      ? translate(STRING.STARRED)
-      : translate(STRING.STAR)
-    : translate(STRING.MESSAGE_PERMISSIONS_MISSING)
+
+  if (!canStar) {
+    return null
+  }
 
   return (
-    <BasicTooltip asChild content={tooltipContent}>
+    <BasicTooltip
+      asChild
+      content={isStarred ? translate(STRING.STARRED) : translate(STRING.STAR)}
+    >
       <Button
-        disabled={!canStar}
+        disabled={isLoading}
         aria-label={
           isStarred ? translate(STRING.STARRED) : translate(STRING.STAR)
         }
diff --git a/ui/src/pages/session-details/timeline-slider/styles.module.scss b/ui/src/pages/session-details/timeline-slider/styles.module.scss
index 43d161cf5..09eb99aa6 100644
--- a/ui/src/pages/session-details/timeline-slider/styles.module.scss
+++ b/ui/src/pages/session-details/timeline-slider/styles.module.scss
@@ -5,7 +5,7 @@
 
   .label {
     display: block;
-    @include body-overline();
+    @include body-overline;
     font-weight: 600;
     color: var(--color-primary);
     text-transform: uppercase;
@@ -17,7 +17,7 @@
     justify-content: space-between;
 
     .label {
-      @include body-overline-small();
+      @include body-overline-small;
       color: var(--color-muted-foreground);
     }
   }
diff --git a/ui/src/pages/session-details/view-settings.tsx b/ui/src/pages/session-details/view-settings.tsx
index 5cd145f4a..7c93d889c 100644
--- a/ui/src/pages/session-details/view-settings.tsx
+++ b/ui/src/pages/session-details/view-settings.tsx
@@ -46,7 +46,7 @@ export const ViewSettings = ({
         <div className="grid gap-2">
           <Checkbox
             id="show-detections"
-            label="Show detections"
+            label={translate(STRING.SHOW_DETECTIONS)}
             checked={settings.showDetections}
             onCheckedChange={() =>
               onSettingsChange({
@@ -58,7 +58,7 @@ export const ViewSettings = ({
           <div className="flex items-center gap-1">
             <Checkbox
               id="default-filters"
-              label="Default filters"
+              label={translate(STRING.NAV_ITEM_DEFAULT_FILTERS)}
               checked={settings.defaultFilters}
               onCheckedChange={() =>
                 onSettingsChange({
diff --git a/ui/src/utils/language.ts b/ui/src/utils/language.ts
index 871ee54f7..5d46189aa 100644
--- a/ui/src/utils/language.ts
+++ b/ui/src/utils/language.ts
@@ -328,6 +328,7 @@ export enum STRING {
   SET_PASSWORD_DETAILS,
   SET_PASSWORD,
   SETTINGS,
+  SHOW_DETECTIONS,
   SNAP_TO_DETECTIONS,
   SORT_BY,
   SORT_JOBS_ACTIVITY,
@@ -720,6 +721,7 @@ const ENGLISH_STRINGS: { [key in STRING]: string } = {
   [STRING.SET_PASSWORD_DETAILS]: 'Please set a new password for your acccount.',
   [STRING.SET_PASSWORD]: 'Set password',
   [STRING.SETTINGS]: 'Settings',
+  [STRING.SHOW_DETECTIONS]: 'Show detections',
   [STRING.SNAP_TO_DETECTIONS]: 'Snap to captures with detections',
   [STRING.SORT_BY]: 'Sort by',
   [STRING.SORT_JOBS_ACTIVITY]: 'Jobs activity',