3fbbb1a93b
- Next.js 14+ with App Router and TypeScript - Tailwind CSS and ShadCN UI styling - Zustand state management - Dexie.js for IndexedDB (local-first data) - Auth.js v5 for authentication - BMAD framework integration Co-Authored-By: Claude <noreply@anthropic.com>
106 lines
3.9 KiB
Markdown
106 lines
3.9 KiB
Markdown
# Story 1.1: Local-First Setup & Chat Storage
|
|
|
|
Status: done
|
|
|
|
<!-- Note: Validation is optional. Run validate-create-story for quality check before dev-story. -->
|
|
|
|
## Story
|
|
|
|
As a user,
|
|
I want my chat sessions to be saved locally on my device,
|
|
so that my data is private and accessible offline.
|
|
|
|
## Acceptance Criteria
|
|
|
|
1. **Database Initialization**
|
|
- Given a new user visits the app
|
|
- When they load the page
|
|
- Then a Dexie.js database is initialized with the correct schema (`chatLogs`)
|
|
- And no data is sent to the server without explicit action
|
|
|
|
2. **Message Storage**
|
|
- Given the user sends a message
|
|
- When the message is sent
|
|
- Then it is stored in the `chatLogs` table in IndexedDB with a timestamp
|
|
- And is immediately displayed in the UI
|
|
|
|
3. **Session Restoration**
|
|
- Given the user reloads the page
|
|
- When the page loads
|
|
- Then the previous chat history is retrieved from IndexedDB and displayed correctly
|
|
- And the session state is restored via Zustand
|
|
|
|
4. **Offline Access**
|
|
- Given the device is offline
|
|
- When the user opens the app
|
|
- Then the app loads successfully and shows stored history from the local database
|
|
|
|
## Tasks / Subtasks
|
|
|
|
- [x] Initialize Dexie Database
|
|
- [x] Create `src/lib/db/index.ts` with Dexie schema definition (Topic: `chatLogs`)
|
|
- [x] Define TypeScript interfaces for `ChatLog` and `Message`
|
|
- [x] Implement Chat Service (Logic Sandwich)
|
|
- [x] Create `src/services/chat-service.ts` for database interactions
|
|
- [x] Implement `saveMessage`, `getHistory`, `initSession` methods
|
|
- [x] Ensure methods return plain objects, not observables
|
|
- [x] Setup Zustand Store
|
|
- [x] Create `src/lib/store/chat-store.ts`
|
|
- [x] Bind store actions to `chat-service`
|
|
- [x] Implement atomic selectors for UI consumption
|
|
- [x] Connect to UI (Skeleton)
|
|
- [x] Update `Page.tsx` or main component to hydrate store on mount
|
|
- [x] Verify offline persistence by reloading with network disabled
|
|
|
|
## Dev Notes
|
|
|
|
### Architecture & Rules
|
|
- **Logic Sandwich Pattern**: UI Components (`src/components/...`) MUST NOT import `src/lib/db` directly. All data access goes through `ChatService`.
|
|
- **Zustand Usage**: Use atomic selectors (e.g., `useChatStore(s => s.messages)`) to avoid re-renders.
|
|
- **Local-First**: IndexedDB (Dexie) is the source of truth.
|
|
- **Strict Mode**: Ensure all database types are strictly typed.
|
|
|
|
### Project Structure
|
|
- `src/lib/db/`: Database configuration and schema.
|
|
- `src/services/`: Business logic layer (The "Meat" of the sandwich).
|
|
- `src/lib/store/`: Zustand state management.
|
|
- `src/components/features/`: Feature-specific components (will consume store).
|
|
|
|
### References
|
|
- [Project Context: Logic Sandwich](file:///home/maximilienmao/Projects/Test01/_bmad-output/project-context.md#2-the-logic-sandwich-pattern-service-layer)
|
|
- [Project Context: Tech Stack](file:///home/maximilienmao/Projects/Test01/_bmad-output/project-context.md#technology-stack--versions)
|
|
|
|
## Dev Agent Record
|
|
|
|
### Agent Model Used
|
|
Gemini 2.0 Flash
|
|
|
|
### Debug Log References
|
|
|
|
### Completion Notes List
|
|
- Implemented TDD cycle for all components (DB, Service, Store, UI).
|
|
- Created standard "Logic Sandwich" architecture.
|
|
- Added `fake-indexeddb` and `vitest` configuration for reliable testing.
|
|
- Verified persistent storage and hydration.
|
|
|
|
### File List
|
|
- src/lib/db/index.ts
|
|
- src/lib/db/index.test.ts
|
|
- src/services/chat-service.ts
|
|
- src/services/chat-service.test.ts
|
|
- src/lib/store/chat-store.ts
|
|
- src/lib/store/chat-store.test.ts
|
|
- src/app/page.tsx
|
|
- src/app/page.test.tsx
|
|
- vitest.config.ts
|
|
- vitest.setup.ts
|
|
- package.json
|
|
|
|
### Senior Developer Review (AI)
|
|
- **Outcome:** Approved (Automatic Fixes Applied)
|
|
- **Findings:**
|
|
- 🔴 Architecture: Refactored `src/app/page.tsx` to use atomic selectors.
|
|
- 🟡 Documentation: Added `package.json` to File List.
|
|
- 🟡 Code Quality: Removed internal comments from `src/lib/store/chat-store.ts`.
|
|
- **Validation:** 9/9 Tests passed. All ACs verified.
|