feat(signals): inbox keyboard navifation (#1452)

## Problem

Users need a faster way to navigate to the inbox and browse through reports without relying on mouse interactions.

## Changes

- Added keyboard shortcut `Cmd+Shift+I` to open the inbox from anywhere in the application
- Implemented arrow key navigation (up/down) to move between reports in the inbox
- Added `Cmd+Enter` shortcut to create a task from the selected report
- Updated the "Run cloud" button to "Pick up task" with visual keyboard shortcut indicators
- Added tooltip to the inbox sidebar item showing the keyboard shortcut
- Made the inbox report list focusable to enable immediate keyboard navigation

## How did you test this?

Manual testing of keyboard shortcuts:
- Verified `Cmd+Shift+I` opens the inbox from different application views
- Tested arrow key navigation between reports in the inbox
- Confirmed `Cmd+Enter` creates tasks from selected reports
- Checked that the inbox list auto-focuses on mount for immediate keyboard use
- Validated tooltip display on sidebar inbox item hover

Author: oliverb123

apps/code/src/renderer/components/GlobalEventHandlers.tsx

@@ -35,6 +35,7 @@ export function GlobalEventHandlers({
     (state) => state.navigateToTaskInput,
   );
   const navigateToTask = useNavigationStore((state) => state.navigateToTask);
+  const navigateToInbox = useNavigationStore((state) => state.navigateToInbox);
   const navigateToFolderSettings = useNavigationStore(
     (state) => state.navigateToFolderSettings,
   );
@@ -165,6 +166,7 @@ export function GlobalEventHandlers({
   useHotkeys(SHORTCUTS.TOGGLE_LEFT_SIDEBAR, toggleLeftSidebar, globalOptions);
   useHotkeys(SHORTCUTS.TOGGLE_RIGHT_SIDEBAR, toggleRightSidebar, globalOptions);
   useHotkeys(SHORTCUTS.SHORTCUTS_SHEET, onToggleShortcutsSheet, globalOptions);
+  useHotkeys(SHORTCUTS.INBOX, navigateToInbox, globalOptions);
   useHotkeys(SHORTCUTS.PREV_TASK, handlePrevTask, globalOptions, [
     handlePrevTask,
   ]);

apps/code/src/renderer/constants/keyboard-shortcuts.ts

@@ -18,6 +18,7 @@ export const SHORTCUTS = {
   COPY_PATH: "mod+shift+c",
   TOGGLE_FOCUS: "mod+r",
   PASTE_AS_FILE: "mod+shift+v",
+  INBOX: "mod+i",
   BLUR: "escape",
   SUBMIT_BLUR: "mod+enter",
 } as const;
@@ -66,6 +67,12 @@ export const KEYBOARD_SHORTCUTS: KeyboardShortcut[] = [
     description: "Show keyboard shortcuts",
     category: "general",
   },
+  {
+    id: "inbox",
+    keys: SHORTCUTS.INBOX,
+    description: "Open inbox",
+    category: "navigation",
+  },
   {
     id: "switch-task",
     keys: "mod+0-9",

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

@@ -1,4 +1,5 @@
 import { useAuthStateValue } from "@features/auth/hooks/authQueries";
+import { InboxLiveRail } from "@features/inbox/components/InboxLiveRail";
 import {
   useInboxReportArtefacts,
   useInboxReportSignals,
@@ -32,8 +33,10 @@ import {
   CircleNotchIcon,
   ClockIcon,
   Cloud as CloudIcon,
+  CommandIcon,
   GithubLogoIcon,
   KanbanIcon,
+  KeyReturnIcon,
   TicketIcon,
   VideoIcon,
   WarningIcon,
@@ -556,6 +559,68 @@ export function InboxSignalsTab() {
     [reports, selectedReportId],
   );
 
+  // ── Arrow-key navigation between reports ──────────────────────────────
+  const reportsRef = useRef(reports);
+  reportsRef.current = reports;
+  const selectedReportIdRef = useRef(selectedReportId);
+  selectedReportIdRef.current = selectedReportId;
+
+  const leftPaneRef = useRef<HTMLDivElement>(null);
+
+  // Auto-focus the list pane when the inbox mounts so arrow keys work immediately
+  useEffect(() => {
+    leftPaneRef.current?.focus();
+  }, []);
+
+  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);
+    // Move focus back to the list container so the previously clicked card
+    // loses its focus outline
+    leftPaneRef.current?.focus();
+    leftPaneRef.current
+      ?.querySelector(`[data-report-id="${nextId}"]`)
+      ?.scrollIntoView({ block: "nearest" });
+  }, []);
+
+  const handleCreateTaskRef = useRef<() => void>(() => {});
+
+  const handleListKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      // Don't capture arrow keys when focus is inside interactive child UI
+      // like filter popovers, dropdowns, or search inputs
+      const target = e.target as HTMLElement;
+      if (
+        target.closest(
+          "[role='menu'], [role='listbox'], [role='dialog'], [data-radix-popper-content-wrapper], input, select, textarea",
+        )
+      )
+        return;
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        navigateReport(1);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        navigateReport(-1);
+      } else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        handleCreateTaskRef.current();
+      }
+    },
+    [navigateReport],
+  );
+
   const artefactsQuery = useInboxReportArtefacts(selectedReport?.id ?? "", {
     enabled: !!selectedReport,
   });
