feat(inbox): add read-only detail view for dismissed reports

Dismissed cards now link into a detail view (summary + evidence) with a single
Restore action; no triage affordances since the report is out of the pipeline.

- DismissedReportDetail reuses InboxReportDetailGate + InboxDetailFrame.
- InboxDetailFrame gains a showDismiss opt-out (a dismissed report shouldn't
  show 'Dismiss'); the gate skips OPENED/CLOSED engagement tracking for the
  dismissed tab (its rank would be measured against the wrong list).
- Routes restructured: dismissed.tsx is now an Outlet layout, with
  dismissed.index (list) and dismissed.$reportId (detail).
- The route loader resolves the cached report from the dismissed list cache, so
  navigation renders instantly; the detail's own fetch depends on the backend
  serving suppressed reports on retrieve/signals (PostHog/posthog#64019).

Author: andrewm4894

packages/ui/src/features/inbox/CLAUDE.md

@@ -27,12 +27,16 @@ Inbox has four tabs and one reviewer-scope control:
 Detail pages live under the same tab: `/code/inbox/<tab>/$reportId`.
 
 The Dismissed tab is the exception: suppressed reports are excluded from the
-main pipeline query and from the report detail endpoint, so the tab fetches
-them with a dedicated `status=suppressed` query (`useInboxDismissedReports`) and
-its cards do **not** link to a detail page. Each card can be restored to the
-inbox via `useInboxRestoreReport`, which reuses the `state` action's `potential`
-("reopen") transition — the only reopen path the backend exposes. The reviewer
-scope control is hidden on this tab since the dismissed list is not scoped.
+main pipeline query, so the tab fetches them with a dedicated `status=suppressed`
+query (`useInboxDismissedReports`). Its detail view (`DismissedReportDetail`) is
+read-only — summary + evidence + a single Restore action, no triage affordances —
+and depends on the backend serving suppressed reports on the `retrieve`/`signals`
+read paths (PostHog/posthog#64019). Restore uses `useInboxRestoreReport`, which
+reuses the `state` action's `potential` ("reopen") transition — the only reopen
+path the backend exposes. The reviewer scope control is hidden on this tab since
+the dismissed list is not scoped, and the tab carries no count badge. The
+Dismissed detail is **not** a tracked `InboxDetailTab` (no OPENED/CLOSED
+engagement events), since its rank would be measured against the wrong list.
 
 Responder configuration is **not** an Inbox tab. It is the top-level Responders sidebar item at `/code/agents`. The legacy `/code/inbox/agents` route redirects there.
 

packages/ui/src/features/inbox/components/DismissedReportCard.tsx

@@ -16,6 +16,7 @@ import { PriorityMonogram } from "@posthog/ui/features/inbox/components/Priority
 import { hasKnownSourceProduct } from "@posthog/ui/features/inbox/components/utils/source-product-icons";
 import { Button as UiButton } from "@posthog/ui/primitives/Button";
 import { Flex, Text } from "@radix-ui/themes";
+import { Link } from "@tanstack/react-router";
 
 interface DismissedReportCardProps {
   report: SignalReport;
@@ -24,9 +25,8 @@ interface DismissedReportCardProps {
 }
 
 /**
- * Read-only card for the Dismissed tab. Suppressed reports have no reachable
- * detail page (the backend detail endpoint excludes them), so the card does not
- * link out — its only action is restoring the report back to the inbox.
+ * Card for the Dismissed tab. Links into the read-only dismissed detail view;
+ * the Restore button (right column) stops propagation so it doesn't navigate.
  */
 export function DismissedReportCard({
   report,
@@ -56,7 +56,12 @@ export function DismissedReportCard({
         "group flex w-full items-stretch gap-3 rounded-(--radius-2) border border-(--gray-6) border-dashed bg-(--color-panel-solid) px-4 py-3.5 opacity-90 transition duration-150 hover:border-(--gray-7) hover:bg-(--gray-2)",
       )}
     >
-      <div className="flex min-w-0 flex-1 items-start gap-3">
+      <Link
+        to="/code/inbox/dismissed/$reportId"
+        params={{ reportId: report.id }}
+        preload="intent"
+        className="flex min-w-0 flex-1 items-start gap-3 text-left text-inherit no-underline focus-visible:outline-none"
+      >
         <PriorityMonogram priority={report.priority} />
 
         <Flex direction="column" gap="1.5" className="min-w-0 flex-1">
@@ -92,7 +97,7 @@ export function DismissedReportCard({
             </Flex>
           )}
         </Flex>
-      </div>
+      </Link>
 
       <Flex
         direction="column"

packages/ui/src/features/inbox/components/DismissedReportDetail.tsx

@@ -0,0 +1,83 @@
+import {
+  ArrowCounterClockwiseIcon,
+  FileTextIcon,
+  MagnifyingGlassIcon,
+} from "@phosphor-icons/react";
+import { Button } from "@posthog/quill";
+import type { SignalReport } from "@posthog/shared/types";
+import { InboxDetailFrame } from "@posthog/ui/features/inbox/components/InboxDetailFrame";
+import { InboxReportDetailGate } from "@posthog/ui/features/inbox/components/InboxReportDetailGate";
+import { useInboxRestoreReport } from "@posthog/ui/features/inbox/hooks/useInboxRestoreReport";
+import { Spinner } from "@radix-ui/themes";
+import { useNavigate } from "@tanstack/react-router";
+
+interface DismissedReportDetailProps {
+  reportId: string;
+  cachedReport?: SignalReport | null;
+}
+
+/**
+ * Detail view for a dismissed (suppressed) report. Read-only re-read of what the
+ * report was — summary + evidence — with a single Restore action. No triage
+ * affordances (dismiss, discuss, create PR, reviewers): the report is out of the
+ * pipeline until it's restored.
+ */
+export function DismissedReportDetail({
+  reportId,
+  cachedReport = null,
+}: DismissedReportDetailProps) {
+  return (
+    <InboxReportDetailGate
+      reportId={reportId}
+      cachedReport={cachedReport}
+      backTo="/code/inbox/dismissed"
+      backLabel="Back to dismissed"
+      missingCopy="This report couldn't be found. It may have been deleted."
+    >
+      {(report) => <DismissedReportDetailContent report={report} />}
+    </InboxReportDetailGate>
+  );
+}
+
+function DismissedReportDetailContent({ report }: { report: SignalReport }) {
+  return (
+    <InboxDetailFrame
+      report={report}
+      backTo="/code/inbox/dismissed"
+      backLabel="Back to dismissed"
+      fallbackTitle="Untitled report"
+      showDismiss={false}
+      primaryAction={<RestoreReportButton report={report} />}
+      summarySection={{ Icon: FileTextIcon, title: "Summary" }}
+      evidenceSection={{ Icon: MagnifyingGlassIcon, title: "Evidence" }}
+    />
+  );
+}
+
+function RestoreReportButton({ report }: { report: SignalReport }) {
+  const restore = useInboxRestoreReport();
+  const navigate = useNavigate();
+
+  return (
+    <Button
+      type="button"
+      variant="primary"
+      size="sm"
+      disabled={restore.isPending}
+      className="gap-1"
+      title="Restore this report to the inbox"
+      onClick={() =>
+        restore.mutate(report.id, {
+          onSuccess: () => navigate({ to: "/code/inbox/dismissed" }),
+        })
+      }
+    >
+      {restore.isPending ? (
+        <Spinner size="1" />
+      ) : (
+        <ArrowCounterClockwiseIcon size={12} />
+      )}
+      Restore
+    </Button>
+  );
+}

packages/ui/src/features/inbox/components/InboxDetailFrame.tsx

@@ -27,8 +27,13 @@ import type { ComponentType, ReactNode } from "react";
 interface InboxDetailFrameProps {
   report: SignalReport;
   /** List route for the back-link (e.g. "/code/inbox/pulls"). */
-  backTo: "/code/inbox/pulls" | "/code/inbox/reports";
+  backTo: "/code/inbox/pulls" | "/code/inbox/reports" | "/code/inbox/dismissed";
   backLabel: string;
+  /**
+   * Whether to render the Dismiss button + dialog. Off for already-dismissed
+   * reports (the Dismissed tab), where dismissing again makes no sense.
+   */
+  showDismiss?: boolean;
   /** Title fallback when `report.title` is blank. */
   fallbackTitle: string;
   /** Optional breadcrumb fragment (e.g. PR repo slug + number). */
@@ -72,6 +77,7 @@ export function InboxDetailFrame({
   primaryAction,
   summarySection,
   evidenceSection,
+  showDismiss = true,
   children,
 }: InboxDetailFrameProps) {
   const { data: signalsResp } = useInboxReportSignals(report.id);
@@ -150,7 +156,7 @@ export function InboxDetailFrame({
         }
         actions={
           <Flex align="center" className="gap-2.5">
-            {dismissButton}
+            {showDismiss && dismissButton}
             {primaryAction}
           </Flex>
         }
@@ -200,7 +206,7 @@ export function InboxDetailFrame({
             {children}
           </div>
         </div>
-        {dismissDialog}
+        {showDismiss && dismissDialog}
       </div>
     </Flex>
   );

packages/ui/src/features/inbox/components/InboxReportDetailGate.tsx

@@ -12,7 +12,11 @@ import type { ReactNode } from "react";
 interface InboxReportDetailGateProps {
   reportId: string;
   cachedReport?: SignalReport | null;
-  backTo: "/code/inbox/pulls" | "/code/inbox/reports" | "/code/inbox/runs";
+  backTo:
+    | "/code/inbox/pulls"
+    | "/code/inbox/reports"
+    | "/code/inbox/runs"
+    | "/code/inbox/dismissed";
   backLabel: string;
   missingCopy: string;
   children: (report: SignalReport) => ReactNode;
@@ -57,19 +61,26 @@ export function InboxReportDetailGate({
     );
   }
 
+  const trackTab = tabFromBackTo(backTo);
   return (
     <>
-      <ReportOpenTracker report={resolvedReport} tab={tabFromBackTo(backTo)} />
+      {trackTab && <ReportOpenTracker report={resolvedReport} tab={trackTab} />}
       {children(resolvedReport)}
     </>
   );
 }
 
+/**
+ * The Dismissed tab isn't part of the triage funnel and isn't a tracked
+ * `InboxDetailTab` (its rank would be measured against the wrong list), so it
+ * returns `null` and the open/close engagement events are skipped for it.
+ */
 function tabFromBackTo(
   backTo: InboxReportDetailGateProps["backTo"],
-): InboxDetailTab {
+): InboxDetailTab | null {
   if (backTo === "/code/inbox/pulls") return "pulls";
   if (backTo === "/code/inbox/runs") return "runs";
+  if (backTo === "/code/inbox/dismissed") return null;
   return "reports";
 }