Momento/docs/user-stories.md

User Stories — Memento Next Phase

Basé sur l'analyse du prototype architectural-grid/ et du code production memento-note/.
Dernière mise à jour : 2026-06-28 (Epic 6 terminé — sync avec sprint-status.yaml)

---

Tableau de bord

ID	Feature	Statut	Fichiers livrés
US-SIDEBAR	Sidebar deux colonnes (rail d'icônes + panneau)	✅ LIVRÉ	sidebar.tsx restructuré
US-SEARCH	Recherche Globale Dual-Panel + Ctrl+K	✅ LIVRÉ	search-modal.tsx, search-modal-context.tsx, bug openNote corrigé
US-LIVING-BLOCKS	Blocs Vivants (Transclusion Bidirectionnelle)	✅ LIVRÉ	tiptap-unique-id-extension.ts, tiptap-live-block-extension.tsx, block-picker.tsx, app/api/blocks/*, migration LiveBlockRef
US-MEMORY-ECHO	Résonance Sémantique + Embed depuis Echo	✅ LIVRÉ	memory-echo-section.tsx, /api/notes/[id]/live-block-refs, /api/blocks/resolve
US-INFO-RÉSEAU	Panneau Info + Réseau Local	✅ LIVRÉ	note-network-tab.tsx, sync-note-links.ts, migration NoteLink, picker [[
US-CLIPPER	Web Clipper	✅ LIVRÉ	extension/, /api/clip/*, migration sourceUrl, badge panneau Info
US-GRAPH	Graphe de Connaissance Global enrichi	✅ LIVRÉ	note-graph-view.tsx — filtres liens, seuil sémantique, focus voisinage, couleurs carnets, double-clic ouverture
US-INSIGHTS	Clusters Sémantiques + Bridge Notes	✅ LIVRÉ	app/(main)/insights/page.tsx, network-graph.tsx, /api/clusters, /api/bridge-notes/*, état dégradé si clusters périmés
US-TEMPORAL	Prédictions d'accès temporelles	⏸️ REPORTÉ	Remplacé par rappels + révision SM-2 + Memory Echo ; heuristique faible, migration NoteAccessLog non prioritaire
US-FLASHCARDS	Révision IA — Répétition espacée SM-2	✅ LIVRÉ	/revision, /api/flashcards/*, SM-2, génération IA depuis l'éditeur
US-STRUCTURED-VIEWS	Vues Structurées (Tableau/Kanban/Galerie)	✅ LIVRÉ	/api/notebooks/[id]/schema, /api/notes/[id]/properties, vues structurées + panneau propriétés éditeur
US-NEXTGEN-EDITOR	Éditeur Next-Gen : Drag Handle + Menu Bloc + Vue Structurée Inline (redesign US-4) + Smart Paste	✅ LIVRÉ	Voir docs/story-nextgen-editor.md + docs/story-nextgen-editor-us4-redesign.md
US-EDITOR-PERF	Performance de frappe TipTap (quick wins)	✅ LIVRÉ	rich-text-editor.tsx (useEditorState), note-editor-context.tsx (debounced setContent)
US-EDITOR-UX	Micro-interactions saisie (slash menu, sélection multi-blocs, paste étendu, placeholders)	✅ LIVRÉ	Sélection globale, redesign Slash Menu (favoris/preview), placeholders contextuels, smart paste étendu, Turn Into & Undo/Redo
US-EDITOR-MOBILE	Expérience tactile & toolbar mobile adaptée	✅ LIVRÉ	Toolbar fixe premium 44px, Bottom Sheet tactile (actions de bloc + IA), sélection facilitée de bloc
US-EDITOR-MARKDOWN	Rendu WYSIWYG Markdown fidèle (round-trip byte-for-byte)	✅ LIVRÉ	Brief : docs/brief-markdown-roundtrip.md
US-ONBOARDING	Wizard Activation — Effet "Aha!" Recherche Sémantique	✅ LIVRÉ	Story : docs/story-onboarding-activation.md
US-BRAINSTORM-FINALIZE	Brainstorm Canvas D3 — Finalisation (export PPTX, gaps UX)	✅ LIVRÉ	brainstorm-page.tsx, 14 routes API
US-CHAT-PDF	Chat with PDF — RAG documentaire	✅ LIVRÉ	document-qa-overlay.tsx, document-ingestion, document-search tool
US-PPTX-EXPORT	Export PPTX + Watermark	✅ LIVRÉ	lib/brainstorm/export-pptx.ts, lib/ai/tools/pptx.tool.ts
US-PUBLISH-IA	Publication IA (templates magazine/brief/essay + rewrite)	✅ LIVRÉ	lib/publish/, publish-enhance.service.ts, 4 templates CSS, quota publish_enhance

---

Ordre d'implémentation (dépendances)

Quick wins (en premier, ~2h) :
  US-EDITOR-PERF       <- depend de : rien (modifs config TipTap)

Editeur Next-Gen (bloc principal) :
  US-NEXTGEN-EDITOR    <- depend de : US-LIVING-BLOCKS, US-STRUCTURED-VIEWS
  US-EDITOR-UX         <- depend de : US-NEXTGEN-EDITOR (drag handle + menu bloc en place)
  US-EDITOR-MOBILE     <- depend de : US-NEXTGEN-EDITOR (drag handle existant)

Plus tard :
  US-EDITOR-MARKDOWN   <- depend de : rien (evaluation Milkdown, low priority)

Stories livrees :
  US-LIVING-BLOCKS     <- depend de : TipTap UniqueID (fondation)
  US-MEMORY-ECHO       <- depend de : pgvector existant
  US-INFO-RESEAU       <- depend de : wikilinks + backlinks
  US-CLIPPER           <- depend de : migration Note.sourceUrl
  US-GRAPH             <- depend de : /api/graph existant
  US-INSIGHTS          <- depend de : Memory Echo + clusters
  US-FLASHCARDS        <- depend de : migration FlashcardDeck + Flashcard
  US-STRUCTURED-VIEWS  <- depend de : migration NotebookSchema + NotebookProperty

Reportees :
  US-TEMPORAL          <- depend de : migration NoteAccessLog (REPORTE)

---

Migrations Prisma requises (ordre d'application)

1. Note.sourceUrl String? → US-CLIPPER
2. LiveBlockRef → US-LIVING-BLOCKS
3. NotebookSchema + NotebookProperty + NoteProperty → US-STRUCTURED-VIEWS
4. FlashcardDeck + Flashcard + FlashcardReview → US-FLASHCARDS
5. NoteAccessLog → US-TEMPORAL

---

---

✅ US-SIDEBAR — Sidebar Deux Colonnes (LIVRÉ)

Contexte : Le prototype architectural-grid/Sidebar.tsx introduit un layout deux colonnes inspiré de SiYuan : une rail d'icônes étroit (54px) à gauche + un panneau de contenu dynamique à droite. L'ancienne sidebar avait des tabs horizontaux qui consommaient de l'espace vertical et manquaient de hiérarchie visuelle.

Livraison :

• memento-note/components/sidebar.tsx — restructuré en flex-row
• Colonne gauche (54px) : logo "M" avec dropdown profil, boutons nav verticaux avec indicateur actif, boutons utilitaires bas (notifications, corbeille, partagé, recherche Ctrl+K, thème, paramètres, déconnexion)
• Colonne droite : panneau dynamique (carnets, agents, rappels, brainstorms, révisions)
• NavigationView étendu à 'notebooks' | 'agents' | 'reminders' | 'brainstorms' | 'revision'
• Tooltips au survol qui apparaissent à droite du rail (UX SiYuan)
• Placeholder "Révisions" ajouté (en attente de US-FLASHCARDS)

Décision design : pas de toggle "ancien layout vs nouveau" dans les paramètres — design unique assumé.

---

✅ US-SEARCH — Recherche Globale Redesignée (LIVRÉ)

Contexte : Le prototype SearchModal.tsx est une refonte complète avec dual-panel, regex, queries sauvegardées et preview contextuel. Il contenait un bug : le flag caseSensitive appliquait toujours 'gi'. La navigation vers la note utilisait le mauvais paramètre URL.

Livraison :

• memento-note/components/search-modal.tsx — modal dual-panel (40% résultats + 60% préview)
• memento-note/context/search-modal-context.tsx — contexte React + raccourci global Ctrl+K
• memento-note/components/providers-wrapper.tsx — ajout du SearchModalProvider
• Bouton loupe dans le rail d'icônes du sidebar

Bugs corrigés :

// Bug 1 - casse regex (prototype) :
// AVANT : const flags = caseSensitive ? 'gi' : 'gi'
// APRÈS : const flags = caseSensitive ? 'g' : 'gi'

// Bug 2 - navigation vers la note :
// AVANT : router.push(`/home?noteId=${noteId}`)
// APRÈS : router.push(`/home?openNote=${noteId}`)

---

US-CLIPPER — Web Clipper Intégré

Contexte : Le prototype contient ClipperSimulator.tsx (618 lignes) qui simule le clipping avec données mock. Il n'existe rien d'équivalent dans memento-note. La feature doit être réalisée en deux parties : une extension Chrome/Firefox et un modal de réception côté app.

En tant qu'utilisateur, je veux capturer n'importe quelle page web depuis mon navigateur et l'enregistrer dans Memento avec résumé IA, tags suggérés et choix du carnet — sans quitter le navigateur.

Critères d'acceptation :

Extension navigateur (memento-note/extension/ — nouveau répertoire)

• Icône dans la barre d'outils du navigateur, clic ouvre un popup 380×520px
• Popup affiche : titre de la page (éditable), domaine + favicon, mode de capture (Article complet / Sélection / Lien seul)
• Bouton "Analyser avec IA" → appel POST /api/clip/analyze (URL + HTML content) → retourne { title, summary, tags[], readingTime }
• Champ de sélection du carnet (dropdown hiérarchique, dernier carnet mémorisé)
• Aperçu du contenu clipé (150px scrollable)
• Bouton "Sauvegarder dans Memento" → appel POST /api/clip/save avec { url, title, content, summary, tags, notebookId }
• Feedback visuel : spinner → "Sauvegardé ✓" avec lien direct vers la note

Route API app/api/clip/analyze/route.ts (nouvelle)

• Reçoit { url, html }, nettoie le HTML via @mozilla/readability ou DOMPurify
• Appelle le LLM Router existant (lib/ai/llm-router) pour générer { title, summary (3 phrases max), tags[] (5 max), readingTime }
• Retourne JSON structuré en < 3s

Route API app/api/clip/save/route.ts (nouvelle)

• Auth via NextAuth session
• Crée une Note de type richtext avec content = HTML nettoyé + bloc source en bas (<hr/><small>Extrait de [domaine] le [date]</small>)
• Sauvegarde l'URL source dans Note.sourceUrl (nouveau champ Prisma optionnel String?)
• Retourne { noteId, noteUrl } pour que l'extension redirige

Indicateurs visuels dans l'app

• Notification memory-echo-notification.tsx déclenché avec type: 'clip' : "Article clipé : [titre]" + bouton "Ouvrir"
• Badge Source Web visible dans note-document-info-panel.tsx onglet Infos (la logique displayNoteType doit inclure 'clip')

Adaptation du prototype

• ClipperSimulator.tsx → remplacer les MOCK_ARTICLES et handlers locaux par les vrais appels API
• Conserver l'animation d'apparition (framer-motion), la structure de sélection de carnet et le layout du popup
• Supprimer uuidv4 côté client (l'ID vient du serveur)

Migration Prisma

model Note {
  sourceUrl  String?   // URL d'origine pour les clips web
}

---

US-GRAPH — Graphe de Connaissance Global

Contexte : memento-note a déjà note-graph-view.tsx (vue plein écran avec react-force-graph-2d) et network-graph.tsx (rendu D3 clusters). Le prototype GraphKnowledgeMap.tsx est plus avancé : filtres, recherche dans le graphe, liens sémantiques + wiki, navigation contextuelle. L'objectif est d'enrichir note-graph-view.tsx avec ces fonctionnalités supplémentaires.

En tant qu'utilisateur, je veux explorer visuellement toute ma base de connaissance sous forme de graphe interactif, avec la possibilité de filtrer par carnet, de chercher un nœud, d'afficher ou masquer les liens sémantiques, et de voir un aperçu d'une note en cliquant sur son nœud.

Critères d'acceptation :

Panneau de contrôle latéral (nouveau dans note-graph-view.tsx)

• Toggle Liens wiki ON/OFF — masque/montre les arêtes type: 'wikilink'
• Toggle Liens sémantiques ON/OFF avec slider Seuil de similarité (0.30 → 0.90, pas 0.05)
• Multi-sélecteur de carnets (checkboxes colorées) — filtre les nœuds
• Input de recherche → met en surbrillance les nœuds correspondants et zoom vers eux

Nœuds interactifs

• Taille du nœud proportionnelle au degree (nombre de connexions)
• Couleur du nœud = couleur du carnet (via notebook.color en BDD)
• Hover → tooltip {titre} — {carnet} — {nb liens}
• Clic → panneau latéral droit (slide-in 320px) avec : titre, extrait (200 chars), date, labels, bouton "Ouvrir la note"
• Double-clic → navigation directe vers la note (router.push)

Performance

• API GET /api/graph existante retourne déjà { nodes, edges, clusters } — l'utiliser directement
• Pour les graphes > 500 nœuds : mode particle (canvas optimisé)
• Cooldown de stabilisation = 3s, puis freeze physique automatique

Navigation contextuelle

• Bouton "Explorer à partir de ce nœud" → re-centre avec voisins directs (1 hop) en avant, reste atténué
• Bouton "Réinitialiser la vue" → recentre sur tous les nœuds

Adaptation du prototype

• Extraire la logique de filtrage de GraphKnowledgeMap.tsx → intégrer dans note-graph-view.tsx
• Les couleurs CARNET_COLOR_PALETTE hardcodées → remplacer par les couleurs réelles via useNotebooks()
• Les données mock → remplacer par l'API GET /api/graph

---

US-LIVING-BLOCKS — Blocs Vivants (Transclusion Bidirectionnelle)

Contexte : Le prototype LivingBlock.tsx utilise un blockIndex (numéro de ligne) pour référencer un bloc — fragile si du contenu est inséré avant. BlockPicker.tsx utilise la similarité Jaccard — insuffisant. rich-text-editor.tsx n'a pas l'extension UniqueID de TipTap.

En tant qu'utilisateur, je veux insérer dans ma note un "bloc vivant" issu d'une autre note, qui reste synchronisé en temps réel avec la source, peut être édité des deux côtés, et se détache proprement si la source est supprimée.

1. IDs stables pour chaque bloc (fondation technique)

rich-text-editor.tsx — modification :

• Ajouter @tiptap/extension-unique-id → chaque nœud de type paragraph, heading, bulletList item, taskItem reçoit un data-id UUID v4 stable
• Persister ces IDs dans Note.content (les attributs data-id sont conservés dans le HTML)
• Le backend PUT /api/notes/[id] doit sauvegarder le contenu tel quel (aucun strip des data-id)

2. Insertion d'un bloc vivant

Commande slash dans l'éditeur :

• Taper /bloc ou /embed → ouvre le BlockPicker (modal overlay)
• BlockPicker (adapter du prototype) :
  • Onglet Suggestions IA : appel GET /api/blocks/suggestions?noteId={id} → 10 blocs les plus proches (pgvector cosine similarity)
  • Onglet Recherche : input texte → GET /api/blocks/search?q={query}
  • Onglet Memory Echo : affiche les MemoryEchoInsight déjà calculés avec bouton "Insérer ce bloc"
  • Clic sur un bloc → insère un nœud TipTap custom LiveBlock dans l'éditeur

Extension TipTap LiveBlockExtension (nouveau fichier components/tiptap-live-block-extension.tsx) :

• Type de nœud : liveBlock, attributs : { sourceNoteId, blockId, snapshotContent }
• Rendu : fond blueprint/5, bordure gauche blueprint, badge "LIVE" en coin supérieur droit
• Indicateurs : wsConnected (vert) / hors-ligne (ocre) / isDeleted (rose)
• Bouton "Détacher" → convertit en paragraph ordinaire avec le contenu actuel
• Bouton "Ouvrir la source" → router.push vers la note source

Route API POST /api/blocks/embed (nouvelle) :

• Body { sourceNoteId, blockId, targetNoteId } → crée un enregistrement LiveBlockRef en BDD

3. Synchronisation temps réel (Redis Pub/Sub existant)

• Modification d'un bloc dans la note source → publier block:update:{blockId} avec le nouveau HTML
• La note cible écoute ce canal → met à jour le snapshotContent en temps réel
• Suppression de la source → publier block:deleted:{blockId} → état isDeleted côté cible

Route API GET /api/blocks/[blockId]/status :

• Retourne { exists: boolean, content: string, sourceNoteTitle: string }

Migration Prisma

model LiveBlockRef {
  id             String   @id @default(cuid())
  sourceNoteId   String
  blockId        String   // data-id TipTap du bloc source
  targetNoteId   String
  createdAt      DateTime @default(now())
  sourceNote     Note     @relation("SourceLiveBlocks", fields: [sourceNoteId], references: [id], onDelete: Cascade)
  targetNote     Note     @relation("TargetLiveBlocks", fields: [targetNoteId], references: [id], onDelete: Cascade)
  @@index([sourceNoteId, blockId])
  @@index([targetNoteId])
}

Bug corrigé vs prototype

blockIndex (numéro de ligne, fragile) → remplacé par blockId (UUID stable via TipTap UniqueID).

---

US-STRUCTURED-VIEWS — Vues Structurées (Base de Données de Notes)

Contexte : Aucun prototype n'existe pour cette feature. Inspiration : SiYuan Database Views et Notion. Permettre de transformer un carnet en "vue structurée" avec propriétés personnalisées et plusieurs modes d'affichage.

En tant qu'utilisateur, je veux visualiser un ensemble de notes sous forme de tableau, kanban ou galerie — avec des propriétés personnalisées filtrables et triables — comme une base de données légère intégrée dans mon carnet.

1. Activation et définition des propriétés

• Dans le header d'un carnet, icône Table → active le mode vue structurée
• Clic + Ajouter une propriété → modal : nom, type (Texte / Nombre / Date / Sélection / Sélection multiple / Case)
• Les options de sélection sont définies à la création (ex. Statut: À faire / En cours / Terminé)
• Max 15 propriétés par carnet
• Stockées dans NotebookSchema / NotebookProperty

2. Saisie des valeurs par note

• Sidebar de l'éditeur, section "Propriétés"
• Saisie inline : date picker, input numérique, checkbox, dropdown
• Stockées dans NoteProperty (une ligne par note + propriété)
• Sauvegarde en debounce (500ms) via PATCH /api/notes/[id]/properties

3. Vue Tableau — notes-structured-table.tsx (nouveau)

• En-têtes = propriétés + Titre + Date modif
• Tri par colonne (clic en-tête) — ASC/DESC
• Filtre par colonne : Contient, Est égal à, Est vide
• Édition inline de la valeur directement dans la cellule
• Clic sur le titre → ouvre l'éditeur

4. Vue Kanban — notes-kanban-view.tsx (nouveau)

• Colonnes = valeurs d'une propriété Sélection (désignée "propriété de groupement")
• Drag & Drop entre colonnes (via @dnd-kit/sortable) → met à jour la propriété
• Bouton + Nouvelle note dans chaque colonne → crée une note avec la valeur pré-remplie

5. Vue Galerie — notes-gallery-view.tsx (nouveau)

• Grille 3-4 colonnes responsive
• Carte : illustrationSvg (si dispo) ou couleur du carnet, titre, 2 propriétés
• Survol → aperçu des propriétés complètes

6. Navigation entre vues

• Toggle dans le header du carnet : Liste / Tableau / Kanban / Galerie
• Vue sélectionnée persistée dans localStorage (par carnet)

Migration Prisma

model NotebookSchema {
  id          String               @id @default(cuid())
  notebookId  String               @unique
  notebook    Notebook             @relation(fields: [notebookId], references: [id], onDelete: Cascade)
  properties  NotebookProperty[]
  createdAt   DateTime             @default(now())
}

model NotebookProperty {
  id          String   @id @default(cuid())
  schemaId    String
  schema      NotebookSchema @relation(fields: [schemaId], references: [id], onDelete: Cascade)
  name        String
  type        String   // text | number | date | select | multiselect | checkbox
  options     String?  // JSON array des options pour select/multiselect
  position    Int
  noteValues  NoteProperty[]
}

model NoteProperty {
  id         String           @id @default(cuid())
  noteId     String
  propertyId String
  value      String?          // JSON selon le type
  note       Note             @relation(fields: [noteId], references: [id], onDelete: Cascade)
  property   NotebookProperty @relation(fields: [propertyId], references: [id], onDelete: Cascade)
  @@unique([noteId, propertyId])
}

---

US-FLASHCARDS — Révision IA par Répétition Espacée

Contexte : Le prototype RevisionView.tsx contient une implémentation complète avec flip cards, évaluation, sessions et decks. Les types Flashcard, FlashcardDeck, FlashcardEvaluation y sont définis. Rien n'existe dans memento-note. Adapter avec un vrai algorithme SM-2 et une vraie persistance BDD.

En tant qu'utilisateur, je veux générer automatiquement des flashcards à partir de mes notes grâce à l'IA, puis les réviser en session de répétition espacée (algorithme SM-2) — et voir ma progression dans le temps.

1. Génération de flashcards par l'IA

Menu action dans l'éditeur (icône GraduationCap) :

• Bouton "Générer des flashcards" → POST /api/flashcards/generate
• Body : { noteId, count: 5-20 (slider), style: 'qa' | 'cloze' | 'concept' }
• Types :
  • qa : question/réponse directe
  • cloze : phrase à trous ("La capitale de la France est ___")
  • concept : terme/définition
• Preview des flashcards générées avant confirmation (modal avec édition possible)
• Confirmation → sauvegarde en BDD dans le deck correspondant à la note

2. Organisation en decks

• Un FlashcardDeck créé automatiquement par carnet (notebookId → deckId 1:1)
• Deck manuel possible ("Créer un deck thématique")
• Vue /decks (ou onglet sidebar) : nom, nb cartes, nb à réviser aujourd'hui (badge rouge), dernière révision

3. Session de révision (adapter RevisionView.tsx)

• Écran d'accueil du deck : Total: X / À réviser: Y / Maîtrisées: Z
• Mode session : carte centrée avec flip 3D CSS
• 4 boutons d'évaluation : Difficile (1) / Dur (2) / Bien (3) / Facile (4)
• Fin de session : récapitulatif avec stats + graphe en barres (ChartExtension existante)

Algorithme SM-2 (côté serveur) :

easinessFactor = max(1.3, EF + 0.1 - (5 - grade) * (0.08 + (5 - grade) * 0.02))
nextInterval = previousInterval * easinessFactor
nextReview = now + nextInterval (en jours)

• Route POST /api/flashcards/[id]/review met à jour nextReviewAt, interval, easinessFactor

4. Dashboard de progression

• Heatmap de révision (vue calendrier) — composant revision-heatmap.tsx
• Courbe de rétention : % de cartes maîtrisées par semaine
• "Cartes difficiles" : les 5 cartes avec le easinessFactor le plus bas

Migration Prisma

model FlashcardDeck {
  id          String      @id @default(cuid())
  userId      String
  notebookId  String?
  name        String
  createdAt   DateTime    @default(now())
  flashcards  Flashcard[]
  user        User        @relation(fields: [userId], references: [id], onDelete: Cascade)
  notebook    Notebook?   @relation(fields: [notebookId], references: [id], onDelete: SetNull)
}

model Flashcard {
  id              String   @id @default(cuid())
  deckId          String
  noteId          String?
  front           String
  back            String
  type            String   @default("qa")
  interval        Int      @default(1)
  easinessFactor  Float    @default(2.5)
  nextReviewAt    DateTime @default(now())
  createdAt       DateTime @default(now())
  deck            FlashcardDeck @relation(fields: [deckId], references: [id], onDelete: Cascade)
  note            Note?    @relation(fields: [noteId], references: [id], onDelete: SetNull)
  reviews         FlashcardReview[]
}

model FlashcardReview {
  id          String   @id @default(cuid())
  cardId      String
  grade       Int      // 1-4
  reviewedAt  DateTime @default(now())
  card        Flashcard @relation(fields: [cardId], references: [id], onDelete: Cascade)
}

---

US-INFO-RÉSEAU — Panneau Info Document + Réseau Local

Contexte : note-document-info-panel.tsx (407L) existe en production avec onglets info et versions. Le prototype NotebookInfoSidebar.tsx ajoute un onglet Réseau (graphe orbit SVG) avec des explicitWikiLinks hardcodés — bug critique. Il faut ajouter l'onglet Réseau au composant existant en production, en branchant les vraies données.

En tant qu'utilisateur, je veux voir depuis le panneau contextuel d'une note : ses métadonnées enrichies, ses versions avec diff, et son réseau local de connexions — le tout dans un espace cohérent.

1. Onglet Infos (enrichissement)

• Ajouter calcul lineCount = nombre de \n dans le contenu HTML nettoyé
• Ajouter calcul equationCount = regex \$\$[\s\S]+?\$\$|\$[^$]+\$
• Ajouter calcul imageCount = regex <img|!\[
• Afficher ces métriques en grille 3×2 sous les métriques actuelles (mots/chars)
• Champ ID avec bouton copie (déjà disponible via note.id)
• Afficher "Source Web" si note.sourceUrl est défini (post US-CLIPPER)

2. Onglet Versions (amélioration)

• Filtre par type Manuel / Auto (basé sur reason: 'manual' | 'auto-save')
• Tri Date ↓/↑ et Taille ↓/↑
• Input de recherche sur le titre de la version
• Note : alert() et window.confirm() déjà remplacés dans le code production — ne pas régresser

3. Onglet Réseau (nouveau)

Graphe SVG orbit (280×280px) :

• Nœud central = note courante (couleur blueprint)
• Nœuds orbitaux intérieurs = liens sortants (NoteLink en BDD)
• Nœuds orbitaux extérieurs = liens entrants (GET /api/notes/[id]/backlinks — déjà en prod)
• Nœuds grisés = citations non liées (mentions [[NomNote]] sans NoteLink correspondant, détectées par regex côté client)
• Hover → tooltip {titre} + extrait du contextSnippet
• Clic → router.push(/notes/[id])
• Drag subtil (SVG onMouseDown + onMouseMove) pour repositionner les nœuds
• Si > 12 nœuds : afficher les 12 les plus connectés + badge +N autres

Corrections critiques (vs prototype)

Problème dans le prototype	Correction en production
explicitWikiLinks hardcodés	→ API backlinks réelle + NoteLink BDD
alert() pour preview versions	→ déjà corrigé en prod (NoteHistoryModal)
window.confirm() pour restauration	→ déjà corrigé en prod (AlertDialog)
Dates relatives hardcodées	→ déjà corrigé en prod (date-fns)

---

US-SEARCH — Voir section livrée ci-dessus

---

US-MEMORY-ECHO — Panneau de Résonance Sémantique Intégré

Contexte : editor-connections-section.tsx (255L) existe en production et appelle GET /api/ai/echo/connections (service pgvector complet). Mais il manque : le bouton "Embedder ce passage" (lien vers Living Blocks) et le panneau Rétroliens (quelles notes embarquent la note courante comme Living Block).

En tant qu'utilisateur, je veux voir en bas de chaque note le passage le plus sémantiquement proche de mes autres notes — avec la possibilité de l'insérer comme bloc vivant — et savoir quelles notes intègrent un extrait de ma note.

1. Bloc Memory Echo inline (enrichir editor-connections-section.tsx)

Apparence (adapter prototype NotebooksView.tsx L1397–1436) :

• Fond gradient from-indigo-500/3, bordure indigo-500/10
• Badge XX% affinité sémantique en mono (score = Math.round(similarity * 100)%)
• Icône Sparkles pulse, label MEMORY ECHO uppercase tracking-widest
• Citation en italic serif, bordure gauche indigo-500/20, 150 chars max

Bouton "Voir la connexion" :

• router.push(/notes/[sourceNoteId]) — déjà présent, conserver

Bouton "Embedder ce passage" (nouveau) :

• Ouvre le BlockPicker (US-LIVING-BLOCKS) pré-rempli avec { sourceNoteId, blockId }
• Fallback (si Living Blocks non encore implémenté) : copie le texte en bloc citation ordinaire

Source des données :

• GET /api/ai/echo/connections?noteId={id}&limit=1 — déjà en prod
• Si aucune connexion → section masquée

2. Section Rétroliens Living Block (nouvelle)

Logique :

• GET /api/notes/[id]/live-block-refs (nouvelle route, utilise LiveBlockRef de US-LIVING-BLOCKS)
• Retourne les notes qui contiennent un liveBlock pointant sur la note courante

Affichage :

• Titre RÉTROLIENS & INTÉGRATIONS SÉMANTIQUES uppercase tracking-widest
• Badge animé bleu-accent (pulse)
• Embeddé comme Living Block dans X note(s) :
• Cartes cliquables : icône Link2 + titre de la note hôte + carnet → router.push
• Si aucun rétrolien → section masquée

3. Connexions multiples

• Bloc Memory Echo affiche la meilleure connexion par défaut
• Bouton Voir toutes les connexions (N) → déplie la liste complète (réutilise editor-connections-section.tsx)
• Chaque connexion dans la liste a son propre bouton "Embedder ce passage"

4. Chargement

• Lazy loading : déclenché après 1.5s pour ne pas ralentir l'ouverture de la note
• Renommage : editor-connections-section.tsx → memory-echo-section.tsx

Correction du prototype

• Prototype calcule backlinks en parsant le contenu texte de toutes les notes (fragile, lent)
• Production : utiliser LiveBlockRef en BDD via API (performant et fiable)

---

US-INSIGHTS — Vue Clusters Sémantiques & Bridge Notes

Contexte : InsightsView.tsx (482L) du prototype contient : clustering sémantique avec nommage IA, Bridge Notes, graphe réseau des clusters. En prod : bridge-notes-dashboard.tsx existe mais est séparé. À unifier en une page cohérente.

En tant qu'utilisateur, je veux une vue dédiée qui me montre comment mes notes se regroupent thématiquement, quelles notes font le pont entre clusters, et le tout visualisé dans un graphe interactif.

Page app/(main)/insights/page.tsx

Section Clusters Sémantiques :

• Cartes colorées par cluster, nom généré par IA via bridge-notes.service.ts existant
• Liste des 5 notes les plus centrales par cluster
• Source : API /api/clusters existante

Section Bridge Notes :

• Intègre bridge-notes-dashboard.tsx existant + API /api/bridge-notes
• Suggestions de nouvelles Bridge Notes via /api/bridge-notes/suggestions

Section Graphe Réseau :

• Monte note-graph-view.tsx existant, filtré sur les clusters
• Toggle vue graph / vue dashboard

Adaptation depuis InsightsView.tsx

• Remplacer runClustering / geminiService (mock) → API /api/clusters
• Remplacer suggestBridgeIdeas → API /api/bridge-notes/suggestions
• Conserver le layout dashboard et la logique de vue mobile/desktop

---

US-TEMPORAL — Prédictions d'Accès Temporelles

Statut : ⏸️ REPORTÉ (2026-05-24) — Chevauche rappels, révision SM-2 et Memory Echo ; faible signal sans volume d'ouvertures ; pas prioritaire pour éviter la surcharge produit. Spec conservée pour réévaluation ultérieure éventuelle.

Contexte : TemporalView.tsx (169L) prédit quelles notes l'utilisateur voudra relire, basé sur des patterns d'accès. Rien n'existe en prod. Feature légère à fort impact perçu.

En tant qu'utilisateur, je veux voir dans la sidebar quelles notes je suis "sur le point" de vouloir relire — basé sur mes habitudes d'accès passées.

Migration Prisma

model NoteAccessLog {
  id         String   @id @default(cuid())
  noteId     String
  userId     String
  accessedAt DateTime @default(now())
  note       Note     @relation(fields: [noteId], references: [id], onDelete: Cascade)
  @@index([noteId, accessedAt])
  @@index([userId, accessedAt])
}

Logging automatique

• POST /api/notes/[id]/access appelé à chaque ouverture de note (fire-and-forget)

Route GET /api/notes/temporal-predictions

• Adapte la logique de temporalService.ts du prototype
• Retourne les top 5 notes prédites : { noteId, title, predictedAt, confidence, cycleType }

Widget dans la sidebar

• Section "Notes à relire" avec icône Clock
• Liste des 3 meilleures prédictions
• Badge cyclique / tendance selon le type
• Clic → ouvre la note

---

US-NEXTGEN-EDITOR — Éditeur Next-Gen : Drag Handle + Menu Bloc + DB Inline + Smart Paste

Status : PLANIFIÉ Depends on : US-LIVING-BLOCKS (UniqueID et transclusion), US-STRUCTURED-VIEWS (NotebookSchema et propriétés) Spec détaillée : docs/story-nextgen-editor.md (4 sous-stories : US-1 Drag Handle, US-2 Menu Action Bloc, US-3 Smart Paste, US-4 Database Inline)

Contexte : L'éditeur actuel est un document linéaire classique. Pour rivaliser avec Notion tout en étant plus performant, on implémente une approche hybride : un unique bouton de poignée en ProseMirror pur (pas de composant React lourd par paragraphe), un menu contextuel de bloc, une transclusion au collage, et un bloc database inline.

4 sous-stories (détail dans docs/story-nextgen-editor.md) :

US-1 : Poignée de Glissement Gutter Unique (Hover Drag Handle)

• Bouton flottant unique dans la marge gauche, suit le curseur de bloc en bloc
• Un seul élément DOM repositionné (pas de duplication)
• Drag & drop de blocs avec indicateur de ligne d'insertion
• Masqué sur mobile/tactile

US-2 : Menu Action Rapide de Bloc

• Clic sur la poignée -> dropdown glassmorphism
• Actions : Supprimer, Dupliquer, Transformer en (H1/H2/H3/liste/todo/citation/code/database), Copier la référence
• Utilise le UniqueID TipTap pour les références stables

US-3 : Transclusion intelligente au Collage (Smart Paste)

• Collage d'un lien de bloc -> menu inline : "Bloc Connecté (Live)" ou "Texte simple"
• Insère un nœud liveBlock synchronisé via Redis Pub/Sub

US-4 : Vue Structurée de Carnet Inline — Redesign

⚠️ Spec complète : docs/story-nextgen-editor-us4-redesign.md

• Slash /vue (+ keywords database, db, tableau) → insère un structuredViewBlock
• Affiche Table ou Galerie du carnet courant via l'API Structured Views existante
• Bloc stocke uniquement notebookId + displayMode (pas de données en attrs TipTap)
• Graceful fallback si carnet sans schéma ou note sans carnet
• Supprime le code legacy tiptap-database-block-extension.tsx (Verne/Liu Cixin)
• Dépend de : US-STRUCTURED-VIEWS ✅ (livré)

Fichiers

• [NEW] tiptap-drag-handle-plugin.ts — Plugin ProseMirror pur (US-1)
• [NEW] tiptap-structured-view-block-extension.tsx — NodeView Vue Structurée (US-4 redesign)
• [NEW] structured-view-block-embed.tsx — Composant embed avec SWR + états dégradés
• [DELETE] tiptap-database-block-extension.tsx — Legacy Auteurs/Œuvres rejeté
• [DELETE] database-block-editor.tsx — UI legacy rejetée
• [DELETE] lib/editor/database-block-types.ts — Types legacy rejetés
• [MODIFY] note-content-area.tsx — Passer notebookId à l'éditeur
• [MODIFY] rich-text-editor.tsx — Swap extension DB → Vue Structurée, mise à jour slash
• [MODIFY] block-action-menu.tsx — Remplacer option "Database" par "Vue structurée"
• [MODIFY] globals.css — Gutter, poignée, glassmorphic dropdowns

---

US-EDITOR-PERF — Performance de Frappe TipTap (Quick Wins)

Status : PLANIFIÉ Depends on : rien (modifications config TipTap, ~2h) Priorité : HAUTE — impact immédiat sur le ressenti de saisie Source recherche : TipTap 2.5 (mai 2026), TipTap docs performance, PR #7828

Contexte : Actuellement rich-text-editor.tsx utilise immediatelyRender: false mais pas shouldRerenderOnTransaction ni useEditorState. TipTap re-render le composant React à chaque transaction (frappe, déplacement curseur, sélection) — ce qui ajoute de la latence. Obsidian atteint <16ms de latence (local-first), Notion 50-150ms (cloud). Memento est local mais se comporte comme Notion à cause de ces re-renders inutiles.

En tant qu'utilisateur, je veux que la frappe dans l'éditeur soit instantanée, sans aucun décalage perceptible, même sur des notes longues avec de nombreux blocs.

1. shouldRerenderOnTransaction: false (1 ligne)

// rich-text-editor.tsx — useEditor()
const editor = useEditor({
  extensions: [...],
  immediatelyRender: false,
  shouldRerenderOnTransaction: false,  // <-- AJOUTER
  // ...
})

• Le composant React EditorContent ne se re-render plus sur chaque transaction
• Seul le DOM ProseMirror est mis à jour (ultra-rapide, natif)
• Gain mesurable : de ~50-100ms par frappe à <16ms

2. useEditorState pour la toolbar et les panels

import { useEditorState } from '@tiptap/react'

// Au lieu de useEditor + editor.isActive() dans le render :
const { isBold, isItalic, isHeading } = useEditorState({
  editor,
  selector: (ctx) => ({
    isBold: ctx.editor.isActive('bold'),
    isItalic: ctx.editor.isActive('italic'),
    isHeading: ctx.editor.isActive('heading'),
  }),
})

• La toolbar et le panneau propriétés ne se re-rendent que quand leur slice d'état change
• Actuellement, tout le composant editor re-render à chaque frappe -> la toolbar aussi

3. Isoler l'éditeur dans un composant dédié

• Créer NoteEditorCore (composant wrapper) qui ne reçoit que les props strictement nécessaires
• Les re-renders du parent (note-panel, sidebar ouverture, etc.) ne doivent PAS propager dans l'éditeur
• React.memo sur le wrapper si besoin

4. NodeViews : trackNodeViewPosition: false par défaut

• Les NodeViews React (LiveBlock, Chart, DatabaseBlock) ne doivent pas se re-re-render quand seul leur position dans le document change
• TipTap PR #7828 (mai 2026) : shallow prop comparison + opt-in position tracking
• Vérifier que chaque NodeView utilise stopEvent(), ignoreMutation(), et ne déclenche pas de setState inutile

5. Vérification

• console.count('editor render') dans le composant éditeur pour mesurer le nombre de re-renders
• Objectif : 0 re-render React pendant la frappe pure (seul ProseMirror DOM bouge)

---

US-EDITOR-UX — Micro-Interactions de Saisie

Status : LIVRÉ Depends on : US-NEXTGEN-EDITOR (drag handle et menu bloc doivent être en place) Source recherche : Mintlify "22 UX improvements" (mai 2026), BlockNote v0.50, BlockNote v0.49

Contexte : Après les quick wins performance (US-EDITOR-PERF) et le drag handle (US-NEXTGEN-EDITOR), il reste des micro-interactions qui font la différence entre un éditeur "correct" et un éditeur "agréable". Mintlify a listé 22 améliorations UX en mai 2026 — voici les plus pertinentes pour Memento.

En tant qu'utilisateur, je veux que chaque interaction courante (insérer un bloc, déplacer du contenu, transformer un format) soit fluide et intuitive, sans recourir à des raccourcis clavier obscurs.

1. Sélection globale de blocs (Haute priorité)

• Shift+clic pour sélectionner plusieurs blocs contigus
• Drag de sélection multi-blocs
• Actions groupées : supprimer, déplacer, transformer en masse
• Visuel : blocs sélectionnés avec fond accent/5, bordure accent/30
• Inspiration : Mintlify "Global Block Selection" — nettoyage de pages longues sans actions répétées

2. Slash menu redessiné (Haute priorité)

• Type-to-search avec catégories visuelles (Texte, Média, Données, Intégré, IA)
• Navigation clavier fluide (flèches + Entrée, Esc pour fermer)
• Épinglage des 3-5 commandes les plus utilisées en haut
• Description courte sous chaque item (ex. "Code" -> "Bloc de code avec coloration syntaxique")
• Preview visuel au survol pour les blocs complexes (tableau, database, chart)
• Inspiration : Mintlify slash menu redesign, BlockNote catégories

3. Placeholders contextuels par type de bloc (Moyenne priorité)

• Paragraphe vide : "Tapez / pour insérer un bloc..."
• Heading H1 vide : "Titre principal"
• Heading H2 vide : "Titre de section"
• TaskItem vide : "Ajouter une tâche"
• Bloc de code vide : "Code..."
• Bullet list vide : "Liste"
• Inspiration : BlockNote "Helpful placeholders"

4. Collage intelligent étendu (Moyenne priorité)

• Coller une URL HTTP(S) -> propose : lien hypertexte / intégration image / intégration vidéo
• Coller du code (détecté par caractères spéciaux {}[];) -> propose : bloc de code avec auto-détection langage
• Coller une image depuis le presse-papier -> upload direct (déjà en prod, vérifier la fluidité)
• Coller du HTML riche -> nettoyage intelligent (conserver structure, supprimer styles inline superflus)
• Inspiration : US-3 Smart Paste existe pour les blocs connectés — étendre au contenu générique

5. "Turn into" instant (Moyenne priorité)

• Raccourci clavier : sélectionner du texte + Cmd+Shift+H -> cycle H1 > H2 > H3 > paragraphe
• Via le menu bloc (US-2) : transformation instantanée sans flash ni re-render visible
• Conserver le contenu et les attributs (gras, liens, etc.) lors de la conversion
• Inspiration : Mintlify "Turn Blocks Into Anything"

6. Undo/redo visuel discret (Basse priorité)

• Toast subtil (2s) : "Action annulée" / "Action rétablie"
• Raccourci affiché dans le toast : "Cmd+Z pour annuler, Cmd+Shift+Z pour rétablir"
• Ne pas utiliser toast pour les actions normales — seulement undo/redo pour confirmer le feedback

---

US-EDITOR-MOBILE — Expérience Tactile & Toolbar Mobile

Status : LIVRÉ Depends on : US-NEXTGEN-EDITOR (drag handle existant) Source recherche : Notion mobile app, Obsidian mobile, benchmark 2026

Contexte : L'éditeur fonctionne sur mobile mais l'expérience est dégradée : la bubble menu est trop petite pour les doigts, le drag handle est masqué (prévu) mais il n'y a pas d'alternative tactile, et les sélections longues sont douloureuses en contenteditable.

En tant qu'utilisateur mobile, je veux pouvoir éditer mes notes confortablement depuis mon téléphone ou tablette, avec des contrôles adaptés au tactile.

1. Toolbar mobile adaptée

• Remplacer la bubble menu desktop par une toolbar fixe en bas d'écran (viewport < 768px)
• Boutons 44x44px minimum (Apple HIG)
• 8 actions principales : Gras, Italique, Surligner, Lien, Liste, Titre, Code, Plus (menu étendu)
• Scroll horizontal si plus d'actions
• Inspiration : Notion mobile toolbar

2. Menu bloc tactile

• Pas de drag handle sur mobile (déjà prévu dans US-1)
• Alternative : swipe gauche sur un bloc -> reveal actions (supprimer, dupliquer, transformer)
• Ou : tap long sur un bloc -> menu contextuel mobile natif (action sheet iOS / bottom sheet Android)
• Bouton "Déplacer" dans le menu -> mode réorganisation avec poignées tactiles

3. Sélection de texte améliorée

• Les sélections longues en contenteditable sont frustrantes sur mobile
• Ajouter un bouton "Sélectionner tout le bloc" dans le menu bloc tactile
• Double-tap sélectionne le mot, triple-tap sélectionne le paragraphe (comportement natif iOS/Android, vérifier que TipTap ne l'écrase pas)

4. Performance mobile

• Les NodeViews React lourds (Chart, DatabaseBlock) doivent avoir un fallback léger sur mobile
• Désactiver les animations de la bubble menu sur mobile (prefers-reduced-motion)
• immediatelyRender: false déjà en place — bon pour le premier rendu mobile

---

US-EDITOR-MARKDOWN — Rendu WYSIWYG Markdown Fidèle

Status : À FAIRE (low priority) Depends on : rien (évaluation Milkdown) Source recherche : Milkdown v7.20, "Human Markdown" extension VSCode, round-trip byte-for-byte

Contexte : Memento stocke les notes en HTML (TipTap). Mais les notes de type markdown existent aussi. Le problème classique : éditer en riche et voir le Markdown reformatté intégralement (indentations changées, lignes vides supprimées, ## convertis en soulignements). Milkdown (11k+ stars, ProseMirror + remark) résout ce problème avec un round-trip byte-for-byte.

En tant qu'utilisateur, je veux que mes fichiers Markdown restent intacts quand je les édite en mode visuel — pas de diff parasite sur chaque modification.

1. Évaluation technique Milkdown

• Installer @milkdown/core + @milkdown/preset-commonmark + @milkdown/preset-gfm
• Benchmarker le round-trip : ouvrir un .md, éditer un paragraphe, sauvegarder, vérifier que seul ce paragraphe change dans le diff
• Comparer avec la solution actuelle (TipTap HTML storage) pour les notes markdown
• Référence : "Human Markdown" VSCode extension (Milkdown + byte-for-byte tests)

2. Mode d'édition dual (si Milkdown adopté)

• Toggle dans la toolbar : mode Visuel (WYSIWYG) / mode Brut (CodeMirror)
• Transition en <100ms, même position de scroll
• Le mode Visuel affiche le rendu live (titres, listes, tables, images, checkboxes cliquables)
• Le mode Brut affiche le Markdown source avec coloration syntaxique
• Inspiration : "Human Markdown" — Cmd+Shift+V pour basculer

3. Intégration avec les notes existantes

• Notes type richtext : inchangé (stockage HTML TipTap)
• Notes type markdown : mode dual avec Milkdown
• Détection automatique du type à l'ouverture
• Conversion possible : richtext -> markdown (export) et markdown -> richtext (import)

4. Support GFM complet

• Tables Markdown rendues comme de vrais tableaux éditables
• Task lists avec checkboxes cliquables
• Footnotes rendues inline
• Frontmatter YAML en carte collapsible en haut de document
• Inspiration : "Human Markdown" — GFM complet, Shiki pour le code