From bb4abd8208c61444be883208d1a54bd687b138f5 Mon Sep 17 00:00:00 2001
From: Michael Matloka <michael@matloka.com>
Date: Tue, 21 Apr 2026 12:09:51 +0200
Subject: [PATCH] feat(inbox): add session problem signal card with moment
 preview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a SessionProblemSignalCard that displays:
- Inline GIF preview of the problematic moment (from moment_preview_url)
- Problem type badge (color-coded by severity)
- Segment title, time range, user context
- Source line label "Session replay · Session problem"

Depends on PostHog/posthog#55463 for the backend moment preview rasterization.
---
 .../inbox/components/detail/SignalCard.tsx    | 68 ++++++++++++++++++-
 1 file changed, 67 insertions(+), 1 deletion(-)

diff --git a/apps/code/src/renderer/features/inbox/components/detail/SignalCard.tsx b/apps/code/src/renderer/features/inbox/components/detail/SignalCard.tsx
index 864383cde..989279430 100644
--- a/apps/code/src/renderer/features/inbox/components/detail/SignalCard.tsx
+++ b/apps/code/src/renderer/features/inbox/components/detail/SignalCard.tsx
@@ -111,6 +111,8 @@ interface SessionProblemExtra {
   session_duration?: number;
   session_active_seconds?: number;
   exported_asset_id?: number;
+  moment_preview_url?: string;
+  moment_preview_asset_id?: number;
 }
 
 interface ErrorTrackingExtra {
@@ -566,7 +568,17 @@ function SessionProblemSignalCard({
       )}
       <CollapsibleBody body={signal.content} />
 
-      {extra.session_id && (
+      {/* Moment preview GIF — quick visual of the problematic period */}
+      {extra.moment_preview_url && (
+        <MomentPreview
+          url={extra.moment_preview_url}
+          alt={`Session moment: ${extra.segment_title ?? "problem"}`}
+          startTime={extra.start_time}
+          endTime={extra.end_time}
+        />
+      )}
+
+      {extra.session_id && !extra.moment_preview_url && (
         <SessionRecordingVideo
           exportedAssetId={extra.exported_asset_id}
           sessionId={extra.session_id}
@@ -630,6 +642,60 @@ function SessionProblemSignalCard({
   );
 }
 
+function MomentPreview({
+  url,
+  alt,
+  startTime,
+  endTime,
+}: {
+  url: string;
+  alt: string;
+  startTime?: string;
+  endTime?: string;
+}) {
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState(false);
+
+  if (error) return null;
+
+  return (
+    <Box className="relative mt-2 overflow-hidden rounded-md border border-gray-5 bg-gray-2">
+      {!loaded && (
+        <Flex align="center" justify="center" className="absolute inset-0 z-10">
+          <Text
+            size="1"
+            className="text-[11px]"
+            style={{ color: "var(--gray-9)" }}
+          >
+            Loading preview…
+          </Text>
+        </Flex>
+      )}
+      <img
+        src={url}
+        alt={alt}
+        className="w-full rounded-md object-contain"
+        style={{
+          maxHeight: 200,
+          opacity: loaded ? 1 : 0,
+          transition: "opacity 150ms ease-in",
+        }}
+        onLoad={() => setLoaded(true)}
+        onError={() => setError(true)}
+      />
+      {startTime && endTime && (
+        <Flex
+          align="center"
+          gap="1"
+          className="absolute bottom-1.5 left-1.5 rounded bg-black/70 px-1.5 py-0.5 font-mono text-[10px] text-white"
+        >
+          {startTime} – {endTime}
+        </Flex>
+      )}
+    </Box>
+  );
+}
+
 function SessionRecordingVideo({
   exportedAssetId,
   sessionId,