feat(inbox): edit suggested reviewers from the report detail pane

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

@@ -385,4 +385,101 @@ describe("PostHogAPIClient", () => {
       expect(result.length).toBe(50);
     });
   });
+
+  describe("updateSignalReportArtefact", () => {
+    const ARTEFACT_PATH =
+      "/api/projects/123/signals/reports/report-1/artefacts/art-1/";
+
+    function makeClient(fetch: ReturnType<typeof vi.fn>) {
+      const client = new PostHogAPIClient(
+        "http://localhost:8000",
+        async () => "token",
+        async () => "token",
+        123,
+      );
+      (
+        client as unknown as {
+          api: { baseUrl: string; fetcher: { fetch: typeof fetch } };
+        }
+      ).api = { baseUrl: "http://localhost:8000", fetcher: { fetch } };
+      return client;
+    }
+
+    const OCTOCAT_REVIEWER = {
+      github_login: "octocat",
+      github_name: "The Octocat",
+      relevant_commits: [],
+      user: null,
+    };
+
+    it.each([
+      {
+        name: "PUTs the full-replacement content and returns the parsed artefact",
+        input: [{ github_login: "octocat" }, { user_uuid: "uuid-1" }],
+        responseContent: [OCTOCAT_REVIEWER],
+      },
+      {
+        name: "sends an empty content array when clearing reviewers",
+        input: [],
+        responseContent: [],
+      },
+    ])("$name", async ({ input, responseContent }) => {
+      const fetch = vi.fn().mockResolvedValue({
+        ok: true,
+        json: async () => ({
+          id: "art-1",
+          type: "suggested_reviewers",
+          created_at: "2024-01-01T00:00:00Z",
+          content: responseContent,
+        }),
+      });
+      const client = makeClient(fetch);
+
+      const result = await client.updateSignalReportArtefact(
+        "report-1",
+        "art-1",
+        input,
+      );
+
+      expect(result.type).toBe("suggested_reviewers");
+      expect(result.content).toEqual(responseContent);
+      expect(fetch).toHaveBeenCalledWith(
+        expect.objectContaining({
+          method: "put",
+          path: ARTEFACT_PATH,
+          overrides: { body: JSON.stringify({ content: input }) },
+        }),
+      );
+    });
+
+    it("throws with the server message on a non-ok response", async () => {
+      const fetch = vi.fn().mockResolvedValue({
+        ok: false,
+        text: async () =>
+          '{"error":"Only suggested_reviewers artefacts may be modified via this endpoint."}',
+      });
+      const client = makeClient(fetch);
+
+      await expect(
+        client.updateSignalReportArtefact("report-1", "art-1", []),
+      ).rejects.toThrow("Only suggested_reviewers");
+    });
+
+    it("throws when the response is not a suggested_reviewers artefact", async () => {
+      const fetch = vi.fn().mockResolvedValue({
+        ok: true,
+        json: async () => ({
+          id: "art-1",
+          type: "dismissal",
+          created_at: "2024-01-01T00:00:00Z",
+          content: { reason: "noise", note: "" },
+        }),
+      });
+      const client = makeClient(fetch);
+
+      await expect(
+        client.updateSignalReportArtefact("report-1", "art-1", []),
+      ).rejects.toThrow("Unexpected response");
+    });
+  });
 });

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

@@ -28,6 +28,7 @@ import type {
   SlackChannelsQueryParams,
   SlackChannelsResponse,
   SuggestedReviewersArtefact,
+  SuggestedReviewerWriteEntry,
   Task,
   TaskRun,
 } from "@shared/types";
@@ -2122,6 +2123,45 @@ export class PostHogAPIClient {
     return (await response.json()) as SignalReport;
   }
 
