feat(inbox): filter reports by signal source product

- Add source_product query param to SignalReportsQueryParams and API client
- Add sourceProductFilter to filter store (empty = all sources, persisted)
- Add "Source" multi-select section to toolbar filter/sort popover
- Pass source_product filter to API when any sources are selected
- Supports: session_replay, error_tracking, llm_analytics, github, linear, zendesk

Author: Twixes

apps/code/src/renderer/api/posthogClient.ts

@@ -946,6 +946,9 @@ export class PostHogAPIClient {
     if (params?.ordering) {
       url.searchParams.set("ordering", params.ordering);
     }
+    if (params?.source_product) {
+      url.searchParams.set("source_product", params.source_product);
+    }
 
     const response = await this.api.fetcher.fetch({
       method: "get",

apps/code/src/renderer/features/inbox/components/InboxSignalsTab.tsx

@@ -299,6 +299,9 @@ export function InboxSignalsTab() {
   const sortDirection = useInboxSignalsFilterStore((s) => s.sortDirection);
   const searchQuery = useInboxSignalsFilterStore((s) => s.searchQuery);
   const statusFilter = useInboxSignalsFilterStore((s) => s.statusFilter);
+  const sourceProductFilter = useInboxSignalsFilterStore(
+    (s) => s.sourceProductFilter,
+  );
   const { data: signalSourceConfigs } = useSignalSourceConfigs();
   const hasSignalSources = signalSourceConfigs?.some((c) => c.enabled) ?? false;
   const [sourcesDialogOpen, setSourcesDialogOpen] = useState(false);
@@ -311,8 +314,12 @@ export function InboxSignalsTab() {
     (): SignalReportsQueryParams => ({
       status: buildStatusFilterParam(statusFilter),
       ordering: buildSignalReportListOrdering(sortField, sortDirection),
+      source_product:
+        sourceProductFilter.length > 0
+          ? sourceProductFilter.join(",")
+          : undefined,
     }),
-    [statusFilter, sortField, sortDirection],
+    [statusFilter, sortField, sortDirection, sourceProductFilter],
   );
 
   const {
@@ -605,6 +612,7 @@ export function InboxSignalsTab() {
               content={selectedReport.summary}
               fallback="No summary available."
               variant="detail"
+              pending={selectedReport.status !== "ready"}
             />
             <Flex align="center" gap="2" wrap="wrap">
               <SignalReportPriorityBadge priority={selectedReport.priority} />
@@ -628,7 +636,12 @@ export function InboxSignalsTab() {
                 </Text>
                 <Flex direction="column" gap="1">
                   {suggestedReviewers.map((reviewer) => (
-                    <Flex key={reviewer.github_login} align="center" gap="2">
+                    <Flex
+                      key={reviewer.github_login}
+                      align="center"
+                      gap="2"
+                      wrap="wrap"
+                    >
                       <GithubLogoIcon
                         size={14}
                         className="shrink-0 text-gray-10"
@@ -642,10 +655,30 @@ export function InboxSignalsTab() {
                         href={`https://github.com/${reviewer.github_login}`}
                         target="_blank"
                         rel="noreferrer"
-                        className="text-[11px] text-gray-9 hover:text-gray-11"
+                        className="inline-flex items-center gap-0.5 text-[11px] text-gray-9 hover:text-gray-11"
                       >
                         @{reviewer.github_login}
+                        <ArrowSquareOutIcon size={10} />
                       </a>
+                      {reviewer.relevant_commits.length > 0 && (
+                        <span className="text-[11px] text-gray-9">
+                          {reviewer.relevant_commits.map((commit, i) => (
+                            <span key={commit.sha}>
+                              {i > 0 && ", "}
+                              <Tooltip content={commit.reason || undefined}>
+                                <a
+                                  href={commit.url}
+                                  target="_blank"
+                                  rel="noreferrer"
+                                  className="font-mono text-gray-9 hover:text-gray-11"
+                                >
+                                  {commit.sha.slice(0, 7)}
+                                </a>
+                              </Tooltip>
+                            </span>
+                          ))}
+                        </span>
+                      )}
                     </Flex>
                   ))}
                 </Flex>

apps/code/src/renderer/features/inbox/components/ReportCard.tsx

@@ -4,12 +4,32 @@ import {
   inboxStatusAccentCss,
   inboxStatusLabel,
 } from "@features/inbox/utils/inboxSort";
-import { UserIcon } from "@phosphor-icons/react";
+import {
+  BrainIcon,
+  BugIcon,
+  EyeIcon,
+  GithubLogoIcon,
+  KanbanIcon,
+  TicketIcon,
+  VideoIcon,
+} from "@phosphor-icons/react";
 import { Flex, Text, Tooltip } from "@radix-ui/themes";
 import type { SignalReport } from "@shared/types";
 import { motion } from "framer-motion";
 import type { KeyboardEvent, MouseEvent } from "react";
 
+const SOURCE_PRODUCT_ICONS: Record<
+  string,
+  { icon: React.ReactNode; color: string }
+> = {
+  session_replay: { icon: <VideoIcon size={12} />, color: "var(--amber-9)" },
+  error_tracking: { icon: <BugIcon size={12} />, color: "var(--red-9)" },
+  llm_analytics: { icon: <BrainIcon size={12} />, color: "var(--purple-9)" },
+  github: { icon: <GithubLogoIcon size={12} />, color: "var(--gray-11)" },
+  linear: { icon: <KanbanIcon size={12} />, color: "var(--blue-9)" },
+  zendesk: { icon: <TicketIcon size={12} />, color: "var(--green-9)" },
+};
+
 interface ReportCardProps {
   report: SignalReport;
   isSelected: boolean;
@@ -75,26 +95,49 @@ export function ReportCard({
       }}
       className="w-full cursor-pointer overflow-hidden border-gray-5 border-b py-2 pr-3 pl-2 text-left transition-colors hover:bg-gray-2"
       style={{
-        backgroundColor: isSelected ? "var(--gray-3)" : "transparent",
+        backgroundColor: isSelected
+          ? "var(--gray-3)"
+          : report.is_suggested_reviewer
+            ? "var(--blue-2)"
+            : "transparent",
         boxShadow: `inset 3px 0 0 0 ${accent}`,
       }}
     >
       <Flex align="start" justify="between" gap="3">
         <Flex direction="column" gap="1" style={{ minWidth: 0, flex: 1 }}>
-          {/* Bullet stays in its own column so title + badges wrap under each other, not under the dot */}
-          <Flex align="center" gapX="2" className="min-w-0">
-            <span
-              title={`Signal strength: ${strengthLabel}`}
-              aria-hidden
+          <Flex align="start" gapX="2" className="min-w-0">
+            {/* Source product icons — 4px top padding centers 12px icons
+               with the title's 13px/~20px effective line height */}
+            <Flex
+              direction="column"
+              align="center"
+              gap="0.5"
               className="shrink-0"
-              style={{
-                width: "6px",
-                height: "6px",
-                borderRadius: "9999px",
-                backgroundColor: strengthColor,
-                display: "inline-block",
-              }}
-            />
+              style={{ paddingTop: 4 }}
+            >
+              {(report.source_products ?? []).length > 0 ? (
+                (report.source_products ?? []).map((sp) => {
+                  const info = SOURCE_PRODUCT_ICONS[sp];
+                  return info ? (
+                    <span key={sp} style={{ color: info.color }}>
+                      {info.icon}
+                    </span>
+                  ) : null;
+                })
+              ) : (
+                <span
+                  title={`Signal strength: ${strengthLabel}`}
+                  aria-hidden
+                  style={{
+                    width: "6px",
+                    height: "6px",
+                    borderRadius: "9999px",
+                    backgroundColor: strengthColor,
+                    display: "inline-block",
+                  }}
+                />
+              )}
+            </Flex>
             <Flex
               align="center"
               gapX="2"
@@ -129,21 +172,22 @@ export function ReportCard({
                       border: "1px solid var(--blue-6)",
                     }}
                   >
-                    <UserIcon size={10} weight="bold" />
+                    <EyeIcon size={10} weight="bold" />
                   </span>
                 </Tooltip>
               )}
             </Flex>
           </Flex>
           {/* Summary is outside the title row so wrapped lines align with title text (bullet + gap), not the card edge */}
           <div
-            className="min-w-0 pl-[calc(6px+var(--space-2))]"
+            className="min-w-0 pl-[calc(12px+var(--space-2))]"
             style={{ opacity: isReady ? 1 : 0.82 }}
           >
             <SignalReportSummaryMarkdown
               content={report.summary}
               fallback="No summary yet — still collecting context."
               variant="list"
+              pending={!isReady}
             />
           </div>
         </Flex>

apps/code/src/renderer/features/inbox/components/SignalReportSummaryMarkdown.tsx

@@ -7,6 +7,8 @@ interface SignalReportSummaryMarkdownProps {
   fallback: string;
   /** List rows: clamp lines and tighter spacing. Detail: full block markdown. */
   variant: "list" | "detail";
+  /** Render in italic to indicate the summary is still being written. */
+  pending?: boolean;
 }
 
 /**
@@ -16,14 +18,17 @@ export function SignalReportSummaryMarkdown({
   content,
   fallback,
   variant,
+  pending,
 }: SignalReportSummaryMarkdownProps) {
   const raw = content?.trim() ? content : fallback;
 
+  const italicStyle = pending ? { fontStyle: "italic" as const } : undefined;
+
   if (variant === "list") {
     return (
       <Box
         className="[&_.rt-Text]:!mb-0 [&_p]:!mb-0 [&_ul]:!mb-0 min-w-0 text-left [&_li]:mb-0"
-        style={{ color: "var(--gray-11)" }}
+        style={{ color: "var(--gray-11)", ...italicStyle }}
       >
         <div className="line-clamp-2 overflow-hidden text-[12px] leading-snug [&_a]:pointer-events-auto">
           <MarkdownRenderer content={raw} />
@@ -35,7 +40,7 @@ export function SignalReportSummaryMarkdown({
   return (
     <Box
       className="min-w-0 text-pretty break-words [&_.rt-Text]:mb-2 [&_li]:mb-1 [&_p:last-child]:mb-0"
-      style={{ color: "var(--gray-11)" }}
+      style={{ color: "var(--gray-11)", ...italicStyle }}
     >
       <div className="text-[12px] leading-relaxed [&_a]:pointer-events-auto">
         <MarkdownRenderer content={raw} />