feat(ai): implement intelligent auto-tagging system

- Added multi-provider AI infrastructure (OpenAI/Ollama)
- Implemented real-time tag suggestions with debounced analysis
- Created AI diagnostics and database maintenance tools in Settings
- Added automated garbage collection for orphan labels
- Refined UX with deterministic color hashing and interactive ghost tags
This commit is contained in:
2026-01-08 22:59:52 +01:00
parent 6f4d758e5c
commit 3c4b9d6176
27 changed files with 1336 additions and 138 deletions

View File

@@ -0,0 +1,57 @@
# Story 1.1: Mise en place de l'infrastructure Muuri
Status: ready-for-dev
## Story
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
1. **Given** that the `muuri` and `web-animations-js` libraries are installed.
2. **When** I load the main page.
3. **Then** existing notes automatically organize themselves into a Muuri Masonry grid.
4. **And** the layout dynamically adapts to window resizing.
## Tasks / Subtasks
- [ ] Installation des dépendances (AC: 1)
- [ ] `npm install muuri web-animations-js`
- [ ] Création du composant Client `MasonryGrid` (AC: 2, 3)
- [ ] Initialiser l'instance Muuri dans un `useEffect`
- [ ] Gérer le cycle de vie de l'instance (destroy sur unmount)
- [ ] Configurer Muuri pour utiliser `web-animations-js` pour les transitions
- [ ] Intégration du Layout dans la page principale (AC: 2, 3)
- [ ] Remplacer l'actuel layout CSS Columns par le nouveau composant `MasonryGrid`
- [ ] S'assurer que les notes existantes sont rendues comme éléments Muuri
- [ ] Gestion du Redimensionnement (AC: 4)
- [ ] S'assurer que Muuri recalcule le layout lors du resize de la fenêtre
## Dev Notes
- **Architecture Pattern :** Utiliser un composant client (`"use client"`) pour `MasonryGrid` car Muuri manipule directement le DOM.
- **Contrainte Muuri :** Muuri a besoin que ses éléments enfants soient présents dans le DOM à l'initialisation ou ajoutés via `grid.add()`. Dans React, il est préférable de laisser React gérer le rendu des enfants et d'appeler `grid.refreshItems().layout()` après les mises à jour de l'état.
- **Animations :** Utiliser `layoutDuration: 400` et `layoutEasing: 'ease'` dans la config Muuri.
- **Référence Technique :** [Source: _bmad-output/analysis/brainstorming-session-2026-01-06.md#Idea Organization and Prioritization]
### Project Structure Notes
- Le composant `MasonryGrid` doit être placé dans `keep-notes/components/`.
- Les styles de base de la grille (container relatif, items absolus) doivent être définis en Tailwind ou CSS global.
### References
- [PRD Requirements: _bmad-output/planning-artifacts/prd.md#Functional Requirements - FR5]
- [Architecture Brainstorming: _bmad-output/analysis/brainstorming-session-2026-01-06.md]
## Dev Agent Record
### Agent Model Used
### Debug Log References
### Completion Notes List
### File List

View File

@@ -0,0 +1,65 @@
# Story 2.1: Infrastructure IA & Abstraction Provider
Status: done
## Story
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
1. **Given** an `AIProvider` interface and the `Vercel AI SDK` installed.
2. **When** I provide my API key or Ollama instance URL in environment variables.
3. **Then** the system initializes the appropriate driver.
4. **And** no API keys are exposed to the client-side.
## Tasks / Subtasks
- [x] Installation du Vercel AI SDK (AC: 1)
- [x] `npm install ai @ai-sdk/openai ollama-ai-provider`
- [x] Création de l'interface d'abstraction `AIProvider` (AC: 1, 3)
- [x] Définir les méthodes standard (ex: `generateTags(content: string)`, `getEmbeddings(text: string)`)
- [x] Implémentation des drivers (AC: 3)
- [x] `OpenAIProvider` utilisant le SDK officiel
- [x] `OllamaProvider` pour le support local
- [x] Configuration via variables d'environnement (AC: 2, 4)
- [x] Gérer `AI_PROVIDER`, `OPENAI_API_KEY`, `OLLAMA_BASE_URL` dans `.env`
- [x] Créer une factory pour initialiser le bon provider au démarrage du serveur
- [x] Test de connexion (AC: 3)
- [x] Créer un endpoint de santé/test pour vérifier la communication avec le provider configuré
## Senior Developer Review (AI)
- **Review Date:** 2026-01-08
- **Status:** Approved with auto-fixes
- **Fixes Applied:**
- Switched to `generateObject` with Zod for robust parsing.
- Added strict error handling and timeouts.
- Improved prompts and system messages.
## Dev Agent Record
### Agent Model Used
BMad Master (Gemini 2.0 Flash)
### Debug Log References
- Infrastructure created in keep-notes/lib/ai
- Packages: ai, @ai-sdk/openai, ollama-ai-provider
- Test endpoint: /api/ai/test
### Completion Notes List
- [x] Abstraction interface defined
- [x] Factory pattern implemented
- [x] OpenAI and Ollama drivers ready
- [x] API test route created
### File List
- keep-notes/lib/ai/types.ts
- keep-notes/lib/ai/factory.ts
- keep-notes/lib/ai/providers/openai.ts
- keep-notes/lib/ai/providers/ollama.ts
- keep-notes/app/api/ai/test/route.ts
Status: review

View File

@@ -0,0 +1,49 @@
Status: done
## Story
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
1. **Given** an open note editor.
2. **When** I stop typing for more than 1.5 seconds (debounce).
3. **Then** the system sends the content to the AI via a Server Action/API.
4. **And** tag suggestions (ghost tags) are displayed discreetly under the note.
5. **And** a loading indicator shows that analysis is in progress.
## Tasks / Subtasks
- [x] Création du Hook `useAutoTagging` (AC: 2, 3)
- [x] Implémenter un `useDebounce` de 1.5s sur le contenu de la note
- [x] Appeler le provider IA (via API route ou Server Action)
- [x] Gérer l'état de chargement (`isAnalyzing`) et les erreurs
- [x] Création du Composant UI `GhostTags` (AC: 4)
- [x] Afficher les tags suggérés avec un style visuel distinct (ex: opacité réduite, bordure pointillée)
- [x] Afficher l'indicateur de chargement (AC: 5)
- [x] Intégration dans l'éditeur de note (AC: 1)
- [x] Connecter le hook au champ de texte principal
- [x] Positionner le composant `GhostTags` sous la zone de texte
- [x] Optimisation (AC: 3)
- [x] Ne pas relancer l'analyse si le contenu n'a pas changé significativement
- [x] Annuler la requête précédente si l'utilisateur recommence à taper
## Dev Agent Record
### Agent Model Used
BMad Master (Gemini 2.0 Flash)
### Completion Notes List
- [x] Implemented useDebounce and useAutoTagging hooks
- [x] Created /api/ai/tags endpoint with Zod validation
- [x] Built GhostTags component with Tailwind animations
- [x] Integrated into NoteEditor seamlessly
### File List
- keep-notes/hooks/use-debounce.ts
- keep-notes/hooks/use-auto-tagging.ts
- keep-notes/app/api/ai/tags/route.ts
- keep-notes/components/ghost-tags.tsx
- keep-notes/components/note-editor.tsx

View File

@@ -0,0 +1,45 @@
# Story 5.1: Interface de Configuration et Diagnostic IA
Status: done
## Story
As an administrator,
I want a dedicated UI to check my AI connection status and switch providers,
So that I can verify that Ollama or OpenAI is working correctly without checking server logs.
## Acceptance Criteria
1. **Given** the settings page (`/settings`).
2. **When** I load the page.
3. **Then** I see the current configured provider (Ollama/OpenAI) and model name.
4. **And** I see a "Status" indicator (Green/Red) checking the connection in real-time.
5. **And** I can click a "Test Generation" button to see a raw response from the AI.
6. **And** if an error occurs, the full error message is displayed in a red alert box.
## Tasks / Subtasks
- [x] Création de la page `/settings` (AC: 1, 2)
- [x] Créer `app/settings/page.tsx`
- [x] Ajouter un lien vers Settings dans la Sidebar ou le Header
- [x] Composant `AIStatusCard` (AC: 3, 4)
- [x] Afficher les variables d'env (masquées pour API Key)
- [x] Appeler `/api/ai/test` au chargement pour le statut
- [x] Fonctionnalité de Test Manuel (AC: 5, 6)
- [x] Bouton "Test Connection"
- [x] Zone d'affichage des logs/erreurs bruts
- [ ] (Optionnel) Formulaire de changement de config (via `.env` ou DB)
- [ ] Pour l'instant, afficher juste les valeurs `.env` en lecture seule pour diagnostic
## Dev Agent Record
- Implemented Settings page with full AI diagnostic panel.
- Added Sidebar link.
### Agent Model Used
### Debug Log References
### Completion Notes List
### File List

View File

@@ -0,0 +1,56 @@
# generated: 2026-01-08
# project: Keep
# project_key: keep
# tracking_system: file-system
# story_location: _bmad-output/implementation-artifacts
# STATUS DEFINITIONS:
# ==================
# Epic Status:
# - backlog: Epic not yet started
# - in-progress: Epic actively being worked on
# - done: All stories in epic completed
#
# Story Status:
# - backlog: Story only exists in epic file
# - ready-for-dev: Story file created in stories folder
# - in-progress: Developer actively working on implementation
# - review: Ready for code review (via Dev's code-review workflow)
# - done: Story completed
generated: 2026-01-08
project: Keep
project_key: keep
tracking_system: file-system
story_location: _bmad-output/implementation-artifacts
development_status:
epic-1: done
1-1-mise-en-place-de-l-infrastructure-muuri: done
1-2-drag-and-drop-fluide-et-persistant: done
1-3-robustesse-du-layout-avec-resizeobserver: done
epic-1-retrospective: done
epic-2: in-progress
2-1-infrastructure-ia-abstraction-provider: done
2-2-analyse-et-suggestions-de-tags-en-temps-reel: done
2-3-validation-des-suggestions-par-l-utilisateur: backlog
epic-2-retrospective: optional
epic-3: backlog
3-1-indexation-vectorielle-automatique: backlog
3-2-recherche-semantique-par-intention: backlog
3-3-vue-de-recherche-hybride: backlog
epic-3-retrospective: optional
epic-4: backlog
4-1-installation-pwa-et-manifeste: backlog
4-2-stockage-local-et-mode-offline: backlog
4-3-synchronisation-de-fond-background-sync: backlog
epic-4-retrospective: optional
epic-5: in-progress
5-1-interface-de-configuration-des-modeles: done
5-2-gestion-avancee-epinglage-archivage: backlog
5-3-support-multimedia-et-images: backlog
epic-5-retrospective: optional

View File

@@ -1,5 +1,6 @@
---
stepsCompleted: [1]
stepsCompleted: [1, 2, 3, 4]
workflow_completed: true
inputDocuments:
- _bmad-output/planning-artifacts/prd.md
- _bmad-output/planning-artifacts/prd-web-app-requirements.md