fix(session): handle 404 with not-found fallbacks and add SSE-gated message polling (#316)

Author: chriswritescode-dev

frontend/src/components/session/SessionCard.tsx

@@ -57,6 +57,7 @@ export const SessionCard = ({
         }`}
       >
         <button
+          aria-label="Delete session"
           className="h-full w-full flex items-center justify-center text-white hover:bg-red-700"
           onClick={handleDeleteClick}
         >
@@ -174,6 +175,7 @@ export const SessionCard = ({
             )}
             {manageMode && (
               <button
+                aria-label="Delete session"
                 className="h-6 w-6 p-0 text-foreground hover:text-red-600 dark:hover:text-red-400 bg-transparent border-none cursor-pointer"
                 onClick={(e) => {
                   e.stopPropagation();

frontend/src/hooks/useOpenCode.ts

@@ -138,6 +138,7 @@ export const useSession = (opcodeUrl: string | null | undefined, sessionID: stri
     refetchOnWindowFocus: true,
     refetchOnReconnect: true,
     staleTime: 15000,
+    retry: (failureCount, error) => !(error instanceof FetchError && error.statusCode === 404) && failureCount < 3,
   });
 };
 
@@ -158,6 +159,7 @@ export const useMessages = (opcodeUrl: string | null | undefined, sessionID: str
     staleTime: 30000,
     gcTime: 10 * 60 * 1000,
     refetchInterval: opts?.fallbackPoll ? 5000 : undefined,
+    retry: (failureCount, error) => !(error instanceof FetchError && error.statusCode === 404) && failureCount < 3,
   });
 };
 

frontend/src/pages/AssistantRedirect.tsx

@@ -62,7 +62,7 @@ export function AssistantRedirect() {
             <Plus className="w-4 h-4 mr-2" />
             <span>New Session</span>
           </Button>
-          <Button onClick={() => handleCreateSession()} disabled={!opcodeUrl || !assistantDirectory || createSessionMutation.isPending} size="sm" className="sm:hidden h-10 w-10 p-0 bg-blue-600 hover:bg-blue-700 text-white transition-all duration-200 hover:scale-105">
+          <Button onClick={() => handleCreateSession()} disabled={!opcodeUrl || !assistantDirectory || createSessionMutation.isPending} aria-label="New Session" size="sm" className="sm:hidden h-10 w-10 p-0 bg-blue-600 hover:bg-blue-700 text-white transition-all duration-200 hover:scale-105">
             <Plus className="w-5 h-5" />
           </Button>
         </Header.Actions>

frontend/src/pages/SessionDetail.tsx

@@ -9,6 +9,7 @@ import { X, CornerUpLeft } from "lucide-react";
 import { Header } from "@/components/ui/header";
 import { SessionList } from "@/components/session/SessionList";
 import { getSessionListPath } from '@/lib/navigation'
+import { FetchError } from '@/api/fetchWrapper'
 
 import { FileBrowserSheet } from "@/components/file-browser/FileBrowserSheet";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
@@ -63,6 +64,18 @@ const compareMessageIds = (id1: string, id2: string): number => {
 const PENDING_ACTION_SYNC_INTERVAL_MS = 30000
 const PROMPT_OVERLAY_CLEARANCE_PX = 16
 
+function SessionRouteFallback({ message, backTo, backLabel }: { message: string; backTo: string; backLabel: string }) {
+  const navigate = useNavigate();
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-background via-background to-background">
+      <div className="flex flex-col items-center gap-3 text-center">
+        <span className="text-muted-foreground">{message}</span>
+        <Button variant="outline" size="sm" onClick={() => navigate(backTo)}>{backLabel}</Button>
+      </div>
+    </div>
+  );
+}
+
 export function SessionDetail() {
   const { id, sessionId } = useParams<{ id: string; sessionId: string }>();
   const navigate = useNavigate();
@@ -112,6 +125,7 @@ export function SessionDetail() {
     queryKey: ["repo", repoId],
     queryFn: () => getRepo(repoId),
     enabled: id !== undefined,
+    retry: (failureCount, error) => !(error instanceof FetchError && error.statusCode === 404) && failureCount < 3,
   });
 
   useRepoActivity(repoId, Boolean(repo));
@@ -123,8 +137,8 @@ export function SessionDetail() {
 
   const { isConnected, isReconnecting } = useSSE(opcodeUrl, repoDirectory, sessionId);
 
-  const { data: rawMessages, isLoading: messagesLoading } = useMessages(opcodeUrl, sessionId, repoDirectory);
-  const { data: session, isLoading: sessionLoading } = useSession(
+  const { data: rawMessages, isLoading: messagesLoading } = useMessages(opcodeUrl, sessionId, repoDirectory, { fallbackPoll: !isConnected });
+  const { data: session, isLoading: sessionLoading, error: sessionQueryError } = useSession(
     opcodeUrl,
     sessionId,
     repoDirectory,
@@ -408,7 +422,7 @@ export function SessionDetail() {
     return <Navigate to="/" replace />;
   }
 
-  if (!repo && !isAssistantSession) {
+  if (!isAssistantSession && repoLoading) {
     return (
       <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-background via-background to-background">
         <div className="flex flex-col items-center gap-2">
@@ -419,6 +433,21 @@ export function SessionDetail() {
     );
   }
 
+  if (!isAssistantSession && !repo) {
+    return <SessionRouteFallback message="Repository not found" backTo="/" backLabel="Back to repositories" />;
+  }
+
+  if (sessionQueryError instanceof FetchError && sessionQueryError.statusCode === 404) {
+    const listTab = new URLSearchParams(location.search).get('repoTab') ?? undefined;
+    return (
+      <SessionRouteFallback
+        message="Session not found"
+        backTo={getSessionListPath(repoId, isAssistantSession, listTab)}
+        backLabel="Back to sessions"
+      />
+    );
+  }
+
   const workspaceDisplayName = isAssistantSession || !repo
     ? 'Assistant'
     : getRepoDisplayName(repo);

frontend/src/pages/__tests__/SessionDetail.polling.test.tsx

@@ -245,4 +245,24 @@ describe('SessionDetail pending-actions polling gating', () => {
     const query = findPendingActionsQuery(queryClient)
     expect((query?.options as { refetchInterval?: unknown }).refetchInterval).toBe(false)
   })
+
+  it('requests message fallback polling while the SSE stream is disconnected', async () => {
+    mocks.useSSE.mockReturnValue({ isConnected: false, isReconnecting: true })
+
+    const queryClient = createQueryClient()
+    renderSessionDetail(queryClient)
+
+    const calls = mocks.useMessages.mock.calls
+    expect(calls[calls.length - 1][3]).toEqual({ fallbackPoll: true })
+  })
+
+  it('does not request message fallback polling while the SSE stream is connected', async () => {
+    mocks.useSSE.mockReturnValue({ isConnected: true, isReconnecting: false })
+
+    const queryClient = createQueryClient()
+    renderSessionDetail(queryClient)
+
+    const calls = mocks.useMessages.mock.calls
+    expect(calls[calls.length - 1][3]).toEqual({ fallbackPoll: false })
+  })
 })