trunk-merge/pr-108026/e2ff5dc3-9b6c-48df-8dd6-3eeba5b6c23b

frontend/snapshots.yml

@@ -11147,7 +11147,7 @@ snapshots:
     scenes-app-replay-vision--home-watch-feed-only-newest--dark:
         hash: v1.k794b7964.f64a7c7bb16de8d589664ccb6e0bce38eba82a63d1375d348c3a44628445a98f.LWCEsvlNc28TTOiiwI7-GrLQm165fAPCjY3oBQWKVVs
     scenes-app-replay-vision--home-watch-feed-only-newest--light:
-        hash: v1.k794b7964.9dee1104cc345d606d3f319c1a88f005becebd0a5619d44c88d7a046a8663fa9.k__VZa5R9q9AqmZpGeG_5kjP_N9-_AesK7wonLaGgck
+        hash: v1.k794b7964.7a3c6205566a677d0d78d3c0e4c04c19aaaaad98857323c0ee4138d572a9b29c.hpcmZrUqq_ViM2kzyyACs4gqqfrIuEckqWWEH5fTWGU
     scenes-app-replay-vision--monitor-observations--dark:
         hash: v1.k794b7964.96d80a38110ad0abf32d13d9709f4b21f58027b2ac72d306dcd102d5496b831f.zHot-qyqnA8iZSK6-U5PHca9lzckgE3oJb4JoimsDEk
     scenes-app-replay-vision--monitor-observations--light:

products/replay_vision/frontend/components/UnviewedObservationTag.tsx

@@ -0,0 +1,18 @@
+import { LemonTag } from '@posthog/lemon-ui'
+
+import { cn } from 'lib/utils/css-classes'
+
+/** Marks an observation the viewer hasn't opened; the caller positions it over a thumbnail. */
+export function UnviewedObservationTag({ className }: { className?: string }): JSX.Element {
+    return (
+        <LemonTag
+            type="primary"
+            size="small"
+            // The primary tag is transparent by default, which lets the frame show through.
+            className={cn('shadow-sm bg-surface-primary!', className)}
+            title="You haven't opened this observation yet."
+        >
+            New
+        </LemonTag>
+    )
+}

products/replay_vision/frontend/replay_scanners/components/ScannerObservationsTable.tsx

@@ -18,6 +18,7 @@
 import { ObservationStatusTag } from '../../components/ObservationCard'
 import { ObservationRetryButton } from '../../components/ObservationRetryButton'
 import { ObservationThumbnail } from '../../components/ObservationThumbnail'
+import { UnviewedObservationTag } from '../../components/UnviewedObservationTag'
 import type { ReplayObservationApi } from '../../generated/api.schemas'
 import { observationDetailUrl } from '../../observations/replayObservationLogic'
 import { markSimilarSearchIntent, searchTabUrl, similarSearchUrl } from '../../search/observationQueries'
