diff --git a/web/src/pages/FocusPage.tsx b/web/src/pages/FocusPage.tsx
new file mode 100644
index 0000000..a9bc55d
--- /dev/null
+++ b/web/src/pages/FocusPage.tsx
@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { articlesApi } from '../api/articles';
+import { FocusCardStack } from '../components/focus/FocusCardStack';
+import { FocusEmptyState } from '../components/focus/FocusEmptyState';
+
+interface FocusPageProps {
+ onExit: () => void;
+}
+
+export function FocusPage({ onExit }: FocusPageProps) {
+ const queryClient = useQueryClient();
+ const [isComplete, setIsComplete] = useState(false);
+
+ // Fetch ONLY unread articles
+ const { data: articles, isLoading } = useQuery({
+ queryKey: ['articles', 'focus-mode'],
+ queryFn: () => articlesApi.list({ unread: true, limit: 100 }), // Cap at 100 for performance
+ staleTime: 0, // Always fresh for focus mode
+ });
+
+ // Mutation to mark read
+ const markReadMutation = useMutation({
+ mutationFn: (id: string) => articlesApi.markRead(id),
+ onSuccess: () => {
+ // Invalidate main lists to sync up when returning
+ queryClient.invalidateQueries({ queryKey: ['articles'] });
+ queryClient.invalidateQueries({ queryKey: ['feeds'] });
+ },
+ });
+
+ const handleMarkRead = (id: string) => {
+ markReadMutation.mutate(id);
+ };
+
+ const handleKeep = (id: string) => {
+ // Do nothing api-wise, just skip.
+ // Or strictly speaking, we could have a "skipped" list, but for now just don't mark read.
+ console.log('Skipped:', id);
+ };
+
+ if (isLoading) {
+ return (
+
+ );
+ }
+
+ // Filter out locally read? No, we handle that in stack index.
+ // But if API returns empty:
+ if (!articles || articles.length === 0) {
+ return
;
+ }
+
+ if (isComplete) {
+ return
;
+ }
+
+ return (
+
+ {/* Header */}
+
+
+
+ Mode Focus
+
+
+
+
+ {/* Main Deck Area */}
+
+ setIsComplete(true)}
+ />
+
+
+ );
+}