+  /**
+   * Replace the content of a `suggested_reviewers` artefact (full replacement).
+   * The server canonicalizes each entry to a lowercase `github_login` and preserves
+   * `relevant_commits` / `github_name` for logins that survive the replace.
+   */
+  async updateSignalReportArtefact(
+    reportId: string,
+    artefactId: string,
+    content: SuggestedReviewerWriteEntry[],
+  ): Promise<SuggestedReviewersArtefact> {
+    const teamId = await this.getTeamId();
+    const url = new URL(
+      `${this.api.baseUrl}/api/projects/${teamId}/signals/reports/${reportId}/artefacts/${artefactId}/`,
+    );
+    const path = `/api/projects/${teamId}/signals/reports/${reportId}/artefacts/${artefactId}/`;
+
+    const response = await this.api.fetcher.fetch({
+      method: "put",
+      url,
+      path,
+      overrides: {
+        body: JSON.stringify({ content }),
+      },
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(errorText || "Failed to update suggested reviewers");
+    }
+
+    const parsed = normalizeSignalReportArtefact(await response.json());
+    if (!parsed || parsed.type !== "suggested_reviewers") {
+      throw new Error("Unexpected response updating suggested reviewers");
+    }
+    // `SignalReportArtefact.type` is a plain string, so the guard above can't
+    // statically narrow the union — the runtime check makes this cast safe.
+    return parsed as SuggestedReviewersArtefact;
+  }
+
   async deleteSignalReport(reportId: string): Promise<{
     status: "deletion_started" | "already_running";
     report_id: string;

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

@@ -1,4 +1,3 @@
-import { Badge } from "@components/ui/Badge";
 import { Button } from "@components/ui/Button";
 import {
   useInboxReportArtefacts,
@@ -12,12 +11,9 @@ import { useAuthenticatedQuery } from "@hooks/useAuthenticatedQuery";
 import { useDetectedCloudRepository } from "@hooks/useDetectedCloudRepository";
 import { useMeQuery } from "@hooks/useMeQuery";
 import {
-  ArrowSquareOutIcon,
   CaretDownIcon,
   CaretRightIcon,
   ChatCircleIcon,
-  EyeIcon,
-  InfoIcon,
   LinkSimpleIcon,
   Plus,
   ThumbsDownIcon,
@@ -46,7 +42,6 @@ import type {
   SignalFindingArtefact,
   SignalReport,
   SignalReportTask,
-  SuggestedReviewer,
   SuggestedReviewersArtefact,
   Task,
 } from "@shared/types";
@@ -72,15 +67,9 @@ import { SignalReportStatusBadge } from "../utils/SignalReportStatusBadge";
 import { SignalReportSummaryMarkdown } from "../utils/SignalReportSummaryMarkdown";
 import { ReportTaskLogs } from "./ReportTaskLogs";
 import { SignalCard } from "./SignalCard";
+import { SuggestedReviewersEditor } from "./SuggestedReviewersEditor";
 import type { SignalInteractionAction } from "./signalInteractionContext";
 
-function isSuggestedReviewerRowMe(
-  reviewer: SuggestedReviewer,
-  meUuid: string | undefined,
-): boolean {
-  return !!reviewer.user?.uuid && !!meUuid && meUuid === reviewer.user.uuid;
-}
-
 const REPOSITORY_SOURCE_RELATIONSHIPS: SignalReportTask["relationship"][] = [
   "repo_selection",
   "research",
@@ -208,16 +197,14 @@ export function ReportDetailPane({
   });
   const allArtefacts = artefactsQuery.data?.results ?? [];
 
-  const suggestedReviewers = useMemo(() => {
-    const reviewerArtefact = allArtefacts.find(
-      (a): a is SuggestedReviewersArtefact => a.type === "suggested_reviewers",
-    );
-    const reviewers = reviewerArtefact?.content ?? [];
-    if (!me?.uuid) return reviewers;
-    const meIndex = reviewers.findIndex((r) => r.user?.uuid === me.uuid);
-    if (meIndex <= 0) return reviewers;
-    return [reviewers[meIndex], ...reviewers.filter((_, i) => i !== meIndex)];
-  }, [allArtefacts, me?.uuid]);
+  const reviewerArtefact = useMemo(
+    () =>
+      allArtefacts.find(
+        (a): a is SuggestedReviewersArtefact =>
+          a.type === "suggested_reviewers",
+      ) ?? null,
+    [allArtefacts],
+  );
 
   const signalFindings = useMemo(() => {
     const map = new Map<string, SignalFindingArtefact["content"]>();
@@ -769,102 +756,13 @@ export function ReportDetailPane({
           )}
 
           {/* ── Suggested reviewers ─────────────────────────────── */}
-          {suggestedReviewers.length > 0 && (
-            <Box>
-              <Text className="block font-medium text-sm" mb="2">
-                Suggested reviewers
-              </Text>
-              <Flex direction="column" gap="1">
-                {suggestedReviewers.map((reviewer) => {
-                  const isMe = isSuggestedReviewerRowMe(reviewer, me?.uuid);
-                  return (
-                    <Flex
-                      key={reviewer.github_login}
-                      align="center"
-                      gap="2"
-                      wrap="wrap"
-                    >
-                      <img
-                        src={`https://github.com/${reviewer.github_login}.png?size=28`}
-                        alt=""
-                        className="github-avatar h-[18px] w-[18px] shrink-0 rounded-full"
-                        onLoad={(e) => e.currentTarget.classList.add("loaded")}
-                      />
-                      <Text className="text-[12px]">
-                        {reviewer.user?.first_name ??
-                          reviewer.github_name ??
-                          reviewer.github_login}
-                      </Text>
-                      {isMe && (
-                        <Tooltip content="You are a suggested reviewer">
-                          <Badge color="amber" className="!py-1 !text-[8px]">
-                            <EyeIcon
-                              size={8}
-                              weight="bold"
-                              className="shrink-0"
-                            />
-                          </Badge>
-                        </Tooltip>
-                      )}
-                      <a
-                        href={`https://github.com/${reviewer.github_login}`}
-                        target="_blank"
-                        rel="noreferrer"
-                        className="inline-flex items-center gap-0.5 text-[11px] text-gray-9 hover:text-gray-11"
-                        onClick={() =>
-                          fireDetailAction("click_suggested_reviewer")
-                        }
-                      >
-                        @{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={
-                                  isMe ? (
-                                    <Flex direction="column" gap="1">
-                                      <Text as="div" size="1" weight="bold">
-                                        Why was I assigned?
-                                      </Text>
-                                      <Text as="div" size="1">
-                                        {commit.reason}
-                                      </Text>
-                                    </Flex>
-                                  ) : (
-                                    commit.reason || undefined
-                                  )
-                                }
-                              >
-                                <span className="inline-flex items-center gap-0.5">
-                                  <a
-                                    href={commit.url}
-                                    target="_blank"
-                                    rel="noreferrer"
-                                    className="font-mono text-gray-9 hover:text-gray-11"
-                                  >
-                                    {commit.sha.slice(0, 7)}
-                                  </a>
-                                  {isMe && commit.reason && (
-                                    <InfoIcon
-                                      size={11}
-                                      className="cursor-help text-gray-9"
-                                    />
-                                  )}
-                                </span>
-                              </Tooltip>
-                            </span>
-                          ))}
-                        </span>
-                      )}
-                    </Flex>
-                  );
-                })}
-              </Flex>
-            </Box>
+          {reviewerArtefact && (
+            <SuggestedReviewersEditor
+              reportId={report.id}
+              artefact={reviewerArtefact}
+              meUuid={me?.uuid}
+              fireAction={fireDetailAction}
+            />
           )}
 
           {/* ── Signals ─────────────────────────────────────────── */}