upgrade navigation and route prefetch responsiveness

app/analysis/reports/[ticker]/[accessionNumber]/page.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useQueryClient } from '@tanstack/react-query';
 import Link from 'next/link';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { format } from 'date-fns';
@@ -7,7 +8,9 @@ import { ArrowLeft, BrainCircuit, RefreshCcw } from 'lucide-react';
 import { useParams } from 'next/navigation';
 import { AppShell } from '@/components/shell/app-shell';
 import { useAuthGuard } from '@/hooks/use-auth-guard';
-import { getCompanyAiReport } from '@/lib/api';
+import { useLinkPrefetch } from '@/hooks/use-link-prefetch';
+import { queryKeys } from '@/lib/query/keys';
+import { aiReportQueryOptions } from '@/lib/query/options';
 import type { CompanyAiReportDetail } from '@/lib/types';
 import { Button } from '@/components/ui/button';
 import { Panel } from '@/components/ui/panel';
@@ -25,6 +28,8 @@ function formatFilingDate(value: string) {
 export default function AnalysisReportPage() {
   const { isPending, isAuthenticated } = useAuthGuard();
   const params = useParams<{ ticker: string; accessionNumber: string }>();
+  const queryClient = useQueryClient();
+  const { prefetchResearchTicker } = useLinkPrefetch();
 
   const tickerFromRoute = useMemo(() => {
     const value = typeof params.ticker === 'string' ? params.ticker : '';
@@ -48,11 +53,16 @@ export default function AnalysisReportPage() {
       return;
     }
 
-    setLoading(true);
+    const options = aiReportQueryOptions(accessionNumber);
+
+    if (!queryClient.getQueryData(options.queryKey)) {
+      setLoading(true);
+    }
+
     setError(null);
 
     try {
-      const response = await getCompanyAiReport(accessionNumber);
+      const response = await queryClient.ensureQueryData(options);
       setReport(response.report);
     } catch (err) {
       setReport(null);
@@ -60,7 +70,7 @@ export default function AnalysisReportPage() {
     } finally {
       setLoading(false);
     }
-  }, [accessionNumber]);
+  }, [accessionNumber, queryClient]);
 
   useEffect(() => {
     if (!isPending && isAuthenticated) {
@@ -73,13 +83,30 @@ export default function AnalysisReportPage() {
   }
 
   const resolvedTicker = report?.ticker ?? tickerFromRoute;
+  const analysisHref = resolvedTicker ? `/analysis?ticker=${encodeURIComponent(resolvedTicker)}` : '/analysis';
+  const filingsHref = resolvedTicker ? `/filings?ticker=${encodeURIComponent(resolvedTicker)}` : '/filings';
 
   return (
     <AppShell
       title="AI Summary"
       subtitle={`Detailed filing analysis${resolvedTicker ? ` for ${resolvedTicker}` : ''}.`}
+      activeTicker={resolvedTicker}
+      breadcrumbs={[
+        { label: 'Analysis', href: analysisHref },
+        { label: 'Reports', href: analysisHref },
+        { label: resolvedTicker || 'Summary' }
+      ]}
       actions={(
-        <Button variant="secondary" onClick={() => void loadReport()} disabled={loading}>
+        <Button
+          variant="secondary"
+          onClick={() => {
+            if (accessionNumber) {
+              void queryClient.invalidateQueries({ queryKey: queryKeys.report(accessionNumber) });
+            }
+            void loadReport();
+          }}
+          disabled={loading}
+        >
           <RefreshCcw className="size-4" />
           Refresh
         </Button>
@@ -88,14 +115,18 @@ export default function AnalysisReportPage() {
       <Panel>
         <div className="flex flex-wrap items-center gap-3">
           <Link
-            href={`/analysis?ticker=${resolvedTicker}`}
+            href={analysisHref}
+            onMouseEnter={() => prefetchResearchTicker(resolvedTicker)}
+            onFocus={() => prefetchResearchTicker(resolvedTicker)}
             className="inline-flex items-center gap-1 text-xs uppercase tracking-[0.12em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
           >
             <ArrowLeft className="size-3" />
             Back to analysis
           </Link>
           <Link
-            href={`/filings?ticker=${resolvedTicker}`}
+            href={filingsHref}
+            onMouseEnter={() => prefetchResearchTicker(resolvedTicker)}
+            onFocus={() => prefetchResearchTicker(resolvedTicker)}
             className="inline-flex items-center gap-1 text-xs uppercase tracking-[0.12em] text-[color:var(--accent)] hover:text-[color:var(--accent-strong)]"
           >
             <ArrowLeft className="size-3" />