Add BMAD framework, authentication, and new features

This commit is contained in:
2026-01-08 21:23:23 +01:00
parent f07d28aefd
commit 15a95fb319
1298 changed files with 73308 additions and 154901 deletions

View File

@@ -0,0 +1,85 @@
---
stepsCompleted: [1, 2, 3, 4]
session_continued: true
continuation_date: 2026-01-06
inputDocuments: []
session_topic: 'Migration du Layout et Drag-and-Drop vers Muuri'
session_goals: 'Remplacer la solution actuelle (CSS Columns + Native DnD) par Muuri pour un layout Masonry robuste et un DnD fluide'
selected_approach: 'ai-recommended'
techniques_used: ['Constraint Mapping', 'Morphological Analysis', 'Chaos Engineering']
ideas_generated: [12]
technique_execution_complete: true
session_active: false
workflow_completed: true
facilitation_notes: 'Architecture validée et plan d'action détaillé généré pour la migration Muuri.'
context_file: 'COMPLETED-FEATURES.md'
---
# Brainstorming Session Results
**Facilitator:** Ramez
**Date:** 2026-01-06
## Session Overview
**Topic:** Migration du Layout et Drag-and-Drop vers Muuri
**Goals:** Remplacer la solution actuelle (CSS Columns + Native DnD) par Muuri pour un layout Masonry robuste et un DnD fluide
### Context Guidance
Le projet utilise actuellement une approche CSS Columns pour le Masonry et le DnD HTML5 natif. Cela pose des limitations pour un réarrangement fluide et précis. L'objectif est d'intégrer **Muuri** (https://github.com/haltu/muuri), une librairie JS de layout, dans l'écosystème React/Next.js 16 existant.
## Technique Selection
**Approach:** AI-Recommended Techniques
**Analysis Context:** Migration du Layout et Drag-and-Drop vers Muuri with focus on Remplacer la solution actuelle (CSS Columns + Native DnD) par Muuri pour un layout Masonry robuste et un DnD fluide
**Recommended Techniques:**
- **Constraint Mapping:** Identifier les frictions techniques entre React/Next.js (Virtual DOM, SSR) et Muuri (Direct DOM manipulation).
- **Morphological Analysis:** Définir l'architecture technique en explorant les combinaisons de solutions pour chaque composant du problème (Sync, Events, State).
- **Chaos Engineering:** Stress-tester mentalement l'architecture proposée contre des scénarios limites (resize, network lag, user spam).
## Technique Execution Results
**Constraint Mapping:**
- **Focus:** Conflit React (Virtual DOM) vs Muuri (Direct DOM).
- **Breakthrough:** Utilisation de `ResizeObserver` pour notifier Muuri des changements de taille des cartes sans passer par l'état React.
**Morphological Analysis:**
- **Stack:** Muuri v0.9.5 + web-animations-js.
- **Architecture:** Composant maître `MasonryGrid` gérant l'instance Muuri et synchronisant l'ordre via Server Actions.
**Chaos Engineering:**
- **Scénarios:** Chargement d'images asynchrone et filtrage rapide.
- **Validation:** Le `ResizeObserver` assure la robustesse du layout face aux changements de hauteur dynamiques.
## Idea Organization and Prioritization
**Thematic Organization:**
- **Infrastructure:** Mise en place de Muuri et des polyfills nécessaires.
- **Layout Engine:** Création du composant client `MasonryGrid`.
- **Synchronisation:** Bridge via `ResizeObserver` pour une grille sans chevauchement.
- **Persistance:** Sync de l'ordre en base de données après chaque déplacement.
**Prioritization Results:**
- **Top Priority:** Développement du composant `MasonryGrid` et son cycle de vie React.
- **Quick Win:** Installation de `muuri` et création du hook utilitaire `useResizeObserver`.
- **Breakthrough:** L'approche "ResizeObserver Bridge" qui découple le layout de la logique de rendu React.
**Action Planning:**
1. **Setup:** Installer `muuri` et `web-animations-js`.
2. **Hook:** Créer `useResizeObserver.ts` pour surveiller la taille des notes.
3. **Core:** Implémenter `MasonryGrid.tsx` (Client Component).
4. **Integration:** Adapter `NoteCard.tsx` pour Muuri (refs, suppression DnD natif).
5. **Persistence:** Connecter l'événement `dragEnd` à l'action `updateNoteOrder`.
## Session Summary and Insights
**Key Achievements:**
- Architecture technique complète et validée pour atteindre l'expérience "Google Keep".
- Plan d'implémentation découpé en phases actionnables.
- Identification et résolution préventive des conflits de layout.
**Session Reflections:**
Cette session a permis de transformer un défi d'interface complexe en une série de tâches techniques précises. L'utilisation du `ResizeObserver` est la clé pour faire cohabiter Muuri et React 19 de manière fluide.

View File

@@ -0,0 +1,15 @@
---
stepsCompleted: []
inputDocuments: []
session_topic: ''
session_goals: ''
selected_approach: ''
techniques_used: []
ideas_generated: []
context_file: ''
---
# Brainstorming Session Results
**Facilitator:** Ramez
**Date:** 2026-01-07

View File

@@ -0,0 +1,15 @@
---
stepsCompleted: []
inputDocuments: []
session_topic: ''
session_goals: ''
selected_approach: ''
techniques_used: []
ideas_generated: []
context_file: ''
---
# Brainstorming Session Results
**Facilitator:** Ramez
**Date:** 2026-01-08

View File

@@ -0,0 +1,281 @@
---
stepsCompleted: [1]
inputDocuments:
- _bmad-output/planning-artifacts/prd.md
- _bmad-output/planning-artifacts/prd-web-app-requirements.md
- _bmad-output/analysis/brainstorming-session-2026-01-06.md
---
# Keep - Epic Breakdown
## Overview
This document provides the complete epic and story breakdown for Keep, decomposing the requirements from the PRD, UX Design if it exists, and Architecture requirements into implementable stories.
## Requirements Inventory
### Functional Requirements
FR1: L'utilisateur peut créer, lire, mettre à jour et supprimer des notes (texte ou checklist).
FR2: L'utilisateur peut épingler des notes pour les maintenir en haut de la liste.
FR3: L'utilisateur peut archiver des notes pour les masquer de la vue principale.
FR4: L'utilisateur peut joindre des images aux notes.
FR5: L'utilisateur peut réorganiser l'ordre des notes manuellement (Drag-and-drop via Muuri).
FR6: Le système analyse le contenu d'une note en temps réel ou à la sauvegarde pour identifier des concepts clés.
FR7: Le système suggère des tags (labels) pertinents basés sur l'analyse du contenu.
FR8: L'utilisateur peut accepter, modifier ou rejeter les suggestions de tags de l'IA.
FR9: L'utilisateur peut créer, modifier et supprimer ses propres tags manuellement.
FR10: L'utilisateur peut filtrer et trier ses notes par tags.
FR11: L'utilisateur peut effectuer une recherche par mots-clés exacts (titre et contenu).
FR12: L'utilisateur peut effectuer une recherche sémantique en langage naturel (recherche par sens/intention).
FR13: Le système combine les résultats de recherche exacte et sémantique dans une vue unique (Recherche Hybride).
FR14: L'utilisateur peut accéder à l'application et à ses notes sans connexion internet (Mode Offline/PWA).
FR15: Le système synchronise automatiquement les modifications locales avec le serveur une fois la connexion rétablie.
FR16: L'interface utilisateur reflète instantanément les actions de l'utilisateur (Optimistic UI).
FR17: L'administrateur peut configurer le fournisseur d'IA (ex: OpenAI, Ollama) via des variables d'environnement ou une interface dédiée.
FR18: Le système supporte plusieurs adaptateurs de modèles IA interchangeables (Vercel AI SDK).
FR19: L'utilisateur peut choisir son thème (clair/sombre) et personnaliser les couleurs des notes.
### NonFunctional Requirements
NFR1: IA Responsiveness - Auto-tagging suggestions must appear within 1.5s after typing ends (debounce).
NFR2: Search Latency - Hybrid search results displayed in < 300ms for 1000 notes.
NFR3: PWA Load Time - Interactive in < 2s on average 4G network.
NFR4: API Key Isolation - AI provider keys remain server-side; never exposed to the client.
NFR5: Local-First Privacy - Full local LLM support (Ollama) ensures no note data leaves user infrastructure.
NFR6: Data at Rest - Local PWA storage secured via standard Web Storage protocols.
NFR7: Offline Resilience - 100% data integrity for offline notes during background sync.
NFR8: Vector Integrity - Automatic, background semantic index updates on every note change.
NFR9: Portability - Minimal Docker/build footprint for execution on low-resource servers.
NFR10: Compatibility - Support for current Node.js LTS versions.
### Additional Requirements
- **Stack :** Next.js 16 (App Router), TypeScript, Vercel AI SDK.
- **Layout Engine :** Muuri v0.9.5 + web-animations-js pour le Masonry robuste.
- **Synchronization :** Utilisation de `ResizeObserver` pour notifier Muuri des changements de taille des cartes sans passer par l'état React.
- **Data Persistence :** SQLite (local) / Postgres (production) avec support vectoriel.
- **AI Abstraction :** Interface `AIProvider` pour supporter plusieurs backends (OpenAI, Ollama, etc.).
- **Brownfield Context :** Extension de l'application existante avec focus sur la migration vers Muuri et l'IA.
### FR Coverage Map
FR1: Epic 1 - Gestion de base des notes (CRUD)
FR2: Epic 5 - Épinglage des notes
FR3: Epic 5 - Archivage des notes
FR4: Epic 5 - Support des images
FR5: Epic 1 - Drag-and-drop avec Muuri
FR6: Epic 2 - Analyse IA en temps réel
FR7: Epic 2 - Suggestion de tags automatique
FR8: Epic 2 - Interaction avec les suggestions (Validation)
FR9: Epic 2 - Gestion manuelle des tags
FR10: Epic 3 - Filtrage et tri par tags
FR11: Epic 3 - Recherche par mots-clés exacts
FR12: Epic 3 - Recherche sémantique par intention
FR13: Epic 3 - Moteur de recherche hybride
FR14: Epic 4 - Support Offline complet (PWA)
FR15: Epic 4 - Synchronisation automatique
FR16: Epic 1 - Optimistic UI pour le layout
FR17: Epic 5 - Configuration des providers IA
FR18: Epic 5 - Support multi-adaptateurs IA
FR19: Epic 1 - Thèmes et personnalisation visuelle
## Epic List
## Epic 1: Fondations Robustes & Nouveau Moteur de Layout (Muuri)
Remplacer le système actuel par Muuri pour garantir une base solide, un Drag-and-drop fluide et une expérience sans chevauchement.
**FRs covered:** FR1, FR5, FR16, FR19
### Story 1.1: Mise en place de l'infrastructure Muuri
As a user,
I want my notes to be displayed in a high-performance Masonry grid,
So that my dashboard is visually organized without unnecessary gaps.
**Acceptance Criteria:**
**Given** that the `muuri` and `web-animations-js` libraries are installed.
**When** I load the main page.
**Then** existing notes automatically organize themselves into a Muuri Masonry grid.
**And** the layout dynamically adapts to window resizing.
### Story 1.2: Drag-and-drop fluide et persistant
As a user,
I want to move my notes via drag-and-drop fluidly,
So that I can visually reorganize my priorities.
**Acceptance Criteria:**
**Given** an active Muuri grid.
**When** I move a note to a new position.
**Then** other notes shift with a fluid animation (web-animations-js).
**And** the new position is saved in the database via a Server Action as soon as the move is completed.
### Story 1.3: Robustesse du Layout avec ResizeObserver
As a user,
I want my grid to reorganize as soon as a note's content changes (e.g., adding text),
So that I avoid overlapping notes.
**Acceptance Criteria:**
**Given** a note with an attached `ResizeObserver`.
**When** a note's height changes (text added, image loaded).
**Then** the `ResizeObserver` notifies the Muuri instance.
**And** the grid calls `refreshItems()` and `layout()` to eliminate any overlap instantly.
## Epic 2: Assistant d'Organisation Intelligent (Auto-tagging)
Intégrer le Vercel AI SDK et mettre en place l'analyse en temps réel pour suggérer des tags automatiquement.
**FRs covered:** FR6, FR7, FR8, FR9
### Story 2.1: Infrastructure IA & Abstraction Provider
As an administrator,
I want to configure my AI provider (OpenAI or Ollama) centrally,
So that the application can use artificial intelligence securely.
**Acceptance Criteria:**
**Given** an `AIProvider` interface and the `Vercel AI SDK` installed.
**When** I provide my API key or Ollama instance URL in environment variables.
**Then** the system initializes the appropriate driver.
**And** no API keys are exposed to the client-side.
### Story 2.2: Analyse et Suggestions de Tags en temps réel
As a user,
I want to see tag suggestions appear as I write my note,
So that I can organize my thoughts without manual effort.
**Acceptance Criteria:**
**Given** an open note editor.
**When** I stop typing for more than 1.5 seconds (debounce).
**Then** the system sends the content to the AI for analysis.
**And** tag suggestions (ghost tags) are displayed discreetly under the note.
### Story 2.3: Validation des Suggestions par l'Utilisateur
As a user,
I want to be able to accept or reject a suggestion with a single click,
So that I maintain full control over my organization.
**Acceptance Criteria:**
**Given** a list of tags suggested by the AI.
**When** I click on a suggested tag.
**Then** it becomes a permanent tag for the note.
**And** if I ignore or delete it, it disappears from the current view.
## Epic 3: Moteur de Recherche Hybride & Sémantique
Déployer la recherche sémantique et hybride pour retrouver des notes par intention plutôt que par simples mots-clés.
**FRs covered:** FR10, FR11, FR12, FR13
### Story 3.1: Indexation Vectorielle Automatique
As a system,
I want to generate and store vector embeddings for every note change,
So that the notes are searchable by meaning.
**Acceptance Criteria:**
**Given** a new or updated note.
**When** the note is saved.
**Then** the system generates a vector embedding via the AI provider.
**And** the embedding is stored in the vector-enabled database (SQLite/Postgres).
### Story 3.2: Recherche Sémantique par Intention
As a user,
I want to search for notes using natural language concepts,
So that I can find information even if I don't remember the exact words.
**Acceptance Criteria:**
**Given** the search bar.
**When** I enter a conceptual query (e.g., "cooking ideas").
**Then** the system performs a cosine similarity search on the vector embeddings.
**And** relevant notes are displayed even if they don't contain the exact query words.
### Story 3.3: Vue de Recherche Hybride
As a user,
I want to see combined results from exact keyword matching and semantic search,
So that I get the most comprehensive results possible.
**Acceptance Criteria:**
**Given** a search query.
**When** the search is executed.
**Then** the system merges results from SQL `LIKE` queries and Vector similarity.
**And** results are ranked by a combination of exact match and semantic relevance.
## Epic 4: Mobilité & Résilience (PWA & Offline)
Transformer l'application en PWA complète avec support offline et synchronisation automatique.
**FRs covered:** FR14, FR15
### Story 4.1: Installation PWA et Manifeste
As a user,
I want to install Keep on my device (mobile or desktop),
So that I can access it like a native application.
**Acceptance Criteria:**
**Given** the web application.
**When** I access it via a compatible browser.
**Then** I am prompted to "Add to Home Screen".
**And** the app opens in a standalone window with its own icon.
### Story 4.2: Stockage Local et Mode Offline
As a user,
I want to view and edit my notes even without an internet connection,
So that I can remain productive in any environment.
**Acceptance Criteria:**
**Given** no active internet connection.
**When** I open the app.
**Then** the Service Worker serves the cached UI and notes from IndexedDB.
**And** I can create or edit notes which are queued for sync.
### Story 4.3: Synchronisation de Fond (Background Sync)
As a user,
I want my offline changes to be saved to the server automatically when I'm back online,
So that my data is consistent across all my devices.
**Acceptance Criteria:**
**Given** pending offline changes.
**When** an internet connection is restored.
**Then** the background sync process pushes all queued actions to the server.
**And** any conflicts are resolved (last-write-wins by default).
## Epic 5: Administration & Personnalisation (Self-Hosting Pro)
Finaliser les outils de configuration (OpenAI/Ollama) et les fonctionnalités avancées (Images, Archive).
**FRs covered:** FR2, FR3, FR4, FR17, FR18
### Story 5.1: Interface de Configuration des Modèles
As an administrator,
I want a dedicated UI to switch between AI models and providers,
So that I don't have to restart the server for configuration changes.
**Acceptance Criteria:**
**Given** the settings page.
**When** I select a new provider (e.g., switching from OpenAI to Ollama).
**Then** the application updates its internal AI driver state.
**And** the change is persisted in the database configuration table.
### Story 5.2: Gestion Avancée (Épinglage & Archivage)
As a user,
I want to pin important notes and archive old ones,
So that I can keep my main dashboard clean and focused.
**Acceptance Criteria:**
**Given** a note.
**When** I click the "Pin" icon.
**Then** the note moves to the "Pinned" section at the top.
**When** I click "Archive".
**Then** the note is moved to the Archive view and removed from the main grid.
### Story 5.3: Support Multimédia et Images
As a user,
I want to attach images to my notes,
So that I can capture visual information along with my text.
**Acceptance Criteria:**
**Given** the note editor.
**When** I upload or drag an image into the note.
**Then** the image is stored (locally or cloud) and displayed within the note card.
**And** Muuri recalculates the layout once the image is fully loaded.
### Epic 3: Moteur de Recherche Hybride & Sémantique
Déployer la recherche sémantique et hybride pour retrouver des notes par intention plutôt que par simples mots-clés.
**FRs covered:** FR10, FR11, FR12, FR13
### Epic 4: Mobilité & Résilience (PWA & Offline)
Transformer l'application en PWA complète avec support offline et synchronisation automatique.
**FRs covered:** FR14, FR15
### Epic 5: Administration & Personnalisation (Self-Hosting Pro)
Finaliser les outils de configuration (OpenAI/Ollama) et les fonctionnalités avancées (Images, Archive).
**FRs covered:** FR2, FR3, FR4, FR17, FR18

View File

@@ -0,0 +1,25 @@
## Executive Summary
This PRD outlines the evolution of **Keep**, an existing Google Keep clone, into a more intelligent and organized knowledge management tool. Building upon the solid foundation of the existing Next.js 16 application (which already features CRUD operations, masonry layout, and basic search), this initiative focuses on enhancing **discoverability and organization**.
The core objective is to move beyond simple text matching and manual organization. We aim to implement **AI-powered automatic tagging** that suggests relevant labels based on note content, streamlining the organization process. Furthermore, we will upgrade the search capabilities to a **semantic search engine** that understands natural language queries, allowing users to find notes based on concepts and meaning rather than just exact keywords. An improved, intuitive tag management interface will complement these backend changes.
### What Makes This Special
The key differentiator for this iteration is the **intelligent layer** added to the traditional note-taking experience. While standard clones offer static storage, our enhanced Keep will actively help users organize their thoughts.
* **From Manual to Assisted:** Users no longer need to diligently tag every note; the system proactively suggests tags, reducing friction.
* **From Keyword to Concept:** Search becomes conversational and context-aware. A query like "recipes for dinner" will surface notes about "pasta" or "steak" even if the word "recipe" isn't explicitly used.
* **Seamless Integration:** These advanced features will be integrated directly into the existing improved masonry layout and UI, maintaining the familiar "Google Keep" simplicity while adding enterprise-grade organization tools.
## Project Classification
**Technical Type:** web_app
**Domain:** general
**Complexity:** low
**Project Context:** Brownfield - extending existing system
### Classification Signals
* **Project Type:** web_app (Extending an existing Next.js web application)
* **Domain:** general (Productivity/Note-taking tool, no specific high-compliance domain like healthcare or fintech detected)
* **Complexity:** low (Standard web app complexity, though the AI integration adds a layer of sophistication, the domain itself is not high-risk/high-regulation)

View File

@@ -0,0 +1,29 @@
## Web App Specific Requirements
### Project-Type Overview
Keep v2 is a progressive web application (PWA) built on Next.js 16, designed to deliver a native-like experience in the browser. It prioritizes real-time interactivity for AI features and robust offline capabilities to ensure users can capture thoughts anytime, anywhere, matching the reliability of native note-taking apps.
### Technical Architecture Considerations
#### 1. Real-Time AI Interaction (Streaming)
* **Behavior:** Auto-tagging suggestions will appear **live** as the user types, utilizing a debounced streaming approach to balance API costs/load with responsiveness.
* **Implementation:**
* **Debounce Strategy:** AI analysis triggers after ~1-2 seconds of inactivity or upon detecting sentence completion to avoid analyzing every keystroke.
* **UI Feedback:** Subtle, non-intrusive UI indicators (e.g., a "thinking" icon or ghost tags) will show when analysis is happening to maintain transparency without distraction.
* **Streaming Responses:** Tags will populate dynamically, allowing users to click-to-accept immediately.
#### 2. Offline Capability (PWA)
* **Requirement:** Full PWA support is mandatory. The app must launch and function without an internet connection.
* **Strategy:**
* **Service Workers:** Cache app shell and static assets for instant load.
* **Local-First Data:** Use a robust local database (like RxDB or PouchDB, or optimized browser storage wrappers) to store notes on the client device first, syncing to the backend when online.
* **Offline AI Fallback:** If the device is offline, AI features (auto-tagging, semantic search) will gracefully degrade (e.g., queueing analysis for when connection is restored, or utilizing small in-browser models if feasible in the future). Basic text search remains functional.
#### 3. Performance & Constraints
* **Input Limits:** To ensure UI responsiveness and predictable AI processing times, note analysis will be optimized for "standard web page" length (approx. A4 size or ~3000-4000 tokens).
* **Handling Long Notes:** For notes exceeding this limit, the system will prioritize analyzing the Title, the first paragraph, and the last paragraph (summary effect) to generate tags, ensuring performance doesn't degrade with note length.
* **Browser Support:** Modern browsers (Chrome, Edge, Firefox, Safari) with a focus on mobile optimization (touch targets, viewport adjustments) for iOS and Android.
### Implementation Considerations
* **Vercel AI SDK Integration:** Leverage `useChat` or `useCompletion` hooks for managing the streaming AI state seamlessly within React components.
* **Optimistic UI:** All CRUD actions (create, update, delete) must reflect instantly in the UI before server confirmation to ensure the "Zero Friction" feel.

View File

@@ -0,0 +1,185 @@
---
stepsCompleted: [1, 2, 3, 4, 6, 7, 8, 9, 10, 11]
inputDocuments:
- README.md
- COMPLETED-FEATURES.md
- _bmad-output/analysis/brainstorming-session-2026-01-06.md
workflowType: 'prd'
lastStep: 11
---
# Product Requirements Document - Keep
**Author:** Ramez
**Date:** 2026-01-07
## Executive Summary
Ce PRD décrit la transformation de **Keep** en un partenaire cognitif qui **élimine la charge mentale liée à l'organisation**, tout en préservant la simplicité et le contrôle total de l'utilisateur. S'appuyant sur l'application Next.js 16 existante, cette évolution ajoute une couche d'assistance intelligente conçue pour suggérer et faciliter, sans jamais imposer.
L'objectif est de créer un flux de travail fluide : la capture reste instantanée, mais l'organisation est accélérée par le **taggage automatique prédictif** et la **recherche sémantique intuitive**. Le système comprend l'intention, mais l'utilisateur garde la main.
### What Makes This Special : Assistance "Easy" & Zéro Friction
Le différenciateur clé est l'équilibre entre automatisation intelligente et contrôle manuel simple.
* **Suggestion, pas Imposition :** Le système analyse le contenu et propose des tags pertinents que l'utilisateur peut valider, modifier ou ignorer d'un simple clic. L'organisation manuelle reste possible et améliorée, garantissant que l'IA reste un outil au service de l'humain.
* **Recherche Hybride Naturelle :** Combinez la puissance de la recherche par concepts (sémantique) avec la précision des mots-clés exacts. Retrouvez "recette" en tapant "dîner", ou cherchez précisément "Error 404".
* **Interface Familière Augmentée :** Nous conservons l'approche visuelle et intuitive "easy-to-use" du layout existant. L'intelligence est intégrée subtilement dans l'interface de gestion des tags et la barre de recherche, sans alourdir l'expérience utilisateur.
## Project Classification
**Technical Type:** web_app
**Domain:** general
**Complexity:** medium (Intégration IA/Vecteurs dans une UX simple)
**Project Context:** Brownfield - extension intelligente avec focus UX
## Success Criteria
### User Success (L'Administrateur/Utilisateur final)
* **Zero-Config AI Setup :** L'utilisateur doit pouvoir configurer son provider IA (OpenAI, Ollama, etc.) simplement en entrant une clé API dans les paramètres ou le `.env`, sans installer de services tiers complexes.
* **Confiance dans l'Auto-tagging :** Taux d'acceptation des tags suggérés > 85%. Si l'utilisateur passe son temps à corriger l'IA, il désactivera la fonction.
* **Sérendipité de Recherche :** La recherche sémantique doit faire remonter des résultats pertinents qui ne contiennent *pas* les mots-clés exacts dans au moins 30% des recherches complexes.
### Business Success (Open Source & Réputation)
* **Adoption GitHub :** Objectif de 100+ Stars dans les 3 premiers mois post-lancement de la v2.
* **Conversion "Café" :** Avoir un lien "Sponsor/Buy me a coffee" visible et non-intrusif qui génère des dons (preuve que l'outil apporte de la valeur).
* **Contribution Communautaire :** Avoir au moins 2 contributeurs externes qui proposent des PRs pour ajouter de nouveaux providers IA.
### Technical Success
* **Architecture Monolithique Modulaire :** L'IA est intégrée via le **Vercel AI SDK** (ou équivalent TS) directement dans Next.js. Pas de conteneur Python supplémentaire requis.
* **Agnosticisme du Modèle :** Le système supporte au minimum 3 providers majeurs (OpenAI, Anthropic, Local/Ollama) via une interface d'abstraction propre.
* **Performance Hybride :** La recherche combinée (SQL/Keyword + Vecteur) s'exécute en < 300ms sur une base de 1000 notes.
### Measurable Outcomes
* Temps de déploiement complet (de `git clone` à `ready`) < 5 minutes.
* Latence de l'auto-tagging < 2 secondes après la fin de la frappe (ou à la sauvegarde).
## Product Scope
### MVP - Minimum Viable Product (La v2 "Smart")
* **Core :** Toutes les fonctionnalités actuelles (CRUD, Masonry amélioré, Images).
* **AI Backend (TS) :** Intégration Vercel AI SDK dans Next.js. Support initial pour OpenAI et Ollama (pour le gratuit/local).
* **Auto-tagging :** Suggestion de tags à la création/édition d'une note (déclenché manuellement ou à la sauvegarde).
* **Recherche Hybride :** Intégration d'une base vectorielle légère (ex: pgvector si passage à Postgres, ou une solution in-memory/fichier pour SQLite comme LanceDB ou simple similarité cosine en JS pour commencer simple).
* **UX :** Interface de gestion des tags et affichage des suggestions.
### Growth Features (Post-MVP)
* **Multi-Provider UI :** Interface graphique pour changer de modèle IA sans toucher au `.env`.
* **Chat with Notes :** Un mode "Chat" pour poser des questions à ses notes (RAG complet).
* **Tagging Rétroactif :** Batch job pour taguer automatiquement toutes les anciennes notes existantes.
### Vision (Future)
* **Agents Autonomes :** Des agents qui réorganisent activement le dashboard, archivent les vieux trucs, et proposent des résumés hebdomaires.
* **Voice-to-Note Intelligent :** Transcription vocale avec structuration automatique immédiate.
## User Journeys
### Journey 1: Alex - The "Zero-Friction" Note Taker
**Persona:** Alex, Freelance Creative & Developer. Lives in chaos, needs structure but hates maintenance.
**Goal:** Capture ideas instantly and retrieve them effortlessly later.
* **The Chaos:** Alex saves a complex CSS Grid trick. He needs to save it *now* without spending time to tag it.
* **The Magic:** Keep's AI analyzes the content and suggests tags like `frontend`, `css`, `snippets`. Alex approves them with one click.
* **The Retrieval:** Weeks later, he searches "responsive layout technique" and finds the note instantly via semantic search.
### Journey 2: Sarah - The "5-Minute" Self-Hoster
**Persona:** Sarah, Home Lab Enthusiast.
**Goal:** Host her own private note-taking app with minimal fuss.
* **The Setup:** She clones the repo, adds an API Key to her `.env`, and runs `npm run dev`. No complex infrastructure required.
* **The Support:** Impressed by the ease of use, she donates via "Buy me a coffee".
### Journey 3: Max - The "Local-First" Contributor
**Persona:** Max, Privacy Advocate.
**Goal:** Use Keep with a completely offline LLM stack (Ollama).
* **The Contribution:** He adds a new `OllamaProvider` using the modular `AIProvider` interface in 15 minutes and submits a PR.
## Innovation & Novel Patterns
* **Intelligent Self-Organization:** Predictive "Human-in-the-loop" tagging reduces cognitive load.
* **Semantic-First Retrieval:** Enterprise-grade search in a lightweight, self-hosted tool.
* **Low-Barrier AI Distribution:** Zero-config, single-container architecture using Vercel AI SDK.
## Web App Specific Requirements
### Real-Time AI Interaction (Streaming)
* **Behavior:** Auto-tagging suggestions appear live as the user types (debounced).
* **UX:** Subtle UI indicators (thinking icon) show analysis progress without distraction.
### Offline Capability (PWA)
* **Requirement:** Full PWA support; app launches and functions without internet.
* **Strategy:** Service Workers and Local-First data storage with background sync.
### Performance & Constraints
* **Input Limits:** Optimized for notes up to ~4000 tokens (approx. A4 size).
* **Optimistic UI:** All actions reflect instantly in the UI before server confirmation.
## Project Scoping & Phased Development
### MVP Strategy & Philosophy
**MVP Approach:** Experience MVP - Focus on the "magic" of effortless organization to drive adoption.
**Resource Requirements:** Full-stack TypeScript/Next.js developer.
### MVP Feature Set (Phase 1)
**Core User Journeys Supported:** Alex (Zero-friction) and Sarah (Easy setup).
**Must-Have Capabilities:**
* Streaming Auto-tagging suggestions.
* Semantic search with local vector storage.
* Support for OpenAI and Ollama.
### Post-MVP Features
**Phase 2 (Growth):** PWA advanced sync, multi-provider settings UI, retroactive tagging.
**Phase 3 (Expansion):** RAG Chat with notes, autonomous agents for dashboard organization.
### Risk Mitigation Strategy
**Technical Risks:** Use abstraction interfaces (`AIProvider`) to handle multiple backend types.
**Market Risks:** Focus on "Easy Hosting" to differentiate from complex AI self-hosted tools.
## Functional Requirements
### Gestion des Notes (Fondations)
- **FR1 :** L'utilisateur peut créer, lire, mettre à jour et supprimer des notes (texte ou checklist).
- **FR2 :** L'utilisateur peut épingler des notes pour les maintenir en haut de la liste.
- **FR3 :** L'utilisateur peut archiver des notes pour les masquer de la vue principale.
- **FR4 :** L'utilisateur peut joindre des images aux notes.
- **FR5 :** L'utilisateur peut réorganiser l'ordre des notes manuellement (Drag-and-drop).
### Organisation Intelligente (IA)
- **FR6 :** Le système analyse le contenu d'une note en temps réel ou à la sauvegarde pour identifier des concepts clés.
- **FR7 :** Le système suggère des tags (labels) pertinents basés sur l'analyse du contenu.
- **FR8 :** L'utilisateur peut accepter, modifier ou rejeter les suggestions de tags de l'IA.
- **FR9 :** L'utilisateur peut créer, modifier et supprimer ses propres tags manuellement.
- **FR10 :** L'utilisateur peut filtrer et trier ses notes par tags.
### Recherche Avancée (Découvrabilité)
- **FR11 :** L'utilisateur peut effectuer une recherche par mots-clés exacts (titre et contenu).
- **FR12 :** L'utilisateur peut effectuer une recherche sémantique en langage naturel (recherche par sens/intention).
- **FR13 :** Le système combine les résultats de recherche exacte et sémantique dans une vue unique (Recherche Hybride).
### Expérience Web & Offline (PWA)
- **FR14 :** L'utilisateur peut accéder à l'application et à ses notes sans connexion internet (Mode Offline).
- **FR15 :** Le système synchronise automatiquement les modifications locales avec le serveur une fois la connexion rétablie.
- **FR16 :** L'interface utilisateur reflète instantanément les actions de l'utilisateur (Optimistic UI).
### Configuration & Administration (Self-Hosting)
- **FR17 :** L'administrateur peut configurer le fournisseur d'IA (ex: OpenAI, Ollama) via des variables d'environnement ou une interface dédiée.
- **FR18 :** Le système supporte plusieurs adaptateurs de modèles IA interchangeables.
- **FR19 :** L'utilisateur peut choisir son thème (clair/sombre) et personnaliser les couleurs des notes.
## Non-Functional Requirements
### Performance
* **IA Responsiveness:** Auto-tagging suggestions must appear within 1.5s after typing ends (debounce).
* **Search Latency:** Hybrid search results displayed in < 300ms for 1000 notes.
* **PWA Load Time:** Interactive in < 2s on average 4G network.
### Security & Privacy
* **API Key Isolation:** AI provider keys remain server-side; never exposed to the client.
* **Local-First Privacy:** Full local LLM support (Ollama) ensures no note data leaves user infrastructure.
* **Data at Rest:** Local PWA storage secured via standard Web Storage protocols.
### Reliability & Sync
* **Offline Resilience:** 100% data integrity for offline notes during background sync.
* **Vector Integrity:** Automatic, background semantic index updates on every note change.
### Portability (Self-Hosting)
* **Efficiency:** Minimal Docker/build footprint for execution on low-resource servers (e.g., Raspberry Pi).
* **Compatibility:** Support for current Node.js LTS versions.