diff --git a/src/arrange-v4/app/books/page.tsx b/src/arrange-v4/app/books/page.tsx
index cfebbd4..ec2830f 100644
--- a/src/arrange-v4/app/books/page.tsx
+++ b/src/arrange-v4/app/books/page.tsx
@@ -1,8 +1,9 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { getCalendars, getUserInfo, createCalendar, deleteCalendar, Calendar } from '@/lib/graphService';
-import { filterArrangeCalendars } from '@/lib/calendarUtils';
+import { getUserInfo } from '@/lib/graphService';
+import { useStore } from '@/lib/store/useStore';
+import type { Book } from '@/lib/store/types';
 import { useGraphToken } from '@/lib/hooks/useGraphToken';
 import { useSetTopBarActions } from '@/components/TopBarProvider';
 import CalendarList from '@/components/CalendarList';
@@ -11,7 +12,8 @@ import styles from './page.module.css';
 
 export default function BooksPage() {
   const { acquireToken, isAuthenticated, inProgress, handleLogin: graphLogin, instance } = useGraphToken();
-  const [calendars, setCalendars] = useState<Calendar[]>([]);
+  const store = useStore();
+  const [books, setBooks] = useState<Book[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [userName, setUserName] = useState<string>('');
@@ -31,7 +33,7 @@ export default function BooksPage() {
     });
   };
 
