Fix mine inbox keyboard selection

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/components/SwipeToArchive.test.tsx

@@ -122,4 +122,25 @@ describe("SwipeToArchive", () => {
       root.unmount();
     });
   });
+
+  it("renders the selected inbox treatment on the swipe surface", () => {
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(
+        <SwipeToArchive onArchive={() => {}} selected>
+          <button type="button">Open issue</button>
+        </SwipeToArchive>,
+      );
+    });
+
+    const surface = container.querySelector("[data-inbox-row-surface]") as HTMLDivElement | null;
+    expect(surface).not.toBeNull();
+    expect(surface?.style.backgroundColor).toBe("hsl(var(--primary) / 0.06)");
+    expect(surface?.style.boxShadow).toBe("inset 3px 0 0 hsl(var(--primary))");
+
+    act(() => {
+      root.unmount();
+    });
+  });
 });

ui/src/components/SwipeToArchive.tsx

@@ -6,6 +6,7 @@ interface SwipeToArchiveProps {
   children: ReactNode;
   onArchive: () => void;
   disabled?: boolean;
+  selected?: boolean;
   className?: string;
 }
 
@@ -17,6 +18,7 @@ export function SwipeToArchive({
   children,
   onArchive,
   disabled = false,
+  selected = false,
   className,
 }: SwipeToArchiveProps) {
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -148,10 +150,13 @@ export function SwipeToArchive({
         </span>
       </div>
       <div
+        data-inbox-row-surface
         className="relative bg-card will-change-transform"
         style={{
           transform: `translate3d(${offsetX}px, 0, 0)`,
           transition: isDragging ? "none" : "transform 180ms ease-out",
+          backgroundColor: selected ? "hsl(var(--primary) / 0.06)" : undefined,
+          boxShadow: selected ? "inset 3px 0 0 hsl(var(--primary))" : undefined,
         }}
       >
         {children}

ui/src/lib/inbox.test.ts

@@ -11,6 +11,7 @@ import {
   isMineInboxTab,
   loadLastInboxTab,
   RECENT_ISSUES_LIMIT,
+  resolveInboxSelectionIndex,
   saveLastInboxTab,
   shouldShowInboxSection,
 } from "./inbox";
@@ -408,4 +409,11 @@ describe("inbox helpers", () => {
     expect(isMineInboxTab("unread")).toBe(false);
     expect(isMineInboxTab("all")).toBe(false);
   });
+
+  it("anchors Mine selection to the first available inbox row", () => {
+    expect(resolveInboxSelectionIndex(-1, 3, true)).toBe(0);
+    expect(resolveInboxSelectionIndex(-1, 3, false)).toBe(-1);
+    expect(resolveInboxSelectionIndex(5, 3, true)).toBe(2);
+    expect(resolveInboxSelectionIndex(1, 0, true)).toBe(-1);
+  });
 });

ui/src/lib/inbox.ts

@@ -102,6 +102,16 @@ export function isMineInboxTab(tab: InboxTab): boolean {
   return tab === "mine";
 }
 
+export function resolveInboxSelectionIndex(
+  previousIndex: number,
+  itemCount: number,
+  canSelectItems: boolean,
+): number {
+  if (itemCount === 0) return -1;
+  if (previousIndex < 0) return canSelectItems ? 0 : -1;
+  return Math.min(previousIndex, itemCount - 1);
+}
+
 export function getLatestFailedRunsByAgent(runs: HeartbeatRun[]): HeartbeatRun[] {
   const sorted = [...runs].sort(
     (a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),

ui/src/pages/Inbox.tsx

@@ -50,6 +50,7 @@ import {
   getLatestFailedRunsByAgent,
   getRecentTouchedIssues,
   isMineInboxTab,
+  resolveInboxSelectionIndex,
   InboxApprovalFilter,
   saveLastInboxTab,
   shouldShowInboxSection,
@@ -928,12 +929,10 @@ export function Inbox() {
     return `join:${item.joinRequest.id}`;
   }, []);
 
-  // Reset selection when the list changes
+  // Keep Mine anchored to a real row so keyboard navigation always lands on an item.
   useEffect(() => {
-    setSelectedIndex((prev) =>
+    setSelectedIndex((prev) => resolveInboxSelectionIndex(prev, workItemsToRender.length, canArchiveFromTab));
-      prev >= workItemsToRender.length ? workItemsToRender.length - 1 : prev,
+  }, [canArchiveFromTab, workItemsToRender.length]);
-    );
-  }, [workItemsToRender.length]);
 
   // Use refs for keyboard handler to avoid stale closures
   const kbStateRef = useRef({
@@ -1233,15 +1232,9 @@ export function Inbox() {
                   <div
                     key={`sel-${key}`}
                     data-inbox-item
-                    className={cn(
+                    className="relative"
-                      "relative",
-                      isSelected && "bg-primary/[0.06] [&>*]:bg-transparent",
-                    )}
                     onClick={() => setSelectedIndex(index)}
                   >
-                    {isSelected && (
-                      <div className="absolute inset-y-0 left-0 w-[3px] bg-primary rounded-r-sm" />
-                    )}
                     {child}
                   </div>
                 );
@@ -1289,6 +1282,7 @@ export function Inbox() {
                   elements.push(wrapItem(approvalKey, isSelected, canArchiveFromTab ? (
                     <SwipeToArchive
                       key={approvalKey}
+                      selected={isSelected}
                       disabled={isArchiving}
                       onArchive={() => handleArchiveNonIssue(approvalKey)}
                     >
@@ -1325,6 +1319,7 @@ export function Inbox() {
                   elements.push(wrapItem(runKey, isSelected, canArchiveFromTab ? (
                     <SwipeToArchive
                       key={runKey}
+                      selected={isSelected}
                       disabled={isArchiving}
                       onArchive={() => handleArchiveNonIssue(runKey)}
                     >
@@ -1358,6 +1353,7 @@ export function Inbox() {
                   elements.push(wrapItem(joinKey, isSelected, canArchiveFromTab ? (
                     <SwipeToArchive
                       key={joinKey}
+                      selected={isSelected}
                       disabled={isArchiving}
                       onArchive={() => handleArchiveNonIssue(joinKey)}
                     >
@@ -1428,6 +1424,7 @@ export function Inbox() {
                 elements.push(wrapItem(`issue:${issue.id}`, isSelected, canArchiveFromTab ? (
                   <SwipeToArchive
                     key={`issue:${issue.id}`}
+                    selected={isSelected}
                     disabled={isArchiving || archiveIssueMutation.isPending}
                     onArchive={() => archiveIssueMutation.mutate(issue.id)}
                   >