feat(inbox): update signals api in inbox + improve ui for showing signals (#983)

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: joshsny

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

@@ -3,6 +3,8 @@ import type {
   RepoAutonomyStatus,
   SignalReportArtefact,
   SignalReportArtefactsResponse,
+  SignalReportSignalsResponse,
+  SignalReportsQueryParams,
   SignalReportsResponse,
   Task,
   TaskRun,
@@ -606,11 +608,27 @@ export class PostHogAPIClient {
     }));
   }
 
-  async getSignalReports(): Promise<SignalReportsResponse> {
+  async getSignalReports(
+    params?: SignalReportsQueryParams,
+  ): Promise<SignalReportsResponse> {
     const teamId = await this.getTeamId();
     const url = new URL(
       `${this.api.baseUrl}/api/projects/${teamId}/signal_reports/`,
     );
+
+    if (params?.limit != null) {
+      url.searchParams.set("limit", String(params.limit));
+    }
+    if (params?.offset != null) {
+      url.searchParams.set("offset", String(params.offset));
+    }
+    if (params?.status) {
+      url.searchParams.set("status", params.status);
+    }
+    if (params?.ordering) {
+      url.searchParams.set("ordering", params.ordering);
+    }
+
     const response = await this.api.fetcher.fetch({
       method: "get",
       url,
@@ -628,6 +646,39 @@ export class PostHogAPIClient {
     };
   }
 
+  async getSignalReportSignals(
+    reportId: string,
+  ): Promise<SignalReportSignalsResponse> {
+    try {
+      const teamId = await this.getTeamId();
+      const url = new URL(
+        `${this.api.baseUrl}/api/projects/${teamId}/signal_reports/${reportId}/signals/`,
+      );
+      const response = await this.api.fetcher.fetch({
+        method: "get",
+        url,
+        path: `/api/projects/${teamId}/signal_reports/${reportId}/signals/`,
+      });
+
+      if (!response.ok) {
+        log.warn("Signal report signals unavailable", {
+          reportId,
+          status: response.status,
+        });
+        return { report: null, signals: [] };
+      }
+
+      const data = await response.json();
+      return {
+        report: data.report ?? null,
+        signals: data.signals ?? [],
+      };
+    } catch (error) {
+      log.warn("Failed to fetch signal report signals", { reportId, error });
+      return { report: null, signals: [] };
+    }
+  }
+
   async getSignalReportArtefacts(
     reportId: string,
   ): Promise<SignalReportArtefactsResponse> {

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

@@ -2,6 +2,7 @@ import { ResizableSidebar } from "@components/ResizableSidebar";
 import { useAuthStore } from "@features/auth/stores/authStore";
 import {
   useInboxReportArtefacts,
+  useInboxReportSignals,
   useInboxReports,
 } from "@features/inbox/hooks/useInboxReports";
 import { useInboxCloudTaskStore } from "@features/inbox/stores/inboxCloudTaskStore";
@@ -35,6 +36,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { SignalsErrorState, SignalsLoadingState } from "./InboxEmptyStates";
 import { ReportCard } from "./ReportCard";
+import { SignalCard } from "./SignalCard";
 
 interface InboxSignalsTabProps {
   onGoToSetup: () => void;
@@ -58,7 +60,9 @@ function getArtefactsUnavailableMessage(
 }
 
 export function InboxSignalsTab({ onGoToSetup }: InboxSignalsTabProps) {
-  const { data, isLoading, isFetching, error, refetch } = useInboxReports();
+  const { data, isLoading, isFetching, error, refetch } = useInboxReports({
+    status: "ready",
+  });
   const reports = data?.results ?? [];
   const [selectedReportId, setSelectedReportId] = useState<string | null>(null);
   const sidebarOpen = useInboxSignalsSidebarStore((state) => state.open);
@@ -108,6 +112,11 @@ export function InboxSignalsTab({ onGoToSetup }: InboxSignalsTabProps) {
     ? "Evidence could not be loaded right now. You can still create a task from this report."
     : getArtefactsUnavailableMessage(artefactsUnavailableReason);
 
+  const signalsQuery = useInboxReportSignals(selectedReport?.id ?? "", {
+    enabled: !!selectedReport,
+  });
+  const signals = signalsQuery.data?.signals ?? [];
+
   const cloudRegion = useAuthStore((state) => state.cloudRegion);
   const projectId = useAuthStore((state) => state.projectId);
   const replayBaseUrl =
@@ -134,9 +143,10 @@ export function InboxSignalsTab({ onGoToSetup }: InboxSignalsTabProps) {
     return buildSignalTaskPrompt({
       report: selectedReport,
       artefacts: visibleArtefacts,
+      signals,
       replayBaseUrl,
     });
-  }, [selectedReport, visibleArtefacts, replayBaseUrl]);
+  }, [selectedReport, visibleArtefacts, signals, replayBaseUrl]);
 
   const handleCreateTask = () => {
     const prompt = buildPrompt();
@@ -336,6 +346,33 @@ export function InboxSignalsTab({ onGoToSetup }: InboxSignalsTabProps) {
                   </Badge>
                 </Flex>
 
+                {signals.length > 0 && (
+                  <Box>
+                    <Text
+                      size="1"
+                      weight="medium"
+                      className="block font-mono text-[12px]"
+                      mb="2"
+                    >
+                      Signals ({signals.length})
+                    </Text>
+                    <Flex direction="column" gap="2">
+                      {signals.map((signal) => (
+                        <SignalCard key={signal.signal_id} signal={signal} />
+                      ))}
+                    </Flex>
+                  </Box>
+                )}
+                {signalsQuery.isLoading && (
+                  <Text
+                    size="1"
+                    color="gray"
+                    className="block font-mono text-[11px]"
+                  >
+                    Loading signals...
+                  </Text>
+                )}
+
                 <Box>
                   <Text
                     size="1"