@@ -85,7 +86,7 @@
     return { type, label, tooltip }
 }
 
 export function ScannerObservationsTable({ scannerId }: { scannerId: string }): JSX.Element {
     const logic = replayScannerLogic({ id: scannerId })
     const {
         observations,
@@ -162,17 +163,7 @@
                     >
                         <div className="relative">
                             <ObservationThumbnail observation={obs} className="w-40 @7xl/observations:w-52" />
-                            {!obs.viewed && (
-                                <LemonTag
-                                    type="primary"
-                                    size="small"
-                                    // The primary tag is transparent by default, which lets the frame show through.
-                                    className="absolute top-1 left-1 shadow-sm bg-surface-primary!"
-                                    title="You haven't opened this observation yet."
-                                >
-                                    New
-                                </LemonTag>
-                            )}
+                            {!obs.viewed && <UnviewedObservationTag className="absolute top-1 left-1" />}
                         </div>
                     </Tooltip>
                 </Link>

products/replay_vision/frontend/replay_scanners/components/WatchFeedCard.tsx

@@ -2,7 +2,7 @@
 import { combineUrl, router } from 'kea-router'
 
 import { IconFlag, IconPlay, IconPlayFilled } from '@posthog/icons'
-import { LemonButton, Link, Tooltip } from '@posthog/lemon-ui'
+import { LemonButton, Link } from '@posthog/lemon-ui'
 
 import { TZLabel } from 'lib/components/TZLabel'
 import posthog from 'lib/posthog-typed'
@@ -13,6 +13,7 @@
 import { CitedText, ObservationResultSummary, readResult } from '../../components/ObservationCard'
 import { ObservationThumbnail } from '../../components/ObservationThumbnail'
 import { ScannerTypeBadge } from '../../components/ScannerTypeBadge'
+import { UnviewedObservationTag } from '../../components/UnviewedObservationTag'
 import type { ReplayObservationApi, WatchFeedItemApi, WatchFeedReasonApi } from '../../generated/api.schemas'
 import { OBSERVATION_ORIGIN_PARAM, WATCH_FEED_ORIGIN } from '../../utils/breadcrumbs'
 import { citedTextToPlainText, citedTimestampRange } from '../../utils/citations'
@@ -40,7 +41,7 @@
  * feed, so a feed made up entirely of them means the window turned up no findings at all. */
 export const FILLER_REASON_KINDS = new Set(['unviewed_recent', 'recent'])
 
 export function watchReasonCopy(reason: WatchFeedReasonApi): string {
     // The scan wrote this sentence while watching the session, so it beats anything derived from the
     // reason kind. Absent on observations scanned before notability shipped, which fall through below.
     if (reason.notability_reason) {
@@ -158,7 +159,7 @@
  * headline, with citation chips rendered as plain timestamps so a mid-sentence citation keeps
  * its place, and the rest becomes the body, already plain.
  */
 export function watchCardHeadline(
     observation: ReplayObservationApi
 ): { title: string; body: { text: string; segments?: unknown } | null } | null {
     const result = readResult(observation)
@@ -201,7 +202,7 @@
     position: number
 }
 
 export function WatchFeedCard({ item, position }: WatchFeedCardProps): JSX.Element {
     const { observation, reason } = item
     const { openSessionPlayer } = useActions(sessionPlayerModalLogic)
     const clip = observationClipRange(observation)
@@ -253,8 +254,9 @@
             className="@container relative border rounded bg-bg-light p-4 flex gap-4 hover:border-accent"
             data-attr="vision-watch-feed-card"
         >
+            {!observation.viewed && <span className="absolute inset-y-0 left-0 w-1 rounded-l bg-accent" aria-hidden />}
             {/* The thumbnail is the watch affordance, so the whole poster opens the clip modal.
-                The dot and the duration sit outside the poster, which clips its own overflow. */}
+                The New tag and the duration sit outside the poster, which clips its own overflow. */}
             <div className="relative hidden @md:block w-64 shrink-0 self-start">
                 <button
                     type="button"
@@ -276,13 +278,9 @@
                         </span>
                     )}
                 </button>
+                {/* Sits above the button, so it lets clicks through to open the clip. */}
                 {!observation.viewed && (
-                    <Tooltip title="You haven't opened this observation yet">
-                        <span
-                            className="absolute -top-1 -right-1 w-2.5 h-2.5 rounded-full bg-accent border border-bg-light z-10"
-                            aria-label="Unviewed"
-                        />
-                    </Tooltip>
+                    <UnviewedObservationTag className="absolute top-1 left-1 z-10 pointer-events-none" />
                 )}
             </div>
             <div className="flex-1 min-w-0 flex flex-col gap-1.5">
@@ -295,7 +293,11 @@
                     className="text-default after:absolute after:inset-0 after:content-['']"
                     data-attr="vision-watch-feed-card-body"
                 >
-                    <h3 className="text-sm font-semibold m-0 line-clamp-2">{headline?.title ?? scannerName}</h3>
+                    <h3 className="text-sm font-semibold m-0 line-clamp-2">
+                        {/* The tag hides with the thumbnail on narrow cards, so screen readers get it here. */}
+                        {!observation.viewed && <span className="sr-only">New: </span>}
+                        {headline?.title ?? scannerName}
+                    </h3>
                 </Link>
                 <div className="flex flex-wrap items-center gap-1 text-xs text-muted">
                     {person &&