From f4750fd99b0101f818175a667ceb9cd4f32042a4 Mon Sep 17 00:00:00 2001
From: Michael Matloka <michael@matloka.com>
Date: Fri, 10 Apr 2026 13:22:34 +0200
Subject: [PATCH 1/3] feat(inbox): support session problem signals

Add dedicated rendering for session_problem signals in the inbox detail
pane, including video playback and an "Events around the problem" table
showing user-behavior events with human-readable names and millisecond
timestamps.
---
 apps/code/src/renderer/api/posthogClient.ts   |  39 +++
 .../components/detail/ReportDetailPane.tsx    | 126 +++-----
 .../inbox/components/detail/SignalCard.tsx    | 269 +++++++++++++++++-
 3 files changed, 342 insertions(+), 92 deletions(-)

diff --git a/apps/code/src/renderer/api/posthogClient.ts b/apps/code/src/renderer/api/posthogClient.ts
index d53ed8779..ca45ffae6 100644
--- a/apps/code/src/renderer/api/posthogClient.ts
+++ b/apps/code/src/renderer/api/posthogClient.ts
@@ -1990,4 +1990,43 @@ export class PostHogAPIClient {
       );
     }
   }
+
+  /** Find an exported asset by session recording ID. */
+  async findExportBySessionRecordingId(
+    projectId: number,
+    sessionRecordingId: string,
+  ): Promise<number | null> {
+    const urlPath = `/api/projects/${projectId}/exports/`;
+    const url = new URL(`${this.api.baseUrl}${urlPath}`);
+    url.searchParams.set("session_recording_id", sessionRecordingId);
+    url.searchParams.set("export_format", "video/mp4");
+    const response = await this.api.fetcher.fetch({
+      method: "get",
+      url,
+      path: urlPath,
+    });
+    if (!response.ok) return null;
+    const data = (await response.json()) as {
+      results?: Array<{ id: number; has_content: boolean }>;
+    };
+    const match = data.results?.find((e) => e.has_content);
+    return match?.id ?? null;
+  }
+
+  /** Get the presigned content URL for an exported asset (e.g. rasterized recording). */
+  async getExportContentUrl(
+    projectId: number,
+    exportId: number,
+  ): Promise<string | null> {
+    const urlPath = `/api/projects/${projectId}/exports/${exportId}/content/`;
+    const url = new URL(`${this.api.baseUrl}${urlPath}`);
+    const response = await this.api.fetcher.fetch({
+      method: "get",
+      url,
+      path: urlPath,
+    });
+    if (!response.ok) return null;
+    const blob = await response.blob();
+    return URL.createObjectURL(blob);
+  }
 }