@@ -635,6 +700,7 @@ export function InboxSignalsTab() {
     });
     navigateToTaskInput();
   };
+  handleCreateTaskRef.current = handleCreateTask;
 
   const handleOpenCloudConfirm = useCallback(() => {
     openCloudConfirm(repositories[0] ?? null);
@@ -759,7 +825,12 @@ export function InboxSignalsTab() {
                 disabled={!canActOnReport}
                 className="text-[12px]"
               >
-                Pick up task
+                <CloudIcon size={12} />
+                {isRunningCloudTask ? "Running..." : "Run task"}
+                <span className="ml-1 inline-flex items-center gap-px text-gray-9">
+                  <CommandIcon size={11} />
+                  <KeyReturnIcon size={11} />
+                </span>
               </Button>
               {cloudModeEnabled && (
                 <Button
@@ -1100,7 +1171,14 @@ export function InboxSignalsTab() {
               className="scroll-area-constrain-width"
               style={{ height: "100%" }}
             >
-              <Flex direction="column">
+              <Flex
+                ref={leftPaneRef}
+                direction="column"
+                tabIndex={-1}
+                onKeyDown={handleListKeyDown}
+                className="outline-none"
+              >
+                <InboxLiveRail active={inboxPollingActive} />
                 <SignalsToolbar
                   totalCount={totalCount}
                   filteredCount={reports.length}

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

@@ -76,6 +76,7 @@ export function ReportCard({
     <motion.div
       role="button"
       tabIndex={0}
+      data-report-id={report.id}
       initial={{ opacity: 0, y: 6 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{

apps/code/src/renderer/features/sidebar/components/items/HomeItem.tsx

@@ -1,4 +1,9 @@
+import { Tooltip } from "@components/ui/Tooltip";
 import { EnvelopeSimple, Plus } from "@phosphor-icons/react";
+import {
+  formatHotkey,
+  SHORTCUTS,
+} from "@renderer/constants/keyboard-shortcuts";
 import { SidebarItem } from "../SidebarItem";
 
 interface NewTaskItemProps {
@@ -31,23 +36,33 @@ function formatSignalCount(count: number): string {
 
 export function InboxItem({ isActive, onClick, signalCount }: InboxItemProps) {
   return (
-    <SidebarItem
-      depth={0}
-      icon={<EnvelopeSimple size={16} weight={isActive ? "fill" : "regular"} />}
-      label="Inbox"
-      isActive={isActive}
-      onClick={onClick}
-      endContent={
-        signalCount && signalCount > 0 ? (
-          <span
-            className="inline-flex min-w-[16px] items-center justify-center rounded-full px-1 text-[11px] text-gray-11 leading-none"
-            style={{ height: "16px" }}
-            title={`${signalCount} ready reports`}
-          >
-            {formatSignalCount(signalCount)}
-          </span>
-        ) : undefined
-      }
-    />
+    <Tooltip
+      content="Open inbox"
+      shortcut={formatHotkey(SHORTCUTS.INBOX)}
+      side="right"
+    >
+      <div>
+        <SidebarItem
+          depth={0}
+          icon={
+            <EnvelopeSimple size={16} weight={isActive ? "fill" : "regular"} />
+          }
+          label="Inbox"
+          isActive={isActive}
+          onClick={onClick}
+          endContent={
+            signalCount && signalCount > 0 ? (
+              <span
+                className="inline-flex min-w-[16px] items-center justify-center rounded-full px-1 text-[11px] text-gray-11 leading-none"
+                style={{ height: "16px" }}
+                title={`${signalCount} ready reports`}
+              >
+                {formatSignalCount(signalCount)}
+              </span>
+            ) : undefined
+          }
+        />
+      </div>
+    </Tooltip>
   );
 }