-  const fetchCalendars = async () => {
+  const fetchBooks = async () => {
     if (!isAuthenticated) return;
 
     setLoading(true);
@@ -39,48 +41,45 @@ export default function BooksPage() {
 
     try {
       const accessToken = await acquireToken();
-
-      // Fetch user info
       const userInfo = await getUserInfo(accessToken);
       setUserName(userInfo.displayName || userInfo.userPrincipalName || '');
 
-      // Fetch calendars and filter arrange books
-      const calendarsData = await getCalendars(accessToken);
-      const filteredCalendars = filterArrangeCalendars(calendarsData);
-      setCalendars(filteredCalendars);
-    } catch (error: any) {
-      console.error('Error fetching calendars:', error);
-      setError(error.message || 'Failed to fetch books');
+      const allBooks = await store.listBooks();
+      setBooks(allBooks);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to fetch books';
+      console.error('Error fetching books:', err);
+      setError(message);
     } finally {
       setLoading(false);
     }
   };
 
-  const handleCreateCalendar = async (name: string) => {
+  const handleCreateBook = async (name: string) => {
     try {
-      const accessToken = await acquireToken();
-      const newCalendar = await createCalendar(accessToken, name);
-      setCalendars(prev => [...prev, newCalendar]);
-    } catch (error: any) {
-      console.error('Error creating calendar:', error);
-      throw new Error(error.message || 'Failed to create book');
+      const newBook = await store.createBook(name, { backend: 'calendar' });
+      setBooks(prev => [...prev, newBook]);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to create book';
+      console.error('Error creating book:', err);
+      throw new Error(message);
     }
   };
 
-  const handleDeleteCalendar = async (calendarId: string) => {
+  const handleDeleteBook = async (bookId: string) => {
     try {
-      const accessToken = await acquireToken();
-      await deleteCalendar(accessToken, calendarId);
-      setCalendars(prev => prev.filter(c => c.id !== calendarId));
-    } catch (error: any) {
-      console.error('Error deleting calendar:', error);
-      throw new Error(error.message || 'Failed to delete book');
+      await store.deleteBook(bookId);
+      setBooks(prev => prev.filter(b => b.id !== bookId));
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Failed to delete book';
+      console.error('Error deleting book:', err);
+      throw new Error(message);
     }
   };
 
   useEffect(() => {
     if (isAuthenticated && inProgress === 'none') {
-      fetchCalendars();
+      fetchBooks();
     }
   }, [isAuthenticated, inProgress]);
 
@@ -97,11 +96,11 @@ export default function BooksPage() {
     ) : (
       <>
         <CreateCalendar
-          onCreateCalendar={handleCreateCalendar}
+          onCreateCalendar={handleCreateBook}
           disabled={loading}
         />
         <button
-          onClick={fetchCalendars}
+          onClick={fetchBooks}
           disabled={loading}
           className={`${styles.button} ${styles.buttonSecondary}`}
         >
@@ -130,11 +129,11 @@ export default function BooksPage() {
               </p>
             </div>
             <div className={styles.card}>
-              <CalendarList 
-                calendars={calendars} 
-                loading={loading} 
+              <CalendarList
+                books={books}
+                loading={loading}
                 error={error}
-                onDeleteCalendar={handleDeleteCalendar}
+                onDeleteBook={handleDeleteBook}
               />
             </div>
           </>
diff --git a/src/arrange-v4/app/cancelled/page.tsx b/src/arrange-v4/app/cancelled/page.tsx
index c5b85ba..ae0c602 100644
--- a/src/arrange-v4/app/cancelled/page.tsx
+++ b/src/arrange-v4/app/cancelled/page.tsx
@@ -1,9 +1,8 @@
 'use client';
 
 import React, { useState, useEffect, useCallback, useRef, Suspense } from 'react';
-import { getAllCalendarEvents } from '@/lib/graphService';
-import { deleteTodoItem, TodoItem, parseTodoData } from '@/lib/todoDataService';
-import { getCalendarDisplayName } from '@/lib/calendarUtils';
+import { useStore } from '@/lib/store/useStore';
+import type { TodoItem, TodoItemWithId } from '@/lib/store/types';
 import { formatRelativeDate } from '@/lib/dateUtils';
 import { useGraphToken } from '@/lib/hooks/useGraphToken';
 import { useBookId } from '@/lib/hooks/useBookId';
@@ -13,10 +12,11 @@ import Link from 'next/link';
 import styles from './page.module.css';
 
 function CancelledPageContent() {
-  const { acquireToken, isAuthenticated, inProgress, handleLogin: graphLogin } = useGraphToken();
-  const { bookId, calendars, currentCalendarName, handleCalendarSwitch, error: calendarError } = useBookId('/cancelled');
+  const { isAuthenticated, inProgress, handleLogin: graphLogin } = useGraphToken();
+  const store = useStore();
+  const { bookId, books, handleBookSwitch, error: bookError } = useBookId('/cancelled');
 
-  const [cancelledItems, setCancelledItems] = useState<(TodoItem & { id?: string })[]>([]);
+  const [cancelledItems, setCancelledItems] = useState<TodoItemWithId[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
@@ -26,9 +26,9 @@ function CancelledPageContent() {
   const [selectedTodo, setSelectedTodo] = useState<(TodoItem & { id?: string }) | null>(null);
   const confirmButtonRef = useRef<HTMLButtonElement>(null);
 
-  const displayError = error || calendarError;
+  const displayError = error || bookError;
 
-  const allSelected = cancelledItems.length > 0 && cancelledItems.every(t => t.id && selectedIds.has(t.id));
+  const allSelected = cancelledItems.length > 0 && cancelledItems.every(t => selectedIds.has(t.id));
 
   const fetchEvents = useCallback(async () => {
     if (!isAuthenticated || !bookId) return;
@@ -37,10 +37,8 @@ function CancelledPageContent() {
     setError(null);
 
     try {
-      const accessToken = await acquireToken();
-      const eventsData = await getAllCalendarEvents(accessToken, bookId);
-      const todos = eventsData.map(event => parseTodoData(event));
-      setCancelledItems(todos.filter(t => t.status === 'cancelled'));
+      const items = await store.listItems(bookId, { range: 'all' });
+      setCancelledItems(items.filter(t => t.status === 'cancelled'));
       setSelectedIds(new Set());
     } catch (err: unknown) {
       console.error('Error fetching events:', err);
@@ -49,7 +47,7 @@ function CancelledPageContent() {
     } finally {
       setLoading(false);
     }
-  }, [isAuthenticated, bookId, acquireToken]);
+  }, [isAuthenticated, bookId, store]);
 
   useEffect(() => {
     if (isAuthenticated && inProgress === 'none' && bookId) {
@@ -72,16 +70,16 @@ function CancelledPageContent() {
   };
 
   useSetTopBarActions(
-    calendars.length > 1 ? (
+    books.length > 1 ? (
       <select
         className={styles.bookSwitcher}
         value={bookId || ''}
-        onChange={(e) => handleCalendarSwitch(e.target.value)}
+        onChange={(e) => handleBookSwitch(e.target.value)}
         disabled={loading || deleting}
       >
-        {calendars.map(cal => (
-          <option key={cal.id} value={cal.id}>
-            {getCalendarDisplayName(cal)}
+        {books.map(b => (
+          <option key={b.id} value={b.id}>
+            {b.name}
           </option>
         ))}
       </select>
@@ -112,7 +110,7 @@ function CancelledPageContent() {
         </button>
       </>
     ),
-    [isAuthenticated, inProgress, loading, deleting, bookId, calendars, selectedIds.size],
+    [isAuthenticated, inProgress, loading, deleting, bookId, books, selectedIds.size],
   );
 
   const toggleSelect = (id: string) => {
@@ -127,11 +125,10 @@ function CancelledPageContent() {
     if (allSelected) {
       setSelectedIds(new Set());
     } else {
-      setSelectedIds(new Set(cancelledItems.filter(t => t.id).map(t => t.id!)));
+      setSelectedIds(new Set(cancelledItems.map(t => t.id)));
     }
   };
 
-  // Focus the confirm button when the dialog appears
   useEffect(() => {
     if (showConfirm) {
       confirmButtonRef.current?.focus();
@@ -145,9 +142,8 @@ function CancelledPageContent() {
     const idsToDelete = Array.from(selectedIds);
     setDeleteProgress({ done: 0, total: idsToDelete.length });
 
-    // Optimistic removal — keep a snapshot for rollback
     const previousItems = [...cancelledItems];
-    setCancelledItems(items => items.filter(item => !item.id || !selectedIds.has(item.id)));
+    setCancelledItems(items => items.filter(item => !selectedIds.has(item.id)));
 
     const CONCURRENCY = 5;
     let idx = 0;
@@ -155,13 +151,11 @@ function CancelledPageContent() {
     let hasFailure = false;
 
     try {
-      const accessToken = await acquireToken();
-
       const worker = async () => {
         while (idx < idsToDelete.length) {
           const eventId = idsToDelete[idx++];
           try {
-            await deleteTodoItem(accessToken, bookId, eventId);
+            await store.deleteItem(bookId, eventId);
           } catch (err) {
             hasFailure = true;
             console.error(`Error deleting event ${eventId}:`, err);
diff --git a/src/arrange-v4/app/matrix/page.tsx b/src/arrange-v4/app/matrix/page.tsx
index 5cea2bc..9860edd 100644
--- a/src/arrange-v4/app/matrix/page.tsx
+++ b/src/arrange-v4/app/matrix/page.tsx
@@ -1,9 +1,8 @@
 'use client';
 
 import React, { useState, useEffect, useMemo, useRef, Suspense } from 'react';
-import { getCalendars, getCalendarEvents } from '@/lib/graphService';
-import { createTodoItem, updateTodoItem, sweepStaleTodos, TodoItem, parseTodoData, TodoStatus, ALL_STATUSES, STATUS_LABELS } from '@/lib/todoDataService';
-import { filterArrangeCalendars, getCalendarDisplayName } from '@/lib/calendarUtils';
+import { useStore } from '@/lib/store/useStore';
+import { TodoItem, TodoItemWithId, TodoStatus, ALL_STATUSES, STATUS_LABELS } from '@/lib/store/types';
 import { formatRelativeDate } from '@/lib/dateUtils';
 import { hasSessionSweepRun, isSessionSweepInProgress, markSessionSweepInProgress, clearSessionSweepInProgress, markSessionSweepDone } from '@/lib/bookStorage';
 import { useGraphToken } from '@/lib/hooks/useGraphToken';
@@ -49,11 +48,11 @@ function passesTodayFilter(todo: TodoItem): boolean {
 }
 
 // TodoCard component for rendering individual todo items
-function TodoCard({ todo, onDragStart, onClick, onStatusChange }: { 
-  todo: TodoItem & { id?: string }, 
-  onDragStart?: (todo: TodoItem & { id?: string }) => void,
-  onClick?: (todo: TodoItem & { id?: string }) => void,
-  onStatusChange?: (todo: TodoItem & { id?: string }, newStatus: TodoStatus) => void 
+function TodoCard({ todo, onDragStart, onClick, onStatusChange }: {
+  todo: TodoItemWithId,
+  onDragStart?: (todo: TodoItemWithId) => void,
+  onClick?: (todo: TodoItemWithId) => void,
+  onStatusChange?: (todo: TodoItemWithId, newStatus: TodoStatus) => void
 }) {
   const currentStatus = todo.status || 'new';
 
@@ -65,7 +64,7 @@ function TodoCard({ todo, onDragStart, onClick, onStatusChange }: {
   };
 
   return (
-    <div 
+    <div
       className={styles.todoCard}
       draggable={!!todo.id}
       onDragStart={() => onDragStart?.(todo)}
@@ -188,17 +187,18 @@ export default function MatrixPage() {
 }
 
 function MatrixPageContent() {
-  const { acquireToken, isAuthenticated, inProgress, handleLogin: graphLogin } = useGraphToken();
-  const { bookId, calendars, currentCalendarName, handleCalendarSwitch, error: calendarError } = useBookId('/matrix');
+  const { isAuthenticated, inProgress, handleLogin: graphLogin } = useGraphToken();
+  const store = useStore();
+  const { bookId, books, handleBookSwitch, error: bookError } = useBookId('/matrix');
   const bookIdRef = useRef(bookId);
   const sweepAttemptedRef = useRef(false);
   bookIdRef.current = bookId;
 
-  const [todoItems, setTodoItems] = useState<(TodoItem & { id?: string })[]>([]);
+  const [todoItems, setTodoItems] = useState<TodoItemWithId[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [draggedItem, setDraggedItem] = useState<(TodoItem & { id?: string }) | null>(null);
-  const [selectedTodo, setSelectedTodo] = useState<(TodoItem & { id?: string }) | null>(null);
+  const [draggedItem, setDraggedItem] = useState<TodoItemWithId | null>(null);
+  const [selectedTodo, setSelectedTodo] = useState<TodoItemWithId | null>(null);
   const [statusFilters, setStatusFilters] = useState<Record<TodoStatus, StatusFilterMode>>(DEFAULT_STATUS_FILTERS);
   const [showFilters, setShowFilters] = useState(false);
   const [showTags, setShowTags] = useState(true);
@@ -206,8 +206,8 @@ function MatrixPageContent() {
   const [showUncategorized, setShowUncategorized] = useState(false);
   const [showManageTags, setShowManageTags] = useState(false);
 
-  // Merge calendar-level errors into the page error state
-  const displayError = error || calendarError;
+  // Merge book-level errors into the page error state
+  const displayError = error || bookError;
 
   const allCategories = useMemo(() => {
     const cats = new Set<string>();
@@ -251,53 +251,44 @@ function MatrixPageContent() {
     setError(null);
 
     try {
-      const accessToken = await acquireToken();
-
       // Fetch events from last 30 days to next 30 days
       const today = new Date();
       today.setHours(0, 0, 0, 0);
       const startDate = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000);
       const endDate = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);
-      
-      const eventsData = await getCalendarEvents(
-        accessToken,
-        bookId,
-        startDate.toISOString(),
-        endDate.toISOString()
-      );
-      
-      // Parse events to TodoItems
-      const todos = eventsData.map(event => parseTodoData(event));
+
+      const todos = await store.listItems(bookId, {
+        range: 'window',
+        fromDate: startDate.toISOString(),
+        toDate: endDate.toISOString(),
+      });
       setTodoItems(todos);
 
-      // Sweep stale items across ALL calendars once per session (non-blocking; per-load ref prevents retries on failure)
+      // Sweep stale items across ALL books once per session (non-blocking; per-load ref prevents retries on failure)
       if (!hasSessionSweepRun() && !isSessionSweepInProgress() && !sweepAttemptedRef.current) {
         sweepAttemptedRef.current = true;
         markSessionSweepInProgress();
-        const sweepAccessToken = accessToken;
         const sweepBookId = bookId;
-        const snapshotCalendars = calendars.length > 0 ? [...calendars] : null;
+        const snapshotBooks = books.length > 0 ? [...books] : null;
         void (async () => {
           try {
-            const sweepCalendars = snapshotCalendars
-              ?? filterArrangeCalendars(await getCalendars(sweepAccessToken));
-            const calendarQueue = sweepCalendars.filter(c => c.id);
+            const sweepBooks = snapshotBooks ?? (await store.listBooks());
             const CONCURRENCY = 5;
             let i = 0;
             let hasFailure = false;
             const processNext = async () => {
-              while (i < calendarQueue.length) {
-                const cal = calendarQueue[i++];
+              while (i < sweepBooks.length) {
+                const book = sweepBooks[i++];
                 try {
-                  const calEvents = await getCalendarEvents(
-                    sweepAccessToken, cal.id!,
-                    startDate.toISOString(), endDate.toISOString()
-                  );
-                  const calTodos = calEvents.map(event => parseTodoData(event));
-                  await sweepStaleTodos(sweepAccessToken, cal.id!, calTodos);
+                  const calItems = await store.listItems(book.id, {
+                    range: 'window',
+                    fromDate: startDate.toISOString(),
+                    toDate: endDate.toISOString(),
+                  });
+                  await store.calendar.sweepStaleItems(book.id, calItems);
                 } catch (calError) {
                   hasFailure = true;
-                  console.error(`Error sweeping calendar ${cal.id}:`, calError);
+                  console.error(`Error sweeping book ${book.id}:`, calError);
                 }
               }
             };
@@ -311,12 +302,13 @@ function MatrixPageContent() {
             // Refresh current view if still on the same book (independent of sweep status)
             try {
               if (bookIdRef.current === sweepBookId) {
-                const refreshedEvents = await getCalendarEvents(
-                  sweepAccessToken, sweepBookId,
-                  startDate.toISOString(), endDate.toISOString()
-                );
+                const refreshed = await store.listItems(sweepBookId, {
+                  range: 'window',
+                  fromDate: startDate.toISOString(),
+                  toDate: endDate.toISOString(),
+                });
                 if (bookIdRef.current === sweepBookId) {
-                  setTodoItems(refreshedEvents.map(event => parseTodoData(event)));
+                  setTodoItems(refreshed);
                 }
               }
             } catch (refreshError) {
@@ -328,9 +320,10 @@ function MatrixPageContent() {
           }
         })();
       }
-    } catch (error: any) {
-      console.error('Error fetching events:', error);
-      setError(error.message || 'Failed to fetch events');
+    } catch (err: unknown) {
+      console.error('Error fetching events:', err);
+      const message = err instanceof Error ? err.message : 'Failed to fetch events';
+      setError(message);
     } finally {
       setLoading(false);
     }
@@ -342,18 +335,16 @@ function MatrixPageContent() {
     }
 
     try {
-      const accessToken = await acquireToken();
-
-      const createdEvent = await createTodoItem(accessToken, bookId, todoItem);
-      const newTodo = parseTodoData(createdEvent);
+      const newTodo = await store.createItem(bookId, todoItem);
       setTodoItems(prev => [...prev, newTodo]);
-    } catch (error: any) {
-      console.error('Error creating TODO item:', error);
-      throw new Error(error.message || 'Failed to create TODO item');
+    } catch (err: unknown) {
+      console.error('Error creating TODO item:', err);
+      const message = err instanceof Error ? err.message : 'Failed to create TODO item';
+      throw new Error(message);
     }
   };
 
-  const handleDragStart = (todo: TodoItem & { id?: string }) => {
+  const handleDragStart = (todo: TodoItemWithId) => {
     setDraggedItem(todo);
   };
 
@@ -362,7 +353,7 @@ function MatrixPageContent() {
   };
 
   const handleDrop = async (urgent: boolean, important: boolean) => {
-    if (!draggedItem || !draggedItem.id || !bookId) return;
+    if (!draggedItem || !bookId) return;
 
     // Don't update if already in correct quadrant
     if (draggedItem.urgent === urgent && draggedItem.important === important) {
@@ -372,9 +363,9 @@ function MatrixPageContent() {
 
     // Optimistic update - update UI immediately
     const previousItems = [...todoItems];
-    setTodoItems(items => 
-      items.map(item => 
-        item.id === draggedItem.id 
+    setTodoItems(items =>
+      items.map(item =>
+        item.id === draggedItem.id
           ? { ...item, urgent, important }
           : item
       )
@@ -382,57 +373,38 @@ function MatrixPageContent() {
     setDraggedItem(null);
 
     try {
-      const accessToken = await acquireToken();
-
-      await updateTodoItem(accessToken, bookId, draggedItem.id, {
-        urgent,
-        important,
-      });
-    } catch (error: any) {
-      console.error('Error updating TODO item:', error);
-      // Revert on error
+      await store.updateItem(bookId, draggedItem.id, { urgent, important });
+    } catch (err: unknown) {
+      console.error('Error updating TODO item:', err);
       setTodoItems(previousItems);
-      setError(error.message || 'Failed to update TODO item');
+      const message = err instanceof Error ? err.message : 'Failed to update TODO item';
+      setError(message);
     }
   };
 
-  const handleStatusChange = async (todo: TodoItem & { id?: string }, newStatus: TodoStatus) => {
-    if (!todo.id || !bookId) return;
+  const handleStatusChange = async (todo: TodoItemWithId, newStatus: TodoStatus) => {
+    if (!bookId) return;
 
     const currentStatus = todo.status || 'new';
     const now = new Date().toISOString();
 
     // Calculate timestamp changes based on status transition
-    let updatedTimestamps: Partial<TodoItem> = {};
-    
-    // Set startDateTime when status changes to inProgress (if not already set)
+    const updatedTimestamps: Partial<TodoItem> = {};
+
     if (newStatus === 'inProgress' && !todo.startDateTime) {
       updatedTimestamps.startDateTime = now;
     }
-    
-    // Remove startDateTime when status changes to new
     if (newStatus === 'new') {
       updatedTimestamps.startDateTime = undefined;
     }
-    
-    // Set timestamps when status changes to finished
     if (newStatus === 'finished') {
-      // Set startDateTime if not already set (direct new → finished)
-      if (!todo.startDateTime) {
-        updatedTimestamps.startDateTime = now;
-      }
-      // Set finishDateTime if not already set
-      if (!todo.finishDateTime) {
-        updatedTimestamps.finishDateTime = now;
-      }
+      if (!todo.startDateTime) updatedTimestamps.startDateTime = now;
+      if (!todo.finishDateTime) updatedTimestamps.finishDateTime = now;
     }
-    
-    // Remove finishDateTime when status changes from finished to anything else
     if (newStatus !== 'finished' && currentStatus === 'finished') {
       updatedTimestamps.finishDateTime = undefined;
     }
 
-    // Optimistic update - update UI immediately
     const previousItems = [...todoItems];
     setTodoItems(items =>
       items.map(item =>
@@ -443,16 +415,12 @@ function MatrixPageContent() {
     );
 
     try {
-      const accessToken = await acquireToken();
-
-      await updateTodoItem(accessToken, bookId, todo.id, {
-        status: newStatus,
-      });
-    } catch (error: any) {
-      console.error('Error updating TODO status:', error);
-      // Revert on error
+      await store.updateItem(bookId, todo.id, { status: newStatus });
+    } catch (err: unknown) {
+      console.error('Error updating TODO status:', err);
       setTodoItems(previousItems);
-      setError(error.message || 'Failed to update status');
+      const message = err instanceof Error ? err.message : 'Failed to update status';
+      setError(message);
     }
   };
 
@@ -468,21 +436,19 @@ function MatrixPageContent() {
     setSelectedTodo(prev => prev ? { ...prev, ...updatedFields } : prev);
 
     try {
-      const accessToken = await acquireToken();
-
-      await updateTodoItem(accessToken, bookId, selectedTodo.id, updatedFields);
-    } catch (error: any) {
-      console.error('Error updating TODO:', error);
+      await store.updateItem(bookId, selectedTodo.id, updatedFields);
+    } catch (err: unknown) {
+      console.error('Error updating TODO:', err);
       setTodoItems(previousItems);
       const reverted = previousItems.find(i => i.id === selectedTodo.id);
       if (reverted) setSelectedTodo(reverted);
-      throw error;
+      throw err;
     }
   };
 
   const bulkUpdateCategories = async (
-    affectedItems: (TodoItem & { id?: string })[],
-    computeNewCategories: (item: TodoItem & { id?: string }) => string[],
+    affectedItems: TodoItemWithId[],
+    computeNewCategories: (item: TodoItemWithId) => string[],
     updateFilterState: () => void,
   ) => {
     if (!bookId || affectedItems.length === 0) return;
@@ -490,7 +456,7 @@ function MatrixPageContent() {
     const previousItems = [...todoItems];
     const previousSelectedCategories = new Set(selectedCategories);
     const previousShowUncategorized = showUncategorized;
-    const affectedIds = new Set(affectedItems.filter(a => a.id).map(a => a.id));
+    const affectedIds = new Set(affectedItems.map(a => a.id));
 
     setTodoItems(items =>
       items.map(item =>
@@ -502,25 +468,23 @@ function MatrixPageContent() {
     updateFilterState();
 
     try {
-      const accessToken = await acquireToken();
       const CONCURRENCY = 5;
       let idx = 0;
       const worker = async () => {
         while (idx < affectedItems.length) {
           const item = affectedItems[idx++];
-          if (!item.id) continue;
-          await updateTodoItem(accessToken, bookId, item.id, {
+          await store.updateItem(bookId, item.id, {
             categories: computeNewCategories(item),
           });
         }
       };
       await Promise.all(Array.from({ length: Math.min(CONCURRENCY, affectedItems.length) }, () => worker()));
-    } catch (error: any) {
-      console.error('Error updating tags:', error);
+    } catch (err: unknown) {
+      console.error('Error updating tags:', err);
       setTodoItems(previousItems);
       setSelectedCategories(previousSelectedCategories);
       setShowUncategorized(previousShowUncategorized);
-      throw error;
+      throw err;
     }
   };
 
@@ -578,15 +542,15 @@ function MatrixPageContent() {
 
   // Push page actions into the shared top bar
   useSetTopBarActions(
-    calendars.length > 1 ? (
+    books.length > 1 ? (
       <select
         className={styles.bookSwitcher}
         value={bookId || ''}
-        onChange={(e) => handleCalendarSwitch(e.target.value)}
+        onChange={(e) => handleBookSwitch(e.target.value)}
       >
-        {calendars.map(cal => (
-          <option key={cal.id} value={cal.id}>
-            {getCalendarDisplayName(cal)}
+        {books.map(b => (
+          <option key={b.id} value={b.id}>
+            {b.name}
           </option>
         ))}
       </select>
@@ -611,7 +575,7 @@ function MatrixPageContent() {
         </button>
       </>
     ),
-    [isAuthenticated, inProgress, loading, bookId, calendars, allCategories],
+    [isAuthenticated, inProgress, loading, bookId, books, allCategories],
   );
 
   if (!bookId) {
diff --git a/src/arrange-v4/app/page.tsx b/src/arrange-v4/app/page.tsx
index 4e4eed6..c2317ab 100644
--- a/src/arrange-v4/app/page.tsx
+++ b/src/arrange-v4/app/page.tsx
@@ -3,59 +3,12 @@
 import { useMsal } from '@azure/msal-react';
 import { loginRequest } from '@/lib/msalConfig';
 import { useRouter } from 'next/navigation';
-import { getCalendars } from '@/lib/graphService';
-import { filterArrangeCalendars } from '@/lib/calendarUtils';
+import { MultiBackendStore } from '@/lib/store/multiStore';
+import { normalizeBookId } from '@/lib/store/types';
 import { getLastBookId } from '@/lib/bookStorage';
 import { useState, useEffect } from 'react';
 import styles from './page.module.css';
 
-/**
- * Determines the appropriate landing page after user authentication
- * @returns The path to navigate to after login
- */
-async function getPostLoginRoute(accessToken: string): Promise<string> {
-  try {
-    const calendars = await getCalendars(accessToken);
-    const arrangeCalendars = filterArrangeCalendars(calendars);
-    
-    if (arrangeCalendars.length === 1 && arrangeCalendars[0].id) {
-      return `/matrix?bookId=${encodeURIComponent(arrangeCalendars[0].id)}`;
-    }
-
-    const savedBookId = getLastBookId();
-    if (savedBookId && arrangeCalendars.some(cal => cal.id === savedBookId)) {
-      return `/matrix?bookId=${encodeURIComponent(savedBookId)}`;
-    }
-  } catch (error) {
-    console.error('Error fetching calendars for route decision:', error);
-  }
-  
-  return '/books';
-}
-
-/**
- * Checks if the matrix view should be available
- */
-async function shouldShowMatrixButton(accessToken: string): Promise<{ show: boolean; bookId?: string }> {
-  try {
-    const calendars = await getCalendars(accessToken);
-    const arrangeCalendars = filterArrangeCalendars(calendars);
-    
-    if (arrangeCalendars.length === 1 && arrangeCalendars[0].id) {
-      return { show: true, bookId: arrangeCalendars[0].id };
-    }
-
-    const savedBookId = getLastBookId();
-    if (savedBookId && arrangeCalendars.some(cal => cal.id === savedBookId)) {
-      return { show: true, bookId: savedBookId };
-    }
-  } catch (error) {
-    console.error('Error checking matrix availability:', error);
-  }
-  
-  return { show: false };
-}
-
 export default function Home() {
   const { instance, accounts, inProgress } = useMsal();
   const router = useRouter();
@@ -63,31 +16,88 @@ export default function Home() {
 
   const isAuthenticated = accounts.length > 0;
 
+  // Background availability check: silent-only token acquisition so we never
+  // open an unexpected popup from a useEffect. If the silent acquisition fails
+  // (e.g. the cached token expired and interaction is needed), we just don't
+  // show the matrix buttons — the user can sign in via the Get Started button.
+  // The `cancelled` flag prevents a slow listBooks() response from a previous
+  // account from clobbering newer state if the user switches accounts mid-flight.
   useEffect(() => {
-    const checkMatrixAvailability = async () => {
-      if (isAuthenticated && accounts[0]) {
-        try {
-          const response = await instance.acquireTokenSilent({
-            ...loginRequest,
-            account: accounts[0],
-          });
-          const result = await shouldShowMatrixButton(response.accessToken);
-          setMatrixAvailable(result);
-        } catch (error) {
-          console.error('Error checking matrix availability:', error);
+    let cancelled = false;
+    const check = async () => {
+      if (!isAuthenticated || !accounts[0]) return;
+      try {
+        const response = await instance.acquireTokenSilent({
+          ...loginRequest,
+          account: accounts[0],
+        });
+        if (cancelled) return;
+        const silentStore = new MultiBackendStore({
+          acquireToken: async () => response.accessToken,
+        });
+        const books = await silentStore.listBooks();
+        if (cancelled) return;
+
+        if (books.length === 1) {
+          setMatrixAvailable({ show: true, bookId: books[0].id });
+          return;
         }
+
+        const savedBookId = normalizeBookId(getLastBookId());
+        if (savedBookId && books.some(b => b.id === savedBookId)) {
+          setMatrixAvailable({ show: true, bookId: savedBookId });
+          return;
+        }
+
+        setMatrixAvailable({ show: false });
+      } catch (error) {
+        if (cancelled) return;
+        // Silent failure is fine for this background check — don't open a popup.
+        // But reset matrixAvailable so stale data from a previous account or
+        // a previously-successful check doesn't linger.
+        setMatrixAvailable({ show: false });
+        console.error('Error checking matrix availability:', error);
       }
     };
 
-    checkMatrixAvailability();
+    check();
+    return () => {
+      cancelled = true;
+    };
   }, [isAuthenticated, accounts, instance]);
 
   const handleLogin = async () => {
     try {
       const result = await instance.loginPopup(loginRequest);
-      const accessToken = result.accessToken;
-      const route = await getPostLoginRoute(accessToken);
-      router.push(route);
+
+      // MSAL's React state hasn't re-rendered yet — useGraphToken would still
+      // return a stale closure that throws "no account". Build a one-shot store
+      // bound to the access token we just got back from loginPopup.
+      const postLoginStore = new MultiBackendStore({
+        acquireToken: async () => result.accessToken,
+      });
+
+      // Wrap the post-login routing decision in its own try/catch. A transient
+      // Graph error must not leave the user stuck on the landing page after a
+      // successful login — fall back to /books in that case.
+      try {
+        const books = await postLoginStore.listBooks();
+
+        if (books.length === 1) {
+          router.push(`/matrix?bookId=${encodeURIComponent(books[0].id)}`);
+          return;
+        }
+
+        const savedBookId = normalizeBookId(getLastBookId());
+        if (savedBookId && books.some(b => b.id === savedBookId)) {
+          router.push(`/matrix?bookId=${encodeURIComponent(savedBookId)}`);
+          return;
+        }
+      } catch (routingError) {
+        console.error('Error during post-login routing — falling back to /books:', routingError);
+      }
+
+      router.push('/books');
     } catch (error) {
       console.error('Login failed:', error);
     }
diff --git a/src/arrange-v4/app/scrum/page.tsx b/src/arrange-v4/app/scrum/page.tsx
index cb3f4a5..810d590 100644
--- a/src/arrange-v4/app/scrum/page.tsx
+++ b/src/arrange-v4/app/scrum/page.tsx
@@ -1,9 +1,8 @@
 'use client';
 
 import React, { useState, useEffect, useCallback, useMemo, Suspense } from 'react';
-import { getCalendarEvents } from '@/lib/graphService';
-import { createTodoItem, updateTodoItem, TodoItem, parseTodoData, TodoStatus, ALL_STATUSES, STATUS_LABELS } from '@/lib/todoDataService';
-import { getCalendarDisplayName } from '@/lib/calendarUtils';
+import { useStore } from '@/lib/store/useStore';
+import { TodoItem, TodoItemWithId, TodoStatus, ALL_STATUSES, STATUS_LABELS } from '@/lib/store/types';
 import { useGraphToken } from '@/lib/hooks/useGraphToken';
 import { useBookId } from '@/lib/hooks/useBookId';
 import { useSetTopBarActions } from '@/components/TopBarProvider';
@@ -58,7 +57,7 @@ const LANE_STYLES: Record<LaneStatus, { lane: string; title: string }> = {
   cancelled: { lane: styles.laneCancelled, title: styles.laneTitleCancelled },
 };
 
-function sortByPriority(items: (TodoItem & { id?: string })[]) {
+function sortByPriority(items: TodoItemWithId[]) {
   return [...items].sort((a, b) => {
     const ai = a.important ? 1 : 0;
     const bi = b.important ? 1 : 0;
@@ -71,14 +70,15 @@ function sortByPriority(items: (TodoItem & { id?: string })[]) {
 }
 
 function ScrumPageContent() {
-  const { acquireToken, isAuthenticated, inProgress, handleLogin: graphLogin } = useGraphToken();
-  const { bookId, calendars, currentCalendarName, handleCalendarSwitch, error: calendarError } = useBookId('/scrum');
+  const { isAuthenticated, inProgress, handleLogin: graphLogin } = useGraphToken();
+  const store = useStore();
+  const { bookId, books, handleBookSwitch, error: bookError } = useBookId('/scrum');
 
-  const [todoItems, setTodoItems] = useState<(TodoItem & { id?: string })[]>([]);
+  const [todoItems, setTodoItems] = useState<TodoItemWithId[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [draggedItem, setDraggedItem] = useState<(TodoItem & { id?: string }) | null>(null);
-  const [selectedTodo, setSelectedTodo] = useState<(TodoItem & { id?: string }) | null>(null);
+  const [draggedItem, setDraggedItem] = useState<TodoItemWithId | null>(null);
+  const [selectedTodo, setSelectedTodo] = useState<TodoItemWithId | null>(null);
   const [showTags, setShowTags] = useState(true);
   const [selectedCategories, setSelectedCategories] = useState<Set<string>>(new Set());
   const [showUncategorized, setShowUncategorized] = useState(false);
@@ -86,7 +86,7 @@ function ScrumPageContent() {
   const [statusFilters, setStatusFilters] = useState<Record<TodoStatus, StatusFilterMode>>(DEFAULT_STATUS_FILTERS);
   const [showStatusFilters, setShowStatusFilters] = useState(false);
 
-  const displayError = error || calendarError;
+  const displayError = error || bookError;
 
   const allCategories = useMemo(() => {
     const cats = new Set<string>();
@@ -126,7 +126,7 @@ function ScrumPageContent() {
   }, [statusFilters]);
 
   const lanes = useMemo(() => {
-    const result = {} as Record<LaneStatus, (TodoItem & { id?: string })[]>;
+    const result = {} as Record<LaneStatus, TodoItemWithId[]>;
     for (const status of LANE_STATUSES) {
       result[status] = sortByPriority(filteredItems.filter(t => (t.status || 'new') === status));
     }
@@ -140,17 +140,17 @@ function ScrumPageContent() {
     setError(null);
 
     try {
-      const accessToken = await acquireToken();
       const today = new Date();
       today.setHours(0, 0, 0, 0);
       const startDate = new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000);
       const endDate = new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000);
 
-      const eventsData = await getCalendarEvents(
-        accessToken, bookId,
-        startDate.toISOString(), endDate.toISOString()
-      );
-      setTodoItems(eventsData.map(event => parseTodoData(event)));
+      const items = await store.listItems(bookId, {
+        range: 'window',
+        fromDate: startDate.toISOString(),
+        toDate: endDate.toISOString(),
+      });
+      setTodoItems(items);
     } catch (err: unknown) {
       console.error('Error fetching events:', err);
       const message = err instanceof Error ? err.message : 'Failed to fetch events';
@@ -158,7 +158,7 @@ function ScrumPageContent() {
     } finally {
       setLoading(false);
     }
-  }, [isAuthenticated, bookId, acquireToken]);
+  }, [isAuthenticated, bookId, store]);
 
   useEffect(() => {
     if (isAuthenticated && inProgress === 'none' && bookId) {
@@ -169,9 +169,7 @@ function ScrumPageContent() {
   const handleAddTodo = async (todoItem: TodoItem) => {
     if (!bookId) throw new Error('No book selected');
     try {
-      const accessToken = await acquireToken();
-      const createdEvent = await createTodoItem(accessToken, bookId, todoItem);
-      const newTodo = parseTodoData(createdEvent);
+      const newTodo = await store.createItem(bookId, todoItem);
       setTodoItems(prev => [...prev, newTodo]);
     } catch (err: unknown) {
       console.error('Error creating TODO item:', err);
@@ -190,15 +188,15 @@ function ScrumPageContent() {
   };
 
   useSetTopBarActions(
-    calendars.length > 1 ? (
+    books.length > 1 ? (
       <select
         className={styles.bookSwitcher}
         value={bookId || ''}
-        onChange={(e) => handleCalendarSwitch(e.target.value)}
+        onChange={(e) => handleBookSwitch(e.target.value)}
       >
-        {calendars.map(cal => (
-          <option key={cal.id} value={cal.id}>
-            {getCalendarDisplayName(cal)}
+        {books.map(b => (
+          <option key={b.id} value={b.id}>
+            {b.name}
           </option>
         ))}
       </select>
@@ -223,10 +221,10 @@ function ScrumPageContent() {
         </button>
       </>
     ),
-    [isAuthenticated, inProgress, loading, bookId, calendars, allCategories],
+    [isAuthenticated, inProgress, loading, bookId, books, allCategories],
   );
 
-  const handleDragStart = (todo: TodoItem & { id?: string }) => {
+  const handleDragStart = (todo: TodoItemWithId) => {
     setDraggedItem(todo);
   };
 
@@ -235,7 +233,7 @@ function ScrumPageContent() {
   };
 
   const handleDrop = async (newStatus: TodoStatus) => {
-    if (!draggedItem || !draggedItem.id || !bookId) return;
+    if (!draggedItem || !bookId) return;
 
     const currentStatus = draggedItem.status || 'new';
     if (currentStatus === newStatus) {
@@ -271,8 +269,7 @@ function ScrumPageContent() {
     setDraggedItem(null);
 
     try {
-      const accessToken = await acquireToken();
-      await updateTodoItem(accessToken, bookId, draggedItem.id, { status: newStatus });
+      await store.updateItem(bookId, draggedItem.id, { status: newStatus });
     } catch (err: unknown) {
       console.error('Error updating TODO status:', err);
       setTodoItems(previousItems);
@@ -292,8 +289,7 @@ function ScrumPageContent() {
     setSelectedTodo(prev => prev ? { ...prev, ...updatedFields } : prev);
 
     try {
-      const accessToken = await acquireToken();
-      await updateTodoItem(accessToken, bookId, selectedTodo.id, updatedFields);
+      await store.updateItem(bookId, selectedTodo.id, updatedFields);
     } catch (err: unknown) {
       console.error('Error updating TODO:', err);
       setTodoItems(previousItems);
@@ -304,8 +300,8 @@ function ScrumPageContent() {
   };
 
   const bulkUpdateCategories = async (
-    affectedItems: (TodoItem & { id?: string })[],
-    computeNewCategories: (item: TodoItem & { id?: string }) => string[],
+    affectedItems: TodoItemWithId[],
+    computeNewCategories: (item: TodoItemWithId) => string[],
     updateFilterState: () => void,
   ) => {
     if (!bookId || affectedItems.length === 0) return;
@@ -313,7 +309,7 @@ function ScrumPageContent() {
     const previousItems = [...todoItems];
     const previousSelectedCategories = new Set(selectedCategories);
     const previousShowUncategorized = showUncategorized;
-    const affectedIds = new Set(affectedItems.filter(a => a.id).map(a => a.id));
+    const affectedIds = new Set(affectedItems.map(a => a.id));
 
     setTodoItems(items =>
       items.map(item =>
@@ -325,14 +321,12 @@ function ScrumPageContent() {
     updateFilterState();
 
     try {
-      const accessToken = await acquireToken();
       const CONCURRENCY = 5;
       let idx = 0;
       const worker = async () => {
         while (idx < affectedItems.length) {
           const item = affectedItems[idx++];
-          if (!item.id) continue;
-          await updateTodoItem(accessToken, bookId, item.id, {
+          await store.updateItem(bookId, item.id, {
             categories: computeNewCategories(item),
           });
         }
diff --git a/src/arrange-v4/components/AddTodoItem.tsx b/src/arrange-v4/components/AddTodoItem.tsx
index 797872f..6da9ccf 100644
--- a/src/arrange-v4/components/AddTodoItem.tsx
+++ b/src/arrange-v4/components/AddTodoItem.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
-import { TodoItem, TodoStatus } from '@/lib/todoDataService';
+import { TodoItem, TodoStatus } from '@/lib/store/types';
 import ChecklistEditor from './ChecklistEditor';
 import TagPicker from './TagPicker';
 import styles from './AddTodoItem.module.css';
diff --git a/src/arrange-v4/components/CalendarList.tsx b/src/arrange-v4/components/CalendarList.tsx
index c5659a2..399c716 100644
--- a/src/arrange-v4/components/CalendarList.tsx
+++ b/src/arrange-v4/components/CalendarList.tsx
@@ -2,18 +2,17 @@
 
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { useRouter } from 'next/navigation';
-import { Calendar } from '@/lib/graphService';
-import { getCalendarDisplayName } from '@/lib/calendarUtils';
+import type { Book } from '@/lib/store/types';
 import styles from './CalendarList.module.css';
 
 interface CalendarListProps {
-  calendars: Calendar[];
+  books: Book[];
   loading: boolean;
   error: string | null;
-  onDeleteCalendar: (calendarId: string) => Promise<void>;
+  onDeleteBook: (bookId: string) => Promise<void>;
 }
 
-export default function CalendarList({ calendars, loading, error, onDeleteCalendar }: CalendarListProps) {
+export default function CalendarList({ books, loading, error, onDeleteBook }: CalendarListProps) {
   const [deletingId, setDeletingId] = useState<string | null>(null);
   const [confirmingId, setConfirmingId] = useState<string | null>(null);
   const [dismissResetKey, setDismissResetKey] = useState(0);
@@ -47,34 +46,28 @@ export default function CalendarList({ calendars, loading, error, onDeleteCalend
     }
   }, [confirmingId]);
 
-  const handleCalendarClick = (calendar: Calendar) => {
-    if (calendar.id) {
-      router.push(`/matrix?bookId=${encodeURIComponent(calendar.id)}`);
-    }
+  const handleBookClick = (book: Book) => {
+    router.push(`/matrix?bookId=${encodeURIComponent(book.id)}`);
   };
 
-  const handleDelete = useCallback(async (calendar: Calendar) => {
-    if (!calendar.id) return;
-
-    setDeletingId(calendar.id);
+  const handleDelete = useCallback(async (book: Book) => {
+    setDeletingId(book.id);
     try {
-      await onDeleteCalendar(calendar.id);
+      await onDeleteBook(book.id);
     } catch (error) {
       console.error('Failed to delete book:', error);
       alert('Failed to delete book. Please try again.');
     } finally {
-      const calId = calendar.id;
+      const bookId = book.id;
       setDeletingId(null);
-      setConfirmingId(prev => prev === calId ? null : prev);
+      setConfirmingId(prev => prev === bookId ? null : prev);
       // Defer focus restoration until delete button remounts after confirmation row unmounts
-      if (calId) {
-        requestAnimationFrame(() => {
-          const btn = deleteButtonRefs.current.get(calId);
-          if (btn) btn.focus();
-        });
-      }
+      requestAnimationFrame(() => {
+        const btn = deleteButtonRefs.current.get(bookId);
+        if (btn) btn.focus();
+      });
     }
-  }, [onDeleteCalendar]);
+  }, [onDeleteBook]);
   if (loading) {
     return (
       <div className={styles.loading}>
@@ -92,7 +85,7 @@ export default function CalendarList({ calendars, loading, error, onDeleteCalend
     );
   }
 
-  if (calendars.length === 0) {
+  if (books.length === 0) {
     return (
       <div className={styles.empty}>
         <p className={styles.emptyTitle}>No books yet</p>
@@ -107,66 +100,64 @@ export default function CalendarList({ calendars, loading, error, onDeleteCalend
     <div>
       <h2 className={styles.sectionTitle}>Your Books</h2>
       <div className={styles.grid}>
-        {calendars.map((calendar) => (
+        {books.map((book) => (
           <div
-            key={calendar.id}
+            key={book.id}
             className={styles.calendarCard}
-            onClick={() => handleCalendarClick(calendar)}
+            onClick={() => handleBookClick(book)}
             role="button"
             tabIndex={0}
             onKeyDown={(e) => {
               if ((e.target as HTMLElement).closest('button')) return;
               if (e.key === 'Enter' || e.key === ' ') {
                 e.preventDefault();
-                handleCalendarClick(calendar);
+                handleBookClick(book);
               }
             }}
           >
             <div className={styles.calendarTop}>
               <div>
                 <h3 className={styles.calendarName}>
-                  {getCalendarDisplayName(calendar)}
+                  {book.name}
                 </h3>
-                {calendar.owner && (
+                {book.owner && (
                   <p className={styles.calendarOwner}>
-                    Owner: {calendar.owner.name || calendar.owner.address}
+                    Owner: {book.owner.name || book.owner.address}
                   </p>
                 )}
                 <div className={styles.badges}>
-                  {calendar.canEdit && (
+                  {book.canEdit && (
                     <span className={`${styles.badge} ${styles.badgeGreen}`}>
                       Can Edit
                     </span>
                   )}
-                  {calendar.canShare && (
+                  {book.canShare && (
                     <span className={`${styles.badge} ${styles.badgeBlue}`}>
                       Can Share
                     </span>
                   )}
-                  {calendar.canViewPrivateItems && (
+                  {book.canViewPrivateItems && (
                     <span className={`${styles.badge} ${styles.badgePurple}`}>
                       View Private
                     </span>
                   )}
                 </div>
               </div>
-              {calendar.color && (
+              {book.color && (
                 <div
                   className={styles.colorDot}
-                  style={{ backgroundColor: calendar.color }}
-                  title={`Color: ${calendar.color}`}
+                  style={{ backgroundColor: book.color }}
+                  title={`Color: ${book.color}`}
                 />
               )}
             </div>
-            {calendar.id && (
-              <p className={styles.calendarId} title={calendar.id}>
-                ID: {calendar.id}
-              </p>
-            )}
+            <p className={styles.calendarId} title={book.id}>
+              ID: {book.id}
+            </p>
             <div className={styles.calendarFooter}>
-              {calendar.id && (() => {
-                const bookName = getCalendarDisplayName(calendar);
-                const bookId = calendar.id;
+              {(() => {
+                const bookName = book.name;
+                const bookId = book.id;
                 return confirmingId === bookId ? (
                   <div
                     className={styles.deleteConfirmRow}
@@ -191,7 +182,7 @@ export default function CalendarList({ calendars, loading, error, onDeleteCalend
                     </button>
                     <button
                       ref={confirmingId === bookId ? confirmButtonRef : undefined}
-                      onClick={() => handleDelete(calendar)}
+                      onClick={() => handleDelete(book)}
                       disabled={!!deletingId}
                       className={styles.deleteConfirmButton}
                       aria-label={`Confirm delete ${bookName}`}
@@ -202,10 +193,10 @@ export default function CalendarList({ calendars, loading, error, onDeleteCalend
                 ) : (
                   <button
                     ref={(el) => {
-                      if (el && bookId) deleteButtonRefs.current.set(bookId, el);
-                      else if (!el && bookId) deleteButtonRefs.current.delete(bookId);
+                      if (el) deleteButtonRefs.current.set(bookId, el);
+                      else deleteButtonRefs.current.delete(bookId);
                     }}
-                    onClick={(e) => { e.stopPropagation(); setConfirmingId(bookId ?? null); }}
+                    onClick={(e) => { e.stopPropagation(); setConfirmingId(bookId); }}
                     disabled={!!deletingId}
                     className={styles.deleteButton}
                     aria-label={`Delete ${bookName}`}
diff --git a/src/arrange-v4/components/ManageTags.tsx b/src/arrange-v4/components/ManageTags.tsx
index b10b4af..a7ebe3f 100644
--- a/src/arrange-v4/components/ManageTags.tsx
+++ b/src/arrange-v4/components/ManageTags.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect, useMemo } from 'react';
-import { TodoItem } from '@/lib/todoDataService';
+import { TodoItem } from '@/lib/store/types';
 import styles from './ManageTags.module.css';
 
 interface ManageTagsProps {
diff --git a/src/arrange-v4/components/ScrumCard.tsx b/src/arrange-v4/components/ScrumCard.tsx
index c9ac88e..9b90168 100644
--- a/src/arrange-v4/components/ScrumCard.tsx
+++ b/src/arrange-v4/components/ScrumCard.tsx
@@ -1,14 +1,14 @@
 'use client';
 
-import { TodoItem } from '@/lib/todoDataService';
+import { TodoItemWithId } from '@/lib/store/types';
 import { formatRelativeDate } from '@/lib/dateUtils';
 import styles from './ScrumCard.module.css';
 
 interface ScrumCardProps {
-  todo: TodoItem & { id?: string };
-  onDragStart?: (todo: TodoItem & { id?: string }) => void;
+  todo: TodoItemWithId;
+  onDragStart?: (todo: TodoItemWithId) => void;
   onDragEnd?: () => void;
-  onClick?: (todo: TodoItem & { id?: string }) => void;
+  onClick?: (todo: TodoItemWithId) => void;
 }
 
 export default function ScrumCard({ todo, onDragStart, onDragEnd, onClick }: ScrumCardProps) {
diff --git a/src/arrange-v4/components/ViewTodoItem.tsx b/src/arrange-v4/components/ViewTodoItem.tsx
index 59e228e..5ed1478 100644
--- a/src/arrange-v4/components/ViewTodoItem.tsx
+++ b/src/arrange-v4/components/ViewTodoItem.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback } from 'react';
-import { TodoItem, TodoStatus, STATUS_LABELS } from '@/lib/todoDataService';
+import { TodoItem, TodoStatus, STATUS_LABELS } from '@/lib/store/types';
 import ChecklistEditor from './ChecklistEditor';
 import TagPicker from './TagPicker';
 import styles from './AddTodoItem.module.css';
diff --git a/src/arrange-v4/lib/calendarUtils.ts b/src/arrange-v4/lib/calendarUtils.ts
deleted file mode 100644
index 3f60316..0000000
--- a/src/arrange-v4/lib/calendarUtils.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Calendar } from './graphService';
-
-const ARRANGE_SUFFIX_REGEX = / by arrange$/i;
-
-export function isArrangeCalendar(calendar: Calendar): boolean {
-  return ARRANGE_SUFFIX_REGEX.test(calendar.name || '');
-}
-
-export function filterArrangeCalendars(calendars: Calendar[]): Calendar[] {
-  return calendars.filter(isArrangeCalendar);
-}
-
-export function getCalendarDisplayName(calendar: Calendar): string {
-  return calendar.name?.replace(ARRANGE_SUFFIX_REGEX, '') || calendar.name || 'Untitled';
-}
diff --git a/src/arrange-v4/lib/graphService.ts b/src/arrange-v4/lib/graphService.ts
index 155947a..bdc1a85 100644
--- a/src/arrange-v4/lib/graphService.ts
+++ b/src/arrange-v4/lib/graphService.ts
@@ -1,22 +1,13 @@
 import { Client } from '@microsoft/microsoft-graph-client';
-import { AccountInfo } from '@azure/msal-browser';
-
-export interface Calendar {
-  id?: string;
-  name?: string;
-  color?: string;
-  canEdit?: boolean;
-  canShare?: boolean;
-  canViewPrivateItems?: boolean;
-  owner?: {
-    name?: string;
-    address?: string;
-  };
-}
 
 /**
- * Creates an authenticated Microsoft Graph client
+ * Low-level Microsoft Graph utilities.
+ *
+ * After the storage abstraction landed, this file is intentionally minimal:
+ * just an authenticated client factory plus the one user-info endpoint that
+ * the Books page calls directly. All calendar CRUD lives in `lib/store/calendar/`.
  */
+
 export function createGraphClient(accessToken: string): Client {
   return Client.init({
     authProvider: (done) => {
@@ -25,199 +16,12 @@ export function createGraphClient(accessToken: string): Client {
   });
 }
 
-/**
- * Fetches all calendars for the authenticated user
- * Handles pagination to fetch all calendars
- */
-export async function getCalendars(accessToken: string): Promise<Calendar[]> {
-  const client = createGraphClient(accessToken);
-  const allCalendars: Calendar[] = [];
-  
-  try {
-    let response = await client.api('/me/calendars').top(100).get();
-    allCalendars.push(...(response.value || []));
-
-    // Handle pagination
-    while (response['@odata.nextLink']) {
-      response = await client.api(response['@odata.nextLink']).get();
-      allCalendars.push(...(response.value || []));
-    }
-
-    return allCalendars;
-  } catch (error) {
-    console.error('Error fetching calendars:', error);
-    throw error;
-  }
+export interface UserInfo {
+  displayName?: string;
+  userPrincipalName?: string;
 }
 
-/**
- * Creates a new calendar for the authenticated user
- */
-export async function createCalendar(accessToken: string, name: string): Promise<Calendar> {
+export async function getUserInfo(accessToken: string): Promise<UserInfo> {
   const client = createGraphClient(accessToken);
-  
-  try {
-    const calendar = {
-      name: name
-    };
-    
-    const response = await client.api('/me/calendars').post(calendar);
-    return response;
-  } catch (error) {
-    console.error('Error creating calendar:', error);
-    throw error;
-  }
-}
-
-/**
- * Deletes a calendar by ID
- */
-export async function deleteCalendar(accessToken: string, calendarId: string): Promise<void> {
-  const client = createGraphClient(accessToken);
-  
-  try {
-    await client.api(`/me/calendars/${calendarId}`).delete();
-  } catch (error) {
-    console.error('Error deleting calendar:', error);
-    throw error;
-  }
-}
-
-/**
- * Fetches user information
- */
-export async function getUserInfo(accessToken: string) {
-  const client = createGraphClient(accessToken);
-  
-  try {
-    const user = await client.api('/me').get();
-    return user;
-  } catch (error) {
-    console.error('Error fetching user info:', error);
-    throw error;
-  }
-}
-
-/**
- * Event response from Graph API
- */
-export interface CalendarEvent {
-  id?: string;
-  subject?: string;
-  body?: {
-    contentType: string;
-    content: string;
-  };
-  start?: {
-    dateTime: string;
-    timeZone: string;
-  };
-  end?: {
-    dateTime: string;
-    timeZone: string;
-  };
-  categories?: string[];
-  createdDateTime?: string;
-  lastModifiedDateTime?: string;
-}
-
-/**
- * Converts a Graph API datetime object to ISO string
- * The Graph API returns datetime in a specific timezone, we need to convert it properly
- */
-export function convertGraphDateTimeToISO(dateTimeObj?: { dateTime: string; timeZone: string }): string | undefined {
-  if (!dateTimeObj?.dateTime) return undefined;
-  
-  // If timezone is UTC, append 'Z'
-  if (dateTimeObj.timeZone === 'UTC') {
-    return `${dateTimeObj.dateTime}Z`;
-  }
-  
-  // For other timezones, we need to handle them properly
-  // The dateTime string from Graph API is in the specified timezone
-  // We'll treat it as a local time string and create a Date object
-  // Note: This is a simplified approach. For production, consider using a library like date-fns-tz
-  try {
-    const date = new Date(dateTimeObj.dateTime);
-    // If the parsing succeeded, return ISO string
-    if (!isNaN(date.getTime())) {
-      return date.toISOString();
-    }
-  } catch (error) {
-    console.error('Error parsing datetime:', error);
-  }
-  
-  return undefined;
-}
-
-/**
- * Fetches events from a calendar within a given time range
- * Handles pagination to fetch all events
- */
-export async function getCalendarEvents(
-  accessToken: string,
-  calendarId: string,
-  startDateTime: string,
-  endDateTime: string
-): Promise<CalendarEvent[]> {
-  const client = createGraphClient(accessToken);
-  const allEvents: CalendarEvent[] = [];
-
-  try {
-    let response = await client
-      .api(`/me/calendars/${calendarId}/calendarView`)
-      .query({
-        startDateTime,
-        endDateTime,
-      })
-      .top(100)
-      .select('id,createdDateTime,lastModifiedDateTime,categories,subject,body,start,end')
-      .get();
-    
-    allEvents.push(...(response.value || []));
-
-    // Handle pagination
-    while (response['@odata.nextLink']) {
-      response = await client.api(response['@odata.nextLink']).get();
-      allEvents.push(...(response.value || []));
-    }
-
-    return allEvents;
-  } catch (error) {
-    console.error('Error fetching calendar events:', error);
-    throw error;
-  }
-}
-
-/**
- * Fetches ALL events from a calendar (no date range filter).
- * Uses the /events endpoint instead of /calendarView so that
- * items whose dates fall outside a sliding window are still returned.
- */
-export async function getAllCalendarEvents(
-  accessToken: string,
-  calendarId: string
-): Promise<CalendarEvent[]> {
-  const client = createGraphClient(accessToken);
-  const allEvents: CalendarEvent[] = [];
-
-  try {
-    let response = await client
-      .api(`/me/calendars/${calendarId}/events`)
-      .top(100)
-      .select('id,createdDateTime,lastModifiedDateTime,categories,subject,body,start,end')
-      .get();
-
-    allEvents.push(...(response.value || []));
-
-    while (response['@odata.nextLink']) {
-      response = await client.api(response['@odata.nextLink']).get();
-      allEvents.push(...(response.value || []));
-    }
-
-    return allEvents;
-  } catch (error) {
-    console.error('Error fetching all calendar events:', error);
-    throw error;
-  }
+  return client.api('/me').get();
 }
diff --git a/src/arrange-v4/lib/hooks/useBookId.ts b/src/arrange-v4/lib/hooks/useBookId.ts
index 55e5aad..296d75b 100644
--- a/src/arrange-v4/lib/hooks/useBookId.ts
+++ b/src/arrange-v4/lib/hooks/useBookId.ts
@@ -2,80 +2,95 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { useSearchParams, useRouter } from 'next/navigation';
-import { getCalendars, Calendar } from '@/lib/graphService';
-import { filterArrangeCalendars, getCalendarDisplayName } from '@/lib/calendarUtils';
+import { useStore } from '@/lib/store/useStore';
+import { normalizeBookId } from '@/lib/store/types';
+import type { Book } from '@/lib/store/types';
 import { getLastBookId, setLastBookId, clearLastBookId } from '@/lib/bookStorage';
 import { useGraphToken } from './useGraphToken';
 
 /**
- * Shared hook for resolving the selected book (calendar).
+ * Shared hook for resolving the selected book.
  * Reads bookId from search params, falls back to localStorage,
- * fetches arrange calendars, validates the bookId, and provides
+ * fetches books from the store, validates the bookId, and provides
  * a book-switcher helper.
  *
+ * Backward compat: unprefixed IDs (from URLs/localStorage created before the
+ * storage abstraction landed) are accepted and normalized on read. URL params
+ * are also redirected to their prefixed form so the canonical shape wins.
+ *
  * @param routePrefix  The route path prefix for this page (e.g. '/matrix', '/cancelled').
- *                     Used to build redirect URLs with the bookId query param.
  */
 export function useBookId(routePrefix: string) {
   const searchParams = useSearchParams();
   const router = useRouter();
-  const bookId = searchParams.get('bookId');
+  const rawBookId = searchParams.get('bookId');
+  const bookId = normalizeBookId(rawBookId);
 
-  const { acquireToken, isAuthenticated, inProgress } = useGraphToken();
+  const { isAuthenticated, inProgress } = useGraphToken();
+  const store = useStore();
 
-  const [calendars, setCalendars] = useState<Calendar[]>([]);
+  const [books, setBooks] = useState<Book[]>([]);
   const [error, setError] = useState<string | null>(null);
 
-  // Redirect to saved book if no bookId in URL
+  // Normalize unprefixed URL bookIds to their prefixed form for canonical URLs.
+  useEffect(() => {
+    if (rawBookId && bookId && rawBookId !== bookId) {
+      router.replace(`${routePrefix}?bookId=${encodeURIComponent(bookId)}`);
+    }
+  }, [rawBookId, bookId, router, routePrefix]);
+
+  // Redirect logic: distinguish missing URL param from invalid URL param.
+  // Only fall back to saved-book localStorage when there's no `?bookId` at
+  // all. An invalid value (present but unknown prefix) must not silently load
+  // a different book — that's misleading. Send to /books in that case.
   useEffect(() => {
-    if (!bookId) {
-      const saved = getLastBookId();
+    if (!rawBookId) {
+      const saved = normalizeBookId(getLastBookId());
       if (saved) {
         router.replace(`${routePrefix}?bookId=${encodeURIComponent(saved)}`);
       }
+    } else if (!bookId) {
+      router.replace('/books');
     }
-  }, [bookId, router, routePrefix]);
+  }, [rawBookId, bookId, router, routePrefix]);
 
-  // Fetch calendars and validate bookId
-  const fetchCalendars = useCallback(async () => {
+  const fetchBooks = useCallback(async () => {
     if (!isAuthenticated || inProgress !== 'none') return;
     setError(null);
     try {
-      const accessToken = await acquireToken();
-      const all = await getCalendars(accessToken);
-      const arrangeCalendars = filterArrangeCalendars(all);
-      setCalendars(arrangeCalendars);
+      const all = await store.listBooks();
+      setBooks(all);
 
-      if (bookId && !arrangeCalendars.some(c => c.id === bookId)) {
+      if (bookId && !all.some(b => b.id === bookId)) {
         clearLastBookId();
         router.replace('/books');
       } else if (bookId) {
         setLastBookId(bookId);
       }
     } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : 'Failed to fetch calendars';
-      console.error('Error fetching calendars:', err);
+      const message = err instanceof Error ? err.message : 'Failed to fetch books';
+      console.error('Error fetching books:', err);
       setError(message);
     }
-  }, [isAuthenticated, inProgress, acquireToken, bookId, router]);
+  }, [isAuthenticated, inProgress, store, bookId, router]);
 
   useEffect(() => {
-    fetchCalendars(); // eslint-disable-line react-hooks/set-state-in-effect -- async data fetching sets state after await
-  }, [fetchCalendars]);
+    fetchBooks(); // eslint-disable-line react-hooks/set-state-in-effect -- async data fetching sets state after await
+  }, [fetchBooks]);
 
-  const handleCalendarSwitch = useCallback((calendarId: string) => {
-    router.push(`${routePrefix}?bookId=${encodeURIComponent(calendarId)}`);
+  const handleBookSwitch = useCallback((nextBookId: string) => {
+    router.push(`${routePrefix}?bookId=${encodeURIComponent(nextBookId)}`);
   }, [router, routePrefix]);
 
-  const currentCalendar = calendars.find(c => c.id === bookId);
-  const currentCalendarName = currentCalendar ? getCalendarDisplayName(currentCalendar) : bookId;
+  const currentBook = books.find(b => b.id === bookId);
+  const currentBookName = currentBook ? currentBook.name : bookId;
 
   return {
     bookId,
-    calendars,
-    currentCalendarName,
-    handleCalendarSwitch,
-    fetchCalendars,
+    books,
+    currentBookName,
+    handleBookSwitch,
+    fetchBooks,
     error,
     setError,
   };
diff --git a/src/arrange-v4/lib/store/calendar/CalendarStore.ts b/src/arrange-v4/lib/store/calendar/CalendarStore.ts
new file mode 100644
index 0000000..a2a3f3b
--- /dev/null
+++ b/src/arrange-v4/lib/store/calendar/CalendarStore.ts
@@ -0,0 +1,439 @@
+import { Client } from '@microsoft/microsoft-graph-client';
+import { createGraphClient } from '@/lib/graphService';
+import type {
+  AcquireToken,
+  Book,
+  CreateBookOptions,
+  ListItemsOptions,
+  StoreOptions,
+  TodoItem,
+  TodoItemWithId,
+  TodoStore,
+} from '../types';
+import { isNonTerminalStatus } from '../types';
+import type { Calendar, CalendarEvent } from './types';
+import { ARRANGE_SUFFIX, ARRANGE_SUFFIX_REGEX, calendarToBook, convertGraphDateTimeToISO, filterArrangeCalendars, getCalendarDisplayName } from './utils';
+import { computeBumpedDates } from './bump';
+
+const ARRANGE_DATA_START_MARKER = '====ArrangeDataStart====';
+const ARRANGE_DATA_END_MARKER = '====ArrangeDataEnd====';
+
+interface StoredTodoBody {
+  status: string;
+  urgent: boolean;
+  important: boolean;
+  checklist: string[];
+  remarks: TodoItem['remarks'];
+  startDateTime: string | null;
+  finishDateTime: string | null;
+  originalEtsDateTime: string | null;
+  originalEtaDateTime: string | null;
+}
+
+/**
+ * Implements TodoStore against the Microsoft Graph Calendar API.
+ *
+ * Each book is an Outlook calendar whose name ends with " by arrange".
+ * Each item is a calendar event whose body holds a JSON blob between
+ * `====ArrangeDataStart====` / `====ArrangeDataEnd====` markers.
+ */
+export class CalendarStore implements TodoStore {
+  private readonly acquireToken: AcquireToken;
+  /**
+   * In-flight token acquisition. Concurrent calls share the same promise to
+   * avoid (a) redundant silent acquisitions and (b) — in the worst case where
+   * silent acquisition has failed and a popup is required — multiple
+   * simultaneous popup attempts that would all error with `interaction_in_progress`.
+   * Cleared as soon as the in-flight promise settles, so subsequent calls
+   * re-validate the token freshness.
+   */
+  private tokenInFlight: Promise<string> | null = null;
+
+  constructor(opts: StoreOptions) {
+    this.acquireToken = opts.acquireToken;
+  }
+
+  private getToken(): Promise<string> {
+    if (this.tokenInFlight) return this.tokenInFlight;
+    const p = this.acquireToken();
+    this.tokenInFlight = p;
+    // Attach both fulfillment and rejection handlers so we don't create an
+    // unhandled rejection from a chained promise. The returned chained
+    // promise from .then(clear, clear) cannot reject because we handle both
+    // settlement cases with a no-throw clear function.
+    const clear = () => {
+      if (this.tokenInFlight === p) this.tokenInFlight = null;
+    };
+    p.then(clear, clear);
+    return p;
+  }
+
+  private async client(): Promise<Client> {
+    const token = await this.getToken();
+    return createGraphClient(token);
+  }
+
+  /* ---- Books ---- */
+
+  async listBooks(): Promise<Book[]> {
+    const client = await this.client();
+    const all: Calendar[] = [];
+
+    let response = await client.api('/me/calendars').top(100).get();
+    all.push(...(response.value || []));
+    while (response['@odata.nextLink']) {
+      response = await client.api(response['@odata.nextLink']).get();
+      all.push(...(response.value || []));
+    }
+
+    return filterArrangeCalendars(all)
+      .map(calendarToBook)
+      .filter((b): b is Book => b !== null);
+  }
+
+  async createBook(name: string, opts: CreateBookOptions): Promise<Book> {
+    if (opts.backend !== 'calendar') {
+      throw new Error(`CalendarStore cannot create a book with backend '${opts.backend}'.`);
+    }
+    const client = await this.client();
+    // Case-insensitive suffix check so names like "Project by Arrange" don't get a
+    // duplicate " by arrange" appended.
+    const calendarName = ARRANGE_SUFFIX_REGEX.test(name) ? name : `${name}${ARRANGE_SUFFIX}`;
+    const calendar: Calendar = await client.api('/me/calendars').post({ name: calendarName });
+    const book = calendarToBook(calendar);
+    if (!book) {
+      throw new Error('Calendar creation returned no ID.');
+    }
+    return book;
+  }
+
+  async deleteBook(bookId: string): Promise<void> {
+    const calendarId = unwrap(bookId);
+    const client = await this.client();
+    await client.api(`/me/calendars/${calendarId}`).delete();
+  }
+
+  /* ---- Items ---- */
+
+  async listItems(bookId: string, opts: ListItemsOptions): Promise<TodoItemWithId[]> {
+    const calendarId = unwrap(bookId);
+    const client = await this.client();
+
+    const events: CalendarEvent[] = [];
+
+    if (opts.range === 'window') {
+      if (!opts.fromDate || !opts.toDate) {
+        throw new Error("listItems with range='window' requires fromDate and toDate.");
+      }
+      let response = await client
+        .api(`/me/calendars/${calendarId}/calendarView`)
+        .query({ startDateTime: opts.fromDate, endDateTime: opts.toDate })
+        .top(100)
+        .select('id,createdDateTime,lastModifiedDateTime,categories,subject,body,start,end')
+        .get();
+      events.push(...(response.value || []));
+      while (response['@odata.nextLink']) {
+        response = await client.api(response['@odata.nextLink']).get();
+        events.push(...(response.value || []));
+      }
+    } else {
+      // 'all'
+      let response = await client
+        .api(`/me/calendars/${calendarId}/events`)
+        .top(100)
+        .select('id,createdDateTime,lastModifiedDateTime,categories,subject,body,start,end')
+        .get();
+      events.push(...(response.value || []));
+      while (response['@odata.nextLink']) {
+        response = await client.api(response['@odata.nextLink']).get();
+        events.push(...(response.value || []));
+      }
+    }
+
+    return events
+      .map(eventToTodoItem)
+      .filter((i): i is TodoItemWithId => i !== null);
+  }
+
+  async createItem(bookId: string, item: TodoItem): Promise<TodoItemWithId> {
+    const calendarId = unwrap(bookId);
+    const client = await this.client();
+
+    const status = item.status || 'new';
+    const stored: StoredTodoBody = {
+      status,
+      urgent: item.urgent || false,
+      important: item.important || false,
+      checklist: item.checklist || [],
+      remarks: item.remarks || null,
+      startDateTime: status === 'inProgress' ? new Date().toISOString() : null,
+      finishDateTime: null,
+      originalEtsDateTime: null,
+      originalEtaDateTime: null,
+    };
+
+    const now = new Date();
+    const start = item.etsDateTime ? new Date(item.etsDateTime) : new Date(now.getTime() + 60 * 60 * 1000);
+    const end = item.etaDateTime ? new Date(item.etaDateTime) : new Date(start.getTime() + 30 * 60 * 1000);
+
+    const event = {
+      subject: item.subject,
+      body: { contentType: 'html', content: buildBodyHtml(stored) },
+      start: { dateTime: start.toISOString(), timeZone: 'UTC' },
+      end: { dateTime: end.toISOString(), timeZone: 'UTC' },
+      categories: item.categories || [],
+      reminderMinutesBeforeStart: 0,
+      isReminderOn: false,
+    };
+
+    const created: CalendarEvent = await client.api(`/me/calendars/${calendarId}/events`).post(event);
+    const parsed = eventToTodoItem(created);
+    if (!parsed) throw new Error('Created event returned no ID.');
+    return parsed;
+  }
+
+  async updateItem(bookId: string, itemId: string, updates: Partial<TodoItem>): Promise<TodoItemWithId> {
+    const calendarId = unwrap(bookId);
+    const client = await this.client();
+
+    const existingEvent: CalendarEvent = await client
+      .api(`/me/calendars/${calendarId}/events/${itemId}`)
+      .get();
+
+    let existingStored: StoredTodoBody = {
+      status: 'new',
+      urgent: false,
+      important: false,
+      checklist: [],
+      remarks: null,
+      startDateTime: null,
+      finishDateTime: null,
+      originalEtsDateTime: null,
+      originalEtaDateTime: null,
+    };
+    if (existingEvent.body?.content) {
+      const parsed = parseStoredBody(existingEvent.body);
+      if (parsed) existingStored = { ...existingStored, ...parsed };
+    }
+
+    const merged: StoredTodoBody = {
+      ...existingStored,
+      status: updates.status !== undefined ? updates.status : existingStored.status,
+      urgent: updates.urgent !== undefined ? updates.urgent : existingStored.urgent,
+      important: updates.important !== undefined ? updates.important : existingStored.important,
+      checklist: updates.checklist !== undefined ? updates.checklist : existingStored.checklist,
+      remarks: updates.remarks !== undefined ? updates.remarks : existingStored.remarks,
+      // Honor caller-provided values for the timestamp/original-date body fields.
+      // The status-transition logic below may further adjust startDateTime /
+      // finishDateTime when status changes, but only when the caller didn't set
+      // them explicitly.
+      startDateTime:
+        updates.startDateTime !== undefined ? updates.startDateTime ?? null : existingStored.startDateTime,
+      finishDateTime:
+        updates.finishDateTime !== undefined ? updates.finishDateTime ?? null : existingStored.finishDateTime,
+      originalEtsDateTime:
+        updates.originalEtsDateTime !== undefined
+          ? updates.originalEtsDateTime ?? null
+          : existingStored.originalEtsDateTime,
+      originalEtaDateTime:
+        updates.originalEtaDateTime !== undefined
+          ? updates.originalEtaDateTime ?? null
+          : existingStored.originalEtaDateTime,
+    };
+
+    // Timestamp transitions based on status changes — only fill in fields the
+    // caller didn't explicitly set. Lets pages pass `{ status: 'inProgress' }`
+    // and have the store derive startDateTime, while still allowing an explicit
+    // override when needed.
+    if (updates.status !== undefined) {
+      if (updates.status === 'inProgress' && !existingStored.startDateTime && updates.startDateTime === undefined) {
+        merged.startDateTime = new Date().toISOString();
+      }
+      if (updates.status === 'new' && updates.startDateTime === undefined) {
+        merged.startDateTime = null;
+      }
+      if (updates.status === 'finished') {
+        const now = new Date().toISOString();
+        if (!existingStored.startDateTime && updates.startDateTime === undefined) merged.startDateTime = now;
+        if (!existingStored.finishDateTime && updates.finishDateTime === undefined) merged.finishDateTime = now;
+      }
+      if (updates.status !== 'finished' && existingStored.status === 'finished' && updates.finishDateTime === undefined) {
+        merged.finishDateTime = null;
+      }
+    }
+
+    // Date-bump: move stale non-terminal items forward, preserving originals
+    const effectiveStatus = (merged.status || 'new') as TodoItem['status'];
+    const callerSetDates = updates.etsDateTime !== undefined || updates.etaDateTime !== undefined;
+    let nextEts = updates.etsDateTime;
+    let nextEta = updates.etaDateTime;
+
+    if (isNonTerminalStatus(effectiveStatus) && !callerSetDates) {
+      const currentEts = convertGraphDateTimeToISO(existingEvent.start);
+      const currentEta = convertGraphDateTimeToISO(existingEvent.end);
+      const bumped = computeBumpedDates(currentEts, currentEta);
+      if (bumped) {
+        if (!merged.originalEtsDateTime) merged.originalEtsDateTime = currentEts ?? null;
+        if (!merged.originalEtaDateTime) merged.originalEtaDateTime = currentEta ?? null;
+        nextEts = bumped.etsDateTime;
+        nextEta = bumped.etaDateTime;
+      }
+    }
+
+    const patch: Record<string, unknown> = {
+      body: { contentType: 'html', content: buildBodyHtml(merged) },
+    };
+    if (updates.subject !== undefined) patch.subject = updates.subject;
+    if (updates.categories !== undefined) patch.categories = updates.categories;
+    if (nextEts !== undefined) {
+      patch.start = { dateTime: new Date(nextEts).toISOString(), timeZone: 'UTC' };
+    }
+    if (nextEta !== undefined) {
+      patch.end = { dateTime: new Date(nextEta).toISOString(), timeZone: 'UTC' };
+    }
+
+    const updated: CalendarEvent = await client
+      .api(`/me/calendars/${calendarId}/events/${itemId}`)
+      .patch(patch);
+
+    const parsed = eventToTodoItem(updated);
+    if (!parsed) throw new Error('Updated event returned no ID.');
+    return parsed;
+  }
+
+  async deleteItem(bookId: string, itemId: string): Promise<void> {
+    const calendarId = unwrap(bookId);
+    const client = await this.client();
+    await client.api(`/me/calendars/${calendarId}/events/${itemId}`).delete();
+  }
+
+  /* ---- Calendar-specific: not on the TodoStore interface ---- */
+
+  /**
+   * Bumps stale non-terminal items forward to today. Returns the IDs of items
+   * that were bumped. Calendar-specific: compensates for the ±30-day
+   * calendarView window.
+   */
+  async sweepStaleItems(bookId: string, items: TodoItemWithId[]): Promise<string[]> {
+    const stale = items.filter(
+      (item) =>
+        item.id &&
+        isNonTerminalStatus(item.status) &&
+        computeBumpedDates(item.etsDateTime, item.etaDateTime) !== null,
+    );
+    if (stale.length === 0) return [];
+
+    const bumped: string[] = [];
+    const concurrency = 5;
+    let index = 0;
+
+    const worker = async (): Promise<void> => {
+      while (true) {
+        const i = index++;
+        if (i >= stale.length) break;
+        const item = stale[i];
+        try {
+          await this.updateItem(bookId, item.id, {});
+          bumped.push(item.id);
+        } catch (error) {
+          console.error(`Error bumping stale TODO ${item.id}:`, error);
+        }
+      }
+    };
+
+    const workers = Math.min(concurrency, stale.length);
+    await Promise.all(Array.from({ length: workers }, () => worker()));
+    return bumped;
+  }
+
+  /**
+   * Look up the display name of a book without listing them all.
+   * Useful when only the bookId is in the URL and we want to render the name.
+   */
+  async getBookDisplayName(bookId: string): Promise<string | null> {
+    const calendarId = unwrap(bookId);
+    const client = await this.client();
+    try {
+      const calendar: Calendar = await client.api(`/me/calendars/${calendarId}`).get();
+      return getCalendarDisplayName(calendar);
+    } catch {
+      return null;
+    }
+  }
+}
+
+/* ---- Helpers ---- */
+
+function unwrap(bookId: string): string {
+  // Strip the 'cal:' prefix; tolerate already-unprefixed inputs for backward compat.
+  return bookId.startsWith('cal:') ? bookId.slice(4) : bookId;
+}
+
+function stripHtmlTags(html: string): string {
+  const div = document.createElement('div');
+  div.innerHTML = html;
+  return div.textContent || div.innerText || '';
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+function buildBodyHtml(stored: StoredTodoBody): string {
+  const json = JSON.stringify(stored, null, 2);
+  return `<pre>${ARRANGE_DATA_START_MARKER}\n${escapeHtml(json)}\n${ARRANGE_DATA_END_MARKER}</pre>`;
+}
+
+function extractBodyText(body: { contentType?: string; content?: string }): string {
+  if (!body?.content) return '';
+  return body.contentType === 'html' ? stripHtmlTags(body.content) : body.content;
+}
+
+function parseStoredBody(body: { contentType?: string; content?: string }): Partial<StoredTodoBody> | null {
+  const content = extractBodyText(body);
+  const startIndex = content.indexOf(ARRANGE_DATA_START_MARKER);
+  const endIndex = content.indexOf(ARRANGE_DATA_END_MARKER);
+  if (startIndex === -1 || endIndex === -1) return null;
+  try {
+    const jsonContent = content
+      .substring(startIndex + ARRANGE_DATA_START_MARKER.length, endIndex)
+      .trim();
+    return JSON.parse(jsonContent);
+  } catch (error) {
+    console.error('Error parsing stored TODO body:', error);
+    return null;
+  }
+}
+
+function eventToTodoItem(event: CalendarEvent): TodoItemWithId | null {
+  if (!event.id) return null;
+  const item: TodoItemWithId = {
+    id: event.id,
+    subject: event.subject || '',
+    categories: event.categories || [],
+    etsDateTime: convertGraphDateTimeToISO(event.start),
+    etaDateTime: convertGraphDateTimeToISO(event.end),
+  };
+
+  if (event.body?.content) {
+    const stored = parseStoredBody(event.body);
+    if (stored) {
+      item.status = stored.status as TodoItem['status'];
+      item.urgent = stored.urgent;
+      item.important = stored.important;
+      item.checklist = stored.checklist;
+      item.remarks = stored.remarks;
+      item.startDateTime = stored.startDateTime ?? undefined;
+      item.finishDateTime = stored.finishDateTime ?? undefined;
+      item.originalEtsDateTime = stored.originalEtsDateTime ?? null;
+      item.originalEtaDateTime = stored.originalEtaDateTime ?? null;
+    }
+  }
+
+  return item;
+}
diff --git a/src/arrange-v4/lib/store/calendar/bump.ts b/src/arrange-v4/lib/store/calendar/bump.ts
new file mode 100644
index 0000000..390b5c0
--- /dev/null
+++ b/src/arrange-v4/lib/store/calendar/bump.ts
@@ -0,0 +1,45 @@
+/**
+ * Date-bump logic for the Calendar backend.
+ *
+ * Any non-terminal item (`new`, `inProgress`, `blocked`) whose ETS is before
+ * the start of today (UTC) is bumped forward to today. This compensates for
+ * the ±30-day calendarView window used by the Matrix/Scrum fetches: without
+ * bumping, items that fall behind would drift out of view. The bump applies
+ * the moment an item becomes stale (i.e. its ETS rolls into yesterday) — not
+ * only after it falls outside the window. The original planned dates are
+ * preserved on the item so the user can see when it was first scheduled.
+ *
+ * This is calendar-backend-specific because it compensates for the
+ * calendarView window; other backends that return all items don't need it.
+ */
+
+export function computeBumpedDates(
+  etsDateTime: string | undefined,
+  etaDateTime: string | undefined,
+  now: Date = new Date()
+): { etsDateTime: string; etaDateTime: string } | null {
+  if (!etsDateTime || !etaDateTime) return null;
+
+  const ets = new Date(etsDateTime);
+  const eta = new Date(etaDateTime);
+
+  if (isNaN(ets.getTime()) || isNaN(eta.getTime())) return null;
+
+  const todayStart = new Date(now);
+  todayStart.setUTCHours(0, 0, 0, 0);
+
+  if (ets >= todayStart) return null;
+
+  const duration = eta.getTime() - ets.getTime();
+  if (duration <= 0) return null;
+
+  const bumpedEts = new Date(todayStart);
+  bumpedEts.setUTCHours(ets.getUTCHours(), ets.getUTCMinutes(), ets.getUTCSeconds(), ets.getUTCMilliseconds());
+
+  const bumpedEta = new Date(bumpedEts.getTime() + duration);
+
+  return {
+    etsDateTime: bumpedEts.toISOString(),
+    etaDateTime: bumpedEta.toISOString(),
+  };
+}
diff --git a/src/arrange-v4/lib/store/calendar/types.ts b/src/arrange-v4/lib/store/calendar/types.ts
new file mode 100644
index 0000000..9c0f568
--- /dev/null
+++ b/src/arrange-v4/lib/store/calendar/types.ts
@@ -0,0 +1,37 @@
+/**
+ * Graph API response shapes used by the calendar backend.
+ * Kept narrow — only the fields the store actually reads.
+ */
+
+export interface Calendar {
+  id?: string;
+  name?: string;
+  color?: string;
+  canEdit?: boolean;
+  canShare?: boolean;
+  canViewPrivateItems?: boolean;
+  owner?: {
+    name?: string;
+    address?: string;
+  };
+}
+
+export interface CalendarEvent {
+  id?: string;
+  subject?: string;
+  body?: {
+    contentType: string;
+    content: string;
+  };
+  start?: {
+    dateTime: string;
+    timeZone: string;
+  };
+  end?: {
+    dateTime: string;
+    timeZone: string;
+  };
+  categories?: string[];
+  createdDateTime?: string;
+  lastModifiedDateTime?: string;
+}
diff --git a/src/arrange-v4/lib/store/calendar/utils.ts b/src/arrange-v4/lib/store/calendar/utils.ts
new file mode 100644
index 0000000..b52a3c1
--- /dev/null
+++ b/src/arrange-v4/lib/store/calendar/utils.ts
@@ -0,0 +1,61 @@
+import type { Book } from '../types';
+import { makeBookId } from '../types';
+import type { Calendar } from './types';
+
+const ARRANGE_SUFFIX_REGEX = / by arrange$/i;
+export { ARRANGE_SUFFIX_REGEX };
+
+/** The suffix appended to a calendar name to mark it as an Arrange book. */
+export const ARRANGE_SUFFIX = ' by arrange';
+
+export function isArrangeCalendar(calendar: Calendar): boolean {
+  return ARRANGE_SUFFIX_REGEX.test(calendar.name || '');
+}
+
+export function filterArrangeCalendars(calendars: Calendar[]): Calendar[] {
+  return calendars.filter(isArrangeCalendar);
+}
+
+export function getCalendarDisplayName(calendar: Calendar): string {
+  return calendar.name?.replace(ARRANGE_SUFFIX_REGEX, '') || calendar.name || 'Untitled';
+}
+
+/**
+ * Converts a Graph Calendar resource into the abstract Book shape.
+ */
+export function calendarToBook(calendar: Calendar): Book | null {
+  if (!calendar.id) return null;
+  return {
+    id: makeBookId('calendar', calendar.id),
+    name: getCalendarDisplayName(calendar),
+    backend: 'calendar',
+    color: calendar.color,
+    owner: calendar.owner,
+    canEdit: calendar.canEdit,
+    canShare: calendar.canShare,
+    canViewPrivateItems: calendar.canViewPrivateItems,
+  };
+}
+
+/**
+ * Converts a Graph dateTime object to ISO string.
+ * Calendar-specific because only the Graph Calendar response uses this shape.
+ */
+export function convertGraphDateTimeToISO(dateTimeObj?: { dateTime: string; timeZone: string }): string | undefined {
+  if (!dateTimeObj?.dateTime) return undefined;
+
+  if (dateTimeObj.timeZone === 'UTC') {
+    return `${dateTimeObj.dateTime}Z`;
+  }
+
+  try {
+    const date = new Date(dateTimeObj.dateTime);
+    if (!isNaN(date.getTime())) {
+      return date.toISOString();
+    }
+  } catch (error) {
+    console.error('Error parsing datetime:', error);
+  }
+
+  return undefined;
+}
diff --git a/src/arrange-v4/lib/store/multiStore.ts b/src/arrange-v4/lib/store/multiStore.ts
new file mode 100644
index 0000000..c4b545b
--- /dev/null
+++ b/src/arrange-v4/lib/store/multiStore.ts
@@ -0,0 +1,76 @@
+import type {
+  Book,
+  CreateBookOptions,
+  ListItemsOptions,
+  StoreOptions,
+  TodoItem,
+  TodoItemWithId,
+  TodoStore,
+} from './types';
+import { parseBookId } from './types';
+import { CalendarStore } from './calendar/CalendarStore';
+
+/**
+ * Routes every call to the right backend implementation based on the
+ * book ID prefix. Today there's only one backend (Calendar), so this
+ * is effectively a pass-through with cheap validation. The structure
+ * exists so future backends can plug in without touching consumers.
+ */
+export class MultiBackendStore implements TodoStore {
+  private readonly calendarStore: CalendarStore;
+
+  constructor(opts: StoreOptions) {
+    this.calendarStore = new CalendarStore(opts);
+  }
+
+  /** Direct access to the calendar-specific store for backend-specific methods (e.g. sweep). */
+  get calendar(): CalendarStore {
+    return this.calendarStore;
+  }
+
+  async listBooks(): Promise<Book[]> {
+    // Only one backend today; future versions would merge results from each.
+    return this.calendarStore.listBooks();
+  }
+
+  createBook(name: string, opts: CreateBookOptions): Promise<Book> {
+    return this.routeByBackend(opts.backend).createBook(name, opts);
+  }
+
+  deleteBook(bookId: string): Promise<void> {
+    return this.routeByBookId(bookId).deleteBook(bookId);
+  }
+
+  listItems(bookId: string, opts: ListItemsOptions): Promise<TodoItemWithId[]> {
+    return this.routeByBookId(bookId).listItems(bookId, opts);
+  }
+
+  createItem(bookId: string, item: TodoItem): Promise<TodoItemWithId> {
+    return this.routeByBookId(bookId).createItem(bookId, item);
+  }
+
+  updateItem(bookId: string, itemId: string, updates: Partial<TodoItem>): Promise<TodoItemWithId> {
+    return this.routeByBookId(bookId).updateItem(bookId, itemId, updates);
+  }
+
+  deleteItem(bookId: string, itemId: string): Promise<void> {
+    return this.routeByBookId(bookId).deleteItem(bookId, itemId);
+  }
+
+  private routeByBookId(bookId: string): TodoStore {
+    const parsed = parseBookId(bookId);
+    if (!parsed) {
+      throw new Error(`Cannot route call: unrecognized book ID "${bookId}".`);
+    }
+    return this.routeByBackend(parsed.backend);
+  }
+
+  private routeByBackend(backend: string): TodoStore {
+    switch (backend) {
+      case 'calendar':
+        return this.calendarStore;
+      default:
+        throw new Error(`Unsupported backend "${backend}".`);
+    }
+  }
+}
diff --git a/src/arrange-v4/lib/store/types.ts b/src/arrange-v4/lib/store/types.ts
new file mode 100644
index 0000000..7a4e7bc
--- /dev/null
+++ b/src/arrange-v4/lib/store/types.ts
@@ -0,0 +1,159 @@
+/**
+ * Storage abstraction layer types.
+ *
+ * Designed for a single backend today (Calendar) but with the seams for
+ * additional backends later. Book IDs are prefixed at the storage boundary
+ * (e.g. `cal:<calendarId>`) so the router can dispatch to the right
+ * implementation. Item IDs are bare backend IDs since they only exist
+ * within the context of a Book.
+ */
+
+export type TodoStatus = 'new' | 'inProgress' | 'blocked' | 'finished' | 'cancelled';
+
+export const ALL_STATUSES: TodoStatus[] = ['new', 'inProgress', 'blocked', 'finished', 'cancelled'];
+
+export const STATUS_LABELS: Record<TodoStatus, string> = {
+  new: 'New',
+  inProgress: 'In Progress',
+  blocked: 'Blocked',
+  finished: 'Finished',
+  cancelled: 'Cancelled',
+};
+
+const NON_TERMINAL_STATUSES: TodoStatus[] = ['new', 'inProgress', 'blocked'];
+
+export function isNonTerminalStatus(status: TodoStatus | undefined): boolean {
+  return NON_TERMINAL_STATUSES.includes(status || 'new');
+}
+
+export type BackendKind = 'calendar';
+
+export interface TodoItem {
+  subject: string;
+  categories?: string[];
+  etsDateTime?: string;
+  etaDateTime?: string;
+  urgent?: boolean;
+  important?: boolean;
+  status?: TodoStatus;
+  startDateTime?: string | null;
+  finishDateTime?: string | null;
+  originalEtsDateTime?: string | null;
+  originalEtaDateTime?: string | null;
+  checklist?: string[];
+  remarks?: {
+    type: 'text' | 'markdown';
+    content: string;
+  } | null;
+}
+
+export type TodoItemWithId = TodoItem & { id: string };
+
+export interface Book {
+  /** Prefixed identifier, e.g. `cal:<calendarId>`. Routing is done off the prefix. */
+  id: string;
+  /** Display name with any backend-specific suffix already stripped. */
+  name: string;
+  backend: BackendKind;
+  /** Backend-specific metadata follows. Optional because not every backend exposes these. */
+  color?: string;
+  owner?: { name?: string; address?: string };
+  canEdit?: boolean;
+  canShare?: boolean;
+  canViewPrivateItems?: boolean;
+}
+
+export type ListItemsRange = 'all' | 'window';
+
+export interface ListItemsOptions {
+  /**
+   * Explicit range. No implicit defaults — callers must pick.
+   * - 'window' requires `fromDate` and `toDate`.
+   * - 'all' ignores date bounds.
+   */
+  range: ListItemsRange;
+  fromDate?: string;
+  toDate?: string;
+}
+
+export interface CreateBookOptions {
+  /**
+   * Required even when only one backend exists today, so existing callers
+   * are future-proof when additional backends land.
+   */
+  backend: BackendKind;
+}
+
+export interface TodoStore {
+  listBooks(): Promise<Book[]>;
+  createBook(name: string, opts: CreateBookOptions): Promise<Book>;
+  deleteBook(bookId: string): Promise<void>;
+
+  listItems(bookId: string, opts: ListItemsOptions): Promise<TodoItemWithId[]>;
+  createItem(bookId: string, item: TodoItem): Promise<TodoItemWithId>;
+  updateItem(bookId: string, itemId: string, updates: Partial<TodoItem>): Promise<TodoItemWithId>;
+  deleteItem(bookId: string, itemId: string): Promise<void>;
+}
+
+/**
+ * Token acquisition callback. The store does not import MSAL directly so
+ * that future backends with different auth providers can plug in without
+ * touching the interface.
+ */
+export type AcquireToken = () => Promise<string>;
+
+export interface StoreOptions {
+  acquireToken: AcquireToken;
+}
+
+/* ---- ID prefix helpers ---- */
+
+const PREFIX_SEPARATOR = ':';
+const BACKEND_PREFIXES: Record<BackendKind, string> = {
+  calendar: 'cal',
+};
+
+export function makeBookId(backend: BackendKind, nativeId: string): string {
+  return `${BACKEND_PREFIXES[backend]}${PREFIX_SEPARATOR}${nativeId}`;
+}
+
+/**
+ * Parses a prefixed book ID. Accepts unprefixed values (treated as legacy
+ * calendar IDs) so old URLs and localStorage entries from before the
+ * abstraction landed keep working.
+ *
+ * Returns `null` for values that look prefixed (contain `:`) but use an
+ * unknown prefix — these should not be silently normalized to a Calendar
+ * ID, since that would undermine the prefix-dispatch contract.
+ */
+export function parseBookId(bookId: string): { backend: BackendKind; nativeId: string } | null {
+  if (!bookId) return null;
+
+  for (const [backend, prefix] of Object.entries(BACKEND_PREFIXES) as [BackendKind, string][]) {
+    const fullPrefix = `${prefix}${PREFIX_SEPARATOR}`;
+    if (bookId.startsWith(fullPrefix)) {
+      const nativeId = bookId.slice(fullPrefix.length);
+      if (!nativeId) return null;
+      return { backend, nativeId };
+    }
+  }
+
+  // If the value contains a prefix separator but didn't match any known backend,
+  // reject it — Graph calendar IDs are base64-flavored and don't contain ':'.
+  if (bookId.includes(PREFIX_SEPARATOR)) return null;
+
+  // Legacy / unprefixed: treat as a raw calendar ID for backward compatibility.
+  return { backend: 'calendar', nativeId: bookId };
+}
+
+/**
+ * Normalizes an ID to its prefixed form. Idempotent.
+ * Used at the boundary where untrusted external IDs (URL params, localStorage)
+ * enter the system.
+ */
+export function normalizeBookId(bookId: string | null | undefined): string | null {
+  if (!bookId) return null;
+  const parsed = parseBookId(bookId);
+  if (!parsed) return null;
+  return makeBookId(parsed.backend, parsed.nativeId);
+}
diff --git a/src/arrange-v4/lib/store/useStore.ts b/src/arrange-v4/lib/store/useStore.ts
new file mode 100644
index 0000000..0f10540
--- /dev/null
+++ b/src/arrange-v4/lib/store/useStore.ts
@@ -0,0 +1,16 @@
+'use client';
+
+import { useMemo } from 'react';
+import { useGraphToken } from '@/lib/hooks/useGraphToken';
+import { MultiBackendStore } from './multiStore';
+
+/**
+ * React hook that returns a `MultiBackendStore` bound to the current user's
+ * token acquisition function. The store instance is memoized so identity is
+ * stable across renders, which keeps dependent useEffect/useCallback hooks
+ * from re-firing on every parent render.
+ */
+export function useStore(): MultiBackendStore {
+  const { acquireToken } = useGraphToken();
+  return useMemo(() => new MultiBackendStore({ acquireToken }), [acquireToken]);
+}
diff --git a/src/arrange-v4/lib/todoDataService.ts b/src/arrange-v4/lib/todoDataService.ts
deleted file mode 100644
index 36bcd76..0000000
--- a/src/arrange-v4/lib/todoDataService.ts
+++ /dev/null
@@ -1,441 +0,0 @@
-import { createGraphClient, CalendarEvent, convertGraphDateTimeToISO } from './graphService';
-
-/**
- * Constants for TODO data markers
- */
-const ARRANGE_DATA_START_MARKER = '====ArrangeDataStart====';
-const ARRANGE_DATA_END_MARKER = '====ArrangeDataEnd====';
-
-/**
- * TODO Item status values
- */
-export type TodoStatus = 'new' | 'inProgress' | 'blocked' | 'finished' | 'cancelled';
-
-/**
- * All possible status values
- */
-export const ALL_STATUSES: TodoStatus[] = ['new', 'inProgress', 'blocked', 'finished', 'cancelled'];
-
-/**
- * Human-readable labels for each status
- */
-export const STATUS_LABELS: Record<TodoStatus, string> = {
-  new: 'New',
-  inProgress: 'In Progress',
-  blocked: 'Blocked',
-  finished: 'Finished',
-  cancelled: 'Cancelled',
-};
-
-/**
- * TODO Item interface based on the spec
- */
-export interface TodoItem {
-  subject: string;
-  categories?: string[];
-  etsDateTime?: string; // ETS: Estimated Time to Start - the planned/scheduled start time (calendar event start)
-  etaDateTime?: string; // ETA: Estimated Time of Accomplishment - the planned/scheduled end time (calendar event end)
-  urgent?: boolean;
-  important?: boolean;
-  status?: TodoStatus;
-  startDateTime?: string | null; // Actual start time - set when status changes to 'inProgress'
-  finishDateTime?: string | null; // Actual finish time - set when status changes to 'finished'
-  originalEtsDateTime?: string | null; // Original planned start time, preserved when dates are bumped forward
-  originalEtaDateTime?: string | null; // Original planned end time, preserved when dates are bumped forward
-  checklist?: string[];
-  remarks?: {
-    type: 'text' | 'markdown';
-    content: string;
-  } | null;
-}
-
-const NON_TERMINAL_STATUSES: TodoStatus[] = ['new', 'inProgress', 'blocked'];
-
-export function isNonTerminalStatus(status: TodoStatus | undefined): boolean {
-  return NON_TERMINAL_STATUSES.includes(status || 'new');
-}
-
-/**
- * Computes bumped dates for a stale TODO item.
- * Moves the date to today while preserving the original time-of-day and duration.
- * Returns null if no bump is needed (dates are already today or in the future).
- */
-export function computeBumpedDates(
-  etsDateTime: string | undefined,
-  etaDateTime: string | undefined,
-  now: Date = new Date()
-): { etsDateTime: string; etaDateTime: string } | null {
-  if (!etsDateTime || !etaDateTime) return null;
-
-  const ets = new Date(etsDateTime);
-  const eta = new Date(etaDateTime);
-
-  if (isNaN(ets.getTime()) || isNaN(eta.getTime())) return null;
-
-  const todayStart = new Date(now);
-  todayStart.setUTCHours(0, 0, 0, 0);
-
-  // No bump needed if the event start is today or in the future
-  if (ets >= todayStart) return null;
-
-  const duration = eta.getTime() - ets.getTime();
-  if (duration <= 0) return null;
-
-  // Move to today, preserving the original time-of-day (UTC)
-  const bumpedEts = new Date(todayStart);
-  bumpedEts.setUTCHours(ets.getUTCHours(), ets.getUTCMinutes(), ets.getUTCSeconds(), ets.getUTCMilliseconds());
-
-  const bumpedEta = new Date(bumpedEts.getTime() + duration);
-
-  return {
-    etsDateTime: bumpedEts.toISOString(),
-    etaDateTime: bumpedEta.toISOString(),
-  };
-}
-
-/**
- * Creates a TODO item as an event in the specified calendar
- * Based on TODO Item Spec - stores custom fields in body JSON
- */
-export async function createTodoItem(
-  accessToken: string,
-  calendarId: string,
-  todoItem: TodoItem
-): Promise<CalendarEvent> {
-  const client = createGraphClient(accessToken);
-
-  // Build body content with TODO-specific data stored as JSON
-  const status = todoItem.status || 'new';
-  const todoBodyData = {
-    status: status,
-    urgent: todoItem.urgent || false,
-    important: todoItem.important || false,
-    checklist: todoItem.checklist || [],
-    remarks: todoItem.remarks || null,
-    startDateTime: status === 'inProgress' ? new Date().toISOString() : null, // Set when status is inProgress
-    finishDateTime: null, // Set when status changes to finished
-    originalEtsDateTime: null,
-    originalEtaDateTime: null,
-  };
-
-  const bodyContent = buildBodyHtml(todoBodyData);
-
-  // Default to 1 hour from now if no times specified
-  const now = new Date();
-  const startTime = todoItem.etsDateTime ? new Date(todoItem.etsDateTime) : new Date(now.getTime() + 60 * 60 * 1000);
-  const endTime = todoItem.etaDateTime ? new Date(todoItem.etaDateTime) : new Date(startTime.getTime() + 30 * 60 * 1000);
-
-  const event = {
-    subject: todoItem.subject,
-    body: {
-      contentType: 'html',
-      content: bodyContent,
-    },
-    start: {
-      dateTime: startTime.toISOString(),
-      timeZone: 'UTC',
-    },
-    end: {
-      dateTime: endTime.toISOString(),
-      timeZone: 'UTC',
-    },
-    categories: todoItem.categories || [],
-    reminderMinutesBeforeStart: 0,
-    isReminderOn: false,
-  };
-
-  try {
-    const response = await client.api(`/me/calendars/${calendarId}/events`).post(event);
-    return response;
-  } catch (error) {
-    console.error('Error creating TODO item:', error);
-    throw error;
-  }
-}
-
-/**
- * Strips HTML tags and extracts plain text (used for backward compat with old plain-text bodies)
- */
-function stripHtmlTags(html: string): string {
-  const div = document.createElement('div');
-  div.innerHTML = html;
-  return div.textContent || div.innerText || '';
-}
-
-function escapeHtml(str: string): string {
-  return str
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;');
-}
-
-/**
- * Builds the HTML body content for a calendar event, wrapping the TODO JSON data
- * in a <pre> tag between markers for easy extraction and human-readable display.
- */
-function buildBodyHtml(todoData: object): string {
-  const json = JSON.stringify(todoData, null, 2);
-  return `<pre>${ARRANGE_DATA_START_MARKER}\n${escapeHtml(json)}\n${ARRANGE_DATA_END_MARKER}</pre>`;
-}
-
-/**
- * Extracts the raw text content from an event body, handling both HTML and plain text.
- */
-function extractBodyText(body: { contentType?: string; content?: string }): string {
-  if (!body?.content) return '';
-
-  let content = body.content;
-  if (body.contentType === 'html') {
-    content = stripHtmlTags(content);
-  }
-  return content;
-}
-
-/**
- * Parses TODO-specific data from an event body
- */
-export function parseTodoData(event: CalendarEvent): TodoItem & { id?: string } {
-  const todoItem: TodoItem & { id?: string } = {
-    id: event.id,
-    subject: event.subject || '',
-    categories: event.categories || [],
-    etsDateTime: convertGraphDateTimeToISO(event.start),
-    etaDateTime: convertGraphDateTimeToISO(event.end),
-  };
-
-  // Extract TODO data from body if present
-  if (event.body?.content) {
-    const content = extractBodyText(event.body);
-    
-    const startIndex = content.indexOf(ARRANGE_DATA_START_MARKER);
-    const endIndex = content.indexOf(ARRANGE_DATA_END_MARKER);
-    
-    if (startIndex !== -1 && endIndex !== -1) {
-      try {
-        const jsonContent = content.substring(startIndex + ARRANGE_DATA_START_MARKER.length, endIndex).trim();
-        const todoData = JSON.parse(jsonContent);
-        todoItem.status = todoData.status;
-        todoItem.urgent = todoData.urgent;
-        todoItem.important = todoData.important;
-        todoItem.checklist = todoData.checklist;
-        todoItem.remarks = todoData.remarks;
-        todoItem.startDateTime = todoData.startDateTime ?? undefined;
-        todoItem.finishDateTime = todoData.finishDateTime ?? undefined;
-        todoItem.originalEtsDateTime = todoData.originalEtsDateTime || null;
-        todoItem.originalEtaDateTime = todoData.originalEtaDateTime || null;
-      } catch (error) {
-        console.error('Error parsing TODO data:', error);
-        console.error('Failed JSON content:', content.substring(startIndex, endIndex + ARRANGE_DATA_END_MARKER.length));
-      }
-    }
-  }
-
-  return todoItem;
-}
-
-/**
- * Updates a TODO item (event) in the specified calendar
- */
-export async function updateTodoItem(
-  accessToken: string,
-  calendarId: string,
-  eventId: string,
-  todoItem: Partial<TodoItem>
-): Promise<CalendarEvent> {
-  const client = createGraphClient(accessToken);
-
-  // Fetch existing event first to preserve data
-  const existingEvent = await client
-    .api(`/me/calendars/${calendarId}/events/${eventId}`)
-    .get();
-
-  // Parse existing TODO data
-  let existingTodoData: any = {
-    status: 'new',
-    urgent: false,
-    important: false,
-    checklist: [],
-    remarks: null,
-    startDateTime: null,
-    finishDateTime: null,
-  };
-
-  if (existingEvent.body?.content) {
-    const content = extractBodyText(existingEvent.body);
-    
-    const startIndex = content.indexOf(ARRANGE_DATA_START_MARKER);
-    const endIndex = content.indexOf(ARRANGE_DATA_END_MARKER);
-    
-    if (startIndex !== -1 && endIndex !== -1) {
-      try {
-        const jsonContent = content.substring(startIndex + ARRANGE_DATA_START_MARKER.length, endIndex).trim();
-        existingTodoData = JSON.parse(jsonContent);
-      } catch (error) {
-        console.error('Error parsing existing TODO data:', error);
-      }
-    }
-  }
-
-  // Merge updates
-  const updatedTodoData = {
-    ...existingTodoData,
-    status: todoItem.status !== undefined ? todoItem.status : existingTodoData.status,
-    urgent: todoItem.urgent !== undefined ? todoItem.urgent : existingTodoData.urgent,
-    important: todoItem.important !== undefined ? todoItem.important : existingTodoData.important,
-    checklist: todoItem.checklist !== undefined ? todoItem.checklist : existingTodoData.checklist,
-    remarks: todoItem.remarks !== undefined ? todoItem.remarks : existingTodoData.remarks,
-  };
-
-  // Update timestamps based on status changes
-  if (todoItem.status !== undefined) {
-    // Set startDateTime when status changes to inProgress
-    if (todoItem.status === 'inProgress' && !existingTodoData.startDateTime) {
-      updatedTodoData.startDateTime = new Date().toISOString();
-    }
-    // Remove startDateTime when status changes to new
-    if (todoItem.status === 'new') {
-      updatedTodoData.startDateTime = null;
-    }
-    // Set finishDateTime when status changes to finished
-    if (todoItem.status === 'finished') {
-      const now = new Date().toISOString();
-      // Also set startDateTime if not already set (for direct new → finished transitions)
-      if (!existingTodoData.startDateTime) {
-        updatedTodoData.startDateTime = now;
-      }
-      if (!existingTodoData.finishDateTime) {
-        updatedTodoData.finishDateTime = now;
-      }
-    }
-    // Remove finishDateTime when status changes from finished to anything else
-    if (todoItem.status !== 'finished' && existingTodoData.status === 'finished') {
-      updatedTodoData.finishDateTime = null;
-    }
-  }
-
-  // Date-bump logic: move stale non-terminal items to today
-  const effectiveStatus = updatedTodoData.status || 'new';
-  const callerSetDates = todoItem.etsDateTime !== undefined || todoItem.etaDateTime !== undefined;
-
-  if (isNonTerminalStatus(effectiveStatus) && !callerSetDates) {
-    const currentEts = convertGraphDateTimeToISO(existingEvent.start);
-    const currentEta = convertGraphDateTimeToISO(existingEvent.end);
-    const bumped = computeBumpedDates(currentEts, currentEta);
-
-    if (bumped) {
-      // Preserve original planned dates (only on first bump)
-      if (!updatedTodoData.originalEtsDateTime) {
-        updatedTodoData.originalEtsDateTime = currentEts;
-      }
-      if (!updatedTodoData.originalEtaDateTime) {
-        updatedTodoData.originalEtaDateTime = currentEta;
-      }
-
-      todoItem = {
-        ...todoItem,
-        etsDateTime: bumped.etsDateTime,
-        etaDateTime: bumped.etaDateTime,
-      };
-    }
-  }
-
-  const bodyContent = buildBodyHtml(updatedTodoData);
-
-  const updateData: any = {
-    body: {
-      contentType: 'html',
-      content: bodyContent,
-    },
-  };
-
-  if (todoItem.subject !== undefined) {
-    updateData.subject = todoItem.subject;
-  }
-  if (todoItem.categories !== undefined) {
-    updateData.categories = todoItem.categories;
-  }
-  if (todoItem.etsDateTime !== undefined) {
-    updateData.start = {
-      dateTime: new Date(todoItem.etsDateTime).toISOString(),
-      timeZone: 'UTC',
-    };
-  }
-  if (todoItem.etaDateTime !== undefined) {
-    updateData.end = {
-      dateTime: new Date(todoItem.etaDateTime).toISOString(),
-      timeZone: 'UTC',
-    };
-  }
-
-  try {
-    const response = await client
-      .api(`/me/calendars/${calendarId}/events/${eventId}`)
-      .patch(updateData);
-    return response;
-  } catch (error) {
-    console.error('Error updating TODO item:', error);
-    throw error;
-  }
-}
-
-/**
- * Sweeps stale non-terminal TODO items by bumping their calendar dates forward.
- * Returns the IDs of items that were bumped so the caller can refresh.
- */
-export async function sweepStaleTodos(
-  accessToken: string,
-  calendarId: string,
-  todoItems: (TodoItem & { id?: string })[]
-): Promise<string[]> {
-  const staleItems = todoItems.filter(item =>
-    item.id &&
-    isNonTerminalStatus(item.status) &&
-    computeBumpedDates(item.etsDateTime, item.etaDateTime) !== null
-  );
-
-  if (staleItems.length === 0) return [];
-
-  const bumpedIds: string[] = [];
-  const concurrencyLimit = 5;
-  let currentIndex = 0;
-
-  async function worker(): Promise<void> {
-    while (true) {
-      const index = currentIndex++;
-      if (index >= staleItems.length) break;
-
-      const item = staleItems[index];
-      try {
-        await updateTodoItem(accessToken, calendarId, item.id!, {});
-        bumpedIds.push(item.id!);
-      } catch (error) {
-        console.error(`Error bumping stale TODO ${item.id}:`, error);
-      }
-    }
-  }
-
-  const workerCount = Math.min(concurrencyLimit, staleItems.length);
-  await Promise.all(Array.from({ length: workerCount }, () => worker()));
-
-  return bumpedIds;
-}
-
-/**
- * Deletes a TODO item (event) from the specified calendar
- */
-export async function deleteTodoItem(
-  accessToken: string,
-  calendarId: string,
-  eventId: string
-): Promise<void> {
-  const client = createGraphClient(accessToken);
-
-  try {
-    await client.api(`/me/calendars/${calendarId}/events/${eventId}`).delete();
-  } catch (error) {
-    console.error('Error deleting TODO item:', error);
-    throw error;
-  }
-}