Speed up issue-to-issue navigation

ui/src/components/IssueLinkQuicklook.tsx

@@ -2,11 +2,11 @@ import * as React from "react";
 import { useMemo, useState } from "react";
 import * as RouterDom from "react-router-dom";
 import type { Issue } from "@paperclipai/shared";
-import { useQuery } from "@tanstack/react-query";
-import { issuesApi } from "@/api/issues";
-import { queryKeys } from "@/lib/queryKeys";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { timeAgo } from "@/lib/timeAgo";
 import { createIssueDetailPath, withIssueDetailHeaderSeed } from "@/lib/issueDetailBreadcrumb";
+import { fetchIssueDetail, getCachedIssueDetail, prefetchIssueDetail } from "@/lib/issueDetailCache";
+import { queryKeys } from "@/lib/queryKeys";
 import { cn } from "@/lib/utils";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { StatusIcon } from "@/components/StatusIcon";
@@ -67,47 +67,92 @@ export function IssueQuicklookCard({
 
 export const IssueLinkQuicklook = React.forwardRef<
   HTMLAnchorElement,
-  React.ComponentProps<typeof RouterDom.Link> & { issuePathId: string }
+  React.ComponentProps<typeof RouterDom.Link> & {
+    issuePathId: string;
+    disableIssueQuicklook?: boolean;
+    issuePrefetch?: Issue | null;
+  }
 >(function IssueLinkQuicklookImpl(
   {
     issuePathId,
     to,
     children,
     className,
+    state,
+    disableIssueQuicklook = false,
+    issuePrefetch = null,
     onClick,
+    onClickCapture,
+    onMouseEnter,
+    onFocus,
+    onTouchStart,
     ...props
   },
   ref,
 ) {
+  const queryClient = useQueryClient();
   const [open, setOpen] = useState(false);
+  const prefetchedState = issuePrefetch ? withIssueDetailHeaderSeed(state, issuePrefetch) : state;
+  const cachedIssue = getCachedIssueDetail(queryClient, issuePathId, issuePrefetch ?? undefined);
   const { data, isLoading } = useQuery({
     queryKey: queryKeys.issues.detail(issuePathId),
-    queryFn: () => issuesApi.get(issuePathId),
+    queryFn: () => fetchIssueDetail(queryClient, issuePathId),
     enabled: open,
+    initialData: () => cachedIssue,
     staleTime: 60_000,
   });
 
   const detailPath = createIssueDetailPath(issuePathId);
+  const handlePrefetch = React.useCallback(() => {
+    void prefetchIssueDetail(queryClient, issuePathId, { issue: issuePrefetch });
+  }, [issuePathId, issuePrefetch, queryClient]);
+  const link = (
+    <RouterDom.Link
+      ref={ref}
+      to={to}
+      state={prefetchedState}
+      className={className}
+      onMouseEnter={(event) => {
+        handlePrefetch();
+        onMouseEnter?.(event);
+      }}
+      onFocus={(event) => {
+        handlePrefetch();
+        onFocus?.(event);
+      }}
+      onTouchStart={(event) => {
+        handlePrefetch();
+        onTouchStart?.(event);
+      }}
+      onClickCapture={(event) => {
+        handlePrefetch();
+        onClickCapture?.(event);
+      }}
+      onClick={(event) => {
+        setOpen(false);
+        onClick?.(event);
+      }}
+      {...props}
+    >
+      {children}
+    </RouterDom.Link>
+  );
+
+  if (disableIssueQuicklook) {
+    return link;
+  }
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger
         asChild
-        onMouseEnter={() => setOpen(true)}
+        onMouseEnter={() => {
+          handlePrefetch();
+          setOpen(true);
+        }}
         onMouseLeave={() => setOpen(false)}
       >
-        <RouterDom.Link
-          ref={ref}
-          to={to}
-          className={className}
-          onClick={(event) => {
-            setOpen(false);
-            onClick?.(event);
-          }}
-          {...props}
-        >
-          {children}
-        </RouterDom.Link>
+        {link}
       </PopoverTrigger>
       <PopoverContent
         className="w-72 p-3"
@@ -118,7 +163,7 @@ export const IssueLinkQuicklook = React.forwardRef<
         onOpenAutoFocus={(event) => event.preventDefault()}
       >
         {data ? (
-          <IssueQuicklookCard issue={data} linkTo={detailPath} compact />
+          <IssueQuicklookCard issue={data} linkTo={detailPath} linkState={prefetchedState} compact />
         ) : (
           <div className="space-y-2">
             <div className="h-4 w-24 rounded bg-accent/50" />

ui/src/components/IssueRow.test.tsx

@@ -7,10 +7,17 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { IssueRow } from "./IssueRow";
 
 vi.mock("@/lib/router", () => ({
-  Link: ({ children, className, disableIssueQuicklook: _disableIssueQuicklook, ...props }: React.ComponentProps<"a"> & { disableIssueQuicklook?: boolean }) => (
+  Link: ({
+    children,
+    className,
+    disableIssueQuicklook: _disableIssueQuicklook,
+    issuePrefetch,
+    ...props
+  }: React.ComponentProps<"a"> & { disableIssueQuicklook?: boolean; issuePrefetch?: Issue | null }) => (
     <a
       className={className}
       data-disable-issue-quicklook={_disableIssueQuicklook ? "true" : undefined}
+      data-issue-prefetch-id={issuePrefetch?.id}
       {...props}
     >
       {children}
@@ -157,6 +164,21 @@ describe("IssueRow", () => {
     });
   });
 
+  it("passes the visible row issue into the navigation prefetch path", () => {
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(<IssueRow issue={createIssue()} />);
+    });
+
+    const link = container.querySelector("[data-inbox-issue-link]") as HTMLAnchorElement | null;
+    expect(link?.getAttribute("data-issue-prefetch-id")).toBe("issue-1");
+
+    act(() => {
+      root.unmount();
+    });
+  });
+
   it("renders titleSuffix inline after the issue title", () => {
     const root = createRoot(container);
     const issue = createIssue({ title: "Parent task" });

ui/src/components/IssueRow.tsx

@@ -59,6 +59,7 @@ export function IssueRow({
       to={createIssueDetailPath(issuePathId)}
       state={detailState}
       disableIssueQuicklook
+      issuePrefetch={issue}
       data-inbox-issue-link
       onClickCapture={() => rememberIssueDetailLocationState(issuePathId, detailState)}
       className={cn(