diff --git a/apps/code/src/renderer/features/inbox/components/detail/ReportDetailPane.tsx b/apps/code/src/renderer/features/inbox/components/detail/ReportDetailPane.tsx
index 6831df750..a43f7b69f 100644
--- a/apps/code/src/renderer/features/inbox/components/detail/ReportDetailPane.tsx
+++ b/apps/code/src/renderer/features/inbox/components/detail/ReportDetailPane.tsx
@@ -14,7 +14,6 @@ import {
   ArrowSquareOutIcon,
   CaretDownIcon,
   CaretRightIcon,
-  ClockIcon,
   Cloud as CloudIcon,
   EyeIcon,
   GitPullRequestIcon,
@@ -37,8 +36,6 @@ import type {
   PriorityJudgmentArtefact,
   SignalFindingArtefact,
   SignalReport,
-  SignalReportArtefact,
-  SignalReportArtefactsResponse,
   SuggestedReviewer,
   SuggestedReviewersArtefact,
 } from "@shared/types";
@@ -69,23 +66,6 @@ function isSuggestedReviewerRowMe(
 
 // ── Helpers ─────────────────────────────────────────────────────────────────
 
-function getArtefactsUnavailableMessage(
-  reason: SignalReportArtefactsResponse["unavailableReason"],
-): string {
-  switch (reason) {
-    case "forbidden":
-      return "Evidence could not be loaded with the current API permissions.";
-    case "not_found":
-      return "Evidence endpoint is unavailable for this signal in this environment.";
-    case "invalid_payload":
-      return "Evidence format was unexpected, so no artefacts could be shown.";
-    case "request_failed":
-      return "Evidence is temporarily unavailable. You can still create a task from this report.";
-    default:
-      return "Evidence is currently unavailable for this signal.";
-  }
-}
-
 function DetailRow({
   label,
   value,
@@ -161,10 +141,6 @@ export function ReportDetailPane({ report, onClose }: ReportDetailPaneProps) {
   });
   const allArtefacts = artefactsQuery.data?.results ?? [];
 
-  const videoSegments = allArtefacts.filter(
-    (a): a is SignalReportArtefact => a.type === "video_segment",
-  );
-
   const suggestedReviewers = useMemo(() => {
     const reviewerArtefact = allArtefacts.find(
       (a): a is SuggestedReviewersArtefact => a.type === "suggested_reviewers",
@@ -203,17 +179,24 @@ export function ReportDetailPane({ report, onClose }: ReportDetailPaneProps) {
   }, [allArtefacts]);
 
   const artefactsUnavailableReason = artefactsQuery.data?.unavailableReason;
-  const showArtefactsUnavailable =
-    !artefactsQuery.isLoading &&
-    (!!artefactsQuery.error || !!artefactsUnavailableReason);
-  const artefactsUnavailableMessage = artefactsQuery.error
-    ? "Evidence could not be loaded right now. You can still create a task from this report."
-    : getArtefactsUnavailableMessage(artefactsUnavailableReason);
+  void artefactsUnavailableReason; // TODO: wire up unavailable UI
 
   const signalsQuery = useInboxReportSignals(report.id, {
     enabled: true,
   });
-  const signals = signalsQuery.data?.signals ?? [];
+  const allSignals = signalsQuery.data?.signals ?? [];
+  const sessionProblemSignals = allSignals.filter(
+    (s) =>
+      s.source_product === "session_replay" &&
+      s.source_type === "session_problem",
+  );
+  const signals = allSignals.filter(
+    (s) =>
+      !(
+        s.source_product === "session_replay" &&
+        s.source_type === "session_problem"
+      ),
+  );
 
   // ── Task creation ───────────────────────────────────────────────────────
   const { navigateToTask } = useNavigationStore();
@@ -524,67 +507,28 @@ export function ReportDetailPane({ report, onClose }: ReportDetailPaneProps) {
             </Text>
           )}
 
-          {/* ── Evidence (session segments) ─────────────────────── */}
-          <Box>
-            <Text size="1" weight="medium" className="block text-[13px]" mb="2">
-              Evidence
-            </Text>
-            {artefactsQuery.isLoading && (
-              <Text size="1" color="gray" className="block text-[12px]">
-                Loading evidence...
-              </Text>
-            )}
-            {showArtefactsUnavailable && (
-              <Text size="1" color="gray" className="block text-[12px]">
-                {artefactsUnavailableMessage}
+          {/* ── Session problem evidence ─────────────────────────── */}
+          {sessionProblemSignals.length > 0 && (
+            <Box>
+              <Text
+                size="1"
+                weight="medium"
+                className="block text-[13px]"
+                mb="2"
+              >
+                Evidence ({sessionProblemSignals.length})
               </Text>
-            )}
-            {!artefactsQuery.isLoading &&
-              !showArtefactsUnavailable &&
-              videoSegments.length === 0 && (
-                <Text size="1" color="gray" className="block text-[12px]">
-                  No session segments available for this report.
-                </Text>
-              )}
-            <Flex direction="column" gap="1">
-              {videoSegments.map((artefact) => (
-                <Box
-                  key={artefact.id}
-                  className="rounded border border-gray-6 bg-gray-1 p-2"
-                >
-                  <Text
-                    size="1"
-                    className="whitespace-pre-wrap text-pretty break-words text-[12px]"
-                  >
-                    {artefact.content.content}
-                  </Text>
-                  <Flex align="center" justify="between" mt="1" gap="2">
-                    <Flex align="center" gap="1">
-                      <ClockIcon size={12} className="text-gray-9" />
-                      <Text size="1" color="gray" className="text-[12px]">
-                        {artefact.content.start_time
-                          ? new Date(
-                              artefact.content.start_time,
-                            ).toLocaleString()
-                          : "Unknown time"}
-                      </Text>
-                    </Flex>
-                    {replayBaseUrl && artefact.content.session_id && (
-                      <a
-                        href={`${replayBaseUrl}/${artefact.content.session_id}`}
-                        target="_blank"
-                        rel="noreferrer"
-                        className="inline-flex items-center gap-1 text-[12px] text-gray-11 hover:text-gray-12"
-                      >
-                        View replay
-                        <ArrowSquareOutIcon size={12} />
-                      </a>
-                    )}
-                  </Flex>
-                </Box>
-              ))}
-            </Flex>
-          </Box>
+              <Flex direction="column" gap="2">
+                {sessionProblemSignals.map((signal) => (
+                  <SignalCard
+                    key={signal.signal_id}
+                    signal={signal}
+                    finding={signalFindings.get(signal.signal_id)}
+                  />
+                ))}
+              </Flex>
+            </Box>
+          )}
         </Flex>
       </ScrollArea>
 
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 66532960c..8fd2be074 100644
--- a/apps/code/src/renderer/features/inbox/components/detail/SignalCard.tsx
+++ b/apps/code/src/renderer/features/inbox/components/detail/SignalCard.tsx
@@ -1,5 +1,7 @@
+import { useAuthStateValue } from "@features/auth/hooks/authQueries";
 import { MarkdownRenderer } from "@features/editor/components/MarkdownRenderer";
 import { SOURCE_PRODUCT_META } from "@features/inbox/components/utils/source-product-icons";
+import { useAuthenticatedQuery } from "@hooks/useAuthenticatedQuery";
 import {
   ArrowSquareOutIcon,
   CaretDownIcon,
@@ -10,7 +12,7 @@ import {
 } from "@phosphor-icons/react";
 import { Badge, Box, Flex, Text } from "@radix-ui/themes";
 import type { Signal, SignalFindingContent } from "@shared/types";
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 const COLLAPSE_THRESHOLD = 300;
 
@@ -33,6 +35,12 @@ function signalCardSourceLine(signal: {
       ERROR_TRACKING_TYPE_LABELS[source_type] ?? source_type.replace(/_/g, " ");
     return `Error tracking · ${typeLabel}`;
   }
+  if (
+    source_product === "session_replay" &&
+    source_type === "session_problem"
+  ) {
+    return "Session replay · Session problem";
+  }
   if (
     source_product === "session_replay" &&
     source_type === "session_segment_cluster"
@@ -91,6 +99,27 @@ interface LlmEvalExtra {
   provider?: string;
 }
 
+interface SessionProblemEventEntry {
+  event: string;
+  timestamp: string;
+  current_url?: string;
+  event_type?: string;
+  interaction_text?: string;
+}
+
+interface SessionProblemExtra {
+  session_id?: string;
+  segment_title?: string;
+  start_time?: string;
+  end_time?: string;
+  problem_type?: string;
+  distinct_id?: string;
+  session_start_time?: string;
+  session_end_time?: string;
+  exported_asset_id?: number;
+  event_history?: SessionProblemEventEntry[];
+}
+
 interface ErrorTrackingExtra {
   fingerprint?: string;
 }
@@ -173,6 +202,14 @@ function isLlmEvalExtra(
   return "evaluation_id" in extra && "trace_id" in extra;
 }
 
+function isSessionProblemExtra(
+  extra: Record<string, unknown>,
+): extra is Record<string, unknown> & SessionProblemExtra {
+  return (
+    "session_id" in extra && "problem_type" in extra && "segment_title" in extra
+  );
+}
+
 function isErrorTrackingExtra(
   extra: Record<string, unknown>,
 ): extra is Record<string, unknown> & ErrorTrackingExtra {
@@ -476,6 +513,221 @@ function LlmEvalSignalCard({
   );
 }
 
+const PROBLEM_TYPE_LABELS: Record<
+  string,
+  { label: string; color: "red" | "orange" }
+> = {
+  blocking_exception: { label: "Blocking exception", color: "red" },
+  non_blocking_exception: { label: "Non-blocking exception", color: "orange" },
+  abandonment: { label: "Abandonment", color: "red" },
+  confusion: { label: "Confusion", color: "orange" },
+  failure: { label: "Failure", color: "red" },
+};
+
+// Human-readable labels for common PostHog dollar-prefixed event names
+const EVENT_DISPLAY_NAMES: Record<string, string> = {
+  $pageview: "Pageview",
+  $autocapture: "Autocapture",
+  $exception: "Exception",
+  $rageclick: "Rageclick",
+  $dead_click: "Dead click",
+  $screen: "Screen",
+  $csp_violation: "CSP violation",
+  $pageleave: "Pageleave",
+};
+
+function eventDisplayName(raw: string): string {
+  return EVENT_DISPLAY_NAMES[raw] ?? raw;
+}
+
+function EventHistoryTable({ events }: { events: SessionProblemEventEntry[] }) {
+  return (
+    <Box className="min-w-0 flex-1">
+      <Text
+        size="1"
+        weight="medium"
+        className="mb-1 block text-[11px]"
+        style={{ color: "var(--gray-10)" }}
+      >
+        Events around the problem
+      </Text>
+      <Box className="max-h-[180px] overflow-y-auto rounded border border-gray-5 bg-gray-2">
+        <table className="w-full text-[11px]">
+          <tbody>
+            {events.map((entry) => (
+              <tr
+                key={entry.timestamp}
+                className="border-gray-4 border-b last:border-b-0"
+              >
+                <td
+                  className="whitespace-nowrap px-1.5 py-1 align-top font-mono"
+                  style={{ color: "var(--gray-9)" }}
+                >
+                  {entry.timestamp}
+                </td>
+                <td className="px-1.5 py-1 align-top">
+                  <span style={{ color: "var(--gray-12)" }}>
+                    {eventDisplayName(entry.event)}
+                  </span>
+                  {entry.event_type ? (
+                    <span className="ml-1" style={{ color: "var(--gray-9)" }}>
+                      [{entry.event_type}]
+                    </span>
+                  ) : null}
+                  {entry.interaction_text ? (
+                    <span className="ml-1" style={{ color: "var(--gray-11)" }}>
+                      &quot;{entry.interaction_text}&quot;
+                    </span>
+                  ) : null}
+                </td>
+                {entry.current_url ? (
+                  <td
+                    className="max-w-[200px] truncate px-1.5 py-1 align-top"
+                    style={{ color: "var(--gray-9)" }}
+                    title={entry.current_url}
+                  >
+                    {entry.current_url}
+                  </td>
+                ) : null}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </Box>
+    </Box>
+  );
+}
+
+function SessionProblemSignalCard({
+  signal,
+  extra,
+  verified,
+  codePaths,
+  dataQueried,
+}: {
+  signal: Signal;
+  extra: SessionProblemExtra;
+  verified?: boolean;
+  codePaths?: string[];
+  dataQueried?: string;
+}) {
+  const problemInfo = extra.problem_type
+    ? (PROBLEM_TYPE_LABELS[extra.problem_type] ?? {
+        label: extra.problem_type.replace(/_/g, " "),
+        color: "orange" as const,
+      })
+    : null;
+  const hasEventHistory = extra.event_history && extra.event_history.length > 0;
+
+  return (
+    <Box className="min-w-0 overflow-hidden rounded-lg border border-gray-6 bg-gray-1 p-3">
+      <SignalCardHeader signal={signal} verified={verified} />
+      <CollapsibleBody body={signal.content} />
+
+      {extra.session_id && (
+        <SessionRecordingVideo
+          exportedAssetId={extra.exported_asset_id}
+          sessionId={extra.session_id}
+        />
+      )}
+      {hasEventHistory && (
+        <Box mt="2">
+          <EventHistoryTable events={extra.event_history ?? []} />
+        </Box>
+      )}
+
+      <Flex
+        align="center"
+        gap="2"
+        wrap="wrap"
+        mt="2"
+        className="text-[11px]"
+        style={{ color: "var(--gray-10)" }}
+      >
+        {problemInfo && (
+          <Badge
+            variant="soft"
+            color={problemInfo.color}
+            size="1"
+            className="text-[11px]"
+          >
+            {problemInfo.label}
+          </Badge>
+        )}
+        {extra.distinct_id && (
+          <Text className="font-mono text-[11px]">
+            {extra.distinct_id.slice(0, 10)}…
+          </Text>
+        )}
+        {extra.start_time && extra.end_time && (
+          <>
+            <span>·</span>
+            <span>
+              {extra.start_time} – {extra.end_time}
+            </span>
+          </>
+        )}
+      </Flex>
+      <CodePathsCollapsible paths={codePaths ?? []} />
+      <DataQueriedCollapsible text={dataQueried ?? ""} />
+    </Box>
+  );
+}
+
+function SessionRecordingVideo({
+  exportedAssetId,
+  sessionId,
+}: {
+  exportedAssetId?: number;
+  sessionId: string;
+}) {
+  const projectId = useAuthStateValue((state) => state.projectId);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const videoQuery = useAuthenticatedQuery<string | null>(
+    ["export-video", projectId, exportedAssetId, sessionId],
+    async (client) => {
+      if (!projectId) return null;
+      let assetId: number | null = exportedAssetId ?? null;
+      // If no asset ID in the signal, look up the export by session_id
+      if (assetId == null) {
+        assetId = await client.findExportBySessionRecordingId(
+          projectId,
+          sessionId,
+        );
+        if (assetId == null) return null;
+      }
+      return client.getExportContentUrl(projectId, assetId);
+    },
+    { enabled: !!projectId, staleTime: Infinity },
+  );
+
+  if (videoQuery.isError || videoQuery.data === null) return null;
+  if (videoQuery.isLoading || videoQuery.data === undefined) {
+    return (
+      <Box
+        mt="2"
+        className="flex h-24 items-center justify-center rounded bg-gray-3 text-[11px] text-gray-9"
+      >
+        Loading recording…
+      </Box>
+    );
+  }
+
+  return (
+    <Box mt="2" className="overflow-hidden rounded">
+      <video
+        ref={videoRef}
+        src={videoQuery.data}
+        controls
+        muted
+        preload="metadata"
+        className="w-full rounded"
+        style={{ maxHeight: 300 }}
+      />
+    </Box>
+  );
+}
+
 function ErrorTrackingSignalCard({
   signal,
   verified,
@@ -609,6 +861,21 @@ export function SignalCard({
   const codePaths = finding?.relevant_code_paths ?? [];
   const dataQueried = finding?.data_queried ?? "";
 
+  if (
+    signal.source_product === "session_replay" &&
+    signal.source_type === "session_problem" &&
+    isSessionProblemExtra(extra)
+  ) {
+    return (
+      <SessionProblemSignalCard
+        signal={signal}
+        extra={extra}
+        verified={verified}
+        codePaths={codePaths}
+        dataQueried={dataQueried}
+      />
+    );
+  }
   if (
     signal.source_product === "error_tracking" &&
     isErrorTrackingExtra(extra)

From 8dc4e6ce7738a87a6d2b8dbb896cfe13a8edb3d4 Mon Sep 17 00:00:00 2001
From: Michael Matloka <michael@matloka.com>
Date: Fri, 17 Apr 2026 17:17:25 +0200
Subject: [PATCH 2/3] Drop event_history

---
 .../inbox/components/detail/SignalCard.tsx    | 89 -------------------
 1 file changed, 89 deletions(-)

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 8fd2be074..c9c09b73e 100644
--- a/apps/code/src/renderer/features/inbox/components/detail/SignalCard.tsx
+++ b/apps/code/src/renderer/features/inbox/components/detail/SignalCard.tsx
@@ -99,14 +99,6 @@ interface LlmEvalExtra {
   provider?: string;
 }
 
-interface SessionProblemEventEntry {
-  event: string;
-  timestamp: string;
-  current_url?: string;
-  event_type?: string;
-  interaction_text?: string;
-}
-
 interface SessionProblemExtra {
   session_id?: string;
   segment_title?: string;
@@ -117,7 +109,6 @@ interface SessionProblemExtra {
   session_start_time?: string;
   session_end_time?: string;
   exported_asset_id?: number;
-  event_history?: SessionProblemEventEntry[];
 }
 
 interface ErrorTrackingExtra {
@@ -524,80 +515,6 @@ const PROBLEM_TYPE_LABELS: Record<
   failure: { label: "Failure", color: "red" },
 };
 
-// Human-readable labels for common PostHog dollar-prefixed event names
-const EVENT_DISPLAY_NAMES: Record<string, string> = {
-  $pageview: "Pageview",
-  $autocapture: "Autocapture",
-  $exception: "Exception",
-  $rageclick: "Rageclick",
-  $dead_click: "Dead click",
-  $screen: "Screen",
-  $csp_violation: "CSP violation",
-  $pageleave: "Pageleave",
-};
-
-function eventDisplayName(raw: string): string {
-  return EVENT_DISPLAY_NAMES[raw] ?? raw;
-}
-
-function EventHistoryTable({ events }: { events: SessionProblemEventEntry[] }) {
-  return (
-    <Box className="min-w-0 flex-1">
-      <Text
-        size="1"
-        weight="medium"
-        className="mb-1 block text-[11px]"
-        style={{ color: "var(--gray-10)" }}
-      >
-        Events around the problem
-      </Text>
-      <Box className="max-h-[180px] overflow-y-auto rounded border border-gray-5 bg-gray-2">
-        <table className="w-full text-[11px]">
-          <tbody>
-            {events.map((entry) => (
-              <tr
-                key={entry.timestamp}
-                className="border-gray-4 border-b last:border-b-0"
-              >
-                <td
-                  className="whitespace-nowrap px-1.5 py-1 align-top font-mono"
-                  style={{ color: "var(--gray-9)" }}
-                >
-                  {entry.timestamp}
-                </td>
-                <td className="px-1.5 py-1 align-top">
-                  <span style={{ color: "var(--gray-12)" }}>
-                    {eventDisplayName(entry.event)}
-                  </span>
-                  {entry.event_type ? (
-                    <span className="ml-1" style={{ color: "var(--gray-9)" }}>
-                      [{entry.event_type}]
-                    </span>
-                  ) : null}
-                  {entry.interaction_text ? (
-                    <span className="ml-1" style={{ color: "var(--gray-11)" }}>
-                      &quot;{entry.interaction_text}&quot;
-                    </span>
-                  ) : null}
-                </td>
-                {entry.current_url ? (
-                  <td
-                    className="max-w-[200px] truncate px-1.5 py-1 align-top"
-                    style={{ color: "var(--gray-9)" }}
-                    title={entry.current_url}
-                  >
-                    {entry.current_url}
-                  </td>
-                ) : null}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </Box>
-    </Box>
-  );
-}
-
 function SessionProblemSignalCard({
   signal,
   extra,
@@ -617,7 +534,6 @@ function SessionProblemSignalCard({
         color: "orange" as const,
       })
     : null;
-  const hasEventHistory = extra.event_history && extra.event_history.length > 0;
 
   return (
     <Box className="min-w-0 overflow-hidden rounded-lg border border-gray-6 bg-gray-1 p-3">
@@ -630,11 +546,6 @@ function SessionProblemSignalCard({
           sessionId={extra.session_id}
         />
       )}
-      {hasEventHistory && (
-        <Box mt="2">
-          <EventHistoryTable events={extra.event_history ?? []} />
-        </Box>
-      )}
 
       <Flex
         align="center"

From 68c55b9f8fd4854d72eccdfa301377b2baa2dd56 Mon Sep 17 00:00:00 2001
From: Michael Matloka <michael@matloka.com>
Date: Fri, 17 Apr 2026 18:07:21 +0200
Subject: [PATCH 3/3] Update SignalCard.tsx

---
 .../components/detail/ReportDetailPane.tsx    |  9 -----
 .../inbox/components/detail/SignalCard.tsx    | 36 +++++++++++++++++++
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/apps/code/src/renderer/features/inbox/components/detail/ReportDetailPane.tsx b/apps/code/src/renderer/features/inbox/components/detail/ReportDetailPane.tsx
index a43f7b69f..248500546 100644
--- a/apps/code/src/renderer/features/inbox/components/detail/ReportDetailPane.tsx
+++ b/apps/code/src/renderer/features/inbox/components/detail/ReportDetailPane.tsx
@@ -1,5 +1,4 @@
 import { Badge } from "@components/ui/Badge";
-import { useAuthStateValue } from "@features/auth/hooks/authQueries";
 import { GitHubRepoPicker } from "@features/folder-picker/components/GitHubRepoPicker";
 import {
   useInboxReportArtefacts,
@@ -39,7 +38,6 @@ import type {
   SuggestedReviewer,
   SuggestedReviewersArtefact,
 } from "@shared/types";
-import { getCloudUrlFromRegion } from "@shared/utils/urls";
 import { useNavigationStore } from "@stores/navigationStore";
 import {
   type ReactNode,
@@ -126,14 +124,7 @@ interface ReportDetailPaneProps {
 }
 
 export function ReportDetailPane({ report, onClose }: ReportDetailPaneProps) {
-  // ── Auth / URLs ─────────────────────────────────────────────────────────
-  const cloudRegion = useAuthStateValue((state) => state.cloudRegion);
-  const projectId = useAuthStateValue((state) => state.projectId);
   const { data: me } = useMeQuery();
-  const replayBaseUrl =
-    cloudRegion && projectId
-      ? `${getCloudUrlFromRegion(cloudRegion)}/project/${projectId}/replay`
-      : null;
 
   // ── Report data ─────────────────────────────────────────────────────────
   const artefactsQuery = useInboxReportArtefacts(report.id, {
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 c9c09b73e..03fee248a 100644
--- a/apps/code/src/renderer/features/inbox/components/detail/SignalCard.tsx
+++ b/apps/code/src/renderer/features/inbox/components/detail/SignalCard.tsx
@@ -108,6 +108,8 @@ interface SessionProblemExtra {
   distinct_id?: string;
   session_start_time?: string;
   session_end_time?: string;
+  session_duration?: number;
+  session_active_seconds?: number;
   exported_asset_id?: number;
 }
 
@@ -515,6 +517,16 @@ const PROBLEM_TYPE_LABELS: Record<
   failure: { label: "Failure", color: "red" },
 };
 
+function formatSessionDuration(seconds: number): string {
+  if (seconds < 60) return `${Math.round(seconds)}s`;
+  const mins = Math.floor(seconds / 60);
+  const secs = Math.round(seconds % 60);
+  if (mins < 60) return secs > 0 ? `${mins}m ${secs}s` : `${mins}m`;
+  const hrs = Math.floor(mins / 60);
+  const remainMins = mins % 60;
+  return remainMins > 0 ? `${hrs}h ${remainMins}m` : `${hrs}h`;
+}
+
 function SessionProblemSignalCard({
   signal,
   extra,
@@ -538,6 +550,11 @@ function SessionProblemSignalCard({
   return (
     <Box className="min-w-0 overflow-hidden rounded-lg border border-gray-6 bg-gray-1 p-3">
       <SignalCardHeader signal={signal} verified={verified} />
+      {extra.segment_title && (
+        <Text size="1" weight="medium" mt="1" className="text-gray-11" as="p">
+          {extra.segment_title}
+        </Text>
+      )}
       <CollapsibleBody body={signal.content} />
 
       {extra.session_id && (
@@ -578,6 +595,25 @@ function SessionProblemSignalCard({
             </span>
           </>
         )}
+        {extra.session_duration != null && (
+          <>
+            <span>·</span>
+            <span>{formatSessionDuration(extra.session_duration)} session</span>
+          </>
+        )}
+        {extra.session_active_seconds != null &&
+          extra.session_duration != null &&
+          extra.session_duration > 0 && (
+            <>
+              <span>·</span>
+              <span>
+                {Math.round(
+                  (extra.session_active_seconds / extra.session_duration) * 100,
+                )}
+                % active
+              </span>
+            </>
+          )}
       </Flex>
       <CodePathsCollapsible paths={codePaths ?? []} />
       <DataQueriedCollapsible text={dataQueried ?? ""} />