feat(sig): Report list toolbar as core control (#1532)

## Problem

The inbox list toolbar introduced in #1513 added controls _only_ for bulk operations. But the same controls have been missing for _individual_ reports too. In the Cloud version, we had them under a dropdown in the report pane itself. I considered doing the same here, but there's no point when we have a great toolbar - the toolbar should be the individual report controls as well.

At the same time, checkboxes take away from the content when shown always - and we don't need them by default for _most_ user interactions here. (Ofc will validate this, but at least I think that's a safe assumption for now that the individual report level is the primary one.)

## Changes

Making the report list toolbar always-on, with intuitive logic for selection state synced with the currently-viewed-report state. Unifies the selection state, so that "currently viewed" and "selected" are the same thing. Checkboxes only show up when multiple reports are selected. For multi-select, you can use the "Select all" checkbox or standard desktop Shift/Cmd+click patterns. See in action:

<img src="https://res.cloudinary.com/dmukukwp6/image/upload/Clean_Shot_2026_04_08_at_11_58_59_c89bf3657b.gif">

<!-- If you're an agent, only list tests you actually ran. -->

Author: Twixes

apps/code/src/main/services/git/create-pr-saga.ts

@@ -72,21 +72,21 @@ export class CreatePrSaga extends Saga<CreatePrSagaInput, CreatePrSagaOutput> {
     let { commitMessage, prTitle, prBody } = input;
 
     if (input.branchName) {
+      const branchName = input.branchName;
       const currentBranch = await this.readOnlyStep("get-original-branch", () =>
         this.deps.getCurrentBranch(directoryPath),
       );
 
       // on retry, do not attempt to re-create the branch
-      if (currentBranch !== input.branchName) {
+      if (currentBranch !== branchName) {
         this.deps.onProgress(
           "creating-branch",
-          `Creating branch ${input.branchName}...`,
+          `Creating branch ${branchName}...`,
         );
 
         await this.step({
           name: "creating-branch",
-          execute: () =>
-            this.deps.createBranch(directoryPath, input.branchName!),
+          execute: () => this.deps.createBranch(directoryPath, branchName),
           rollback: async () => {
             if (currentBranch) {
               await this.deps.checkoutBranch(directoryPath, currentBranch);
@@ -120,6 +120,8 @@ export class CreatePrSaga extends Saga<CreatePrSagaInput, CreatePrSagaOutput> {
         throw new Error("Commit message is required.");
       }
 
+      const finalCommitMessage = commitMessage;
+
       this.deps.onProgress("committing", "Committing changes...");
 
       const preCommitSha = await this.readOnlyStep("get-pre-commit-sha", () =>
@@ -129,10 +131,14 @@ export class CreatePrSaga extends Saga<CreatePrSagaInput, CreatePrSagaOutput> {
       await this.step({
         name: "committing",
         execute: async () => {
-          const result = await this.deps.commit(directoryPath, commitMessage!, {
-            stagedOnly: input.stagedOnly,
-            taskId: input.taskId,
-          });
+          const result = await this.deps.commit(
+            directoryPath,
+            finalCommitMessage,
+            {
+              stagedOnly: input.stagedOnly,
+              taskId: input.taskId,
+            },
+          );
           if (!result.success) throw new Error(result.message);
           return result;
         },

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

@@ -26,7 +26,8 @@ import { Box, Flex, ScrollArea } from "@radix-ui/themes";
 import type { SignalReportsQueryParams } from "@shared/types";
 import { useNavigationStore } from "@stores/navigationStore";
 import { useRendererWindowFocusStore } from "@stores/rendererWindowFocusStore";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { MultiSelectStack } from "./detail/MultiSelectStack";
 import { ReportDetailPane } from "./detail/ReportDetailPane";
 import { ReportListPane } from "./list/ReportListPane";
 import { SignalsToolbar } from "./list/SignalsToolbar";
@@ -134,39 +135,78 @@ export function InboxSignalsTab() {
     [allReports],
   );
 
-  // ── Selection state ─────────────────────────────────────────────────────
-  const [selectedReportId, setSelectedReportId] = useState<string | null>(null);
+  // ── Selection state (unified — store is single source of truth) ─────────
   const selectedReportIds = useInboxReportSelectionStore(
-    (s) => s.selectedReportIds ?? [],
+    (s) => s.selectedReportIds,
+  );
+  const setSelectedReportIds = useInboxReportSelectionStore(
+    (s) => s.setSelectedReportIds,
   );
   const toggleReportSelection = useInboxReportSelectionStore(
     (s) => s.toggleReportSelection,
   );
+  const selectRange = useInboxReportSelectionStore((s) => s.selectRange);
   const pruneSelection = useInboxReportSelectionStore((s) => s.pruneSelection);
+  const clearSelection = useInboxReportSelectionStore((s) => s.clearSelection);
 
-  useEffect(() => {
-    if (reports.length === 0) {
-      setSelectedReportId(null);
-      return;
-    }
-    if (!selectedReportId) {
-      return;
-    }
-    const selectedExists = reports.some(
-      (report) => report.id === selectedReportId,
-    );
-    if (!selectedExists) {
-      setSelectedReportId(null);
-    }
-  }, [reports, selectedReportId]);
+  // Stable refs so callbacks don't need re-registration on every render
+  const selectedReportIdsRef = useRef(selectedReportIds);
+  selectedReportIdsRef.current = selectedReportIds;
+  const reportsRef = useRef(reports);
+  reportsRef.current = reports;
 
+  // Prune selection when visible reports change (e.g. filter/search)
   useEffect(() => {
     pruneSelection(reports.map((report) => report.id));
   }, [reports, pruneSelection]);
 
-  const selectedReport = useMemo(
-    () => reports.find((report) => report.id === selectedReportId) ?? null,
-    [reports, selectedReportId],
+  // The report to show in the detail pane (only when exactly 1 is selected)
+  const selectedReport = useMemo(() => {
+    if (selectedReportIds.length !== 1) return null;
+    return reports.find((r) => r.id === selectedReportIds[0]) ?? null;
+  }, [reports, selectedReportIds]);
+
+  // Reports for the multi-select stack (when 2+ selected)
+  const selectedReports = useMemo(() => {
+    if (selectedReportIds.length < 2) return [];
+    const idSet = new Set(selectedReportIds);
+    return reports.filter((r) => idSet.has(r.id));
+  }, [reports, selectedReportIds]);
+
+  // ── Click handler: plain / cmd / shift ──────────────────────────────────
+  const handleReportClick = useCallback(
+    (reportId: string, event: { metaKey: boolean; shiftKey: boolean }) => {
+      if (event.shiftKey) {
+        selectRange(
+          reportId,
+          reportsRef.current.map((r) => r.id),
+        );
+      } else if (event.metaKey) {
+        toggleReportSelection(reportId);
+      } else if (
+        selectedReportIdsRef.current.length === 1 &&
+        selectedReportIdsRef.current[0] === reportId
+      ) {
+        // Plain click on the only selected report — deselect it
+        clearSelection();
+      } else {
+        // Plain click — select only this report
+        setSelectedReportIds([reportId]);
+      }
+    },
+    [selectRange, toggleReportSelection, setSelectedReportIds, clearSelection],
+  );
+
+  // Select-all checkbox
+  const handleToggleSelectAll = useCallback(
+    (checked: boolean) => {
+      if (checked) {
+        setSelectedReportIds(reportsRef.current.map((r) => r.id));
+      } else {
+        clearSelection();
+      }
+    },
+    [setSelectedReportIds, clearSelection],
   );
 
   // ── Sidebar resize ─────────────────────────────────────────────────────
@@ -237,10 +277,6 @@ export function InboxSignalsTab() {
   const showTwoPaneLayout = hasMountedTwoPaneRef.current;
 
   // ── Arrow-key navigation between reports ──────────────────────────────
-  const reportsRef = useRef(reports);
-  reportsRef.current = reports;
-  const selectedReportIdRef = useRef(selectedReportId);
-  selectedReportIdRef.current = selectedReportId;
   const leftPaneRef = useRef<HTMLDivElement>(null);
 
   const focusListPane = useCallback(() => {
@@ -252,41 +288,46 @@ export function InboxSignalsTab() {
   // Auto-focus the list pane when the two-pane layout appears
   useEffect(() => {
     if (showTwoPaneLayout) {
-      // Small delay to ensure the ref is mounted after conditional render
       focusListPane();
     }
   }, [focusListPane, showTwoPaneLayout]);
 
-  const navigateReport = useCallback((direction: 1 | -1) => {
-    const list = reportsRef.current;
-    if (list.length === 0) return;
-
-    const currentId = selectedReportIdRef.current;
-    const currentIndex = currentId
-      ? list.findIndex((r) => r.id === currentId)
-      : -1;
-    const nextIndex =
-      currentIndex === -1
-        ? 0
-        : Math.max(0, Math.min(list.length - 1, currentIndex + direction));
-    const nextId = list[nextIndex].id;
-
-    setSelectedReportId(nextId);
-
-    const container = leftPaneRef.current;
-    const row = container?.querySelector<HTMLElement>(
-      `[data-report-id="${nextId}"]`,
-    );
-    const stickyHeader = container?.querySelector<HTMLElement>(
-      "[data-inbox-sticky-header]",
-    );
-
-    if (!row) return;
-
-    const stickyHeaderHeight = stickyHeader?.offsetHeight ?? 0;
-    row.style.scrollMarginTop = `${stickyHeaderHeight}px`;
-    row.scrollIntoView({ block: "nearest" });
-  }, []);
+  const navigateReport = useCallback(
+    (direction: 1 | -1) => {
+      const list = reportsRef.current;
+      if (list.length === 0) return;
+
+      // Find the current position based on the last selected report
+      const currentIds = selectedReportIdsRef.current;
+      const currentId =
+        currentIds.length > 0 ? currentIds[currentIds.length - 1] : null;
+      const currentIndex = currentId
+        ? list.findIndex((r) => r.id === currentId)
+        : -1;
+      const nextIndex =
+        currentIndex === -1
+          ? 0
+          : Math.max(0, Math.min(list.length - 1, currentIndex + direction));
+      const nextId = list[nextIndex].id;
+
+      setSelectedReportIds([nextId]);
+
+      const container = leftPaneRef.current;
+      const row = container?.querySelector<HTMLElement>(
+        `[data-report-id="${nextId}"]`,
+      );
+      const stickyHeader = container?.querySelector<HTMLElement>(
+        "[data-inbox-sticky-header]",
+      );
+
+      if (!row) return;
+
+      const stickyHeaderHeight = stickyHeader?.offsetHeight ?? 0;
+      row.style.scrollMarginTop = `${stickyHeaderHeight}px`;
+      row.scrollIntoView({ block: "nearest" });
+    },
+    [setSelectedReportIds],
+  );
 
   // Window-level keyboard handler so arrow keys work regardless of which
   // pane has focus — only suppressed inside interactive widgets.
@@ -310,14 +351,17 @@ export function InboxSignalsTab() {
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
         navigateReport(-1);
-      } else if (e.key === " " && selectedReportIdRef.current) {
+      } else if (
+        e.key === "Escape" &&
+        selectedReportIdsRef.current.length > 0
+      ) {
         e.preventDefault();
-        toggleReportSelection(selectedReportIdRef.current);
+        clearSelection();
       }
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [navigateReport, toggleReportSelection]);
+  }, [navigateReport, clearSelection]);
 
   const searchDisabledReason =
     !hasReports && !searchQuery.trim()
@@ -366,11 +410,7 @@ export function InboxSignalsTab() {
                   ) {
                     return;
                   }
-                  if (
-                    target.closest(
-                      "[data-report-id], button, [role='checkbox']",
-                    )
-                  ) {
+                  if (target.closest("[data-report-id], button")) {
                     focusListPane();
                   }
                 }}
@@ -387,9 +427,7 @@ export function InboxSignalsTab() {
                   }
                   if (
                     target !== leftPaneRef.current &&
-                    target.closest(
-                      "[data-report-id], button, [role='checkbox']",
-                    )
+                    target.closest("[data-report-id], button")
                   ) {
                     focusListPane();
                   }
@@ -413,6 +451,8 @@ export function InboxSignalsTab() {
                     processingCount={processingCount}
                     pipelinePausedUntil={signalProcessingState?.paused_until}
                     reports={reports}
+                    effectiveBulkIds={selectedReportIds}
+                    onToggleSelectAll={handleToggleSelectAll}
                   />
                 </Box>
                 <ReportListPane
@@ -428,9 +468,8 @@ export function InboxSignalsTab() {
                   hasSignalSources={hasSignalSources}
                   searchQuery={searchQuery}
                   hasActiveFilters={hasActiveFilters}
-                  selectedReportId={selectedReportId}
                   selectedReportIds={selectedReportIds}
-                  onSelectReport={setSelectedReportId}
+                  onReportClick={handleReportClick}
                   onToggleReportSelection={toggleReportSelection}
                 />
               </Flex>
@@ -463,10 +502,15 @@ export function InboxSignalsTab() {
               position: "relative",
             }}
           >
-            {selectedReport ? (
+            {selectedReports.length > 1 ? (
+              <MultiSelectStack
+                reports={selectedReports}
+                onClearSelection={clearSelection}
+              />
+            ) : selectedReport ? (
               <ReportDetailPane
                 report={selectedReport}
-                onClose={() => setSelectedReportId(null)}
+                onClose={clearSelection}
               />
             ) : (
               <SelectReportPane />