feat(inbox): Source product icons, PR badges, and rendering improvements

apps/code/src/renderer/features/inbox/components/detail/ReportDetailPane.tsx

@@ -15,7 +15,6 @@ import {
   CaretRightIcon,
   Cloud as CloudIcon,
   EyeIcon,
-  GitPullRequestIcon,
   LinkSimpleIcon,
   WarningIcon,
   XIcon,
@@ -54,7 +53,7 @@ import { SignalReportActionabilityBadge } from "../utils/SignalReportActionabili
 import { SignalReportPriorityBadge } from "../utils/SignalReportPriorityBadge";
 import { SignalReportStatusBadge } from "../utils/SignalReportStatusBadge";
 import { SignalReportSummaryMarkdown } from "../utils/SignalReportSummaryMarkdown";
-import { getPrNumberFromUrl, ReportTaskLogs } from "./ReportTaskLogs";
+import { ReportTaskLogs } from "./ReportTaskLogs";
 import { SignalCard } from "./SignalCard";
 
 function isSuggestedReviewerRowMe(
@@ -209,9 +208,6 @@ export function ReportDetailPane({ report, onClose }: ReportDetailPaneProps) {
     report.actionability === "immediately_actionable" &&
     report.already_addressed !== true;
 
-  const [implementationPrUrl, setImplementationPrUrl] = useState<string | null>(
-    null,
-  );
   const [cloudPromptDraft, setCloudPromptDraft] = useState("");
   const cloudRepoPickerAnchorRef = useRef<HTMLDivElement>(null);
 
@@ -279,25 +275,12 @@ export function ReportDetailPane({ report, onClose }: ReportDetailPaneProps) {
         <Flex align="center" gap="2" className="min-w-0">
           <SignalReportStatusBadge status={report.status} />
           <Text
-            size="1"
-            weight="medium"
-            className="block min-w-0 break-words text-[13px]"
+            size="3"
+            weight={report.status === "ready" ? "bold" : "medium"}
+            className="block min-w-0 text-balance break-words leading-tight"
           >
             {report.title ?? "Untitled signal"}
           </Text>
-          {implementationPrUrl && (
-            <Tooltip content={implementationPrUrl}>
-              <a
-                href={implementationPrUrl}
-                target="_blank"
-                rel="noreferrer"
-                className="inline-flex shrink-0 items-center gap-1 rounded-full bg-green-5 px-2 py-0.5 font-medium text-[11px] text-green-12 hover:bg-green-6"
-              >
-                <GitPullRequestIcon size={12} weight="bold" />
-                {getPrNumberFromUrl(implementationPrUrl) ?? "PR"}
-              </a>
-            </Tooltip>
-          )}
         </Flex>
         <Flex align="center" gap="1" className="shrink-0">
           <Tooltip content="Copy link to this report">
@@ -555,7 +538,6 @@ export function ReportDetailPane({ report, onClose }: ReportDetailPaneProps) {
         onRunInCloud={
           canCreateImplementationPr ? handleOpenCloudConfirm : undefined
         }
-        onPrUrlChange={setImplementationPrUrl}
       />
 
       {/* ── Cloud task confirmation dialog ────────────────────── */}

apps/code/src/renderer/features/inbox/components/detail/ReportTaskLogs.tsx

@@ -1,3 +1,4 @@
+import { ReportImplementationPrLink } from "@features/inbox/components/utils/ReportImplementationPrLink";
 import { TaskLogsPanel } from "@features/task-detail/components/TaskLogsPanel";
 import { useAuthenticatedQuery } from "@hooks/useAuthenticatedQuery";
 import {
@@ -10,7 +11,7 @@ import {
 } from "@phosphor-icons/react";
 import { Button, Spinner, Text, Tooltip } from "@radix-ui/themes";
 import type { SignalReportStatus, SignalReportTask, Task } from "@shared/types";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 type Relationship = SignalReportTask["relationship"];
 
@@ -164,11 +165,6 @@ export function getTaskPrUrl(task: Task): string | null {
   return null;
 }
 
-export function getPrNumberFromUrl(prUrl: string): string | null {
-  const match = prUrl.match(/\/pull\/(\d+)(?:$|[/?#])/);
-  return match ? `#${match[1]}` : null;
-}
-
 const BAR_HEIGHT = 38;
 
 interface Bar {
@@ -179,22 +175,21 @@ interface Bar {
   tooltip?: string;
   /** When set, render a run-action button with this label instead of (or alongside) the status label. */
   runActionLabel?: string;
+  /** PR URL produced by the implementation task, if available. */
+  prUrl?: string | null;
 }
 
 interface ReportTaskLogsProps {
   reportId: string;
   reportStatus: SignalReportStatus;
   /** Open the cloud task confirmation flow. */
   onRunInCloud?: () => void;
-  /** Called when the implementation PR URL changes (or becomes null). */
-  onPrUrlChange?: (prUrl: string | null) => void;
 }
 
 export function ReportTaskLogs({
   reportId,
   reportStatus,
   onRunInCloud,
-  onPrUrlChange,
 }: ReportTaskLogsProps) {
   const { data, isLoading } = useReportTasks(reportId, reportStatus);
   const [expanded, setExpanded] = useState<Relationship | null>(null);
@@ -206,9 +201,6 @@ export function ReportTaskLogs({
     tasks.find((t) => t.relationship === "implementation")?.task ?? null;
 
   const prUrl = implementationTask ? getTaskPrUrl(implementationTask) : null;
-  useEffect(() => {
-    onPrUrlChange?.(prUrl);
-  }, [prUrl, onPrUrlChange]);
 
   // Build the stacked bars we'll render. We always surface the research bar
   // (using a pending/unavailable placeholder if no research task exists yet).
@@ -250,6 +242,7 @@ export function ReportTaskLogs({
       relationship: "implementation",
       task: implementationTask,
       summary: getTaskStatusSummary(implementationTask),
+      prUrl,
       runActionLabel: isPendingInput ? runActionLabel : undefined,
     });
   } else if (reportStatus === "ready" || isPendingInput) {
@@ -372,9 +365,18 @@ export function ReportTaskLogs({
                     className="flex-1 text-[11px]"
                     style={{ color: summary.color }}
                   >
-                    {summary.label}
+                    {bar.prUrl
+                      ? summary.label
+                      : relationship === "implementation" &&
+                          (task?.latest_run?.status === "queued" ||
+                            task?.latest_run?.status === "in_progress")
+                        ? "Working on a PR…"
+                        : summary.label}
                   </Text>
                 )}
+                {bar.prUrl && (
+                  <ReportImplementationPrLink prUrl={bar.prUrl} size="md" />
+                )}
                 {showRunAction && (
                   <Button
                     size="1"

apps/code/src/renderer/features/inbox/components/list/ReportListRow.tsx

@@ -1,10 +1,43 @@
 import { ReportCardContent } from "@features/inbox/components/utils/ReportCardContent";
+import { SOURCE_PRODUCT_META } from "@features/inbox/components/utils/source-product-icons";
 import { FileTextIcon } from "@phosphor-icons/react";
-import { Checkbox, Flex } from "@radix-ui/themes";
+import { Checkbox, Flex, Tooltip } from "@radix-ui/themes";
 import type { SignalReport } from "@shared/types";
 import { motion } from "framer-motion";
 import type { KeyboardEvent, MouseEvent } from "react";
 
+function SourceProductIcon({ sourceProducts }: { sourceProducts?: string[] }) {
+  const firstProduct = sourceProducts?.[0];
+  const meta = firstProduct ? SOURCE_PRODUCT_META[firstProduct] : undefined;
+
+  if (!meta) {
+    return (
+      <span className="text-gray-8">
+        <FileTextIcon size={14} />
+      </span>
+    );
+  }
+
+  // Always show the first (initiating) product's icon.
+  // If later signals added more source products, list them in the tooltip.
+  const otherLabels = (sourceProducts ?? [])
+    .slice(1)
+    .map((p) => SOURCE_PRODUCT_META[p]?.label)
+    .filter(Boolean);
+  const tooltip =
+    otherLabels.length > 0
+      ? `Initiated by ${meta.label} · also: ${otherLabels.join(", ")}`
+      : `Initiated by ${meta.label}`;
+
+  return (
+    <Tooltip content={tooltip}>
+      <span style={{ color: meta.color }}>
+        <meta.Icon size={14} />
+      </span>
+    </Tooltip>
+  );
+}
+
 interface ReportListRowProps {
   report: SignalReport;
   isSelected: boolean;
@@ -37,11 +70,18 @@ export function ReportListRow({
   };
 
   const rowBgClass = isSelected
-    ? "bg-gray-3"
+    ? report.is_suggested_reviewer
+      ? "bg-amber-3"
+      : "bg-gray-3"
     : report.is_suggested_reviewer
       ? "bg-amber-2"
       : "";
 
+  const hoverOverlayClass =
+    isSelected && report.is_suggested_reviewer
+      ? "before:bg-amber-12 before:opacity-0 hover:before:opacity-[0.07]"
+      : "before:bg-gray-12 before:opacity-0 hover:before:opacity-[0.07]";
+
   return (
     <motion.div
       role="button"
@@ -69,18 +109,19 @@ export function ReportListRow({
         }
       }}
       className={[
-        "relative isolate w-full cursor-pointer overflow-hidden border-gray-5 border-b py-2 pr-3 pl-2 text-left",
-        "before:pointer-events-none before:absolute before:inset-0 before:z-[1] before:bg-gray-12 before:opacity-0 hover:before:opacity-[0.07]",
+        "relative isolate w-full cursor-pointer overflow-hidden border-gray-5 border-b py-1.5 pr-4 pl-1.5 text-left",
+        "before:pointer-events-none before:absolute before:inset-0 before:z-[1]",
+        hoverOverlayClass,
         rowBgClass,
       ]
         .filter(Boolean)
         .join(" ")}
     >
-      <Flex align="start" gap="2" className="relative z-[2]">
+      <Flex align="start" gap="1" className="relative z-[2]">
         <Flex
           align="center"
           justify="center"
-          className="shrink-0 pt-1"
+          className="shrink-0 pt-0.5"
           style={{ width: 16, minWidth: 16 }}
         >
           {showCheckbox ? (
@@ -102,13 +143,11 @@ export function ReportListRow({
               }
             />
           ) : (
-            <span className="text-gray-8">
-              <FileTextIcon size={14} />
-            </span>
+            <SourceProductIcon sourceProducts={report.source_products} />
           )}
         </Flex>
         <div className="min-w-0 flex-1">
-          <ReportCardContent report={report} />
+          <ReportCardContent report={report} compact />
         </div>
       </Flex>
     </motion.div>

apps/code/src/renderer/features/inbox/components/utils/ReportCardContent.tsx

@@ -1,4 +1,5 @@
 import { Badge } from "@components/ui/Badge";
+import { ReportImplementationPrLink } from "@features/inbox/components/utils/ReportImplementationPrLink";
 import { SignalReportActionabilityBadge } from "@features/inbox/components/utils/SignalReportActionabilityBadge";
 import { SignalReportPriorityBadge } from "@features/inbox/components/utils/SignalReportPriorityBadge";
 import { SignalReportStatusBadge } from "@features/inbox/components/utils/SignalReportStatusBadge";
@@ -11,11 +12,14 @@ interface ReportCardContentProps {
   report: SignalReport;
   /** Show signal count, user count, and date in a meta row below the summary. */
   showMeta?: boolean;
+  /** Tighter vertical and horizontal gaps for inbox list rows. */
+  compact?: boolean;
 }
 
 export function ReportCardContent({
   report,
   showMeta = false,
+  compact = false,
 }: ReportCardContentProps) {
   const isReady = report.status === "ready";
 
@@ -25,34 +29,59 @@ export function ReportCardContent({
   );
 
   return (
-    <Flex direction="column" gap="1">
-      <Flex align="start" gapX="2" className="min-w-0">
-        <Flex align="center" gapX="2" wrap="wrap" className="min-w-0 flex-1">
-          <Text
-            size="1"
-            weight="medium"
-            className="min-w-0 flex-1 basis-0 truncate text-[13px]"
-          >
-            {report.title ?? "Untitled signal"}
+    <Flex
+      direction="column"
+      gap={compact ? undefined : "1"}
+      className={compact ? "gap-0.5" : undefined}
+    >
+      <Flex align="start" gapX={compact ? "1" : "2"} className="min-w-0">
+        <Text
+          size="1"
+          weight="medium"
+          className="min-w-0 flex-1 break-words text-[13px] leading-tight"
+        >
+          {report.title ?? "Untitled signal"}
+        </Text>
+        {!showMeta && (
+          <Text size="1" color="gray" className="shrink-0 text-[12px]">
+            {updatedAtLabel}
           </Text>
+        )}
+      </Flex>
+
+      <Flex
+        align="center"
+        justify="between"
+        gapX={compact ? "1" : "2"}
+        className="h-[21px] w-full min-w-0" // Same height as PR badge, even if there's no PR badge
+      >
+        <Flex
+          align="center"
+          gapX={compact ? "1" : "2"}
+          wrap="wrap"
+          className="min-w-0 flex-1"
+        >
           {!isReady && <SignalReportStatusBadge status={report.status} />}
           <SignalReportPriorityBadge priority={report.priority} />
           <SignalReportActionabilityBadge
             actionability={report.actionability}
           />
           {report.is_suggested_reviewer && (
             <Tooltip content="You are a suggested reviewer">
-              <Badge color="amber" style={{ height: "var(--line-height-1)" }}>
+              <Badge
+                color="amber"
+                className="!leading-none inline-flex items-center justify-center"
+              >
                 <EyeIcon size={10} weight="bold" className="shrink-0" />
               </Badge>
             </Tooltip>
           )}
         </Flex>
-
-        {!showMeta && (
-          <Text size="1" color="gray" className="shrink-0 text-[12px]">
-            {updatedAtLabel}
-          </Text>
+        {report.implementation_pr_url && (
+          <ReportImplementationPrLink
+            prUrl={report.implementation_pr_url}
+            skipStatusFetch={compact}
+          />
         )}
       </Flex>