canvas-website/backlog/tasks/task-001 - offline-local-storage.md

id	title	status	assignee	created_date	updated_date	labels	dependencies	priority
task-001	offline local storage	Done		2025-12-03 23:42	2025-12-07 20:50	feature offline persistence indexeddb		high

Description

IndexedDB persistence is already implemented via @automerge/automerge-repo-storage-indexeddb. The remaining work is:

1. Add real online/offline detection (currently always returns "online")
2. Create UI indicator showing connection status
3. Handle Safari's 7-day IndexedDB eviction

Existing code locations:

• src/automerge/useAutomergeSyncRepo.ts (lines 346, 380-432)
• src/automerge/useAutomergeStoreV2.ts (connectionStatus property)
• src/automerge/documentIdMapping.ts (room→document mapping)

Acceptance Criteria

• #1 Real WebSocket connection state tracking (not hardcoded 'online')
• #2 navigator.onLine integration for network detection
• #3 UI indicator component showing connection status
• #4 Visual feedback when working offline
• #5 Auto-reconnect with status updates
• #6 Safari 7-day eviction mitigation (service worker or periodic touch)

Implementation Notes

Implemented connection status tracking:

• Added ConnectionState type and tracking in CloudflareAdapter
• Added navigator.onLine integration for network detection
• Exposed connectionState and isNetworkOnline from useAutomergeSync hook
• Created ConnectionStatusIndicator component with visual feedback
• Shows status only when not connected (connecting/reconnecting/disconnected/offline)
• Auto-hides when connected and online

Model files downloaded successfully: tiny.en-encoder.int8.onnx (13MB), tiny.en-decoder.int8.onnx (87MB), tokens.txt (816KB)