feat(notes): liens internes, onglet Réseau, living blocks et consentement IA

Rend les liens entre notes visibles et persistants (sync NoteLink au save, auto-save, graphe réseau rafraîchi), ajoute living blocks, Memory Echo, recherche globale, consentement IA explicite et consolide les prototypes design en architectural-grid.

Co-authored-by: Cursor <cursoragent@cursor.com>

AGENTS.md

@@ -5,26 +5,27 @@
 - Préfère les échanges en français, avec des explications détaillées et claires (éviter le jargon flou).
 - Interface : tout libellé via i18n dans les 15 fichiers `memento-note/locales/*.json` (FR et EN comme références de contenu) ; éviter le texte en dur ; traductions **contextuelles** (sens produit, pas mot à mot — ex. « connecter votre propre fournisseur ») ; lors d'une traduction complète, mettre à jour toutes les locales concernées ; si l'utilisateur demande seulement les **clés i18n**, ajouter les clés (souvent EN/FR) sans remplir les 15 locales — il traduit souvent avec un autre modèle.
 - Base de données : **INTERDIT TOTALEMENT** de lancer `prisma db push --force-reset`, `prisma migrate reset`, `DROP TABLE`, `TRUNCATE`, `pg_restore` avec clean, ou TOUTE commande qui vide/supprime des données — MÊME SI l'utilisateur est d'accord — sans avoir d'abord : (1) dumpé la base avec `bash /home/devparsa/dev/Momento/dump-db.sh`, (2) vérifié le dump fait au moins 1Mo, (3) obtenu un "OUI" explicite de l'utilisateur. **4 incidents de perte de données documentés (14/05, 15/05 x2, 16/05). NE JAMAIS REFAIRE ÇA.**
-- Design produit : migration depuis les gabarits `architectural-grid1` (base cible) et `architectural-grid` ; avancer pas à pas avec validation ; respecter la logique liste / carte de notes puis contenu au clic comme dans la référence.
-- Contraste éditeur clair face à une sidebar plus sombre ; fiabiliser la navigation du sidebar en s'alignant sur la logique des dossiers de référence design.
-- Retirer les traces de bleu ou de thème obsolètes ; harmoniser les couleurs des vues (ex. Agents) avec le design courant ; revoir la cohérence des options de thème dans les paramètres.
+- Design produit : migration depuis `architectural-grid1` (base) et `architectural-grid` (prototype UI courant) ; **consulter le prototype avant toute implémentation UI** ; logique liste/carte puis contenu au clic ; parité actions liste/carte (menus « … », déplacer, génération SVG, etc.) ; contraste éditeur clair / sidebar sombre ; retirer thèmes obsolètes ; **pas de refresh/revalidation complets inutiles** (aligné prototype — mutations optimistes, pas de `revalidatePath` systématique ni resync depuis `initialNotes`) ; **Memory Echo en section inline dans l'éditeur** (pas l'ancienne modale) ; si l'utilisateur hésite entre variantes UX, **trancher pour le design prototype** plutôt que multiplier les toggles.
 - Locale persane : dates en calendrier iranien (conversion), chiffres persans, et vérification RTL/positionnement global ; attention à ne pas confondre un nom de carnet (ex. « Persan ») avec le libellé de langue.
 - Flux Excalidraw / diagrammes générés : accès via notification en plus d'une simple redirection ; priorité à la mise en page et au texte contenu dans les formes ; proposer des modes visuels (ex. coloré vs plus austère) tout en visant un rendu proche du style Excalidraw (polices, look).
-- L'admin doit être intégré au nouveau design (éviter l'ancienne topbar isolée).
-- Ne pas supposer les réglages utilisateur (modes, options) sans preuve dans l'UI ou les données.
 - **Interdiction d'écrire des tests** sauf demande explicite ; en CI, seul `npm run test:unit` (`tests/unit/**`) — pas `tests/migration/` ; ne jamais générer de code superflu.
-- Déploiement : privilégier le chemin rapide (artifact Next.js en CI + `Dockerfile.prebuilt`) ; éviter les rebuild Docker complets inutiles (~15 min par itération).
+- Déploiement : privilégier le chemin rapide (artifact Next.js en CI + `Dockerfile.prebuilt`) ; CI/CD très robuste (pas d'image Docker obsolète en prod, pas de migrations/schéma DB via le workflow deploy) ; éviter les rebuild Docker complets inutiles (~15 min par itération) ; **ne pas pousser un déploiement quand des features clés sont inachevées** ; ne pas insister sur le déploiement tant que le produit n'est pas fini ou meilleur.
+- Authentification : priorité à l'inscription/connexion via **Google OAuth** (plutôt qu'un compte email/mot de passe) ; exiger une vraie déconnexion (invalidation session/cookies — pas de reconnexion implicite, y compris en navigation privée).
+- Priorité absolue à la qualité UX, même si l'implémentation est complexe (« je m'en fous si c'est complexe ») ; **ne jamais affirmer qu'un correctif ou une feature est fait sans vérification réelle** (app, prototype `architectural-grid`, ou test) — l'utilisateur sanctionne fermement les fausses déclarations.
+- Livraison : **une user story à la fois**, tester et valider avec l'utilisateur avant la suivante ; suivi dans `docs/user-stories.md`.
+- Quand demandé, **fournir des briefs pour un outil de design externe** plutôt que produire les maquettes UX soi-même.
 
 ## Learned Workspace Facts
 
 - Application Next.js principalement sous `memento-note/`.
 - Référentiels design du workspace : `architectural-grid1/` et `architectural-grid/` à la racine du repo Momento.
 - i18n : 15 fichiers sous `memento-note/locales/` (de, en, es, fr, it, pt, nl, pl, ru, zh, ja, ko, ar, fa, hi) ; logique sous `memento-note/lib/i18n/` ; référence `en.json` (~2218 clés) ; auditer les « non traduits » par flatten EN vs locale (souvent valeurs identiques à l'EN).
-- Workflow BMad : stories sous `docs/` (ex. `3-4-host-pays-session-logic.md`), suivi sprint dans `docs/sprint-status.yaml` ; skills sous `.claude/skills/bmad-*` ; `_bmad-output/planning-artifacts` souvent vide — planification de référence dans `docs/`.
+- Workflow BMad : stories sous `docs/` (ex. `3-4-host-pays-session-logic.md`), suivi sprint dans `docs/sprint-status.yaml` et stories courantes dans `docs/user-stories.md` ; skills sous `.claude/skills/bmad-*` ; `_bmad-output/planning-artifacts` souvent vide — planification de référence dans `docs/` ; préférer **une user story par feature** (pas de stories groupées).
 - PostgreSQL Docker (`memento-postgres`) sur le port 5433 ; Redis Docker (`memento-redis`) sur le port 6379 (voir règles projet).
 - Règles opérationnelles Prisma et sécurité base de données décrites dans `CLAUDE.md` à la racine du repo.
-- Production : dépôt `/opt/memento` sur `192.168.1.190`, conteneur `memento-note` sur le port **3000**, URL publique **https://note.parsanet.org** (nginx + Cloudflare) ; ne pas recréer Postgres en prod (`deploy.yaml` / `deploy-prod.sh`).
+- Production : dépôt `/opt/memento` sur `192.168.1.190`, conteneur `memento-note` sur le port **3000**, URL publique **https://memento-note.com** (nginx + Cloudflare ; ancien domaine note.parsanet.org) ; `NEXTAUTH_URL` aligné sur ce domaine ; email sortant via **Resend** (`SMTP_FROM` ex. `noreply@memento-note.com`, domaine vérifié sur resend.com) ; deploy (`deploy.yaml` / `deploy-prod.sh`) **sans toucher Postgres** (pas de `postgresql-client`, pas de migrations auto en prod).
 - CI/CD Gitea : `.gitea/workflows/ci.yaml` — CI sur `ubuntu-24.04`, deploy sur runner **`docker-host`** (sur le serveur) ; deploy manuel via `.gitea/workflows/deploy.yaml` ou `bash scripts/deploy-prod.sh`.
 - Migrations dans l'image prebuilt : `docker compose exec memento-note node ./node_modules/prisma/build/index.js migrate deploy` (pas `npx prisma` dans le PATH) ; helper `scripts/migrate-docker.sh`.
 - Vérification deploy : `GET /api/build-info` (SHA Git) ; comparer `127.0.0.1:3000` et le domaine Cloudflare — purger le cache si versions divergent ; 403 sur `/api/manifest` côté domaine = souvent Cloudflare, pas l'app.
-- Guide utilisateur illustré : `docs/guide-utilisateur/README.md`, captures dans `docs/guide-utilisateur/screenshots/` ; régénération via `docs/guide-utilisateur/capture-screenshots.mjs` lancé depuis `memento-note/` (Playwright) ; URL lue depuis `NEXTAUTH_URL` ou `MOMENTO_DOC_BASE_URL`.
+- Sync mutations notes entre composants : `memento-note/lib/note-change-sync.ts` (`emitNoteChange`, événement `NOTE_CHANGE_EVENT`).
+- Roadmap / écart prototype vs prod : Web Clipper, Living Blocks (TipTap UniqueID), Structured Views, Flashcards IA (SM-2), Graph Knowledge Map — prototypes dans `architectural-grid/` (`ClipperSimulator.tsx`, `RevisionView.tsx`, `GraphKnowledgeMap.tsx`) ; en prod : `network-graph.tsx`, `note-document-info-panel.tsx`, `note-history-modal.tsx`, `rich-text-editor.tsx` (sans UniqueID pour l'instant).

_bmad-output/implementation-artifacts/deferred-work.md

@@ -15,3 +15,12 @@
 ## Deferred from: chart suggestions feature (2026-05-23)
 
 - **Build error in note-graph-view.tsx** — Variable `plainText` définie plusieurs fois (ligne 238). Fichier préexistant modifié hors de cette tâche. À corriger indépendamment.
+
+## Deferred from: code review of 4-4-explicit-ai-consent (2026-05-23)
+
+- **PUT `/api/ai/batch-organize` sans check consent** — Handler PUT applique le plan d’organisation en DB sans appeler d’API IA tierce ; hardening consent possible mais hors périmètre GDPR direct.
+
+## Deferred from: code review of 4-3-data-portability (2026-05-23)
+
+- **`lib/export/zip-builder.ts` non extrait** — logique inline dans la route ; fonctionnel mais écarte la structure prévue par la story.
+- **Rate limiting absent sur `GET /api/user/export`** — vecteur d’abus (exports répétés) ; hardening ultérieur.

architectural-grid/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+<img width="1200" height="475" alt="GHBanner" src="https://ai.google.dev/static/site-assets/images/share-ais-513315318.png" />
 </div>
 
 # Run and deploy your AI Studio app

architectural-grid/server.ts

@@ -71,7 +71,7 @@ async function startServer() {
         console.log(`User ${user?.name || 'Guest'} joined session: ${sessionId}`);
       }
 
-      if (data.type === 'idea_added' || data.type === 'idea_updated' || data.type === 'activity') {
+      if (data.type === 'idea_added' || data.type === 'idea_updated' || data.type === 'activity' || data.type === 'living_block_update') {
         if (currentRoom && rooms.has(currentRoom)) {
           rooms.get(currentRoom)!.forEach(client => {
             if (client !== ws && client.readyState === WebSocket.OPEN) {

architectural-grid/src/App.tsx

@@ -5,6 +5,7 @@
 
 import React, { useState, useMemo } from 'react';
 import { motion, AnimatePresence } from 'motion/react';
+import { X } from 'lucide-react';
 
 // Components
 import { Sidebar } from './components/Sidebar';
@@ -19,10 +20,15 @@ import { AISidebar } from './components/AISidebar';
 import { SlashMenu } from './components/SlashMenu';
 import { LandingPage } from './components/LandingPage';
 import { AuthPage } from './components/AuthPage';
+import { SearchModal } from './components/SearchModal';
+import { ClipperSimulator } from './components/ClipperSimulator';
+import { GraphKnowledgeMap } from './components/GraphKnowledgeMap';
+import { RevisionView } from './components/RevisionView';
 
-// Data & Types
+// Data & Services
 import { CARNETS, ALL_NOTES } from './constants';
-import { NavigationView, SettingsTab, AITab, AITone, Carnet, Note, BrainstormIdea, NoteAccessLog } from './types';
+import { generateFlashcardsForNote } from './services/geminiService';
+import { NavigationView, SettingsTab, AITab, AITone, Carnet, Note, BrainstormIdea, NoteAccessLog, Flashcard } from './types';
 
 export default function App() {
   const [showLanding, setShowLanding] = useState(() => {
@@ -79,6 +85,56 @@ export default function App() {
     return localStorage.getItem('momento-accent-color') || '#A47148';
   });
 
+  // Flashcards state with beautiful architectural starter deck
+  const [flashcards, setFlashcards] = useState<Flashcard[]>(() => {
+    const stored = localStorage.getItem('momento-flashcards');
+    if (stored) {
+      try {
+        return JSON.parse(stored);
+      } catch (e) {
+        console.error("Failed to parse stored flashcards:", e);
+      }
+    }
+    // Beautiful default seeds for 'n1' (Grid Systems & Geometry)
+    const SEEDS: Flashcard[] = [
+      {
+        id: 'f1',
+        noteId: 'n1',
+        question: 'Quel est l’intérêt primordial des trames géométriques en conception spatiale ?',
+        answer: 'Elles structurent l’espace bâti en créant un sens d\'ordre, de rythme, et d\'harmonie de proportions esthétiques dans l\'environnement, facilitant la lisibilité de la structure.',
+        intervalDays: 1,
+        nextReviewDate: new Date().toISOString(), // Due today
+        easeFactor: 2.5,
+        mastered: false
+      },
+      {
+        id: 'f2',
+        noteId: 'n1',
+        question: 'En quoi l’approche dynamique paramétrique déforme-t-elle les grilles de construction traditionnelles ?',
+        answer: 'Par l\'utilisation d\'algorithmes mathématiques de déformation réactifs à des ensembles de données environnementales pour créer des géométries fluides mais structurellement ordonnées.',
+        intervalDays: 3,
+        nextReviewDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 3).toISOString(), // Due soon
+        easeFactor: 2.5,
+        mastered: true
+      },
+      {
+        id: 'f3',
+        noteId: 'n1',
+        question: 'Quelle est la particularité de l’intégration de la lumière comme matériau d’espace ?',
+        answer: 'La soustraction du superflu permet aux reflets et à la diffraction lumineuse de créer des profondeurs visuelles changeantes sans surcharger l\'aménagement matériel.',
+        intervalDays: 1,
+        nextReviewDate: new Date().toISOString(), // Due today
+        easeFactor: 2.4,
+        mastered: false
+      }
+    ];
+    return SEEDS;
+  });
+
+  const [isGeneratingFlashcards, setIsGeneratingFlashcards] = useState(false);
+  const [activeReviewDeckId, setActiveReviewDeckId] = useState<string | null>(null);
+  const [toast, setToast] = useState<{ show: boolean; message: string }>({ show: false, message: '' });
+
   React.useEffect(() => {
     document.documentElement.style.setProperty('--color-accent', accentColor);
     localStorage.setItem('momento-accent-color', accentColor);
@@ -93,6 +149,55 @@ export default function App() {
     }));
   };
 
+  const handleGenerateFlashcards = async (noteId: string) => {
+    const targetNote = notes.find(n => n.id === noteId);
+    if (!targetNote) return;
+
+    setIsGeneratingFlashcards(true);
+    try {
+      const rawContent = targetNote.content || "";
+      const generated = await generateFlashcardsForNote(targetNote.title, rawContent);
+      
+      if (generated && generated.length > 0) {
+        const mappedCards: Flashcard[] = generated.map((c, i) => ({
+          id: `f-${noteId}-${Date.now()}-${i}`,
+          noteId,
+          question: c.question,
+          answer: c.answer,
+          intervalDays: 1,
+          nextReviewDate: new Date().toISOString(),
+          easeFactor: 2.5,
+          mastered: false
+        }));
+
+        const updatedSet = [...flashcards.filter(fc => fc.noteId !== noteId), ...mappedCards];
+        setFlashcards(updatedSet);
+        localStorage.setItem('momento-flashcards', JSON.stringify(updatedSet));
+
+        setToast({
+          show: true,
+          message: `${mappedCards.length} flashcards créées avec succès pour "${targetNote.title}".`
+        });
+        setTimeout(() => setToast(t => ({ ...t, show: false })), 4000);
+      } else {
+        setToast({
+          show: true,
+          message: "Impossible d'extraire des flashcards exploitables à partir du texte existant."
+        });
+        setTimeout(() => setToast(t => ({ ...t, show: false })), 4000);
+      }
+    } catch (err) {
+      console.error("AI flashcards expansion failed:", err);
+      setToast({
+        show: true,
+        message: "Une erreur est survenue lors de la génération avec Gemini."
+      });
+      setTimeout(() => setToast(t => ({ ...t, show: false })), 4000);
+    } finally {
+      setIsGeneratingFlashcards(false);
+    }
+  };
+
   React.useEffect(() => {
     if (activeNoteId) {
       logNoteAccess(activeNoteId);
@@ -114,9 +219,31 @@ export default function App() {
         setActiveView(e.detail as NavigationView);
       }
     };
+
+    const handleGlobalShortcut = (e: KeyboardEvent) => {
+      // Trigger advanced search with Ctrl+F or Cmd+F or Ctrl+P or Cmd+P
+      if ((e.ctrlKey || e.metaKey) && (e.key === 'f' || e.key === 'p')) {
+        e.preventDefault();
+        setIsSearchOpen(true);
+      }
+    };
+
+    const handleToggleClipper = () => {
+      setIsClipperSimulatorOpen(prev => !prev);
+    };
+
     window.addEventListener('switch-view', handleSwitchView);
-    return () => window.removeEventListener('switch-view', handleSwitchView);
+    window.addEventListener('keydown', handleGlobalShortcut);
+    window.addEventListener('toggle-clipper-simulator', handleToggleClipper);
+    return () => {
+      window.removeEventListener('switch-view', handleSwitchView);
+      window.removeEventListener('keydown', handleGlobalShortcut);
+      window.removeEventListener('toggle-clipper-simulator', handleToggleClipper);
+    };
   }, []);
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const [isClipperSimulatorOpen, setIsClipperSimulatorOpen] = useState(false);
+  const [clipperToast, setClipperToast] = useState<{ id: string; title: string; noteId: string } | null>(null);
   const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
   const [isAISidebarOpen, setIsAISidebarOpen] = useState(false);
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
@@ -148,6 +275,24 @@ export default function App() {
     }
   };
 
+  React.useEffect(() => {
+    if (clipperToast) {
+      const timer = setTimeout(() => {
+        setClipperToast(null);
+      }, 4000);
+      return () => clearTimeout(timer);
+    }
+  }, [clipperToast]);
+
+  const handleOpenClippedNote = (noteId: string) => {
+    setActiveNoteId(noteId);
+    const found = notes.find(n => n.id === noteId);
+    if (found) {
+      setActiveCarnetId(found.carnetId);
+    }
+    setActiveView('notebooks');
+  };
+
   const togglePin = (noteId: string) => {
     setNotes(notes.map(n => n.id === noteId ? { ...n, isPinned: !n.isPinned } : n));
   };
@@ -298,7 +443,141 @@ export default function App() {
   };
 
   const handleUpdateNote = (updatedNote: Note) => {
-    setNotes(notes.map(n => n.id === updatedNote.id ? updatedNote : n));
+    setNotes(prevNotes => {
+      const existing = prevNotes.find(n => n.id === updatedNote.id);
+      if (existing && updatedNote.isVersioningEnabled !== false) {
+        const hasContentChanged = existing.content !== updatedNote.content;
+        const hasTitleChanged = existing.title !== updatedNote.title;
+        
+        if (hasContentChanged || hasTitleChanged) {
+          const history = existing.versionHistory || [];
+          const lastSnapshot = history[0];
+          const isIdentical = lastSnapshot && lastSnapshot.content === existing.content && lastSnapshot.title === existing.title;
+          
+          if (!isIdentical) {
+            const newSnapshot = {
+              id: 'v-' + Date.now(),
+              title: existing.title,
+              content: existing.content,
+              timestamp: new Date().toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' }) + ' • ' + new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }),
+              size: existing.content.length
+            };
+            const updatedWithHistory = {
+              ...updatedNote,
+              versionHistory: [newSnapshot, ...history]
+            };
+            return prevNotes.map(n => n.id === updatedNote.id ? updatedWithHistory : n);
+          }
+        }
+      }
+      return prevNotes.map(n => n.id === updatedNote.id ? updatedNote : n);
+    });
+  };
+
+  // WebSocket Integration for Living Blocks
+  const [wsConnected, setWsConnected] = React.useState(true);
+  const [simulatedOffline, setSimulatedOffline] = React.useState(false);
+  const socketRef = React.useRef<WebSocket | null>(null);
+
+  const initWebSocket = () => {
+    if (simulatedOffline) return;
+    try {
+      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const socket = new WebSocket(`${protocol}//${window.location.host}`);
+      socketRef.current = socket;
+
+      socket.onopen = () => {
+        setWsConnected(true);
+        socket.send(JSON.stringify({
+          type: 'join',
+          sessionId: 'global-momento-session',
+          user: { id: 'u-1', name: 'Utilisateur Actuel' }
+        }));
+      };
+
+      socket.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          if (data.type === 'living_block_update') {
+            const { sourceNoteId, blockIndex, newText } = data;
+            setNotes(prevNotes => 
+              prevNotes.map(note => {
+                if (note.id === sourceNoteId) {
+                  const paragraphs = note.content.split('\n');
+                  if (paragraphs[blockIndex] !== undefined) {
+                    paragraphs[blockIndex] = newText;
+                    return { ...note, content: paragraphs.join('\n') };
+                  }
+                }
+                return note;
+              })
+            );
+            window.dispatchEvent(new CustomEvent('living-block-pulse', {
+              detail: { sourceNoteId, blockIndex }
+            }));
+          }
+        } catch (err) {
+          console.error("Error parsing message", err);
+        }
+      };
+
+      socket.onclose = () => {
+        setWsConnected(false);
+        setTimeout(() => {
+          if (socketRef.current === socket && !simulatedOffline) {
+            initWebSocket();
+          }
+        }, 4000);
+      };
+
+      socket.onerror = () => {
+        setWsConnected(false);
+      };
+    } catch (e) {
+      console.error(e);
+      setWsConnected(false);
+    }
+  };
+
+  React.useEffect(() => {
+    initWebSocket();
+    return () => {
+      if (socketRef.current) {
+        socketRef.current.close();
+      }
+    };
+  }, [simulatedOffline]);
+
+  React.useEffect(() => {
+    const handleToggleSimulate = () => {
+      setSimulatedOffline(prev => {
+        const next = !prev;
+        if (next) {
+          if (socketRef.current) {
+            socketRef.current.close();
+          }
+          setWsConnected(false);
+        } else {
+          // Reconnect will automatically trigger because simulatedOffline changes
+        }
+        return next;
+      });
+    };
+    window.addEventListener('toggle-websocket-simulate', handleToggleSimulate);
+    return () => {
+      window.removeEventListener('toggle-websocket-simulate', handleToggleSimulate);
+    };
+  }, []);
+
+  const broadcastLivingBlockUpdate = (sourceNoteId: string, blockIndex: number, newText: string) => {
+    if (socketRef.current?.readyState === WebSocket.OPEN && !simulatedOffline) {
+      socketRef.current.send(JSON.stringify({
+        type: 'living_block_update',
+        sourceNoteId,
+        blockIndex,
+        newText
+      }));
+    }
   };
   const handleEnterApp = () => {
     if (isAuthenticated) {
@@ -377,6 +656,11 @@ export default function App() {
             activeNoteId={activeNoteId}
             setActiveCarnetId={setActiveCarnetId}
             setActiveNoteId={setActiveNoteId}
+            flashcards={flashcards}
+            onSelectReviewDeck={(noteId) => {
+              setActiveReviewDeckId(noteId);
+              setActiveView('revision');
+            }}
             setShowNewCarnetModal={(show, parentId, isRenaming, carnetId) => {
               setShowNewCarnetModal({ isOpen: show, parentId, isRenaming, carnetId });
               if (isRenaming && carnetId) {
@@ -436,6 +720,17 @@ export default function App() {
                     onBrainstormNote={handleBrainstormNote}
                     onUpdateNote={handleUpdateNote}
                     onOpenSidebar={() => setIsSidebarOpen(true)}
+                    onSearchClick={() => setIsSearchOpen(true)}
+                    wsConnected={wsConnected}
+                    broadcastLivingBlockUpdate={broadcastLivingBlockUpdate}
+                    carnets={carnets}
+                    flashcards={flashcards}
+                    onTriggerReviewDeck={(noteId) => {
+                      setActiveReviewDeckId(noteId);
+                      setActiveView('revision');
+                    }}
+                    onGenerateFlashcards={handleGenerateFlashcards}
+                    isGeneratingFlashcards={isGeneratingFlashcards}
                   />
                 </motion.div>
               )}
@@ -537,6 +832,7 @@ export default function App() {
                         setActiveView('notebooks');
                         setActiveNoteId(noteId);
                     }}
+                    onOpenSidebar={() => setIsSidebarOpen(true)}
                   />
                 </motion.div>
               )}
@@ -560,6 +856,62 @@ export default function App() {
                   />
                 </motion.div>
               )}
+
+              {activeView === 'graph' && (
+                <motion.div
+                  key="graph"
+                  initial={{ opacity: 0, scale: 1.05 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.95 }}
+                  transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1] }}
+                  className="h-full w-full"
+                >
+                  <GraphKnowledgeMap 
+                    notes={notes}
+                    carnets={carnets}
+                    onOpenNote={(noteId) => {
+                      setActiveView('notebooks');
+                      setActiveNoteId(noteId);
+                      const note = notes.find(n => n.id === noteId);
+                      if (note) {
+                        setActiveCarnetId(note.carnetId);
+                      }
+                    }}
+                    onClose={() => setActiveView('notebooks')}
+                  />
+                </motion.div>
+              )}
+
+              {activeView === 'revision' && (
+                <motion.div
+                  key="revision"
+                  initial={{ opacity: 0, scale: 1.02 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.98 }}
+                  transition={{ duration: 0.3 }}
+                  className="h-full w-full"
+                >
+                  <RevisionView 
+                    notes={notes}
+                    flashcards={flashcards}
+                    onUpdateFlashcards={(updated) => {
+                      setFlashcards(updated);
+                      localStorage.setItem('momento-flashcards', JSON.stringify(updated));
+                    }}
+                    onSelectNote={(noteId) => {
+                      setActiveView('notebooks');
+                      setActiveNoteId(noteId);
+                      const note = notes.find(n => n.id === noteId);
+                      if (note) {
+                        setActiveCarnetId(note.carnetId);
+                      }
+                    }}
+                    onOpenSidebar={() => setIsSidebarOpen(true)}
+                    initialActiveDeckId={activeReviewDeckId}
+                    onClearActiveDeckId={() => setActiveReviewDeckId(null)}
+                  />
+                </motion.div>
+              )}
             </AnimatePresence>
 
             <AISidebar 
@@ -571,6 +923,9 @@ export default function App() {
               selectedTone={selectedTone}
               setSelectedTone={setSelectedTone}
               carnets={carnets}
+              notes={notes}
+              onOpenNote={setActiveNoteId}
+              onUpdateNote={handleUpdateNote}
             />
           </main>
 
@@ -701,6 +1056,107 @@ export default function App() {
                 </motion.div>
               </div>
             )}
+
+            {isSearchOpen && (
+              <SearchModal 
+                isOpen={isSearchOpen}
+                onClose={() => setIsSearchOpen(false)}
+                notes={notes}
+                carnets={carnets}
+                onSelectNote={(noteId) => {
+                  setActiveNoteId(noteId);
+                  const searchHitNote = notes.find(n => n.id === noteId);
+                  if (searchHitNote) {
+                    setActiveCarnetId(searchHitNote.carnetId);
+                  }
+                }}
+              />
+            )}
+
+            {isClipperSimulatorOpen && (
+              <ClipperSimulator 
+                isOpen={isClipperSimulatorOpen}
+                onClose={() => setIsClipperSimulatorOpen(false)}
+                carnets={carnets}
+                activeCarnetId={activeCarnetId}
+                onAddNote={(newNote) => setNotes(prevNotes => [newNote, ...prevNotes])}
+                onTriggerToast={(title, noteId) => {
+                  setClipperToast({
+                    id: String(Date.now()),
+                    title,
+                    noteId
+                  });
+                }}
+              />
+            )}
+
+            {clipperToast && (
+              <motion.div
+                initial={{ opacity: 0, y: 50, scale: 0.9 }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={{ opacity: 0, y: 20, scale: 0.9 }}
+                className="fixed bottom-6 right-6 z-[999] bg-[#0E0E0E] text-white border border-neutral-800 rounded-xl shadow-2xl pl-5 pr-4 py-3.5 flex items-center justify-between gap-5 tracking-wide max-w-[360px]"
+              >
+                <div className="flex items-center gap-2.5">
+                  <span className="w-2 h-2 rounded-full bg-cyan-400 animate-pulse shrink-0" />
+                  <p className="text-xs font-semibold text-neutral-100 leading-normal">
+                     Note clippée — <span className="text-cyan-400 font-bold">{clipperToast.title}</span>
+                  </p>
+                </div>
+                
+                <div className="flex items-center gap-2.5 shrink-0">
+                  <button 
+                    onClick={() => {
+                      handleOpenClippedNote(clipperToast.noteId);
+                      setClipperToast(null);
+                    }}
+                    className="text-xs font-bold uppercase tracking-wider text-cyan-400 hover:text-cyan-300 underline underline-offset-2 transition-colors"
+                  >
+                    Voir
+                  </button>
+                  <button 
+                    onClick={() => setClipperToast(null)}
+                    className="p-1 hover:bg-white/10 text-neutral-400 hover:text-white rounded-lg transition-colors"
+                  >
+                    <X size={14} />
+                  </button>
+                </div>
+              </motion.div>
+            )}
+
+            {toast.show && (
+              <motion.div
+                initial={{ opacity: 0, y: 50, scale: 0.9 }}
+                animate={{ opacity: 1, y: 0, scale: 1 }}
+                exit={{ opacity: 0, y: 20, scale: 0.9 }}
+                className="fixed bottom-6 right-6 z-[999] bg-[#0E0E0E] text-white border border-neutral-800 rounded-xl shadow-2xl pl-5 pr-4 py-3.5 flex items-center justify-between gap-5 tracking-wide max-w-[420px]"
+              >
+                <div className="flex items-center gap-2.5">
+                  <span className="w-2 h-2 rounded-full bg-accent animate-pulse shrink-0" />
+                  <p className="text-xs font-semibold text-neutral-100 leading-normal">
+                     {toast.message}
+                  </p>
+                </div>
+                
+                <div className="flex items-center gap-2.5 shrink-0">
+                  <button 
+                    onClick={() => {
+                      setActiveView('revision');
+                      setToast({ show: false, message: '' });
+                    }}
+                    className="text-xs font-bold uppercase tracking-wider text-accent hover:text-accent/80 underline underline-offset-2 transition-colors cursor-pointer"
+                  >
+                    Voir
+                  </button>
+                  <button 
+                    onClick={() => setToast({ show: false, message: '' })}
+                    className="p-1 hover:bg-white/10 text-neutral-400 hover:text-white rounded-lg transition-colors cursor-pointer"
+                  >
+                    <X size={14} />
+                  </button>
+                </div>
+              </motion.div>
+            )}
           </AnimatePresence>
         </motion.div>
       )}

architectural-grid/src/components/AISidebar.tsx

@@ -15,7 +15,8 @@ import {
   History,
   Target,
   Network,
-  Clock
+  Clock,
+  AlertCircle
 } from 'lucide-react';
 import { motion, AnimatePresence } from 'motion/react';
 import { AITab, AITone, Note, Carnet } from '../types';
@@ -30,6 +31,9 @@ interface AISidebarProps {
   selectedTone: AITone;
   setSelectedTone: (tone: AITone) => void;
   carnets: Carnet[];
+  notes?: Note[];
+  onOpenNote?: (noteId: string) => void;
+  onUpdateNote?: (note: Note) => void;
 }
 
 export const AISidebar: React.FC<AISidebarProps> = ({
@@ -40,9 +44,126 @@ export const AISidebar: React.FC<AISidebarProps> = ({
   setAiTab,
   selectedTone,
   setSelectedTone,
-  carnets
+  carnets,
+  notes = [],
+  onOpenNote = (_noteId: string) => {},
+  onUpdateNote
 }) => {
   const [selectedContextId, setSelectedContextId] = React.useState<string | null>(null);
+  const [hoveredOrbitNode, setHoveredOrbitNode] = React.useState<any | null>(null);
+
+  const explicitWikiLinks = React.useMemo(() => [
+    { source: 'n1', target: 'n1-b' },
+    { source: 'n3', target: 'n3-b' },
+    { source: 'bridge-1', target: 'n1' },
+    { source: 'bridge-1', target: 'n2' },
+  ], []);
+
+  const CARNET_COLOR_PALETTE: { [key: string]: string } = {
+    '1': '#D97706', // Daily Notes - Warm Amber
+    '2': '#059669', // Project: Neo - Soft Emerald
+    '3': '#4F46E5', // Shared Docs - Rich Indigo
+    '4': '#0891B2', // Architecture Research - Clean Cyan
+    '5': '#EA580C', // History of Architecture - Deep Orange
+    '6': '#DB2777', // Modernism - Vibrant Rose
+    '7': '#65A30D', // Sustainable Design - Cool Lime
+  };
+
+  const DEFAULT_CARNET_COLOR = '#71717A';
+
+  const backlinks = React.useMemo(() => {
+    if (!activeNote || !notes) return [];
+    return notes.filter(n => {
+      if (n.id === activeNote.id || n.isDeleted) return false;
+      const isExplicit = explicitWikiLinks.some(link => 
+        (link.source === n.id && link.target === activeNote.id)
+      );
+      const isContentLink = n.content.toLowerCase().includes(`[[${activeNote.title.toLowerCase()}]]`);
+      return isExplicit || isContentLink;
+    });
+  }, [activeNote, notes, explicitWikiLinks]);
+
+  const outboundLinks = React.useMemo(() => {
+    if (!activeNote || !notes) return [];
+    return notes.filter(n => {
+      if (n.id === activeNote.id || n.isDeleted) return false;
+      const isExplicit = explicitWikiLinks.some(link => 
+        (link.source === activeNote.id && link.target === n.id)
+      );
+      const isContentLink = activeNote.content.toLowerCase().includes(`[[${n.title.toLowerCase()}]]`);
+      return isExplicit || isContentLink;
+    });
+  }, [activeNote, notes, explicitWikiLinks]);
+
+  const unlinkedMentions = React.useMemo(() => {
+    if (!activeNote || !notes) return [];
+    return notes.filter(n => {
+      if (n.id === activeNote.id || n.isDeleted) return false;
+      const isLinked = [...backlinks, ...outboundLinks].some(link => link.id === n.id);
+      if (isLinked) return false;
+      return n.content.toLowerCase().includes(activeNote.title.toLowerCase());
+    });
+  }, [activeNote, notes, backlinks, outboundLinks]);
+
+  const orbitNodes = React.useMemo(() => {
+    const list: { id: string; title: string; color: string; carnetName: string; relationship: 'backlink' | 'outbound' | 'mention' }[] = [];
+    
+    backlinks.forEach(n => {
+      const carnet = carnets.find(c => c.id === n.carnetId);
+      list.push({
+        id: n.id,
+        title: n.title,
+        color: CARNET_COLOR_PALETTE[n.carnetId] || DEFAULT_CARNET_COLOR,
+        carnetName: carnet?.name || 'Carnet',
+        relationship: 'backlink'
+      });
+    });
+
+    outboundLinks.forEach(n => {
+      const carnet = carnets.find(c => c.id === n.carnetId);
+      list.push({
+        id: n.id,
+        title: n.title,
+        color: CARNET_COLOR_PALETTE[n.carnetId] || DEFAULT_CARNET_COLOR,
+        carnetName: carnet?.name || 'Carnet',
+        relationship: 'outbound'
+      });
+    });
+
+    unlinkedMentions.forEach(n => {
+      const carnet = carnets.find(c => c.id === n.carnetId);
+      list.push({
+        id: n.id,
+        title: n.title,
+        color: CARNET_COLOR_PALETTE[n.carnetId] || DEFAULT_CARNET_COLOR,
+        carnetName: carnet?.name || 'Carnet',
+        relationship: 'mention'
+      });
+    });
+
+    return list.slice(0, 8);
+  }, [backlinks, outboundLinks, unlinkedMentions, carnets]);
+
+  const getSnippetWithHighlight = (content: string, term: string) => {
+    const index = content.toLowerCase().indexOf(term.toLowerCase());
+    if (index === -1) {
+      return <span>{content.substring(0, 80)}...</span>;
+    }
+    const start = Math.max(0, index - 40);
+    const end = Math.min(content.length, index + term.length + 40);
+    const before = content.substring(start, index);
+    const match = content.substring(index, index + term.length);
+    const after = content.substring(index + term.length, end);
+    return (
+      <span>
+        {start > 0 && "..."}
+        {before}
+        <mark className="bg-ochre/20 dark:bg-ochre/40 text-ochre px-1 py-0.5 rounded font-bold">{match}</mark>
+        {after}
+        {end < content.length && "..."}
+      </span>
+    );
+  };
 
   return (
     <AnimatePresence>
@@ -73,14 +194,14 @@ export const AISidebar: React.FC<AISidebarProps> = ({
           </div>
 
           <div className="flex border-b border-border px-2">
-            {(['discussion', 'actions', 'explore', 'resources'] as AITab[]).map((tab) => (
+            {(['discussion', 'actions', 'explore', 'resources', 'relations'] as AITab[]).map((tab) => (
               <button
                 key={tab}
                 onClick={() => setAiTab(tab)}
-                className={`flex-1 py-3 text-[10px] uppercase tracking-[0.2em] font-bold transition-all relative
+                className={`flex-1 py-3 text-[9px] uppercase tracking-wider font-bold transition-all relative
                   ${aiTab === tab ? 'text-manganese' : 'text-muted-ink hover:text-ink/60'}`}
               >
-                {tab}
+                {tab === 'relations' ? 'réseau' : tab}
                 {aiTab === tab && (
                   <motion.div 
                     layoutId="activeTab" 
@@ -376,6 +497,241 @@ export const AISidebar: React.FC<AISidebarProps> = ({
                 </motion.div>
               )}
 
+              {aiTab === 'relations' && (
+                <motion.div
+                  key="relations"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                  className="space-y-6 animate-fadeIn"
+                >
+                  <div className="flex items-center gap-2 mb-2">
+                    <div className="h-px flex-1 bg-border/40" />
+                    <h4 className="text-[10px] uppercase tracking-[0.25em] font-bold text-muted-ink whitespace-nowrap">Vue Graphe Locale</h4>
+                    <div className="h-px flex-1 bg-border/40" />
+                  </div>
+
+                  {activeNote ? (
+                    <>
+                      {/* Interactive local graph SVG container */}
+                      <div className="relative p-2 bg-slate-50/50 dark:bg-black/30 border border-border/60 rounded-2xl overflow-hidden shadow-inner flex flex-col items-center">
+                        <svg width="100%" height="220" viewBox="0 0 320 220" className="select-none font-sans">
+                          <defs>
+                            <filter id="glow-panel-sidebar-three" x="-20%" y="-20%" width="140%" height="140%">
+                              <feGaussianBlur stdDeviation="4" result="blur" />
+                              <feComposite in="SourceGraphic" in2="blur" operator="over" />
+                            </filter>
+                          </defs>
+
+                          {/* Dotted circle boundary helper */}
+                          <circle cx="160" cy="110" r="70" fill="none" stroke="#E2E8F0" strokeWidth="1" strokeDasharray="3,6" className="dark:stroke-neutral-800" />
+
+                          {/* Connections */}
+                          {orbitNodes.map((node, i) => {
+                            const angle = i * (orbitNodes.length > 0 ? (2 * Math.PI) / orbitNodes.length : 0);
+                            const nx = 160 + 70 * Math.cos(angle);
+                            const ny = 110 + 62 * Math.sin(angle);
+                            return (
+                              <g key={node.id}>
+                                <line
+                                  x1="160"
+                                  y1="110"
+                                  x2={nx}
+                                  y2={ny}
+                                  stroke={node.relationship === 'mention' ? '#94A3B8' : '#A47148'}
+                                  strokeWidth={node.relationship === 'mention' ? 1.2 : 2}
+                                  strokeDasharray={node.relationship === 'mention' ? '3,3' : 'none'}
+                                  className="opacity-50 transition-all hover:opacity-100"
+                                />
+                                {node.relationship === 'outbound' && (
+                                  <polygon
+                                    points={`${160 + (nx - 160) * 0.75},${110 + (ny - 110) * 0.75} ${160 + (nx - 160) * 0.75 - 4},${110 + (ny - 110) * 0.75 - 4} ${160 + (nx - 160) * 0.75 - 4},${110 + (ny - 110) * 0.75 + 4}`}
+                                    transform={`rotate(${(angle * 180) / Math.PI}, ${160 + (nx - 160) * 0.75}, ${110 + (ny - 110) * 0.75})`}
+                                    fill="#A47148"
+                                    className="opacity-70"
+                                  />
+                                )}
+                                {node.relationship === 'backlink' && (
+                                  <polygon
+                                    points={`${160 + (nx - 160) * 0.3},${110 + (ny - 110) * 0.3} ${160 + (nx - 160) * 0.3 - 4},${110 + (ny - 110) * 0.3 - 4} ${160 + (nx - 160) * 0.3 - 4},${110 + (ny - 110) * 0.3 + 4}`}
+                                    transform={`rotate(${((angle + Math.PI) * 180) / Math.PI}, ${160 + (nx - 160) * 0.3}, ${110 + (ny - 110) * 0.3})`}
+                                    fill="#A47148"
+                                    className="opacity-70"
+                                  />
+                                )}
+                              </g>
+                            );
+                          })}
+
+                          {/* Center node (Active Note) */}
+                          <g>
+                            <circle
+                              cx="160"
+                              cy="110"
+                              r="15"
+                              fill="#A47148"
+                              className="stroke-white dark:stroke-black stroke-[3px] shadow transition-transform duration-300 hover:scale-110 active:scale-95 cursor-pointer"
+                            />
+                            <circle cx="160" cy="110" r="5" fill="#FFFFFF" />
+                          </g>
+
+                          {/* Orbit nodes */}
+                          {orbitNodes.map((node, i) => {
+                            const angle = i * (orbitNodes.length > 0 ? (2 * Math.PI) / orbitNodes.length : 0);
+                            const nx = 160 + 70 * Math.cos(angle);
+                            const ny = 110 + 62 * Math.sin(angle);
+                            const isHovered = hoveredOrbitNode?.id === node.id;
+                            return (
+                              <g 
+                                key={node.id}
+                                className="cursor-pointer group"
+                                onClick={() => onOpenNote(node.id)}
+                                onMouseEnter={() => setHoveredOrbitNode(node)}
+                                onMouseLeave={() => setHoveredOrbitNode(null)}
+                              >
+                                <circle
+                                  cx={nx}
+                                  cy={ny}
+                                  r={isHovered ? 11 : 8}
+                                  fill={node.color}
+                                  stroke={isHovered ? '#000000' : '#FFFFFF'}
+                                  strokeWidth={1.5}
+                                  className="transition-all duration-200 group-hover:shadow"
+                                />
+                                <text
+                                  x={nx}
+                                  y={ny + 15}
+                                  textAnchor="middle"
+                                  className="text-[7.5px] font-sans font-bold select-none pointer-events-none fill-ink/70 dark:fill-white/70"
+                                >
+                                  {node.title.length > 10 ? node.title.substring(0, 8) + '...' : node.title}
+                                </text>
+                              </g>
+                            );
+                          })}
+                        </svg>
+
+                        {/* Interactive local tooltip card info */}
+                        <div className="w-full mt-2 bg-white dark:bg-black/40 border border-border/80 rounded-xl p-3 text-xs leading-normal font-sans">
+                          {hoveredOrbitNode ? (
+                            <div className="space-y-1">
+                              <div className="flex items-center justify-between text-[8px] font-bold uppercase tracking-wide text-muted-ink">
+                                <span className="flex items-center gap-1">
+                                  <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: hoveredOrbitNode.color }} />
+                                  {hoveredOrbitNode.carnetName}
+                                </span>
+                                <span className="text-ochre">
+                                  {hoveredOrbitNode.relationship === 'backlink' ? 'Lien Entrant' : hoveredOrbitNode.relationship === 'outbound' ? 'Lien Sortant' : 'Mention Simple'}
+                                </span>
+                              </div>
+                              <p className="font-bold text-ink dark:text-white truncate">{hoveredOrbitNode.title}</p>
+                              <p className="text-[9px] text-muted-ink italic">Cliquez pour ouvrir la note</p>
+                            </div>
+                          ) : (
+                            <div className="text-center py-1 text-muted-ink/60 text-[10px] font-medium leading-normal flex items-center justify-center gap-1.5">
+                              <Network size={12} className="text-muted-ink/40" />
+                              Survolez un nœud, cliquez pour ouvrir
+                            </div>
+                          )}
+                        </div>
+                      </div>
+
+                      {/* Lists of backlinks & unlinked mentions */}
+                      <div className="space-y-4 pt-2 font-sans">
+                        {/* 1. Backlinks */}
+                        <div className="space-y-2">
+                          <h5 className="text-[10px] uppercase tracking-[0.18em] font-bold text-muted-ink flex items-center justify-between">
+                            <span>Liens Entrans ({backlinks.length})</span>
+                          </h5>
+                          {backlinks.length > 0 ? (
+                            <div className="space-y-2 max-h-[160px] overflow-y-auto custom-scrollbar pr-1">
+                              {backlinks.map(n => (
+                                <div
+                                  key={n.id}
+                                  onClick={() => onOpenNote(n.id)}
+                                  className="p-3 bg-white dark:bg-zinc-950 border border-border hover:border-accent/40 rounded-xl cursor-pointer transition-all space-y-1.5 hover:shadow-sm"
+                                >
+                                  <div className="flex items-center justify-between text-muted-ink font-sans">
+                                    <span className="text-[9px] font-bold uppercase tracking-wider text-ink dark:text-white truncate max-w-[180px]">{n.title}</span>
+                                    <span className="text-[8px] bg-accent/5 text-accent/80 px-1.5 py-0.5 rounded-full font-bold uppercase tracking-tight">Réf</span>
+                                  </div>
+                                  <p className="text-[11px] text-ink/70 dark:text-white/70 italic leading-snug">
+                                    {getSnippetWithHighlight(n.content, activeNote.title)}
+                                  </p>
+                                </div>
+                              ))}
+                            </div>
+                          ) : (
+                            <p className="text-[10px] text-muted-ink leading-normal italic bg-slate-50 dark:bg-zinc-900/40 p-3 rounded-xl border border-border/40">Aucun lien entrant explicite pointant vers cette note.</p>
+                          )}
+                        </div>
+
+                        {/* 2. Outbound Links */}
+                        <div className="space-y-2 text-sans">
+                          <h5 className="text-[10px] uppercase tracking-[0.18em] font-bold text-muted-ink flex items-center justify-between font-sans">
+                            <span>Liens Sortants ({outboundLinks.length})</span>
+                          </h5>
+                          {outboundLinks.length > 0 ? (
+                            <div className="space-y-2 max-h-[160px] overflow-y-auto custom-scrollbar pr-1">
+                              {outboundLinks.map(n => (
+                                <div
+                                  key={n.id}
+                                  onClick={() => onOpenNote(n.id)}
+                                  className="p-3 bg-white dark:bg-zinc-950 border border-border hover:border-accent/40 rounded-xl cursor-pointer transition-all space-y-1.5 hover:shadow-sm animate-fadeIn"
+                                >
+                                  <div className="flex items-center justify-between text-muted-ink font-sans font-medium">
+                                    <span className="text-[9px] font-bold uppercase tracking-wider text-ink dark:text-white truncate max-w-[180px]">{n.title}</span>
+                                    <span className="text-[8px] bg-indigo-500/10 text-indigo-500 px-1.5 py-0.5 rounded-full font-bold uppercase tracking-tight font-sans">Cible</span>
+                                  </div>
+                                  <p className="text-[11px] text-ink/70 dark:text-white/70 italic leading-snug font-sans">
+                                    {getSnippetWithHighlight(activeNote.content, n.title)}
+                                  </p>
+                                </div>
+                              ))}
+                            </div>
+                          ) : (
+                            <p className="text-[10px] text-muted-ink leading-normal italic bg-slate-50 dark:bg-zinc-900/40 p-3 rounded-xl border border-border/40">Cette note ne pointe vers aucun lien sortant explicite.</p>
+                          )}
+                        </div>
+
+                        {/* 3. Unlinked Mentions */}
+                        <div className="space-y-2">
+                          <h5 className="text-[10px] uppercase tracking-[0.18em] font-bold text-muted-ink flex items-center justify-between">
+                            <span>Mentions Simples ({unlinkedMentions.length})</span>
+                          </h5>
+                          {unlinkedMentions.length > 0 ? (
+                            <div className="space-y-2 max-h-[160px] overflow-y-auto custom-scrollbar pr-1 font-sans">
+                              {unlinkedMentions.map(n => (
+                                <div
+                                  key={n.id}
+                                  onClick={() => onOpenNote(n.id)}
+                                  className="p-3 bg-white dark:bg-zinc-950 border border-border hover:border-accent/40 rounded-xl cursor-pointer transition-all space-y-1.5 hover:shadow-sm"
+                                >
+                                  <div className="flex items-center justify-between text-muted-ink">
+                                    <span className="text-[9px] font-bold uppercase tracking-wider text-ink dark:text-white truncate max-w-[150px]">{n.title}</span>
+                                    <span className="text-[8px] bg-neutral-100 dark:bg-neutral-800 text-muted-ink px-1.5 py-0.5 rounded-full font-bold uppercase tracking-tight">Mention</span>
+                                  </div>
+                                  <p className="text-[11px] text-ink/70 dark:text-white/70 italic leading-snug font-sans">
+                                    {getSnippetWithHighlight(n.content, activeNote.title)}
+                                  </p>
+                                </div>
+                              ))}
+                            </div>
+                          ) : (
+                            <p className="text-[10px] text-muted-ink leading-normal italic bg-slate-50 dark:bg-zinc-900/40 p-3 rounded-xl border border-border/40">Aucune mention textuelle non-liée trouvée dans vos autres notes.</p>
+                          )}
+                        </div>
+                      </div>
+                    </>
+                  ) : (
+                    <div className="text-center py-12 text-muted-ink/40">
+                      <Network size={36} className="mx-auto mb-3 opacity-30" />
+                      <p className="text-xs font-serif italic">Veuillez sélectionner une note pour explorer son graphe relationnel.</p>
+                    </div>
+                  )}
+                </motion.div>
+              )}
+
               {aiTab === 'resources' && (
                 <motion.div
                   key="resources"

architectural-grid/src/components/BlockPicker.tsx

@@ -0,0 +1,264 @@
+import React, { useState, useMemo } from 'react';
+import { motion } from 'motion/react';
+import { Search, Sparkles, Link2, X, Folder } from 'lucide-react';
+import { Note, Carnet } from '../types';
+
+interface BlockPickerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  currentNote: Note | undefined;
+  allNotes: Note[];
+  carnets: Carnet[];
+  onSelectBlock: (sourceNoteId: string, blockIndex: number) => void;
+  prefilledBlock?: { noteId: string; blockIndex: number } | null;
+}
+
+export const BlockPicker: React.FC<BlockPickerProps> = ({
+  isOpen,
+  onClose,
+  currentNote,
+  allNotes,
+  carnets,
+  onSelectBlock,
+  prefilledBlock
+}) => {
+  const [activeTab, setActiveTab] = useState<'suggestions' | 'search'>('suggestions');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  // Extract all paragraphs across notes (exlucing the current note to avoid self-embed)
+  const allBlocks = useMemo(() => {
+    const list: Array<{
+      id: string;
+      noteId: string;
+      noteTitle: string;
+      carnetName: string;
+      blockIndex: number;
+      text: string;
+      snippet: string;
+    }> = [];
+
+    allNotes.forEach(note => {
+      if (currentNote && note.id === currentNote.id) return;
+      
+      const paragraphs = note.content.split('\n');
+      paragraphs.forEach((p, idx) => {
+        const text = p.trim();
+        // Skip empty lines, headings, or short snippets
+        if (text.length < 20 || text.startsWith('#') || text.startsWith('[[living-block')) return;
+
+        // Find carnet
+        const carnet = carnets.find(c => c.id === note.carnetId);
+        
+        // 30-word snippet
+        const words = text.split(/\s+/);
+        const snippet = words.slice(0, 30).join(' ') + (words.length > 30 ? '...' : '');
+
+        list.push({
+          id: `${note.id}-${idx}`,
+          noteId: note.id,
+          noteTitle: note.title || 'Untitled',
+          carnetName: carnet?.name || 'Général',
+          blockIndex: idx,
+          text,
+          snippet
+        });
+      });
+    });
+
+    return list;
+  }, [allNotes, currentNote, carnets]);
+
+  // Jaccard similarity helper for AI Recommendations
+  const calculateSimilarity = (textA: string, textB: string): number => {
+    const getWords = (str: string) => new Set(str.toLowerCase().replace(/[.,\/#!$%\^&\*;:{}=\-_`~()?"']/g,"").split(/\s+/).filter(w => w.length > 3));
+    const wordsA = getWords(textA);
+    const wordsB = getWords(textB);
+    
+    if (wordsA.size === 0 || wordsB.size === 0) return 0;
+    
+    let intersection = 0;
+    wordsA.forEach(w => {
+      if (wordsB.has(w)) intersection++;
+    });
+    
+    const union = wordsA.size + wordsB.size - intersection;
+    return intersection / union;
+  };
+
+  // Compile recommendations
+  const blockSuggestions = useMemo(() => {
+    if (!currentNote) return [];
+
+    return allBlocks.map(block => {
+      const baseSim = calculateSimilarity(currentNote.content + " " + currentNote.title, block.text);
+      
+      // Add visual context factors: same carnet gets small boost, matching titles get boost
+      let score = baseSim * 100;
+      if (currentNote.carnetId === allNotes.find(n => n.id === block.noteId)?.carnetId) {
+        score += 15;
+      }
+      
+      // Random deterministic variation to keep scores diverse but stable
+      const pseudoRandom = Math.abs(Math.sin(block.blockIndex + block.noteId.charCodeAt(0))) * 12;
+      score = Math.min(94, Math.max(52, score + pseudoRandom));
+
+      return {
+        ...block,
+        score: Math.round(score)
+      };
+    }).sort((a, b) => b.score - a.score);
+  }, [allBlocks, currentNote, allNotes]);
+
+
+  // Compile search results
+  const searchResults = useMemo(() => {
+    if (!searchQuery) return allBlocks;
+    const query = searchQuery.toLowerCase();
+    return allBlocks.filter(block => 
+      block.text.toLowerCase().includes(query) || 
+      block.noteTitle.toLowerCase().includes(query)
+    );
+  }, [allBlocks, searchQuery]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-[110] flex items-center justify-center p-4 bg-ink/30 dark:bg-black/40 backdrop-blur-sm">
+      <motion.div
+        initial={{ scale: 0.95, opacity: 0, y: 15 }}
+        animate={{ scale: 1, opacity: 1, y: 0 }}
+        exit={{ scale: 0.95, opacity: 0, y: 15 }}
+        className="w-[480px] max-w-full bg-slate-50/90 dark:bg-zinc-900/90 backdrop-blur-md rounded-2xl border border-[#D5D2CD] dark:border-neutral-800 shadow-2xl flex flex-col max-h-[85vh] overflow-hidden"
+      >
+        {/* Header */}
+        <div className="p-4 border-b border-[#D5D2CD]/60 dark:border-neutral-800/60 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="w-7 h-7 rounded-lg bg-blue-500/10 flex items-center justify-center text-blue-500">
+              <Link2 size={15} />
+            </div>
+            <div>
+              <h3 className="text-sm font-semibold text-ink dark:text-dark-ink font-serif">Living Block Picker</h3>
+              <p className="text-[10px] text-concrete font-medium uppercase tracking-widest">Connecter un bloc en temps réel</p>
+            </div>
+          </div>
+          <button 
+            onClick={onClose}
+            className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded-full text-concrete transition-colors"
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        {/* Tab Selection */}
+        <div className="flex border-b border-[#D5D2CD]/40 dark:border-neutral-800/40 px-3 bg-black/[0.01]">
+          <button
+            onClick={() => setActiveTab('suggestions')}
+            className={`flex-1 py-3 text-[10px] uppercase tracking-[0.15em] font-extrabold transition-all relative
+              ${activeTab === 'suggestions' ? 'text-blue-600 dark:text-blue-400 font-black' : 'text-concrete hover:text-ink/70'}`}
+          >
+            <span className="flex items-center justify-center gap-1.5">
+              <Sparkles size={11} />
+              Suggestions IA
+            </span>
+            {activeTab === 'suggestions' && (
+              <motion.div layoutId="pickerTab" className="absolute bottom-0 left-0 right-0 h-[2px] bg-blue-500" />
+            )}
+          </button>
+          <button
+            onClick={() => setActiveTab('search')}
+            className={`flex-1 py-3 text-[10px] uppercase tracking-[0.15em] font-extrabold transition-all relative
+              ${activeTab === 'search' ? 'text-blue-600 dark:text-blue-400 font-black' : 'text-concrete hover:text-ink/70'}`}
+          >
+            <span className="flex items-center justify-center gap-1.5">
+              <Search size={11} />
+              Rechercher
+            </span>
+            {activeTab === 'search' && (
+              <motion.div layoutId="pickerTab" className="absolute bottom-0 left-0 right-0 h-[2px] bg-blue-500" />
+            )}
+          </button>
+        </div>
+
+        {/* Search Input Box */}
+        {activeTab === 'search' && (
+          <div className="p-3 border-b border-[#D5D2CD]/40 dark:border-neutral-800/40 bg-white/40 dark:bg-zinc-950/20">
+            <div className="relative flex items-center">
+              <Search size={14} className="absolute left-3.5 text-concrete pointer-events-none" />
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Rechercher un extrait de note..."
+                className="w-full bg-white dark:bg-zinc-850 border border-[#D5D2CD] dark:border-neutral-800 rounded-xl pl-9 pr-4 py-2 text-xs outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500/20 transition-all font-sans"
+                autoFocus
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Main List */}
+        <div className="flex-1 overflow-y-auto p-3.5 custom-scrollbar space-y-2">
+          {activeTab === 'suggestions' ? (
+            blockSuggestions.length > 0 ? (
+              blockSuggestions.map(block => (
+                <button
+                  key={block.id}
+                  onClick={() => onSelectBlock(block.noteId, block.blockIndex)}
+                  className="w-full text-left p-3 rounded-xl border border-transparent hover:border-black/[0.08] hover:bg-white/70 dark:hover:bg-zinc-800/50 bg-white/30 dark:bg-zinc-800/10 transition-all group relative flex gap-3.5"
+                >
+                  <div className="flex-1 min-w-0 space-y-1.5">
+                    <p className="font-serif italic text-[13px] leading-relaxed text-ink/90 dark:text-dark-ink group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                      « {block.snippet} »
+                    </p>
+                    <div className="flex items-center gap-2 text-[10px] text-concrete font-medium">
+                      <span className="truncate max-w-[150px] font-semibold">{block.noteTitle}</span>
+                      <span className="opacity-40">•</span>
+                      <span className="flex items-center gap-1 text-[9px] uppercase tracking-wider bg-black/5 dark:bg-white/5 py-0.5 px-1.5 rounded text-[8px]">
+                        <Folder size={10} className="opacity-60" /> {block.carnetName}
+                      </span>
+                    </div>
+                  </div>
+                  
+                  {/* Discrete Percentage Circle Score */}
+                  <div className="shrink-0 flex flex-col justify-center items-end">
+                    <span className="text-[10px] font-mono tracking-tighter bg-blue-500/10 text-blue-600 dark:text-blue-400 font-bold px-2 py-0.5 rounded-full border border-blue-500/10">
+                      {block.score}% d'affinité
+                    </span>
+                  </div>
+                </button>
+              ))
+            ) : (
+              <div className="text-center py-12 text-concrete italic text-xs">
+                Aucune note complémentaire disponible pour suggérer un bloc.
+              </div>
+            )
+          ) : (
+            searchResults.length > 0 ? (
+              searchResults.map(block => (
+                <button
+                  key={block.id}
+                  onClick={() => onSelectBlock(block.noteId, block.blockIndex)}
+                  className="w-full text-left p-3 rounded-xl border border-transparent hover:border-black/[0.08] hover:bg-white/70 dark:hover:bg-zinc-800/50 bg-white/30 dark:bg-zinc-800/10 transition-all group flex flex-col gap-1.5"
+                >
+                  <p className="font-serif italic text-[13px] leading-relaxed text-ink/90 dark:text-dark-ink">
+                    « {block.text} »
+                  </p>
+                  <div className="flex items-center justify-between text-[10px] text-concrete font-medium w-full">
+                    <span>Source : <strong className="text-ink/70">{block.noteTitle}</strong></span>
+                    <span className="text-[9px] uppercase tracking-wider bg-black/5 dark:bg-white/5 py-0.5 px-1.5 rounded">
+                      {block.carnetName}
+                    </span>
+                  </div>
+                </button>
+              ))
+            ) : (
+              <div className="text-center py-12 text-concrete italic text-xs">
+                Aucun bloc ne correspond à votre recherche.
+              </div>
+            )
+          )}
+        </div>
+      </motion.div>
+    </div>
+  );
+};

architectural-grid/src/components/ClipperSimulator.tsx

@@ -0,0 +1,618 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { 
+  X, 
+  Lock, 
+  RefreshCw, 
+  Chrome, 
+  Check, 
+  Loader2, 
+  ChevronDown, 
+  Sparkles, 
+  ArrowUpRight, 
+  AlertTriangle,
+  Globe,
+  Scissors,
+  Bookmark
+} from 'lucide-react';
+import { motion, AnimatePresence } from 'motion/react';
+import { Carnet, Note, Tag } from '../types';
+import { v4 as uuidv4 } from 'uuid';
+
+interface ClipperSimulatorProps {
+  isOpen: boolean;
+  onClose: () => void;
+  carnets: Carnet[];
+  activeCarnetId: string;
+  onAddNote: (note: Note) => void;
+  onTriggerToast: (title: string, noteId: string) => void;
+}
+
+interface MockArticle {
+  id: string;
+  title: string;
+  domain: string;
+  url: string;
+  favicon: string;
+  content: string[];
+  suggestedTags: string[];
+  aiGeneratedTitle: string;
+  aiSummary: string;
+}
+
+const MOCK_ARTICLES: MockArticle[] = [
+  {
+    id: 'art-1',
+    title: 'The Bauhaus Theory & Functional Spatial Systems',
+    domain: 'bauhausstudios.org',
+    url: 'https://bauhausstudios.org/theory/functionalism',
+    favicon: 'https://www.google.com/s2/favicons?domain=bauhausstudios.org&sz=64',
+    content: [
+      'Functionalist design operates on the direct correlation between physical geometry and spatial behavior. At the Bauhaus, teachers like Walter Gropius and Hannes Meyer postulated that an architectural object should serve its function strictly, discarding superfluous details that obscure the purity of its skeleton.',
+      'The modern grid represents an honest commitment to industrial standardization. By segmenting living and working spaces into predictable, modular blocks, architects can optimize solar gain, human traffic flows, and construction material metrics.',
+      'Light is the ultimate deconstructive asset within functional systems. When light pierces the rigid geometry of a modernist envelope, it shifts the perceived density of structural grids, transforming cold static steel interfaces into canvas-like elements that respond dynamically to local chronologies.'
+    ],
+    suggestedTags: ['Bauhaus', 'Functionalism', 'Spatial Design', 'German Modernism'],
+    aiGeneratedTitle: 'Bauhaus Functionalism & Rhythmic Grid Logic',
+    aiSummary: 'An exploration of how Walter Gropius and Bauhaus theorists utilized geometric grids and deconstructive light to align architectural materiality with industrial standardization and human behavioral workflows.'
+  },
+  {
+    id: 'art-2',
+    title: 'Sustainable Wood Frameworks & Decarbonized Structures',
+    domain: 'ecotimber.com',
+    url: 'https://ecotimber.com/future/timber',
+    favicon: 'https://www.google.com/s2/favicons?domain=ecotimber.com&sz=64',
+    content: [
+      'Decarbonizing global real estate requires replacing portland cement and heavy structural steel with cross-laminated timber (CLT). CLT stands as a highly predictable engineered wood structure that sequesters atmospheric carbon dioxide directly inside the load-bearing framework of high-density buildings.',
+      'Integrating CLT with parametric optimization allows for maximum material efficiency. Architects slice wood beams along precise stress lines generated by finite element analysis solvers, removing empty material volumes while keeping the building safe, functional, and durable.',
+      'Passive solar energy design matches this structural honesty perfectly. By positioning CLT mass in the interior core, the building acts as a solar battery, absorbing raw passive light energy during peak hours and radiating warmth throughout the cold seasonal nights.'
+    ],
+    suggestedTags: ['Sustainabilty', 'Ecology', 'CLT Material', 'Decarbonization'],
+    aiGeneratedTitle: 'CLT Systems & Carbon-Neutral Frameworks',
+    aiSummary: 'A breakdown of high-density cross-laminated timber (CLT) integration, using parametric simulation to optimize stress distribution and passive thermal retention for modern sustainable spaces.'
+  }
+];
+
+export const ClipperSimulator: React.FC<ClipperSimulatorProps> = ({
+  isOpen,
+  onClose,
+  carnets,
+  activeCarnetId,
+  onAddNote,
+  onTriggerToast,
+}) => {
+  const [activeArticleIdx, setActiveArticleIdx] = useState(0);
+  const activeArticle = MOCK_ARTICLES[activeArticleIdx];
+
+  // Clipper Extension Popup States
+  const [selectedCarnetId, setSelectedCarnetId] = useState(activeCarnetId || carnets[0]?.id || '1');
+  const [selectedText, setSelectedText] = useState('');
+  const [clipperState, setClipperState] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+  const [aiGeneratedTitle, setAiGeneratedTitle] = useState('');
+  const [lastCreatedNoteId, setLastCreatedNoteId] = useState('');
+  const [customError, setCustomError] = useState('');
+
+  // Dropdown UI
+  const [showCarnetDropdown, setShowCarnetDropdown] = useState(false);
+
+  // Monitor text selections in the mock web page content
+  const handleTextSelection = () => {
+    const selection = window.getSelection();
+    if (selection && selection.toString().trim().length > 0) {
+      const text = selection.toString().trim();
+      // Ensure the text belongs to our mock article content
+      setSelectedText(text);
+    }
+  };
+
+  // Clear selections
+  const clearSelection = () => {
+    setSelectedText('');
+    window.getSelection()?.removeAllRanges();
+  };
+
+  // Preset highlights to make it easy to select text without highlighting with mouse
+  const handlePresetHighlight = (paragraph: string) => {
+    setSelectedText(paragraph);
+  };
+
+  // Handle the Clipper Action
+  const handleClip = (type: 'page' | 'selection') => {
+    setClipperState('loading');
+    
+    // Simulate AI extraction and processing (summary, tags generation)
+    setTimeout(() => {
+      try {
+        // Occasional simulated error for retry demonstration
+        if (Math.random() < 0.15) {
+          throw new Error("Connexion réseau interrompue. L'extension n'a pas pu joindre les serveurs Momento.");
+        }
+
+        const dateStr = new Date().toLocaleDateString('fr-FR', {
+          day: 'numeric',
+          month: 'short',
+          year: 'numeric'
+        });
+
+        const generatedTags: Tag[] = activeArticle.suggestedTags.map((tagLabel, idx) => ({
+          id: `t-clip-${Date.now()}-${idx}`,
+          label: tagLabel,
+          type: 'ai'
+        }));
+
+        const newNoteId = `n-clip-${Date.now()}`;
+        
+        let clipTitle = activeArticle.aiGeneratedTitle;
+        let clipContent = '';
+
+        if (type === 'selection' && selectedText) {
+          clipTitle = `Capture : ${activeArticle.title.substring(0, 30)}...`;
+          clipContent = `**[Sélection capturée]**\n\n> ${selectedText}\n\n---\n\n**Contexte initial :** ${activeArticle.aiSummary}\n\nURL Source : ${activeArticle.url}`;
+        } else {
+          clipContent = `**[Page web complète clippée]**\n\n**Résumé généré par l'IA :**\n${activeArticle.aiSummary}\n\n---\n\n**Contenu de l'article :**\n\n${activeArticle.content.join('\n\n')}\n\nURL Source : ${activeArticle.url}`;
+        }
+
+        const newNote: Note = {
+          id: newNoteId,
+          carnetId: selectedCarnetId,
+          title: clipTitle,
+          content: clipContent,
+          imageUrl: activeArticleIdx === 0 
+            ? 'https://images.unsplash.com/photo-1503387762-592dea58ef23?auto=format&fit=crop&q=80&w=800&h=600'
+            : 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=800&h=600',
+          date: dateStr,
+          tags: [
+            ...generatedTags,
+            { id: 't-web-source', label: 'Clipped', type: 'user' }
+          ],
+          // Custom clipper details
+          isClipped: true,
+          clipSourceUrl: activeArticle.url,
+          clipFavicon: activeArticle.favicon,
+          clipDate: dateStr
+        };
+
+        setAiGeneratedTitle(clipTitle);
+        setLastCreatedNoteId(newNoteId);
+        setClipperState('success');
+
+        // Add note to Momento Database
+        onAddNote(newNote);
+
+        // Fire real-time notification toast in Momento!
+        onTriggerToast(clipTitle, newNoteId);
+
+      } catch (err: any) {
+        setCustomError(err.message || "Erreur de connexion.");
+        setClipperState('error');
+      }
+    }, 1500);
+  };
+
+  const handleResetClipper = () => {
+    setClipperState('idle');
+    setCustomError('');
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-ink/40 backdrop-blur-md p-4 sm:p-6 overflow-y-auto">
+      <motion.div 
+        initial={{ opacity: 0, scale: 0.98, y: 10 }}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        exit={{ opacity: 0, scale: 0.98, y: 10 }}
+        className="w-full max-w-6xl h-[85vh] bg-paper dark:bg-dark-paper border border-border rounded-[24px] shadow-2xl flex flex-col md:flex-row overflow-hidden"
+      >
+        {/* Left column: Realistic Mock Browser Page */}
+        <div className="flex-1 flex flex-col bg-slate-50 dark:bg-black/10 border-r border-border overflow-hidden">
+          {/* Mock Browser Header */}
+          <div className="bg-white dark:bg-dark-paper border-b border-border px-4 py-3 flex items-center gap-3">
+            {/* Window Controls */}
+            <div className="flex gap-1.5 mr-2">
+              <button onClick={onClose} className="w-3 h-3 rounded-full bg-red-400 hover:bg-red-500 transition-colors" />
+              <div className="w-3 h-3 rounded-full bg-yellow-400" />
+              <div className="w-3 h-3 rounded-full bg-green-400" />
+            </div>
+            
+            {/* Tabs */}
+            <div className="flex gap-1.5 max-w-[400px]">
+              {MOCK_ARTICLES.map((art, idx) => (
+                <button
+                  key={art.id}
+                  onClick={() => {
+                    setActiveArticleIdx(idx);
+                    clearSelection();
+                    handleResetClipper();
+                  }}
+                  className={`px-3 py-1.5 text-xs rounded-lg font-medium flex items-center gap-2 max-w-[170px] truncate transition-colors
+                    ${activeArticleIdx === idx 
+                      ? 'bg-slate-100 dark:bg-white/5 text-ink dark:text-dark-ink border border-border' 
+                      : 'text-concrete hover:bg-slate-50 dark:hover:bg-white/5'}`}
+                >
+                  <img src={art.favicon} alt="" className="w-3.5 h-3.5 object-contain" onError={(e) => { (e.target as any).src = 'https://www.google.com/s2/favicons?domain=google.com'; }} />
+                  <span className="truncate">{art.title}</span>
+                </button>
+              ))}
+            </div>
+
+            {/* Live Indicator of Clipper Simulator */}
+            <div className="ml-auto hidden sm:flex items-center gap-2 bg-cyan-500/10 text-cyan-600 dark:text-cyan-400 text-[10px] font-bold tracking-widest uppercase px-3 py-1 rounded-full">
+              <span className="w-1.5 h-1.5 rounded-full bg-cyan-500 animate-pulse" />
+              Simulateur de Capture
+            </div>
+          </div>
+
+          {/* Browser Address Bar */}
+          <div className="bg-white dark:bg-dark-paper border-b border-border px-4 py-2 flex items-center gap-2">
+            <div className="flex items-center gap-1 text-concrete">
+              <button className="p-1 hover:bg-slate-100 dark:hover:bg-white/5 rounded"><ArrowUpRight className="rotate-270" size={14} /></button>
+              <button className="p-1 hover:bg-slate-100 dark:hover:bg-white/5 rounded" disabled><ArrowUpRight className="rotate-90" size={14} /></button>
+              <button onClick={() => { clearSelection(); handleResetClipper(); }} className="p-1 hover:bg-slate-100 dark:hover:bg-white/5 rounded"><RefreshCw size={13} /></button>
+            </div>
+
+            <div className="flex-1 bg-slate-50 dark:bg-white/5 border border-border px-3 py-1.5 rounded-lg flex items-center gap-2 text-xs text-concrete">
+              <Lock size={12} className="text-emerald-500" />
+              <span className="text-emerald-600 font-medium select-none">https://</span>
+              <span className="text-ink dark:text-dark-ink font-light select-all">{activeArticle.domain}</span>
+              <span className="text-concrete/60 select-all">{activeArticle.url.slice(activeArticle.url.indexOf(activeArticle.domain) + activeArticle.domain.length)}</span>
+            </div>
+
+            {/* Web Extension active badge */}
+            <button 
+              className="p-1.5 bg-accent/10 border border-accent/20 rounded-lg text-accent animate-pulse relative group"
+              title="Momento Web Clipper is active"
+            >
+              <Scissors size={14} className="-rotate-90" />
+              <span className="absolute bottom-full right-0 mb-2 whitespace-nowrap hidden group-hover:block bg-ink text-paper text-[10px] py-1 px-2 rounded-md shadow-lg">
+                Extension active sur cette page
+              </span>
+            </button>
+          </div>
+
+          {/* Web Viewport */}
+          <div 
+            className="flex-1 overflow-y-auto bg-white p-6 sm:p-10 select-text dark:bg-zinc-950 dark:text-zinc-200"
+            onMouseUp={handleTextSelection}
+          >
+            <div className="max-w-2xl mx-auto space-y-6">
+              <div className="flex items-center gap-2 text-xs text-neutral-400 dark:text-neutral-500 uppercase tracking-wider font-semibold">
+                <Globe size={12} />
+                <span>Publié sur {activeArticle.domain}</span>
+              </div>
+
+              <h1 className="text-3xl sm:text-4xl font-serif font-bold text-neutral-900 dark:text-neutral-50 leading-tight">
+                {activeArticle.title}
+              </h1>
+
+              <div className="border-y border-neutral-100 dark:border-zinc-800 py-3 flex items-center justify-between text-xs text-neutral-400">
+                <span className="font-mono">Date : Capture Temps Réel</span>
+                <span className="italic">Sélectionnez du texte ci-dessous pour le clipper</span>
+              </div>
+
+              {/* Tips */}
+              <div className="bg-sky-50 dark:bg-sky-950/20 p-4 rounded-xl border border-sky-100 dark:border-sky-950/50 space-y-2">
+                <p className="text-xs text-sky-800 dark:text-sky-300 font-semibold flex items-center gap-2">
+                  <Sparkles size={13} className="text-sky-500" />
+                  Piste d'évaluation :
+                </p>
+                <p className="text-xs text-sky-700/80 dark:text-sky-400/80 leading-relaxed">
+                  Survolez et <strong>surlignez n'importe quel texte</strong> à la souris dans l'article ci-dessous pour activer instantanément l'état <em>Sélection active</em> dans l'extension ! Vous pouvez aussi cliquer sur un paragraphe pour le simuler :
+                </p>
+              </div>
+
+              {/* Main Content paragraphs */}
+              <div className="space-y-6 text-neutral-700 dark:text-zinc-300 leading-relaxed font-serif text-base">
+                {activeArticle.content.map((p, index) => {
+                  const isParaSelected = selectedText === p;
+                  return (
+                    <p 
+                      key={index}
+                      onClick={() => handlePresetHighlight(p)}
+                      className={`cursor-pointer transition-all duration-300 p-2.5 rounded-lg border
+                        ${isParaSelected 
+                          ? 'bg-accent/10 border-accent text-neutral-900 dark:text-white font-medium scale-[1.01] shadow-sm' 
+                          : 'border-transparent hover:bg-neutral-50 dark:hover:bg-neutral-900'}`}
+                      title="Cliquer pour sélectionner ce paragraphe"
+                    >
+                      {p}
+                    </p>
+                  );
+                })}
+              </div>
+
+              {selectedText && (
+                <div className="pt-4 flex items-center justify-between border-t border-neutral-100 dark:border-zinc-800">
+                  <div className="text-xs text-accent font-medium flex items-center gap-1">
+                    <Check size={12} />
+                    <span>Sélection enregistrée ({selectedText.split(' ').length} mots)</span>
+                  </div>
+                  <button 
+                    onClick={clearSelection}
+                    className="text-xs text-concrete hover:underline"
+                  >
+                    Effacer la sélection
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Right column: Simulated Browser Extension Popup Screen (Exactly 400x520px envelope styled elegantly) */}
+        <div className="w-full md:w-[420px] bg-slate-100 dark:bg-zinc-900 p-6 flex items-center justify-center border-t md:border-t-0 md:border-l border-border relative">
+          <button 
+            onClick={onClose}
+            className="absolute top-4 right-4 p-2 text-concrete hover:text-ink hover:bg-neutral-200 dark:hover:bg-zinc-800 transition-colors rounded-full"
+            title="Quitter le simulateur"
+          >
+            <X size={20} />
+          </button>
+
+          {/* Explicitly designed container mimicking browser overlay/extension dropdown at 400x520px target size */}
+          <div 
+            id="clipper-extension-popup"
+            className="w-full max-w-[400px] h-[520px] bg-white dark:bg-neutral-950 rounded-2xl shadow-2xl border border-neutral-200 dark:border-neutral-800 flex flex-col overflow-hidden"
+          >
+            {/* Extension Hub Header */}
+            <header className="px-5 py-4 border-b border-neutral-100 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900/40 flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                {/* Momento Logo with Clipper Branding */}
+                <div className="w-7 h-7 bg-ink text-paper rounded-lg flex items-center justify-center font-serif font-black text-sm">
+                  M
+                </div>
+                <div className="leading-tight">
+                  <span className="text-xs font-bold font-serif text-ink dark:text-dark-ink tracking-tight">Momento</span>
+                  <span className="text-[10px] text-accent block font-mono font-medium tracking-widest uppercase">Web Clipper</span>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-1.5">
+                <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
+                <span className="text-[9.5px] font-bold text-neutral-400 uppercase tracking-widest leading-none">Connecté</span>
+              </div>
+            </header>
+
+            {/* Popup Dynamic Content Screen (Based on Clipper States) */}
+            <div className="flex-1 p-5 flex flex-col justify-between overflow-y-auto">
+              
+              {/* STATE: IDLE or SELECTED */}
+              {clipperState === 'idle' && (
+                <>
+                  <div className="space-y-4">
+                    {/* Destination Selection with styling from the design guideline prompt */}
+                    <div>
+                      <label className="text-[10px] uppercase font-bold tracking-widest text-concrete block mb-1.5">
+                        Carnet de destination
+                      </label>
+                      
+                      <div className="relative">
+                        <button
+                          type="button"
+                          onClick={() => setShowCarnetDropdown(!showCarnetDropdown)}
+                          className="w-full px-3 py-2.5 bg-neutral-50 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 hover:border-accent rounded-lg text-xs font-medium text-ink dark:text-dark-ink flex items-center justify-between transition-colors"
+                        >
+                          <span className="flex items-center gap-2">
+                            <span className="w-4 h-4 rounded-md bg-accent/10 text-accent flex items-center justify-center text-[9px] font-bold font-serif">
+                              {carnets.find(c => c.id === selectedCarnetId)?.initial || 'N'}
+                            </span>
+                            {carnets.find(c => c.id === selectedCarnetId)?.name || 'Sélectionner un carnet'}
+                          </span>
+                          <ChevronDown size={14} className="text-concrete" />
+                        </button>
+
+                        <AnimatePresence>
+                          {showCarnetDropdown && (
+                            <motion.div
+                              initial={{ opacity: 0, y: -5 }}
+                              animate={{ opacity: 1, y: 0 }}
+                              exit={{ opacity: 0, y: -5 }}
+                              className="absolute left-0 right-0 mt-1.5 z-50 max-h-[160px] overflow-y-auto bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-lg shadow-xl"
+                            >
+                              {carnets.map(c => (
+                                <button
+                                  key={c.id}
+                                  onClick={() => {
+                                    setSelectedCarnetId(c.id);
+                                    setShowCarnetDropdown(false);
+                                  }}
+                                  className="w-full px-3 py-2 text-left text-xs text-ink dark:text-dark-ink hover:bg-neutral-50 dark:hover:bg-neutral-800 flex items-center gap-2 transition-colors border-b border-neutral-50 dark:border-neutral-800/20 last:border-0"
+                                >
+                                  <span className="w-4 h-4 rounded bg-neutral-100 dark:bg-neutral-800 text-concrete flex items-center justify-center text-[9px] font-bold">
+                                    {c.initial}
+                                  </span>
+                                  {c.name}
+                                </button>
+                              ))}
+                            </motion.div>
+                          )}
+                        </AnimatePresence>
+                      </div>
+                    </div>
+
+                    {/* Section of active webpage info */}
+                    <div className="p-3 border border-neutral-100 dark:border-neutral-800/80 rounded-xl bg-neutral-50/50 dark:bg-neutral-900/20 space-y-1.5">
+                      <span className="text-[9px] uppercase font-bold tracking-widest text-concrete">Page active</span>
+                      <div className="flex items-center gap-2">
+                        <img src={activeArticle.favicon} alt="" className="w-4.5 h-4.5 rounded object-contain" />
+                        <div className="overflow-hidden">
+                          <p className="text-xs font-bold text-ink dark:text-dark-ink truncate">{activeArticle.title}</p>
+                          <p className="text-[10px] text-concrete truncate">{activeArticle.url}</p>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* STATE: ACTIVE SELECTION PREVIEW (Triggered when user highlights text) */}
+                    <AnimatePresence>
+                      {selectedText ? (
+                        <motion.div 
+                          initial={{ opacity: 0, y: 10 }}
+                          animate={{ opacity: 1, y: 0 }}
+                          exit={{ opacity: 0, y: 10 }}
+                          className="p-3.5 border border-sky-100 dark:border-sky-950 bg-sky-500/5 dark:bg-sky-500/10 rounded-xl space-y-2"
+                        >
+                          <div className="flex justify-between items-center">
+                            <span className="text-[10px] font-bold text-sky-600 dark:text-sky-400 uppercase tracking-wider flex items-center gap-1">
+                              <span className="w-1.5 h-1.5 rounded-full bg-sky-500 animate-pulse" />
+                              Sélection détectée
+                            </span>
+                            <button onClick={clearSelection} className="text-[10px] text-concrete hover:text-ink">
+                              ignorer
+                            </button>
+                          </div>
+                          <p className="text-xs text-ink/80 dark:text-dark-ink/80 italic leading-relaxed line-clamp-3 pl-2 border-l-2 border-sky-400">
+                            「 {selectedText} 」
+                          </p>
+                        </motion.div>
+                      ) : (
+                        <div className="p-4 border border-dashed border-neutral-200 dark:border-neutral-800 rounded-xl text-center">
+                          <p className="text-xs text-concrete leading-normal">
+                            Astuce : surlignez du texte à l'écran pour clipper une sélection précise de la page en tant que note.
+                          </p>
+                        </div>
+                      )}
+                    </AnimatePresence>
+                  </div>
+
+                  {/* Buttons logic */}
+                  <div className="flex flex-col gap-2.5 pt-4">
+                    {selectedText && (
+                      <button
+                        onClick={() => handleClip('selection')}
+                        style={{ id: 'btn-clip-sel' }}
+                        className="py-3 px-4 bg-sky-600 hover:bg-sky-700 text-white rounded-xl text-xs font-bold uppercase tracking-wider flex items-center justify-center gap-2 shadow-lg shadow-sky-600/10 transition-all scale-100 active:scale-95"
+                      >
+                        <Scissors size={14} className="-rotate-90" />
+                        Clipper la sélection
+                      </button>
+                    )}
+
+                    <button
+                      onClick={() => handleClip('page')}
+                      style={{ id: 'btn-clip-page' }}
+                      className={`py-3.5 px-4 rounded-xl text-xs font-bold uppercase tracking-wider flex items-center justify-center gap-2 transition-all active:scale-95
+                        ${selectedText 
+                          ? 'bg-neutral-100 text-neutral-700 hover:bg-neutral-200 dark:bg-neutral-900 dark:text-zinc-300 dark:hover:bg-neutral-800' 
+                          : 'bg-ink text-paper hover:opacity-95 shadow-xl shadow-black/10'}`}
+                    >
+                      <Bookmark size={14} className="fill-current" />
+                      Clipper cette page
+                    </button>
+                  </div>
+                </>
+              )}
+
+              {/* STATE: LOADING (Traitement AI, embedding & categorisation) */}
+              {clipperState === 'loading' && (
+                <div className="flex-1 flex flex-col items-center justify-center space-y-4">
+                  <div className="relative flex items-center justify-center">
+                    <div className="w-12 h-12 rounded-full border border-neutral-100 dark:border-neutral-800 animate-ping absolute" />
+                    <Loader2 size={36} className="animate-spin text-accent" />
+                  </div>
+                  <div className="text-center space-y-1.5 pt-2">
+                    <p className="text-xs font-bold uppercase tracking-widest text-concrete">
+                      Analyse de la source
+                    </p>
+                    <p className="text-sm font-semibold text-ink dark:text-dark-ink animate-pulse">
+                      Traitement en cours…
+                    </p>
+                    <p className="text-[10px] text-concrete max-w-[240px] leading-relaxed mx-auto">
+                      Génération automatique des tags, résumé sémantique & calcul des embeddings en cours.
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {/* STATE: SUCCESS */}
+              {clipperState === 'success' && (
+                <div className="flex-1 flex flex-col justify-between py-2">
+                  <div className="flex-1 flex flex-col items-center justify-center space-y-5">
+                    <div className="w-14 h-14 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-500 flex items-center justify-center">
+                      <Check size={28} className="stroke-[2.5]" />
+                    </div>
+
+                    <div className="text-center space-y-2 px-2">
+                      <span className="text-[9px] bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 font-bold px-2 py-0.5 rounded uppercase tracking-wider">
+                        Traitement Réussi
+                      </span>
+                      <h3 className="text-sm font-bold text-ink dark:text-dark-ink font-serif leading-tight">
+                        {aiGeneratedTitle}
+                      </h3>
+                      <p className="text-[10px] text-concrete">
+                        Note envoyée dans le carnet <span className="font-bold">"{carnets.find(c => c.id === selectedCarnetId)?.name}"</span>.
+                      </p>
+                    </div>
+
+                    <div className="w-full border-t border-neutral-100 dark:border-neutral-800/80 my-1 pt-4 flex flex-wrap gap-1.5 justify-center">
+                      {activeArticle.suggestedTags.map((t, i) => (
+                        <span key={i} className="text-[9px] bg-accent/5 font-bold uppercase tracking-wider text-accent border border-accent/20 px-2.5 py-1 rounded-full flex items-center gap-1">
+                          <Sparkles size={10} />
+                          {t}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="pt-4 flex flex-col gap-2">
+                    <button
+                      onClick={() => {
+                        window.dispatchEvent(new CustomEvent('switch-view', { detail: 'notebooks' }));
+                        window.dispatchEvent(new CustomEvent('open-note', { detail: lastCreatedNoteId }));
+                        onClose();
+                      }}
+                      className="w-full py-3.5 bg-ink text-paper rounded-xl text-xs font-bold uppercase tracking-widest flex items-center justify-center gap-2 hover:opacity-95 transition-opacity"
+                    >
+                      Voir dans Momento
+                      <ArrowUpRight size={14} />
+                    </button>
+
+                    <button
+                      onClick={handleResetClipper}
+                      className="w-full py-2 text-xs text-concrete hover:text-ink hover:underline text-center"
+                    >
+                      Clipper une autre page
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {/* STATE: ERROR */}
+              {clipperState === 'error' && (
+                <div className="flex-1 flex flex-col justify-between py-2">
+                  <div className="flex-1 flex flex-col items-center justify-center space-y-4">
+                    <div className="w-14 h-14 rounded-full bg-red-100 dark:bg-rose-950/20 text-red-500 flex items-center justify-center">
+                      <AlertTriangle size={28} />
+                    </div>
+
+                    <div className="text-center space-y-2 px-2">
+                      <p className="text-xs font-bold uppercase tracking-widest text-red-500">
+                        Échec de la capture
+                      </p>
+                      <p className="text-xs text-neutral-600 dark:text-zinc-400 leading-normal max-w-[260px] mx-auto">
+                        {customError || "Une erreur s'est produite lors de la transmission à votre instance."}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="pt-4">
+                    <button
+                      onClick={handleResetClipper}
+                      className="w-full py-3.5 bg-red-500 hover:bg-red-600 text-white rounded-xl text-xs font-bold uppercase tracking-widest transition-colors flex items-center justify-center gap-2"
+                    >
+                      Réessayer
+                    </button>
+                  </div>
+                </div>
+              )}
+
+            </div>
+
+            {/* Simulated context details */}
+            <footer className="px-5 py-3 border-t border-neutral-100 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/40 text-[9px] text-concrete text-center">
+              Momento Companion v2.1.2 • Sécurisé HTTPS TLS 1.3
+            </footer>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+};

architectural-grid/src/components/GraphKnowledgeMap.tsx

@@ -0,0 +1,874 @@
+import React, { useEffect, useRef, useState, useMemo } from 'react';
+import * as d3 from 'd3';
+import { motion, AnimatePresence } from 'motion/react';
+import { Note, Carnet, Tag } from '../types';
+import { 
+  Network, 
+  Search, 
+  Sliders, 
+  HelpCircle, 
+  X, 
+  Filter, 
+  Compass, 
+  BookOpen, 
+  Eye, 
+  Sparkles,
+  RefreshCw,
+  Plus,
+  Minus,
+  Maximize2,
+  ChevronLeft,
+  Calendar,
+  Layers,
+  FileText
+} from 'lucide-react';
+
+interface GraphKnowledgeMapProps {
+  notes: Note[];
+  carnets: Carnet[];
+  onOpenNote: (noteId: string) => void;
+  onClose?: () => void;
+}
+
+// 7 Gorgeous colors corresponding to the carnets palette
+const CARNET_COLOR_PALETTE: { [key: string]: string } = {
+  '1': '#D97706', // Daily Notes - Warm Amber
+  '2': '#059669', // Project: Neo - Soft Emerald
+  '3': '#4F46E5', // Shared Docs - Rich Indigo
+  '4': '#0891B2', // Architecture Research - Clean Cyan
+  '5': '#EA580C', // History of Architecture - Deep Orange
+  '6': '#DB2777', // Modernism - Vibrant Rose
+  '7': '#65A30D', // Sustainable Design - Cool Lime
+};
+
+const DEFAULT_CARNET_COLOR = '#71717A'; // Zinc
+
+interface D3Node extends d3.SimulationNodeDatum {
+  id: string;
+  title: string;
+  carnetId: string;
+  carnetName: string;
+  color: string;
+  date: string;
+  snippet: string;
+  tags: Tag[];
+  degree: number;
+}
+
+interface D3Link extends d3.SimulationLinkDatum<D3Node> {
+  source: string | D3Node;
+  target: string | D3Node;
+  type: 'wikilink' | 'semantic';
+  strength: number;
+}
+
+export const GraphKnowledgeMap: React.FC<GraphKnowledgeMapProps> = ({
+  notes,
+  carnets,
+  onOpenNote,
+  onClose
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const svgRef = useRef<SVGSVGElement>(null);
+
+  // Settings & Toggles
+  const [showSemanticLinks, setShowSemanticLinks] = useState(true);
+  const [minSemanticStrength, setMinSemanticStrength] = useState(0.40); // threshold
+  const [selectedCarnetIds, setSelectedCarnetIds] = useState<string[]>([]);
+  
+  // Interaction States
+  const [searchQuery, setSearchQuery] = useState('');
+  const [hoveredNode, setHoveredNode] = useState<D3Node | null>(null);
+  const [activeLocalNode, setActiveLocalNode] = useState<D3Node | null>(null);
+  const [nodeConnections, setNodeConnections] = useState<Set<string>>(new Set());
+  
+  // D3 Zoom controller ref to trigger programmatically
+  const d3ZoomRef = useRef<d3.ZoomBehavior<SVGSVGElement, unknown> | null>(null);
+
+  // Initialize carnet filters with all carnets on mount
+  useEffect(() => {
+    setSelectedCarnetIds(carnets.map(c => c.id));
+  }, [carnets]);
+
+  // Static list of explicit links (Wikilinks)
+  const explicitWikiLinks = useMemo(() => {
+    return [
+      { source: 'n1', target: 'n1-b' },
+      { source: 'n3', target: 'n3-b' },
+      { source: 'bridge-1', target: 'n1' },
+      { source: 'bridge-1', target: 'n2' },
+    ];
+  }, []);
+
+  // Filter and process notes and carnets
+  const filteredNotes = useMemo(() => {
+    return notes.filter(n => {
+      // Exclude trashed/deleted notes
+      if (n.isDeleted) return false;
+      // Filter by selected carnets
+      return selectedCarnetIds.includes(n.carnetId);
+    });
+  }, [notes, selectedCarnetIds]);
+
+  // Compute all links based on state (Wikilinks + Semantic if enabled)
+  const graphData = useMemo(() => {
+    const noteMap = new Map<string, Note>();
+    filteredNotes.forEach(n => noteMap.set(n.id, n));
+
+    const nodes: D3Node[] = filteredNotes.map(n => {
+      const carnet = carnets.find(c => c.id === n.carnetId);
+      return {
+        id: n.id,
+        title: n.title,
+        carnetId: n.carnetId,
+        carnetName: carnet?.name || 'Carnet Inconnu',
+        color: CARNET_COLOR_PALETTE[n.carnetId] || DEFAULT_CARNET_COLOR,
+        date: n.date,
+        snippet: n.content.split('.').slice(0, 3).join('.') + '.',
+        tags: n.tags || [],
+        degree: 0, // calculated below
+        x: undefined,
+        y: undefined
+      };
+    });
+
+    const links: D3Link[] = [];
+
+    // 1. Add Explicit Wikilinks if both target and source are inside filtered list
+    explicitWikiLinks.forEach(link => {
+      if (noteMap.has(link.source) && noteMap.has(link.target)) {
+        links.push({
+          source: link.source,
+          target: link.target,
+          type: 'wikilink',
+          strength: 1.0
+        });
+      }
+    });
+
+    // 2. Add Semantic Connections (Memory Echo) based on embedding similarities
+    if (showSemanticLinks) {
+      for (let i = 0; i < filteredNotes.length; i++) {
+        for (let j = i + 1; j < filteredNotes.length; j++) {
+          const ni = filteredNotes[i];
+          const nj = filteredNotes[j];
+          
+          if (ni.embedding && nj.embedding) {
+            // Cosine vector similarity approximation / Euclidean inverse mapping
+            const dist = Math.sqrt(
+              Math.pow(ni.embedding[0] - nj.embedding[0], 2) + 
+              Math.pow(ni.embedding[1] - nj.embedding[1], 2)
+            );
+            // Translate distance into similarity standard (0.0 - 1.0)
+            const similarity = Math.max(0, 1 - dist * 0.7);
+
+            if (similarity >= minSemanticStrength) {
+              // Avoid duplicate links with explicit ones to keep display clean
+              const hasExplicit = explicitWikiLinks.some(
+                ex => (ex.source === ni.id && ex.target === nj.id) || (ex.source === nj.id && ex.target === ni.id)
+              );
+              
+              if (!hasExplicit) {
+                links.push({
+                  source: ni.id,
+                  target: nj.id,
+                  type: 'semantic',
+                  strength: similarity
+                });
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // Calculate node connectivity degrees
+    nodes.forEach(node => {
+      const connectionsCount = links.filter(l => 
+        l.source === node.id || l.target === node.id || 
+        (typeof l.source === 'object' && (l.source as any).id === node.id) ||
+        (typeof l.target === 'object' && (l.target as any).id === node.id)
+      ).length;
+      node.degree = connectionsCount;
+    });
+
+    return { nodes, links };
+  }, [filteredNotes, carnets, showSemanticLinks, minSemanticStrength, selectedCarnetIds, explicitWikiLinks]);
+
+  // Handle Note connection highlights during hover
+  useEffect(() => {
+    if (!hoveredNode) {
+      setNodeConnections(new Set());
+      return;
+    }
+
+    const connected = new Set<string>();
+    connected.add(hoveredNode.id);
+
+    graphData.links.forEach((l: any) => {
+      const srcId = typeof l.source === 'object' ? l.source.id : l.source;
+      const tgtId = typeof l.target === 'object' ? l.target.id : l.target;
+
+      if (srcId === hoveredNode.id) {
+        connected.add(tgtId);
+      } else if (tgtId === hoveredNode.id) {
+        connected.add(srcId);
+      }
+    });
+
+    setNodeConnections(connected);
+  }, [hoveredNode, graphData.links]);
+
+  // Main D3 force layout rendering loop
+  useEffect(() => {
+    if (!svgRef.current || !containerRef.current) return;
+
+    const width = containerRef.current.clientWidth;
+    const height = containerRef.current.clientHeight;
+
+    const svg = d3.select(svgRef.current);
+    svg.selectAll("*").remove();
+
+    // Base containment group
+    const mainGroup = svg.append("g");
+
+    // Configure zooming behaviors
+    const zoomBehavior = d3.zoom<SVGSVGElement, unknown>()
+      .scaleExtent([0.15, 5])
+      .on("zoom", (event) => {
+        mainGroup.attr("transform", event.transform);
+      });
+
+    d3ZoomRef.current = zoomBehavior;
+    svg.call(zoomBehavior);
+
+    // D3 nodes and links references mapped to copyable arrays
+    const simulationNodes = JSON.parse(JSON.stringify(graphData.nodes)) as D3Node[];
+    const simulationLinks = graphData.links.map(l => ({
+      source: l.source,
+      target: l.target,
+      type: l.type,
+      strength: l.strength
+    })) as D3Link[];
+
+    // Build the force simulation
+    const simulation = d3.forceSimulation<D3Node>(simulationNodes)
+      .force("link", d3.forceLink<D3Node, any>(simulationLinks)
+        .id(d => d.id)
+        .distance(d => d.type === 'wikilink' ? 100 : 140)
+      )
+      .force("charge", d3.forceManyBody().strength(-240))
+      .force("center", d3.forceCenter(width / 2, height / 2))
+      .force("collision", d3.forceCollide<D3Node>().radius(d => {
+        // Size proportional to connections: min 8px, max 20px
+        const rad = 8 + Math.min(d.degree * 2.5, 12);
+        return rad + 24;
+      }));
+
+    // Draw Links
+    const linkGroup = mainGroup.append("g")
+      .attr("class", "links-layer");
+
+    const link = linkGroup.selectAll("line")
+      .data(simulationLinks)
+      .enter()
+      .append("line")
+      .attr("stroke", d => d.type === 'semantic' ? '#4f46e5' : '#18181b')
+      .attr("stroke-opacity", d => d.type === 'semantic' ? 0.35 : 0.18)
+      .attr("stroke-width", d => d.type === 'semantic' ? 1.2 : 1.5)
+      .attr("stroke-dasharray", d => d.type === 'semantic' ? '4,4' : 'none');
+
+    // Draw Nodes
+    const nodeGroup = mainGroup.append("g")
+      .attr("class", "nodes-layer");
+
+    const node = nodeGroup.selectAll(".node")
+      .data(simulationNodes)
+      .enter()
+      .append("g")
+      .attr("class", "node cursor-pointer")
+      .on("click", (event, d) => {
+        event.stopPropagation();
+        handleSelectNode(d);
+      })
+      .on("mouseenter", (event, d) => {
+        setHoveredNode(d);
+      })
+      .on("mouseleave", () => {
+        setHoveredNode(null);
+      })
+      .call(d3.drag<SVGGElement, D3Node>()
+        .on("start", dragStarted)
+        .on("drag", dragged)
+        .on("end", dragEnded) as any);
+
+    // Create central circles
+    node.append("circle")
+      .attr("r", d => 6 + Math.min(d.degree * 1.5, 9))
+      .attr("fill", d => d.color)
+      .attr("stroke", "rgba(255,255,255,0.95)")
+      .attr("stroke-width", 2)
+      .attr("class", "transition-all duration-300 dark:stroke-zinc-950")
+      .style("filter", "drop-shadow(0 2px 4px rgba(0,0,0,0.1))");
+
+    // Text labels overlay
+    node.append("text")
+      .attr("dy", d => 14 + Math.min(d.degree * 1.5, 9) + 4)
+      .attr("text-anchor", "middle")
+      .attr("class", "text-[10px] sm:text-[11px] font-sans font-semibold tracking-tight fill-zinc-850 dark:fill-zinc-300 select-none pointer-events-none")
+      .text(d => d.title.length > 22 ? d.title.substring(0, 20) + "..." : d.title)
+      .style("opacity", d => (d.degree > 2 || d.title.toLowerCase().includes(searchQuery.toLowerCase()) && searchQuery) ? 1 : 0.65);
+
+    // Search query search highlight ring
+    if (searchQuery) {
+      node.filter(d => d.title.toLowerCase().includes(searchQuery.toLowerCase()))
+        .append("circle")
+        .attr("r", d => 14 + Math.min(d.degree * 1.5, 9))
+        .attr("fill", "none")
+        .attr("stroke", "#06b6d4")
+        .attr("stroke-width", 2)
+        .attr("stroke-dasharray", "3,1")
+        .attr("class", "animate-[spin_20s_linear_infinite]");
+    }
+
+    // Node active local neighbor rings
+    if (activeLocalNode) {
+      const activeConns = getLocalNodeNeighbors(activeLocalNode.id);
+      
+      node.style("opacity", d => {
+        return activeConns.has(d.id) ? 1.0 : 0.15;
+      });
+
+      link.style("stroke-opacity", (l: any) => {
+        const srcId = l.source.id;
+        const tgtId = l.target.id;
+        return (activeConns.has(srcId) && activeConns.has(tgtId)) ? 0.75 : 0.05;
+      });
+
+      // Highlight the focused local hub node with a neat accent circle
+      node.filter(d => d.id === activeLocalNode.id)
+        .append("circle")
+        .attr("r", d => 16 + Math.min(d.degree * 1.5, 9))
+        .attr("fill", "none")
+        .attr("stroke", "rgba(79, 70, 229, 0.4)")
+        .attr("stroke-width", 1.5)
+        .attr("stroke-opacity", 0.9);
+    } 
+    // Node hover lighting state
+    else if (hoveredNode) {
+      const hoveredConns = new Set<string>();
+      hoveredConns.add(hoveredNode.id);
+
+      graphData.links.forEach((l: any) => {
+        const srcId = typeof l.source === 'object' ? l.source.id : l.source;
+        const tgtId = typeof l.target === 'object' ? l.target.id : l.target;
+
+        if (srcId === hoveredNode.id) {
+          hoveredConns.add(tgtId);
+        } else if (tgtId === hoveredNode.id) {
+          hoveredConns.add(srcId);
+        }
+      });
+
+      // Subdue unconnected elements to 20% opacity
+      node.style("opacity", d => hoveredConns.has(d.id) ? 1.0 : 0.20);
+      link.style("stroke-opacity", (l: any) => {
+        const srcId = l.source.id;
+        const tgtId = l.target.id;
+        return (srcId === hoveredNode.id || tgtId === hoveredNode.id) ? 0.8 : 0.05;
+      });
+
+      // Hover scale update for primary
+      node.filter(d => d.id === hoveredNode.id)
+        .select("circle")
+        .attr("transform", "scale(1.3)");
+    } 
+    // Normal / Base state
+    else {
+      node.style("opacity", 1.0);
+      link.style("stroke-opacity", d => d.type === 'semantic' ? 0.35 : 0.18);
+    }
+
+    // Run ticks
+    simulation.on("tick", () => {
+      link
+        .attr("x1", d => (d.source as any).x)
+        .attr("y1", d => (d.source as any).y)
+        .attr("x2", d => (d.target as any).x)
+        .attr("y2", d => (d.target as any).y);
+
+      node
+        .attr("transform", d => `translate(${d.x},${d.y})`);
+    });
+
+    // Zoom on local node view trigger
+    if (activeLocalNode && width && height) {
+      const targetNodeCopy = simulationNodes.find(n => n.id === activeLocalNode.id);
+      if (targetNodeCopy) {
+        // Step ticker synchronously to finalize force state layout
+        for (let i = 0; i < 40; ++i) simulation.tick();
+
+        const x = targetNodeCopy.x || width / 2;
+        const y = targetNodeCopy.y || height / 2;
+
+        svg.transition()
+          .duration(850)
+          .ease(d3.easeCubicOut)
+          .call(
+            zoomBehavior.transform,
+            d3.zoomIdentity.translate(width / 2, height / 2).scale(1.65).translate(-x, -y)
+          );
+      }
+    } else {
+      // Re-center whole graph
+      svg.transition()
+        .duration(800)
+        .ease(d3.easeCubicOut)
+        .call(zoomBehavior.transform, d3.zoomIdentity);
+    }
+
+    function dragStarted(event: any, d: any) {
+      if (!event.active) simulation.alphaTarget(0.25).restart();
+      d.fx = d.x;
+      d.fy = d.y;
+    }
+
+    function dragged(event: any, d: any) {
+      d.fx = event.x;
+      d.fy = event.y;
+    }
+
+    function dragEnded(event: any, d: any) {
+      if (!event.active) simulation.alphaTarget(0);
+      d.fx = null;
+      d.fy = null;
+    }
+
+    return () => {
+      simulation.stop();
+    };
+  }, [graphData, showSemanticLinks, minSemanticStrength, searchQuery, activeLocalNode, hoveredNode]);
+
+  // Compute local neighbors
+  const getLocalNodeNeighbors = (nodeId: string): Set<string> => {
+    const list = new Set<string>();
+    list.add(nodeId);
+    graphData.links.forEach(l => {
+      if (l.source === nodeId) {
+        list.add(typeof l.target === 'object' ? (l.target as any).id : l.target);
+      } else if (l.target === nodeId) {
+        list.add(typeof l.source === 'object' ? (l.source as any).id : l.source);
+      }
+    });
+    return list;
+  };
+
+  const handleSelectNode = (node: D3Node) => {
+    setActiveLocalNode(node);
+  };
+
+  const handleResetLocalView = () => {
+    setActiveLocalNode(null);
+  };
+
+  const handleZoom = (direction: 'in' | 'out' | 'fit') => {
+    if (!svgRef.current || !d3ZoomRef.current) return;
+    const svg = d3.select(svgRef.current);
+    
+    if (direction === 'fit') {
+      svg.transition().duration(500).call(d3ZoomRef.current.transform, d3.zoomIdentity);
+    } else {
+      const factor = direction === 'in' ? 1.3 : 1 / 1.3;
+      svg.transition().duration(400).call(d3ZoomRef.current.scaleBy, factor);
+    }
+  };
+
+  const toggleCarnetSelector = (carnetId: string) => {
+    setSelectedCarnetIds(prev => 
+      prev.includes(carnetId)
+        ? prev.filter(id => id !== carnetId)
+        : [...prev, carnetId]
+    );
+  };
+
+  const selectAllCarnets = () => {
+    setSelectedCarnetIds(carnets.map(c => c.id));
+  };
+
+  const clearAllCarnets = () => {
+    setSelectedCarnetIds([]);
+  };
+
+  return (
+    <div className="flex-1 h-full flex flex-row overflow-hidden relative">
+      <div 
+        ref={containerRef} 
+        className="flex-1 h-full relative overflow-hidden bg-paper dark:bg-[#0E0E0E]"
+        style={{
+          backgroundImage: 'radial-gradient(rgba(120, 119, 198, 0.04) 1px, transparent 1.5px)',
+          backgroundSize: '24px 24px'
+        }}
+      >
+        {/* Dynamic Header Overlay */}
+        <div className="absolute top-5 left-5 z-20 flex items-center gap-3">
+          {activeLocalNode ? (
+            <button 
+              onClick={handleResetLocalView}
+              className="flex items-center gap-2 px-3 py-2 bg-white/90 dark:bg-zinc-900/90 backdrop-blur border border-border/80 hover:border-accent text-accent rounded-xl text-xs font-bold uppercase tracking-wider transition-all shadow-md"
+            >
+              <ChevronLeft size={14} className="stroke-[2.5]" />
+              Graphe Global
+            </button>
+          ) : onClose ? (
+            <button 
+              onClick={onClose}
+              className="flex items-center gap-2 px-3 py-2 bg-white/90 dark:bg-zinc-900/90 backdrop-blur border border-border/80 hover:border-black text-ink rounded-xl text-xs font-bold uppercase tracking-wider transition-all shadow-md"
+            >
+              <BookOpen size={14} />
+              Retour Notes
+            </button>
+          ) : (
+            <div className="flex items-center gap-2 px-3 py-2 bg-white/90 dark:bg-zinc-900/90 backdrop-blur border border-border/60 rounded-xl">
+              <Compass size={14} className="text-accent" />
+              <span className="text-xs font-bold uppercase tracking-wider text-ink dark:text-dark-ink">Carte Sémantique</span>
+            </div>
+          )}
+
+          <div className="hidden md:flex items-center bg-zinc-950/5 dark:bg-white/5 border border-border px-3 py-1.5 rounded-xl text-[11px] text-concrete font-medium gap-1.5 shadow-sm">
+            <span className="font-bold text-ink dark:text-dark-ink">{graphData.nodes.length} Nœuds</span>
+            <span className="opacity-30">|</span>
+            <span>{graphData.links.length} Relations</span>
+          </div>
+        </div>
+
+        {/* Global Hub Search Bar */}
+        <div className="absolute top-5 left-1/2 -translate-x-1/2 z-20 w-[90%] max-w-[360px]">
+          <div className="relative">
+            <input 
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Chercher une note dans le graphe sémantique..."
+              className="w-full text-xs pl-9 pr-8 py-2.5 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/95 dark:bg-zinc-950/95 placeholder-concrete/60 shadow-lg outline-none focus:border-accent focus:ring-1 focus:ring-accent/10 transition-all text-ink dark:text-dark-ink font-medium"
+            />
+            <Search size={14} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-concrete" />
+            
+            {searchQuery && (
+              <button 
+                onClick={() => setSearchQuery('')}
+                className="absolute right-3 top-1/2 -translate-y-1/2 p-0.5 text-concrete hover:text-ink hover:bg-black/5 dark:hover:bg-white/5 rounded-full"
+              >
+                <X size={13} />
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Zoom controls (bottom right) */}
+        <div className="absolute bottom-6 right-6 z-20 flex flex-col gap-1.5 bg-white/90 dark:bg-zinc-900/90 backdrop-blur p-1.5 rounded-xl border border-border/60 shadow-xl">
+          <button 
+            onClick={() => handleZoom('in')}
+            className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg text-concrete hover:text-ink transition-colors"
+            title="Zoomer (+)"
+          >
+            <Plus size={15} />
+          </button>
+          
+          <button 
+            onClick={() => handleZoom('out')}
+            className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg text-concrete hover:text-ink transition-colors"
+            title="Dézoomer (-)"
+          >
+            <Minus size={15} />
+          </button>
+
+          <div className="h-[1px] bg-border mx-1 my-0.5" />
+
+          <button 
+            onClick={() => handleZoom('fit')}
+            className="p-2 hover:bg-black/5 dark:hover:bg-white/5 rounded-lg text-concrete hover:text-accent transition-colors"
+            title="Ajuster la vue"
+          >
+            <Maximize2 size={13} />
+          </button>
+        </div>
+
+        {/* Floating Controls Panel (top right) */}
+        <div className="absolute top-5 right-5 z-20 w-[300px] hidden lg:block">
+          <div className="bg-white/95 dark:bg-zinc-950/95 backdrop-blur border border-neutral-200 dark:border-neutral-800 rounded-2xl shadow-xl overflow-hidden">
+            <div className="px-4.5 py-3 border-b border-neutral-100 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/10 flex items-center justify-between">
+              <span className="text-[10px] font-bold uppercase tracking-widest text-concrete flex items-center gap-1.5">
+                <Sliders size={11} className="text-secondary" />
+                Paramètres du Graphe
+              </span>
+              <button 
+                onClick={() => {
+                  setShowSemanticLinks(true);
+                  setMinSemanticStrength(0.40);
+                  selectAllCarnets();
+                }}
+                className="text-[9px] font-bold uppercase text-accent hover:text-accent/80 transition-colors"
+                title="Rétablir par défaut"
+              >
+                Reset
+              </button>
+            </div>
+
+            <div className="p-4 space-y-4">
+              {/* Semantic Link Toggle Details */}
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <label htmlFor="semantic-links-toggle" className="text-[11px] font-bold text-ink dark:text-dark-ink flex items-center gap-1.5">
+                    <Sparkles size={12} className="text-indigo-500" />
+                    Liens sémantiques
+                  </label>
+                  <input 
+                    id="semantic-links-toggle"
+                    type="checkbox"
+                    checked={showSemanticLinks}
+                    onChange={(e) => setShowSemanticLinks(e.target.checked)}
+                    className="w-4 h-4 text-accent border-gray-300 rounded focus:ring-accent"
+                  />
+                </div>
+                <p className="text-[10px] text-concrete leading-normal pl-5">
+                  Visualiser la couche d'affinité IA générée par embeddings sémantiques (Memory Echo).
+                </p>
+              </div>
+
+              {/* Slider for semantic filtering threshold - Displayed only if activated */}
+              {showSemanticLinks && (
+                <div className="pt-1.5 pb-0.5 space-y-2.5 border-t border-neutral-100 dark:border-neutral-800">
+                  <div className="flex justify-between items-center text-[10px] font-bold text-concrete">
+                    <span>Force minimum sémantique</span>
+                    <span className="font-mono text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-950/40 px-1.5 py-0.5 rounded">
+                      {(minSemanticStrength * 100).toFixed(0)}%
+                    </span>
+                  </div>
+                  
+                  <div className="flex items-center gap-2">
+                    <span className="text-[9px] font-mono text-concrete">0.2</span>
+                    <input 
+                      type="range"
+                      min="0.20"
+                      max="0.85"
+                      step="0.05"
+                      value={minSemanticStrength}
+                      onChange={(e) => setMinSemanticStrength(parseFloat(e.target.value))}
+                      className="w-full h-1.5 bg-neutral-200 dark:bg-neutral-800 rounded-lg appearance-none cursor-pointer accent-indigo-600"
+                    />
+                    <span className="text-[9px] font-mono text-concrete font-bold">0.85</span>
+                  </div>
+                </div>
+              )}
+
+              {/* Filter by Carnets with Checkboxes */}
+              <div className="pt-3 border-t border-neutral-100 dark:border-neutral-800 space-y-2.5">
+                <div className="flex items-center justify-between text-[11px] font-bold text-ink dark:text-dark-ink">
+                  <span className="flex items-center gap-1.5">
+                    <Layers size={11} className="text-emerald-500" />
+                    Filtrer par Carnet ({selectedCarnetIds.length})
+                  </span>
+                  <div className="flex items-center gap-2 text-[9px] text-concrete">
+                    <button onClick={selectAllCarnets} className="hover:underline">Tous</button>
+                    <span>•</span>
+                    <button onClick={clearAllCarnets} className="hover:underline">Aucun</button>
+                  </div>
+                </div>
+
+                <div className="space-y-1.5 max-h-[140px] overflow-y-auto pr-1">
+                  {carnets.map(c => {
+                    const isChecked = selectedCarnetIds.includes(c.id);
+                    const carnetColor = CARNET_COLOR_PALETTE[c.id] || DEFAULT_CARNET_COLOR;
+                    return (
+                      <label 
+                        key={c.id} 
+                        className="flex items-center justify-between text-[10.5px] text-concrete hover:text-ink cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-900/40 py-1 px-1.5 rounded transition-colors"
+                      >
+                        <span className="flex items-center gap-2">
+                          <span className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: carnetColor }} />
+                          <span className="truncate max-w-[150px]">{c.name}</span>
+                        </span>
+                        
+                        <input 
+                          type="checkbox"
+                          checked={isChecked}
+                          onChange={() => toggleCarnetSelector(c.id)}
+                          className="w-3.5 h-3.5 text-accent border-gray-300 rounded focus:ring-accent"
+                        />
+                      </label>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Dynamic Tooltip Hover UI Card (In case of node hovering) */}
+        <AnimatePresence>
+          {hoveredNode && !activeLocalNode && (
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95, y: 15 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.95 }}
+              className="absolute bottom-8 left-8 z-30 w-[280px] bg-zinc-950 text-white rounded-xl shadow-2xl p-4.5 border border-zinc-800 space-y-3.5"
+            >
+              <div className="space-y-1.5">
+                <div className="flex items-center gap-2 justify-between">
+                  <span className="text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded text-white font-mono" style={{ backgroundColor: hoveredNode.color }}>
+                    {hoveredNode.carnetName}
+                  </span>
+                  
+                  <span className="text-[9.5px] font-mono text-zinc-400">
+                    Modifié le : {hoveredNode.date}
+                  </span>
+                </div>
+
+                <h4 className="text-xs font-bold leading-tight line-clamp-2 text-zinc-100 font-serif">
+                  {hoveredNode.title}
+                </h4>
+              </div>
+
+              {/* Micro Metrics stats */}
+              <div className="grid grid-cols-2 gap-2 border-t border-zinc-900 pt-3">
+                <div className="bg-zinc-900/50 p-2 rounded-lg text-center">
+                  <span className="text-[9px] block text-zinc-500 uppercase tracking-wider">Connexions</span>
+                  <p className="text-xs font-black text-indigo-400">{hoveredNode.degree}</p>
+                </div>
+                
+                <div className="bg-zinc-900/50 p-2 rounded-lg text-center">
+                  <span className="text-[9px] block text-zinc-500 uppercase tracking-wider">Tags détectés</span>
+                  <p className="text-xs font-black text-cyan-400">{hoveredNode.tags.length || 0}</p>
+                </div>
+              </div>
+
+              <div className="text-[9.5px] text-zinc-400 font-medium italic flex items-center justify-center gap-1">
+                <span>Cliquez pour isoler / modifier</span>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        {/* SVG Core Render canvas */}
+        <svg ref={svgRef} className="w-full h-full" />
+      </div>
+
+      {/* State D: Note focus right panel slider (280px width) */}
+      <AnimatePresence>
+        {activeLocalNode && (
+          <motion.div 
+            initial={{ x: '100%', opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            exit={{ x: '100%', opacity: 0 }}
+            transition={{ type: 'spring', damping: 25, stiffness: 180 }}
+            className="w-[320px] bg-white dark:bg-neutral-950 border-l border-neutral-200 dark:border-neutral-800 shadow-2xl z-20 flex flex-col justify-between"
+          >
+            {/* Panel header and close button */}
+            <div className="p-5 border-b border-neutral-100 dark:border-neutral-800">
+              <div className="flex items-center justify-between mb-4.5">
+                <div className="flex items-center gap-2 text-[10px] uppercase font-bold tracking-widest text-[#4f46e5]">
+                  <Sparkles size={12} className="text-indigo-500 animate-[pulse_3s_infinite]" />
+                  Aperçu de Note
+                </div>
+                
+                <button 
+                  onClick={handleResetLocalView}
+                  className="p-1 px-2.5 rounded hover:bg-neutral-50 dark:hover:bg-neutral-900 text-[10.5px] font-bold tracking-tight text-concrete hover:text-ink select-none border border-neutral-200 dark:border-neutral-800"
+                >
+                  Fermer
+                </button>
+              </div>
+
+              {/* Note details */}
+              <div className="space-y-2">
+                <div className="flex items-center gap-1.5 text-[9.5px] font-bold text-zinc-400">
+                  <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: activeLocalNode.color }} />
+                  <span className="uppercase tracking-wider truncate max-w-[200px]">{activeLocalNode.carnetName}</span>
+                </div>
+
+                <h3 className="text-sm font-black text-ink dark:text-dark-ink font-serif leading-tight">
+                  {activeLocalNode.title}
+                </h3>
+                
+                <p className="text-[10px] text-concrete font-mono flex items-center gap-1">
+                  <Calendar size={10} />
+                  Dernier update : {activeLocalNode.date}
+                </p>
+              </div>
+            </div>
+
+            {/* Snippet body content */}
+            <div className="flex-1 p-5 overflow-y-auto space-y-4">
+              <div className="space-y-1">
+                <span className="text-[9px] uppercase font-bold tracking-widest text-concrete block">Résumé / Extrait</span>
+                <p className="text-xs text-ink/80 dark:text-dark-ink/80 italic leading-relaxed bg-[#FAF9F5]/40 dark:bg-neutral-900 p-3.5 rounded-xl border border-[#FAF9F5] dark:border-neutral-900 select-all">
+                  "{activeLocalNode.snippet}"
+                </p>
+              </div>
+
+              {/* Relationship listing */}
+              <div className="space-y-2">
+                <span className="text-[9px] uppercase font-bold tracking-widest text-concrete block">
+                  Éléments connectés ({getLocalNodeNeighbors(activeLocalNode.id).size - 1})
+                </span>
+                
+                <div className="space-y-1.5 max-h-[160px] overflow-y-auto pr-1">
+                  {notes
+                    .filter(n => n.id !== activeLocalNode.id && getLocalNodeNeighbors(activeLocalNode.id).has(n.id))
+                    .map(neighbor => {
+                      return (
+                        <div 
+                          key={neighbor.id}
+                          onClick={() => {
+                            const foundNode = graphData.nodes.find(v => v.id === neighbor.id);
+                            if (foundNode) handleSelectNode(foundNode);
+                          }}
+                          className="flex items-center justify-between text-[10px] p-2 bg-neutral-50 dark:bg-neutral-900/60 rounded-xl hover:bg-neutral-100 cursor-pointer border border-transparent hover:border-border transition-colors group"
+                        >
+                          <span className="font-semibold text-ink dark:text-dark-ink truncate max-w-[170px] flex items-center gap-1.5">
+                            <span className="w-1.5 h-1.5 rounded-full shrink-0" style={{ backgroundColor: CARNET_COLOR_PALETTE[neighbor.carnetId] || DEFAULT_CARNET_COLOR }} />
+                            {neighbor.title}
+                          </span>
+                          <span className="text-[8px] font-bold uppercase tracking-wider text-concrete group-hover:text-accent group-hover:underline">
+                            Séléctionner
+                          </span>
+                        </div>
+                      );
+                    })}
+                </div>
+              </div>
+
+              {/* Tags panel detail */}
+              {activeLocalNode.tags && activeLocalNode.tags.length > 0 && (
+                <div className="space-y-2">
+                  <span className="text-[9px] uppercase font-bold tracking-widest text-concrete block">Index de tags</span>
+                  <div className="flex flex-wrap gap-1">
+                    {activeLocalNode.tags.map((t, idx) => (
+                      <span 
+                        key={idx} 
+                        className="text-[9px] font-semibold uppercase tracking-wider border border-border bg-neutral-50/40 text-concrete px-2 py-0.5 rounded-full"
+                      >
+                        {t.label}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* CTA action bottom block */}
+            <div className="p-5 border-t border-neutral-100 dark:border-neutral-800 bg-neutral-50/50 dark:bg-neutral-900/10 flex flex-col gap-2.5">
+              <button
+                onClick={() => onOpenNote(activeLocalNode.id)}
+                className="w-full py-3.5 bg-ink text-paper dark:bg-neutral-50 dark:text-zinc-950 rounded-xl text-xs font-bold uppercase tracking-widest hover:opacity-95 transition-all text-center flex items-center justify-center gap-1.5 shadow-xl shadow-black/10 scale-100 active:scale-95"
+              >
+                <FileText size={13} />
+                Ouvrir la note
+              </button>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};

architectural-grid/src/components/InsightsView.tsx

@@ -0,0 +1,482 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { 
+  Network, 
+  Lightbulb, 
+  Layers, 
+  Sparkles, 
+  ArrowRight, 
+  RefreshCw,
+  Trophy,
+  Zap,
+  Tag,
+  Link as LinkIcon,
+  Menu,
+  FileText,
+  AlertCircle,
+  Clock,
+  ChevronRight,
+  TrendingUp,
+  Sliders,
+  CheckCircle2,
+  Lock
+} from 'lucide-react';
+import { Note, NoteCluster, BridgeNote, ConnectionSuggestion } from '../types';
+import { runClustering, detectBridges, calculateCentroid, getMostCentralNoteTitles } from '../services/clusteringService';
+import { nameCluster, suggestBridgeIdeas } from '../services/geminiService';
+import { NetworkGraph } from './NetworkGraph';
+
+interface InsightsViewProps {
+  notes: Note[];
+  onUpdateNotes: (updatedNotes: Note[]) => void;
+  onNoteSelect: (noteId: string) => void;
+  onOpenSidebar?: () => void;
+}
+
+export const InsightsView: React.FC<InsightsViewProps> = ({ 
+  notes, 
+  onUpdateNotes,
+  onNoteSelect,
+  onOpenSidebar
+}) => {
+  const [isCalculating, setIsCalculating] = useState(false);
+  const [clusters, setClusters] = useState<NoteCluster[]>([]);
+  const [bridgeNotes, setBridgeNotes] = useState<BridgeNote[]>([]);
+  const [suggestions, setSuggestions] = useState<ConnectionSuggestion[]>([]);
+  const [selectedClusterId, setSelectedClusterId] = useState<string | null>(null);
+  
+  // Mobile responsive view selector
+  const [viewMode, setViewMode] = useState<'graph' | 'dashboard'>('dashboard');
+
+  // Interactive automatic recalculation parameters simulator / status
+  const [lastSyncTime, setLastSyncTime] = useState<string>(() => {
+    return new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
+  });
+  
+  // Track changes to notes since last calculation to show a conditions indicator
+  const [notesModifiedCount, setNotesModifiedCount] = useState(0);
+
+  // Monitor edits to emulate the state "Recalcul quotidien planifié" or condition (>10 notes modified)
+  useEffect(() => {
+    // Whenever notes length or contents change, we simulate a tally
+    setNotesModifiedCount(prev => Math.min(prev + 1, 12));
+  }, [notes.length]);
+
+  const performAnalysis = async () => {
+    setIsCalculating(true);
+    try {
+      // 1. Run clustering (DBSCAN acting on density with outlier filtering, label -1 is outlier)
+      const { clusters: newClusters } = runClustering(notes);
+      
+      // 2. Name clusters (find the 5 notes closest to each cluster's centroid vector)
+      const namedClusters = await Promise.all(newClusters.map(async (c) => {
+          const centroid = calculateCentroid(c.noteIds, notes);
+          // Find the 5 most central notes (closest to the cluster centroid by cosine similarity)
+          const clusterNoteSummaries = getMostCentralNoteTitles(c.noteIds, centroid, notes, 5);
+          
+          const name = await nameCluster(clusterNoteSummaries);
+          
+          return { ...c, name, centroid };
+      }));
+
+      // 3. Update notes with cluster IDs
+      const updatedNotes = notes.map(n => {
+          const cluster = namedClusters.find(c => c.noteIds.includes(n.id));
+          return { ...n, clusterId: cluster?.id };
+      });
+      onUpdateNotes(updatedNotes);
+
+      // 4. Detect bridges (notes exhibiting similarity > 0.5 to >= 2 clusters)
+      const bridges = detectBridges(updatedNotes, namedClusters);
+
+      // 5. Build suggestions for unconnected cluster pairs
+      // A pair is unconnected if there are no existing bridge notes linking them
+      const newSuggestions: ConnectionSuggestion[] = [];
+      if (namedClusters.length >= 2) {
+          const unconnectedPairs: { cA: NoteCluster; cB: NoteCluster }[] = [];
+          
+          for (let i = 0; i < namedClusters.length; i++) {
+              for (let j = i + 1; j < namedClusters.length; j++) {
+                  const cA = namedClusters[i];
+                  const cB = namedClusters[j];
+                  
+                  // Check if any bridge note connects these two clusters
+                  const hasBridge = bridges.some(b => 
+                      b.connectedClusterIds.includes(cA.id) && b.connectedClusterIds.includes(cB.id)
+                  );
+                  
+                  if (!hasBridge) {
+                      unconnectedPairs.push({ cA, cB });
+                  }
+              }
+          }
+
+          // Generate bridge suggestions for the top 3 unconnected pairs
+          for (let k = 0; k < Math.min(unconnectedPairs.length, 3); k++) {
+              const { cA, cB } = unconnectedPairs[k];
+              const cA_notes = updatedNotes.filter(n => cA.noteIds.includes(n.id)).map(n => n.title).slice(0, 3).join(', ');
+              const cB_notes = updatedNotes.filter(n => cB.noteIds.includes(n.id)).map(n => n.title).slice(0, 3).join(', ');
+
+              const bridgeIdeas = await suggestBridgeIdeas(cA.name, cB.name, cA_notes, cB_notes);
+              bridgeIdeas.forEach((idea, idx) => {
+                  newSuggestions.push({
+                      id: `suggestion-${cA.id}-${cB.id}-${idx}`,
+                      ...idea,
+                      clusterAId: cA.id,
+                      clusterBId: cB.id
+                  });
+              });
+          }
+      }
+
+      setClusters(namedClusters);
+      setBridgeNotes(bridges);
+      setSuggestions(newSuggestions);
+      setLastSyncTime(new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }));
+      setNotesModifiedCount(0); // Reset modified counter upon successful clustering recalculation
+    } catch (error) {
+      console.error("Analysis failed:", error);
+    } finally {
+      setIsCalculating(false);
+    }
+  };
+
+  useEffect(() => {
+    if (notes.some(n => n.embedding) && clusters.length === 0) {
+        performAnalysis();
+    }
+  }, [notes]);
+
+  const bridgeList = useMemo(() => {
+    return bridgeNotes.map(b => {
+        const note = notes.find(n => n.id === b.noteId);
+        return { ...b, title: note?.title || 'Note de passage' };
+    });
+  }, [bridgeNotes, notes]);
+
+  // Compute isolated clusters (ones with no bridge notes spanning to them)
+  const isolatedClusters = useMemo(() => {
+    const networkedClusterIds = new Set(bridgeNotes.flatMap(b => b.connectedClusterIds));
+    return clusters.filter(c => !networkedClusterIds.has(c.id));
+  }, [clusters, bridgeNotes]);
+
+  // Find currently selected cluster info for the zoom drilldown list
+  const selectedCluster = useMemo(() => {
+    return clusters.find(c => c.id === selectedClusterId);
+  }, [clusters, selectedClusterId]);
+
+  const selectedClusterNotes = useMemo(() => {
+    if (!selectedCluster) return [];
+    return notes.filter(n => selectedCluster.noteIds.includes(n.id));
+  }, [notes, selectedCluster]);
+
+  return (
+    <div className="h-full flex flex-col bg-[#F9F8F6] dark:bg-dark-paper overflow-hidden font-sans">
+        {/* Header with Mobile Drawer Trigger & Responsiveness Tab controls */}
+        <div className="p-6 sm:p-8 border-b border-border/20 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sticky top-0 bg-[#F9F8F6]/80 dark:bg-dark-paper/80 backdrop-blur-md z-30">
+            <div className="flex items-center gap-4">
+                {onOpenSidebar && (
+                     <button 
+                        onClick={onOpenSidebar}
+                        className="lg:hidden p-2 -ml-2 text-ink dark:text-dark-ink hover:bg-black/5 dark:hover:bg-white/5 rounded-lg transition-colors"
+                     >
+                        <Menu size={20} />
+                     </button>
+                )}
+                <div>
+                    <div className="flex items-center gap-3 mb-1">
+                        <div className="w-8 h-8 rounded-lg bg-ochre/10 flex items-center justify-center text-ochre">
+                            <Sparkles size={18} />
+                        </div>
+                        <h1 className="text-xl sm:text-2xl font-serif font-medium text-ink dark:text-dark-ink">Analyses & Cartographie</h1>
+                    </div>
+                    <p className="text-[10px] text-concrete tracking-[0.25em] uppercase font-bold">Modèles sémantiques & clusters de connaissances</p>
+                </div>
+            </div>
+
+            <div className="flex items-center justify-between sm:justify-end gap-3">
+                {/* Mobile Tab Switcher */}
+                <div className="flex lg:hidden p-1 bg-black/5 dark:bg-white/5 rounded-xl self-center shrink-0">
+                    <button 
+                      onClick={() => setViewMode('graph')}
+                      className={`px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider rounded-lg transition-all ${viewMode === 'graph' ? 'bg-white dark:bg-black text-ink shadow-sm' : 'text-concrete'}`}
+                    >
+                      Réseau Graphique
+                    </button>
+                    <button 
+                      onClick={() => setViewMode('dashboard')}
+                      className={`px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider rounded-lg transition-all ${viewMode === 'dashboard' ? 'bg-white dark:bg-black text-ink shadow-sm' : 'text-concrete'}`}
+                    >
+                      Analyses & Ponts
+                    </button>
+                </div>
+
+                <button 
+                    onClick={performAnalysis}
+                    disabled={isCalculating}
+                    className="flex items-center gap-2 px-5 py-2.5 bg-ink text-paper dark:bg-white dark:text-black rounded-full text-xs font-bold uppercase tracking-widest hover:scale-102 active:scale-98 transition-all disabled:opacity-50 shadow-sm"
+                >
+                    {isCalculating ? <RefreshCw size={13} className="animate-spin" /> : <RefreshCw size={13} />}
+                    {isCalculating ? 'Calcul...' : 'Re-analyser'}
+                </button>
+            </div>
+        </div>
+
+        <div className="flex-1 flex overflow-hidden">
+            {/* Left: Interactive Canvas Network Graph View */}
+            <div className={`flex-[1.4] p-6 relative ${viewMode === 'graph' ? 'block' : 'hidden lg:block'}`}>
+                 <NetworkGraph 
+                    notes={notes}
+                    clusters={clusters}
+                    bridgeNotes={bridgeNotes}
+                    onNoteSelect={onNoteSelect}
+                    selectedClusterId={selectedClusterId}
+                    onClusterSelect={setSelectedClusterId}
+                 />
+            </div>
+
+            {/* Right: Insight Dashboard Column */}
+            <div className={`flex-1 border-l border-border/20 flex flex-col h-full bg-[#fcfbfa] dark:bg-zinc-900/10 backdrop-blur-sm overflow-hidden ${viewMode === 'dashboard' ? 'flex' : 'hidden lg:flex'}`}>
+                <div className="p-6 sm:p-8 flex-1 overflow-y-auto custom-scrollbar space-y-10">
+                    
+                    {/* Active Cluster Inspection Drawer / Side Card */}
+                    <AnimatePresence>
+                        {selectedCluster && (
+                            <motion.div 
+                                initial={{ opacity: 0, y: -20 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                exit={{ opacity: 0, y: -20 }}
+                                className="p-6 rounded-2xl bg-white dark:bg-zinc-800 border-2 border-ochre/30 shadow-md relative overflow-hidden"
+                            >
+                                <div className="absolute top-0 left-0 w-2 h-full" style={{ backgroundColor: selectedCluster.color }} />
+                                <div className="flex items-center justify-between gap-4 mb-4">
+                                     <div className="space-y-1 pl-2">
+                                         <span className="text-[9px] font-bold uppercase tracking-widest text-ochre">Focus Cluster Activé</span>
+                                         <h3 className="text-lg font-serif font-semibold text-ink dark:text-dark-ink">{selectedCluster.name}</h3>
+                                     </div>
+                                     <button 
+                                         onClick={() => setSelectedClusterId(null)}
+                                         className="p-1 px-2.5 bg-black/5 dark:bg-white/5 hover:bg-black/10 text-xs font-bold rounded-lg uppercase tracking-wider transition-colors"
+                                     >
+                                         Fermer
+                                     </button>
+                                </div>
+
+                                <div className="pl-2 space-y-3">
+                                     <p className="text-xs text-concrete">Cet ensemble thématique réunit {selectedClusterNotes.length} notes complémentaires. Cliquez sur une note pour y accéder directement :</p>
+                                     <div className="space-y-2 max-h-[180px] overflow-y-auto custom-scrollbar pr-1">
+                                         {selectedClusterNotes.map(note => (
+                                             <button 
+                                                 key={note.id}
+                                                 onClick={() => onNoteSelect(note.id)}
+                                                 className="w-full text-left p-2.5 rounded-lg bg-black/5 hover:bg-black/10 dark:bg-white/5 dark:hover:bg-white/10 text-xs font-medium text-ink dark:text-dark-ink flex items-center justify-between gap-3 group transition-all"
+                                             >
+                                                 <span className="truncate group-hover:translate-x-1 transition-transform">{note.title || 'Note sans titre'}</span>
+                                                 <ChevronRight size={12} className="text-concrete" />
+                                             </button>
+                                         ))}
+                                     </div>
+                                </div>
+                            </motion.div>
+                        )}
+                    </AnimatePresence>
+
+                    {/* Stats Highlights Header */}
+                    <div className="grid grid-cols-2 gap-4">
+                        <div className="p-5 rounded-2xl bg-white dark:bg-zinc-800/40 border border-border/40 shadow-sm flex flex-col justify-between">
+                            <div className="flex items-center gap-2 text-indigo-500 mb-2">
+                                <Layers size={14} />
+                                <span className="text-[10px] font-bold uppercase tracking-widest">Clusters Actifs</span>
+                            </div>
+                            <div>
+                                <div className="text-xl sm:text-2xl font-serif font-semibold text-ink dark:text-dark-ink">{clusters.length}</div>
+                                <p className="text-[9px] text-concrete font-medium uppercase mt-1">Détectés sans à priori</p>
+                            </div>
+                        </div>
+                        <div className="p-5 rounded-2xl bg-white dark:bg-zinc-800/40 border border-border/40 shadow-sm flex flex-col justify-between">
+                            <div className="flex items-center gap-2 text-ochre mb-2">
+                                <Trophy size={14} />
+                                <span className="text-[10px] font-bold uppercase tracking-widest">Notes-Ponts</span>
+                            </div>
+                            <div>
+                                <div className="text-xl sm:text-2xl font-serif font-semibold text-ink dark:text-dark-ink">{bridgeNotes.length}</div>
+                                <p className="text-[9px] text-concrete font-medium uppercase mt-1">Passerelles d'idées</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* NEW SECTION: Auto Recalculator Control Dashboard Section */}
+                    <section className="p-5 rounded-2xl bg-white dark:bg-zinc-800 border border-border/40 shadow-sm space-y-4">
+                        <div className="flex items-center justify-between gap-4">
+                             <div className="flex items-center gap-2">
+                                 <Sliders size={15} className="text-ochre" />
+                                 <h4 className="text-[11px] font-black uppercase tracking-[0.2em] text-ink dark:text-dark-ink">Système de Recalcul</h4>
+                             </div>
+                             <span className="flex items-center gap-1 text-[9.5px] font-bold text-emerald-500 uppercase">
+                                 <CheckCircle2 size={11} /> Synchronisé
+                             </span>
+                        </div>
+                        
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
+                             <div className="space-y-1">
+                                  <span className="text-[9px] text-concrete block">CRON PLANIFIÉ</span>
+                                  <p className="text-xs text-ink dark:text-dark-ink font-semibold flex items-center gap-1.5">
+                                      <Clock size={12} className="opacity-50" /> Quotidien (04:00)
+                                  </p>
+                             </div>
+                             <div className="space-y-1">
+                                  <span className="text-[9px] text-concrete block">DERNIÈRE SYNCHRONISATION</span>
+                                  <p className="text-xs text-ink dark:text-dark-ink font-bold font-mono">
+                                      Aujourd'hui, {lastSyncTime}
+                                  </p>
+                             </div>
+                        </div>
+
+                        {/* Recalcul Trigger Metrics */}
+                        <div className="pt-2 border-t border-border/10 space-y-3">
+                             <div className="space-y-1">
+                                  <div className="flex justify-between items-center text-[10px]">
+                                       <span className="text-concrete">Notes éditées depuis recul :</span>
+                                       <span className="font-bold font-mono text-ink dark:text-dark-ink">{notesModifiedCount} / 10 modifs</span>
+                                  </div>
+                                  <div className="h-1.5 w-full bg-black/5 dark:bg-white/5 rounded-full overflow-hidden">
+                                       <motion.div 
+                                          className="h-full bg-ochre/70"
+                                          initial={{ width: 0 }}
+                                          animate={{ width: `${(notesModifiedCount / 10) * 100}%` }}
+                                          transition={{ duration: 0.5 }}
+                                       />
+                                  </div>
+                                  <span className="text-[8px] text-concrete italic block">Le recalcul incrémental se déclenche automatiquement si modification de {'>'} 10 notes ou variation d'embeddings {'>'} 5%.</span>
+                             </div>
+                        </div>
+                    </section>
+
+                    {/* Isolated Clusters List */}
+                    <section className="space-y-4">
+                         <div className="flex items-center justify-between gap-4 px-1">
+                             <div className="flex items-center gap-2">
+                                 <AlertCircle size={15} className="text-rose-400 opacity-80" />
+                                 <h3 className="text-xs font-bold uppercase tracking-[0.2em] text-ink dark:text-dark-ink">Clusters Isolés ({isolatedClusters.length})</h3>
+                             </div>
+                             <span className="text-[9px] text-concrete italic">Sans points d'accroche</span>
+                         </div>
+                         <div className="space-y-2">
+                             {isolatedClusters.map(c => (
+                                 <motion.div 
+                                     key={c.id}
+                                     whileHover={{ y: -1 }}
+                                     onClick={() => setSelectedClusterId(c.id)}
+                                     className="p-3.5 rounded-xl bg-white dark:bg-zinc-800 border border-border/30 hover:border-black/10 flex items-center justify-between cursor-pointer"
+                                 >
+                                     <div className="flex items-center gap-2.5">
+                                         <div className="w-2 h-2 rounded-full" style={{ backgroundColor: c.color }} />
+                                         <span className="text-xs font-medium text-ink dark:text-dark-ink">{c.name}</span>
+                                     </div>
+                                     <span className="text-[10px] text-rose-500 font-semibold uppercase tracking-wider bg-rose-500/5 px-2.5 py-0.5 rounded-full border border-rose-500/10">
+                                         Non connecté
+                                     </span>
+                                 </motion.div>
+                             ))}
+                             {isolatedClusters.length === 0 && (
+                                 <div className="p-4 bg-white dark:bg-zinc-800 rounded-xl text-xs text-concrete text-center italic border border-border/20">
+                                      Tous les clusters thématiques sont liés par au moins un point de passage sémantique !
+                                 </div>
+                             )}
+                         </div>
+                    </section>
+
+                    {/* Bridge Notes Section */}
+                    <section className="space-y-4">
+                         <div className="flex items-center gap-2 px-1">
+                            <Zap size={16} className="text-ochre" />
+                            <h3 className="text-xs font-bold uppercase tracking-[0.2em] text-ink dark:text-dark-ink">Notes-Ponts Influentes</h3>
+                         </div>
+                         <div className="space-y-3">
+                            {bridgeList.map(bridge => (
+                                <motion.div 
+                                    key={bridge.noteId}
+                                    whileHover={{ x: 4 }}
+                                    onClick={() => onNoteSelect(bridge.noteId)}
+                                    className="p-4 rounded-xl bg-white dark:bg-zinc-800 border border-border/30 hover:border-ochre/40 hover:shadow-sm transition-all cursor-pointer group"
+                                >
+                                    <div className="flex items-center justify-between mb-2 gap-4">
+                                        <h4 className="text-xs font-semibold text-ink dark:text-dark-ink truncate flex-1 group-hover:text-ochre transition-colors">{bridge.title}</h4>
+                                        <span className="text-[9.5px] font-bold text-ochre bg-ochre/5 border border-ochre/10 px-2.5 py-0.5 rounded-full">
+                                            Lien : {(bridge.bridgeScore * 100).toFixed(0)}%
+                                        </span>
+                                    </div>
+                                    <div className="flex flex-wrap gap-2 pt-1.5 border-t border-black/5 dark:border-white/5">
+                                         {bridge.connectedClusterIds.map(cid => {
+                                             const c = clusters.find(cl => cl.id === cid);
+                                             return (
+                                                <div 
+                                                    key={cid} 
+                                                    onClick={(e) => {
+                                                        e.stopPropagation();
+                                                        setSelectedClusterId(cid);
+                                                    }}
+                                                    className="flex items-center gap-1.5 px-2 py-0.5 bg-black/[0.02] dark:bg-white/[0.02] border border-border/30 rounded-md hover:border-concrete/40 transition-colors"
+                                                >
+                                                    <div className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: c?.color }} />
+                                                    <span className="text-[9.5px] text-concrete font-medium uppercase tracking-wider">{c?.name}</span>
+                                                </div>
+                                             );
+                                         })}
+                                    </div>
+                                </motion.div>
+                            ))}
+                            {bridgeList.length === 0 && !isCalculating && (
+                                <div className="text-xs text-concrete italic text-center p-6 bg-white dark:bg-zinc-800 rounded-xl border border-border/20">
+                                    Aucune note-pont significative n'a été détectée. Créez des notes transversales pour forger de nouveaux liens créatifs.
+                                </div>
+                            )}
+                         </div>
+                    </section>
+
+                    {/* Connection Suggestions */}
+                    <section className="space-y-4">
+                         <div className="flex items-center gap-2 px-1">
+                            <Lightbulb size={16} className="text-indigo-500" />
+                            <h3 className="text-xs font-bold uppercase tracking-[0.2em] text-ink dark:text-dark-ink">Opportunités de Connexion (Ponts Suggérés)</h3>
+                         </div>
+                         <div className="space-y-4">
+                             {suggestions.map((s) => (
+                                 <div key={s.id} className="p-6 rounded-2xl bg-gradient-to-br from-indigo-500/5 via-transparent to-transparent border border-indigo-500/10 hover:border-indigo-500/20 transition-all shadow-sm">
+                                     <div className="flex items-center gap-3 mb-4">
+                                         <div className="flex -space-x-2 shrink-0">
+                                             <div className="w-5 h-5 rounded-full border-2 border-paper bg-indigo-500 flex items-center justify-center text-[9px] text-white font-bold">A</div>
+                                             <div className="w-5 h-5 rounded-full border-2 border-paper bg-ochre flex items-center justify-center text-[9px] text-white font-bold">B</div>
+                                         </div>
+                                         <span className="text-[9px] font-bold uppercase tracking-wider text-indigo-500/70 truncate">
+                                             Relier {clusters.find(c => c.id === s.clusterAId)?.name} &amp; {clusters.find(c => c.id === s.clusterBId)?.name}
+                                         </span>
+                                     </div>
+                                     <h4 className="text-sm font-semibold text-ink dark:text-dark-ink mb-2">{s.title}</h4>
+                                     <p className="text-xs text-muted-ink leading-relaxed mb-4">{s.description}</p>
+                                     <div className="p-3.5 bg-white/60 dark:bg-zinc-800 rounded-xl border border-border/20 text-[10.5px] italic text-concrete flex gap-2">
+                                         <Zap size={13} className="shrink-0 text-ochre mt-0.5" />
+                                         <span>{s.reasoning}</span>
+                                     </div>
+                                 </div>
+                             ))}
+                             {isCalculating && (
+                                  <div className="animate-pulse space-y-4">
+                                      {[1, 2].map(i => (
+                                          <div key={i} className="h-32 bg-indigo-500/5 rounded-2xl border border-indigo-500/10" />
+                                      ))}
+                                  </div>
+                              )}
+                              {!isCalculating && suggestions.length === 0 && (
+                                  <div className="text-xs text-concrete text-center italic p-6 border border-border/20 bg-white/40 dark:bg-zinc-800 rounded-xl">
+                                      Toutes vos thématiques clés sont déjà formidablement interconnectées !
+                                  </div>
+                              )}
+                         </div>
+                    </section>
+                </div>
+            </div>
+        </div>
+    </div>
+  );
+};

architectural-grid/src/components/LivingBlock.tsx

@@ -0,0 +1,194 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { Zap, HelpCircle, ArrowRight, RefreshCw, Unlink, AlertCircle } from 'lucide-react';
+import { Note } from '../types';
+
+interface LivingBlockProps {
+  sourceNoteId: string;
+  blockIndex: number;
+  allNotes: Note[];
+  hostNote: Note;
+  onUpdateNote: (updatedNote: Note) => void;
+  onOpenNote: (noteId: string) => void;
+  wsConnected: boolean;
+  broadcastLivingBlockUpdate?: (sourceNoteId: string, blockIndex: number, newText: string) => void;
+}
+
+export const LivingBlock: React.FC<LivingBlockProps> = ({
+  sourceNoteId,
+  blockIndex,
+  allNotes,
+  hostNote,
+  onUpdateNote,
+  onOpenNote,
+  wsConnected,
+  broadcastLivingBlockUpdate
+}) => {
+  const [pulse, setPulse] = useState(false);
+  const pulseRef = useRef<any>(null);
+
+  // Locate source note and actual paragraph text
+  const sourceNote = allNotes.find(n => n.id === sourceNoteId);
+  const paragraphs = sourceNote?.content.split('\n') || [];
+  const rawText = paragraphs[blockIndex];
+
+  // Store a local cache in standard state to support the "Source Deleted Snapshot" or local typing lag minimization
+  const [localText, setLocalText] = useState(rawText || "Contenu de l'extrait sémantique.");
+  const [isDeleted, setIsDeleted] = useState(!sourceNote || rawText === undefined);
+
+  // Sync state if source note or text updates from outside
+  useEffect(() => {
+    const isSourceMissing = !sourceNote || rawText === undefined;
+    setIsDeleted(isSourceMissing);
+    
+    if (!isSourceMissing && rawText !== localText) {
+      setLocalText(rawText);
+    }
+  }, [rawText, sourceNote]);
+
+  // Handle pulse notification when custom update event is received from socket
+  useEffect(() => {
+    const handlePulseEvent = (e: any) => {
+      if (e.detail && e.detail.sourceNoteId === sourceNoteId && e.detail.blockIndex === blockIndex) {
+        setPulse(true);
+        if (pulseRef.current) clearTimeout(pulseRef.current);
+        pulseRef.current = setTimeout(() => {
+          setPulse(false);
+        }, 1000);
+      }
+    };
+
+    window.addEventListener('living-block-pulse', handlePulseEvent);
+    return () => {
+      window.removeEventListener('living-block-pulse', handlePulseEvent);
+      if (pulseRef.current) clearTimeout(pulseRef.current);
+    };
+  }, [sourceNoteId, blockIndex]);
+
+  // Edit body text and stream to central note and websockets
+  const handleBodyTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newText = e.target.value;
+    setLocalText(newText);
+
+    if (sourceNote && !isDeleted) {
+      const updatedParagraphs = [...paragraphs];
+      updatedParagraphs[blockIndex] = newText;
+      const updatedSourceNote = {
+        ...sourceNote,
+        content: updatedParagraphs.join('\n')
+      };
+      // 1. Update state
+      onUpdateNote(updatedSourceNote);
+
+      // 2. Broadcast via WS connection to other terminals
+      if (broadcastLivingBlockUpdate) {
+        broadcastLivingBlockUpdate(sourceNoteId, blockIndex, newText);
+      }
+    }
+  };
+
+  // Convert Living Block to normal local text paragraph
+  const handleConvertLocalText = () => {
+    const hostParagraphs = hostNote.content.split('\n');
+    // Find matching shortcode index
+    const codeToSearch = `[[living-block:${sourceNoteId}:${blockIndex}]]`;
+    const targetIdx = hostParagraphs.findIndex(line => line.trim() === codeToSearch);
+    
+    if (targetIdx !== -1) {
+      hostParagraphs[targetIdx] = localText; // Replace code with snapped plain text
+      const updatedHostNote = {
+        ...hostNote,
+        content: hostParagraphs.join('\n')
+      };
+      onUpdateNote(updatedHostNote);
+    }
+  };
+
+  // Styling helpers
+  const borderStyle = isDeleted
+    ? 'border-rose-500/60 dark:border-red-900/60 bg-rose-50/20 dark:bg-rose-950/5'
+    : !wsConnected
+      ? 'border-amber-500 dark:border-amber-700 bg-amber-50/10 dark:bg-amber-950/5'
+      : pulse
+        ? 'border-blue-500 shadow-md shadow-blue-500/15 bg-blue-50/20 dark:bg-blue-950/10'
+        : 'border-blue-500/80 bg-blue-50/5 dark:bg-blue-950/5';
+
+  return (
+    <div className="group/block relative my-6">
+      <div 
+        className={`w-full rounded-xl border-l-3 border-y border-r border-[#E8E6E3] dark:border-zinc-800 transition-all duration-300 overflow-hidden ${borderStyle}`}
+      >
+        {/* Header (20px) */}
+        <div className="px-4.5 py-1.5 flex items-center justify-between bg-black/[0.015] dark:bg-white/[0.01] border-b border-black/[0.03] dark:border-white/[0.02]">
+          <div className="flex items-center gap-2">
+            {isDeleted ? (
+              <AlertCircle size={10} className="text-rose-500" />
+            ) : (
+              <Zap size={10} className={wsConnected ? 'text-blue-500 fill-blue-500/20' : 'text-amber-500'} />
+            )}
+            <span className="text-[10px] font-sans font-medium text-concrete hover:text-ink transition-colors cursor-default max-w-[200px] truncate">
+              {isDeleted ? "Source déconnectée" : sourceNote?.title || "Note connectée"}
+            </span>
+            
+            {/* Live syncing status badge */}
+            {isDeleted ? (
+              <span className="bg-rose-500/10 text-rose-600 dark:text-rose-400 font-bold px-1.5 py-0.2 rounded text-[8px] uppercase tracking-wider font-sans">
+                DÉCONNECTÉ
+              </span>
+            ) : wsConnected ? (
+              <span className="bg-blue-500/10 text-blue-600 dark:text-blue-400 font-bold px-1.5 py-0.2 rounded text-[8px] uppercase tracking-wider font-sans animate-pulse">
+                LIVE
+              </span>
+            ) : (
+              <span 
+                title="Synchronisation suspendue"
+                className="bg-amber-500/10 text-amber-600 dark:text-amber-400 font-bold px-1.5 py-0.2 rounded text-[8px] uppercase tracking-wider font-sans cursor-help"
+              >
+                HORS-LIGNE
+              </span>
+            )}
+          </div>
+
+          <div className="flex items-center gap-2">
+            {isDeleted ? (
+              <button
+                onClick={handleConvertLocalText}
+                className="text-[9.5px] font-bold text-rose-600 hover:text-rose-500 dark:text-rose-400 flex items-center gap-1 hover:underline transition-all"
+                title="Détacher le bloc et le transformer en texte normal dans cette note"
+              >
+                <Unlink size={10} />
+                Décharger le lien
+              </button>
+            ) : (
+              <>
+                {!wsConnected && (
+                  <span className="text-[9px] text-amber-600 dark:text-amber-400 font-medium italic cursor-default">
+                    Synchro suspendue
+                  </span>
+                )}
+                <button
+                  onClick={() => onOpenNote(sourceNoteId)}
+                  className="opacity-0 group-hover/block:opacity-100 flex items-center gap-1 text-[9.5px] font-extrabold text-blue-600 dark:text-blue-400 hover:underline transition-all"
+                >
+                  Ouvrir <ArrowRight size={10} />
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* Body content editable block */}
+        <div className="p-4 bg-blue-500/[0.015] dark:bg-blue-500/[0.005]">
+          <textarea
+            value={localText}
+            onChange={handleBodyTextChange}
+            disabled={isDeleted}
+            rows={Math.max(2, Math.ceil(localText.length / 75))}
+            className={`w-full bg-transparent border-none outline-none focus:ring-0 resize-none p-0 text-sm sm:text-base leading-relaxed text-ink/80 dark:text-dark-ink font-sans placeholder:text-concrete/20 ${isDeleted ? 'cursor-not-allowed opacity-80 select-all' : ''}`}
+            placeholder="Écrivez le contenu du bloc dynamique ici..."
+          />
+        </div>
+      </div>
+    </div>
+  );
+};

architectural-grid/src/components/NetworkGraph.tsx

@@ -8,13 +8,17 @@ interface NetworkGraphProps {
   clusters: NoteCluster[];
   bridgeNotes: BridgeNote[];
   onNoteSelect: (id: string) => void;
+  selectedClusterId: string | null;
+  onClusterSelect: (id: string | null) => void;
 }
 
 export const NetworkGraph: React.FC<NetworkGraphProps> = ({ 
   notes, 
   clusters, 
   bridgeNotes,
-  onNoteSelect
+  onNoteSelect,
+  selectedClusterId,
+  onClusterSelect
 }) => {
   const svgRef = useRef<SVGSVGElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -67,7 +71,7 @@ export const NetworkGraph: React.FC<NetworkGraphProps> = ({
         clusterId: n.clusterId!,
         color: cluster?.color || '#cbd5e1',
         isBridge,
-        radius: isBridge ? 12 : 8
+        radius: isBridge ? 13 : 8
       };
     });
 
@@ -85,10 +89,10 @@ export const NetworkGraph: React.FC<NetworkGraphProps> = ({
     }
 
     const simulation = d3.forceSimulation<D3Node>(nodes)
-      .force("link", d3.forceLink<D3Node, D3Link>(links).id(d => d.id).distance(100))
-      .force("charge", d3.forceManyBody().strength(-200))
+      .force("link", d3.forceLink<D3Node, D3Link>(links).id(d => d.id).distance(110))
+      .force("charge", d3.forceManyBody().strength(-220))
       .force("center", d3.forceCenter(width / 2, height / 2))
-      .force("collision", d3.forceCollide<D3Node>().radius(d => d.radius + 10));
+      .force("collision", d3.forceCollide<D3Node>().radius(d => d.radius + 12));
 
     // Links
     const link = g.append("g")
@@ -97,7 +101,14 @@ export const NetworkGraph: React.FC<NetworkGraphProps> = ({
       .enter()
       .append("line")
       .attr("stroke", "#e2e8f0")
-      .attr("stroke-opacity", 0.6)
+      .attr("stroke-opacity", (d: any) => {
+        if (!selectedClusterId) return 0.6;
+        const sId = typeof d.source === 'string' ? d.source : (d.source as any).id;
+        const tId = typeof d.target === 'string' ? d.target : (d.target as any).id;
+        const sourceNote = nodes.find(n => n.id === sId);
+        const targetNote = nodes.find(n => n.id === tId);
+        return (sourceNote?.clusterId === selectedClusterId && targetNote?.clusterId === selectedClusterId) ? 0.8 : 0.05;
+      })
       .attr("stroke-width", 1);
 
     // Nodes
@@ -113,12 +124,18 @@ export const NetworkGraph: React.FC<NetworkGraphProps> = ({
         .on("drag", dragged)
         .on("end", dragended) as any);
 
+    // Node opacities based on focus
+    node.attr("opacity", d => {
+      if (!selectedClusterId) return 1;
+      return d.clusterId === selectedClusterId ? 1 : 0.15;
+    });
+
     node.append("circle")
       .attr("r", d => d.radius)
       .attr("fill", d => d.color)
       .attr("stroke", d => d.isBridge ? "#D4AF37" : "#fff")
-      .attr("stroke-width", d => d.isBridge ? 3 : 2)
-      .style("filter", d => d.isBridge ? "drop-shadow(0 0 4px rgba(212, 175, 55, 0.4))" : "none");
+      .attr("stroke-width", d => d.isBridge ? 3.5 : 2)
+      .style("filter", d => d.isBridge ? "drop-shadow(0 0 6px rgba(212, 175, 55, 0.6))" : "none");
 
     node.append("text")
       .attr("dy", d => d.radius + 14)
@@ -137,6 +154,34 @@ export const NetworkGraph: React.FC<NetworkGraphProps> = ({
         .attr("transform", d => `translate(${d.x},${d.y})`);
     });
 
+    // Zoom transition on cluster highlight
+    if (selectedClusterId && width && height) {
+      const clusterNodes = nodes.filter(n => n.clusterId === selectedClusterId);
+      if (clusterNodes.length > 0) {
+        // Run a small tick count synchronously to find coordinates quickly if layout is starting
+        for (let i = 0; i < 50; ++i) simulation.tick();
+
+        const xCoords = clusterNodes.map(cn => cn.x).filter((x): x is number => x !== undefined);
+        const yCoords = clusterNodes.map(cn => cn.y).filter((y): y is number => y !== undefined);
+        
+        if (xCoords.length > 0 && yCoords.length > 0) {
+          const avgX = d3.mean(xCoords) || width / 2;
+          const avgY = d3.mean(yCoords) || height / 2;
+          
+          svg.transition()
+            .duration(800)
+            .call(
+              zoom.transform,
+              d3.zoomIdentity.translate(width / 2, height / 2).scale(1.4).translate(-avgX, -avgY)
+            );
+        }
+      }
+    } else {
+      svg.transition()
+        .duration(800)
+        .call(zoom.transform, d3.zoomIdentity);
+    }
+
     function dragstarted(event: any, d: D3Node) {
       if (!event.active) simulation.alphaTarget(0.3).restart();
       d.fx = d.x;
@@ -155,17 +200,36 @@ export const NetworkGraph: React.FC<NetworkGraphProps> = ({
     }
 
     return () => simulation.stop();
-  }, [notes, clusters, bridgeNotes, onNoteSelect]);
+  }, [notes, clusters, bridgeNotes, onNoteSelect, selectedClusterId]);
 
   return (
     <div ref={containerRef} className="w-full h-full bg-paper dark:bg-[#121212] rounded-3xl overflow-hidden border border-border/40 relative">
-        <div className="absolute top-6 left-6 z-10 flex flex-wrap gap-3 max-w-[300px]">
-             {clusters.map(c => (
-                 <div key={c.id} className="flex items-center gap-1.5 px-2 py-1 bg-white/80 dark:bg-white/5 backdrop-blur-sm border border-border rounded-full shadow-sm">
-                     <div className="w-2 h-2 rounded-full" style={{ backgroundColor: c.color }} />
-                     <span className="text-[9px] font-bold uppercase tracking-widest text-concrete whitespace-nowrap">{c.name}</span>
-                 </div>
-             ))}
+        <div className="absolute top-6 left-6 z-10 flex flex-wrap gap-2 max-w-[90%] sm:max-w-[450px]">
+             {clusters.map(c => {
+                 const isSelected = selectedClusterId === c.id;
+                 return (
+                  <button 
+                    key={c.id} 
+                    onClick={() => onClusterSelect?.(isSelected ? null : c.id)}
+                    className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full border shadow-sm transition-all text-[9px] font-bold uppercase tracking-wider
+                      ${isSelected 
+                        ? 'bg-ink text-white dark:bg-white dark:text-black border-ink dark:border-white scale-105 shadow-md' 
+                        : 'bg-white/90 dark:bg-black/80 text-concrete hover:text-ink hover:border-concrete/40 border-border'
+                      }`}
+                  >
+                      <div className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: c.color }} />
+                      <span>{c.name}</span>
+                  </button>
+                 );
+             })}
+             {selectedClusterId && (
+               <button 
+                 onClick={() => onClusterSelect?.(null)}
+                 className="px-3 py-1.5 rounded-full border border-rose-200 bg-rose-50 dark:bg-rose-950/20 dark:border-rose-900/40 text-rose-500 text-[9px] font-bold uppercase tracking-wider hover:bg-rose-100 transition-all shadow-sm"
+               >
+                 Réinitialiser focus
+               </button>
+             )}
         </div>
         <svg ref={svgRef} className="w-full h-full" />
     </div>

architectural-grid/src/components/NotebookInfoSidebar.tsx

@@ -0,0 +1,769 @@
+import React from 'react';
+import { 
+  X, 
+  Clock, 
+  Folder, 
+  Calendar, 
+  FileText, 
+  Hash, 
+  Network, 
+  CheckCircle2,
+  AlertCircle,
+  Copy,
+  Check,
+  History,
+  Info,
+  ChevronRight
+} from 'lucide-react';
+import { motion, AnimatePresence } from 'motion/react';
+import { Note, Carnet } from '../types';
+
+interface NotebookInfoSidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+  activeNote: Note | undefined;
+  notes: Note[];
+  carnets: Carnet[];
+  onOpenNote: (id: string) => void;
+  onUpdateNote?: (note: Note) => void;
+}
+
+export const NotebookInfoSidebar: React.FC<NotebookInfoSidebarProps> = ({
+  isOpen,
+  onClose,
+  activeNote,
+  notes = [],
+  carnets,
+  onOpenNote,
+  onUpdateNote
+}) => {
+  const [activeTab, setActiveTab] = React.useState<'infos' | 'versions' | 'relations'>('infos');
+  const [copiedId, setCopiedId] = React.useState(false);
+  const [hoveredOrbitNode, setHoveredOrbitNode] = React.useState<any | null>(null);
+
+  // For ID copy action
+  const handleCopyId = (id: string) => {
+    navigator.clipboard.writeText(id).then(() => {
+      setCopiedId(true);
+      setTimeout(() => setCopiedId(false), 2000);
+    });
+  };
+
+  // Explicit links for Network
+  const explicitWikiLinks = React.useMemo(() => [
+    { source: 'n1', target: 'n1-b' },
+    { source: 'n3', target: 'n3-b' },
+    { source: 'bridge-1', target: 'n1' },
+    { source: 'bridge-1', target: 'n2' },
+  ], []);
+
+  const CARNET_COLOR_PALETTE: { [key: string]: string } = {
+    '1': '#D97706', // Daily Notes - Warm Amber
+    '2': '#059669', // Project: Neo - Soft Emerald
+    '3': '#4F46E5', // Shared Docs - Rich Indigo
+    '4': '#0891B2', // Architecture Research - Clean Cyan
+    '5': '#EA580C', // History of Architecture - Deep Orange
+    '6': '#DB2777', // Modernism - Vibrant Rose
+    '7': '#65A30D', // Sustainable Design - Cool Lime
+  };
+
+  const DEFAULT_CARNET_COLOR = '#71717A';
+
+  // Network calculation values
+  const backlinks = React.useMemo(() => {
+    if (!activeNote || !notes) return [];
+    return notes.filter(n => {
+      if (n.id === activeNote.id || n.isDeleted) return false;
+      const isExplicit = explicitWikiLinks.some(link => 
+        (link.source === n.id && link.target === activeNote.id)
+      );
+      const isContentLink = n.content.toLowerCase().includes(`[[${activeNote.title.toLowerCase()}]]`);
+      return isExplicit || isContentLink;
+    });
+  }, [activeNote, notes, explicitWikiLinks]);
+
+  const outboundLinks = React.useMemo(() => {
+    if (!activeNote || !notes) return [];
+    return notes.filter(n => {
+      if (n.id === activeNote.id || n.isDeleted) return false;
+      const isExplicit = explicitWikiLinks.some(link => 
+        (link.source === activeNote.id && link.target === n.id)
+      );
+      const isContentLink = activeNote.content.toLowerCase().includes(`[[${n.title.toLowerCase()}]]`);
+      return isExplicit || isContentLink;
+    });
+  }, [activeNote, notes, explicitWikiLinks]);
+
+  const unlinkedMentions = React.useMemo(() => {
+    if (!activeNote || !notes) return [];
+    return notes.filter(n => {
+      if (n.id === activeNote.id || n.isDeleted) return false;
+      const isLinked = [...backlinks, ...outboundLinks].some(link => link.id === n.id);
+      if (isLinked) return false;
+      return n.content.toLowerCase().includes(activeNote.title.toLowerCase());
+    });
+  }, [activeNote, notes, backlinks, outboundLinks]);
+
+  const orbitNodes = React.useMemo(() => {
+    const list: { id: string; title: string; color: string; carnetName: string; relationship: 'backlink' | 'outbound' | 'mention' }[] = [];
+    
+    backlinks.forEach(n => {
+      const carnet = carnets.find(c => c.id === n.carnetId);
+      list.push({
+        id: n.id,
+        title: n.title,
+        color: CARNET_COLOR_PALETTE[n.carnetId] || DEFAULT_CARNET_COLOR,
+        carnetName: carnet?.name || 'Carnet',
+        relationship: 'backlink'
+      });
+    });
+
+    outboundLinks.forEach(n => {
+      const carnet = carnets.find(c => c.id === n.carnetId);
+      list.push({
+        id: n.id,
+        title: n.title,
+        color: CARNET_COLOR_PALETTE[n.carnetId] || DEFAULT_CARNET_COLOR,
+        carnetName: carnet?.name || 'Carnet',
+        relationship: 'outbound'
+      });
+    });
+
+    unlinkedMentions.forEach(n => {
+      const carnet = carnets.find(c => c.id === n.carnetId);
+      list.push({
+        id: n.id,
+        title: n.title,
+        color: CARNET_COLOR_PALETTE[n.carnetId] || DEFAULT_CARNET_COLOR,
+        carnetName: carnet?.name || 'Carnet',
+        relationship: 'mention'
+      });
+    });
+
+    return list.slice(0, 8);
+  }, [backlinks, outboundLinks, unlinkedMentions, carnets]);
+
+  const getSnippetWithHighlight = (content: string, term: string) => {
+    const index = content.toLowerCase().indexOf(term.toLowerCase());
+    if (index === -1) {
+      return <span>{content.substring(0, 80)}...</span>;
+    }
+    const start = Math.max(0, index - 40);
+    const end = Math.min(content.length, index + term.length + 40);
+    const before = content.substring(start, index);
+    const match = content.substring(index, index + term.length);
+    const after = content.substring(index + term.length, end);
+    return (
+      <span>
+        {start > 0 && "..."}
+        {before}
+        <mark className="bg-ochre/20 dark:bg-ochre/40 text-ochre px-1 py-0.5 rounded font-bold">{match}</mark>
+        {after}
+        {end < content.length && "..."}
+      </span>
+    );
+  };
+
+  // Safe time calculation helper (mocked cleanly to match image's 'il y a 12 jours' or standard dynamic calculations)
+  const getRelativeCreatedStr = (dateStr: string) => {
+    if (dateStr.includes('12 mai 2026')) return 'il y a 12 jours';
+    if (dateStr.includes('Oct 26')) return 'il y a 2h';
+    if (dateStr.includes('Oct 27')) return 'il y a 1j';
+    if (dateStr.includes('Oct 24')) return 'il y a 3j';
+    if (dateStr.includes('Oct 25')) return 'il y a 2j';
+    if (dateStr.includes('Oct 22')) return 'il y a 5j';
+    if (dateStr.includes('Oct 23')) return 'il y a 4j';
+    if (dateStr.includes('Oct 28')) return 'il y a 10 min';
+    return 'il y a quelques jours';
+  };
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.aside
+          initial={{ x: 380, opacity: 0 }}
+          animate={{ x: 0, opacity: 1 }}
+          exit={{ x: 380, opacity: 0 }}
+          transition={{ type: 'spring', damping: 26, stiffness: 210 }}
+          className="w-[380px] border-l border-border bg-[#F5F4F0] dark:bg-[#121212] shadow-xl flex flex-col z-50 shrink-0 relative h-full select-none"
+        >
+          {/* Header tabs row matching image style */}
+          <div className="flex items-center justify-between px-6 py-4 border-b border-border/50 bg-[#F5F4F0]/85 dark:bg-[#121212]/85 backdrop-blur-md">
+            <div className="flex gap-2.5">
+              {/* Infos tab */}
+              <button
+                onClick={() => setActiveTab('infos')}
+                className={`flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-xs font-bold tracking-wide transition-all duration-200 cursor-pointer
+                  ${activeTab === 'infos' 
+                    ? 'bg-ink text-paper dark:bg-white dark:text-ink shadow-sm' 
+                    : 'text-concrete hover:text-ink hover:bg-black/[0.03] dark:hover:bg-white/5'}`}
+              >
+                <CheckCircle2 size={13} className={activeTab === 'infos' ? 'opacity-100' : 'opacity-70'} />
+                <span>Infos</span>
+              </button>
+
+              {/* Versions tab */}
+              <button
+                onClick={() => setActiveTab('versions')}
+                className={`flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-xs font-bold tracking-wide transition-all duration-200 cursor-pointer
+                  ${activeTab === 'versions' 
+                    ? 'bg-ink text-paper dark:bg-white dark:text-ink shadow-sm' 
+                    : 'text-concrete hover:text-ink hover:bg-black/[0.03] dark:hover:bg-white/5'}`}
+              >
+                <Clock size={13} className={activeTab === 'versions' ? 'opacity-100' : 'opacity-70'} />
+                <span>Versions</span>
+              </button>
+
+              {/* Network / Relations tab */}
+              <button
+                onClick={() => setActiveTab('relations')}
+                className={`flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-xs font-bold tracking-wide transition-all duration-200 cursor-pointer
+                  ${activeTab === 'relations' 
+                    ? 'bg-ink text-paper dark:bg-white dark:text-ink shadow-sm' 
+                    : 'text-concrete hover:text-ink hover:bg-black/[0.03] dark:hover:bg-white/5'}`}
+              >
+                <Network size={13} className={activeTab === 'relations' ? 'opacity-100' : 'opacity-70'} />
+                <span>Réseau</span>
+              </button>
+            </div>
+
+            <button
+              onClick={onClose}
+              className="p-1 px-1.5 hover:bg-black/5 dark:hover:bg-white/5 rounded-full text-concrete hover:text-ink transition-all cursor-pointer"
+            >
+              <X size={18} />
+            </button>
+          </div>
+
+          {/* Core scrollable content area */}
+          <div className="flex-1 overflow-y-auto p-6 custom-scrollbar space-y-6">
+            <AnimatePresence mode="wait">
+              {/* TABS - INFOS */}
+              {activeTab === 'infos' && (
+                <motion.div
+                  key="infos"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                  className="space-y-6 text-left"
+                >
+                  {activeNote ? (
+                    <div className="space-y-6 font-sans">
+                      {/* Calculated Stats */}
+                      {(() => {
+                        const wordCount = activeNote.content.trim() ? activeNote.content.trim().split(/\s+/).filter(Boolean).length : 0;
+                        const charCount = activeNote.content.length;
+                        const lineCount = activeNote.content.trim() ? activeNote.content.split('\n').length : 0;
+                        
+                        // Count math equations
+                        const matchesBigMath = (activeNote.content.match(/\$\$[\s\S]*?\$\$/g) || []).length;
+                        const matchesInlineMath = (activeNote.content.match(/\$[^\$\n]+?\$/g) || []).length;
+                        const equationCount = matchesBigMath + matchesInlineMath;
+                        
+                        // Count graph relations or internal visual blocks
+                        const matchesLivingBlocks = (activeNote.content.match(/\[\[living-block:.*?\]\]/g) || []).length;
+                        const graphCount = orbitNodes.length + matchesLivingBlocks;
+                        
+                        // Count images
+                        const matchesMarkdownImages = (activeNote.content.match(/!\[.*?\]\(.*?\)/g) || []).length;
+                        const matchesHtmlImages = (activeNote.content.match(/<img\s+/g) || []).length;
+                        const imageCount = matchesMarkdownImages + matchesHtmlImages;
+
+                        return (
+                          <>
+                            {/* Grid Stats */}
+                            <div className="grid grid-cols-2 gap-4">
+                              <div className="bg-white/95 dark:bg-black/40 border border-border/50 rounded-2xl p-5 text-center flex flex-col justify-between min-h-[105px] shadow-sm hover:shadow-md transition-all duration-300">
+                                <span className="block text-4xl font-medium font-serif text-ink dark:text-white tracking-tight leading-none">
+                                  {wordCount}
+                                </span>
+                                <span className="text-[9.5px] font-bold uppercase tracking-[0.25em] text-muted-ink block mt-2">Mots</span>
+                              </div>
+                              <div className="bg-white/95 dark:bg-black/40 border border-border/50 rounded-2xl p-5 text-center flex flex-col justify-between min-h-[105px] shadow-sm hover:shadow-md transition-all duration-300">
+                                <span className="block text-4xl font-medium font-serif text-ink dark:text-white tracking-tight leading-none">
+                                  {charCount}
+                                </span>
+                                <span className="text-[9.5px] font-bold uppercase tracking-[0.25em] text-muted-ink block mt-2">Caractères</span>
+                              </div>
+                            </div>
+
+                            {/* Secondary Detailed Counts Widget */}
+                            <div className="grid grid-cols-4 gap-1.5 bg-white/70 dark:bg-black/30 border border-border/50 rounded-2xl p-4 text-center shadow-xs">
+                              <div className="space-y-1">
+                                <span className="block text-base font-serif font-bold text-ink dark:text-white">{lineCount}</span>
+                                <span className="block text-[8px] font-extrabold uppercase tracking-widest text-concrete">Lignes</span>
+                              </div>
+                              <div className="space-y-1 border-l border-border/40">
+                                <span className="block text-base font-serif font-bold text-ink dark:text-white">{equationCount}</span>
+                                <span className="block text-[8px] font-extrabold uppercase tracking-widest text-concrete">Équations</span>
+                              </div>
+                              <div className="space-y-1 border-l border-border/40">
+                                <span className="block text-base font-serif font-bold text-ink dark:text-white">{graphCount}</span>
+                                <span className="block text-[8px] font-extrabold uppercase tracking-widest text-concrete">Graphes</span>
+                              </div>
+                              <div className="space-y-1 border-l border-border/40">
+                                <span className="block text-base font-serif font-bold text-ink dark:text-white">{imageCount}</span>
+                                <span className="block text-[8px] font-extrabold uppercase tracking-widest text-concrete">Images</span>
+                              </div>
+                            </div>
+                          </>
+                        );
+                      })()}
+
+                      {/* Attribute Detail rows styled to 100% exact layout matching the attached image */}
+                      <div className="space-y-5 bg-white/40 dark:bg-zinc-950/20 border border-border/50 rounded-2xl p-5 text-left select-text">
+                        {/* Carnet attribute */}
+                        <div className="flex items-start gap-4 pb-4 border-b border-border/30">
+                          <div className="p-2.5 bg-white dark:bg-neutral-900 border border-border/60 rounded-xl text-concrete shrink-0">
+                            <Folder size={15} />
+                          </div>
+                          <div className="space-y-0.5">
+                            <span className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink block">Carnet</span>
+                            <span className="text-sm font-semibold text-ink dark:text-white">
+                              {carnets.find(c => c.id === activeNote.carnetId)?.name || "Général"}
+                            </span>
+                          </div>
+                        </div>
+
+                        {/* Type attribute */}
+                        <div className="flex items-start gap-4 pb-4 border-b border-border/30">
+                          <div className="p-2.5 bg-white dark:bg-neutral-900 border border-border/60 rounded-xl text-concrete shrink-0">
+                            <FileText size={15} />
+                          </div>
+                          <div className="space-y-0.5">
+                            <span className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink block">Type</span>
+                            <span className="text-sm font-semibold text-ink dark:text-white">
+                              {activeNote.isClipped ? 'Source Web' : 'Texte enrichi'}
+                            </span>
+                          </div>
+                        </div>
+
+                        {/* Créé le attribute */}
+                        <div className="flex items-start gap-4 pb-4 border-b border-border/30">
+                          <div className="p-2.5 bg-white dark:bg-neutral-900 border border-border/60 rounded-xl text-concrete shrink-0">
+                            <Calendar size={15} />
+                          </div>
+                          <div className="space-y-0.5">
+                            <span className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink block">Créée le</span>
+                            <span className="text-sm font-semibold text-ink dark:text-white block">
+                              {activeNote.date || "12 mai 2026"}
+                            </span>
+                            <span className="text-[10.5px] text-muted-ink block">
+                              {getRelativeCreatedStr(activeNote.date || "12 mai 2026")}
+                            </span>
+                          </div>
+                        </div>
+
+                        {/* Modifiée attribute */}
+                        <div className="flex items-start gap-4 pb-4 border-b border-border/30">
+                          <div className="p-2.5 bg-white dark:bg-neutral-900 border border-border/60 rounded-xl text-concrete shrink-0">
+                            <Clock size={15} />
+                          </div>
+                          <div className="space-y-0.5">
+                            <span className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink block">Modifiée</span>
+                            <span className="text-sm font-semibold text-ink dark:text-white block">
+                              {activeNote.date || "12 mai 2026"} • 15:58
+                            </span>
+                            <span className="text-[10.5px] text-muted-ink block">
+                              {getRelativeCreatedStr(activeNote.date || "12 mai 2026")}
+                            </span>
+                          </div>
+                        </div>
+
+                        {/* ID attribute */}
+                        <div className="flex items-start gap-4">
+                          <div className="p-2.5 bg-white dark:bg-neutral-900 border border-border/60 rounded-xl text-concrete shrink-0">
+                            <Hash size={15} />
+                          </div>
+                          <div className="space-y-0.5 min-w-0 flex-1">
+                            <span className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink block">ID</span>
+                            <div className="flex items-center gap-1.5 min-w-0">
+                              <span className="text-[11px] font-mono text-muted-ink truncate block select-all" title={activeNote.id}>
+                                {activeNote.id}
+                              </span>
+                              <button 
+                                onClick={() => handleCopyId(activeNote.id)}
+                                className="p-1 hover:bg-slate-100 dark:hover:bg-neutral-800 rounded text-concrete shrink-0 transition-all cursor-pointer"
+                                title="Copier l'ID de la note"
+                              >
+                                {copiedId ? <Check size={11} className="text-emerald-500" /> : <Copy size={11} />}
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Snapshots Toggle */}
+                      <div className="bg-white/50 dark:bg-neutral-900/40 border border-border/50 rounded-2xl p-5 flex items-center justify-between group hover:shadow-sm transition-all duration-300">
+                        <div className="flex items-center gap-3.5 text-left">
+                          <div className="p-2.5 bg-paper dark:bg-neutral-850 rounded-xl text-ochre border border-ochre/10">
+                            <History size={16} />
+                          </div>
+                          <div>
+                            <h4 className="text-xs font-bold text-ink dark:text-white">Snapshots Actifs</h4>
+                            <p className="text-[10px] text-muted-ink leading-relaxed">Suivi d'historique automatique</p>
+                          </div>
+                        </div>
+                        <label className="relative inline-flex items-center cursor-pointer shrink-0">
+                          <input 
+                            type="checkbox" 
+                            className="sr-only peer" 
+                            checked={activeNote.isVersioningEnabled !== false}
+                            onChange={() => {
+                              onUpdateNote?.({
+                                ...activeNote,
+                                isVersioningEnabled: activeNote.isVersioningEnabled === false ? true : false
+                              });
+                            }}
+                          />
+                          <div className="w-10 h-5.5 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[18px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-3.5 after:w-3.5 after:transition-all duration-300 ease-in-out peer-checked:bg-ink dark:peer-checked:bg-white"></div>
+                        </label>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="text-center py-16 text-muted-ink/40">
+                      <Folder size={36} className="mx-auto mb-3 opacity-30 text-concrete" />
+                      <p className="text-xs font-serif italic">Veuillez sélectionner une note pour inspecter ses informations.</p>
+                    </div>
+                  )}
+                </motion.div>
+              )}
+
+              {/* TABS - VERSIONS */}
+              {activeTab === 'versions' && (
+                <motion.div
+                  key="versions"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                  className="space-y-6 text-left"
+                >
+                  <div className="flex items-center justify-between pl-1">
+                    <h4 className="text-[10px] uppercase tracking-[0.25em] font-bold text-muted-ink">Snapshots &amp; Versions</h4>
+                    <span className="text-[9px] font-mono text-muted-ink bg-black/5 dark:bg-white/5 px-2 py-0.5 rounded-full">
+                      {(activeNote?.versionHistory || []).length} Snapshots
+                    </span>
+                  </div>
+
+                  {activeNote ? (
+                    <div className="space-y-5">
+                      {activeNote.isVersioningEnabled !== false ? (
+                        <>
+                          {/* Banner to snap manual version */}
+                          <div className="p-4 bg-ochre/5 dark:bg-neutral-900 border border-ochre/20 rounded-xl space-y-3">
+                            <div className="text-left space-y-0.5">
+                              <span className="text-[10px] text-ochre uppercase font-bold tracking-widest block">Garnir l'historique</span>
+                              <p className="text-[10px] text-muted-ink leading-relaxed">Figer manuellement l'état actuel de la note.</p>
+                            </div>
+                            <button 
+                              onClick={() => {
+                                const newSnapshot = {
+                                  id: 'v-' + Date.now(),
+                                  title: activeNote.title,
+                                  content: activeNote.content,
+                                  timestamp: new Date().toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' }) + ' • ' + new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }),
+                                  size: activeNote.content.length
+                                };
+                                onUpdateNote?.({
+                                  ...activeNote,
+                                  versionHistory: [newSnapshot, ...(activeNote.versionHistory || [])]
+                                });
+                              }}
+                              className="w-full text-center py-2 bg-ink dark:bg-white hover:opacity-90 text-paper dark:text-ink text-[10px] uppercase tracking-widest font-bold rounded-lg transition-all shadow-sm cursor-pointer"
+                            >
+                              Figer un instant
+                            </button>
+                          </div>
+
+                          {/* Snapshot list */}
+                          <div className="space-y-3">
+                            {(activeNote.versionHistory || []).length > 0 ? (
+                              <div className="space-y-3 max-h-[440px] overflow-y-auto custom-scrollbar pr-1">
+                                {(activeNote.versionHistory || []).map((v) => (
+                                  <div 
+                                    key={v.id}
+                                    className="p-4 bg-white dark:bg-zinc-950 border border-border hover:border-accent/40 rounded-xl space-y-2.5 transition-all shadow-xs"
+                                  >
+                                    <div className="flex items-start justify-between gap-2">
+                                      <div className="space-y-0.5 text-left">
+                                        <span className="text-xs uppercase tracking-wide font-bold text-ink dark:text-white block truncate max-w-[190px]">
+                                          {v.title}
+                                        </span>
+                                        <span className="text-[9.5px] text-muted-ink block">{v.timestamp}</span>
+                                      </div>
+                                      <span className="text-[9px] font-mono text-muted-ink bg-slate-100 dark:bg-neutral-850 px-1.5 py-0.5 rounded">
+                                        {v.size >= 1024 ? (v.size / 1024).toFixed(1) + ' KB' : v.size + ' B'}
+                                      </span>
+                                    </div>
+
+                                    <div className="flex items-center justify-end gap-3.5 pt-2 border-t border-black/[0.03] dark:border-white/[0.02] text-[10px]">
+                                      <button 
+                                        onClick={() => {
+                                          alert(`Aperçu de la version "${v.title}" :\n\n${v.content || "Note vide"}`);
+                                        }}
+                                        className="text-muted-ink hover:text-ink transition-colors font-semibold"
+                                      >
+                                        Aperçu
+                                      </button>
+                                      <button 
+                                        onClick={() => {
+                                          if (window.confirm("Êtes-vous sûr de vouloir restaurer cette version ? Le contenu actuel sera archivé comme nouvelle version.")) {
+                                            const backupSnapshot = {
+                                              id: 'v-' + Date.now(),
+                                              title: activeNote.title,
+                                              content: activeNote.content,
+                                              timestamp: new Date().toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', year: 'numeric' }) + ' • ' + new Date().toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }),
+                                              size: activeNote.content.length
+                                            };
+                                            onUpdateNote?.({
+                                              ...activeNote,
+                                              title: v.title,
+                                              content: v.content,
+                                              versionHistory: [backupSnapshot, ...(activeNote.versionHistory || []).filter(h => h.id !== v.id)]
+                                            });
+                                          }
+                                        }}
+                                        className="text-ochre dark:text-ochre font-bold hover:underline"
+                                      >
+                                        Restaurer
+                                      </button>
+                                    </div>
+                                  </div>
+                                ))}
+                              </div>
+                            ) : (
+                              <div className="text-center py-16 px-6 border border-dashed border-border/80 bg-white/45 rounded-xl text-muted-ink/50">
+                                <Clock size={24} className="mx-auto mb-2 opacity-30 text-concrete" />
+                                <p className="text-[11px] font-medium leading-relaxed">Aucun snapshot enregistré pour le moment. Modifiez la note pour démarrer le suivi ou figez-en un manuellement.</p>
+                              </div>
+                            )}
+                          </div>
+                        </>
+                      ) : (
+                        <div className="text-center py-12 px-6 border-2 border-dashed border-border/60 rounded-2xl bg-amber-500/5 border-amber-500/10 text-amber-600 space-y-3">
+                          <AlertCircle size={28} className="mx-auto opacity-70" />
+                          <h5 className="font-bold text-xs uppercase tracking-wider">Suivi d'historique inactif</h5>
+                          <p className="text-[10px] leading-relaxed text-concrete">L'historique des versions est actuellement désactivé pour cette note spécifique. Pour l'activer, cochez l'option dans l'onglet "Infos".</p>
+                        </div>
+                      )}
+                    </div>
+                  ) : (
+                    <div className="text-center py-16 text-muted-ink/40">
+                      <Clock size={36} className="mx-auto mb-3 opacity-30 text-concrete" />
+                      <p className="text-xs font-serif italic">Veuillez sélectionner une note pour voir son historique de versions.</p>
+                    </div>
+                  )}
+                </motion.div>
+              )}
+
+              {/* TABS - RELATIONS (RESEAU) */}
+              {activeTab === 'relations' && (
+                <motion.div
+                  key="relations"
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                  className="space-y-6 text-left"
+                >
+                  <div className="flex items-center gap-2 mb-1">
+                    <div className="h-px flex-1 bg-border/40" />
+                    <h4 className="text-[10px] uppercase tracking-[0.25em] font-bold text-muted-ink whitespace-nowrap">Vue Graphe Locale</h4>
+                    <div className="h-px flex-1 bg-border/40" />
+                  </div>
+
+                  {activeNote ? (
+                    <>
+                      {/* Interactive Local Graph representation */}
+                      <div className="relative p-2 bg-white/80 dark:bg-black/30 border border-border/60 rounded-xl overflow-hidden shadow-inner flex flex-col items-center">
+                        <svg width="100%" height="220" viewBox="0 0 320 220" className="select-none font-sans">
+                          <defs>
+                            <filter id="glow-panel-sidebar-three" x="-20%" y="-20%" width="140%" height="140%">
+                              <feGaussianBlur stdDeviation="4" result="blur" />
+                              <feComposite in="SourceGraphic" in2="blur" operator="over" />
+                            </filter>
+                          </defs>
+
+                          {/* Dotted boundary */}
+                          <circle cx="160" cy="110" r="70" fill="none" stroke="#E2E8F0" strokeWidth="1" strokeDasharray="3,6" className="dark:stroke-neutral-800" />
+
+                          {/* Links */}
+                          {orbitNodes.map((node, i) => {
+                            const angle = i * (orbitNodes.length > 0 ? (2 * Math.PI) / orbitNodes.length : 0);
+                            const nx = 160 + 70 * Math.cos(angle);
+                            const ny = 110 + 62 * Math.sin(angle);
+                            return (
+                              <g key={node.id}>
+                                <line
+                                  x1="160"
+                                  y1="110"
+                                  x2={nx}
+                                  y2={ny}
+                                  stroke={node.relationship === 'mention' ? '#94A3B8' : '#A47148'}
+                                  strokeWidth={node.relationship === 'mention' ? 1.2 : 2}
+                                  strokeDasharray={node.relationship === 'mention' ? '3,3' : 'none'}
+                                  className="opacity-50 transition-all hover:opacity-100"
+                                />
+                                {node.relationship === 'outbound' && (
+                                  <polygon
+                                    points={`${160 + (nx - 160) * 0.75},${110 + (ny - 110) * 0.75} ${160 + (nx - 160) * 0.75 - 4},${110 + (ny - 110) * 0.75 - 4} ${160 + (nx - 160) * 0.75 - 4},${110 + (ny - 110) * 0.75 + 4}`}
+                                    transform={`rotate(${(angle * 180) / Math.PI}, ${160 + (nx - 160) * 0.75}, ${110 + (ny - 110) * 0.75})`}
+                                    fill="#A47148"
+                                    className="opacity-70"
+                                  />
+                                )}
+                                {node.relationship === 'backlink' && (
+                                  <polygon
+                                    points={`${160 + (nx - 160) * 0.3},${110 + (ny - 110) * 0.3} ${160 + (nx - 160) * 0.3 - 4},${110 + (ny - 110) * 0.3 - 4} ${160 + (nx - 160) * 0.3 - 4},${110 + (ny - 110) * 0.3 + 4}`}
+                                    transform={`rotate(${((angle + Math.PI) * 180) / Math.PI}, ${160 + (nx - 160) * 0.3}, ${110 + (ny - 110) * 0.3})`}
+                                    fill="#A47148"
+                                    className="opacity-70"
+                                  />
+                                )}
+                              </g>
+                            );
+                          })}
+
+                          {/* Center Node: Active Note */}
+                          <g>
+                            <circle
+                              cx="160"
+                              cy="110"
+                              r="15"
+                              fill="#A47148"
+                              className="stroke-white dark:stroke-black stroke-[3px] shadow transition-transform duration-300 hover:scale-110 active:scale-95 cursor-pointer"
+                            />
+                            <circle cx="160" cy="110" r="5" fill="#FFFFFF" />
+                          </g>
+
+                          {/* Orbit nodes */}
+                          {orbitNodes.map((node, i) => {
+                            const angle = i * (orbitNodes.length > 0 ? (2 * Math.PI) / orbitNodes.length : 0);
+                            const nx = 160 + 70 * Math.cos(angle);
+                            const ny = 110 + 62 * Math.sin(angle);
+                            const isHovered = hoveredOrbitNode?.id === node.id;
+                            return (
+                              <g 
+                                key={node.id}
+                                className="cursor-pointer group"
+                                onClick={() => onOpenNote(node.id)}
+                                onMouseEnter={() => setHoveredOrbitNode(node)}
+                                onMouseLeave={() => setHoveredOrbitNode(null)}
+                              >
+                                <circle
+                                  cx={nx}
+                                  cy={ny}
+                                  r={isHovered ? 11 : 8}
+                                  fill={node.color}
+                                  stroke={isHovered ? '#000000' : '#FFFFFF'}
+                                  strokeWidth={1.5}
+                                  className="transition-all duration-200 group-hover:shadow"
+                                />
+                                <text
+                                  x={nx}
+                                  y={ny + 15}
+                                  textAnchor="middle"
+                                  fontSize="8"
+                                  className="fill-concrete bg-white font-medium select-none pointer-events-none opacity-40 hover:opacity-100 transition-opacity"
+                                >
+                                  {node.title.substring(0, 10)}
+                                </text>
+                              </g>
+                            );
+                          })}
+                        </svg>
+
+                        <div className="absolute bottom-2 left-2 right-2 p-2 bg-white/90 dark:bg-black/95 rounded-lg border border-border/40 text-left min-h-[46px] select-text">
+                          {hoveredOrbitNode ? (
+                            <div className="animate-fadeIn">
+                              <div className="flex justify-between items-center text-[8px] text-muted-ink uppercase tracking-wider">
+                                <span>{hoveredOrbitNode.carnetName}</span>
+                                <span className="font-bold">
+                                  {hoveredOrbitNode.relationship === 'backlink' ? 'Lien Entrant' : hoveredOrbitNode.relationship === 'outbound' ? 'Lien Sortant' : 'Mention Simple'}
+                                </span>
+                              </div>
+                              <p className="font-bold text-ink dark:text-white truncate text-xs">{hoveredOrbitNode.title}</p>
+                              <p className="text-[9px] text-muted-ink italic">Cliquez pour ouvrir la note</p>
+                            </div>
+                          ) : (
+                            <div className="text-center py-1 text-muted-ink/60 text-[10px] font-medium leading-normal flex items-center justify-center gap-1.5">
+                              <Network size={12} className="text-muted-ink/40" />
+                              Survolez un nœud, cliquez pour ouvrir
+                            </div>
+                          )}
+                        </div>
+                      </div>
+
+                      {/* Explicit links listings with highlighting */}
+                      <div className="space-y-4 pt-2 font-sans text-left">
+                        {/* 1. Backlinks */}
+                        <div className="space-y-1.5">
+                          <h5 className="text-[10px] uppercase tracking-[0.18em] font-bold text-muted-ink">
+                            Liens Entrants ({backlinks.length})
+                          </h5>
+                          {backlinks.length > 0 ? (
+                            <div className="space-y-2 max-h-[160px] overflow-y-auto custom-scrollbar pr-1">
+                              {backlinks.map(n => (
+                                <div
+                                  key={n.id}
+                                  onClick={() => onOpenNote(n.id)}
+                                  className="p-3 bg-white dark:bg-zinc-950 border border-border hover:border-accent/40 rounded-xl cursor-pointer transition-all space-y-1.5 hover:shadow-sm"
+                                >
+                                  <div className="flex items-center justify-between text-muted-ink font-sans">
+                                    <span className="text-[9px] font-bold uppercase tracking-wider text-ink dark:text-white truncate max-w-[180px]">{n.title}</span>
+                                    <span className="text-[8px] bg-accent/5 text-accent/80 px-1.5 py-0.5 rounded-full font-bold uppercase tracking-tight">Réf</span>
+                                  </div>
+                                  <p className="text-[11px] text-ink/70 dark:text-white/70 italic leading-snug select-text">
+                                    {getSnippetWithHighlight(n.content, activeNote.title)}
+                                  </p>
+                                </div>
+                              ))}
+                            </div>
+                          ) : (
+                            <p className="text-[10px] text-muted-ink leading-normal italic bg-white/45 p-3 rounded-xl border border-border/40">Aucun lien entrant de type wiki [[lien]] pointant vers cette note.</p>
+                          )}
+                        </div>
+
+                        {/* 2. Outbound Links */}
+                        <div className="space-y-1.5">
+                          <h5 className="text-[10px] uppercase tracking-[0.18em] font-bold text-muted-ink">
+                            Liens Sortants ({outboundLinks.length})
+                          </h5>
+                          {outboundLinks.length > 0 ? (
+                            <div className="space-y-2 max-h-[160px] overflow-y-auto custom-scrollbar pr-1">
+                              {outboundLinks.map(n => (
+                                <div
+                                  key={n.id}
+                                  onClick={() => onOpenNote(n.id)}
+                                  className="p-3 bg-white dark:bg-zinc-950 border border-border hover:border-accent/40 rounded-xl cursor-pointer transition-all space-y-1.5 hover:shadow-sm"
+                                >
+                                  <div className="flex items-center justify-between text-muted-ink font-sans">
+                                    <span className="text-[9px] font-bold uppercase tracking-wider text-ink dark:text-white truncate max-w-[180px]">{n.title}</span>
+                                    <span className="text-[8px] bg-ochre/5 text-ochre/80 px-1.5 py-0.5 rounded-full font-bold uppercase tracking-tight">Vers</span>
+                                  </div>
+                                  <p className="text-[11px] text-ink/70 dark:text-white/70 italic leading-snug select-text">
+                                    {getSnippetWithHighlight(activeNote.content, n.title)}
+                                  </p>
+                                </div>
+                              ))}
+                            </div>
+                          ) : (
+                            <p className="text-[10px] text-muted-ink leading-normal italic bg-white/45 p-3 rounded-xl border border-border/40">Cette note ne pointe vers aucune autre note de type [[lien]].</p>
+                          )}
+                        </div>
+                      </div>
+                    </>
+                  ) : (
+                    <div className="text-center py-16 text-muted-ink/40">
+                      <Network size={36} className="mx-auto mb-3 opacity-30 text-concrete" />
+                      <p className="text-xs font-serif italic">Sélectionnez une note pour analyser son graphe local.</p>
+                    </div>
+                  )}
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </motion.aside>
+      )}
+    </AnimatePresence>
+  );
+};

architectural-grid/src/components/RevisionView.tsx

@@ -0,0 +1,665 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { 
+  GraduationCap, 
+  Layers, 
+  ArrowLeft, 
+  ChevronLeft, 
+  ChevronRight, 
+  RotateCcw, 
+  CheckCircle2, 
+  X, 
+  Inbox, 
+  BookOpen,
+  Calendar,
+  Sparkles,
+  Award
+} from 'lucide-react';
+import { Note, Flashcard, FlashcardDeck, FlashcardEvaluation } from '../types';
+
+interface RevisionViewProps {
+  notes: Note[];
+  flashcards: Flashcard[];
+  onUpdateFlashcards: (updated: Flashcard[]) => void;
+  onSelectNote: (noteId: string) => void;
+  onOpenSidebar?: () => void;
+  initialActiveDeckId?: string | null;
+  onClearActiveDeckId?: () => void;
+}
+
+export const RevisionView: React.FC<RevisionViewProps> = ({
+  notes,
+  flashcards,
+  onUpdateFlashcards,
+  onSelectNote,
+  onOpenSidebar,
+  initialActiveDeckId,
+  onClearActiveDeckId
+}) => {
+  // Active states
+  const [activeDeckId, setActiveDeckId] = useState<string | null>(initialActiveDeckId || null);
+  const [isSessionActive, setIsSessionActive] = useState(false);
+  const [isSessionFinished, setIsSessionFinished] = useState(false);
+  
+  // Active review states
+  const [currentCardIndex, setCurrentCardIndex] = useState(0);
+  const [isFlipped, setIsFlipped] = useState(false);
+  const [sessionCards, setSessionCards] = useState<Flashcard[]>([]);
+  const [sessionHistory, setSessionHistory] = useState<Record<string, FlashcardEvaluation>>({});
+  const [onlyFailedCardsSession, setOnlyFailedCardsSession] = useState(false);
+
+  // Sync initial deck selection from outer prop/reminder
+  useEffect(() => {
+    if (initialActiveDeckId) {
+      setActiveDeckId(initialActiveDeckId);
+      // Auto-trigger session
+      const deckCards = flashcards.filter(c => c.noteId === initialActiveDeckId);
+      if (deckCards.length > 0) {
+        setSessionCards([...deckCards]);
+        setCurrentCardIndex(0);
+        setIsFlipped(false);
+        setIsSessionActive(true);
+        setIsSessionFinished(false);
+        setSessionHistory({});
+      }
+    }
+  }, [initialActiveDeckId, flashcards]);
+
+  // Compute Decks based on current flashcards and notes
+  const decks = useMemo(() => {
+    const deckMap = new Map<string, Flashcard[]>();
+    flashcards.forEach(card => {
+      if (!deckMap.has(card.noteId)) {
+        deckMap.set(card.noteId, []);
+      }
+      deckMap.get(card.noteId)!.push(card);
+    });
+
+    const list: FlashcardDeck[] = [];
+    deckMap.forEach((cardsInDeck, noteId) => {
+      const parentNote = notes.find(n => n.id === noteId);
+      if (!parentNote || parentNote.isDeleted) return;
+
+      // Find min nextReviewDate
+      let minDate = cardsInDeck[0]?.nextReviewDate || new Date().toISOString();
+      cardsInDeck.forEach(c => {
+        if (c.nextReviewDate < minDate) {
+          minDate = c.nextReviewDate;
+        }
+      });
+
+      // Mastery score: portion of mastered/sure cards in last evaluation
+      const totalCards = cardsInDeck.length;
+      let masteredCount = 0;
+      cardsInDeck.forEach(c => {
+        if (c.mastered) masteredCount++;
+      });
+
+      list.push({
+        noteId,
+        title: parentNote.title,
+        cardsCount: totalCards,
+        nextReviewDate: minDate,
+        masteryScore: totalCards > 0 ? masteredCount / totalCards : 0,
+        cards: cardsInDeck
+      });
+    });
+
+    // Sort decks: first those that need review (past nextReviewDate), then alphabetical
+    const nowStr = new Date().toISOString();
+    return list.sort((a, b) => {
+      const aNeeds = a.nextReviewDate <= nowStr;
+      const bNeeds = b.nextReviewDate <= nowStr;
+      if (aNeeds && !bNeeds) return -1;
+      if (!aNeeds && bNeeds) return 1;
+      return a.title.localeCompare(b.title);
+    });
+  }, [flashcards, notes]);
+
+  const activeDeck = useMemo(() => {
+    return decks.find(d => d.noteId === activeDeckId);
+  }, [decks, activeDeckId]);
+
+  // Launch review session for a deck
+  const handleStartReview = (noteId: string, failedOnly = false) => {
+    const deck = decks.find(d => d.noteId === noteId);
+    if (!deck) return;
+
+    let cardsToReview = [...deck.cards];
+    if (failedOnly) {
+      // Filter for cards graded as 'fail' or 'hesitant' in session history, or simply subset of session cards
+      const failedIds = Object.keys(sessionHistory).filter(id => sessionHistory[id] === 'fail');
+      cardsToReview = deck.cards.filter(c => failedIds.includes(c.id));
+      if (cardsToReview.length === 0) {
+        // Fallback to active session's rated fail
+        cardsToReview = deck.cards.filter(c => sessionHistory[c.id] === 'fail');
+      }
+      setOnlyFailedCardsSession(true);
+    } else {
+      setOnlyFailedCardsSession(false);
+    }
+
+    if (cardsToReview.length === 0) return;
+
+    // Shuffle cards for better learning cognitive effect
+    const shuffled = [...cardsToReview].sort(() => Math.random() - 0.5);
+
+    setActiveDeckId(noteId);
+    setSessionCards(shuffled);
+    setCurrentCardIndex(0);
+    setIsFlipped(false);
+    setIsSessionActive(true);
+    setIsSessionFinished(false);
+    setSessionHistory({});
+  };
+
+  const handleCardFlip = () => {
+    setIsFlipped(!isFlipped);
+  };
+
+  // Keyboard support during review
+  useEffect(() => {
+    if (!isSessionActive || isSessionFinished) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.code === 'Space') {
+        e.preventDefault();
+        handleCardFlip();
+      } else if (isFlipped) {
+        if (e.key === '1') {
+          handleEvaluate('fail');
+        } else if (e.key === '2') {
+          handleEvaluate('hesitant');
+        } else if (e.key === '3') {
+          handleEvaluate('sure');
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isSessionActive, isSessionFinished, isFlipped, currentCardIndex, sessionCards]);
+
+  // Simple Spaced Repetition Logic (Leitner system variation)
+  const handleEvaluate = (evaluation: FlashcardEvaluation) => {
+    const currentCard = sessionCards[currentCardIndex];
+    if (!currentCard) return;
+
+    // Record evaluation in session context
+    setSessionHistory(prev => ({
+      ...prev,
+      [currentCard.id]: evaluation
+    }));
+
+    // Calculate new intervals
+    let interval = currentCard.intervalDays || 1;
+    let ease = currentCard.easeFactor || 2.5;
+    let mastered = currentCard.mastered || false;
+
+    if (evaluation === 'fail') {
+      interval = 1; // back to review tomorrow
+      ease = Math.max(1.3, ease - 0.2);
+      mastered = false;
+    } else if (evaluation === 'hesitant') {
+      interval = Math.max(2, Math.floor(interval * 1.2));
+      mastered = false;
+    } else { // sure
+      interval = Math.ceil(interval * ease);
+      ease = Math.min(3.5, ease + 0.15);
+      mastered = true;
+    }
+
+    // Calculate next review date
+    const nextDate = new Date();
+    nextDate.setDate(nextDate.getDate() + interval);
+
+    // Build historical entry
+    const historyItem = {
+      reviewedAt: new Date().toISOString(),
+      evaluation
+    };
+
+    const updatedCard: Flashcard = {
+      ...currentCard,
+      intervalDays: interval,
+      nextReviewDate: nextDate.toISOString(),
+      easeFactor: ease,
+      mastered,
+      history: [...(currentCard.history || []), historyItem]
+    };
+
+    // Propagate up to global storage
+    const updatedGlobal = flashcards.map(c => c.id === currentCard.id ? updatedCard : c);
+    onUpdateFlashcards(updatedGlobal);
+
+    // Update in-place session cards to preserve intermediate updates
+    setSessionCards(prev => prev.map((c, i) => i === currentCardIndex ? updatedCard : c));
+
+    // Progress flow
+    if (currentCardIndex < sessionCards.length - 1) {
+      setTimeout(() => {
+        setCurrentCardIndex(prev => prev + 1);
+        setIsFlipped(false);
+      }, 300);
+    } else {
+      setTimeout(() => {
+        setIsSessionFinished(true);
+      }, 300);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentCardIndex < sessionCards.length - 1) {
+      setCurrentCardIndex(currentCardIndex + 1);
+      setIsFlipped(false);
+    }
+  };
+
+  const handlePrev = () => {
+    if (currentCardIndex > 0) {
+      setCurrentCardIndex(currentCardIndex - 1);
+      setIsFlipped(false);
+    }
+  };
+
+  const handleExitSession = () => {
+    setIsSessionActive(false);
+    setIsSessionFinished(false);
+    onClearActiveDeckId?.();
+  };
+
+  // Statistics summaries
+  const finishedStats = useMemo(() => {
+    if (sessionCards.length === 0) return { sureCount: 0, hesitantCount: 0, failCount: 0, percentage: 0 };
+    
+    let sureCount = 0;
+    let hesitantCount = 0;
+    let failCount = 0;
+
+    sessionCards.forEach(c => {
+      const evaluation = sessionHistory[c.id];
+      if (evaluation === 'sure') sureCount++;
+      else if (evaluation === 'hesitant') hesitantCount++;
+      else if (evaluation === 'fail') failCount++;
+    });
+
+    const totalRated = Object.keys(sessionHistory).length || 1;
+    const percentage = Math.round((sureCount / totalRated) * 100);
+
+    return {
+      sureCount,
+      hesitantCount,
+      failCount,
+      percentage
+    };
+  }, [sessionCards, sessionHistory]);
+
+  const formattingDate = (isoStr: string) => {
+    const diff = new Date(isoStr).getTime() - Date.now();
+    if (diff <= 0) return 'Dû aujourd\'hui';
+    const days = Math.ceil(diff / (24 * 60 * 60 * 1000));
+    return `Dans ${days}j`;
+  };
+
+  return (
+    <div className="h-full flex flex-col bg-white dark:bg-dark-paper overflow-y-auto w-full transition-colors duration-500">
+      
+      {/* 1. Header Toolbar */}
+      <div className="px-6 sm:px-12 py-6 flex items-center justify-between sticky top-0 bg-white/90 dark:bg-dark-paper/90 backdrop-blur-sm z-40 border-b border-border gap-4">
+        <div className="flex items-center gap-4">
+          {onOpenSidebar && (
+            <button 
+              onClick={onOpenSidebar}
+              className="lg:hidden p-2 -ml-2 text-ink dark:text-dark-ink hover:bg-black/5 rounded-lg transition-colors"
+            >
+              <ChevronLeft size={20} />
+            </button>
+          )}
+
+          {isSessionActive ? (
+            <button 
+              onClick={handleExitSession}
+              className="flex items-center gap-2 text-concrete hover:text-ink dark:text-dark-concrete dark:hover:text-dark-ink transition-colors"
+            >
+              <ArrowLeft size={16} />
+              <span className="text-xs font-bold uppercase tracking-widest">Abandonner</span>
+            </button>
+          ) : (
+            <div className="flex items-center gap-2.5">
+              <GraduationCap className="text-accent shrink-0" size={20} />
+              <h2 className="text-xs font-black tracking-widest uppercase text-ink dark:text-dark-ink">Focal de Révision</h2>
+            </div>
+          )}
+        </div>
+
+        {isSessionActive && activeDeck && (
+          <div className="text-[11px] font-mono bg-paper dark:bg-dark-paper text-concrete border border-border px-3 py-1.5 rounded-full lowercase tracking-wider">
+            deck : <span className="font-bold text-accent">{activeDeck.title}</span>
+          </div>
+        )}
+      </div>
+
+      {/* 2. Main Display Area */}
+      <div className="flex-1 flex flex-col items-center justify-center p-6 md:p-12 max-w-5xl mx-auto w-full">
+        <AnimatePresence mode="wait">
+          
+          {/* SCREEN A: Decks Collection list view */}
+          {!isSessionActive && (
+            <motion.div 
+              key="decks-list"
+              initial={{ opacity: 0, y: 15 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -15 }}
+              className="w-full space-y-10"
+            >
+              <div className="space-y-2">
+                <h1 className="text-4xl font-serif font-black text-ink dark:text-dark-ink">Decks de Révision Active</h1>
+                <p className="text-sm font-light text-muted-ink dark:text-dark-muted max-w-2xl">
+                  Révisez vos connaissances de manière ciblée grâce au système d'espacement algorithmique Leitner. L’apprentissage actif commence ici.
+                </p>
+              </div>
+
+              {decks.length > 0 ? (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {decks.map(deck => {
+                    const nowStr = new Date().toISOString();
+                    const dueCount = deck.cards.filter(c => c.nextReviewDate <= nowStr).length;
+
+                    return (
+                      <div 
+                        key={deck.noteId}
+                        id={`deck-card-${deck.noteId}`}
+                        className="p-6 bg-[#FCFCFA] dark:bg-white/[0.02] border border-border/60 hover:border-accent/40 rounded-2xl flex flex-col justify-between gap-5 transition-all shadow-sm hover:shadow-xs relative group"
+                      >
+                        <div className="space-y-4">
+                          <div className="flex justify-between items-start gap-3">
+                            <div className="space-y-1 truncate">
+                              <h3 className="text-lg font-serif font-semibold text-ink dark:text-dark-ink truncate group-hover:text-accent transition-colors">
+                                {deck.title}
+                              </h3>
+                              <p className="text-xs text-concrete flex items-center gap-1">
+                                <Layers size={12} />
+                                <span>{deck.cardsCount} cartes de mémoire</span>
+                              </p>
+                            </div>
+
+                            {/* Circular progress bar rendering */}
+                            <div className="relative w-12 h-12 flex items-center justify-center shrink-0">
+                              <svg className="w-full h-full transform -rotate-90">
+                                <circle cx="24" cy="24" r="19" stroke="currentColor" strokeWidth="2" className="text-zinc-100 dark:text-zinc-800" fill="transparent" />
+                                <circle cx="24" cy="24" r="19" stroke="currentColor" strokeWidth="3" className="text-sage" fill="transparent" strokeDasharray={2 * Math.PI * 19} strokeDashoffset={2 * Math.PI * 19 * (1 - deck.masteryScore)} />
+                              </svg>
+                              <span className="absolute text-[10px] font-mono font-black text-sage">
+                                {Math.round(deck.masteryScore * 100)}%
+                              </span>
+                            </div>
+                          </div>
+
+                          <div className="flex flex-wrap gap-2 items-center text-[10.5px] font-medium text-concrete pt-1">
+                            {dueCount > 0 ? (
+                              <span className="bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/15 px-2.5 py-1 rounded-full flex items-center gap-1 font-bold animate-pulse">
+                                {dueCount} à réviser
+                              </span>
+                            ) : (
+                              <span className="bg-sage/10 text-sage dark:text-sage border border-sage/15 px-2.5 py-1 rounded-full flex items-center gap-1 font-bold">
+                                À jour
+                              </span>
+                            )}
+                            <span className="bg-slate-500/5 dark:bg-white/5 border border-border px-2.5 py-1 rounded-full flex items-center gap-1 font-mono">
+                              <Calendar size={10} />
+                              Prochain : {formattingDate(deck.nextReviewDate)}
+                            </span>
+                          </div>
+                        </div>
+
+                        <div className="flex gap-2 pt-1 border-t border-border/40">
+                          <button
+                            onClick={() => onSelectNote(deck.noteId)}
+                            className="flex-1 h-9 flex items-center justify-center text-[10.5px] uppercase tracking-wider font-bold text-muted-ink hover:text-ink dark:text-dark-muted dark:hover:text-dark-ink border border-border rounded-lg bg-white/50 dark:bg-transparent hover:bg-slate-50 dark:hover:bg-white/5 transition-colors"
+                          >
+                            Ouvrir note
+                          </button>
+                          <button
+                            onClick={() => handleStartReview(deck.noteId)}
+                            className="flex-1 h-9 flex items-center justify-center bg-accent text-white text-[10.5px] uppercase tracking-wider font-bold rounded-lg hover:opacity-90 transition-opacity flex items-center gap-1.5 shadow-sm shadow-accent/10"
+                          >
+                            <GraduationCap size={14} />
+                            Réviser
+                          </button>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              ) : (
+                <div className="flex flex-col items-center justify-center text-center p-16 border border-dashed border-border/60 rounded-3xl bg-[#FAF9F6]/30 py-24">
+                  <div className="w-16 h-16 rounded-2xl bg-accent/5 text-accent flex items-center justify-center mb-6">
+                    <GraduationCap size={32} />
+                  </div>
+                  <h3 className="text-2xl font-serif font-black text-ink dark:text-dark-ink mb-2">Aucun deck de flashcards</h3>
+                  <p className="text-sm text-concrete max-w-md font-light mb-8">
+                    Démarrez votre apprentissage en générant des flashcards à l'aide de l'IA directement depuis la barre d'outils de vos notes architecturales.
+                  </p>
+                  <button
+                    onClick={() => onSelectNote('n1')}
+                    className="h-11 px-6 bg-ink dark:bg-ochre text-paper dark:text-ink rounded-xl text-xs font-bold uppercase tracking-widest hover:opacity-90 transition-all flex items-center gap-2"
+                  >
+                    <BookOpen size={15} />
+                    Essayer sur la Note "Grid Systems"
+                  </button>
+                </div>
+              )}
+            </motion.div>
+          )}
+
+          {/* SCREEN B: Active Deck session review state */}
+          {isSessionActive && !isSessionFinished && (
+            <motion.div 
+              key="active-session"
+              initial={{ opacity: 0, scale: 0.98 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.98 }}
+              className="w-full max-w-2xl flex flex-col items-center gap-10"
+            >
+              {/* Header navigation bar */}
+              <div className="w-full flex items-center justify-between px-2 text-xs font-medium text-concrete">
+                <button
+                  onClick={handlePrev}
+                  disabled={currentCardIndex === 0}
+                  className="flex items-center gap-1 hover:text-ink dark:hover:text-dark-ink disabled:opacity-30 transition-colors cursor-pointer"
+                >
+                  <ChevronLeft size={16} />
+                  <span>Précédent</span>
+                </button>
+
+                <div className="px-3.5 py-1.5 bg-slate-100 dark:bg-white/5 border border-border/40 text-[11px] font-mono tracking-widest font-bold rounded-full text-ink dark:text-dark-ink">
+                  {currentCardIndex + 1} / {sessionCards.length}
+                </div>
+
+                <button
+                  onClick={handleNext}
+                  disabled={currentCardIndex === sessionCards.length - 1}
+                  className="flex items-center gap-1 hover:text-ink dark:hover:text-dark-ink disabled:opacity-30 transition-colors cursor-pointer"
+                >
+                  <span>Suivant</span>
+                  <ChevronRight size={16} />
+                </button>
+              </div>
+
+              {/* Centered Flashcard */}
+              <div 
+                id="flashcard-container"
+                onClick={handleCardFlip}
+                className="w-[480px] h-[280px] cursor-pointer select-none perspective group"
+              >
+                <div className={`relative w-full h-full transition-transform duration-500 transform-style preserve-3d ${isFlipped ? 'rotate-y-180' : ''}`}>
+                  
+                  {/* RECTO - Front */}
+                  <div className="absolute inset-0 w-full h-full backface-hidden bg-[#FAF9F5] dark:bg-slate-900 border border-border hover:border-accent/40 rounded-2xl p-8 flex flex-col justify-between shadow-md transition-colors">
+                    <div className="flex justify-between items-start text-[10px] font-mono text-concrete/75 uppercase tracking-widest">
+                      <span>Recto : Question</span>
+                      <span className="bg-slate-200/50 dark:bg-white/10 px-2 py-0.5 rounded text-[8.5px]">Cliquer pour tourner</span>
+                    </div>
+
+                    <div className="flex-1 flex items-center justify-center p-2 text-center">
+                      <p className="text-xl font-serif font-black text-ink dark:text-dark-ink leading-relaxed">
+                        {sessionCards[currentCardIndex]?.question}
+                      </p>
+                    </div>
+
+                    <div className="text-[10px] text-center text-concrete italic font-light pt-2 shrink-0 border-t border-border/10">
+                      Raccourci : [Espace] pour révéler la réponse
+                    </div>
+                  </div>
+
+                  {/* VERSO - Back */}
+                  <div className="absolute inset-0 w-full h-full backface-hidden rotate-y-180 bg-white dark:bg-paper dark:text-ink border border-border rounded-2xl p-8 flex flex-col justify-between shadow-xl">
+                    <div className="flex justify-between items-start text-[10px] font-mono text-concrete/75 uppercase tracking-widest">
+                      <span className="text-accent font-bold">Verso : Réponse</span>
+                      <span className="bg-accent/10 px-2 py-0.5 rounded text-[8.5px] text-accent">Duo Mémoire</span>
+                    </div>
+
+                    <div className="flex-1 flex items-center justify-center p-2 text-center overflow-y-auto max-h-[160px] custom-scrollbar">
+                      <p className="text-sm font-light text-ink leading-relaxed">
+                        {sessionCards[currentCardIndex]?.answer}
+                      </p>
+                    </div>
+
+                    <div className="text-[10px] text-center text-concrete/60 italic font-light pt-2 shrink-0 border-t border-border/15">
+                      Raccourcis : [1] Raté, [2] Hésitant, [3] Sûr
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+
+              {/* Grading Buttons - Rendered after Verso is revealed */}
+              <div className="h-16 flex items-center justify-center w-full">
+                <AnimatePresence mode="wait">
+                  {isFlipped ? (
+                    <motion.div 
+                      key="grading-expanded"
+                      initial={{ opacity: 0, y: 10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: -10 }}
+                      className="flex items-center gap-4 w-full justify-center max-w-md"
+                    >
+                      <button
+                        id="grade-btn-fail"
+                        onClick={(e) => { e.stopPropagation(); handleEvaluate('fail'); }}
+                        className="flex-1 flex flex-col items-center justify-center h-14 rounded-2xl border border-rust/10 bg-rust/10 font-black text-rust cursor-pointer hover:bg-rust/15 transition-all text-xs"
+                      >
+                        <span className="text-sm">Raté</span>
+                        <span className="opacity-70 text-[9px] font-light font-mono mt-0.5">Touche 1</span>
+                      </button>
+
+                      <button
+                        id="grade-btn-hesitant"
+                        onClick={(e) => { e.stopPropagation(); handleEvaluate('hesitant'); }}
+                        className="flex-1 flex flex-col items-center justify-center h-14 rounded-2xl border border-ochre/15 bg-ochre/10 font-black text-ochre cursor-pointer hover:bg-ochre/15 transition-all text-xs"
+                      >
+                        <span className="text-sm">Hésitant</span>
+                        <span className="opacity-70 text-[9px] font-light font-mono mt-0.5">Touche 2</span>
+                      </button>
+
+                      <button
+                        id="grade-btn-sure"
+                        onClick={(e) => { e.stopPropagation(); handleEvaluate('sure'); }}
+                        className="flex-1 flex flex-col items-center justify-center h-14 rounded-2xl border border-sage/15 bg-sage/10 font-black text-sage cursor-pointer hover:bg-sage/15 transition-all text-xs"
+                      >
+                        <span className="text-sm">Sûr</span>
+                        <span className="opacity-70 text-[9px] font-light font-mono mt-0.5">Touche 3</span>
+                      </button>
+                    </motion.div>
+                  ) : (
+                    <motion.button
+                      key="reveal-btn"
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                      onClick={handleCardFlip}
+                      className="h-12 px-8 bg-ink dark:bg-dark-ink text-paper dark:text-dark-paper text-xs uppercase font-bold tracking-widest rounded-xl hover:opacity-90 active:scale-98 transition-all shadow-md shrink-0 cursor-pointer"
+                    >
+                      Révéler la réponse (Espace)
+                    </motion.button>
+                  )}
+                </AnimatePresence>
+              </div>
+            </motion.div>
+          )}
+
+          {/* SCREEN C: Finishing dashboard view with Donut Chart and actions */}
+          {isSessionFinished && (
+            <motion.div 
+              key="finished-stats"
+              initial={{ opacity: 0, scale: 0.96 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.96 }}
+              className="w-full max-w-lg flex flex-col items-center text-center gap-8"
+            >
+              <div className="space-y-2">
+                <div className="w-12 h-12 rounded-full bg-sage/10 text-sage flex items-center justify-center mx-auto mb-3">
+                  <Award size={26} />
+                </div>
+                <h1 className="text-3xl font-serif font-black text-ink dark:text-dark-ink">Félicitations !</h1>
+                <p className="text-sm font-light text-muted-ink dark:text-dark-muted">
+                  Vous venez de finir votre session de révision de la note active.
+                </p>
+              </div>
+
+              {/* Custom SVG Donut Chart showing score */}
+              <div className="relative w-44 h-44 flex items-center justify-center my-2">
+                <svg className="w-full h-full transform -rotate-90">
+                  <circle cx="88" cy="88" r="64" stroke="currentColor" strokeWidth="12" className="text-zinc-100 dark:text-zinc-900" fill="transparent" />
+                  <circle cx="88" cy="88" r="64" stroke="currentColor" strokeWidth="12" className="text-sage" fill="transparent" strokeDasharray={2 * Math.PI * 64} strokeDashoffset={2 * Math.PI * 64 * (1 - (finishedStats.percentage / 100))} strokeLinecap="round" />
+                </svg>
+                <div className="absolute inset-0 flex flex-col items-center justify-center">
+                  <span className="text-4.5xl font-serif font-black text-ink dark:text-dark-ink leading-none">
+                    {finishedStats.percentage}%
+                  </span>
+                  <p className="text-[10px] uppercase font-bold tracking-widest text-concrete mt-1">Sûr de soi</p>
+                </div>
+              </div>
+
+              {/* Core Analytics parameters (Stats) */}
+              <div className="grid grid-cols-3 gap-4 w-full border-t border-b border-border py-6 select-none bg-[#FCFCFA] dark:bg-white/[0.01] rounded-2xl px-6">
+                <div className="space-y-1">
+                  <p className="text-2xl font-serif font-bold text-ink dark:text-dark-ink">{sessionCards.length}</p>
+                  <p className="text-[10px] uppercase tracking-wide font-medium text-concrete">Révisées</p>
+                </div>
+                <div className="space-y-1 border-l border-r border-border/60">
+                  <p className="text-2xl font-serif font-bold text-rust">{finishedStats.failCount}</p>
+                  <p className="text-[10px] uppercase tracking-wide font-medium text-concrete">À revoir</p>
+                </div>
+                <div className="space-y-1">
+                  <p className="text-2xl font-serif font-bold text-sage">{finishedStats.sureCount}</p>
+                  <p className="text-[10px] uppercase tracking-wide font-medium text-concrete">Maîtrisées</p>
+                </div>
+              </div>
+
+              <div className="flex flex-col sm:flex-row gap-3 w-full">
+                <button
+                  onClick={handleExitSession}
+                  className="flex-1 h-11 border border-border text-ink dark:text-dark-ink rounded-xl text-xs font-bold uppercase tracking-widest hover:bg-slate-50 dark:hover:bg-white/5 transition-all cursor-pointer"
+                >
+                  Retour aux decks
+                </button>
+                {finishedStats.failCount > 0 && (
+                  <button
+                    onClick={() => handleStartReview(activeDeckId!, true)}
+                    className="flex-1 h-11 bg-[#8F4C38] text-white rounded-xl text-xs font-bold uppercase tracking-widest hover:bg-[#8F4C38]/95 transition-all flex items-center justify-center gap-1.5 shadow-sm cursor-pointer"
+                  >
+                    <RotateCcw size={14} />
+                    Ré-réviser les ratées
+                  </button>
+                )}
+              </div>
+            </motion.div>
+          )}
+
+        </AnimatePresence>
+      </div>
+
+    </div>
+  );
+};

architectural-grid/src/components/SearchModal.tsx

@@ -0,0 +1,611 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { 
+  Search, 
+  ChevronLeft, 
+  ChevronRight, 
+  Plus, 
+  Bookmark, 
+  Layers, 
+  FileText, 
+  CheckCircle,
+  HelpCircle,
+  X,
+  CornerDownRight,
+  Folder,
+  Sliders,
+  Sparkles,
+  Command,
+  Settings
+} from 'lucide-react';
+import { Note, Carnet } from '../types';
+
+interface SearchModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  notes: Note[];
+  carnets: Carnet[];
+  onSelectNote: (noteId: string) => void;
+}
+
+interface SearchMatch {
+  id: string; // Unique match identifier
+  noteId: string;
+  noteTitle: string;
+  path: string;
+  type: 'document' | 'heading' | 'paragraph' | 'list';
+  headingLevel?: number;
+  text: string;
+  matchedText: string;
+  lineIndex: number;
+}
+
+export const SearchModal: React.FC<SearchModalProps> = ({
+  isOpen,
+  onClose,
+  notes,
+  carnets,
+  onSelectNote
+}) => {
+  const [query, setQuery] = useState('');
+  const [useRegex, setUseRegex] = useState(false);
+  const [caseSensitive, setCaseSensitive] = useState(false);
+  const [includeChildDocs, setIncludeChildDocs] = useState(true);
+  const [searchInTrash, setSearchInTrash] = useState(false);
+  const [savedQueries, setSavedQueries] = useState<string[]>(['block', 'siyuan', 'guide']);
+  
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // Focus input on launch
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => inputRef.current?.focus(), 50);
+    }
+  }, [isOpen]);
+
+  // Handle global keybindings in modal
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onClose();
+      } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setSelectedIndex(prev => Math.min(prev + 1, filteredMatches.length - 1));
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setSelectedIndex(prev => Math.max(prev - 1, 0));
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        if (filteredMatches[selectedIndex]) {
+          const m = filteredMatches[selectedIndex];
+          onSelectNote(m.noteId);
+          onClose();
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, selectedIndex]);
+
+  // Helper: reconstruct carnet path
+  const getCarnetPath = (carnetId: string): string => {
+    const segments: string[] = [];
+    let current = carnets.find(c => c.id === carnetId);
+    while (current) {
+      segments.unshift(current.name);
+      current = current.parentId ? carnets.find(c => c.id === current.parentId) : undefined;
+    }
+    return segments.join('/');
+  };
+
+  // Safe term escape for RegExp
+  const escapeRegExp = (string: string) => {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  };
+
+  // Perform multi-match search logic across document titles and contents
+  const filteredMatches = useMemo(() => {
+    if (!query.trim()) return [];
+
+    const matches: SearchMatch[] = [];
+    const searchRegex = (() => {
+      try {
+        const flag = caseSensitive ? '' : 'i';
+        const pattern = useRegex ? query : escapeRegExp(query);
+        return new RegExp(pattern, flag);
+      } catch (e) {
+        return null; // Handle partial regex input gracefully
+      }
+    })();
+
+    if (!searchRegex) return [];
+
+    // Filter notes depending on trash status
+    const targetNotes = notes.filter(n => searchInTrash ? n.isDeleted : !n.isDeleted);
+
+    targetNotes.forEach(note => {
+      const notePath = getCarnetPath(note.carnetId);
+      const fullPath = notePath ? `${notePath}/${note.title}` : note.title;
+
+      // 1. Check Title match
+      if (searchRegex.test(note.title)) {
+        matches.push({
+          id: `${note.id}-title`,
+          noteId: note.id,
+          noteTitle: note.title,
+          path: fullPath,
+          type: 'document',
+          text: note.title,
+          matchedText: note.title,
+          lineIndex: -1
+        });
+      }
+
+      // 2. Parse Content blocks / lines
+      if (note.content) {
+        const lines = note.content.split('\n');
+        lines.forEach((line, index) => {
+          const trimmed = line.trim();
+          if (!trimmed) return;
+
+          if (searchRegex.test(trimmed)) {
+            let type: 'heading' | 'paragraph' | 'list' = 'paragraph';
+            let headingLevel = undefined;
+            let displayVal = trimmed;
+
+            // Classify content structure elements
+            if (trimmed.startsWith('#')) {
+              type = 'heading';
+              const headingMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
+              if (headingMatch) {
+                headingLevel = headingMatch[1].length;
+                displayVal = headingMatch[2];
+              }
+            } else if (/^[-*+]\s+/.test(trimmed) || /^\d+\.\s+/.test(trimmed)) {
+              type = 'list';
+              displayVal = trimmed.replace(/^[-*+\d.]+\s+/, '');
+            }
+
+            matches.push({
+              id: `${note.id}-line-${index}`,
+              noteId: note.id,
+              noteTitle: note.title,
+              path: fullPath,
+              type,
+              headingLevel,
+              text: trimmed,
+              matchedText: displayVal,
+              lineIndex: index
+            });
+          }
+        });
+      }
+    });
+
+    return matches;
+  }, [notes, query, useRegex, caseSensitive, searchInTrash, carnets]);
+
+  // Ensure index remains in bounds when matches array updates
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [query]);
+
+  // Toggle saving criteria
+  const handleSaveCriteria = () => {
+    if (query.trim() && !savedQueries.includes(query.trim())) {
+      setSavedQueries(prev => [...prev, query.trim()]);
+    }
+  };
+
+  const handleRemoveCriteria = () => {
+    setSavedQueries(prev => prev.filter(q => q !== query.trim()));
+  };
+
+  // Count distinct notes involved in match list
+  const docMatchesCount = useMemo(() => {
+    const uniqueNoteIds = new Set(filteredMatches.map(m => m.noteId));
+    return uniqueNoteIds.size;
+  }, [filteredMatches]);
+
+  const activeMatch = filteredMatches[selectedIndex];
+
+  // Dynamically load document content with visual query highlights
+  const highlightedNotePreviewContent = useMemo(() => {
+    if (!activeMatch) return null;
+    const currentNote = notes.find(n => n.id === activeMatch.noteId);
+    if (!currentNote) return null;
+
+    if (!query.trim()) return currentNote.content;
+
+    try {
+      const flag = caseSensitive ? 'g' : 'gi';
+      const searchPattern = useRegex ? query : escapeRegExp(query);
+      const highlightRegex = new RegExp(`(${searchPattern})`, flag);
+
+      // Return content split by line to let us format block matches neatly
+      const lines = (currentNote.content || '').split('\n');
+      
+      // Let's frame the match around the matched line for contextual proximity
+      const targetIndex = activeMatch.lineIndex >= 0 ? activeMatch.lineIndex : 0;
+      const startLine = Math.max(0, targetIndex - 3);
+      const endLine = Math.min(lines.length - 1, targetIndex + 5);
+
+      return (
+        <div className="space-y-1 my-2">
+          {startLine > 0 && (
+            <div className="text-[10px] text-concrete/40 italic pl-4">...</div>
+          )}
+          {lines.slice(startLine, endLine + 1).map((line, idx) => {
+            const absoluteIdx = startLine + idx;
+            const isMatchLine = absoluteIdx === targetIndex;
+            const hasMatches = highlightRegex.test(line);
+
+            // Reconstruct highlighted segments
+            const segments = line.split(highlightRegex);
+            
+            return (
+              <div 
+                key={absoluteIdx} 
+                className={`py-1 px-3 rounded-lg text-xs leading-relaxed flex items-start gap-4 transition-colors
+                  ${isMatchLine ? 'bg-amber-100/15 border-l-2 border-amber-500 pl-2.5 dark:bg-amber-500/5' : 'opacity-85'}`}
+              >
+                <span className="font-mono text-[9px] text-concrete/40 text-right w-6 select-none mt-1">
+                  {absoluteIdx + 1}
+                </span>
+                
+                <span className="font-sans text-ink dark:text-dark-ink break-all">
+                  {hasMatches ? (
+                    segments.map((seg, sIdx) => {
+                      const matchesPattern = highlightRegex.test(seg);
+                      return matchesPattern ? (
+                        <mark 
+                          key={sIdx} 
+                          className="bg-amber-500/30 text-ink dark:text-white dark:bg-amber-400/40 rounded px-0.5 border-b border-amber-600 font-semibold"
+                        >
+                          {seg}
+                        </mark>
+                      ) : (
+                        seg
+                      );
+                    })
+                  ) : (
+                    line
+                  )}
+                </span>
+              </div>
+            );
+          })}
+          {endLine < lines.length - 1 && (
+            <div className="text-[10px] text-concrete/40 italic pl-4">...</div>
+          )}
+        </div>
+      );
+    } catch (e) {
+      return <div className="text-xs text-concrete pr-4">{currentNote.content}</div>;
+    }
+  }, [activeMatch, notes, query, useRegex, caseSensitive]);
+
+  // Render text segment highlight in results row items
+  const renderHighlightedRowText = (text: string) => {
+    if (!query.trim()) return text;
+    try {
+      const flag = caseSensitive ? 'gi' : 'gi';
+      const searchPattern = useRegex ? query : escapeRegExp(query);
+      const highlightRegex = new RegExp(`(${searchPattern})`, flag);
+      const segments = text.split(highlightRegex);
+
+      return (
+        <span className="truncate">
+          {segments.map((seg, sIdx) => {
+            const isMatch = highlightRegex.test(seg);
+            return isMatch ? (
+              <mark key={sIdx} className="bg-amber-400/35 text-ink dark:text-white dark:bg-amber-500/45 px-0.5 rounded font-black">
+                {seg}
+              </mark>
+            ) : (
+              seg
+            );
+          })}
+        </span>
+      );
+    } catch (e) {
+      return text;
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black/40 dark:bg-black/60 backdrop-blur-xs flex items-center justify-center z-[100] p-4 sm:p-6 select-none font-sans">
+      <motion.div 
+        initial={{ opacity: 0, scale: 0.98, y: 10 }}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        exit={{ opacity: 0, scale: 0.98, y: 10 }}
+        className="w-full max-w-[840px] h-[580px] sm:h-[640px] rounded-2xl bg-white dark:bg-[#121212] border border-border dark:border-zinc-800 shadow-2xl flex flex-col overflow-hidden"
+      >
+        {/* TOP Advanced Search Bar Row */}
+        <div className="p-4 border-b border-border/60 dark:border-zinc-800/80 bg-paper/50 dark:bg-[#161616] flex flex-col gap-3 shrink-0">
+          <div className="flex items-center gap-2.5 relative">
+            <Search size={18} className="text-concrete absolute left-3 top-1/2 -translate-y-1/2 shrink-0" />
+            
+            <input 
+              ref={inputRef}
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Rechercher des documents ou des blocs de texte..."
+              className="w-full text-sm pl-10 pr-24 py-2.5 rounded-xl border border-border/70 dark:border-zinc-800/80 bg-white/85 dark:bg-[#1C1C1C] text-ink dark:text-dark-ink placeholder-concrete/50 outline-none focus:border-accent"
+            />
+
+            {/* Config Quick Badges */}
+            <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1.5 bg-paper dark:bg-transparent rounded-lg p-0.5">
+               <button 
+                 onClick={() => setCaseSensitive(!caseSensitive)}
+                 className={`px-1.5 py-1 text-[9.5px] font-bold rounded-md hover:bg-black/5 dark:hover:bg-white/5 uppercase select-none transition-colors
+                   ${caseSensitive ? 'text-accent bg-accent/5' : 'text-concrete'}`}
+                 title="Respecter la casse (Aa)"
+               >
+                 Aa
+               </button>
+               <button 
+                 onClick={() => setUseRegex(!useRegex)}
+                 className={`px-1.5 py-1 text-[9.5px] font-bold rounded-md hover:bg-black/5 dark:hover:bg-white/5 uppercase select-none transition-colors
+                   ${useRegex ? 'text-accent bg-accent/5' : 'text-concrete'}`}
+                 title="Activer Regex (.*)"
+               >
+                 .*
+               </button>
+               <button 
+                 onClick={onClose}
+                 className="p-1 hover:bg-black/5 dark:hover:bg-white/10 rounded-md text-concrete transition-all"
+               >
+                 <X size={14} />
+               </button>
+            </div>
+          </div>
+
+          {/* Quick saved criteria filter tags */}
+          {savedQueries.length > 0 && (
+             <div className="flex items-center gap-2 text-[10px] text-concrete font-bold tracking-tight">
+                <span className="uppercase text-[9px]">Favoris:</span>
+                <div className="flex flex-wrap gap-1.5">
+                    {savedQueries.map(sq => (
+                      <button 
+                         key={sq}
+                         onClick={() => setQuery(sq)}
+                         className={`px-2 py-0.5 rounded-md border text-[9.5px] font-medium transition-all hover:border-accent
+                           ${query === sq 
+                             ? 'bg-accent/10 border-accent text-accent' 
+                             : 'bg-white dark:bg-zinc-800 border-border/40 text-muted-ink'}`}
+                      >
+                        {sq}
+                      </button>
+                    ))}
+                </div>
+             </div>
+          )}
+        </div>
+
+        {/* UTILITY BAR Row -> Match statistics with action links */}
+        <div className="px-4 py-2 bg-[#F8F7F4] dark:bg-[#141414] border-b border-border/40 dark:border-zinc-850 flex items-center justify-between shrink-0">
+           <div className="flex items-center gap-3">
+               {/* Arrow Switchers */}
+               <div className="flex items-center gap-1 border border-border/40 dark:border-zinc-800 bg-white dark:bg-zinc-900 rounded-lg p-0.5">
+                  <button 
+                    disabled={filteredMatches.length === 0}
+                    onClick={() => setSelectedIndex(prev => Math.max(0, prev - 1))}
+                    className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded text-concrete disabled:opacity-40"
+                  >
+                    <ChevronLeft size={12} />
+                  </button>
+                  <span className="text-[9.5px] font-bold font-mono px-1.5 text-concrete">
+                     {filteredMatches.length > 0 ? `${selectedIndex + 1}/${filteredMatches.length}` : '0/0'}
+                  </span>
+                  <button 
+                    disabled={filteredMatches.length === 0}
+                    onClick={() => setSelectedIndex(prev => Math.min(filteredMatches.length - 1, prev + 1))}
+                    className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded text-concrete disabled:opacity-40"
+                  >
+                    <ChevronRight size={12} />
+                  </button>
+               </div>
+
+               <span className="text-[11px] font-medium text-concrete">
+                  {filteredMatches.length > 0 
+                    ? `Trouvé ${filteredMatches.length} occurrences dans ${docMatchesCount} documents` 
+                    : query.trim() ? "Aucun élément ne correspond" : "Saisissez votre requête"}
+               </span>
+           </div>
+
+           {/* Toolbar Action Links */}
+           <div className="flex items-center gap-4">
+               {query.trim() && (
+                 <button 
+                    onClick={savedQueries.includes(query.trim()) ? handleRemoveCriteria : handleSaveCriteria}
+                    className="text-[10px] font-bold uppercase tracking-wider text-accent border-b border-dashed border-accent hover:border-solid select-none"
+                 >
+                    {savedQueries.includes(query.trim()) ? 'Supprimer favori' : 'Sauvegarder recherche'}
+                 </button>
+               )}
+
+               <label className="flex items-center gap-1.5 cursor-pointer text-[10.5px] font-medium text-concrete">
+                  <input 
+                     type="checkbox"
+                     checked={includeChildDocs}
+                     onChange={(e) => setIncludeChildDocs(e.target.checked)}
+                     className="rounded border-border/60 text-accent focus:ring-accent w-3 h-3"
+                  />
+                  <span>Sous-docs inclus</span>
+               </label>
+
+               <label className="flex items-center gap-1.5 cursor-pointer text-[10.5px] font-medium text-concrete">
+                  <input 
+                     type="checkbox"
+                     checked={searchInTrash}
+                     onChange={(e) => setSearchInTrash(e.target.checked)}
+                     className="rounded border-border/60 text-accent focus:ring-accent w-3 h-3"
+                  />
+                  <span>Corbeille incluse</span>
+               </label>
+           </div>
+        </div>
+
+        {/* DUAL SECTION LAYOUT */}
+        <div className="flex-1 flex overflow-hidden">
+           
+           {/* Left Section: Scrollable matches list */}
+           <div className="w-[45%] h-full border-r border-border/40 dark:border-zinc-800 flex flex-col bg-[#FAF9F5]/30 dark:bg-[#121212]/30 overflow-hidden">
+                <div ref={listRef} className="flex-1 overflow-y-auto custom-scrollbar p-2 space-y-1">
+                   {filteredMatches.map((m, idx) => {
+                       const isSelected = idx === selectedIndex;
+                       return (
+                          <div
+                             key={m.id}
+                             onClick={() => setSelectedIndex(idx)}
+                             onDoubleClick={() => {
+                                onSelectNote(m.noteId);
+                                onClose();
+                             }}
+                             className={`p-2.5 rounded-xl cursor-pointer text-left select-none relative group/item transition-all flex flex-col gap-1 border
+                               ${isSelected 
+                                 ? 'bg-white dark:bg-zinc-800 shadow-md border-amber-500/30' 
+                                 : 'border-transparent hover:bg-black/[0.02] dark:hover:bg-white/[0.02]/30'}`}
+                          >
+                              {/* Selection overlay accent */}
+                              {isSelected && (
+                                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-3.5 bg-amber-500 rounded-r-full" />
+                              )}
+
+                              <div className="flex items-center justify-between text-[11px] gap-2">
+                                  <div className="flex items-center gap-1.5 min-w-0 flex-1">
+                                       {/* Element classifier badges */}
+                                       {m.type === 'document' && (
+                                         <FileText size={12} className="text-sky-500 shrink-0" />
+                                       )}
+                                       {m.type === 'heading' && (
+                                         <span className="text-[8.5px] font-extrabold uppercase bg-indigo-50 dark:bg-indigo-950/40 text-indigo-500 border border-indigo-500/10 px-1 rounded-sm shrink-0 font-mono">
+                                             H{m.headingLevel || ''}
+                                         </span>
+                                       )}
+                                       {m.type === 'list' && (
+                                         <span className="text-[8.5px] font-extrabold uppercase bg-emerald-50 dark:bg-emerald-950/40 text-emerald-500 border border-emerald-500/10 px-1 rounded-sm shrink-0 font-mono">
+                                             LIST
+                                         </span>
+                                       )}
+                                       {m.type === 'paragraph' && (
+                                         <span className="text-[8px] font-extrabold uppercase bg-zinc-100 dark:bg-zinc-800 text-concrete border border-border/20 px-1 rounded-sm shrink-0 font-mono">
+                                             TXT
+                                         </span>
+                                       )}
+                                       
+                                       <span className={`font-semibold truncate leading-none text-xs ${isSelected ? 'text-ink dark:text-dark-ink' : 'text-muted-ink'}`}>
+                                            {m.noteTitle}
+                                       </span>
+                                  </div>
+                              </div>
+
+                              {/* Highlighted snippet row content */}
+                              <div className="text-[11px] text-concrete truncate pl-4.5 font-sans leading-tight">
+                                  {renderHighlightedRowText(m.matchedText)}
+                              </div>
+
+                              {/* Breadcrumb row path */}
+                              <div className="text-[8.5px] font-mono tracking-widest uppercase text-concrete/45 truncate pl-4.5 mt-0.5 max-w-full">
+                                  {m.path}
+                              </div>
+                          </div>
+                       );
+                   })}
+
+                   {filteredMatches.length === 0 && (
+                      <div className="h-full flex flex-col items-center justify-center text-center p-6 text-concrete pt-32 space-y-2">
+                          <Search size={22} className="opacity-35 text-concrete animate-pulse" />
+                          <p className="text-[11px] font-medium italic opacity-70">
+                              {query.trim() ? "Aucun bloc ou doc ne correspond à cette recherche." : "Taper pour obtenir des résultats instantanés."}
+                          </p>
+                      </div>
+                   )}
+                </div>
+           </div>
+
+           {/* Right Section: Scrollable content preview card with visual highlighted markers */}
+           <div className="flex-1 h-full bg-[#FCFCFA]/80 dark:bg-[#151515] flex flex-col overflow-hidden">
+                {activeMatch ? (
+                    <div className="flex-1 flex flex-col p-5 overflow-hidden justify-between">
+                         <div className="space-y-4 overflow-hidden flex flex-col flex-1">
+                             {/* Breadcrumb locator line */}
+                             <div className="flex items-center gap-1.5 p-2 bg-black/[0.02] dark:bg-white/[0.02] border border-border/40 rounded-xl">
+                                 <Folder size={11} className="text-concrete" />
+                                 <span className="text-[9.5px] font-mono tracking-widest text-concrete font-medium uppercase truncate flex-1">
+                                    {activeMatch.path}
+                                 </span>
+                             </div>
+
+                             {/* Document focus heading title */}
+                             <div className="border-b border-border/40 dark:border-zinc-800 pb-2">
+                                 <h4 className="text-[13px] font-serif font-black text-ink dark:text-dark-ink">
+                                     {activeMatch.noteTitle}
+                                 </h4>
+                                 <p className="text-[8px] uppercase tracking-wider text-concrete font-bold mt-1">APERÇU CONTEXTUEL DU BLOC</p>
+                             </div>
+
+                             {/* Dynamic document contents highlighted and framed */}
+                             <div className="flex-1 overflow-y-auto custom-scrollbar pr-1 bg-white dark:bg-[#121212] border border-border/30 rounded-xl p-3.5 shadow-inner">
+                                  {highlightedNotePreviewContent}
+                             </div>
+                         </div>
+
+                         {/* Quick Actions trigger buttons */}
+                         <div className="pt-4 border-t border-border/40 dark:border-zinc-800 flex items-center justify-between shrink-0">
+                             <button
+                                onClick={() => {
+                                  onSelectNote(activeMatch.noteId);
+                                  onClose();
+                                }}
+                                className="px-5 py-2.5 bg-ink text-white dark:bg-white dark:text-black hover:scale-102 active:scale-98 text-xs font-semibold rounded-xl flex items-center gap-2 transition-all shadow-sm"
+                             >
+                                 <CornerDownRight size={13} />
+                                 <span>Ouvrir dans l'éditeur</span>
+                             </button>
+                             <span className="text-[10px] text-concrete font-bold font-mono bg-paper dark:bg-white/5 border border-border/30 px-2 py-1 rounded">
+                                 ID: {activeMatch.noteId.slice(0, 6)}...
+                             </span>
+                         </div>
+                    </div>
+                ) : (
+                    <div className="flex-1 flex flex-col items-center justify-center text-center p-6 text-concrete space-y-3">
+                         <HelpCircle size={24} className="opacity-25" />
+                         <div className="space-y-1">
+                              <p className="text-[11.5px] font-bold">Aperçu du document</p>
+                              <p className="text-[10px] italic opacity-60">Sélectionnez un résultat de recherche de la colonne et explorez immédiatement son contenu sémantique.</p>
+                         </div>
+                    </div>
+                )}
+           </div>
+
+        </div>
+
+        {/* BOTTOM Status Keyboard shortcuts hint footer bar */}
+        <div className="p-3.5 bg-[#FAF9F5] dark:bg-[#0E0E0E] border-t border-border/50 dark:border-zinc-800/60 flex items-center justify-between shrink-0 font-sans">
+             <div className="flex items-center gap-5 text-[9.5px] font-bold text-concrete/75 antialiased">
+                 <span className="flex items-center gap-1.5"><strong className="bg-slate-200 dark:bg-zinc-800 px-1 py-0.5 rounded text-ink dark:text-light">↑↓</strong> naviguer</span>
+                 <span className="flex items-center gap-1.5"><strong className="bg-slate-200 dark:bg-zinc-800 px-1 py-0.5 rounded text-ink dark:text-light">Entrée</strong> ouvrir</span>
+                 <span className="flex items-center gap-1.5"><strong className="bg-slate-200 dark:bg-zinc-800 px-1 py-0.5 rounded text-ink dark:text-light">Double clic</strong> ouvrir</span>
+                 <span className="flex items-center gap-1.5"><strong className="bg-slate-200 dark:bg-zinc-800 px-1 py-0.5 rounded text-ink dark:text-light">Échap</strong> fermer</span>
+             </div>
+
+             <div className="flex items-center gap-1.5 text-[9px] font-bold uppercase tracking-wider text-concrete/60">
+                 <Command size={10} />
+                 <span>Momento Search OS v2.3</span>
+             </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+};

architectural-grid/src/components/Sidebar.tsx

@@ -0,0 +1,875 @@
+import React from 'react';
+import { 
+  Plus, 
+  Archive, 
+  Settings, 
+  ChevronRight,
+  BookOpen,
+  Bot,
+  Microscope,
+  Activity,
+  Pin,
+  Moon,
+  Sun,
+  Bell,
+  Lock,
+  Edit3,
+  Trash2,
+  Users,
+  Clock,
+  GripVertical,
+  Wind,
+  Network,
+  Home,
+  Sparkles,
+  LogOut,
+  ChevronDown,
+  Folder,
+  FolderOpen,
+  FileText,
+  Search,
+  BookMarked,
+  User,
+  ExternalLink,
+  ChevronUp,
+  HelpCircle,
+  EyeOff,
+  Layers,
+  Scissors,
+  Chrome,
+  Crown,
+  ArrowRight,
+  GraduationCap
+} from 'lucide-react';
+import { motion, AnimatePresence } from 'motion/react';
+import { NavigationView, Carnet, Note, SettingsTab, Flashcard } from '../types';
+
+interface NoteLinkProps {
+  note: Note;
+  isActive: boolean;
+  onClick: () => void;
+}
+
+const NoteLink: React.FC<NoteLinkProps> = ({ note, isActive, onClick }) => (
+  <motion.button
+    initial={{ opacity: 0, x: -10 }}
+    animate={{ opacity: 1, x: 0 }}
+    onClick={onClick}
+    className={`w-full flex items-center gap-2 pl-6 pr-3 py-1.5 text-[11px] transition-all rounded-lg text-left
+      ${isActive ? 'bg-white shadow-sm border border-border/50 dark:bg-white/10 text-ink font-semibold' : 'text-muted-ink hover:text-ink hover:bg-white/30'}`}
+  >
+    <div className="flex items-center gap-2 flex-1 truncate">
+      <FileText size={12} className={isActive ? "text-accent shrink-0" : "text-concrete opacity-70 shrink-0"} />
+      <span className="truncate">{note.title || "Note sans titre"}</span>
+    </div>
+    {note.isPinned && <Pin size={10} className="text-amber-500 shrink-0" />}
+  </motion.button>
+);
+
+interface SidebarItemProps {
+  carnet: Carnet;
+  isActive: boolean;
+  notes: Note[];
+  activeNoteId: string | null;
+  onCarnetClick: () => void;
+  onNoteClick: (noteId: string) => void;
+  onAddSubCarnet: () => void;
+  onRename: () => void;
+  onDelete: () => void;
+  children?: React.ReactNode;
+  level: number;
+  isExpanded: boolean;
+  toggleExpand: () => void;
+  onMove?: (draggedId: string, targetId?: string) => void;
+}
+
+const SidebarItem: React.FC<SidebarItemProps> = ({ 
+  carnet, 
+  isActive, 
+  notes,
+  activeNoteId,
+  onCarnetClick,
+  onNoteClick,
+  onAddSubCarnet,
+  onRename,
+  onDelete,
+  children,
+  level,
+  isExpanded,
+  toggleExpand,
+  onMove
+}) => {
+  const hasChildren = React.Children.count(children) > 0 || notes.length > 0;
+
+  return (
+    <div className="space-y-0.5">
+      <div 
+        className="flex items-center group relative h-8 select-none"
+        style={{ paddingLeft: `${level * 10}px` }}
+      >
+        {/* Subtle Drag Handle */}
+        <div className="absolute left-[-2px] opacity-0 group-hover:opacity-40 cursor-grab active:cursor-grabbing text-concrete transition-opacity z-10">
+          <GripVertical size={10} />
+        </div>
+
+        {/* Hierarchy Guide Line */}
+        {level > 0 && (
+          <div className="absolute left-[4px] top-[-10px] bottom-1/2 w-px bg-border/20" />
+        )}
+        {level > 0 && (
+          <div className="absolute left-[4px] top-1/2 w-[8px] h-px bg-border/20" />
+        )}
+
+        <div className="flex-1 flex items-center gap-1.5">
+          {hasChildren ? (
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleExpand();
+              }}
+              className="p-0.5 hover:bg-ink/5 dark:hover:bg-white/5 rounded transition-colors text-concrete"
+            >
+              <motion.div animate={{ rotate: isExpanded ? 90 : 0 }} transition={{ duration: 0.15 }}>
+                <ChevronRight size={12} />
+              </motion.div>
+            </button>
+          ) : (
+            <div className="w-4" /> // Spacer for alignment
+          )}
+
+          <motion.div
+            whileHover={{ x: 1 }}
+            className={`flex-1 flex items-center gap-2 px-2 py-1 rounded-lg transition-all duration-200 group/item cursor-pointer relative
+              ${isActive ? 'bg-white shadow-sm border border-border/50 dark:bg-white/10' : 'hover:bg-white/40 dark:hover:bg-white/5'}`}
+            onClick={onCarnetClick}
+            onDragOver={(e) => {
+              e.preventDefault();
+              e.dataTransfer.dropEffect = 'move';
+              e.currentTarget.classList.add('bg-accent/5', 'ring-1', 'ring-accent/20');
+            }}
+            onDragLeave={(e) => {
+              e.currentTarget.classList.remove('bg-accent/5', 'ring-1', 'ring-accent/20');
+            }}
+            onDrop={(e) => {
+              e.preventDefault();
+              e.currentTarget.classList.remove('bg-accent/5', 'ring-1', 'ring-accent/20');
+              const draggedId = e.dataTransfer.getData('carnetId');
+              if (draggedId && draggedId !== carnet.id) {
+                onMove?.(draggedId, carnet.id);
+              }
+            }}
+            draggable
+            onDragStart={(e) => {
+              e.dataTransfer.setData('carnetId', carnet.id);
+              e.dataTransfer.effectAllowed = 'move';
+              const ghost = e.currentTarget.cloneNode(true) as HTMLElement;
+              ghost.style.position = 'absolute';
+              ghost.style.top = '-1000px';
+              ghost.style.opacity = '0.5';
+              document.body.appendChild(ghost);
+              e.dataTransfer.setDragImage(ghost, 0, 0);
+              setTimeout(() => document.body.removeChild(ghost), 0);
+            }}
+          >
+            {isActive && (
+              <motion.div 
+                layoutId="active-indicator"
+                className="absolute -left-1 w-1 h-3.5 bg-accent rounded-full"
+              />
+            )}
+            
+            <div className="w-5 h-5 flex items-center justify-center text-concrete shrink-0">
+              {isExpanded ? (
+                <FolderOpen size={13} className={isActive ? "text-accent" : "text-concrete opacity-80"} />
+              ) : (
+                <Folder size={13} className={isActive ? "text-accent" : "text-concrete opacity-80"} />
+              )}
+            </div>
+
+            <div className="flex-1 text-left flex items-center gap-2 min-w-0">
+              <span className={`text-[12px] font-medium transition-colors truncate ${isActive ? 'text-ink font-semibold' : 'text-muted-ink group-hover:text-ink'}`}>
+                {carnet.name}
+              </span>
+              {carnet.isPrivate && <Lock size={10} className="text-concrete/60 shrink-0" />}
+            </div>
+            
+            <div className="flex items-center gap-1 opacity-0 group-hover/item:opacity-100 transition-opacity shrink-0">
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onAddSubCarnet();
+                }}
+                className="p-0.5 hover:bg-ink/10 dark:hover:bg-white/10 rounded transition-all text-concrete hover:text-ink"
+                title="Ajouter un sous-carnet"
+              >
+                <Plus size={10} />
+              </button>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onRename();
+                }}
+                className="p-0.5 hover:bg-ink/10 dark:hover:bg-white/10 rounded transition-all text-concrete hover:text-ink"
+                title="Renommer"
+              >
+                <Edit3 size={10} />
+              </button>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDelete();
+                }}
+                className="p-0.5 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-all text-concrete hover:text-red-500"
+                title="Supprimer"
+              >
+                <Trash2 size={10} />
+              </button>
+              
+              {notes.length > 0 && (
+                <span className="text-[9px] font-bold text-concrete/40 px-1 border border-border/40 rounded-full group-hover:text-concrete transition-colors">
+                  {notes.length}
+                </span>
+              )}
+            </div>
+          </motion.div>
+        </div>
+      </div>
+
+      <AnimatePresence initial={false}>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2, ease: [0.23, 1, 0.32, 1] }}
+            className="overflow-hidden"
+          >
+            <div className="relative" style={{ marginLeft: `${(level + 1) * 10 - 2}px` }}>
+              {/* Vertical line for nested content path */}
+              <div className="absolute left-[2px] top-0 bottom-3 w-px bg-black/[0.06] dark:bg-white/[0.06]" />
+              
+              <div className="space-y-0.5 py-0.5 pl-2.5">
+                {children}
+                {notes.map(note => (
+                  <NoteLink 
+                    key={note.id} 
+                    note={note} 
+                    isActive={activeNoteId === note.id}
+                    onClick={() => onNoteClick(note.id)}
+                  />
+                ))}
+                {notes.length === 0 && !React.Children.count(children) && (
+                  <p className="pl-6 py-1 text-[9px] italic text-concrete/40 font-light">
+                    Vide
+                  </p>
+                )}
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+interface SidebarProps {
+  activeView: NavigationView;
+  isSidebarOpen: boolean;
+  setIsSidebarOpen: (val: boolean) => void;
+  isDarkMode: boolean;
+  setIsDarkMode: (val: boolean) => void;
+  setActiveView: (view: NavigationView) => void;
+  setActiveSettingsTab?: (tab: SettingsTab) => void;
+  carnets: Carnet[];
+  notes: Note[];
+  activeCarnetId: string;
+  activeNoteId: string | null;
+  setActiveCarnetId: (id: string) => void;
+  setActiveNoteId: (id: string | null) => void;
+  setShowNewCarnetModal: (show: boolean, parentId?: string, isRenaming?: boolean, carnetId?: string) => void;
+  onDeleteCarnet: (id: string) => void;
+  onMoveCarnet: (draggedId: string, targetId?: string) => void;
+  onGoHome: () => void;
+  onLogout: () => void;
+  flashcards?: Flashcard[];
+  onSelectReviewDeck?: (noteId: string) => void;
+}
+
+export const Sidebar: React.FC<SidebarProps> = ({
+  activeView,
+  isSidebarOpen,
+  setIsSidebarOpen,
+  isDarkMode,
+  setIsDarkMode,
+  setActiveView,
+  setActiveSettingsTab,
+  carnets,
+  notes,
+  activeCarnetId,
+  activeNoteId,
+  setActiveCarnetId,
+  setActiveNoteId,
+  setShowNewCarnetModal,
+  onDeleteCarnet,
+  onMoveCarnet,
+  onGoHome,
+  onLogout,
+  flashcards,
+  onSelectReviewDeck
+}) => {
+  const [expandedIds, setExpandedIds] = React.useState<Set<string>>(new Set(['4', '1', '2', '3'])); // Default expand key guides
+  const [collapsedSections, setCollapsedSections] = React.useState<Set<string>>(new Set());
+  const [searchQuery, setSearchQuery] = React.useState('');
+
+  const toggleSection = (id: string) => {
+    const newSet = new Set(collapsedSections);
+    if (newSet.has(id)) newSet.delete(id);
+    else newSet.add(id);
+    setCollapsedSections(newSet);
+  };
+
+  const toggleExpand = (id: string) => {
+    const newSet = new Set(expandedIds);
+    if (newSet.has(id)) newSet.delete(id);
+    else newSet.add(id);
+    setExpandedIds(newSet);
+  };
+
+  // Safe filtration based on searches
+  const filteredCarnets = React.useMemo(() => {
+    if (!searchQuery) return carnets;
+    const q = searchQuery.toLowerCase();
+    return carnets.filter(c => 
+      c.name.toLowerCase().includes(q) || 
+      notes.some(n => n.carnetId === c.id && n.title.toLowerCase().includes(q))
+    );
+  }, [carnets, searchQuery, notes]);
+
+  const activeNote = React.useMemo(() => {
+    if (!activeNoteId) return null;
+    return notes.find(n => n.id === activeNoteId);
+  }, [notes, activeNoteId]);
+
+  // Extract outline markdown headings dynamically for the currently active note
+  const headings = React.useMemo(() => {
+    if (!activeNote || !activeNote.content) return [];
+    const lines = activeNote.content.split('\n');
+    const hs: { text: string; level: number }[] = [];
+    lines.forEach(line => {
+      const trimmed = line.trim();
+      const hMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
+      if (hMatch) {
+        hs.push({
+          level: hMatch[1].length,
+          text: hMatch[2].replace(/\[.*?\]\(.*?\)/g, '').replace(/[*_`]/g, '').trim()
+        });
+      }
+    });
+    return hs.slice(0, 10);
+  }, [activeNote]);
+
+  const renderCarnetTree = (parentId: string | undefined = undefined, level: number = 0) => {
+    return filteredCarnets
+      .filter(c => c.parentId === parentId && !c.isDeleted)
+      .map(carnet => {
+        const carnetNotes = notes.filter(n => n.carnetId === carnet.id && !n.isDeleted);
+        return (
+          <SidebarItem 
+            key={carnet.id} 
+            carnet={carnet} 
+            isActive={activeCarnetId === carnet.id}
+            notes={carnetNotes}
+            activeNoteId={activeNoteId}
+            level={level}
+            isExpanded={expandedIds.has(carnet.id)}
+            toggleExpand={() => toggleExpand(carnet.id)}
+            onAddSubCarnet={() => {
+              if (!expandedIds.has(carnet.id)) toggleExpand(carnet.id);
+              setShowNewCarnetModal(true, carnet.id);
+            }}
+            onRename={() => {
+              setShowNewCarnetModal(true, undefined, true, carnet.id);
+            }}
+            onDelete={() => {
+              onDeleteCarnet(carnet.id);
+            }}
+            onCarnetClick={() => {
+              setActiveCarnetId(carnet.id);
+              setActiveNoteId(null);
+              // Auto expand when clicking
+              if (!expandedIds.has(carnet.id)) toggleExpand(carnet.id);
+            }}
+            onNoteClick={(id) => {
+              setActiveCarnetId(carnet.id);
+              setActiveNoteId(id);
+            }}
+            onMove={onMoveCarnet}
+          >
+            {renderCarnetTree(carnet.id, level + 1)}
+          </SidebarItem>
+        );
+      });
+  };
+
+  return (
+    <>
+      <AnimatePresence>
+        {isSidebarOpen && (
+          <motion.div 
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={() => setIsSidebarOpen(false)}
+            className="fixed inset-0 bg-black/40 backdrop-blur-sm z-[60] lg:hidden"
+          />
+        )}
+      </AnimatePresence>
+
+      <aside className={`
+        fixed inset-y-0 left-0 lg:relative z-[70] lg:z-20
+        w-80 h-screen bg-white dark:bg-[#0D0D0D] border-r border-border/85 flex shrink-0 
+        transition-all duration-300 ease-in-out font-sans overflow-hidden
+        ${isSidebarOpen ? 'translate-x-0 shadow-2xl' : '-translate-x-full lg:translate-x-0'}
+      `}>
+         
+         {/* Column 1: Ultra Narrow Left Utility Active-Rail Bar -> Identical to Ribbon in SiYuan */}
+         <div className="w-[54px] border-r border-border/40 bg-[#FAF9F5] dark:bg-[#0E0E0E] flex flex-col items-center justify-between py-5 shrink-0 select-none">
+            {/* Top Stack: Logo & View Shortcuts */}
+            <div className="flex flex-col items-center gap-4.5 w-full">
+                {/* Visual SiYuan branding card */}
+                <div 
+                  onClick={() => { onGoHome(); setIsSidebarOpen(false); }}
+                  className="w-9 h-9 bg-accent hover:rotate-6 active:scale-95 flex items-center justify-center rounded-xl shadow-md transition-all cursor-pointer mb-2"
+                  title="Aller à la page d'accueil"
+                >
+                  <span className="text-white font-serif font-black text-xs tracking-tight">M</span>
+                </div>
+
+                {/* Tab items list */}
+                <div className="flex flex-col gap-2 w-full px-1.5">
+                    {[
+                      { id: 'notebooks', label: 'Feuilles / Docs', icon: <BookOpen size={16} /> },
+                      { id: 'graph', label: 'Knowledge Map', icon: <Network size={16} /> },
+                      { id: 'revision', label: 'Révisions / Decks', icon: <GraduationCap size={16} /> },
+                      { id: 'agents', label: 'Agents IA Lab', icon: <Bot size={16} /> },
+                      { id: 'reminders', label: 'Rappels & Alertes', icon: <Bell size={16} /> },
+                    ].map(item => {
+                       const isSel = activeView === item.id || (item.id === 'agents' && ['brainstorm', 'insights', 'temporal'].includes(activeView));
+                       return (
+                         <button
+                           key={item.id}
+                           onClick={() => {
+                              setActiveView(item.id as any);
+                           }}
+                           className={`w-9 h-9 rounded-lg flex items-center justify-center transition-all relative group
+                              ${isSel 
+                                ? 'bg-accent/10 text-accent border border-accent/25' 
+                                : 'text-concrete hover:text-ink dark:hover:text-dark-ink hover:bg-black/[0.03] dark:hover:bg-white/[0.03]'}`}
+                         >
+                            {/* Visual status pin */}
+                            {isSel && (
+                              <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 bg-accent rounded-r-full" />
+                            )}
+                            {item.icon}
+
+                            {/* Tooltip */}
+                            <span className="absolute left-[58px] top-1/2 -translate-y-1/2 bg-ink text-paper text-[9px] font-bold py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 pointer-events-none shadow-md uppercase tracking-wider">
+                              {item.label}
+                            </span>
+                         </button>
+                       );
+                    })}
+                </div>
+            </div>
+
+            {/* Bottom Stack: Trash, Light Mode, Settings, Logout */}
+            <div className="flex flex-col gap-2 w-full px-1.5 items-center">
+                 {/* TRASH DISCIPLINE: Promoted directly on the sidebar utility ribbon for quick accessible storage management */}
+                 <button
+                    onClick={() => {
+                       setActiveView('trash');
+                    }}
+                    className={`w-9 h-9 rounded-lg flex items-center justify-center transition-all relative group
+                       ${activeView === 'trash' 
+                         ? 'bg-rose-500/10 text-rose-500 border border-rose-500/25' 
+                         : 'text-concrete hover:text-rose-500 hover:bg-rose-500/5'}`}
+                 >
+                     {activeView === 'trash' && (
+                       <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 bg-rose-500 rounded-r-full" />
+                     )}
+                     <Trash2 size={16} />
+                     {notes.some(n => n.isDeleted) && (
+                        <span className="absolute top-1.5 right-1.5 w-1.5 h-1.5 bg-rose-500 rounded-full border border-[#FAF9F5] dark:border-[#0E0E0E]" />
+                     )}
+                     <span className="absolute left-[58px] top-1/2 -translate-y-1/2 bg-ink text-paper text-[9px] font-bold py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 pointer-events-none shadow-md uppercase tracking-wider">
+                       Corbeille / Corbeille vide
+                     </span>
+                 </button>
+
+                 {/* Shared */}
+                 <button
+                    onClick={() => {
+                       setActiveView('shared');
+                    }}
+                    className={`w-9 h-9 rounded-lg flex items-center justify-center transition-all relative group
+                       ${activeView === 'shared' 
+                         ? 'bg-[#E3EBFB] text-sky-600 dark:bg-white/10 dark:text-sky-400' 
+                         : 'text-concrete hover:text-sky-500 hover:bg-sky-500/5'}`}
+                 >
+                     {activeView === 'shared' && (
+                       <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 bg-sky-500 rounded-r-full" />
+                     )}
+                     <Users size={16} />
+                     <span className="absolute left-[58px] top-1/2 -translate-y-1/2 bg-ink text-paper text-[9px] font-bold py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 pointer-events-none shadow-md uppercase tracking-wider">
+                       Partagé
+                     </span>
+                 </button>
+
+                 {/* Web Clipper Simulator Trigger */}
+                 <button
+                    type="button"
+                    onClick={() => {
+                       window.dispatchEvent(new CustomEvent('toggle-clipper-simulator'));
+                    }}
+                    className="w-9 h-9 rounded-lg flex items-center justify-center text-concrete hover:text-cyan-500 hover:bg-cyan-500/5 transition-all relative group"
+                 >
+                    <Scissors size={15} className="-rotate-90 text-cyan-500" />
+                    <span className="absolute left-[58px] top-1/2 -translate-y-1/2 bg-[#0E0E0E] text-white text-[9.5px] font-bold py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 pointer-events-none shadow-lg uppercase tracking-wider font-sans">
+                      Clipper Simulé
+                    </span>
+                 </button>
+
+                 {/* Appearance Theme Switcher */}
+                 <button
+                   onClick={() => setIsDarkMode(!isDarkMode)}
+                   className="w-9 h-9 rounded-lg flex items-center justify-center text-concrete hover:text-ink dark:hover:text-dark-ink hover:bg-black/[0.03] dark:hover:bg-white/[0.03] transition-all relative group"
+                 >
+                   {isDarkMode ? <Sun size={15} /> : <Moon size={15} />}
+                   <span className="absolute left-[58px] top-1/2 -translate-y-1/2 bg-ink text-paper text-[9px] font-bold py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 pointer-events-none shadow-md uppercase tracking-wider">
+                     {isDarkMode ? "Mode clair" : "Mode sombre"}
+                   </span>
+                 </button>
+
+                 {/* Settings Panel */}
+                 <button
+                    onClick={() => {
+                       setActiveView('settings');
+                       setActiveSettingsTab?.('general');
+                    }}
+                    className={`w-9 h-9 rounded-lg flex items-center justify-center transition-all relative group
+                       ${activeView === 'settings' 
+                         ? 'bg-accent/10 text-accent border border-accent/25' 
+                         : 'text-concrete hover:text-ink dark:text-concrete hover:bg-black/[0.03] dark:hover:bg-white/[0.03]'}`}
+                 >
+                     <Settings size={15} />
+                     <span className="absolute left-[58px] top-1/2 -translate-y-1/2 bg-ink text-paper text-[9px] font-bold py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 pointer-events-none shadow-md uppercase tracking-wider">
+                       Paramètres
+                     </span>
+                 </button>
+
+                 {/* Logout button */}
+                 <button 
+                   onClick={onLogout}
+                   className="w-9 h-9 rounded-lg flex items-center justify-center text-concrete hover:text-red-500 hover:bg-rose-500/5 transition-all relative group"
+                 >
+                   <LogOut size={14} />
+                   <span className="absolute left-[58px] top-1/2 -translate-y-1/2 bg-ink text-paper text-[9px] font-bold py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap z-50 pointer-events-none shadow-md uppercase tracking-wider">
+                     Déconnexion
+                   </span>
+                 </button>
+            </div>
+         </div>
+
+         {/* Column 2: Large details zone (266px width) for list details - Dynamic depending on Ribbon view */}
+         <div className="flex-1 h-full bg-[#FCFCFA] dark:bg-[#111111] flex flex-col overflow-hidden">
+             
+             {/* Render notebook list detail content */}
+             {activeView === 'notebooks' && (
+                <div className="flex-1 flex flex-col p-4 overflow-hidden h-full">
+                    {/* Header */}
+                    <div className="flex items-center justify-between mb-4">
+                        <div className="flex items-center gap-1.5">
+                            <BookMarked size={14} className="text-accent" />
+                            <h3 className="text-xs font-black tracking-widest uppercase text-ink dark:text-dark-ink">Documents</h3>
+                        </div>
+                        <button 
+                          onClick={() => setShowNewCarnetModal(true)}
+                          className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded transition-all text-concrete hover:text-ink"
+                          title="Nouveau carnet parent"
+                        >
+                          <Plus size={15} />
+                        </button>
+                    </div>
+
+                    {/* Simple search bar as seen in standard file trees */}
+                    <div className="relative mb-4">
+                        <input 
+                           type="text"
+                           value={searchQuery}
+                           onChange={(e) => setSearchQuery(e.target.value)}
+                           placeholder="Rechercher doc..."
+                           className="w-full text-[11px] pl-7 pr-3 py-1.5 rounded-lg border border-border/60 bg-white/70 dark:bg-zinc-800 placeholder-concrete/50 outline-none focus:border-accent transition-colors text-ink dark:text-dark-ink"
+                        />
+                        <Search size={11} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-concrete opacity-60" />
+                        {searchQuery && (
+                          <button 
+                            onClick={() => setSearchQuery('')}
+                            className="absolute right-2.5 top-1/2 -translate-y-1/2 text-[9px] uppercase font-bold text-concrete hover:text-ink"
+                          >
+                            X
+                          </button>
+                        )}
+                    </div>
+
+                    {/* Hierarchical list of documents */}
+                    <div className="flex-1 overflow-y-auto custom-scrollbar pr-1 mb-4">
+                         <div className="space-y-0.5">
+                             {renderCarnetTree()}
+                         </div>
+                    </div>
+
+                    {/* IA Usage & Upgrade Section */}
+                    <div className="border-t border-[#E3EBFB]/60 dark:border-border/40 pt-4 mt-auto select-none">
+                        <div className="p-3 bg-slate-50/70 dark:bg-zinc-900 border border-border/40 rounded-xl space-y-2.5 shadow-[0_1px_2px_rgba(0,0,0,0.02)]">
+                            <div className="flex items-center justify-between text-[10px]">
+                                <span className="font-bold text-ink/75 dark:text-dark-ink/80 flex items-center gap-1">
+                                    <Sparkles size={11} className="text-accent" />
+                                    Utilisation de l'IA
+                                </span>
+                                <span className="font-semibold text-concrete">49 / 50 restants</span>
+                            </div>
+                            
+                            <div className="h-1 w-full bg-slate-100 dark:bg-white/5 rounded-full overflow-hidden">
+                                <div className="h-full bg-accent hover:opacity-90 transition-all rounded-full" style={{ width: '98%' }} />
+                            </div>
+
+                            <button
+                               onClick={() => {
+                                   setActiveView('settings');
+                                   setActiveSettingsTab?.('billing');
+                               }}
+                               className="w-full h-[28px] mt-1 flex items-center justify-between px-2.5 bg-accent/5 hover:bg-accent/10 hover:text-accent border border-accent/10 hover:border-accent/20 rounded-lg text-[10px] font-bold text-accent transition-all group cursor-pointer"
+                            >
+                                <span className="flex items-center gap-1.5">
+                                    <Crown size={10} className="fill-accent/10" />
+                                    Passer au Plan Pro
+                                </span>
+                                <ArrowRight size={10} className="group-hover:translate-x-0.5 transition-transform" />
+                            </button>
+                        </div>
+                    </div>
+                </div>
+             )}
+
+             {/* Render intelligence modules */}
+             {activeView === 'agents' && (
+                <div className="flex-1 flex flex-col p-4 overflow-y-auto custom-scrollbar justify-between">
+                     <div className="space-y-6">
+                         <div className="flex items-center gap-1.5">
+                             <Sparkles size={14} className="text-ochre" />
+                             <h3 className="text-xs font-black tracking-widest uppercase text-ink dark:text-dark-ink">Intelligence OS</h3>
+                         </div>
+
+                         <div className="space-y-1.5">
+                             {[
+                               { id: 'brainstorm', label: 'Brainstorm Wave', desc: 'Génération d ideas rhizomatique', icon: <Wind size={15} /> },
+                               { id: 'insights', label: 'Réseau Sémantique', desc: 'Cartographie de clusters DBSCAN', icon: <Network size={15} /> },
+                               { id: 'temporal', label: 'Temporal Forecast', desc: 'Chronologie et prévisions', icon: <Clock size={15} /> },
+                             ].map(sub => (
+                               <button
+                                 key={sub.id}
+                                 onClick={() => setActiveView(sub.id as any)}
+                                 className="w-full text-left p-3 rounded-xl border border-border/30 hover:border-accent/30 bg-white dark:bg-zinc-800/50 hover:shadow-xs transition-all flex items-start gap-3 group"
+                               >
+                                 <div className="w-8 h-8 rounded-lg flex items-center justify-center bg-black/[0.03] dark:bg-white/[0.03] text-concrete group-hover:text-accent group-hover:bg-accent/5 transition-all shrink-0">
+                                   {sub.icon}
+                                 </div>
+                                 <div className="truncate">
+                                   <p className="text-[12px] font-bold text-ink dark:text-dark-ink group-hover:text-accent transition-colors">{sub.label}</p>
+                                   <p className="text-[9px] text-concrete truncate mt-0.5">{sub.desc}</p>
+                                 </div>
+                               </button>
+                             ))}
+                         </div>
+                     </div>
+
+                     {/* Pack quota discovery */}
+                     <div className="p-3.5 bg-white dark:bg-zinc-800 border border-border/40 rounded-xl space-y-2 mt-auto">
+                        <div className="flex items-center justify-between text-[10px]">
+                            <span className="font-bold text-ink/70">Pack Découverte IA</span>
+                            <span className="font-semibold text-concrete">49 restants</span>
+                        </div>
+                        <div className="h-1 w-full bg-slate-200 dark:bg-white/10 rounded-full overflow-hidden">
+                          <div className="h-full bg-accent" style={{ width: '49%' }} />
+                        </div>
+                     </div>
+                </div>
+             )}
+
+             {/* Reminders section list view */}
+             {activeView === 'reminders' && (
+                <div className="flex-1 flex flex-col p-4 overflow-y-auto custom-scrollbar">
+                     <div className="flex items-center gap-1.5 mb-6">
+                         <Clock size={14} className="text-indigo-500" />
+                         <h3 className="text-xs font-black tracking-widest uppercase text-ink dark:text-dark-ink">Rappels Actifs</h3>
+                     </div>
+
+                     <div className="flex-1 flex flex-col items-center justify-center text-center p-4 border border-dashed border-border/50 rounded-2xl bg-paper/20">
+                          <Bell size={20} className="text-concrete/40 mb-2.5" />
+                          <p className="text-[11px] text-concrete italic">Aucun rappel pour le moment.</p>
+                     </div>
+                </div>
+             )}
+
+             {/* Flashcards / Révisions panel view inside Column 2 of Sidebar */}
+             {activeView === 'revision' && (
+                <div className="flex-1 flex flex-col p-4 overflow-y-auto custom-scrollbar">
+                     <div className="flex items-center gap-1.5 mb-6">
+                         <GraduationCap size={14} className="text-accent" />
+                         <h3 className="text-xs font-black tracking-widest uppercase text-ink dark:text-dark-ink">Decks Révision</h3>
+                     </div>
+
+                     <div className="space-y-3">
+                         {(() => {
+                            const deckNotesList: { noteId: string; title: string; count: number; mastery: number }[] = [];
+                            const cardGroups: Record<string, Flashcard[]> = {};
+                            (flashcards || []).forEach(card => {
+                              if (!cardGroups[card.noteId]) cardGroups[card.noteId] = [];
+                              cardGroups[card.noteId].push(card);
+                            });
+
+                            Object.keys(cardGroups).forEach(noteId => {
+                              const noteItem = notes.find(n => n.id === noteId);
+                              if (!noteItem || noteItem.isDeleted) return;
+                              const cList = cardGroups[noteId];
+                              const mastered = cList.filter(c => c.mastered).length;
+                              deckNotesList.push({
+                                noteId,
+                                title: noteItem.title || 'Note sans titre',
+                                count: cList.length,
+                                mastery: cList.length > 0 ? mastered / cList.length : 0
+                              });
+                            });
+
+                            return deckNotesList.map(deck => (
+                              <button
+                                key={deck.noteId}
+                                onClick={() => {
+                                  onSelectReviewDeck?.(deck.noteId);
+                                }}
+                                className="w-full text-left p-2.5 rounded-xl border border-border/40 hover:border-accent/30 bg-white dark:bg-zinc-800/40 hover:shadow-2xs transition-all flex items-start gap-2.5 group cursor-pointer"
+                              >
+                                <div className="w-7 h-7 bg-accent/5 text-accent rounded-lg flex items-center justify-center shrink-0 group-hover:bg-accent group-hover:text-white transition-all">
+                                  <GraduationCap size={13} />
+                                </div>
+                                <div className="truncate flex-1 min-w-0">
+                                  <p className="text-[11px] font-bold text-ink dark:text-dark-ink truncate group-hover:text-accent transition-colors">
+                                    {deck.title}
+                                  </p>
+                                  <p className="text-[8.5px] text-concrete truncate mt-0.5">
+                                    {deck.count} cartes · {Math.round(deck.mastery * 100)}% acquis
+                                  </p>
+                                </div>
+                              </button>
+                            ));
+                         })()}
+
+                         {(!flashcards || flashcards.length === 0) && (
+                            <div className="flex flex-col items-center justify-center text-center p-4 border border-dashed border-border/55 rounded-2xl bg-paper/20">
+                                 <GraduationCap size={18} className="text-concrete/40 mb-2" />
+                                 <p className="text-[10px] text-concrete italic">Aucun deck créé.</p>
+                            </div>
+                         )}
+                     </div>
+                </div>
+             )}
+
+             {/* Shared panel view */}
+             {activeView === 'shared' && (
+                <div className="flex-1 flex flex-col p-4 overflow-y-auto custom-scrollbar">
+                     <div className="flex items-center gap-1.5 mb-6">
+                         <Users size={14} className="text-sky-500" />
+                         <h3 className="text-xs font-black tracking-widest uppercase text-ink dark:text-dark-ink">Partagé avec moi</h3>
+                     </div>
+
+                     <div className="flex-1 flex flex-col items-center justify-center text-center p-4 border border-dashed border-border/50 rounded-2xl bg-paper/20">
+                          <Users size={20} className="text-concrete/40 mb-2.5" />
+                          <p className="text-[11px] text-concrete italic">Aucun document partagé pour le moment.</p>
+                     </div>
+                </div>
+             )}
+
+             {/* Trash bin panel view */}
+             {activeView === 'trash' && (
+                <div className="flex-1 flex flex-col p-4 h-full overflow-hidden">
+                     <div className="flex items-center gap-1.5 mb-4">
+                         <Trash2 size={14} className="text-rose-500" />
+                         <h3 className="text-xs font-black tracking-widest uppercase text-ink dark:text-dark-ink">Fichiers Supprimés</h3>
+                     </div>
+
+                     <div className="flex-1 overflow-y-auto custom-scrollbar pr-1 space-y-2 mb-4">
+                         {notes.filter(n => n.isDeleted).map(note => (
+                             <div 
+                                key={note.id} 
+                                className="p-2.5 rounded-lg border border-border/40 bg-white dark:bg-zinc-800/40 text-left flex items-center justify-between gap-3 group"
+                             >
+                                 <div className="truncate flex-1">
+                                     <p className="text-[11px] font-bold text-ink dark:text-dark-ink truncate">{note.title || "Note sans titre"}</p>
+                                     <p className="text-[8.5px] text-concrete">Supprimé le {new Date(note.deletedAt || note.date).toLocaleDateString('fr-FR')}</p>
+                                 </div>
+                                 <button
+                                    onClick={() => {
+                                      setActiveCarnetId(note.carnetId);
+                                      setActiveNoteId(note.id);
+                                    }}
+                                    className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded text-[9px] font-bold uppercase tracking-wider text-accent shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                                 >
+                                    Inspecter
+                                 </button>
+                             </div>
+                         ))}
+                         {notes.filter(n => n.isDeleted).length === 0 && (
+                             <div className="flex-1 h-32 flex flex-col items-center justify-center text-center p-4 border border-dashed border-border/55 bg-black/[0.01] rounded-2xl">
+                                  <Trash2 size={16} className="text-concrete/30 mb-2" />
+                                  <p className="text-[10px] text-concrete italic">Corbeille vide</p>
+                             </div>
+                         )}
+                     </div>
+                </div>
+             )}
+
+             {/* Settings panel category switcher list */}
+             {activeView === 'settings' && (
+                <div className="flex-1 flex flex-col p-4 overflow-y-auto custom-scrollbar">
+                     <div className="flex items-center gap-1.5 mb-6">
+                         <Settings size={14} className="text-accent" />
+                         <h3 className="text-xs font-black tracking-widest uppercase text-ink dark:text-dark-ink">Paramètres</h3>
+                     </div>
+
+                     <div className="space-y-1">
+                          {[
+                            { id: 'general', label: 'Général', icon: <Archive size={12} /> },
+                            { id: 'ai', label: 'Intelligence IA', icon: <Bot size={12} /> },
+                            { id: 'billing', label: 'Tarifs & Abonnements', icon: <Sparkles size={12} /> },
+                            { id: 'appearance', label: 'Thème & Stylisme', icon: <Sun size={12} /> },
+                            { id: 'profile', label: 'Profil Utilisateur', icon: <User size={12} /> },
+                          ].map(tab => (
+                             <button
+                               key={tab.id}
+                               onClick={() => setActiveSettingsTab?.(tab.id as any)}
+                               className="w-full text-left px-3 py-2 text-[11px] transition-all rounded-lg flex items-center gap-2.5 text-muted-ink hover:text-ink hover:bg-black/5"
+                             >
+                                 <span className="text-concrete">{tab.icon}</span>
+                                 <span className="font-semibold">{tab.label}</span>
+                             </button>
+                          ))}
+                     </div>
+                </div>
+             )}
+
+         </div>
+
+      </aside>
+    </>
+  );
+};

architectural-grid/src/components/SlashMenu.tsx

@@ -7,7 +7,8 @@ import {
   Code, 
   Image as ImageIcon, 
   Type,
-  Sparkles
+  Sparkles,
+  Link2
 } from 'lucide-react';
 import { motion, AnimatePresence } from 'motion/react';
 
@@ -25,6 +26,7 @@ export const SlashMenu: React.FC<SlashMenuProps> = ({ position, onSelect, onClos
     { id: 'quote', label: 'Citation', icon: <Quote size={14} />, desc: 'Bloc de texte mis en avant' },
     { id: 'code', label: 'Bloc de Code', icon: <Code size={14} />, desc: 'Code ou texte technique' },
     { id: 'image', label: 'Image', icon: <ImageIcon size={14} />, desc: 'Insérer un visuel' },
+    { id: 'embed', label: 'Living Block', icon: <Link2 size={14} />, desc: 'Insérer un bloc connecté dynamique', special: true },
     { id: 'ai-summary', label: 'Résumé IA', icon: <Sparkles size={14} />, desc: 'Générer un résumé court', special: true },
   ];
 

architectural-grid/src/components/settings/AppearanceTab.tsx

@@ -38,14 +38,14 @@ interface AppearanceTabProps {
 }
 
 const PRESET_COLORS = [
-  { name: 'Warm Earth', value: '#A47148' },
-  { name: 'Indigo', value: '#6366F1' },
-  { name: 'Rose', value: '#F43F5E' },
-  { name: 'Emerald', value: '#10B981' },
-  { name: 'Amber', value: '#F59E0B' },
-  { name: 'Slate', value: '#475569' },
-  { name: 'Crimson', value: '#DC2626' },
-  { name: 'Ocean', value: '#0EA5E9' },
+  { name: 'Ochre Swiss', value: '#A47148' },
+  { name: 'Alpine Moss', value: '#4E594A' },
+  { name: 'Terracotta', value: '#B1523E' },
+  { name: 'Slate Steel', value: '#4A5568' },
+  { name: 'Midnight', value: '#1E293B' },
+  { name: 'Sage Leaf', value: '#7C8363' },
+  { name: 'Bordeaux', value: '#722F37' },
+  { name: 'Carbon', value: '#262626' },
 ];
 
 export const AppearanceTab: React.FC<AppearanceTabProps> = ({ accentColor, onAccentColorChange }) => {

architectural-grid/src/constants.ts

@@ -16,7 +16,7 @@ export const ALL_NOTES: Note[] = [
     carnetId: '4',
     title: 'Grid Systems & Geometry',
     date: 'Oct 26, 2024',
-    content: 'Grid Systems are the foundation of cognitive design. We use geometric blocks to define spaces. The repetitive structure creates a sense of order and rhythm in the built environment.',
+    content: 'Grid Systems are the foundation of cognitive design. We use geometric blocks to define spaces. The repetitive structure creates a sense of order and rhythm in the built environment.\n\n- [ ] Finaliser l\'étude de la géométrie sacrée\n- [x] Tracer les grilles orthogonales préliminaires',
     imageUrl: 'https://images.unsplash.com/photo-1503387762-592dea58ef23?auto=format&fit=crop&q=80&w=800&h=600',
     tags: [
       { id: 't1', label: 'Architecture', type: 'user' },
@@ -29,7 +29,7 @@ export const ALL_NOTES: Note[] = [
     carnetId: '4',
     title: 'Parametric Grids',
     date: 'Oct 27, 2024',
-    content: 'Parametricism allows us to deform traditional grid systems. By using mathematical algorithms, we can create fluid yet structured geometries that respond to environmental data.',
+    content: 'Parametricism allows us to deform traditional grid systems. By using mathematical algorithms, we can create fluid yet structured geometries that respond to environmental data.\n\n- [ ] Valider l\'algorithme de déformation spatiale\n- [ ] Tester les nœuds structurels imprimés en 3D',
     imageUrl: 'https://images.unsplash.com/photo-1511225070737-5af5ac9a690d?auto=format&fit=crop&q=80&w=800&h=600',
     tags: [{ id: 't1', label: 'Geometry', type: 'user' }],
     embedding: [0.12, 0.08]
@@ -39,7 +39,7 @@ export const ALL_NOTES: Note[] = [
     carnetId: '4',
     title: 'Sustainable Materiality',
     date: 'Oct 24, 2024',
-    content: 'Exploring cross-laminated timber (CLT) as a sustainable alternative to concrete. Material choice is key to carbon-neutral construction. The warmth of wood contrasts with the coldness of steel.',
+    content: 'Exploring cross-laminated timber (CLT) as a sustainable alternative to concrete. Material choice is key to carbon-neutral construction. The warmth of wood contrasts with the coldness of steel.\n\n- [ ] Contacter le fournisseur de CLT local\n- [ ] Estimer le ratio d\'émission de carbone évitée',
     imageUrl: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=800&h=600',
     tags: [
       { id: 't3', label: 'Materials', type: 'user' },
@@ -52,7 +52,7 @@ export const ALL_NOTES: Note[] = [
     carnetId: '7',
     title: 'Solar Passive Design',
     date: 'Oct 25, 2024',
-    content: 'Using orientation to maximize natural heat. Sustainable architecture must prioritize passive systems over active ones. Thermal mass and insulation are critical factors.',
+    content: 'Using orientation to maximize natural heat. Sustainable architecture must prioritize passive systems over active ones. Thermal mass and insulation are critical factors.\n\n- [x] Simuler l\'ensoleillement d\'hiver sur la façade sud\n- [ ] Calculer l\'épaisseur d\'isolation en fibre de bois',
     imageUrl: 'https://images.unsplash.com/photo-1509391366360-fe5bb5843e0c?auto=format&fit=crop&q=80&w=800&h=600',
     tags: [{ id: 't4', label: 'Sustainabilty', type: 'user' }],
     embedding: [0.85, 0.75]

architectural-grid/src/services/clusteringService.ts

@@ -226,3 +226,17 @@ export function calculateCentroid(noteIds: string[], allNotes: Note[]): number[]
 
   return centroid;
 }
+
+export function getMostCentralNoteTitles(noteIds: string[], centroid: number[] | undefined, allNotes: Note[], count: number = 5): string[] {
+  const clusterNotes = allNotes.filter(n => noteIds.includes(n.id) && n.embedding);
+  if (clusterNotes.length === 0) return [];
+  if (!centroid) return clusterNotes.slice(0, count).map(n => n.title);
+
+  const scored = clusterNotes.map(n => ({
+    title: n.title,
+    similarity: cosineSimilarity(n.embedding!, centroid)
+  }));
+
+  scored.sort((a, b) => b.similarity - a.similarity);
+  return scored.slice(0, count).map(item => item.title);
+}

architectural-grid/src/services/geminiService.ts

@@ -251,3 +251,63 @@ export async function extractActionItems(notes: { title: string; content: string
     return "Erreur lors de l'extraction des tâches.";
   }
 }
+
+const FLASHCARDS_SCHEMA = {
+  type: Type.OBJECT,
+  properties: {
+    flashcards: {
+      type: Type.ARRAY,
+      items: {
+        type: Type.OBJECT,
+        properties: {
+          question: { type: Type.STRING },
+          answer: { type: Type.STRING }
+        },
+        required: ["question", "answer"]
+      }
+    }
+  },
+  required: ["flashcards"]
+};
+
+export async function generateFlashcardsForNote(
+  noteTitle: string,
+  noteContent: string
+): Promise<{ question: string; answer: string }[]> {
+  const prompt = `
+    Titre de la note : "${noteTitle}"
+    Contenu de la note :
+    ${noteContent}
+
+    Génère entre 4 et 8 flashcards (paires question/réponse) d'apprentissage basées sur le contenu ci-dessus.
+    
+    Règles de style :
+    - Les questions doivent être claires et guider vers une révision active (ex: "Quelle est la particularité de... ?", "Pourquoi utilise-t-on... ?").
+    - Les réponses doivent être courtes et percutantes.
+    - Langue : Français.
+    - Format de retour : JSON correspondant au schéma.
+  `;
+
+  try {
+    const response = await ai.models.generateContent({
+      model: "gemini-3.5-flash",
+      contents: [{ role: "user", parts: [{ text: prompt }] }],
+      config: {
+        systemInstruction: "Tu es un assistant de révision agile. Tu convertis le contenu d'un cours ou d'une note en de superbes flashcards mémo-techniques.",
+        responseMimeType: "application/json",
+        responseSchema: FLASHCARDS_SCHEMA,
+        temperature: 0.7
+      }
+    });
+
+    const resText = response.text;
+    if (!resText) return [];
+
+    const parsed = JSON.parse(resText.replace(/^```json\n?/, '').replace(/\n?```$/, '').trim());
+    return Array.isArray(parsed.flashcards) ? parsed.flashcards : (Array.isArray(parsed) ? parsed : []);
+  } catch (error) {
+    console.error("Error generating flashcards with Gemini:", error);
+    return [];
+  }
+}
+

architectural-grid/src/types.ts

@@ -1,6 +1,6 @@
-export type NavigationView = 'notebooks' | 'agents' | 'settings' | 'shared' | 'reminders' | 'trash' | 'brainstorm' | 'insights' | 'temporal';
+export type NavigationView = 'notebooks' | 'agents' | 'settings' | 'shared' | 'reminders' | 'trash' | 'brainstorm' | 'insights' | 'temporal' | 'graph' | 'revision';
 export type AITone = 'Professional' | 'Creative' | 'Academic' | 'Casual';
-export type AITab = 'discussion' | 'actions' | 'resources' | 'explore';
+export type AITab = 'infos' | 'versions' | 'relations' | 'discussion' | 'actions' | 'resources' | 'explore';
 export type SettingsTab = 'general' | 'ai' | 'billing' | 'appearance' | 'profile' | 'data' | 'mcp' | 'about';
 
 export interface Tag {
@@ -18,6 +18,14 @@ export interface Attachment {
   isProcessed?: boolean;
 }
 
+export interface NoteVersion {
+  id: string;
+  title: string;
+  content: string;
+  timestamp: string;
+  size: number;
+}
+
 export interface Note {
   id: string;
   carnetId: string;
@@ -32,6 +40,12 @@ export interface Note {
   deletedAt?: string;
   embedding?: number[];
   clusterId?: string;
+  isClipped?: boolean;
+  clipSourceUrl?: string;
+  clipFavicon?: string;
+  clipDate?: string;
+  isVersioningEnabled?: boolean;
+  versionHistory?: NoteVersion[];
 }
 
 export interface NoteCluster {
@@ -110,3 +124,30 @@ export interface NotePrediction {
   generatedAt: string;
 }
 
+export type FlashcardEvaluation = 'fail' | 'hesitant' | 'sure';
+
+export interface Flashcard {
+  id: string;
+  noteId: string;
+  question: string;
+  answer: string;
+  intervalDays: number; // For spaced repetition
+  nextReviewDate: string; // ISO String
+  easeFactor: number;
+  mastered: boolean;
+  history?: {
+    reviewedAt: string;
+    evaluation: FlashcardEvaluation;
+  }[];
+}
+
+export interface FlashcardDeck {
+  noteId: string;
+  title: string;
+  cardsCount: number;
+  nextReviewDate: string; // Min nextReviewDate of all cards
+  masteryScore: number; // Proportion of cards evaluation === 'sure'
+  cards: Flashcard[];
+}
+
+

architectural-grid10/metadata.json

@@ -1,6 +0,0 @@
-{
-  "name": "Architectural Grid",
-  "description": "A minimalist notebook for architectural research and conceptual sketches.",
-  "requestFramePermissions": [],
-  "majorCapabilities": []
-}

architectural-grid10/package.json

@@ -1,34 +0,0 @@
-{
-  "name": "react-example",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite --port=3000 --host=0.0.0.0",
-    "build": "vite build",
-    "preview": "vite preview",
-    "clean": "rm -rf dist",
-    "lint": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@google/genai": "^1.29.0",
-    "@tailwindcss/vite": "^4.1.14",
-    "@vitejs/plugin-react": "^5.0.4",
-    "lucide-react": "^0.546.0",
-    "react": "^19.0.1",
-    "react-dom": "^19.0.1",
-    "vite": "^6.2.3",
-    "express": "^4.21.2",
-    "dotenv": "^17.2.3",
-    "motion": "^12.23.24"
-  },
-  "devDependencies": {
-    "@types/node": "^22.14.0",
-    "autoprefixer": "^10.4.21",
-    "tailwindcss": "^4.1.14",
-    "tsx": "^4.21.0",
-    "typescript": "~5.8.2",
-    "vite": "^6.2.3",
-    "@types/express": "^4.17.21"
-  }
-}

architectural-grid10/src/App.tsx

@@ -1,450 +0,0 @@
-/**
- * @license
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React, { useState, useMemo } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-
-// Components
-import { Sidebar } from './components/Sidebar';
-import { NotebooksView } from './components/NotebooksView';
-import { AgentsView } from './components/AgentsView';
-import { SettingsView } from './components/SettingsView';
-import { TrashView } from './components/TrashView';
-import { AISidebar } from './components/AISidebar';
-import { SlashMenu } from './components/SlashMenu';
-
-// Data & Types
-import { CARNETS, ALL_NOTES } from './constants';
-import { NavigationView, SettingsTab, AITab, AITone, Carnet, Note } from './types';
-
-export default function App() {
-  const [activeView, setActiveView] = useState<NavigationView>('notebooks');
-  const [activeSettingsTab, setActiveSettingsTab] = useState<SettingsTab>('general');
-  const [selectedAgentId, setSelectedAgentId] = useState<string | null>(null);
-  const [isDarkMode, setIsDarkMode] = useState(false);
-  const [carnets, setCarnets] = useState<Carnet[]>(CARNETS);
-  const [notes, setNotes] = useState<Note[]>(ALL_NOTES);
-  const [activeCarnetId, setActiveCarnetId] = useState('4');
-  const [activeNoteId, setActiveNoteId] = useState<string | null>(null);
-  const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
-  const [isAISidebarOpen, setIsAISidebarOpen] = useState(false);
-  const [aiTab, setAiTab] = useState<AITab>('discussion');
-  const [selectedTone, setSelectedTone] = useState<AITone>('Professional');
-  
-  // Modal States
-  const [showNewCarnetModal, setShowNewCarnetModal] = useState<{ isOpen: boolean; parentId?: string; isRenaming?: boolean; carnetId?: string }>({ isOpen: false });
-  const [showNewNoteModal, setShowNewNoteModal] = useState(false);
-  const [slashMenu, setSlashMenu] = useState<{ isOpen: boolean; top: number; left: number } | null>(null);
-  
-  // Form States
-  const [newCarnetName, setNewCarnetName] = useState('');
-  const [newNoteTitle, setNewNoteTitle] = useState('');
-  const [newNoteContent, setNewNoteContent] = useState('');
-
-  const handleEditorKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === '/') {
-      const selection = window.getSelection();
-      if (selection && selection.rangeCount > 0) {
-        const range = selection.getRangeAt(0);
-        const rect = range.getBoundingClientRect();
-        setSlashMenu({
-          isOpen: true,
-          top: rect.bottom + window.scrollY,
-          left: rect.left + window.scrollX
-        });
-      }
-    }
-  };
-
-  const togglePin = (noteId: string) => {
-    setNotes(notes.map(n => n.id === noteId ? { ...n, isPinned: !n.isPinned } : n));
-  };
-
-  const filteredNotes = useMemo(() => {
-    let result = notes.filter(n => n.carnetId === activeCarnetId && !n.isDeleted);
-    
-    if (selectedTagIds.length > 0) {
-      result = result.filter(note => 
-        selectedTagIds.every(tagId => note.tags?.some(tag => tag.id === tagId))
-      );
-    }
-
-    return [...result].sort((a, b) => {
-      if (a.isPinned && !b.isPinned) return -1;
-      if (!a.isPinned && b.isPinned) return 1;
-      return 0;
-    });
-  }, [activeCarnetId, notes]);
-
-  const activeNote = useMemo(() => 
-    notes.find(n => n.id === activeNoteId),
-  [activeNoteId, notes]);
-
-  const activeCarnet = useMemo(() => 
-    carnets.find(c => c.id === activeCarnetId),
-  [activeCarnetId, carnets]);
-
-  const handleAddCarnet = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!newCarnetName.trim()) return;
-    
-    if (showNewCarnetModal.isRenaming && showNewCarnetModal.carnetId) {
-      setCarnets(carnets.map(c => c.id === showNewCarnetModal.carnetId ? { ...c, name: newCarnetName, initial: newCarnetName.charAt(0).toUpperCase() } : c));
-      setShowNewCarnetModal({ isOpen: false });
-      setNewCarnetName('');
-      return;
-    }
-
-    const newCarnet: Carnet = {
-      id: Date.now().toString(),
-      name: newCarnetName,
-      initial: newCarnetName.charAt(0).toUpperCase(),
-      type: 'Project',
-      parentId: showNewCarnetModal.parentId
-    };
-    
-    setCarnets([...carnets, newCarnet]);
-    setNewCarnetName('');
-    setShowNewCarnetModal({ isOpen: false });
-    setActiveCarnetId(newCarnet.id);
-  };
-
-  const handleDeleteCarnet = (id: string) => {
-    if (window.confirm('Déplacer ce carnet et ses sous-carnets vers la corbeille ?')) {
-      const idsToDelete = new Set<string>([id]);
-      
-      const addChildren = (parentId: string) => {
-        carnets.forEach(c => {
-          if (c.parentId === parentId) {
-            idsToDelete.add(c.id);
-            addChildren(c.id);
-          }
-        });
-      };
-      addChildren(id);
-      
-      const deletedAt = new Date().toISOString();
-      setCarnets(carnets.map(c => idsToDelete.has(c.id) ? { ...c, isDeleted: true, deletedAt } : c));
-      setNotes(notes.map(n => idsToDelete.has(n.carnetId) ? { ...n, isDeleted: true, deletedAt } : n));
-      
-      if (idsToDelete.has(activeCarnetId)) {
-        setActiveCarnetId('1');
-      }
-    }
-  };
-
-  const handleDeleteNote = (id: string) => {
-    const deletedAt = new Date().toISOString();
-    setNotes(notes.map(n => n.id === id ? { ...n, isDeleted: true, deletedAt } : n));
-    if (activeNoteId === id) setActiveNoteId(null);
-  };
-
-  const handleRestoreCarnet = (id: string) => {
-    setCarnets(carnets.map(c => c.id === id ? { ...c, isDeleted: false, deletedAt: undefined } : c));
-    // Optionally restore linked notes too? User might expect that.
-    setNotes(notes.map(n => n.carnetId === id ? { ...n, isDeleted: false, deletedAt: undefined } : n));
-  };
-
-  const handleRestoreNote = (id: string) => {
-    setNotes(notes.map(n => n.id === id ? { ...n, isDeleted: false, deletedAt: undefined } : n));
-  };
-
-  const handlePermanentDeleteNote = (id: string) => {
-    setNotes(notes.filter(n => n.id !== id));
-  };
-
-  const handlePermanentDeleteCarnet = (id: string) => {
-    const idsToDelete = new Set<string>([id]);
-    const addChildren = (parentId: string) => {
-      carnets.forEach(c => {
-        if (c.parentId === parentId) {
-          idsToDelete.add(c.id);
-          addChildren(c.id);
-        }
-      });
-    };
-    addChildren(id);
-    setCarnets(carnets.filter(c => !idsToDelete.has(c.id)));
-    setNotes(notes.filter(n => !idsToDelete.has(n.carnetId)));
-  };
-
-  const handleAddNote = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!newNoteTitle.trim() || !newNoteContent.trim()) return;
-
-    const newNote: Note = {
-      id: `n-${Date.now()}`,
-      carnetId: activeCarnetId,
-      title: newNoteTitle,
-      date: new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(new Date()),
-      content: newNoteContent,
-      imageUrl: 'https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&q=80&w=800&h=600',
-      tags: []
-    };
-
-    setNotes([newNote, ...notes]);
-    setNewNoteTitle('');
-    setNewNoteContent('');
-    setShowNewNoteModal(false);
-    setActiveNoteId(newNote.id);
-  };
-
-  return (
-    <div className={`h-screen flex bg-paper transition-colors duration-500 overflow-hidden font-sans ${isDarkMode ? 'dark' : ''}`}>
-      <Sidebar 
-        activeView={activeView}
-        isDarkMode={isDarkMode}
-        setIsDarkMode={setIsDarkMode}
-        setActiveView={setActiveView}
-        carnets={carnets}
-        notes={notes}
-        activeCarnetId={activeCarnetId}
-        activeNoteId={activeNoteId}
-        setActiveCarnetId={setActiveCarnetId}
-        setActiveNoteId={setActiveNoteId}
-        setShowNewCarnetModal={(show, parentId, isRenaming, carnetId) => {
-          setShowNewCarnetModal({ isOpen: show, parentId, isRenaming, carnetId });
-          if (isRenaming && carnetId) {
-            const carnet = carnets.find(c => c.id === carnetId);
-            if (carnet) setNewCarnetName(carnet.name);
-          } else {
-            setNewCarnetName('');
-          }
-        }}
-        onDeleteCarnet={handleDeleteCarnet}
-      />
-
-      <main className="flex-1 relative overflow-hidden flex bg-paper dark:bg-dark-paper transition-colors duration-500">
-        <AnimatePresence mode="wait">
-          {(activeView === 'notebooks' || activeView === 'shared' || activeView === 'reminders') && (
-            <motion.div
-              key={activeView}
-              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -20 }}
-              transition={{ duration: 0.3 }}
-              className="h-full w-full"
-            >
-              <NotebooksView 
-                activeNoteId={activeNoteId}
-                activeCarnet={activeCarnet}
-                filteredNotes={filteredNotes}
-                activeNote={activeNote}
-                setActiveNoteId={setActiveNoteId}
-                togglePin={togglePin}
-                setShowNewNoteModal={setShowNewNoteModal}
-                isAISidebarOpen={isAISidebarOpen}
-                setIsAISidebarOpen={setIsAISidebarOpen}
-                selectedTagIds={selectedTagIds}
-                setSelectedTagIds={setSelectedTagIds}
-                allNotes={notes}
-                activeCarnetId={activeCarnetId}
-                setShowNewCarnetModal={(show, parentId, isRenaming, carnetId) => setShowNewCarnetModal({ isOpen: show, parentId, isRenaming, carnetId })}
-                onDeleteNote={handleDeleteNote}
-              />
-            </motion.div>
-          )}
-
-          {activeView === 'trash' && (
-            <motion.div
-              key="trash"
-              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -20 }}
-              transition={{ duration: 0.3 }}
-              className="h-full w-full"
-            >
-              <TrashView 
-                deletedNotes={notes.filter(n => n.isDeleted)}
-                deletedCarnets={carnets.filter(c => c.isDeleted)}
-                onRestoreNote={handleRestoreNote}
-                onRestoreCarnet={handleRestoreCarnet}
-                onPermanentDeleteNote={handlePermanentDeleteNote}
-                onPermanentDeleteCarnet={handlePermanentDeleteCarnet}
-                onEmptyTrash={() => {
-                  setNotes(notes.filter(n => !n.isDeleted));
-                  setCarnets(carnets.filter(c => !c.isDeleted));
-                }}
-              />
-            </motion.div>
-          )}
-
-          {activeView === 'agents' && (
-            <motion.div
-              key="agents"
-              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -20 }}
-              transition={{ duration: 0.3 }}
-              className="h-full w-full"
-            >
-              <AgentsView 
-                selectedAgentId={selectedAgentId}
-                setSelectedAgentId={setSelectedAgentId}
-                carnets={carnets}
-              />
-            </motion.div>
-          )}
-
-          {activeView === 'settings' && (
-            <motion.div
-              key="settings"
-              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -20 }}
-              transition={{ duration: 0.3 }}
-              className="h-full w-full"
-            >
-              <SettingsView 
-                activeSettingsTab={activeSettingsTab}
-                setActiveSettingsTab={setActiveSettingsTab}
-              />
-            </motion.div>
-          )}
-        </AnimatePresence>
-
-        <AISidebar 
-          isOpen={isAISidebarOpen}
-          setIsOpen={setIsAISidebarOpen}
-          activeNote={activeNote}
-          aiTab={aiTab}
-          setAiTab={setAiTab}
-          selectedTone={selectedTone}
-          setSelectedTone={setSelectedTone}
-          carnets={carnets}
-        />
-      </main>
-
-      {/* Modals */}
-      <AnimatePresence>
-        {showNewCarnetModal.isOpen && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-            <motion.div 
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              onClick={() => setShowNewCarnetModal({ isOpen: false })}
-              className="absolute inset-0 bg-ink/40 backdrop-blur-sm"
-            />
-            <motion.div
-              initial={{ opacity: 0, scale: 0.9, y: 20 }}
-              animate={{ opacity: 1, scale: 1, y: 0 }}
-              exit={{ opacity: 0, scale: 0.9, y: 20 }}
-              className="relative w-full max-w-md bg-paper dark:bg-dark-paper border border-border shadow-2xl rounded-2xl p-8"
-            >
-              <h3 className="text-2xl font-serif font-medium text-ink dark:text-dark-ink mb-2">
-                {showNewCarnetModal.isRenaming ? 'Rename Carnet' : (showNewCarnetModal.parentId ? 'Create Sub-Carnet' : 'Create New Carnet')}
-              </h3>
-              {showNewCarnetModal.parentId && !showNewCarnetModal.isRenaming && (
-                <p className="text-[10px] text-concrete uppercase tracking-widest font-bold mb-6">
-                  Inside: {carnets.find(c => c.id === showNewCarnetModal.parentId)?.name}
-                </p>
-              )}
-              <form onSubmit={handleAddCarnet} className="space-y-6">
-                <div>
-                  <label className="block text-[11px] uppercase tracking-widest font-bold text-muted-ink mb-2">Notebook Name</label>
-                  <input 
-                    autoFocus
-                    type="text" 
-                    value={newCarnetName}
-                    onChange={(e) => setNewCarnetName(e.target.value)}
-                    placeholder="E.g., Sustainable Patterns"
-                    className="w-full bg-white dark:bg-[#2A2A2A] border border-border rounded-lg px-4 py-3 outline-none focus:border-ink transition-colors font-serif italic text-lg text-ink dark:text-dark-ink"
-                  />
-                </div>
-                <div className="flex gap-4 pt-4">
-                  <button 
-                    type="button"
-                    onClick={() => {
-                      setShowNewCarnetModal({ isOpen: false });
-                      setNewCarnetName('');
-                    }}
-                    className="flex-1 py-3 border border-border rounded-lg text-sm font-medium hover:bg-slate-50 dark:hover:bg-white/5 transition-colors text-ink dark:text-dark-ink"
-                  >
-                    Cancel
-                  </button>
-                  <button 
-                    type="submit"
-                    className="flex-1 py-3 bg-ink dark:bg-ochre text-paper rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
-                  >
-                    {showNewCarnetModal.isRenaming ? 'Rename' : 'Create Notebook'}
-                  </button>
-                </div>
-              </form>
-            </motion.div>
-          </div>
-        )}
-
-        {showNewNoteModal && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-            <motion.div 
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              onClick={() => setShowNewNoteModal(false)}
-              className="absolute inset-0 bg-ink/40 backdrop-blur-sm"
-            />
-            <motion.div
-              initial={{ opacity: 0, scale: 0.9, y: 20 }}
-              animate={{ opacity: 1, scale: 1, y: 0 }}
-              exit={{ opacity: 0, scale: 0.9, y: 20 }}
-              className="relative w-full max-w-2xl bg-paper dark:bg-dark-paper border border-border shadow-2xl rounded-2xl p-10"
-            >
-              <AnimatePresence>
-                {slashMenu?.isOpen && (
-                  <SlashMenu 
-                    position={{ top: slashMenu.top, left: slashMenu.left }}
-                    onSelect={(type) => { console.log(type); setSlashMenu(null); }}
-                    onClose={() => setSlashMenu(null)}
-                  />
-                )}
-              </AnimatePresence>
-              <h3 className="text-3xl font-serif font-medium text-ink dark:text-dark-ink mb-8">Add Architectural Note</h3>
-              <form onSubmit={handleAddNote} className="space-y-8">
-                <div>
-                  <label className="block text-[11px] uppercase tracking-widest font-bold text-muted-ink mb-2">Concept Title</label>
-                  <input 
-                    autoFocus
-                    type="text" 
-                    value={newNoteTitle}
-                    onChange={(e) => setNewNoteTitle(e.target.value)}
-                    placeholder="Enter the title of your study..."
-                    className="w-full bg-white dark:bg-[#2A2A2A] border border-border rounded-lg px-5 py-4 outline-none focus:border-ink transition-colors font-serif text-2xl text-ink dark:text-dark-ink"
-                  />
-                </div>
-                <div>
-                  <label className="block text-[11px] uppercase tracking-widest font-bold text-muted-ink mb-2">Observations & Analysis</label>
-                  <textarea 
-                    value={newNoteContent}
-                    onChange={(e) => setNewNoteContent(e.target.value)}
-                    onKeyDown={handleEditorKeyDown}
-                    placeholder="Describe the spatial logic, materiality, and light interactions... (Type '/' for commands)"
-                    rows={6}
-                    className="w-full bg-white dark:bg-[#2A2A2A] border border-border rounded-lg px-5 py-4 outline-none focus:border-ink transition-colors font-light leading-relaxed resize-none text-ink dark:text-dark-ink"
-                  />
-                </div>
-                <div className="flex gap-4 pt-4">
-                  <button 
-                    type="button"
-                    onClick={() => setShowNewNoteModal(false)}
-                    className="flex-1 py-4 border border-border rounded-lg text-sm font-medium hover:bg-slate-50 dark:hover:bg-white/5 transition-colors text-ink dark:text-dark-ink"
-                  >
-                    Cancel
-                  </button>
-                  <button 
-                    type="submit"
-                    className="flex-1 py-4 bg-ink dark:bg-ochre text-paper rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
-                  >
-                    Save Note
-                  </button>
-                </div>
-              </form>
-            </motion.div>
-          </div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}

architectural-grid10/src/components/AISidebar.tsx

@@ -1,379 +0,0 @@
-import React from 'react';
-import { 
-  Sparkles, 
-  ChevronRight,
-  MessageSquare,
-  FileCode,
-  Globe,
-  Send,
-  Scissors,
-  Zap,
-  Languages,
-  Layout,
-  ArrowRightLeft,
-  BookOpen,
-  History,
-  Target
-} from 'lucide-react';
-import { motion, AnimatePresence } from 'motion/react';
-import { AITab, AITone, Note, Carnet } from '../types';
-import { HierarchicalCarnetSelector } from './HierarchicalCarnetSelector';
-
-interface AISidebarProps {
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
-  activeNote: Note | undefined;
-  aiTab: AITab;
-  setAiTab: (tab: AITab) => void;
-  selectedTone: AITone;
-  setSelectedTone: (tone: AITone) => void;
-  carnets: Carnet[];
-}
-
-export const AISidebar: React.FC<AISidebarProps> = ({
-  isOpen,
-  setIsOpen,
-  activeNote,
-  aiTab,
-  setAiTab,
-  selectedTone,
-  setSelectedTone,
-  carnets
-}) => {
-  const [selectedContextId, setSelectedContextId] = React.useState<string | null>(null);
-
-  return (
-    <AnimatePresence>
-      {isOpen && (
-        <motion.aside
-          initial={{ x: 400, opacity: 0 }}
-          animate={{ x: 0, opacity: 1 }}
-          exit={{ x: 400, opacity: 0 }}
-          transition={{ type: 'spring', damping: 25, stiffness: 200 }}
-          className="w-[400px] border-l border-border bg-white shadow-2xl flex flex-col z-50 shrink-0 relative"
-        >
-          <div className="p-6 border-b border-border space-y-2">
-            <div className="flex items-center justify-between">
-              <h3 className="flex items-center gap-2 font-serif text-xl font-medium text-ink">
-                <Sparkles size={18} className="text-ochre" />
-                IA Assistant
-              </h3>
-              <button 
-                onClick={() => setIsOpen(false)}
-                className="p-1 hover:bg-slate-100 rounded-full transition-colors text-muted-ink"
-              >
-                <ChevronRight size={20} />
-              </button>
-            </div>
-            <p className="text-[11px] text-muted-ink uppercase tracking-wider font-medium opacity-60 truncate">
-              "{activeNote?.title}"
-            </p>
-          </div>
-
-          <div className="flex border-b border-border px-2">
-            {(['discussion', 'actions', 'resources'] as AITab[]).map((tab) => (
-              <button
-                key={tab}
-                onClick={() => setAiTab(tab)}
-                className={`flex-1 py-3 text-[10px] uppercase tracking-[0.2em] font-bold transition-all relative
-                  ${aiTab === tab ? 'text-manganese' : 'text-muted-ink hover:text-ink/60'}`}
-              >
-                {tab}
-                {aiTab === tab && (
-                  <motion.div 
-                    layoutId="activeTab" 
-                    className="absolute bottom-0 left-0 right-0 h-0.5 bg-ochre" 
-                  />
-                )}
-              </button>
-            ))}
-          </div>
-
-          <div className="flex-1 overflow-y-auto p-6 custom-scrollbar">
-            <AnimatePresence mode="wait">
-              {aiTab === 'discussion' && (
-                <motion.div
-                  key="discussion"
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -10 }}
-                  className="space-y-8"
-                >
-                  <div className="h-64 flex flex-col items-center justify-center text-center space-y-4 text-muted-ink/40">
-                    <div className="w-16 h-16 rounded-full border border-dashed border-muted-ink/20 flex items-center justify-center">
-                      <MessageSquare size={24} />
-                    </div>
-                    <p className="text-xs font-serif italic leading-relaxed px-8">Posez une question à l'Assistant pour commencer.</p>
-                  </div>
-
-                  <div className="space-y-4">
-                    <div className="space-y-3">
-                      <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">Source du Contexte</label>
-                      <div className="space-y-3">
-                        <div className="w-full p-3 bg-glass border border-border rounded-lg text-xs flex items-center justify-between cursor-default backdrop-blur-sm">
-                          <div className="flex items-center gap-2">
-                            <FileCode size={14} className="text-blueprint" />
-                            <span className="font-medium text-ink">Note Active</span>
-                          </div>
-                          <div className="text-[8px] bg-blueprint/10 text-blueprint px-1.5 py-0.5 rounded uppercase font-bold tracking-tighter italic">Auto</div>
-                        </div>
-                        
-                        <div className="flex items-center gap-2 px-2">
-                          <div className="h-px flex-1 bg-border/40" />
-                          <span className="text-[9px] font-bold text-concrete uppercase tracking-widest">+ Carnet</span>
-                          <div className="h-px flex-1 bg-border/40" />
-                        </div>
-
-                        <HierarchicalCarnetSelector 
-                          carnets={carnets}
-                          selectedId={selectedContextId}
-                          onSelect={setSelectedContextId}
-                          placeholder="Inclure un carnet..."
-                          className="w-full"
-                        />
-                      </div>
-                    </div>
-
-                    <div className="space-y-3">
-                      <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">Ton d'écriture</label>
-                      <div className="grid grid-cols-2 gap-2">
-                        {(['Professional', 'Creative', 'Academic', 'Casual'] as AITone[]).map((tone) => (
-                          <button
-                            key={tone}
-                            onClick={() => setSelectedTone(tone)}
-                            className={`p-3 rounded-xl border text-[11px] font-medium transition-all
-                              ${selectedTone === tone ? 'bg-manganese text-paper border-manganese shadow-lg shadow-manganese/10' : 'bg-glass border-border text-muted-ink hover:border-ink/20'}`}
-                          >
-                            {tone.toUpperCase().substring(0, 3)}
-                          </button>
-                        ))}
-                      </div>
-                    </div>
-                  </div>
-                </motion.div>
-              )}
-
-              {aiTab === 'actions' && (
-                <motion.div
-                  key="actions"
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -10 }}
-                  className="space-y-8"
-                >
-                  <div className="space-y-8">
-                    <div>
-                      <div className="flex items-center gap-2 mb-4">
-                        <div className="h-px flex-1 bg-border/40" />
-                        <h4 className="text-[10px] uppercase tracking-[0.25em] font-bold text-muted-ink whitespace-nowrap">Transformations</h4>
-                        <div className="h-px flex-1 bg-border/40" />
-                      </div>
-                      
-                      <div className="grid grid-cols-2 gap-2">
-                        {[
-                          { icon: <Sparkles size={14} />, label: 'Clarifier', color: 'ochre' },
-                          { icon: <Scissors size={14} />, label: 'Raccourcir', color: 'rust' },
-                          { icon: <Zap size={14} />, label: 'Améliorer', color: 'sage' },
-                          { icon: <Languages size={14} />, label: 'Traduire', color: 'slate' },
-                        ].map((action, i) => (
-                          <button 
-                            key={i} 
-                            className="flex flex-col items-center gap-3 p-4 bg-glass border border-border rounded-xl transition-all group hover:border-ink/20"
-                          >
-                            <div className={`p-2 rounded-lg bg-slate-50 dark:bg-white/10 transition-colors group-hover:bg-manganese group-hover:text-paper shadow-sm text-ink/60`}>
-                              {action.icon}
-                            </div>
-                            <span className="text-[10px] font-bold text-ink/80 uppercase tracking-widest">{action.label}</span>
-                          </button>
-                        ))}
-                        <button className="col-span-2 flex items-center justify-center gap-3 py-3 px-4 bg-glass border border-border rounded-xl text-[10px] font-bold text-ink/80 hover:bg-slate-50 dark:hover:bg-white/10 transition-colors hover:border-ink/20 uppercase tracking-widest">
-                          <FileCode size={14} className="text-muted-ink" />
-                          Convertir en Markdown
-                        </button>
-                      </div>
-                    </div>
-
-                    <div className="space-y-4">
-                      <div className="flex items-center gap-2 mb-2">
-                        <div className="h-px flex-1 bg-border/40" />
-                        <h4 className="text-[10px] uppercase tracking-[0.25em] font-bold text-muted-ink whitespace-nowrap">Generation Tools</h4>
-                        <div className="h-px flex-1 bg-border/40" />
-                      </div>
-
-                      <div className="group relative p-6 rounded-2xl bg-white border border-border hover:border-blueprint/30 transition-all duration-500 overflow-hidden">
-                        <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
-                          <Layout size={80} className="text-blueprint" />
-                        </div>
-                        
-                        <div className="relative space-y-5">
-                          <div className="flex items-center gap-3">
-                            <div className="p-2 bg-slate-50 rounded-lg text-blueprint">
-                              <Layout size={18} />
-                            </div>
-                            <div className="space-y-0.5">
-                              <h5 className="text-sm font-bold text-ink leading-none">Présentation</h5>
-                              <p className="text-[10px] text-muted-ink uppercase tracking-tight">Convertir en slides interactives</p>
-                            </div>
-                          </div>
-
-                          <div className="grid grid-cols-2 gap-3">
-                            <div className="space-y-1.5">
-                              <span className="text-[9px] uppercase tracking-[0.2em] font-bold text-muted-ink/60 px-1">Thème</span>
-                              <select className="w-full bg-glass dark:bg-black/20 border border-border rounded-lg px-2 py-2 text-xs outline-none focus:ring-1 ring-blueprint/10 transition-all cursor-pointer">
-                                <option>Architectural Mono</option>
-                                <option>Vibrant Tech</option>
-                                <option>Minimal Silk</option>
-                              </select>
-                            </div>
-                            <div className="space-y-1.5">
-                              <span className="text-[9px] uppercase tracking-[0.2em] font-bold text-muted-ink/60 px-1">Style</span>
-                              <select className="w-full bg-glass dark:bg-black/20 border border-border rounded-lg px-2 py-2 text-xs outline-none focus:ring-1 ring-blueprint/10 transition-all cursor-pointer">
-                                <option>Professional</option>
-                                <option>Creative</option>
-                                <option>Brutalist</option>
-                              </select>
-                            </div>
-                          </div>
-
-                          <button className="w-full py-3.5 bg-blueprint text-paper rounded-xl text-[11px] font-bold flex items-center justify-center gap-2 hover:opacity-90 transition-all shadow-lg shadow-blueprint/20 uppercase tracking-[0.2em]">
-                            Générer
-                            <ArrowRightLeft size={14} className="opacity-60" />
-                          </button>
-                        </div>
-                      </div>
-
-                      <div className="group relative p-6 rounded-2xl bg-white border border-border hover:border-sage/30 transition-all duration-500 overflow-hidden">
-                        <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
-                          <BookOpen size={80} className="text-sage" />
-                        </div>
-                        
-                        <div className="relative space-y-5">
-                          <div className="flex items-center gap-3">
-                            <div className="p-2 bg-slate-50 rounded-lg text-sage">
-                              <BookOpen size={18} />
-                            </div>
-                            <div className="space-y-0.5">
-                              <h5 className="text-sm font-bold text-ink leading-none">Diagramme</h5>
-                              <p className="text-[10px] text-muted-ink uppercase tracking-tight">Visualisation de structure</p>
-                            </div>
-                          </div>
-
-                          <div className="grid grid-cols-2 gap-3">
-                            <div className="space-y-1.5">
-                              <span className="text-[9px] uppercase tracking-[0.2em] font-bold text-muted-ink/60 px-1">Type</span>
-                              <select className="w-full bg-glass dark:bg-black/20 border border-border rounded-lg px-2 py-2 text-xs outline-none focus:ring-1 ring-sage/10 transition-all cursor-pointer">
-                                <option>Logic Flow</option>
-                                <option>Mind Map</option>
-                                <option>Hierarchy</option>
-                              </select>
-                            </div>
-                            <div className="space-y-1.5">
-                              <span className="text-[9px] uppercase tracking-[0.2em] font-bold text-muted-ink/60 px-1">Style</span>
-                              <select className="w-full bg-glass dark:bg-black/20 border border-border rounded-lg px-2 py-2 text-xs outline-none focus:ring-1 ring-sage/10 transition-all cursor-pointer">
-                                <option>Draft</option>
-                                <option>Polished</option>
-                                <option>Handwritten</option>
-                              </select>
-                            </div>
-                          </div>
-
-                          <button className="w-full py-3.5 bg-sage text-paper rounded-xl text-[11px] font-bold flex items-center justify-center gap-2 hover:opacity-90 transition-all shadow-lg shadow-sage/20 uppercase tracking-[0.2em]">
-                            Tracer
-                            <ArrowRightLeft size={14} className="opacity-60" />
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="flex flex-col items-center gap-2 opacity-20 py-4">
-                       <History size={16} />
-                       <span className="text-[10px] font-bold uppercase tracking-widest whitespace-nowrap">Auto-Save Enabled</span>
-                    </div>
-                  </div>
-                </motion.div>
-              )}
-
-              {aiTab === 'resources' && (
-                <motion.div
-                  key="resources"
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -10 }}
-                  className="space-y-8"
-                >
-                   <div className="space-y-6">
-                     <div className="space-y-2">
-                       <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">URL (Optionnel)</label>
-                       <div className="relative">
-                         <input type="text" placeholder="https://..." className="w-full bg-glass border border-border rounded-lg pl-3 pr-10 py-3 text-xs outline-none focus:border-blueprint transition-colors" />
-                         <Globe size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-ink/40" />
-                       </div>
-                     </div>
-
-                     <div className="space-y-2">
-                       <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">Texte de la ressource</label>
-                       <textarea 
-                         rows={8}
-                         placeholder="Collez votre texte ici (markdown, HTML, texte brut...)" 
-                         className="w-full bg-glass border border-border rounded-lg p-4 text-xs outline-none focus:border-blueprint transition-colors resize-none leading-relaxed" 
-                       />
-                     </div>
-
-                     <div className="space-y-3">
-                       <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">Mode d'intégration</label>
-                       <div className="grid grid-cols-3 gap-2">
-                          {[
-                            { id: 'replace', label: 'Remplacer', sub: 'Direct, sans IA' },
-                            { id: 'append', label: 'Compléter', sub: 'Ajoute sans réécrire' },
-                            { id: 'merge', label: 'Fusionner', sub: 'Réécrit et intègre' },
-                          ].map((mode) => (
-                            <button key={mode.id} className={`flex flex-col items-center justify-center p-3 rounded-lg border transition-all text-center ${mode.id === 'append' ? 'bg-sage/10 border-sage/50 ring-1 ring-sage/10' : 'bg-white border-border hover:bg-slate-50'}`}>
-                              <span className={`text-[11px] font-bold ${mode.id === 'append' ? 'text-sage' : 'text-ink'}`}>{mode.label}</span>
-                              <span className="text-[8px] text-muted-ink opacity-60 leading-tight mt-1 font-medium">{mode.sub}</span>
-                            </button>
-                          ))}
-                       </div>
-                     </div>
-
-                     <button className="w-full py-4 bg-blueprint text-white rounded-xl text-sm font-bold flex items-center justify-center gap-3 hover:opacity-90 transition-opacity shadow-lg shadow-blueprint/20">
-                       <Sparkles size={18} />
-                       Générer l'aperçu
-                     </button>
-                   </div>
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </div>
-
-          <AnimatePresence>
-            {aiTab === 'discussion' && (
-              <motion.div 
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 20 }}
-                className="p-6 bg-white border-t border-border"
-              >
-                <div className="relative">
-                  <textarea 
-                    rows={3} 
-                    placeholder="Posez une question sur cette note..." 
-                    className="w-full bg-glass backdrop-blur-sm border border-border rounded-2xl p-4 pr-12 text-sm outline-none focus:border-blueprint transition-colors resize-none leading-relaxed font-light"
-                  />
-                  <div className="absolute right-3 bottom-3 flex gap-2">
-                    <button className="p-2 text-muted-ink hover:text-ink rounded-lg transition-colors">
-                      <Globe size={16} />
-                    </button>
-                    <button className="p-2 bg-blueprint text-white rounded-lg transition-transform hover:scale-105 active:scale-95 shadow-lg shadow-blueprint/10">
-                      <Send size={16} />
-                    </button>
-                  </div>
-                </div>
-                <p className="text-[9px] text-muted-ink text-center mt-3 uppercase tracking-widest font-bold opacity-30 italic">Maj+Entrée = nouvelle ligne</p>
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </motion.aside>
-      )}
-    </AnimatePresence>
-  );
-};

architectural-grid10/src/components/AgentsView.tsx

@@ -1,325 +0,0 @@
-import React from 'react';
-import { 
-  Plus, 
-  ArrowLeft, 
-  Clock, 
-  Activity, 
-  Trash2, 
-  Edit3, 
-  Play, 
-  Eye, 
-  Microscope, 
-  Globe, 
-  Layers, 
-  Zap,
-  BookOpen,
-  Sparkles,
-  ChevronDown,
-  Info,
-  Check
-} from 'lucide-react';
-import { motion, AnimatePresence } from 'motion/react';
-import { Carnet, Note } from '../types';
-import { HierarchicalCarnetSelector } from './HierarchicalCarnetSelector';
-
-interface AgentsViewProps {
-  selectedAgentId: string | null;
-  setSelectedAgentId: (id: string | null) => void;
-  carnets: Carnet[];
-}
-
-export const AgentsView: React.FC<AgentsViewProps> = ({
-  selectedAgentId,
-  setSelectedAgentId,
-  carnets
-}) => {
-  const [selectedCarnetForAgent, setSelectedCarnetForAgent] = React.useState<string | null>('4');
-  const [agentType, setAgentType] = React.useState<'Surveillant' | 'Personnalisé' | 'Slides' | 'Diagramme'>('Diagramme');
-
-  return (
-    <div className="h-full flex flex-col overflow-y-auto custom-scrollbar bg-[#F9F8F6] dark:bg-dark-paper space-y-12">
-      {!selectedAgentId ? (
-        <>
-          <header className="px-12 pt-12 pb-8 flex flex-col gap-6 sticky top-0 bg-paper/80 backdrop-blur-md z-30">
-            <div className="flex justify-between items-end">
-              <div className="space-y-1">
-                <h1 className="text-4xl font-serif font-medium tracking-tight text-ink">Mes Agents</h1>
-                <p className="text-sm text-muted-ink font-light">Automatisez vos tâches de veille et de recherche.</p>
-              </div>
-              <button className="px-6 py-2.5 bg-ink text-paper text-sm font-medium rounded-xl hover:opacity-90 transition-all flex items-center gap-3 shadow-lg shadow-ink/10">
-                <Plus size={18} />
-                Nouvel Agent
-              </button>
-            </div>
-
-            <div className="flex items-center gap-8 border-b border-ink/5 pt-4">
-              {['Tous', 'Veilleur', 'Chercheur', 'Surveillant', 'Personnalisé'].map((tag, i) => (
-                <button key={i} className={`pb-4 text-xs font-bold uppercase tracking-widest transition-all relative ${i === 0 ? 'text-ink' : 'text-muted-ink hover:text-ink/60'}`}>
-                  {tag}
-                  {i === 0 && <motion.div layoutId="activeAgentTag" className="absolute bottom-0 left-0 right-0 h-0.5 bg-ink" />}
-                </button>
-              ))}
-            </div>
-          </header>
-
-          <div className="px-12 flex-1 pb-20 space-y-12">
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {[
-                { id: 'a1', icon: <Eye size={20} className="text-amber-600" />, title: 'Surveillant de Notes', status: 'Réussi', type: 'SURVEILLANT', meta: 'Hebdomadaire • 6 exéc.', desc: 'Analyse les notes récentes d’un carnet et suggère des compléments, références et liens.' },
-                { id: 'a2', icon: <Microscope size={20} className="text-indigo-600" />, title: 'Chercheur de Sujet', status: 'Réussi', type: 'CHERCHEUR', meta: 'Hebdomadaire • 14 exéc.', desc: 'Recherche des informations approfondies sur les derniers modèles de Deepseek et voir l’avis des utilisateurs.' },
-                { id: 'a3', icon: <Globe size={20} className="text-emerald-600" />, title: 'Veille IA', status: 'Réussi', type: 'VEILLEUR', meta: 'Quotidien • 20 exéc.', desc: 'Scrape les flux RSS de 6 sites IA (The Verge, TechCrunch...) et génère un résumé.' },
-              ].map((agent, i) => (
-                <div 
-                  key={i} 
-                  onClick={() => setSelectedAgentId(agent.id)}
-                  className="bg-white dark:bg-white/5 border border-border rounded-2xl p-6 space-y-6 hover:border-ink/20 transition-all group cursor-pointer shadow-sm relative overflow-hidden"
-                >
-                  <div className="flex items-start justify-between">
-                     <div className="flex items-center gap-4">
-                       <div className="p-3 bg-slate-50 dark:bg-white/10 rounded-xl group-hover:bg-ink group-hover:text-paper transition-all">
-                         {agent.icon}
-                       </div>
-                       <div className="space-y-1">
-                         <h4 className="text-[13px] font-bold text-ink">{agent.title}</h4>
-                         <p className="text-[10px] font-bold uppercase tracking-widest text-muted-ink opacity-60">{agent.type}</p>
-                       </div>
-                     </div>
-                     <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
-                       <label className="relative inline-flex items-center cursor-pointer">
-                          <input type="checkbox" className="sr-only peer" defaultChecked />
-                          <div className="w-8 h-4 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-emerald-500"></div>
-                       </label>
-                     </div>
-                  </div>
-
-                  <p className="text-xs text-muted-ink leading-relaxed line-clamp-3">
-                    {agent.desc}
-                  </p>
-
-                  <div className="space-y-3">
-                    <div className="flex items-center justify-between text-[10px] text-muted-ink font-medium">
-                       <div className="flex items-center gap-4">
-                         <span className="flex items-center gap-1"><Clock size={10} /> {agent.meta.split('•')[0]}</span>
-                         <span>{agent.meta.split('•')[1]}</span>
-                       </div>
-                    </div>
-                    <div className="flex items-center justify-between text-[10px] text-muted-ink font-medium">
-                       <div className="flex items-center gap-2">
-                         <span className="uppercase tracking-tight">Prochaine exécution</span>
-                         <span className="text-ink">Hebdomadaire</span>
-                       </div>
-                       <div className="flex items-center gap-2">
-                         <span className="uppercase tracking-tight">Dernier statut</span>
-                         <span className="text-emerald-600 flex items-center gap-1"><Activity size={8} /> {agent.status}</span>
-                       </div>
-                    </div>
-                  </div>
-
-                  <div className="grid grid-cols-3 gap-2 border-t border-border pt-4">
-                     <button className="py-2 border border-border rounded-lg hover:bg-slate-50 dark:hover:bg-white/5 flex items-center justify-center transition-colors text-muted-ink hover:text-ink"><Edit3 size={14} /> <span className="ml-2 text-[10px] font-bold uppercase">Modifier</span></button>
-                     <button 
-                      onClick={(e) => { e.stopPropagation(); }}
-                      className="py-2 border border-border rounded-lg hover:bg-slate-50 dark:hover:bg-white/5 flex items-center justify-center transition-colors text-muted-ink hover:text-ink"
-                     >
-                      <Play size={14} className="fill-current" />
-                     </button>
-                     <button 
-                      onClick={(e) => { e.stopPropagation(); }}
-                      className="py-2 border border-border rounded-lg hover:bg-rose-50 hover:text-rose-600 hover:border-rose-100 flex items-center justify-center transition-colors text-muted-ink"
-                     >
-                      <Trash2 size={14} />
-                     </button>
-                  </div>
-                </div>
-              ))}
-            </div>
-
-            <div className="space-y-8">
-               <div className="flex items-center gap-4">
-                 <h5 className="text-[10px] font-bold uppercase tracking-[0.3em] text-muted-ink whitespace-nowrap">Modèles</h5>
-                 <div className="h-px w-full bg-border/40" />
-               </div>
-               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                {[
-                  { title: 'Veille IA', desc: 'Scrape les flux RSS de 6 sites IA et génère un résumé hebdomadaire.', icon: <Globe size={18} /> },
-                  { title: 'Veille Tech', desc: 'Crée un résumé quotidien des news Hacker News et Product Hunt.', icon: <Zap size={18} /> },
-                  { title: 'Veille Dev', desc: 'Surveille les repos GitHub pour détecter les nouvelles releases.', icon: <Layers size={18} /> },
-                ].map((model, i) => (
-                  <div key={i} className="bg-white/40 dark:bg-white/5 border border-dashed border-border rounded-2xl p-6 group cursor-pointer hover:bg-white dark:hover:bg-white/10 hover:border-ink/20 transition-all">
-                     <div className="w-8 h-8 rounded-lg bg-slate-50 dark:bg-white/10 flex items-center justify-center text-muted-ink group-hover:bg-ink group-hover:text-paper mb-4 transition-all">
-                       {model.icon}
-                     </div>
-                     <h4 className="text-[13px] font-bold text-ink mb-2">{model.title}</h4>
-                     <p className="text-xs text-muted-ink leading-relaxed mb-4">{model.desc}</p>
-                     <button className="text-[11px] font-bold uppercase tracking-widest text-ink hover:opacity-60 transition-opacity flex items-center gap-2">
-                       <Plus size={14} /> Installer
-                     </button>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </>
-      ) : (
-        <motion.div 
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="flex-1 flex flex-col"
-        >
-          <header className="px-12 py-10 border-b border-border bg-white dark:bg-paper backdrop-blur-md sticky top-0 z-30">
-            <div className="flex items-center justify-between max-w-5xl mx-auto">
-              <button 
-                onClick={() => setSelectedAgentId(null)}
-                className="flex items-center gap-3 text-xs font-bold uppercase tracking-widest text-muted-ink hover:text-ink transition-colors"
-              >
-                <ArrowLeft size={16} />
-                Retour
-              </button>
-              <div className="flex items-center gap-4">
-                <button className="px-5 py-2 text-xs font-bold uppercase tracking-widest border border-border rounded-xl hover:bg-slate-50 dark:hover:bg-white/5 transition-all">
-                  Logs
-                </button>
-                <button className="px-6 py-2 bg-ink text-paper text-xs font-bold uppercase tracking-widest rounded-xl hover:opacity-90 transition-all shadow-lg shadow-ink/10">
-                  Enregistrer
-                </button>
-              </div>
-            </div>
-          </header>
-
-          <div className="flex-1 px-12 py-16 max-w-5xl mx-auto w-full space-y-24">
-            <section className="space-y-12">
-              <div className="text-center space-y-4">
-                <p className="text-[10px] font-bold uppercase tracking-[0.4em] text-concrete">Sélectionnez le type d'agent</p>
-                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
-                  {[
-                    { id: 'Surveillant', icon: <Eye size={18} />, label: 'Surveillant', desc: 'Surveille un carnet et analyse les notes' },
-                    { id: 'Personnalisé', icon: <Layers size={18} />, label: 'Personnalisé', desc: 'Agent libre avec votre propre prompt' },
-                    { id: 'Slides', icon: <Layers size={18} />, label: 'Slides', desc: 'Crée une présentation PowerPoint à partir de notes' },
-                    { id: 'Diagramme', icon: <Zap size={18} />, label: 'Diagramme', desc: 'Crée un diagramme Excalidraw à partir de notes' },
-                  ].map((type) => (
-                    <button
-                      key={type.id}
-                      onClick={() => setAgentType(type.id as any)}
-                      className={`p-6 rounded-2xl border-2 transition-all flex flex-col items-center gap-3 text-center group relative
-                        ${agentType === type.id ? 'border-blueprint bg-white shadow-xl shadow-blueprint/10' : 'border-border bg-white/50 hover:bg-white'}`}
-                    >
-                      <div className={`p-3 rounded-xl transition-all ${agentType === type.id ? 'bg-blueprint text-white' : 'bg-slate-50 text-concrete group-hover:text-ink'}`}>
-                        {type.icon}
-                      </div>
-                      <div className="space-y-1">
-                        <p className="text-[13px] font-bold text-ink">{type.label}</p>
-                        <p className="text-[10px] text-muted-ink leading-tight">{type.desc}</p>
-                      </div>
-                      <div className={`absolute top-4 right-4 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all
-                        ${agentType === type.id ? 'border-blueprint' : 'border-border opacity-20'}`}>
-                        {agentType === type.id && <div className="w-2 h-2 bg-blueprint rounded-full" />}
-                      </div>
-                    </button>
-                  ))}
-                </div>
-              </div>
-            </section>
-
-            <section className="space-y-10">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.3em] text-concrete">
-                  CONFIGURATION <Info size={12} className="opacity-40" />
-                </div>
-                <button className="flex items-center gap-2 px-6 py-2 border-2 border-rose-100 bg-rose-50 rounded-xl text-rose-500 text-[11px] font-bold uppercase tracking-widest hover:bg-rose-100 transition-colors">
-                  <Trash2 size={14} /> Supprimer
-                </button>
-              </div>
-
-              <div className="bg-white dark:bg-white/5 border border-border/60 rounded-[32px] p-12 space-y-12 shadow-sm">
-                <div className="space-y-6">
-                  <div className="flex items-center gap-2">
-                    <label className="text-[11px] font-bold uppercase tracking-widest text-concrete">DESCRIPTION (OPTIONEL)</label>
-                    <Info size={12} className="text-concrete/40" />
-                  </div>
-                  <textarea 
-                    className="w-full bg-slate-50 dark:bg-black/20 border border-border/40 rounded-2xl p-6 text-sm outline-none focus:ring-4 ring-blueprint/5 focus:border-blueprint/40 transition-all font-light leading-relaxed resize-none text-ink"
-                    placeholder="Décrivez brièvement le rôle de cet agent..."
-                    defaultValue="Lit une note et génère un diagramme visuel dans le Lab Excalidraw."
-                  />
-                </div>
-
-                <div className="space-y-6">
-                  <div className="flex items-center gap-2">
-                    <label className="text-[11px] font-bold uppercase tracking-widest text-concrete">CARNET À SURVEILLER</label>
-                    <Info size={12} className="text-concrete/40" />
-                  </div>
-                  <HierarchicalCarnetSelector 
-                    carnets={carnets}
-                    selectedId={selectedCarnetForAgent}
-                    onSelect={setSelectedCarnetForAgent}
-                  />
-                </div>
-
-                <div className="space-y-6">
-                  <div className="flex items-center gap-2">
-                    <label className="text-[11px] font-bold uppercase tracking-widest text-concrete">NOTES À ANALYSER</label>
-                    <Info size={12} className="text-concrete/40" />
-                  </div>
-                  <div className="bg-slate-50 dark:bg-black/20 border border-border/40 rounded-2xl overflow-hidden divide-y divide-border/20">
-                    {[
-                      'Résumé du conteneur LXC devSandbox',
-                      'Connexion SSH sans mot de passe à devSandbox',
-                      'Gateway token (blank to generate)',
-                      'Procédure d\'accès à openclaw',
-                      'Derniers commits du repo Momento'
-                    ].map((note, i) => (
-                      <label key={i} className="flex items-center gap-4 px-6 py-4 cursor-pointer hover:bg-white/50 transition-colors group">
-                        <div className={`w-5 h-5 rounded border transition-all flex items-center justify-center
-                          ${i === 0 ? 'bg-blueprint border-blueprint text-white' : 'bg-white border-border group-hover:border-blueprint/40'}`}>
-                          {i === 0 && <Check size={12} />}
-                        </div>
-                        <input type="checkbox" className="hidden" defaultChecked={i === 0} />
-                        <span className={`text-[13px] transition-colors ${i === 0 ? 'font-medium text-ink' : 'text-muted-ink'}`}>{note}</span>
-                      </label>
-                    ))}
-                  </div>
-                  <p className="text-[10px] text-concrete/60 italic font-medium">{1} note(s) sélectionnée(s)</p>
-                </div>
-
-                <div className="space-y-8">
-                  <div className="flex items-center gap-2">
-                    <label className="text-[11px] font-bold uppercase tracking-widest text-concrete">TYPE DE DIAGRAMME</label>
-                  </div>
-                  <div className="grid grid-cols-2 md:grid-cols-2 gap-3">
-                    {[
-                      'Auto (détection métier)', 'Flowchart (processus)',
-                      'Mindmap (idées)', 'Organigramme (équipes)',
-                      'Timeline / roadmap', 'Process map (opérations)',
-                      'Architecture cloud (zones/RG)'
-                    ].map((type, i) => (
-                      <button key={i} className={`px-6 py-4 rounded-xl border text-[13px] text-left transition-all
-                        ${i === 0 ? 'border-ink bg-slate-50 font-bold text-ink ring-2 ring-ink/5' : 'border-border text-concrete hover:border-concrete/40 hover:bg-slate-50/50'}`}>
-                        {type}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-
-                <div className="space-y-8">
-                  <div className="flex items-center gap-2">
-                    <label className="text-[11px] font-bold uppercase tracking-widest text-concrete">STYLE DU DIAGRAMME EXCALIDRAW</label>
-                  </div>
-                  <div className="flex flex-wrap gap-4">
-                    {[
-                      'Coloré (Excalidraw)', 'Sketch+ (Excalidraw accentué)', 'Austère (sobre)'
-                    ].map((style, i) => (
-                      <button key={i} className={`px-6 py-4 rounded-xl border text-[13px] transition-all
-                        ${i === 1 ? 'border-ink bg-white font-bold text-ink ring-2 ring-ink/5 shadow-lg' : 'border-border text-concrete hover:bg-slate-50'}`}>
-                        {style}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </section>
-          </div>
-        </motion.div>
-      )}
-    </div>
-  );
-};

architectural-grid10/src/components/HierarchicalCarnetSelector.tsx

@@ -1,208 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { 
-  ChevronRight, 
-  ChevronDown, 
-  Folder, 
-  FolderOpen, 
-  Check, 
-  Search
-} from 'lucide-react';
-import { Carnet } from '../types';
-import { motion, AnimatePresence } from 'motion/react';
-
-interface HierarchicalCarnetSelectorProps {
-  carnets: Carnet[];
-  selectedId: string | null;
-  onSelect: (id: string) => void;
-  className?: string;
-  placeholder?: string;
-}
-
-export const HierarchicalCarnetSelector: React.FC<HierarchicalCarnetSelectorProps> = ({
-  carnets,
-  selectedId,
-  onSelect,
-  className = "",
-  placeholder = "Sélectionner un carnet..."
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set(['1', '4'])); // Default expand some
-
-  const selectedCarnet = carnets.find(c => c.id === selectedId);
-
-  // Derive the path for display
-  const path = useMemo(() => {
-    if (!selectedCarnet) return [];
-    const trail: Carnet[] = [];
-    let current = selectedCarnet;
-    while (current) {
-      trail.unshift(current);
-      if (!current.parentId) break;
-      const parent = carnets.find(c => c.id === current.parentId);
-      if (!parent) break;
-      current = parent;
-    }
-    return trail;
-  }, [selectedCarnet, carnets]);
-
-  const toggleExpand = (e: React.MouseEvent, id: string) => {
-    e.stopPropagation();
-    const newExpanded = new Set(expandedIds);
-    if (newExpanded.has(id)) {
-      newExpanded.delete(id);
-    } else {
-      newExpanded.add(id);
-    }
-    setExpandedIds(newExpanded);
-  };
-
-  const filteredCarnets = useMemo(() => {
-    if (!searchQuery) return carnets;
-    return carnets.filter(c => c.name.toLowerCase().includes(searchQuery.toLowerCase()));
-  }, [carnets, searchQuery]);
-
-  const renderTree = (parentId?: string, level = 0) => {
-    const children = carnets.filter(c => c.parentId === parentId);
-    if (children.length === 0) return null;
-
-    return (
-      <div className={level > 0 ? "ml-4 border-l border-border/40 pl-2" : ""}>
-        {children.map(carnet => {
-          const isExpanded = expandedIds.has(carnet.id) || searchQuery.length > 0;
-          const hasChildren = carnets.some(c => c.parentId === carnet.id);
-          const isSelected = selectedId === carnet.id;
-
-          // If searching and this carnet doesn't match AND none of its children match, skip it
-          if (searchQuery && !carnet.name.toLowerCase().includes(searchQuery.toLowerCase())) {
-            const hasMatchingChild = (id: string): boolean => {
-              const childrenOfId = carnets.filter(c => c.parentId === id);
-              return childrenOfId.some(c => c.name.toLowerCase().includes(searchQuery.toLowerCase()) || hasMatchingChild(c.id));
-            };
-            if (!hasMatchingChild(carnet.id)) return null;
-          }
-
-          return (
-            <div key={carnet.id} className="select-none">
-              <div 
-                onClick={() => {
-                  onSelect(carnet.id);
-                  if (!searchQuery) setIsOpen(false);
-                }}
-                className={`flex items-center gap-2.5 px-2 py-1.5 rounded-lg cursor-pointer transition-all group
-                  ${isSelected ? 'bg-blueprint/10 text-blueprint font-bold' : 'hover:bg-slate-50 dark:hover:bg-white/5 text-ink'}`}
-              >
-                <div className="w-4 flex items-center justify-center">
-                  {hasChildren ? (
-                    <button 
-                      onClick={(e) => toggleExpand(e, carnet.id)}
-                      className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded transition-colors"
-                    >
-                      {isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
-                    </button>
-                  ) : null}
-                </div>
-                
-                <div className={`p-1 rounded ${isSelected ? 'bg-blueprint/20' : 'bg-slate-100 dark:bg-white/5 group-hover:bg-white/40'}`}>
-                  {isExpanded && hasChildren ? <FolderOpen size={13} /> : <Folder size={13} />}
-                </div>
-                
-                <span className="text-[13px] truncate flex-1">{carnet.name}</span>
-                
-                {isSelected && <Check size={14} className="opacity-60" />}
-              </div>
-              
-              <AnimatePresence>
-                {isExpanded && (
-                  <motion.div
-                    initial={{ height: 0, opacity: 0 }}
-                    animate={{ height: "auto", opacity: 1 }}
-                    exit={{ height: 0, opacity: 0 }}
-                    className="overflow-hidden"
-                  >
-                    {renderTree(carnet.id, level + 1)}
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
-
-  return (
-    <div className={`relative ${className}`}>
-      <div 
-        onClick={() => setIsOpen(!isOpen)}
-        className="w-full bg-slate-50 dark:bg-black/20 border border-border/80 rounded-xl px-4 py-4 text-sm outline-none focus:ring-4 ring-blueprint/5 focus:border-blueprint/40 transition-all cursor-pointer text-ink flex items-center gap-3"
-      >
-        <Folder size={16} className="text-blueprint/60 shrink-0" />
-        <div className="flex-1 flex items-center gap-1 min-w-0">
-          {path.length > 0 ? (
-            <div className="flex items-center gap-1.5 truncate">
-              {path.map((item, i) => (
-                <React.Fragment key={item.id}>
-                  {i > 0 && <span className="text-concrete/40 text-[10px]">/</span>}
-                  <span className={`truncate ${i === path.length - 1 ? 'font-bold' : 'text-concrete'}`}>
-                    {item.name}
-                  </span>
-                </React.Fragment>
-              ))}
-            </div>
-          ) : (
-            <span className="text-concrete italic">{placeholder}</span>
-          )}
-        </div>
-        <ChevronDown size={14} className={`transition-transform duration-300 text-concrete shrink-0 ${isOpen ? 'rotate-180' : ''}`} />
-      </div>
-
-      <AnimatePresence>
-        {isOpen && (
-          <>
-            <div 
-              className="fixed inset-0 z-[60]" 
-              onClick={() => setIsOpen(false)} 
-            />
-            <motion.div 
-              initial={{ opacity: 0, y: 10, scale: 0.98 }}
-              animate={{ opacity: 1, y: 0, scale: 1 }}
-              exit={{ opacity: 0, y: 10, scale: 0.98 }}
-              className="absolute z-[70] mt-2 w-full bg-white dark:bg-dark-paper border border-border shadow-2xl rounded-2xl overflow-hidden flex flex-col min-w-[280px]"
-            >
-              <div className="p-3 border-b border-border/40 bg-slate-50/50">
-                <div className="relative">
-                  <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-concrete" />
-                  <input 
-                    autoFocus
-                    type="text"
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    placeholder="Filtrer les carnets..."
-                    className="w-full bg-white border border-border rounded-lg pl-9 pr-4 py-2 text-xs outline-none focus:border-blueprint transition-colors"
-                  />
-                </div>
-              </div>
-
-              <div className="max-h-72 overflow-y-auto custom-scrollbar p-2">
-                {renderTree(undefined)}
-              </div>
-              
-              <div className="p-2 border-t border-border/40 bg-slate-50/30 flex justify-between items-center px-4">
-                <span className="text-[9px] font-bold text-concrete uppercase tracking-widest">
-                  Structure des carnets
-                </span>
-                <button 
-                  onClick={() => setIsOpen(false)}
-                  className="text-[10px] font-bold text-blueprint hover:underline"
-                >
-                  Fermer
-                </button>
-              </div>
-            </motion.div>
-          </>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};

architectural-grid10/src/components/NotebooksView.tsx

@@ -1,469 +0,0 @@
-import React from 'react';
-import { 
-  Plus, 
-  Search, 
-  Share2, 
-  Pin, 
-  ChevronRight,
-  ArrowLeft,
-  MoreVertical,
-  Sparkles,
-  Tag as TagIcon,
-  X,
-  BookOpen,
-  Edit3,
-  Eye,
-  Trash2
-} from 'lucide-react';
-import { motion, AnimatePresence } from 'motion/react';
-import { Note, Carnet, Tag } from '../types';
-import { SlashMenu } from './SlashMenu';
-
-interface NotebooksViewProps {
-  activeNoteId: string | null;
-  activeCarnet: Carnet | undefined;
-  filteredNotes: Note[];
-  activeNote: Note | undefined;
-  setActiveNoteId: (id: string | null) => void;
-  togglePin: (id: string) => void;
-  setShowNewNoteModal: (show: boolean) => void;
-  isAISidebarOpen: boolean;
-  setIsAISidebarOpen: (open: boolean) => void;
-  selectedTagIds: string[];
-  setSelectedTagIds: (ids: string[]) => void;
-  allNotes: Note[];
-  activeCarnetId: string;
-  setShowNewCarnetModal: (show: boolean, parentId?: string, isRenaming?: boolean, carnetId?: string) => void;
-  onDeleteNote: (id: string) => void;
-}
-
-export const NotebooksView: React.FC<NotebooksViewProps> = ({
-  activeNoteId,
-  activeCarnet,
-  filteredNotes,
-  activeNote,
-  setActiveNoteId,
-  togglePin,
-  setShowNewNoteModal,
-  isAISidebarOpen,
-  setIsAISidebarOpen,
-  selectedTagIds,
-  setSelectedTagIds,
-  allNotes,
-  activeCarnetId,
-  setShowNewCarnetModal,
-  onDeleteNote
-}) => {
-  const [isTagsExpanded, setIsTagsExpanded] = React.useState(false);
-  const [tagSearchQuery, setTagSearchQuery] = React.useState('');
-  const [isEditing, setIsEditing] = React.useState(false);
-  const [slashMenu, setSlashMenu] = React.useState<{ isOpen: boolean; top: number; left: number } | null>(null);
-
-  const handleEditorKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === '/') {
-      const selection = window.getSelection();
-      if (selection && selection.rangeCount > 0) {
-        const range = selection.getRangeAt(0);
-        const rect = range.getBoundingClientRect();
-        setSlashMenu({
-          isOpen: true,
-          top: rect.bottom + window.scrollY,
-          left: rect.left + window.scrollX
-        });
-      }
-    }
-  };
-
-  const insertCommand = (type: string) => {
-    console.log(`Command selected: ${type}`);
-    setSlashMenu(null);
-  };
-
-  const availableTags = React.useMemo(() => {
-    const carnetNotes = allNotes.filter(n => n.carnetId === activeCarnetId);
-    const tagsMap = new Map<string, Tag>();
-    carnetNotes.forEach(note => {
-      note.tags?.forEach(tag => {
-        tagsMap.set(tag.id, tag);
-      });
-    });
-    return Array.from(tagsMap.values()).sort((a, b) => {
-      // AI tags first, then alphabetical
-      if (a.type === 'ai' && b.type !== 'ai') return -1;
-      if (a.type !== 'ai' && b.type === 'ai') return 1;
-      return a.label.localeCompare(b.label);
-    });
-  }, [allNotes, activeCarnetId]);
-
-  const visibleTags = React.useMemo(() => {
-    let filtered = availableTags;
-    if (tagSearchQuery) {
-      filtered = availableTags.filter(t => 
-        t.label.toLowerCase().includes(tagSearchQuery.toLowerCase())
-      );
-    } else if (!isTagsExpanded) {
-      filtered = availableTags.slice(0, 10);
-      // Ensure selected tags are always visible even if not in the first 10
-      selectedTagIds.forEach(id => {
-        if (!filtered.find(t => t.id === id)) {
-          const tag = availableTags.find(t => t.id === id);
-          if (tag) filtered.push(tag);
-        }
-      });
-    }
-    return filtered;
-  }, [availableTags, isTagsExpanded, tagSearchQuery, selectedTagIds]);
-
-  const toggleTag = (tagId: string) => {
-    if (selectedTagIds.includes(tagId)) {
-      setSelectedTagIds(selectedTagIds.filter(id => id !== tagId));
-    } else {
-      setSelectedTagIds([...selectedTagIds, tagId]);
-    }
-  };
-
-  if (!activeNoteId) {
-    return (
-      <div className="h-full flex flex-col overflow-y-auto">
-        <header className="px-12 pt-12 pb-8 flex flex-col gap-6 sticky top-0 bg-paper/80 backdrop-blur-md z-30">
-          <div className="flex justify-between items-start">
-            <h1 className="text-4xl font-serif font-medium tracking-tight text-ink leading-tight pr-12">
-              {activeCarnet?.name} — {filteredNotes[0]?.date || 'Oct 26'}
-            </h1>
-          </div>
-          
-          <div className="flex items-center justify-between border-b border-ink/5 pb-4">
-            <div className="flex items-center gap-6">
-              <button 
-                onClick={() => setShowNewNoteModal(true)}
-                className="flex items-center gap-2 text-[13px] text-ink font-medium hover:opacity-70 transition-opacity"
-              >
-                <Plus size={16} />
-                <span>Add Note</span>
-              </button>
-              <button 
-                onClick={() => setShowNewCarnetModal(true, activeCarnetId)}
-                className="flex items-center gap-2 text-[13px] text-concrete font-medium hover:text-ink transition-all"
-              >
-                <BookOpen size={16} />
-                <span>New Sub-Carnet</span>
-              </button>
-              <button className="flex items-center gap-2 text-[13px] text-ink font-medium hover:opacity-70 transition-opacity">
-                <Search size={16} />
-                <span>Search</span>
-              </button>
-            </div>
-            <button className="flex items-center gap-2 text-[13px] text-ink font-medium hover:opacity-70 transition-opacity">
-              <Share2 size={16} />
-              <span>Share</span>
-            </button>
-          </div>
-
-          <div className="flex flex-col gap-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-3 text-[10px] font-bold uppercase tracking-[0.2em] text-concrete">
-                <TagIcon size={12} />
-                <span>Filter by Tags</span>
-                {selectedTagIds.length > 0 && (
-                  <span className="bg-blueprint/10 text-blueprint px-2 py-0.5 rounded-full text-[9px] lowercase tracking-normal">
-                    {selectedTagIds.length} active
-                  </span>
-                )}
-              </div>
-              
-              {availableTags.length > 10 && (
-                <div className="relative group">
-                  <input 
-                    type="text"
-                    placeholder="Search tags..."
-                    className="bg-transparent border-b border-border/40 text-[10px] outline-none focus:border-blueprint/40 py-1 px-2 w-32 transition-all focus:w-48 placeholder:text-concrete/40"
-                    onChange={(e) => setTagSearchQuery(e.target.value)}
-                  />
-                </div>
-              )}
-            </div>
-
-            <div className="flex flex-wrap gap-2 items-center min-h-[32px]">
-              <AnimatePresence mode="popLayout">
-                {visibleTags.map(tag => {
-                  const isActive = selectedTagIds.includes(tag.id);
-                  return (
-                    <motion.button
-                      layout
-                      initial={{ opacity: 0, scale: 0.9 }}
-                      animate={{ opacity: 1, scale: 1 }}
-                      exit={{ opacity: 0, scale: 0.9 }}
-                      key={tag.id}
-                      onClick={() => toggleTag(tag.id)}
-                      className={`px-3 py-1.5 rounded-full text-[10px] font-bold uppercase tracking-wider transition-all border flex items-center gap-2
-                        ${isActive 
-                          ? 'bg-ink text-paper border-ink shadow-lg shadow-ink/10' 
-                          : 'bg-white/40 border-border text-concrete hover:border-concrete/40 hover:bg-white/60'}`}
-                    >
-                      {tag.type === 'ai' && (
-                        <Sparkles 
-                          size={10} 
-                          className={isActive ? 'text-blueprint' : 'text-blueprint/60'} 
-                        />
-                      )}
-                      {tag.label}
-                      {isActive && <X size={10} />}
-                    </motion.button>
-                  );
-                })}
-              </AnimatePresence>
-
-              {availableTags.length > 10 && !tagSearchQuery && (
-                <button 
-                  onClick={() => setIsTagsExpanded(!isTagsExpanded)}
-                  className="px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider text-concrete/60 hover:text-ink transition-colors border border-dashed border-border rounded-full"
-                >
-                  {isTagsExpanded ? 'Show less' : `+ ${availableTags.length - 10} more`}
-                </button>
-              )}
-
-              {selectedTagIds.length > 0 && (
-                <button 
-                  onClick={() => setSelectedTagIds([])}
-                  className="px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider text-rust hover:underline ml-auto"
-                >
-                  Clear all
-                </button>
-              )}
-            </div>
-          </div>
-        </header>
-
-        <div className="px-12 flex-1 pb-20">
-          <div className="max-w-3xl space-y-16">
-            {filteredNotes.map((note, index) => (
-              <motion.div 
-                 initial={{ opacity: 0, y: 20 }}
-                 animate={{ opacity: 1, y: 0 }}
-                 transition={{ delay: 0.1 * index, duration: 0.8 }}
-                 key={note.id} 
-                 className="space-y-4 group cursor-pointer relative"
-                 onClick={() => setActiveNoteId(note.id)}
-              >
-                <h2 className="text-2xl font-serif font-medium text-ink flex items-center justify-between">
-                  <span className="flex items-center gap-3">
-                    {note.isPinned && <Pin size={18} className="text-amber-500 fill-amber-500" />}
-                    {note.title}
-                  </span>
-                  <div className="flex items-center gap-2">
-                    <button 
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        togglePin(note.id);
-                      }}
-                      className={`p-2 rounded-full transition-all ${note.isPinned ? 'text-amber-600 bg-amber-50' : 'opacity-0 group-hover:opacity-60 hover:bg-slate-100 text-ink'}`}
-                    >
-                      <Pin size={16} />
-                    </button>
-                    <button 
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onDeleteNote(note.id);
-                      }}
-                      className="p-2 rounded-full opacity-0 group-hover:opacity-60 hover:opacity-100 hover:bg-rose-50 text-rose-500 transition-all"
-                    >
-                      <Trash2 size={16} />
-                    </button>
-                    <button className="opacity-0 group-hover:opacity-40 transition-opacity">
-                      <ChevronRight size={20} />
-                    </button>
-                  </div>
-                </h2>
-                <div className="flex flex-col md:flex-row gap-8 items-start">
-                  <div className="w-full md:w-56 aspect-[4/3] bg-white/50 dark:bg-white/5 border border-border overflow-hidden rounded shadow-sm flex-shrink-0">
-                    <img 
-                      src={note.imageUrl} 
-                      alt={note.title} 
-                      className="w-full h-full object-cover mix-blend-multiply opacity-80 grayscale contrast-125 hover:grayscale-0 hover:opacity-100 transition-all duration-500"
-                      referrerPolicy="no-referrer"
-                    />
-                  </div>
-                  <div className="space-y-3">
-                    <div className="flex flex-wrap gap-2 mb-2">
-                      {note.tags?.map(tag => (
-                        <div 
-                          key={tag.id}
-                          className={`px-2 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider border flex items-center gap-1.5
-                            ${tag.type === 'ai' 
-                              ? 'bg-blueprint/5 border-blueprint/20 text-blueprint' 
-                              : 'bg-concrete/5 border-border text-concrete'}`}
-                        >
-                          {tag.type === 'ai' && <Sparkles size={8} />}
-                          {tag.label}
-                        </div>
-                      ))}
-                    </div>
-                    <p className="text-[14px] leading-relaxed text-ink/80 font-light max-w-lg line-clamp-4">
-                      {note.content}
-                    </p>
-                    <span className="text-[11px] text-muted-ink uppercase tracking-widest font-medium">Read more</span>
-                  </div>
-                </div>
-              </motion.div>
-            ))}
-            {filteredNotes.length === 0 && (
-              <div className="h-64 flex flex-col items-center justify-center text-center space-y-4">
-                <p className="font-serif text-xl italic text-muted-ink">This notebook is waiting for its first vision.</p>
-                <button 
-                  onClick={() => setShowNewNoteModal(true)}
-                  className="px-6 py-2 border border-ink text-[13px] uppercase tracking-[0.2em] hover:bg-ink hover:text-paper transition-all"
-                >
-                  Begin Drawing
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-
-        <footer className="px-12 py-6 border-t border-ink/5 text-center mt-auto">
-          <p className="text-[11px] text-muted-ink uppercase tracking-[0.2em] font-medium">
-            &copy; 2024 Architectural Grid. All rights reserved.
-          </p>
-        </footer>
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-full flex overflow-hidden transition-all duration-500">
-      <div className="flex-1 flex flex-col overflow-y-auto bg-white dark:bg-paper">
-        <div className="px-12 py-8 flex items-center justify-between sticky top-0 bg-white/90 dark:bg-paper/90 backdrop-blur-sm z-40 border-b border-border">
-          <button 
-            onClick={() => setActiveNoteId(null)}
-            className="flex items-center gap-2 text-ink hover:opacity-60 transition-opacity"
-          >
-            <ArrowLeft size={18} />
-            <span className="text-sm font-medium">Back to collection</span>
-          </button>
-          <div className="flex items-center gap-4">
-            <button 
-              onClick={() => setIsEditing(!isEditing)}
-              className={`flex items-center gap-2 px-4 py-1.5 rounded-lg border transition-all duration-300
-                ${isEditing ? 'bg-blueprint text-white border-blueprint shadow-lg shadow-blueprint/20' : 'border-border text-ink hover:bg-slate-50'}`}
-            >
-              {isEditing ? <Eye size={16} /> : <Edit3 size={16} />}
-              <span className="text-xs font-bold uppercase tracking-widest">{isEditing ? 'Visualiser' : 'Modifier'}</span>
-            </button>
-            <button 
-              onClick={() => togglePin(activeNoteId!)}
-              className={`p-2 rounded-full transition-all ${activeNote?.isPinned ? 'text-amber-600 bg-amber-50 dark:bg-ochre/10' : 'text-muted-ink hover:text-ink'}`}
-              title={activeNote?.isPinned ? "Unpin note" : "Pin note"}
-            >
-              <Pin size={18} className={activeNote?.isPinned ? 'fill-amber-600' : ''} />
-            </button>
-            <button 
-              onClick={() => setIsAISidebarOpen(!isAISidebarOpen)}
-              className={`flex items-center gap-2 px-3 py-1.5 rounded-full border transition-all duration-300
-                ${isAISidebarOpen ? 'bg-ink text-paper border-ink' : 'border-border text-ink hover:bg-white/50 dark:hover:bg-white/5'}`}
-            >
-              <Sparkles size={16} />
-              <span className="text-xs font-medium">AI Assistant</span>
-            </button>
-            <button className="p-2 text-muted-ink hover:text-red-500 transition-colors">
-              <Trash2 size={18} />
-            </button>
-            <button className="p-2 text-muted-ink hover:text-ink transition-colors">
-              <MoreVertical size={18} />
-            </button>
-          </div>
-        </div>
-
-        <div className="max-w-4xl mx-auto w-full px-12 py-16 space-y-12 relative">
-          <AnimatePresence>
-            {slashMenu?.isOpen && (
-              <SlashMenu 
-                position={{ top: slashMenu.top, left: slashMenu.left }}
-                onSelect={(type) => insertCommand(type)}
-                onClose={() => setSlashMenu(null)}
-              />
-            )}
-          </AnimatePresence>
-
-          <div className="space-y-4">
-            <div className="flex items-center gap-3 text-[12px] text-muted-ink uppercase tracking-[.25em] font-bold">
-              <span className="text-blueprint">{activeCarnet?.name}</span>
-              <ChevronRight size={10} className="text-concrete" />
-              <span className="text-concrete">{activeNote?.date}</span>
-            </div>
-            
-            {isEditing ? (
-              <input 
-                type="text"
-                defaultValue={activeNote?.title}
-                className="w-full text-5xl md:text-6xl font-serif font-bold text-ink leading-tight bg-transparent border-none outline-none focus:ring-0 placeholder:text-concrete/20"
-                placeholder="Titre de la note..."
-              />
-            ) : (
-              <h1 className="text-5xl md:text-6xl font-serif font-bold text-ink leading-tight">
-                {activeNote?.title}
-              </h1>
-            )}
-
-            <div className="flex flex-wrap gap-2 pt-2">
-              {activeNote?.tags?.map(tag => (
-                <div 
-                  key={tag.id}
-                  className={`px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest border flex items-center gap-2
-                    ${tag.type === 'ai' 
-                      ? 'bg-blueprint/5 border-blueprint/20 text-blueprint' 
-                      : 'bg-paper border-border text-concrete'}`}
-                >
-                  {tag.type === 'ai' && <Sparkles size={12} />}
-                  {tag.label}
-                  {tag.type === 'ai' && (
-                    <div className="w-1.5 h-1.5 rounded-full bg-blueprint animate-pulse" />
-                  )}
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <div className="aspect-[16/9] w-full bg-slate-100 dark:bg-white/5 rounded-xl overflow-hidden shadow-2xl relative group/img">
-            <img 
-              src={activeNote?.imageUrl} 
-              alt={activeNote?.title} 
-              className="w-full h-full object-cover transition-transform duration-700 group-hover/img:scale-105"
-              referrerPolicy="no-referrer"
-            />
-            <div className="absolute inset-0 bg-gradient-to-t from-ink/20 to-transparent pointer-events-none" />
-          </div>
-
-          <div className="max-w-2xl mx-auto w-full space-y-8 pb-40">
-            {isEditing ? (
-              <textarea 
-                defaultValue={activeNote?.content}
-                onKeyDown={handleEditorKeyDown}
-                className="w-full min-h-[500px] text-lg leading-relaxed text-ink/90 font-serif bg-transparent border-none outline-none focus:ring-0 resize-none placeholder:text-concrete/20"
-                placeholder="Commencez à écrire... Tapez '/' pour les commandes."
-              />
-            ) : (
-              <div className="space-y-8">
-                <p className="text-xl md:text-2xl font-serif leading-relaxed text-ink italic">
-                  {activeNote?.content.split('.')[0]}.
-                </p>
-                <div className="h-px bg-border w-32" />
-                <div className="space-y-6">
-                  {activeNote?.content.split('\n').map((line, i) => (
-                    <p key={i} className="text-lg leading-relaxed text-ink/80 font-light text-justify selection:bg-blueprint/20">
-                      {line}
-                    </p>
-                  ))}
-                  {activeNote?.id.startsWith('n-') && (
-                    <p className="text-lg leading-relaxed text-ink/80 font-light text-justify border-l-2 border-blueprint/20 pl-6 italic">
-                      Architectural grids serve as the invisible scaffolding upon which spatial experiences are constructed. Beyond mere structural repetition, they facilitate a rhythmic dialogue between materiality and void. In this exploration, we examine how light fractures these rigid boundaries, creating a dynamic interplay that evolves with the passage of time.
-                    </p>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

architectural-grid10/src/components/SettingsView.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { SettingsTab } from '../types';
-import { SettingsHeader } from './settings/SettingsHeader';
-import { GeneralTab } from './settings/GeneralTab';
-import { AITab } from './settings/AITab';
-import { AppearanceTab } from './settings/AppearanceTab';
-
-interface SettingsViewProps {
-  activeSettingsTab: SettingsTab;
-  setActiveSettingsTab: (tab: SettingsTab) => void;
-}
-
-export const SettingsView: React.FC<SettingsViewProps> = ({
-  activeSettingsTab,
-  setActiveSettingsTab
-}) => {
-  return (
-    <div className="h-full flex flex-col bg-paper dark:bg-dark-paper overflow-y-auto custom-scrollbar relative font-sans">
-      <div className="absolute inset-0 opacity-[0.04] pointer-events-none grainy-bg mix-blend-multiply dark:mix-blend-overlay" />
-      
-      <div className="relative z-10 flex flex-col min-h-full">
-        <SettingsHeader 
-          activeTab={activeSettingsTab} 
-          setActiveTab={setActiveSettingsTab} 
-        />
-
-        <div className="flex-1 px-12 pb-24 h-full">
-          <div className="max-w-6xl mx-auto">
-            <AnimatePresence mode="wait">
-              {activeSettingsTab === 'general' && (
-                <GeneralTab key="general" />
-              )}
-
-              {activeSettingsTab === 'ai' && (
-                <AITab key="ai" />
-              )}
-
-              {activeSettingsTab === 'appearance' && (
-                <AppearanceTab key="appearance" />
-              )}
-
-              {['profile', 'data', 'mcp', 'about'].includes(activeSettingsTab) && (
-                <motion.div 
-                  key="placeholder"
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -10 }}
-                  className="h-[50vh] flex flex-col items-center justify-center border border-dashed border-border rounded-[32px] space-y-6 bg-white/20 dark:bg-white/5"
-                >
-                  <div className="w-16 h-16 rounded-3xl border border-dashed border-concrete/20 flex items-center justify-center text-concrete/40 bg-paper/50">
-                    <span className="text-2xl font-serif italic text-concrete">?</span>
-                  </div>
-                  <div className="text-center space-y-1">
-                    <p className="text-ink font-bold text-sm tracking-tight">Section en développement</p>
-                    <p className="text-concrete italic text-[11px] font-light">Le module {activeSettingsTab} sera disponible prochainement.</p>
-                  </div>
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

architectural-grid10/src/components/Sidebar.tsx

@@ -1,450 +0,0 @@
-import React from 'react';
-import { 
-  Plus, 
-  Archive, 
-  Settings, 
-  ChevronRight,
-  BookOpen,
-  Bot,
-  Microscope,
-  Activity,
-  Pin,
-  Moon,
-  Sun,
-  Bell,
-  Lock,
-  Edit3,
-  Trash2,
-  Users,
-  Clock
-} from 'lucide-react';
-import { motion, AnimatePresence } from 'motion/react';
-import { NavigationView, Carnet, Note } from '../types';
-
-interface NoteLinkProps {
-  note: Note;
-  isActive: boolean;
-  onClick: () => void;
-}
-
-const NoteLink: React.FC<NoteLinkProps> = ({ note, isActive, onClick }) => (
-  <motion.button
-    initial={{ opacity: 0, x: -10 }}
-    animate={{ opacity: 1, x: 0 }}
-    onClick={onClick}
-    className={`w-full flex items-center gap-2 pl-12 pr-4 py-2 text-[12px] transition-colors rounded-lg
-      ${isActive ? 'bg-white/50 dark:bg-white/10 text-ink font-medium' : 'text-muted-ink hover:text-ink hover:bg-white/30'}`}
-  >
-    <div className="flex items-center gap-2 flex-1 truncate">
-      <div className={`w-1.5 h-1.5 rounded-full shrink-0 ${isActive ? 'bg-ink' : 'bg-transparent border border-muted-ink/30'}`} />
-      <span className="truncate">{note.title}</span>
-    </div>
-    {note.isPinned && <Pin size={10} className="text-amber-500 shrink-0" />}
-  </motion.button>
-);
-
-interface SidebarItemProps {
-  carnet: Carnet;
-  isActive: boolean;
-  notes: Note[];
-  activeNoteId: string | null;
-  onCarnetClick: () => void;
-  onNoteClick: (noteId: string) => void;
-  onAddSubCarnet: () => void;
-  onRename: () => void;
-  onDelete: () => void;
-  children?: React.ReactNode;
-  level: number;
-  isExpanded: boolean;
-  toggleExpand: () => void;
-}
-
-const SidebarItem: React.FC<SidebarItemProps> = ({ 
-  carnet, 
-  isActive, 
-  notes,
-  activeNoteId,
-  onCarnetClick,
-  onNoteClick,
-  onAddSubCarnet,
-  onRename,
-  onDelete,
-  children,
-  level,
-  isExpanded,
-  toggleExpand
-}) => {
-  const hasChildren = React.Children.count(children) > 0;
-
-  return (
-    <div className="space-y-0.5">
-      <div 
-        className="flex items-center group relative h-10"
-        style={{ paddingLeft: `${level * 12}px` }}
-      >
-        {/* Hierarchy Guide Line */}
-        {level > 0 && (
-          <div className="absolute left-[8px] top-[-10px] bottom-1/2 w-px bg-border/40" />
-        )}
-        {level > 0 && (
-          <div className="absolute left-[8px] top-1/2 w-[8px] h-px bg-border/40" />
-        )}
-
-        <div className="flex-1 flex items-center gap-1">
-          {hasChildren ? (
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleExpand();
-              }}
-              className="p-1 hover:bg-ink/5 dark:hover:bg-white/5 rounded-md transition-colors text-muted-ink"
-            >
-              <motion.div animate={{ rotate: isExpanded ? 90 : 0 }} transition={{ duration: 0.2 }}>
-                <ChevronRight size={14} />
-              </motion.div>
-            </button>
-          ) : (
-            <div className="w-6" /> // Spacer for alignment
-          )}
-
-          {/* Hierarchy Connector Line */}
-          {hasChildren && level > 0 && (
-            <div className="absolute left-[-16px] top-[14px] w-3 h-[1px] bg-border/60" />
-          )}
-
-          <motion.div
-            whileHover={{ x: 2 }}
-            className={`flex-1 flex items-center gap-2.5 px-2 py-1.5 rounded-lg transition-all duration-300 group/item cursor-pointer relative
-              ${isActive ? 'bg-white shadow-sm border border-border/40 dark:bg-white/10' : 'hover:bg-white/40 dark:hover:bg-white/5'}`}
-            onClick={onCarnetClick}
-          >
-            {/* active indicator dot */}
-            {isActive && (
-              <motion.div 
-                layoutId="active-indicator"
-                className="absolute -left-1 w-1 h-4 bg-blueprint rounded-full"
-              />
-            )}
-            
-            <div className={`w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-bold border transition-all
-              ${isActive ? 'bg-blueprint text-white border-blueprint' : 'bg-paper dark:bg-white/10 text-concrete border-border dark:border-white/10'}`}>
-              {carnet.initial}
-            </div>
-            <div className="flex-1 text-left flex items-center gap-2 min-w-0">
-              <span className={`text-[12px] font-medium transition-colors truncate ${isActive ? 'text-ink' : 'text-muted-ink group-hover:text-ink'}`}>
-                {carnet.name}
-              </span>
-              {carnet.isPrivate && <Lock size={10} className="text-concrete/60 shrink-0" />}
-            </div>
-            
-            <div className="flex items-center gap-1 opacity-0 group-hover/item:opacity-100 transition-opacity shrink-0">
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onAddSubCarnet();
-                }}
-                className="p-1 hover:bg-ink/10 dark:hover:bg-white/10 rounded-md transition-all text-concrete hover:text-ink"
-                title="Add sub-carnet"
-              >
-                <Plus size={10} />
-              </button>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onRename();
-                }}
-                className="p-1 hover:bg-ink/10 dark:hover:bg-white/10 rounded-md transition-all text-concrete hover:text-ink"
-                title="Rename"
-              >
-                <Edit3 size={10} />
-              </button>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onDelete();
-                }}
-                className="p-1 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md transition-all text-concrete hover:text-red-500"
-                title="Delete"
-              >
-                <Trash2 size={10} />
-              </button>
-              
-              {notes.length > 0 && (
-                <span className="text-[9px] font-bold text-concrete/40 px-1.5 border border-border/40 rounded-full group-hover:text-concrete transition-colors">
-                  {notes.length}
-                </span>
-              )}
-            </div>
-          </motion.div>
-        </div>
-      </div>
-
-      <AnimatePresence initial={false}>
-        {(isExpanded || (isActive && !hasChildren)) && (
-          <motion.div
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: 'auto', opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
-            className="overflow-hidden"
-          >
-            <div className="relative" style={{ marginLeft: `${(level + 1) * 12 + 10}px` }}>
-              {/* Vertical line for nested content */}
-              <div className="absolute left-[-6px] top-0 bottom-4 w-px bg-border/30" />
-              
-              <div className="space-y-1 py-1">
-                {children}
-                {isActive && !hasChildren && notes.map(note => (
-                  <NoteLink 
-                    key={note.id} 
-                    note={note} 
-                    isActive={activeNoteId === note.id}
-                    onClick={() => onNoteClick(note.id)}
-                  />
-                ))}
-                {isActive && !hasChildren && notes.length === 0 && (
-                  <p className="pl-8 py-2 text-[10px] italic text-concrete/40 font-light">
-                    No notes found
-                  </p>
-                )}
-              </div>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};
-
-interface SidebarProps {
-  activeView: NavigationView;
-  isDarkMode: boolean;
-  setIsDarkMode: (val: boolean) => void;
-  setActiveView: (view: NavigationView) => void;
-  carnets: Carnet[];
-  notes: Note[];
-  activeCarnetId: string;
-  activeNoteId: string | null;
-  setActiveCarnetId: (id: string) => void;
-  setActiveNoteId: (id: string | null) => void;
-  setShowNewCarnetModal: (show: boolean, parentId?: string, isRenaming?: boolean, carnetId?: string) => void;
-  onDeleteCarnet: (id: string) => void;
-}
-
-export const Sidebar: React.FC<SidebarProps> = ({
-  activeView,
-  isDarkMode,
-  setIsDarkMode,
-  setActiveView,
-  carnets,
-  notes,
-  activeCarnetId,
-  activeNoteId,
-  setActiveCarnetId,
-  setActiveNoteId,
-  setShowNewCarnetModal,
-  onDeleteCarnet
-}) => {
-  const [expandedIds, setExpandedIds] = React.useState<Set<string>>(new Set(['4'])); // Default expand Research
-
-  const toggleExpand = (id: string) => {
-    const newSet = new Set(expandedIds);
-    if (newSet.has(id)) newSet.delete(id);
-    else newSet.add(id);
-    setExpandedIds(newSet);
-  };
-
-  const renderCarnetTree = (parentId: string | undefined = undefined, level: number = 0) => {
-    return carnets
-      .filter(c => c.parentId === parentId && !c.isDeleted)
-      .map(carnet => (
-        <SidebarItem 
-          key={carnet.id} 
-          carnet={carnet} 
-          isActive={activeCarnetId === carnet.id}
-          notes={notes.filter(n => n.carnetId === carnet.id && !n.isDeleted)}
-          activeNoteId={activeNoteId}
-          level={level}
-          isExpanded={expandedIds.has(carnet.id)}
-          toggleExpand={() => toggleExpand(carnet.id)}
-          onAddSubCarnet={() => {
-            if (!expandedIds.has(carnet.id)) toggleExpand(carnet.id);
-            setShowNewCarnetModal(true, carnet.id);
-          }}
-          onRename={() => {
-            setShowNewCarnetModal(true, undefined, true, carnet.id);
-          }}
-          onDelete={() => {
-            onDeleteCarnet(carnet.id);
-          }}
-          onCarnetClick={() => {
-            setActiveCarnetId(carnet.id);
-            setActiveNoteId(null);
-            // Auto expand when clicking
-            if (!expandedIds.has(carnet.id)) toggleExpand(carnet.id);
-          }}
-          onNoteClick={(id) => {
-            setActiveCarnetId(carnet.id);
-            setActiveNoteId(id);
-          }}
-        >
-          {renderCarnetTree(carnet.id, level + 1)}
-        </SidebarItem>
-      ));
-  };
-
-  return (
-    <aside className="w-80 bg-white/30 dark:bg-[#151515] backdrop-blur-md border-r border-border p-6 flex flex-col z-20 shrink-0 transition-colors duration-500">
-      <div className="mb-10 flex items-center justify-between">
-        <div className="w-10 h-10 rounded-full bg-slate-200 dark:bg-white/10 border border-border flex items-center justify-center text-ink font-serif text-lg shadow-sm">
-          A
-        </div>
-        <div className="flex items-center gap-2">
-          <button 
-            onClick={() => setIsDarkMode(!isDarkMode)}
-            className="p-2 text-muted-ink hover:text-ink transition-all bg-white/50 dark:bg-white/10 rounded-full border border-border dark:border-white/10"
-          >
-            {isDarkMode ? <Sun size={14} /> : <Moon size={14} />}
-          </button>
-
-          <button className="p-2 text-muted-ink hover:text-ink transition-all relative group bg-white/50 dark:bg-white/10 rounded-full border border-border dark:border-white/10">
-            <Bell size={14} />
-            <span className="absolute -top-1 -right-1 w-4 h-4 bg-rose-500 text-white text-[9px] font-bold flex items-center justify-center rounded-full border border-white shadow-sm">
-              3
-            </span>
-          </button>
-
-          <div className="flex bg-white/50 dark:bg-white/10 p-1 rounded-full border border-border dark:border-white/10 transition-all">
-            <button 
-              onClick={() => setActiveView('notebooks')}
-              className={`p-1.5 rounded-full transition-all ${activeView === 'notebooks' ? 'bg-ink text-paper shadow-sm' : 'text-muted-ink hover:text-ink'}`}
-              title="Carnets"
-            >
-              <BookOpen size={14} />
-            </button>
-            <button 
-              onClick={() => setActiveView('reminders')}
-              className={`p-1.5 rounded-full transition-all ${activeView === 'reminders' ? 'bg-ink text-paper shadow-sm' : 'text-muted-ink hover:text-ink'}`}
-              title="Rappels"
-            >
-              <Clock size={14} />
-            </button>
-            <button 
-              onClick={() => setActiveView('agents')}
-              className={`p-1.5 rounded-full transition-all ${activeView === 'agents' ? 'bg-ink text-paper shadow-sm' : 'text-muted-ink hover:text-ink'}`}
-              title="Agents"
-            >
-              <Bot size={14} />
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div className="flex-1 overflow-y-auto space-y-8 -mx-2 px-2 py-4 custom-scrollbar">
-        {activeView === 'notebooks' ? (
-          <div className="space-y-6">
-            <div className="flex items-center justify-between px-4">
-              <p className="text-[10px] font-bold text-concrete tracking-[0.2em] uppercase">
-                Architecture Grid
-              </p>
-              <button 
-                onClick={() => setShowNewCarnetModal(true)}
-                className="p-1 hover:bg-paper dark:hover:bg-white/5 rounded-md text-concrete hover:text-ink transition-colors"
-                title="New Carnet"
-              >
-                <Plus size={14} />
-              </button>
-            </div>
-            
-            <nav className="space-y-0.5">
-              {renderCarnetTree()}
-            </nav>
-          </div>
-        ) : activeView === 'shared' ? (
-          <div className="space-y-6">
-            <p className="text-[10px] font-bold text-concrete tracking-[0.2em] uppercase px-4">
-              Partagé avec moi
-            </p>
-            <div className="px-4 py-8 text-center border border-dashed border-border rounded-2xl bg-paper/30">
-              <Users size={24} className="mx-auto text-concrete/40 mb-3" />
-              <p className="text-[11px] text-concrete italic">Aucun document partagé pour le moment.</p>
-            </div>
-          </div>
-        ) : activeView === 'reminders' ? (
-          <div className="space-y-6">
-            <p className="text-[10px] font-bold text-concrete tracking-[0.2em] uppercase px-4">
-              Rappels programmés
-            </p>
-            <div className="px-4 py-8 text-center border border-dashed border-border rounded-2xl bg-paper/30">
-              <Clock size={24} className="mx-auto text-concrete/40 mb-3" />
-              <p className="text-[11px] text-concrete italic">Aucun rappel actif.</p>
-            </div>
-          </div>
-        ) : activeView === 'agents' ? (
-          <div>
-            <p className="text-[10px] font-bold text-muted-ink tracking-widest uppercase mb-4 px-4">
-              Intelligence OS
-            </p>
-            <div className="space-y-1">
-              {[
-                { id: 'a1', name: 'Mes Agents', icon: <Bot size={16} /> },
-                { id: 'a2', name: 'Le Lab AI', icon: <Microscope size={16} /> },
-                { id: 'a3', name: 'Activités', icon: <Activity size={16} /> },
-              ].map(item => (
-                <button
-                  key={item.id}
-                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 group
-                    ${item.id === 'a1' ? 'active-nav-item' : 'text-muted-ink hover:bg-white/40 dark:hover:bg-white/5 hover:text-ink'}`}
-                >
-                  <div className={`w-8 h-8 rounded-full flex items-center justify-center border transition-colors
-                    ${item.id === 'a1' ? 'bg-ink text-paper border-ink' : 'bg-white/60 dark:bg-white/10 border-border dark:border-white/10 group-hover:border-ink/20'}`}>
-                    {item.icon}
-                  </div>
-                  <span className="text-[13px] font-medium">{item.name}</span>
-                </button>
-              ))}
-            </div>
-          </div>
-        ) : null}
-      </div>
-
-      <div className="pt-4 border-t border-border/40 mt-auto pb-4">
-        <div className="px-2 space-y-0.5">
-          <button 
-            onClick={() => setActiveView('shared')}
-            className={`w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl ${activeView === 'shared' ? 'bg-blueprint/5 text-blueprint' : 'text-muted-ink hover:text-ink hover:bg-black/5'}`}
-          >
-            <Users size={14} className={activeView === 'shared' ? 'text-blueprint' : 'text-muted-ink group-hover:text-ink'} />
-            <span className="flex-1 text-left">Partagé</span>
-          </button>
-
-          <button className="w-full flex items-center gap-3 px-3 py-2 text-[12px] text-muted-ink hover:text-ink hover:bg-black/5 transition-all font-medium group rounded-xl">
-            <Archive size={14} className="text-muted-ink group-hover:text-ink" />
-            <span className="flex-1 text-left">Archives</span>
-          </button>
-
-          <button 
-            onClick={() => setActiveView('trash')}
-            className={`w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl ${activeView === 'trash' ? 'bg-rose-50 text-rose-500' : 'text-muted-ink hover:text-rose-500 hover:bg-rose-50/50'}`}
-          >
-            <Trash2 size={14} className={activeView === 'trash' ? 'text-rose-500' : 'text-muted-ink group-hover:text-rose-500'} />
-            <span className="flex-1 text-left">Corbeille</span>
-            {notes.some(n => n.isDeleted) && (
-              <div className="w-1.5 h-1.5 rounded-full bg-rose-400" />
-            )}
-          </button>
-
-          <div className="my-2 h-px bg-border/20 mx-2" />
-
-          <button 
-            onClick={() => setActiveView('settings')}
-            className={`w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl ${activeView === 'settings' ? 'bg-ink text-paper shadow-sm' : 'text-muted-ink hover:text-ink hover:bg-black/5'}`}
-          >
-            <Settings size={14} className={activeView === 'settings' ? 'text-paper' : 'text-muted-ink group-hover:text-ink'} />
-            <span className="flex-1 text-left">Paramètres</span>
-          </button>
-        </div>
-      </div>
-    </aside>
-  );
-};

architectural-grid10/src/components/SlashMenu.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { 
-  Heading1, 
-  Heading2, 
-  List, 
-  Quote, 
-  Code, 
-  Image as ImageIcon, 
-  Type,
-  Sparkles
-} from 'lucide-react';
-import { motion, AnimatePresence } from 'motion/react';
-
-interface SlashMenuProps {
-  position: { top: number; left: number };
-  onSelect: (type: string) => void;
-  onClose: () => void;
-}
-
-export const SlashMenu: React.FC<SlashMenuProps> = ({ position, onSelect, onClose }) => {
-  const commands = [
-    { id: 'h1', label: 'Titre Principal', icon: <Heading1 size={14} />, desc: 'Grand titre de section' },
-    { id: 'h2', label: 'Sous-titre', icon: <Heading2 size={14} />, desc: 'Titre de niveau 2' },
-    { id: 'bullet', label: 'Liste à puces', icon: <List size={14} />, desc: 'Liste simple' },
-    { id: 'quote', label: 'Citation', icon: <Quote size={14} />, desc: 'Bloc de texte mis en avant' },
-    { id: 'code', label: 'Bloc de Code', icon: <Code size={14} />, desc: 'Code ou texte technique' },
-    { id: 'image', label: 'Image', icon: <ImageIcon size={14} />, desc: 'Insérer un visuel' },
-    { id: 'ai-summary', label: 'Résumé IA', icon: <Sparkles size={14} />, desc: 'Générer un résumé court', special: true },
-  ];
-
-  return (
-    <>
-      <div className="fixed inset-0 z-[60]" onClick={onClose} />
-      <motion.div
-        initial={{ opacity: 0, scale: 0.95, y: 10 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        exit={{ opacity: 0, scale: 0.95, y: 10 }}
-        className="fixed z-[70] w-64 bg-white dark:bg-[#1A1A1A] border border-border shadow-2xl rounded-xl overflow-hidden py-2"
-        style={{ top: position.top, left: position.left }}
-      >
-        <div className="px-3 py-2 text-[10px] font-bold text-concrete uppercase tracking-widest border-b border-border/40 mb-1">
-          Commandes rapides
-        </div>
-        <div className="max-h-80 overflow-y-auto custom-scrollbar">
-          {commands.map((cmd) => (
-            <button
-              key={cmd.id}
-              onClick={() => onSelect(cmd.id)}
-              className="w-full flex items-start gap-3 px-3 py-2 hover:bg-paper dark:hover:bg-white/5 transition-colors group text-left"
-            >
-              <div className={`p-2 rounded-lg border border-border transition-colors group-hover:border-ink/20 
-                ${cmd.special ? 'bg-blueprint/10 text-blueprint border-blueprint/20' : 'bg-white/50 dark:bg-white/5 text-ink'}`}>
-                {cmd.icon}
-              </div>
-              <div className="space-y-0.5">
-                <p className="text-xs font-bold text-ink">{cmd.label}</p>
-                <p className="text-[10px] text-muted-ink leading-tight">{cmd.desc}</p>
-              </div>
-            </button>
-          ))}
-        </div>
-      </motion.div>
-    </>
-  );
-};

architectural-grid10/src/components/TrashView.tsx

@@ -1,218 +0,0 @@
-import React from 'react';
-import { 
-  Trash2, 
-  RotateCcw, 
-  X, 
-  FileText, 
-  Folder, 
-  Search,
-  ChevronRight,
-  Clock,
-  AlertCircle
-} from 'lucide-react';
-import { motion, AnimatePresence } from 'motion/react';
-import { Note, Carnet } from '../types';
-
-interface TrashViewProps {
-  deletedNotes: Note[];
-  deletedCarnets: Carnet[];
-  onRestoreNote: (id: string) => void;
-  onRestoreCarnet: (id: string) => void;
-  onPermanentDeleteNote: (id: string) => void;
-  onPermanentDeleteCarnet: (id: string) => void;
-  onEmptyTrash: () => void;
-}
-
-export const TrashView: React.FC<TrashViewProps> = ({
-  deletedNotes,
-  deletedCarnets,
-  onRestoreNote,
-  onRestoreCarnet,
-  onPermanentDeleteNote,
-  onPermanentDeleteCarnet,
-  onEmptyTrash
-}) => {
-  const [searchQuery, setSearchQuery] = React.useState('');
-  const [filterType, setFilterType] = React.useState<'all' | 'notes' | 'carnets'>('all');
-
-  const getDaysRemaining = (dateString?: string) => {
-    if (!dateString) return 30;
-    const deletedDate = new Date(dateString);
-    const now = new Date();
-    const diffTime = now.getTime() - deletedDate.getTime();
-    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
-    return Math.max(0, 30 - diffDays);
-  };
-
-  const filteredItems = React.useMemo(() => {
-    const items = [
-      ...deletedNotes.map(n => ({ ...n, itemType: 'note' as const })),
-      ...deletedCarnets.map(c => ({ ...c, itemType: 'carnet' as const }))
-    ];
-
-    return items
-      .filter(item => {
-        const matchesSearch = ('title' in item ? item.title : item.name).toLowerCase().includes(searchQuery.toLowerCase());
-        const matchesType = filterType === 'all' || (filterType === 'notes' && item.itemType === 'note') || (filterType === 'carnets' && item.itemType === 'carnet');
-        return matchesSearch && matchesType;
-      })
-      .sort((a, b) => {
-        const dateA = a.deletedAt ? new Date(a.deletedAt).getTime() : 0;
-        const dateB = b.deletedAt ? new Date(b.deletedAt).getTime() : 0;
-        return dateB - dateA;
-      });
-  }, [deletedNotes, deletedCarnets, searchQuery, filterType]);
-
-  return (
-    <div className="h-full flex flex-col bg-[#F9F8F6] dark:bg-dark-paper">
-      <header className="px-12 pt-12 pb-8 flex flex-col gap-6 sticky top-0 bg-[#F9F8F6]/80 backdrop-blur-md z-30 border-b border-border/20">
-        <div className="flex items-center justify-between">
-          <div className="space-y-1">
-            <h1 className="text-4xl font-serif font-medium text-ink flex items-center gap-4">
-              Corbeille <Trash2 size={28} className="text-rose-400 opacity-40" />
-            </h1>
-            <p className="text-[10px] text-concrete font-bold uppercase tracking-[0.3em] opacity-60">
-              Auto-suppression après 30 jours
-            </p>
-          </div>
-          
-          {filteredItems.length > 0 && (
-            <button 
-              onClick={() => {
-                if (window.confirm('Vider la corbeille ? Cette action est irréversible.')) {
-                  onEmptyTrash();
-                }
-              }}
-              className="px-6 py-3 bg-paper border border-border text-rose-500 rounded-2xl text-[10px] font-bold uppercase tracking-widest hover:bg-rose-50 hover:border-rose-100 transition-all shadow-sm"
-            >
-              Vider tout
-            </button>
-          )}
-        </div>
-
-        <div className="flex items-center gap-6">
-          <div className="group relative flex-1 max-w-xl">
-            <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-concrete group-focus-within:text-ink transition-colors" size={16} />
-            <input 
-              type="text"
-              placeholder="Rechercher..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full bg-white dark:bg-white/5 border border-border/40 rounded-2xl pl-12 pr-6 py-4 text-sm outline-none focus:ring-4 ring-ink/5 transition-all shadow-sm"
-            />
-          </div>
-
-          <div className="flex bg-white dark:bg-white/5 p-1 rounded-2xl border border-border shadow-sm">
-            {(['all', 'notes', 'carnets'] as const).map((type) => (
-              <button
-                key={type}
-                onClick={() => setFilterType(type)}
-                className={`px-6 py-3 rounded-xl text-[10px] font-bold uppercase tracking-widest transition-all
-                  ${filterType === type ? 'bg-ink text-paper shadow-lg' : 'text-concrete hover:text-ink'}`}
-              >
-                {type === 'all' ? 'Tous' : type === 'notes' ? 'Notes' : 'Carnets'}
-              </button>
-            ))}
-          </div>
-        </div>
-      </header>
-
-      <main className="flex-1 px-12 py-12 overflow-y-auto custom-scrollbar">
-        {filteredItems.length > 0 ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <AnimatePresence mode="popLayout">
-              {filteredItems.map((item) => {
-                const daysLeft = getDaysRemaining(item.deletedAt);
-                return (
-                  <motion.div
-                    key={item.id}
-                    layout
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, scale: 0.9 }}
-                    className="bg-white dark:bg-white/5 border border-border/60 rounded-[32px] p-8 group hover:shadow-2xl hover:border-blueprint/20 transition-all relative overflow-hidden flex flex-col"
-                  >
-                    {/* Countdown Progress Bar */}
-                    <div className="absolute top-0 left-0 w-full h-1 bg-slate-100 overflow-hidden">
-                      <motion.div 
-                        initial={{ width: 0 }}
-                        animate={{ width: `${(daysLeft / 30) * 100}%` }}
-                        className={`h-full ${daysLeft < 5 ? 'bg-rose-500' : 'bg-blueprint'}`}
-                      />
-                    </div>
-
-                    <div className="flex justify-between items-start mb-6">
-                      <div className={`p-3 rounded-2xl ${item.itemType === 'note' ? 'bg-blueprint/10 text-blueprint' : 'bg-concrete/10 text-concrete'}`}>
-                        {item.itemType === 'note' ? <FileText size={20} /> : <Folder size={20} />}
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <button 
-                          onClick={() => item.itemType === 'note' ? onRestoreNote(item.id) : onRestoreCarnet(item.id)}
-                          className="flex items-center gap-2 px-4 py-2 bg-emerald-50 text-emerald-600 rounded-xl text-[10px] font-bold uppercase tracking-widest hover:bg-emerald-100 transition-colors"
-                        >
-                          <RotateCcw size={12} /> Restaurer
-                        </button>
-                        <button 
-                          onClick={() => item.itemType === 'note' ? onPermanentDeleteNote(item.id) : onPermanentDeleteCarnet(item.id)}
-                          className="p-2 hover:bg-rose-50 text-rose-500 rounded-xl transition-colors"
-                          title="Supprimer définitivement"
-                        >
-                          <X size={16} />
-                        </button>
-                      </div>
-                    </div>
-
-                    <div className="space-y-2 mb-8 flex-1">
-                      <h3 className="text-base font-serif font-medium text-ink leading-tight">
-                        {'title' in item ? item.title : item.name}
-                      </h3>
-                      <div className="flex items-center gap-3">
-                        <div className={`text-[9px] font-bold uppercase tracking-widest px-2 py-0.5 rounded border ${daysLeft < 5 ? 'border-rose-200 text-rose-500 bg-rose-50' : 'border-blueprint/20 text-blueprint bg-blueprint/5'}`}>
-                          {daysLeft} JOURS RESTANTS
-                        </div>
-                        <span className="text-[10px] text-concrete font-medium uppercase tracking-tight flex items-center gap-1">
-                          <Clock size={10} /> {('deletedAt' in item && item.deletedAt) ? new Date(item.deletedAt).toLocaleDateString() : ''}
-                        </span>
-                      </div>
-                    </div>
-
-                    {item.itemType === 'note' && 'content' in item ? (
-                      <div className="text-[12px] text-concrete line-clamp-3 leading-relaxed opacity-60 font-light border-t border-border/40 pt-4">
-                        {item.content.replace(/[#*`]/g, '')}
-                      </div>
-                    ) : (
-                      <div className="border-t border-border/40 pt-4">
-                        <div className="text-[9px] font-bold text-concrete/40 uppercase tracking-widest">
-                          Contenu du dossier préservé
-                        </div>
-                      </div>
-                    )}
-                  </motion.div>
-                );
-              })}
-            </AnimatePresence>
-          </div>
-        ) : (
-          <div className="h-full flex flex-col items-center justify-center text-center space-y-6 opacity-40">
-            <div className="p-8 rounded-full bg-slate-100 border-2 border-dashed border-border flex items-center justify-center">
-              <Trash2 size={64} className="text-concrete" />
-            </div>
-            <div className="space-y-2">
-              <h2 className="text-2xl font-serif text-ink italic">Corbeille vide</h2>
-              <p className="text-sm text-concrete max-w-xs">
-                Les éléments que vous supprimez apparaîtront ici. Ils seront conservés pendant 30 jours avant suppression définitive.
-              </p>
-            </div>
-          </div>
-        )}
-      </main>
-
-      <footer className="px-12 py-6 bg-white/50 border-t border-border flex items-center gap-4">
-        <AlertCircle size={14} className="text-concrete" />
-        <p className="text-[10px] text-concrete font-medium uppercase tracking-widest">
-          Conseil : La restauration d'un carnet restaurera également toutes les notes à l'intérieur.
-        </p>
-      </footer>
-    </div>
-  );
-};

architectural-grid10/src/components/settings/AITab.tsx

@@ -1,152 +0,0 @@
-import React from 'react';
-import { Sparkles, Edit3, MessageCircle, Languages, Tag, History, FlaskConical } from 'lucide-react';
-import { motion } from 'motion/react';
-
-const AISettingCard = ({ icon, title, description, defaultChecked = false }: any) => (
-  <div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-6 flex items-center justify-between group hover:shadow-xl hover:shadow-blueprint/5 transition-all duration-300">
-    <div className="flex items-center gap-5">
-      <div className="p-3 bg-paper dark:bg-blueprint/10 rounded-2xl text-blueprint group-hover:bg-blueprint group-hover:text-white group-hover:scale-110 transition-all duration-300 border border-blueprint/20">
-        {icon}
-      </div>
-      <div className="space-y-1">
-        <h4 className="text-[13px] font-bold text-ink">{title}</h4>
-        <p className="text-[10px] text-muted-ink leading-relaxed pr-4 line-clamp-2">{description}</p>
-      </div>
-    </div>
-    <label className="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
-      <input type="checkbox" className="sr-only peer" defaultChecked={defaultChecked} />
-      <div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-blueprint"></div>
-    </label>
-  </div>
-);
-
-export const AITab: React.FC = () => {
-  return (
-    <motion.div 
-      initial={{ opacity: 0, y: 10 }} 
-      animate={{ opacity: 1, y: 0 }} 
-      className="space-y-16 pb-20"
-    >
-      <div className="space-y-10">
-        <h3 className="text-[10px] font-bold uppercase tracking-[0.4em] text-muted-ink opacity-60">Configurez vos fonctionnalités IA et préférences</h3>
-        
-        <div className="space-y-6">
-          <h4 className="text-sm font-bold text-ink border-b border-border/40 pb-4">Fonctionnalités IA</h4>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-            <AISettingCard 
-              icon={<Edit3 size={18} />}
-              title="Suggestions de titre"
-              description="Suggérer des titres pour les notes sans titre après 50+ mots"
-              defaultChecked
-            />
-            <AISettingCard 
-              icon={<Sparkles size={18} />}
-              title="IA Note"
-              description="Active le bouton de chat IA et les outils d'amélioration du texte"
-              defaultChecked
-            />
-            <AISettingCard 
-              icon={<MessageCircle size={18} />}
-              title="💡 J'ai remarqué quelque chose..."
-              description="Aperçu quotidien de vos notes"
-              defaultChecked
-            />
-            <AISettingCard 
-              icon={<Languages size={18} />}
-              title="Détection de langue"
-              description="Détecte automatiquement la langue de vos notes"
-              defaultChecked
-            />
-            <AISettingCard 
-              icon={<Tag size={18} />}
-              title="Suggestion des labels"
-              description="Suggère et applique des étiquettes automatiquement à vos notes"
-              defaultChecked
-            />
-            <AISettingCard 
-              icon={<History size={18} />}
-              title="Historique des notes"
-              description="Active les snapshots de versions et la restauration depuis History"
-              defaultChecked
-            />
-          </div>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-6">
-          {/* Fréquence */}
-          <div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-8 space-y-10">
-            <div className="space-y-1.5 text-left text-blueprint">
-              <h4 className="text-sm font-bold">Fréquence</h4>
-              <p className="text-[10px] opacity-60 uppercase tracking-wider font-semibold">Fréquence d'analyse des connexions</p>
-            </div>
-            <div className="space-y-6">
-              <label className="flex items-center gap-4 cursor-pointer group">
-                <input type="radio" name="freq" className="sr-only peer" defaultChecked />
-                <div className="w-5 h-5 rounded-full border-2 border-border peer-checked:border-blueprint flex items-center justify-center p-0.5 transition-all">
-                  <div className="w-full h-full rounded-full bg-transparent peer-checked:bg-blueprint" />
-                </div>
-                <span className="text-sm font-medium text-ink group-hover:opacity-70 transition-opacity">Quotidienne</span>
-              </label>
-              <label className="flex items-center gap-4 cursor-pointer group">
-                <input type="radio" name="freq" className="sr-only peer" />
-                <div className="w-5 h-5 rounded-full border-2 border-border peer-checked:border-blueprint flex items-center justify-center p-0.5 transition-all">
-                  <div className="w-full h-full rounded-full bg-transparent peer-checked:bg-blueprint" />
-                </div>
-                <span className="text-sm font-medium text-ink group-hover:opacity-70 transition-opacity">Hebdomadaire</span>
-              </label>
-            </div>
-          </div>
-
-          {/* Mode d'historique */}
-          <div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-8 space-y-10">
-            <div className="space-y-1.5 text-left text-blueprint">
-              <h4 className="text-sm font-bold">Mode d'historique</h4>
-              <p className="text-[10px] opacity-60 uppercase tracking-wider font-semibold">Gestion des snapshots</p>
-            </div>
-            <div className="space-y-6">
-              <label className="flex items-center gap-4 cursor-pointer group">
-                <input type="radio" name="hist" className="sr-only peer" defaultChecked />
-                <div className="w-5 h-5 rounded-full border-2 border-border peer-checked:border-blueprint flex items-center justify-center p-0.5 transition-all">
-                  <div className="w-full h-full rounded-full bg-transparent peer-checked:bg-blueprint" />
-                </div>
-                <div className="space-y-0.5">
-                  <p className="text-sm font-bold text-ink">Manuel (bouton commit)</p>
-                  <p className="text-[10px] text-muted-ink">Créer des snapshots manuellement</p>
-                </div>
-              </label>
-              <label className="flex items-center gap-4 cursor-pointer group">
-                <input type="radio" name="hist" className="sr-only peer" />
-                <div className="w-5 h-5 rounded-full border-2 border-border peer-checked:border-blueprint flex items-center justify-center p-0.5 transition-all">
-                  <div className="w-full h-full rounded-full bg-transparent peer-checked:bg-blueprint" />
-                </div>
-                <div className="space-y-0.5">
-                  <p className="text-sm font-bold text-ink">Automatique (intelligent)</p>
-                  <p className="text-[10px] text-muted-ink">Snapshots automatiques avec détection</p>
-                </div>
-              </label>
-            </div>
-          </div>
-        </div>
-
-        {/* Mode Démo */}
-        <div className="bg-ochre/5 dark:bg-ochre/10 border border-ochre/20 rounded-2xl p-8 flex items-center justify-between group transition-all duration-300 hover:bg-ochre/10">
-          <div className="flex items-center gap-6">
-            <div className="p-3 bg-paper dark:bg-ochre/20 rounded-2xl text-ochre border border-ochre/30">
-              <FlaskConical size={20} />
-            </div>
-            <div className="space-y-1.5 text-left">
-              <h4 className="text-sm font-bold text-ink flex items-center gap-3">
-                🧪 Mode Démo
-              </h4>
-              <p className="text-[11px] text-muted-ink leading-relaxed font-medium">Accélère Memory Echo pour les tests. Les connexions apparaissent instantanément.</p>
-            </div>
-          </div>
-          <label className="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
-            <input type="checkbox" className="sr-only peer" />
-            <div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-ochre"></div>
-          </label>
-        </div>
-      </div>
-    </motion.div>
-  );
-};

architectural-grid10/src/components/settings/AppearanceTab.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import { Palette, Type, LayoutGrid, Maximize } from 'lucide-react';
-import { motion } from 'motion/react';
-
-const AppearanceSelect = ({ icon, title, description, options, defaultValue }: any) => (
-  <div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-8 space-y-8 group transition-all duration-300 hover:shadow-xl hover:shadow-slate/5">
-    <div className="flex items-center gap-5">
-      <div className="p-3 bg-paper dark:bg-white/10 rounded-2xl text-slate border border-border group-hover:scale-110 transition-transform duration-300">
-        {icon}
-      </div>
-      <div className="space-y-0.5 text-left">
-        <h4 className="text-base font-bold text-ink">{title}</h4>
-        <p className="text-[11px] text-concrete leading-tight">{description}</p>
-      </div>
-    </div>
-    
-    <div className="relative group/select">
-      <select 
-        defaultValue={defaultValue}
-        className="w-full bg-white/50 dark:bg-black/40 border border-border rounded-xl px-5 py-4 text-sm outline-none focus:ring-1 ring-slate/20 appearance-none cursor-pointer text-ink font-bold transition-all hover:bg-white dark:hover:bg-black/60"
-      >
-        {options.map((opt: string) => (
-          <option key={opt}>{opt}</option>
-        ))}
-      </select>
-      <div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-concrete group-hover/select:text-slate transition-colors">
-        <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M1 1L5 5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-        </svg>
-      </div>
-    </div>
-  </div>
-);
-
-export const AppearanceTab: React.FC = () => {
-  return (
-    <motion.div 
-      initial={{ opacity: 0, y: 10 }} 
-      animate={{ opacity: 1, y: 0 }} 
-      className="space-y-16 pb-20"
-    >
-      <div className="space-y-10">
-        <h3 className="text-[10px] font-bold uppercase tracking-[0.4em] text-concrete opacity-60">Personnaliser l'apparence de l'application</h3>
-        
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-          <AppearanceSelect 
-            icon={<Palette size={20} />}
-            title="Thème"
-            description="Sélectionner le mode visuel"
-            options={['Clair', 'Sombre', 'Système']}
-            defaultValue="Clair"
-          />
-          <AppearanceSelect 
-            icon={<Type size={20} />}
-            title="Taille de la police"
-            description="Ajustez la lisibilité globale de l'interface"
-            options={['Petite', 'Moyenne', 'Grande']}
-            defaultValue="Moyenne"
-          />
-          <AppearanceSelect 
-            icon={<Type size={20} />}
-            title="Famille de polices"
-            description="La typographie définit l'âme de l'application"
-            options={['Inter', 'JetBrains Mono', 'Public Sans', 'Outfit']}
-            defaultValue="JetBrains Mono"
-          />
-          <AppearanceSelect 
-            icon={<LayoutGrid size={20} />}
-            title="Affichage des notes"
-            description="Gestion visuelle de la grille de composition"
-            options={['Cartes (grille)', 'Liste', 'Tableau']}
-            defaultValue="Cartes (grille)"
-          />
-          <AppearanceSelect 
-            icon={<Maximize size={20} />}
-            title="Taille des notes"
-            description="Structure de la mise en page des éléments"
-            options={['Taille uniforme', 'Variable (Masonry)']}
-            defaultValue="Taille uniforme"
-          />
-        </div>
-      </div>
-    </motion.div>
-  );
-};

architectural-grid10/src/components/settings/GeneralTab.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import { Globe, Bell } from 'lucide-react';
-import { motion } from 'motion/react';
-
-export const GeneralTab: React.FC = () => {
-  return (
-    <motion.div 
-      initial={{ opacity: 0, y: 10 }} 
-      animate={{ opacity: 1, y: 0 }} 
-      className="space-y-12"
-    >
-      <div className="space-y-4">
-        <h3 className="text-[10px] font-bold uppercase tracking-[0.3em] text-concrete">Paramètres généraux de l'application</h3>
-        
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          {/* Langue */}
-          <div className="bg-white/40 dark:bg-white/5 border border-border rounded-xl p-8 space-y-6">
-            <div className="flex items-center gap-5">
-              <div className="p-3 bg-paper dark:bg-white/10 rounded-2xl text-slate border border-border">
-                <Globe size={18} />
-              </div>
-              <div className="space-y-0.5">
-                <h4 className="text-base font-bold text-ink">Langue</h4>
-                <p className="text-[11px] text-concrete">Sélectionner une langue</p>
-              </div>
-            </div>
-            
-            <div className="relative group">
-              <select className="w-full bg-white/50 dark:bg-black/40 border border-border rounded-xl px-5 py-3.5 text-sm outline-none focus:ring-1 ring-blueprint/20 appearance-none cursor-pointer transition-all hover:bg-white dark:hover:bg-black/60 text-ink font-medium">
-                <option>Français</option>
-                <option>English</option>
-                <option>Español</option>
-              </select>
-              <div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none opacity-40 text-concrete">
-                <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M1 1L5 5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-                </svg>
-              </div>
-            </div>
-          </div>
-
-          {/* Notifications */}
-          <div className="bg-white/40 dark:bg-white/5 border border-border rounded-xl p-8 space-y-6">
-            <div className="flex items-center gap-5">
-              <div className="p-3 bg-paper dark:bg-white/10 rounded-2xl text-slate border border-border">
-                <Bell size={18} />
-              </div>
-              <div className="space-y-0.5">
-                <h4 className="text-base font-bold text-ink">Notifications</h4>
-                <p className="text-[11px] text-concrete">Gérez vos préférences de notifications</p>
-              </div>
-            </div>
-            
-            <div className="space-y-6 divide-y divide-border/40 text-left">
-              <div className="flex items-center justify-between pt-0">
-                <div className="space-y-1">
-                  <p className="text-xs font-bold text-ink">Notifications par email</p>
-                  <p className="text-[10px] text-concrete leading-relaxed">Recevoir des notifications importantes par email</p>
-                </div>
-                <label className="relative inline-flex items-center cursor-pointer">
-                  <input type="checkbox" className="sr-only peer" />
-                  <div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-slate"></div>
-                </label>
-              </div>
-              
-              <div className="flex items-center justify-between pt-6">
-                <div className="space-y-1">
-                  <p className="text-xs font-bold text-ink">Notifications bureau</p>
-                  <p className="text-[10px] text-concrete leading-relaxed">Recevoir des notifications dans votre navigateur</p>
-                </div>
-                <label className="relative inline-flex items-center cursor-pointer">
-                  <input type="checkbox" className="sr-only peer" defaultChecked />
-                  <div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-slate"></div>
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </motion.div>
-  );
-};

architectural-grid10/src/components/settings/SettingsHeader.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import { Settings, Sparkles, Palette, User, Database, Code, Info } from 'lucide-react';
-import { motion } from 'motion/react';
-import { SettingsTab } from '../../types';
-
-interface SettingsHeaderProps {
-  activeTab: SettingsTab;
-  setActiveTab: (tab: SettingsTab) => void;
-}
-
-export const SettingsHeader: React.FC<SettingsHeaderProps> = ({ activeTab, setActiveTab }) => {
-  const tabs = [
-    { id: 'general', label: 'Paramètres généraux', icon: <Settings size={14} /> },
-    { id: 'ai', label: 'Paramètres IA', icon: <Sparkles size={14} /> },
-    { id: 'appearance', label: 'Apparence', icon: <Palette size={14} /> },
-    { id: 'profile', label: 'Profil', icon: <User size={14} /> },
-    { id: 'data', label: 'Gestion des données', icon: <Database size={14} /> },
-    { id: 'mcp', label: 'Paramètres MCP', icon: <Code size={14} /> },
-    { id: 'about', label: 'À propos', icon: <Info size={14} /> },
-  ];
-
-  return (
-    <header className="px-12 pt-20 pb-16 space-y-12">
-      <div className="space-y-4">
-        <h1 className="text-[64px] font-serif text-ink tracking-tight leading-none italic font-medium">Paramètres</h1>
-        <p className="text-[10px] font-bold uppercase tracking-[0.4em] text-concrete opacity-60">Configuration & Préférences</p>
-      </div>
-
-      <nav className="flex items-center gap-1 border-b border-border/40 pb-px">
-        {tabs.map((tab) => (
-          <button
-            key={tab.id}
-            onClick={() => setActiveTab(tab.id as SettingsTab)}
-            className={`flex items-center gap-2.5 px-6 py-5 text-[10px] font-bold uppercase tracking-[0.18em] transition-all relative whitespace-nowrap
-              ${activeTab === tab.id ? 'text-ink' : 'text-concrete hover:text-ink/60'}`}
-          >
-            <span className={activeTab === tab.id ? 'text-ink' : 'text-concrete'}>{tab.icon}</span>
-            {tab.label}
-            {activeTab === tab.id && (
-              <motion.div 
-                layoutId="activeSettingsTabLine" 
-                className="absolute bottom-0 left-0 right-0 h-0.5 bg-ink" 
-                transition={{ type: 'spring', bounce: 0.1, duration: 0.8 }}
-              />
-            )}
-          </button>
-        ))}
-      </nav>
-    </header>
-  );
-};

architectural-grid10/src/constants.ts

@@ -1,62 +0,0 @@
-import { Carnet, Note } from './types';
-
-export const CARNETS: Carnet[] = [
-  { id: '1', name: 'Daily Notes', initial: 'D', type: 'Private', isPrivate: true },
-  { id: '2', name: 'Project: Neo', initial: 'P', type: 'Project' },
-  { id: '3', name: 'Shared Docs', initial: 'S', type: 'Shared' },
-  { id: '4', name: 'Architecture Research', initial: 'A', type: 'Project' },
-  { id: '5', name: 'History of Architecture', initial: 'H', type: 'Project', parentId: '4' },
-  { id: '6', name: 'Modernism', initial: 'M', type: 'Project', parentId: '5' },
-  { id: '7', name: 'Sustainable Design', initial: 'S', type: 'Project', parentId: '4' },
-];
-
-export const ALL_NOTES: Note[] = [
-  {
-    id: 'n1',
-    carnetId: '4',
-    title: 'Grid Systems',
-    date: 'Oct 26, 2024',
-    content: 'Grid Systems is streathen in ognitiacs clesign and simulhere desipmalt: complded structurer and manamateriai-s: ci arevenuatingly used, asiller straterty of insaee to the tmn and usaes of disrension, architecture of emiornabious tracious structures.',
-    imageUrl: 'https://images.unsplash.com/photo-1503387762-592dea58ef23?auto=format&fit=crop&q=80&w=800&h=600',
-    tags: [
-      { id: 't1', label: 'Architecture', type: 'user' },
-      { id: 't2', label: 'Systems', type: 'ai' }
-    ]
-  },
-  {
-    id: 'n2',
-    carnetId: '4',
-    title: 'Materiality',
-    date: 'Oct 24, 2024',
-    content: 'Materiality is combinated by relliaitic structureirs measure of plastics, natural, materials and priotical structures. Materialed coasts erabiocera alann light spaces and octicm employed design on thodolen of materiality, and tohlite tersev/ used in the gridin structures en obain materials, coms pathetic structure.',
-    imageUrl: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=800&h=600',
-    tags: [
-      { id: 't3', label: 'Materials', type: 'user' },
-      { id: 't4', label: 'Sustainabilty', type: 'ai' }
-    ]
-  },
-  {
-    id: 'n3',
-    carnetId: '4',
-    title: 'Light & Space',
-    date: 'Oct 22, 2024',
-    content: 'Light & Space is a creaivity of light & Space inralicated in sizazant or dark crotrcning and netrescenations of avant trurme sivonpaltures for in inncr-en allimativefiting is cerriadating and sityle.',
-    imageUrl: 'https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=800&h=600',
-    tags: [
-      { id: 't5', label: 'Lighting', type: 'user' },
-      { id: 't6', label: 'Atmosphere', type: 'ai' }
-    ]
-  },
-  {
-    id: 'n4',
-    carnetId: '2',
-    title: 'Neo-Brutalism study',
-    date: 'Sep 12, 2024',
-    content: 'Exploring the raw aesthetic of neo-brutalism in urban environments. Focus on concrete textures and massive forms.',
-    imageUrl: 'https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&q=80&w=800&h=600',
-    tags: [
-      { id: 't7', label: 'Brutalism', type: 'user' },
-      { id: 't8', label: 'Urban', type: 'ai' }
-    ]
-  }
-];

architectural-grid10/src/index.css

@@ -1,98 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
-@import "tailwindcss";
-
-@theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-serif: "Playfair Display", serif;
-  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
-
-  /* Foundation */
-  --color-paper: #F2F0E9;
-  --color-ink: #1C1C1C;
-  --color-muted-ink: rgba(28, 28, 28, 0.6);
-  --color-border: rgba(28, 28, 28, 0.1);
-  --color-concrete: #8D8D8D;
-
-  /* Architectural Accents */
-  --color-blueprint: #75B2D6;
-  --color-slate: #4A4E69;
-  --color-ochre: #D4A373;
-  --color-sage: #A3B18A;
-  --color-rust: #9B2226;
-  --color-glass: rgba(255, 255, 255, 0.4);
-
-  /* Dark Theme Aliases */
-  --color-dark-paper: #0D0D0D;
-  --color-dark-ink: #EAEAEA;
-  --color-dark-muted: rgba(234, 234, 234, 0.5);
-  --color-dark-border: rgba(234, 234, 234, 0.1);
-}
-
-@layer base {
-  body {
-    @apply bg-paper text-ink font-sans antialiased transition-colors duration-500;
-  }
-
-  .dark body {
-    @apply bg-dark-paper;
-  }
-
-  .dark {
-    --color-paper: #121212;
-    --color-ink: #EAEAEA;
-    --color-muted-ink: rgba(234, 234, 234, 0.6);
-    --color-border: rgba(255, 255, 255, 0.08);
-    --color-glass: rgba(0, 0, 0, 0.4);
-    --color-concrete: #555555;
-  }
-}
-
-.paper-texture {
-  background-color: var(--color-paper);
-  background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
-}
-
-/* Custom Scrollbar - Architectural Minimalist */
-.custom-scrollbar::-webkit-scrollbar {
-  width: 3px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb {
-  background: rgba(28, 28, 28, 0.08);
-  border-radius: 10px;
-}
-
-.custom-scrollbar:hover::-webkit-scrollbar-thumb {
-  background: rgba(28, 28, 28, 0.2);
-}
-
-.ai-glass {
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.5);
-}
-
-.dark .ai-glass {
-  background: rgba(30, 30, 30, 0.85);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.sidebar-shadow {
-  box-shadow: 1px 0 10px rgba(0, 0, 0, 0.05);
-}
-
-.active-nav-item {
-  background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.5);
-}
-
-.dark .active-nav-item {
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}

architectural-grid10/src/types.ts

@@ -1,34 +0,0 @@
-export type NavigationView = 'notebooks' | 'agents' | 'settings' | 'shared' | 'reminders' | 'trash';
-export type AITone = 'Professional' | 'Creative' | 'Academic' | 'Casual';
-export type AITab = 'discussion' | 'actions' | 'resources';
-export type SettingsTab = 'general' | 'ai' | 'appearance' | 'profile' | 'data' | 'mcp' | 'about';
-
-export interface Tag {
-  id: string;
-  label: string;
-  type: 'ai' | 'user';
-}
-
-export interface Note {
-  id: string;
-  carnetId: string;
-  title: string;
-  content: string;
-  imageUrl: string;
-  date: string;
-  tags: Tag[];
-  isPinned?: boolean;
-  isDeleted?: boolean;
-  deletedAt?: string;
-}
-
-export interface Carnet {
-  id: string;
-  name: string;
-  initial: string;
-  type: 'Private' | 'Project' | 'Shared';
-  isPrivate?: boolean;
-  parentId?: string;
-  isDeleted?: boolean;
-  deletedAt?: string;
-}

architectural-grid11/.env.example

@@ -1,9 +0,0 @@
-# GEMINI_API_KEY: Required for Gemini AI API calls.
-# AI Studio automatically injects this at runtime from user secrets.
-# Users configure this via the Secrets panel in the AI Studio UI.
-GEMINI_API_KEY="MY_GEMINI_API_KEY"
-
-# APP_URL: The URL where this applet is hosted.
-# AI Studio automatically injects this at runtime with the Cloud Run service URL.
-# Used for self-referential links, OAuth callbacks, and API endpoints.
-APP_URL="MY_APP_URL"

architectural-grid11/.gitignore

@@ -1,8 +0,0 @@
-node_modules/
-build/
-dist/
-coverage/
-.DS_Store
-*.log
-.env*
-!.env.example

architectural-grid11/BRAINSTORM_PROMPT.md

@@ -1,24 +0,0 @@
-# IA Agent Coordination Prompt: Brainstorm Wave Integration
-
-## Context
-You are tasked with continuing the development of the "Architectural Grid" application. The core feature "Wave Brainstorming" has been partially implemented with a full-stack architecture (Express + React).
-
-## Current State
-- **Backend (`server.ts`)**: Implements session management, idea generation via Gemini, and expansion logic. Stores data in memory.
-- **Frontend (`BrainstormView.tsx`)**: Manages the life cycle of a brainstorm. Integrates with a Radial D3 Canvas.
-- **Visuals (`WaveCanvas.tsx`)**: Implements a radial force-directed graph with state-aware styling (dismissed/converted).
-- **Navigation**: "Brainstorm Wave" is accessible from the Sidebar. A quick entry point exists from Note Detail view.
-
-## Your Task: Sidebar & Navigation Cleanup
-1. **Source Code Review**: Read `src/components/Sidebar.tsx`, `src/App.tsx`, and `server.ts` to understand how views are toggled.
-2. **Sidebar Links**: Ensure "Brainstorm Wave", "Semantic Network", and "Temporal Forecast" are correctly grouped and labeled in the Sidebar under a "Creative & AI" section.
-3. **Agent View Sidebar**: The user specifically requested these links to be also accessible from the "Sidebar of the Agent view". Review `src/components/AgentsView.tsx` and ensure it has consistent navigation or deep links to these advanced features.
-4. **Semantic Network & Temporal Forecast**: These views are currently placeholders. Ensure the routing and sidebar active state detection work correctly for them.
-
-## Technical Requirements
-- Maintain consistency with the **Tailwind** architectural design (concrete, paper, blueprint tokens).
-- Use **Lucide-React** icons (`Wind` for Brainstorm, `Share2` for Semantic Network, `Clock` for Temporal).
-- Ensure transitions between views are smooth using `motion/react`.
-
----
-*Copy and paste this into the next AI Agent session to ensure full context transfer.*

architectural-grid11/README.md

@@ -1,20 +0,0 @@
-<div align="center">
-<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
-</div>
-
-# Run and deploy your AI Studio app
-
-This contains everything you need to run your app locally.
-
-View your app in AI Studio: https://ai.studio/apps/b7b577c6-4d9f-44ac-8fe1-85bc3c6d6e66
-
-## Run Locally
-
-**Prerequisites:**  Node.js
-
-
-1. Install dependencies:
-   `npm install`
-2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
-3. Run the app:
-   `npm run dev`

architectural-grid11/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My Google AI Studio App</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
-

architectural-grid11/package.json

@@ -1,39 +0,0 @@
-{
-  "name": "react-example",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "tsx server.ts",
-    "build": "vite build && esbuild server.ts --bundle --platform=node --format=cjs --packages=external --sourcemap --outfile=dist/server.cjs",
-    "start": "node dist/server.cjs",
-    "clean": "rm -rf dist",
-    "lint": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@google/genai": "^1.29.0",
-    "@tailwindcss/vite": "^4.1.14",
-    "@types/d3": "^7.4.3",
-    "@types/uuid": "^10.0.0",
-    "@vitejs/plugin-react": "^5.0.4",
-    "d3": "^7.9.0",
-    "dotenv": "^17.2.3",
-    "esbuild": "^0.28.0",
-    "express": "^4.21.2",
-    "lucide-react": "^0.546.0",
-    "motion": "^12.23.24",
-    "react": "^19.0.1",
-    "react-dom": "^19.0.1",
-    "uuid": "^14.0.0",
-    "vite": "^6.2.3"
-  },
-  "devDependencies": {
-    "@types/express": "^4.17.21",
-    "@types/node": "^22.14.0",
-    "autoprefixer": "^10.4.21",
-    "tailwindcss": "^4.1.14",
-    "tsx": "^4.21.0",
-    "typescript": "~5.8.2",
-    "vite": "^6.2.3"
-  }
-}

architectural-grid11/server.ts

@@ -1,126 +0,0 @@
-import express from "express";
-import path from "path";
-import { createServer as createViteServer } from "vite";
-import { v4 as uuidv4 } from "uuid";
-
-interface BrainstormIdea {
-  id: string;
-  sessionId: string;
-  waveNumber: number;
-  title: string;
-  description: string;
-  connectionToSeed: string;
-  noveltyScore: number;
-  parentIdeaId?: string;
-  convertedToNoteId?: string;
-  status: 'active' | 'dismissed' | 'converted';
-  position?: { x: number; y: number };
-}
-
-interface BrainstormSession {
-  id: string;
-  seedIdea: string;
-  sourceNoteId?: string;
-  contextNoteIds?: string[];
-  createdAt: string;
-  updatedAt: string;
-}
-
-// In-memory store (Simulating Postgres for now)
-const sessions: BrainstormSession[] = [];
-const ideas: BrainstormIdea[] = [];
-
-async function startServer() {
-  const app = express();
-  const PORT = 3000;
-
-  app.use(express.json());
-
-  // API Routes
-  app.get("/api/health", (req, res) => {
-    res.json({ status: "ok" });
-  });
-
-// 1. Create session
-  app.post("/api/brainstorm/sessions", (req, res) => {
-    const { seedIdea, sourceNoteId, contextNoteIds } = req.body;
-    
-    const session: BrainstormSession = {
-      id: uuidv4(),
-      seedIdea,
-      sourceNoteId,
-      contextNoteIds,
-      createdAt: new Date().toISOString(),
-      updatedAt: new Date().toISOString()
-    };
-    sessions.unshift(session);
-    res.json(session);
-  });
-
-  // 2. Add ideas to session
-  app.post("/api/brainstorm/:sessionId/ideas", (req, res) => {
-    const { sessionId } = req.params;
-    const { ideas: newIdeasData } = req.body;
-
-    const session = sessions.find(s => s.id === sessionId);
-    if (!session) return res.status(404).json({ error: "Session not found" });
-
-    const newIdeas = newIdeasData.map((item: any) => ({
-      id: item.id || uuidv4(),
-      sessionId,
-      waveNumber: item.waveNumber,
-      title: item.title,
-      description: item.description,
-      connectionToSeed: item.connectionToSeed,
-      noveltyScore: item.noveltyScore,
-      parentIdeaId: item.parentIdeaId,
-      status: 'active'
-    }));
-
-    newIdeas.forEach((i: any) => ideas.push(i));
-    res.json(newIdeas);
-  });
-
-  // 3. Get all sessions
-  app.get("/api/brainstorm/sessions", (req, res) => {
-    res.json(sessions);
-  });
-
-  // 4. Get session with ideas
-  app.get("/api/brainstorm/:sessionId", (req, res) => {
-    const session = sessions.find(s => s.id === req.params.sessionId);
-    if (!session) return res.status(404).json({ error: "Session not found" });
-    const sessionIdeas = ideas.filter(i => i.sessionId === session.id);
-    res.json({ session, ideas: sessionIdeas });
-  });
-
-  // 5. Update idea (position, status)
-  app.patch("/api/brainstorm/ideas/:ideaId", (req, res) => {
-    const index = ideas.findIndex(i => i.id === req.params.ideaId);
-    if (index === -1) return res.status(404).json({ error: "Idea not found" });
-    
-    ideas[index] = { ...ideas[index], ...req.body };
-    res.json(ideas[index]);
-  });
-
-  // Vite middleware for development
-  if (process.env.NODE_ENV !== "production") {
-    const vite = await createViteServer({
-      server: { middlewareMode: true },
-      appType: "spa",
-    });
-    app.use(vite.middlewares);
-  } else {
-    const distPath = path.join(process.cwd(), 'dist');
-    app.use(express.static(distPath));
-    app.get('*', (req, res) => {
-      res.sendFile(path.join(distPath, 'index.html'));
-    });
-  }
-
-  app.listen(PORT, "0.0.0.0", () => {
-    console.log(`Server running on http://localhost:${PORT}`);
-  });
-}
-
-startServer();

architectural-grid11/src/App.tsx

@@ -1,603 +0,0 @@
-/**
- * @license
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React, { useState, useMemo } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-
-// Components
-import { Sidebar } from './components/Sidebar';
-import { NotebooksView } from './components/NotebooksView';
-import { AgentsView } from './components/AgentsView';
-import { SettingsView } from './components/SettingsView';
-import { TrashView } from './components/TrashView';
-import { BrainstormView } from './components/BrainstormView/BrainstormView';
-import { InsightsView } from './components/InsightsView';
-import { TemporalView } from './components/TemporalView';
-import { AISidebar } from './components/AISidebar';
-import { SlashMenu } from './components/SlashMenu';
-
-// Data & Types
-import { CARNETS, ALL_NOTES } from './constants';
-import { NavigationView, SettingsTab, AITab, AITone, Carnet, Note, BrainstormIdea, NoteAccessLog } from './types';
-
-export default function App() {
-  const [activeView, setActiveView] = useState<NavigationView>('notebooks');
-  const [activeSettingsTab, setActiveSettingsTab] = useState<SettingsTab>('general');
-  const [selectedAgentId, setSelectedAgentId] = useState<string | null>(null);
-  const [isDarkMode, setIsDarkMode] = useState(false);
-  const [carnets, setCarnets] = useState<Carnet[]>(CARNETS);
-  const [notes, setNotes] = useState<Note[]>(ALL_NOTES);
-  const [accessLogs, setAccessLogs] = useState<NoteAccessLog[]>([
-    // Note n1: 14-day cycle
-    { noteId: 'n1', accessedAt: new Date(Date.now() - 70 * 24 * 60 * 60 * 1000).toISOString(), action: 'view' },
-    { noteId: 'n1', accessedAt: new Date(Date.now() - 56 * 24 * 60 * 60 * 1000).toISOString(), action: 'view' },
-    { noteId: 'n1', accessedAt: new Date(Date.now() - 42 * 24 * 60 * 60 * 1000).toISOString(), action: 'view' },
-    { noteId: 'n1', accessedAt: new Date(Date.now() - 28 * 24 * 60 * 60 * 1000).toISOString(), action: 'view' },
-    { noteId: 'n1', accessedAt: new Date(Date.now() - 14 * 24 * 60 * 60 * 1000).toISOString(), action: 'view' },
-    { noteId: 'n1', accessedAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), action: 'view' },
-    
-    // Note n2: 7-day cycle
-    { noteId: 'n2', accessedAt: new Date(Date.now() - 35 * 24 * 60 * 60 * 1000).toISOString(), action: 'view' },
-    { noteId: 'n2', accessedAt: new Date(Date.now() - 28 * 24 * 60 * 60 * 1000).toISOString(), action: 'view' },
-    { noteId: 'n2', accessedAt: new Date(Date.now() - 21 * 24 * 60 * 60 * 1000).toISOString(), action: 'view' },
-    { noteId: 'n2', accessedAt: new Date(Date.now() - 14 * 24 * 60 * 60 * 1000).toISOString(), action: 'view' },
-    { noteId: 'n2', accessedAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(), action: 'view' },
-    { noteId: 'n2', accessedAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(), action: 'view' },
-
-    // Note n3: 3-day cycle (frequent check)
-    { noteId: 'n3', accessedAt: new Date(Date.now() - 12 * 24 * 60 * 60 * 1000).toISOString(), action: 'view' },
-    { noteId: 'n3', accessedAt: new Date(Date.now() - 9 * 24 * 60 * 60 * 1000).toISOString(), action: 'view' },
-    { noteId: 'n3', accessedAt: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000).toISOString(), action: 'view' },
-    { noteId: 'n3', accessedAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(), action: 'view' },
-    { noteId: 'n3', accessedAt: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(), action: 'view' },
-  ]);
-
-  const logNoteAccess = (noteId: string, action: 'view' | 'edit' | 'search_hit' = 'view') => {
-    const newLog: NoteAccessLog = {
-      noteId,
-      accessedAt: new Date().toISOString(),
-      action
-    };
-    setAccessLogs(prev => [...prev, newLog]);
-  };
-
-  const [activeCarnetId, setActiveCarnetId] = useState('4');
-  const [activeNoteId, setActiveNoteId] = useState<string | null>(null);
-  const [brainstormSeed, setBrainstormSeed] = useState<string | null>(null);
-
-  const handleBrainstormNote = (note: Note) => {
-    setActiveView('brainstorm');
-    // We'll use a small delay or a ref to pass this to BrainstormView if needed, 
-    // but better to just share state or use a CustomEvent
-    window.dispatchEvent(new CustomEvent('start-brainstorm', { 
-      detail: { seed: note.title, sourceNoteId: note.id } 
-    }));
-  };
-
-  React.useEffect(() => {
-    if (activeNoteId) {
-      logNoteAccess(activeNoteId);
-    }
-  }, [activeNoteId]);
-
-  React.useEffect(() => {
-    const handleSwitchView = (e: any) => {
-      if (e.detail) {
-        setActiveView(e.detail as NavigationView);
-      }
-    };
-    window.addEventListener('switch-view', handleSwitchView);
-    return () => window.removeEventListener('switch-view', handleSwitchView);
-  }, []);
-  const [selectedTagIds, setSelectedTagIds] = useState<string[]>([]);
-  const [isAISidebarOpen, setIsAISidebarOpen] = useState(false);
-  const [aiTab, setAiTab] = useState<AITab>('discussion');
-  const [selectedTone, setSelectedTone] = useState<AITone>('Professional');
-  
-  // Modal States
-  const [showNewCarnetModal, setShowNewCarnetModal] = useState<{ isOpen: boolean; parentId?: string; isRenaming?: boolean; carnetId?: string }>({ isOpen: false });
-  const [showNewNoteModal, setShowNewNoteModal] = useState(false);
-  const [slashMenu, setSlashMenu] = useState<{ isOpen: boolean; top: number; left: number } | null>(null);
-  
-  // Form States
-  const [newCarnetName, setNewCarnetName] = useState('');
-  const [newNoteTitle, setNewNoteTitle] = useState('');
-  const [newNoteContent, setNewNoteContent] = useState('');
-
-  const handleEditorKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === '/') {
-      const selection = window.getSelection();
-      if (selection && selection.rangeCount > 0) {
-        const range = selection.getRangeAt(0);
-        const rect = range.getBoundingClientRect();
-        setSlashMenu({
-          isOpen: true,
-          top: rect.bottom + window.scrollY,
-          left: rect.left + window.scrollX
-        });
-      }
-    }
-  };
-
-  const togglePin = (noteId: string) => {
-    setNotes(notes.map(n => n.id === noteId ? { ...n, isPinned: !n.isPinned } : n));
-  };
-
-  const filteredNotes = useMemo(() => {
-    let result = notes.filter(n => n.carnetId === activeCarnetId && !n.isDeleted);
-    
-    if (selectedTagIds.length > 0) {
-      result = result.filter(note => 
-        selectedTagIds.every(tagId => note.tags?.some(tag => tag.id === tagId))
-      );
-    }
-
-    return [...result].sort((a, b) => {
-      if (a.isPinned && !b.isPinned) return -1;
-      if (!a.isPinned && b.isPinned) return 1;
-      return 0;
-    });
-  }, [activeCarnetId, notes]);
-
-  const activeNote = useMemo(() => 
-    notes.find(n => n.id === activeNoteId),
-  [activeNoteId, notes]);
-
-  const activeCarnet = useMemo(() => 
-    carnets.find(c => c.id === activeCarnetId),
-  [activeCarnetId, carnets]);
-
-  const handleAddCarnet = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!newCarnetName.trim()) return;
-    
-    if (showNewCarnetModal.isRenaming && showNewCarnetModal.carnetId) {
-      setCarnets(carnets.map(c => c.id === showNewCarnetModal.carnetId ? { ...c, name: newCarnetName, initial: newCarnetName.charAt(0).toUpperCase() } : c));
-      setShowNewCarnetModal({ isOpen: false });
-      setNewCarnetName('');
-      return;
-    }
-
-    const newCarnet: Carnet = {
-      id: Date.now().toString(),
-      name: newCarnetName,
-      initial: newCarnetName.charAt(0).toUpperCase(),
-      type: 'Project',
-      parentId: showNewCarnetModal.parentId
-    };
-    
-    setCarnets([...carnets, newCarnet]);
-    setNewCarnetName('');
-    setShowNewCarnetModal({ isOpen: false });
-    setActiveCarnetId(newCarnet.id);
-  };
-
-  const handleDeleteCarnet = (id: string) => {
-    if (window.confirm('Déplacer ce carnet et ses sous-carnets vers la corbeille ?')) {
-      const idsToDelete = new Set<string>([id]);
-      
-      const addChildren = (parentId: string) => {
-        carnets.forEach(c => {
-          if (c.parentId === parentId) {
-            idsToDelete.add(c.id);
-            addChildren(c.id);
-          }
-        });
-      };
-      addChildren(id);
-      
-      const deletedAt = new Date().toISOString();
-      setCarnets(carnets.map(c => idsToDelete.has(c.id) ? { ...c, isDeleted: true, deletedAt } : c));
-      setNotes(notes.map(n => idsToDelete.has(n.carnetId) ? { ...n, isDeleted: true, deletedAt } : n));
-      
-      if (idsToDelete.has(activeCarnetId)) {
-        setActiveCarnetId('1');
-      }
-    }
-  };
-
-  const handleDeleteNote = (id: string) => {
-    const deletedAt = new Date().toISOString();
-    setNotes(notes.map(n => n.id === id ? { ...n, isDeleted: true, deletedAt } : n));
-    if (activeNoteId === id) setActiveNoteId(null);
-  };
-
-  const handleRestoreCarnet = (id: string) => {
-    setCarnets(carnets.map(c => c.id === id ? { ...c, isDeleted: false, deletedAt: undefined } : c));
-    // Optionally restore linked notes too? User might expect that.
-    setNotes(notes.map(n => n.carnetId === id ? { ...n, isDeleted: false, deletedAt: undefined } : n));
-  };
-
-  const handleRestoreNote = (id: string) => {
-    setNotes(notes.map(n => n.id === id ? { ...n, isDeleted: false, deletedAt: undefined } : n));
-  };
-
-  const handlePermanentDeleteNote = (id: string) => {
-    setNotes(notes.filter(n => n.id !== id));
-  };
-
-  const handlePermanentDeleteCarnet = (id: string) => {
-    const idsToDelete = new Set<string>([id]);
-    const addChildren = (parentId: string) => {
-      carnets.forEach(c => {
-        if (c.parentId === parentId) {
-          idsToDelete.add(c.id);
-          addChildren(c.id);
-        }
-      });
-    };
-    addChildren(id);
-    setCarnets(carnets.filter(c => !idsToDelete.has(c.id)));
-    setNotes(notes.filter(n => !idsToDelete.has(n.carnetId)));
-  };
-
-  const handleAddNote = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!newNoteTitle.trim() || !newNoteContent.trim()) return;
-
-    const newNote: Note = {
-      id: `n-${Date.now()}`,
-      carnetId: activeCarnetId,
-      title: newNoteTitle,
-      date: new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(new Date()),
-      content: newNoteContent,
-      imageUrl: 'https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&q=80&w=800&h=600',
-      tags: []
-    };
-
-    setNotes([newNote, ...notes]);
-    setNewNoteTitle('');
-    setNewNoteContent('');
-    setShowNewNoteModal(false);
-    setActiveNoteId(newNote.id);
-  };
-
-  const handleConvertIdeaToNote = (idea: BrainstormIdea) => {
-    const newNote: Note = {
-      id: `n-gen-${Date.now()}`,
-      carnetId: activeCarnetId,
-      title: idea.title,
-      date: new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(new Date()),
-      content: `${idea.description}\n\n---\n**Connection to seed:** ${idea.connectionToSeed}\n**Novelty Score:** ${idea.noveltyScore}/10`,
-      imageUrl: 'https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=800&h=600',
-      tags: [{ id: 't-ai', label: 'AI Generated', type: 'ai' }]
-    };
-
-    setNotes([newNote, ...notes]);
-    setActiveView('notebooks');
-    setActiveNoteId(newNote.id);
-  };
-
-  return (
-    <div className={`h-screen flex bg-paper transition-colors duration-500 overflow-hidden font-sans ${isDarkMode ? 'dark' : ''}`}>
-      <Sidebar 
-        activeView={activeView}
-        isDarkMode={isDarkMode}
-        setIsDarkMode={setIsDarkMode}
-        setActiveView={setActiveView}
-        carnets={carnets}
-        notes={notes}
-        activeCarnetId={activeCarnetId}
-        activeNoteId={activeNoteId}
-        setActiveCarnetId={setActiveCarnetId}
-        setActiveNoteId={setActiveNoteId}
-        setShowNewCarnetModal={(show, parentId, isRenaming, carnetId) => {
-          setShowNewCarnetModal({ isOpen: show, parentId, isRenaming, carnetId });
-          if (isRenaming && carnetId) {
-            const carnet = carnets.find(c => c.id === carnetId);
-            if (carnet) setNewCarnetName(carnet.name);
-          } else {
-            setNewCarnetName('');
-          }
-        }}
-        onDeleteCarnet={handleDeleteCarnet}
-        onMoveCarnet={(draggedId, targetId) => {
-          if (draggedId === targetId) return;
-          
-          // Basic circular check
-          const isDescendant = (parentId: string, potentialChildId: string): boolean => {
-            const childIds = carnets.filter(c => c.parentId === parentId).map(c => c.id);
-            if (childIds.includes(potentialChildId)) return true;
-            return childIds.some(id => isDescendant(id, potentialChildId));
-          };
-
-          if (targetId && isDescendant(draggedId, targetId)) {
-            console.warn("Cannot move a notebook inside its own descendant");
-            return;
-          }
-
-          setCarnets(prev => prev.map(c => c.id === draggedId ? { ...c, parentId: targetId } : c));
-        }}
-      />
-
-      <main className="flex-1 relative overflow-hidden flex bg-paper dark:bg-dark-paper transition-colors duration-500">
-        <AnimatePresence mode="wait">
-          {(activeView === 'notebooks' || activeView === 'shared' || activeView === 'reminders') && (
-            <motion.div
-              key={activeView}
-              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -20 }}
-              transition={{ duration: 0.3 }}
-              className="h-full w-full"
-            >
-              <NotebooksView 
-                activeNoteId={activeNoteId}
-                activeCarnet={activeCarnet}
-                filteredNotes={filteredNotes}
-                activeNote={activeNote}
-                setActiveNoteId={setActiveNoteId}
-                togglePin={togglePin}
-                setShowNewNoteModal={setShowNewNoteModal}
-                isAISidebarOpen={isAISidebarOpen}
-                setIsAISidebarOpen={setIsAISidebarOpen}
-                selectedTagIds={selectedTagIds}
-                setSelectedTagIds={setSelectedTagIds}
-                allNotes={notes}
-                activeCarnetId={activeCarnetId}
-                setShowNewCarnetModal={(show, parentId, isRenaming, carnetId) => setShowNewCarnetModal({ isOpen: show, parentId, isRenaming, carnetId })}
-                onDeleteNote={handleDeleteNote}
-                onBrainstormNote={handleBrainstormNote}
-              />
-            </motion.div>
-          )}
-
-          {activeView === 'trash' && (
-            <motion.div
-              key="trash"
-              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -20 }}
-              transition={{ duration: 0.3 }}
-              className="h-full w-full"
-            >
-              <TrashView 
-                deletedNotes={notes.filter(n => n.isDeleted)}
-                deletedCarnets={carnets.filter(c => c.isDeleted)}
-                onRestoreNote={handleRestoreNote}
-                onRestoreCarnet={handleRestoreCarnet}
-                onPermanentDeleteNote={handlePermanentDeleteNote}
-                onPermanentDeleteCarnet={handlePermanentDeleteCarnet}
-                onEmptyTrash={() => {
-                  setNotes(notes.filter(n => !n.isDeleted));
-                  setCarnets(carnets.filter(c => !c.isDeleted));
-                }}
-              />
-            </motion.div>
-          )}
-
-          {activeView === 'agents' && (
-            <motion.div
-              key="agents"
-              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -20 }}
-              transition={{ duration: 0.3 }}
-              className="h-full w-full"
-            >
-              <AgentsView 
-                selectedAgentId={selectedAgentId}
-                setSelectedAgentId={setSelectedAgentId}
-                carnets={carnets}
-              />
-            </motion.div>
-          )}
-
-          {activeView === 'settings' && (
-            <motion.div
-              key="settings"
-              initial={{ opacity: 0, x: 20 }}
-              animate={{ opacity: 1, x: 0 }}
-              exit={{ opacity: 0, x: -20 }}
-              transition={{ duration: 0.3 }}
-              className="h-full w-full"
-            >
-              <SettingsView 
-                activeSettingsTab={activeSettingsTab}
-                setActiveSettingsTab={setActiveSettingsTab}
-              />
-            </motion.div>
-          )}
-
-          {activeView === 'brainstorm' && (
-            <motion.div
-              key="brainstorm"
-              initial={{ opacity: 0, scale: 1.05 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0.95 }}
-              transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1] }}
-              className="h-full w-full"
-            >
-              <BrainstormView 
-                notes={notes}
-                onConvertNote={handleConvertIdeaToNote}
-              />
-            </motion.div>
-          )}
-
-          {activeView === 'insights' && (
-            <motion.div
-              key="insights"
-              initial={{ opacity: 0, scale: 1.05 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0.95 }}
-              transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1] }}
-              className="h-full w-full"
-            >
-              <InsightsView 
-                notes={notes}
-                onUpdateNotes={setNotes}
-                onNoteSelect={(noteId) => {
-                    setActiveView('notebooks');
-                    setActiveNoteId(noteId);
-                }}
-              />
-            </motion.div>
-          )}
-
-          {activeView === 'temporal' && (
-            <motion.div
-              key="temporal"
-              initial={{ opacity: 0, scale: 1.05 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0.95 }}
-              transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1] }}
-              className="h-full w-full"
-            >
-              <TemporalView 
-                notes={notes}
-                accessLogs={accessLogs}
-                onNoteSelect={(noteId) => {
-                    setActiveView('notebooks');
-                    setActiveNoteId(noteId);
-                }}
-              />
-            </motion.div>
-          )}
-        </AnimatePresence>
-
-        <AISidebar 
-          isOpen={isAISidebarOpen}
-          setIsOpen={setIsAISidebarOpen}
-          activeNote={activeNote}
-          aiTab={aiTab}
-          setAiTab={setAiTab}
-          selectedTone={selectedTone}
-          setSelectedTone={setSelectedTone}
-          carnets={carnets}
-        />
-      </main>
-
-      {/* Modals */}
-      <AnimatePresence>
-        {showNewCarnetModal.isOpen && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-            <motion.div 
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              onClick={() => setShowNewCarnetModal({ isOpen: false })}
-              className="absolute inset-0 bg-ink/40 backdrop-blur-sm"
-            />
-            <motion.div
-              initial={{ opacity: 0, scale: 0.9, y: 20 }}
-              animate={{ opacity: 1, scale: 1, y: 0 }}
-              exit={{ opacity: 0, scale: 0.9, y: 20 }}
-              className="relative w-full max-w-md bg-paper dark:bg-dark-paper border border-border shadow-2xl rounded-2xl p-8"
-            >
-              <h3 className="text-2xl font-serif font-medium text-ink dark:text-dark-ink mb-2">
-                {showNewCarnetModal.isRenaming ? 'Rename Carnet' : (showNewCarnetModal.parentId ? 'Create Sub-Carnet' : 'Create New Carnet')}
-              </h3>
-              {showNewCarnetModal.parentId && !showNewCarnetModal.isRenaming && (
-                <p className="text-[10px] text-concrete uppercase tracking-widest font-bold mb-6">
-                  Inside: {carnets.find(c => c.id === showNewCarnetModal.parentId)?.name}
-                </p>
-              )}
-              <form onSubmit={handleAddCarnet} className="space-y-6">
-                <div>
-                  <label className="block text-[11px] uppercase tracking-widest font-bold text-muted-ink mb-2">Notebook Name</label>
-                  <input 
-                    autoFocus
-                    type="text" 
-                    value={newCarnetName}
-                    onChange={(e) => setNewCarnetName(e.target.value)}
-                    placeholder="E.g., Sustainable Patterns"
-                    className="w-full bg-white dark:bg-[#2A2A2A] border border-border rounded-lg px-4 py-3 outline-none focus:border-ink transition-colors font-serif italic text-lg text-ink dark:text-dark-ink"
-                  />
-                </div>
-                <div className="flex gap-4 pt-4">
-                  <button 
-                    type="button"
-                    onClick={() => {
-                      setShowNewCarnetModal({ isOpen: false });
-                      setNewCarnetName('');
-                    }}
-                    className="flex-1 py-3 border border-border rounded-lg text-sm font-medium hover:bg-slate-50 dark:hover:bg-white/5 transition-colors text-ink dark:text-dark-ink"
-                  >
-                    Cancel
-                  </button>
-                  <button 
-                    type="submit"
-                    className="flex-1 py-3 bg-ink dark:bg-ochre text-paper rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
-                  >
-                    {showNewCarnetModal.isRenaming ? 'Rename' : 'Create Notebook'}
-                  </button>
-                </div>
-              </form>
-            </motion.div>
-          </div>
-        )}
-
-        {showNewNoteModal && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
-            <motion.div 
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              onClick={() => setShowNewNoteModal(false)}
-              className="absolute inset-0 bg-ink/40 backdrop-blur-sm"
-            />
-            <motion.div
-              initial={{ opacity: 0, scale: 0.9, y: 20 }}
-              animate={{ opacity: 1, scale: 1, y: 0 }}
-              exit={{ opacity: 0, scale: 0.9, y: 20 }}
-              className="relative w-full max-w-2xl bg-paper dark:bg-dark-paper border border-border shadow-2xl rounded-2xl p-10"
-            >
-              <AnimatePresence>
-                {slashMenu?.isOpen && (
-                  <SlashMenu 
-                    position={{ top: slashMenu.top, left: slashMenu.left }}
-                    onSelect={(type) => { console.log(type); setSlashMenu(null); }}
-                    onClose={() => setSlashMenu(null)}
-                  />
-                )}
-              </AnimatePresence>
-              <h3 className="text-3xl font-serif font-medium text-ink dark:text-dark-ink mb-8">Add Architectural Note</h3>
-              <form onSubmit={handleAddNote} className="space-y-8">
-                <div>
-                  <label className="block text-[11px] uppercase tracking-widest font-bold text-muted-ink mb-2">Concept Title</label>
-                  <input 
-                    autoFocus
-                    type="text" 
-                    value={newNoteTitle}
-                    onChange={(e) => setNewNoteTitle(e.target.value)}
-                    placeholder="Enter the title of your study..."
-                    className="w-full bg-white dark:bg-[#2A2A2A] border border-border rounded-lg px-5 py-4 outline-none focus:border-ink transition-colors font-serif text-2xl text-ink dark:text-dark-ink"
-                  />
-                </div>
-                <div>
-                  <label className="block text-[11px] uppercase tracking-widest font-bold text-muted-ink mb-2">Observations & Analysis</label>
-                  <textarea 
-                    value={newNoteContent}
-                    onChange={(e) => setNewNoteContent(e.target.value)}
-                    onKeyDown={handleEditorKeyDown}
-                    placeholder="Describe the spatial logic, materiality, and light interactions... (Type '/' for commands)"
-                    rows={6}
-                    className="w-full bg-white dark:bg-[#2A2A2A] border border-border rounded-lg px-5 py-4 outline-none focus:border-ink transition-colors font-light leading-relaxed resize-none text-ink dark:text-dark-ink"
-                  />
-                </div>
-                <div className="flex gap-4 pt-4">
-                  <button 
-                    type="button"
-                    onClick={() => setShowNewNoteModal(false)}
-                    className="flex-1 py-4 border border-border rounded-lg text-sm font-medium hover:bg-slate-50 dark:hover:bg-white/5 transition-colors text-ink dark:text-dark-ink"
-                  >
-                    Cancel
-                  </button>
-                  <button 
-                    type="submit"
-                    className="flex-1 py-4 bg-ink dark:bg-ochre text-paper rounded-lg text-sm font-medium hover:opacity-90 transition-opacity"
-                  >
-                    Save Note
-                  </button>
-                </div>
-              </form>
-            </motion.div>
-          </div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}

architectural-grid11/src/components/AISidebar.tsx

@@ -1,466 +0,0 @@
-import React from 'react';
-import { 
-  Sparkles, 
-  ChevronRight,
-  MessageSquare,
-  FileCode,
-  Globe,
-  Send,
-  Scissors,
-  Zap,
-  Languages,
-  Layout,
-  ArrowRightLeft,
-  BookOpen,
-  History,
-  Target,
-  Network,
-  Clock
-} from 'lucide-react';
-import { motion, AnimatePresence } from 'motion/react';
-import { AITab, AITone, Note, Carnet } from '../types';
-import { HierarchicalCarnetSelector } from './HierarchicalCarnetSelector';
-
-interface AISidebarProps {
-  isOpen: boolean;
-  setIsOpen: (open: boolean) => void;
-  activeNote: Note | undefined;
-  aiTab: AITab;
-  setAiTab: (tab: AITab) => void;
-  selectedTone: AITone;
-  setSelectedTone: (tone: AITone) => void;
-  carnets: Carnet[];
-}
-
-export const AISidebar: React.FC<AISidebarProps> = ({
-  isOpen,
-  setIsOpen,
-  activeNote,
-  aiTab,
-  setAiTab,
-  selectedTone,
-  setSelectedTone,
-  carnets
-}) => {
-  const [selectedContextId, setSelectedContextId] = React.useState<string | null>(null);
-
-  return (
-    <AnimatePresence>
-      {isOpen && (
-        <motion.aside
-          initial={{ x: 400, opacity: 0 }}
-          animate={{ x: 0, opacity: 1 }}
-          exit={{ x: 400, opacity: 0 }}
-          transition={{ type: 'spring', damping: 25, stiffness: 200 }}
-          className="w-[400px] border-l border-border bg-white shadow-2xl flex flex-col z-50 shrink-0 relative"
-        >
-          <div className="p-6 border-b border-border space-y-2">
-            <div className="flex items-center justify-between">
-              <h3 className="flex items-center gap-2 font-serif text-xl font-medium text-ink">
-                <Sparkles size={18} className="text-ochre" />
-                IA Assistant
-              </h3>
-              <button 
-                onClick={() => setIsOpen(false)}
-                className="p-1 hover:bg-slate-100 rounded-full transition-colors text-muted-ink"
-              >
-                <ChevronRight size={20} />
-              </button>
-            </div>
-            <p className="text-[11px] text-muted-ink uppercase tracking-wider font-medium opacity-60 truncate">
-              "{activeNote?.title}"
-            </p>
-          </div>
-
-          <div className="flex border-b border-border px-2">
-            {(['discussion', 'actions', 'explore', 'resources'] as AITab[]).map((tab) => (
-              <button
-                key={tab}
-                onClick={() => setAiTab(tab)}
-                className={`flex-1 py-3 text-[10px] uppercase tracking-[0.2em] font-bold transition-all relative
-                  ${aiTab === tab ? 'text-manganese' : 'text-muted-ink hover:text-ink/60'}`}
-              >
-                {tab}
-                {aiTab === tab && (
-                  <motion.div 
-                    layoutId="activeTab" 
-                    className="absolute bottom-0 left-0 right-0 h-0.5 bg-ochre" 
-                  />
-                )}
-              </button>
-            ))}
-          </div>
-
-          <div className="flex-1 overflow-y-auto p-6 custom-scrollbar">
-            <AnimatePresence mode="wait">
-              {aiTab === 'explore' && (
-                <motion.div
-                  key="explore"
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -10 }}
-                  className="space-y-6"
-                >
-                  <div className="flex items-center gap-2 mb-2">
-                    <div className="h-px flex-1 bg-border/40" />
-                    <h4 className="text-[10px] uppercase tracking-[0.25em] font-bold text-muted-ink whitespace-nowrap">Intelligence Modules</h4>
-                    <div className="h-px flex-1 bg-border/40" />
-                  </div>
-
-                  <div className="space-y-3">
-                    <button 
-                      onClick={() => {
-                        // These will be handled in App.tsx by observing activeView
-                        window.dispatchEvent(new CustomEvent('switch-view', { detail: 'brainstorm' }));
-                      }}
-                      className="w-full group relative p-5 rounded-2xl bg-white border border-border hover:border-ochre/30 transition-all text-left overflow-hidden"
-                    >
-                      <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
-                        <Zap size={60} className="text-ochre" />
-                      </div>
-                      <div className="relative flex items-center gap-4">
-                        <div className="p-3 bg-ochre/10 rounded-xl text-ochre group-hover:bg-ochre group-hover:text-white transition-colors">
-                          <Zap size={20} fill="currentColor" />
-                        </div>
-                        <div>
-                          <h5 className="font-bold text-ink text-sm">Brainstorm Wave</h5>
-                          <p className="text-[10px] text-muted-ink uppercase tracking-tight">Unfold dimensions of thought</p>
-                        </div>
-                      </div>
-                    </button>
-
-                    <button 
-                       onClick={() => {
-                        window.dispatchEvent(new CustomEvent('switch-view', { detail: 'insights' }));
-                      }}
-                      className="w-full group relative p-5 rounded-2xl bg-white border border-border hover:border-indigo-500/30 transition-all text-left overflow-hidden"
-                    >
-                      <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
-                        <Network size={60} className="text-indigo-500" />
-                      </div>
-                      <div className="relative flex items-center gap-4">
-                        <div className="p-3 bg-indigo-500/10 rounded-xl text-indigo-500 group-hover:bg-indigo-500 group-hover:text-white transition-colors">
-                          <Network size={20} />
-                        </div>
-                        <div>
-                          <h5 className="font-bold text-ink text-sm">Semantic Network</h5>
-                          <p className="text-[10px] text-muted-ink uppercase tracking-tight">Detect clusters and bridges</p>
-                        </div>
-                      </div>
-                    </button>
-
-                    <button 
-                       onClick={() => {
-                        window.dispatchEvent(new CustomEvent('switch-view', { detail: 'temporal' }));
-                      }}
-                      className="w-full group relative p-5 rounded-2xl bg-white border border-border hover:border-rose-500/30 transition-all text-left overflow-hidden"
-                    >
-                      <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
-                        <Clock size={60} className="text-rose-500" />
-                      </div>
-                      <div className="relative flex items-center gap-4">
-                        <div className="p-3 bg-rose-500/10 rounded-xl text-rose-500 group-hover:bg-rose-500 group-hover:text-white transition-colors">
-                          <Clock size={20} />
-                        </div>
-                        <div>
-                          <h5 className="font-bold text-ink text-sm">Temporal Forecast</h5>
-                          <p className="text-[10px] text-muted-ink uppercase tracking-tight">Predict relevance recurrence</p>
-                        </div>
-                      </div>
-                    </button>
-                  </div>
-
-                  <div className="p-6 rounded-2xl bg-slate-50 dark:bg-white/5 border border-dashed border-border mt-6">
-                    <p className="text-[10px] text-muted-ink leading-relaxed font-medium italic text-center">
-                      Ces modules utilisent les embeddings du modèle Gemini pour analyser graphiquement vos pensées.
-                    </p>
-                  </div>
-                </motion.div>
-              )}
-
-              {aiTab === 'discussion' && (
-                <motion.div
-                  key="discussion"
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -10 }}
-                  className="space-y-8"
-                >
-                  <div className="h-64 flex flex-col items-center justify-center text-center space-y-4 text-muted-ink/40">
-                    <div className="w-16 h-16 rounded-full border border-dashed border-muted-ink/20 flex items-center justify-center">
-                      <MessageSquare size={24} />
-                    </div>
-                    <p className="text-xs font-serif italic leading-relaxed px-8">Posez une question à l'Assistant pour commencer.</p>
-                  </div>
-
-                  <div className="space-y-4">
-                    <div className="space-y-3">
-                      <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">Source du Contexte</label>
-                      <div className="space-y-3">
-                        <div className="w-full p-3 bg-glass border border-border rounded-lg text-xs flex items-center justify-between cursor-default backdrop-blur-sm">
-                          <div className="flex items-center gap-2">
-                            <FileCode size={14} className="text-blueprint" />
-                            <span className="font-medium text-ink">Note Active</span>
-                          </div>
-                          <div className="text-[8px] bg-blueprint/10 text-blueprint px-1.5 py-0.5 rounded uppercase font-bold tracking-tighter italic">Auto</div>
-                        </div>
-                        
-                        <div className="flex items-center gap-2 px-2">
-                          <div className="h-px flex-1 bg-border/40" />
-                          <span className="text-[9px] font-bold text-concrete uppercase tracking-widest">+ Carnet</span>
-                          <div className="h-px flex-1 bg-border/40" />
-                        </div>
-
-                        <HierarchicalCarnetSelector 
-                          carnets={carnets}
-                          selectedId={selectedContextId}
-                          onSelect={setSelectedContextId}
-                          placeholder="Inclure un carnet..."
-                          className="w-full"
-                        />
-                      </div>
-                    </div>
-
-                    <div className="space-y-3">
-                      <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">Ton d'écriture</label>
-                      <div className="grid grid-cols-2 gap-2">
-                        {(['Professional', 'Creative', 'Academic', 'Casual'] as AITone[]).map((tone) => (
-                          <button
-                            key={tone}
-                            onClick={() => setSelectedTone(tone)}
-                            className={`p-3 rounded-xl border text-[11px] font-medium transition-all
-                              ${selectedTone === tone ? 'bg-manganese text-paper border-manganese shadow-lg shadow-manganese/10' : 'bg-glass border-border text-muted-ink hover:border-ink/20'}`}
-                          >
-                            {tone.toUpperCase().substring(0, 3)}
-                          </button>
-                        ))}
-                      </div>
-                    </div>
-                  </div>
-                </motion.div>
-              )}
-
-              {aiTab === 'actions' && (
-                <motion.div
-                  key="actions"
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -10 }}
-                  className="space-y-8"
-                >
-                  <div className="space-y-8">
-                    <div>
-                      <div className="flex items-center gap-2 mb-4">
-                        <div className="h-px flex-1 bg-border/40" />
-                        <h4 className="text-[10px] uppercase tracking-[0.25em] font-bold text-muted-ink whitespace-nowrap">Transformations</h4>
-                        <div className="h-px flex-1 bg-border/40" />
-                      </div>
-                      
-                      <div className="grid grid-cols-2 gap-2">
-                        {[
-                          { icon: <Sparkles size={14} />, label: 'Clarifier', color: 'ochre' },
-                          { icon: <Scissors size={14} />, label: 'Raccourcir', color: 'rust' },
-                          { icon: <Zap size={14} />, label: 'Améliorer', color: 'sage' },
-                          { icon: <Languages size={14} />, label: 'Traduire', color: 'slate' },
-                        ].map((action, i) => (
-                          <button 
-                            key={i} 
-                            className="flex flex-col items-center gap-3 p-4 bg-glass border border-border rounded-xl transition-all group hover:border-ink/20"
-                          >
-                            <div className={`p-2 rounded-lg bg-slate-50 dark:bg-white/10 transition-colors group-hover:bg-manganese group-hover:text-paper shadow-sm text-ink/60`}>
-                              {action.icon}
-                            </div>
-                            <span className="text-[10px] font-bold text-ink/80 uppercase tracking-widest">{action.label}</span>
-                          </button>
-                        ))}
-                        <button className="col-span-2 flex items-center justify-center gap-3 py-3 px-4 bg-glass border border-border rounded-xl text-[10px] font-bold text-ink/80 hover:bg-slate-50 dark:hover:bg-white/10 transition-colors hover:border-ink/20 uppercase tracking-widest">
-                          <FileCode size={14} className="text-muted-ink" />
-                          Convertir en Markdown
-                        </button>
-                      </div>
-                    </div>
-
-                    <div className="space-y-4">
-                      <div className="flex items-center gap-2 mb-2">
-                        <div className="h-px flex-1 bg-border/40" />
-                        <h4 className="text-[10px] uppercase tracking-[0.25em] font-bold text-muted-ink whitespace-nowrap">Generation Tools</h4>
-                        <div className="h-px flex-1 bg-border/40" />
-                      </div>
-
-                      <div className="group relative p-6 rounded-2xl bg-white border border-border hover:border-blueprint/30 transition-all duration-500 overflow-hidden">
-                        <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
-                          <Layout size={80} className="text-blueprint" />
-                        </div>
-                        
-                        <div className="relative space-y-5">
-                          <div className="flex items-center gap-3">
-                            <div className="p-2 bg-slate-50 rounded-lg text-blueprint">
-                              <Layout size={18} />
-                            </div>
-                            <div className="space-y-0.5">
-                              <h5 className="text-sm font-bold text-ink leading-none">Présentation</h5>
-                              <p className="text-[10px] text-muted-ink uppercase tracking-tight">Convertir en slides interactives</p>
-                            </div>
-                          </div>
-
-                          <div className="grid grid-cols-2 gap-3">
-                            <div className="space-y-1.5">
-                              <span className="text-[9px] uppercase tracking-[0.2em] font-bold text-muted-ink/60 px-1">Thème</span>
-                              <select className="w-full bg-glass dark:bg-black/20 border border-border rounded-lg px-2 py-2 text-xs outline-none focus:ring-1 ring-blueprint/10 transition-all cursor-pointer">
-                                <option>Architectural Mono</option>
-                                <option>Vibrant Tech</option>
-                                <option>Minimal Silk</option>
-                              </select>
-                            </div>
-                            <div className="space-y-1.5">
-                              <span className="text-[9px] uppercase tracking-[0.2em] font-bold text-muted-ink/60 px-1">Style</span>
-                              <select className="w-full bg-glass dark:bg-black/20 border border-border rounded-lg px-2 py-2 text-xs outline-none focus:ring-1 ring-blueprint/10 transition-all cursor-pointer">
-                                <option>Professional</option>
-                                <option>Creative</option>
-                                <option>Brutalist</option>
-                              </select>
-                            </div>
-                          </div>
-
-                          <button className="w-full py-3.5 bg-blueprint text-paper rounded-xl text-[11px] font-bold flex items-center justify-center gap-2 hover:opacity-90 transition-all shadow-lg shadow-blueprint/20 uppercase tracking-[0.2em]">
-                            Générer
-                            <ArrowRightLeft size={14} className="opacity-60" />
-                          </button>
-                        </div>
-                      </div>
-
-                      <div className="group relative p-6 rounded-2xl bg-white border border-border hover:border-sage/30 transition-all duration-500 overflow-hidden">
-                        <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity">
-                          <BookOpen size={80} className="text-sage" />
-                        </div>
-                        
-                        <div className="relative space-y-5">
-                          <div className="flex items-center gap-3">
-                            <div className="p-2 bg-slate-50 rounded-lg text-sage">
-                              <BookOpen size={18} />
-                            </div>
-                            <div className="space-y-0.5">
-                              <h5 className="text-sm font-bold text-ink leading-none">Diagramme</h5>
-                              <p className="text-[10px] text-muted-ink uppercase tracking-tight">Visualisation de structure</p>
-                            </div>
-                          </div>
-
-                          <div className="grid grid-cols-2 gap-3">
-                            <div className="space-y-1.5">
-                              <span className="text-[9px] uppercase tracking-[0.2em] font-bold text-muted-ink/60 px-1">Type</span>
-                              <select className="w-full bg-glass dark:bg-black/20 border border-border rounded-lg px-2 py-2 text-xs outline-none focus:ring-1 ring-sage/10 transition-all cursor-pointer">
-                                <option>Logic Flow</option>
-                                <option>Mind Map</option>
-                                <option>Hierarchy</option>
-                              </select>
-                            </div>
-                            <div className="space-y-1.5">
-                              <span className="text-[9px] uppercase tracking-[0.2em] font-bold text-muted-ink/60 px-1">Style</span>
-                              <select className="w-full bg-glass dark:bg-black/20 border border-border rounded-lg px-2 py-2 text-xs outline-none focus:ring-1 ring-sage/10 transition-all cursor-pointer">
-                                <option>Draft</option>
-                                <option>Polished</option>
-                                <option>Handwritten</option>
-                              </select>
-                            </div>
-                          </div>
-
-                          <button className="w-full py-3.5 bg-sage text-paper rounded-xl text-[11px] font-bold flex items-center justify-center gap-2 hover:opacity-90 transition-all shadow-lg shadow-sage/20 uppercase tracking-[0.2em]">
-                            Tracer
-                            <ArrowRightLeft size={14} className="opacity-60" />
-                          </button>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="flex flex-col items-center gap-2 opacity-20 py-4">
-                       <History size={16} />
-                       <span className="text-[10px] font-bold uppercase tracking-widest whitespace-nowrap">Auto-Save Enabled</span>
-                    </div>
-                  </div>
-                </motion.div>
-              )}
-
-              {aiTab === 'resources' && (
-                <motion.div
-                  key="resources"
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -10 }}
-                  className="space-y-8"
-                >
-                   <div className="space-y-6">
-                     <div className="space-y-2">
-                       <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">URL (Optionnel)</label>
-                       <div className="relative">
-                         <input type="text" placeholder="https://..." className="w-full bg-glass border border-border rounded-lg pl-3 pr-10 py-3 text-xs outline-none focus:border-blueprint transition-colors" />
-                         <Globe size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-ink/40" />
-                       </div>
-                     </div>
-
-                     <div className="space-y-2">
-                       <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">Texte de la ressource</label>
-                       <textarea 
-                         rows={8}
-                         placeholder="Collez votre texte ici (markdown, HTML, texte brut...)" 
-                         className="w-full bg-glass border border-border rounded-lg p-4 text-xs outline-none focus:border-blueprint transition-colors resize-none leading-relaxed" 
-                       />
-                     </div>
-
-                     <div className="space-y-3">
-                       <label className="text-[10px] uppercase tracking-[0.2em] font-bold text-muted-ink">Mode d'intégration</label>
-                       <div className="grid grid-cols-3 gap-2">
-                          {[
-                            { id: 'replace', label: 'Remplacer', sub: 'Direct, sans IA' },
-                            { id: 'append', label: 'Compléter', sub: 'Ajoute sans réécrire' },
-                            { id: 'merge', label: 'Fusionner', sub: 'Réécrit et intègre' },
-                          ].map((mode) => (
-                            <button key={mode.id} className={`flex flex-col items-center justify-center p-3 rounded-lg border transition-all text-center ${mode.id === 'append' ? 'bg-sage/10 border-sage/50 ring-1 ring-sage/10' : 'bg-white border-border hover:bg-slate-50'}`}>
-                              <span className={`text-[11px] font-bold ${mode.id === 'append' ? 'text-sage' : 'text-ink'}`}>{mode.label}</span>
-                              <span className="text-[8px] text-muted-ink opacity-60 leading-tight mt-1 font-medium">{mode.sub}</span>
-                            </button>
-                          ))}
-                       </div>
-                     </div>
-
-                     <button className="w-full py-4 bg-blueprint text-white rounded-xl text-sm font-bold flex items-center justify-center gap-3 hover:opacity-90 transition-opacity shadow-lg shadow-blueprint/20">
-                       <Sparkles size={18} />
-                       Générer l'aperçu
-                     </button>
-                   </div>
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </div>
-
-          <AnimatePresence>
-            {aiTab === 'discussion' && (
-              <motion.div 
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 20 }}
-                className="p-6 bg-white border-t border-border"
-              >
-                <div className="relative">
-                  <textarea 
-                    rows={3} 
-                    placeholder="Posez une question sur cette note..." 
-                    className="w-full bg-glass backdrop-blur-sm border border-border rounded-2xl p-4 pr-12 text-sm outline-none focus:border-blueprint transition-colors resize-none leading-relaxed font-light"
-                  />
-                  <div className="absolute right-3 bottom-3 flex gap-2">
-                    <button className="p-2 text-muted-ink hover:text-ink rounded-lg transition-colors">
-                      <Globe size={16} />
-                    </button>
-                    <button className="p-2 bg-blueprint text-white rounded-lg transition-transform hover:scale-105 active:scale-95 shadow-lg shadow-blueprint/10">
-                      <Send size={16} />
-                    </button>
-                  </div>
-                </div>
-                <p className="text-[9px] text-muted-ink text-center mt-3 uppercase tracking-widest font-bold opacity-30 italic">Maj+Entrée = nouvelle ligne</p>
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </motion.aside>
-      )}
-    </AnimatePresence>
-  );
-};

architectural-grid11/src/components/AgentsView.tsx

@@ -1,325 +0,0 @@
-import React from 'react';
-import { 
-  Plus, 
-  ArrowLeft, 
-  Clock, 
-  Activity, 
-  Trash2, 
-  Edit3, 
-  Play, 
-  Eye, 
-  Microscope, 
-  Globe, 
-  Layers, 
-  Zap,
-  BookOpen,
-  Sparkles,
-  ChevronDown,
-  Info,
-  Check
-} from 'lucide-react';
-import { motion, AnimatePresence } from 'motion/react';
-import { Carnet, Note } from '../types';
-import { HierarchicalCarnetSelector } from './HierarchicalCarnetSelector';
-
-interface AgentsViewProps {
-  selectedAgentId: string | null;
-  setSelectedAgentId: (id: string | null) => void;
-  carnets: Carnet[];
-}
-
-export const AgentsView: React.FC<AgentsViewProps> = ({
-  selectedAgentId,
-  setSelectedAgentId,
-  carnets
-}) => {
-  const [selectedCarnetForAgent, setSelectedCarnetForAgent] = React.useState<string | null>('4');
-  const [agentType, setAgentType] = React.useState<'Surveillant' | 'Personnalisé' | 'Slides' | 'Diagramme'>('Diagramme');
-
-  return (
-    <div className="h-full flex flex-col overflow-y-auto custom-scrollbar bg-[#F9F8F6] dark:bg-dark-paper space-y-12">
-      {!selectedAgentId ? (
-        <>
-          <header className="px-12 pt-12 pb-8 flex flex-col gap-6 sticky top-0 bg-paper/80 backdrop-blur-md z-30">
-            <div className="flex justify-between items-end">
-              <div className="space-y-1">
-                <h1 className="text-4xl font-serif font-medium tracking-tight text-ink">Mes Agents</h1>
-                <p className="text-sm text-muted-ink font-light">Automatisez vos tâches de veille et de recherche.</p>
-              </div>
-              <button className="px-6 py-2.5 bg-ink text-paper text-sm font-medium rounded-xl hover:opacity-90 transition-all flex items-center gap-3 shadow-lg shadow-ink/10">
-                <Plus size={18} />
-                Nouvel Agent
-              </button>
-            </div>
-
-            <div className="flex items-center gap-8 border-b border-ink/5 pt-4">
-              {['Tous', 'Veilleur', 'Chercheur', 'Surveillant', 'Personnalisé'].map((tag, i) => (
-                <button key={i} className={`pb-4 text-xs font-bold uppercase tracking-widest transition-all relative ${i === 0 ? 'text-ink' : 'text-muted-ink hover:text-ink/60'}`}>
-                  {tag}
-                  {i === 0 && <motion.div layoutId="activeAgentTag" className="absolute bottom-0 left-0 right-0 h-0.5 bg-ink" />}
-                </button>
-              ))}
-            </div>
-          </header>
-
-          <div className="px-12 flex-1 pb-20 space-y-12">
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-              {[
-                { id: 'a1', icon: <Eye size={20} className="text-amber-600" />, title: 'Surveillant de Notes', status: 'Réussi', type: 'SURVEILLANT', meta: 'Hebdomadaire • 6 exéc.', desc: 'Analyse les notes récentes d’un carnet et suggère des compléments, références et liens.' },
-                { id: 'a2', icon: <Microscope size={20} className="text-indigo-600" />, title: 'Chercheur de Sujet', status: 'Réussi', type: 'CHERCHEUR', meta: 'Hebdomadaire • 14 exéc.', desc: 'Recherche des informations approfondies sur les derniers modèles de Deepseek et voir l’avis des utilisateurs.' },
-                { id: 'a3', icon: <Globe size={20} className="text-emerald-600" />, title: 'Veille IA', status: 'Réussi', type: 'VEILLEUR', meta: 'Quotidien • 20 exéc.', desc: 'Scrape les flux RSS de 6 sites IA (The Verge, TechCrunch...) et génère un résumé.' },
-              ].map((agent, i) => (
-                <div 
-                  key={i} 
-                  onClick={() => setSelectedAgentId(agent.id)}
-                  className="bg-white dark:bg-white/5 border border-border rounded-2xl p-6 space-y-6 hover:border-ink/20 transition-all group cursor-pointer shadow-sm relative overflow-hidden"
-                >
-                  <div className="flex items-start justify-between">
-                     <div className="flex items-center gap-4">
-                       <div className="p-3 bg-slate-50 dark:bg-white/10 rounded-xl group-hover:bg-ink group-hover:text-paper transition-all">
-                         {agent.icon}
-                       </div>
-                       <div className="space-y-1">
-                         <h4 className="text-[13px] font-bold text-ink">{agent.title}</h4>
-                         <p className="text-[10px] font-bold uppercase tracking-widest text-muted-ink opacity-60">{agent.type}</p>
-                       </div>
-                     </div>
-                     <div className="flex items-center gap-2" onClick={(e) => e.stopPropagation()}>
-                       <label className="relative inline-flex items-center cursor-pointer">
-                          <input type="checkbox" className="sr-only peer" defaultChecked />
-                          <div className="w-8 h-4 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-3 after:w-3 after:transition-all peer-checked:bg-emerald-500"></div>
-                       </label>
-                     </div>
-                  </div>
-
-                  <p className="text-xs text-muted-ink leading-relaxed line-clamp-3">
-                    {agent.desc}
-                  </p>
-
-                  <div className="space-y-3">
-                    <div className="flex items-center justify-between text-[10px] text-muted-ink font-medium">
-                       <div className="flex items-center gap-4">
-                         <span className="flex items-center gap-1"><Clock size={10} /> {agent.meta.split('•')[0]}</span>
-                         <span>{agent.meta.split('•')[1]}</span>
-                       </div>
-                    </div>
-                    <div className="flex items-center justify-between text-[10px] text-muted-ink font-medium">
-                       <div className="flex items-center gap-2">
-                         <span className="uppercase tracking-tight">Prochaine exécution</span>
-                         <span className="text-ink">Hebdomadaire</span>
-                       </div>
-                       <div className="flex items-center gap-2">
-                         <span className="uppercase tracking-tight">Dernier statut</span>
-                         <span className="text-emerald-600 flex items-center gap-1"><Activity size={8} /> {agent.status}</span>
-                       </div>
-                    </div>
-                  </div>
-
-                  <div className="grid grid-cols-3 gap-2 border-t border-border pt-4">
-                     <button className="py-2 border border-border rounded-lg hover:bg-slate-50 dark:hover:bg-white/5 flex items-center justify-center transition-colors text-muted-ink hover:text-ink"><Edit3 size={14} /> <span className="ml-2 text-[10px] font-bold uppercase">Modifier</span></button>
-                     <button 
-                      onClick={(e) => { e.stopPropagation(); }}
-                      className="py-2 border border-border rounded-lg hover:bg-slate-50 dark:hover:bg-white/5 flex items-center justify-center transition-colors text-muted-ink hover:text-ink"
-                     >
-                      <Play size={14} className="fill-current" />
-                     </button>
-                     <button 
-                      onClick={(e) => { e.stopPropagation(); }}
-                      className="py-2 border border-border rounded-lg hover:bg-rose-50 hover:text-rose-600 hover:border-rose-100 flex items-center justify-center transition-colors text-muted-ink"
-                     >
-                      <Trash2 size={14} />
-                     </button>
-                  </div>
-                </div>
-              ))}
-            </div>
-
-            <div className="space-y-8">
-               <div className="flex items-center gap-4">
-                 <h5 className="text-[10px] font-bold uppercase tracking-[0.3em] text-muted-ink whitespace-nowrap">Modèles</h5>
-                 <div className="h-px w-full bg-border/40" />
-               </div>
-               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                {[
-                  { title: 'Veille IA', desc: 'Scrape les flux RSS de 6 sites IA et génère un résumé hebdomadaire.', icon: <Globe size={18} /> },
-                  { title: 'Veille Tech', desc: 'Crée un résumé quotidien des news Hacker News et Product Hunt.', icon: <Zap size={18} /> },
-                  { title: 'Veille Dev', desc: 'Surveille les repos GitHub pour détecter les nouvelles releases.', icon: <Layers size={18} /> },
-                ].map((model, i) => (
-                  <div key={i} className="bg-white/40 dark:bg-white/5 border border-dashed border-border rounded-2xl p-6 group cursor-pointer hover:bg-white dark:hover:bg-white/10 hover:border-ink/20 transition-all">
-                     <div className="w-8 h-8 rounded-lg bg-slate-50 dark:bg-white/10 flex items-center justify-center text-muted-ink group-hover:bg-ink group-hover:text-paper mb-4 transition-all">
-                       {model.icon}
-                     </div>
-                     <h4 className="text-[13px] font-bold text-ink mb-2">{model.title}</h4>
-                     <p className="text-xs text-muted-ink leading-relaxed mb-4">{model.desc}</p>
-                     <button className="text-[11px] font-bold uppercase tracking-widest text-ink hover:opacity-60 transition-opacity flex items-center gap-2">
-                       <Plus size={14} /> Installer
-                     </button>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </>
-      ) : (
-        <motion.div 
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="flex-1 flex flex-col"
-        >
-          <header className="px-12 py-10 border-b border-border bg-white dark:bg-paper backdrop-blur-md sticky top-0 z-30">
-            <div className="flex items-center justify-between max-w-5xl mx-auto">
-              <button 
-                onClick={() => setSelectedAgentId(null)}
-                className="flex items-center gap-3 text-xs font-bold uppercase tracking-widest text-muted-ink hover:text-ink transition-colors"
-              >
-                <ArrowLeft size={16} />
-                Retour
-              </button>
-              <div className="flex items-center gap-4">
-                <button className="px-5 py-2 text-xs font-bold uppercase tracking-widest border border-border rounded-xl hover:bg-slate-50 dark:hover:bg-white/5 transition-all">
-                  Logs
-                </button>
-                <button className="px-6 py-2 bg-ink text-paper text-xs font-bold uppercase tracking-widest rounded-xl hover:opacity-90 transition-all shadow-lg shadow-ink/10">
-                  Enregistrer
-                </button>
-              </div>
-            </div>
-          </header>
-
-          <div className="flex-1 px-12 py-16 max-w-5xl mx-auto w-full space-y-24">
-            <section className="space-y-12">
-              <div className="text-center space-y-4">
-                <p className="text-[10px] font-bold uppercase tracking-[0.4em] text-concrete">Sélectionnez le type d'agent</p>
-                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto">
-                  {[
-                    { id: 'Surveillant', icon: <Eye size={18} />, label: 'Surveillant', desc: 'Surveille un carnet et analyse les notes' },
-                    { id: 'Personnalisé', icon: <Layers size={18} />, label: 'Personnalisé', desc: 'Agent libre avec votre propre prompt' },
-                    { id: 'Slides', icon: <Layers size={18} />, label: 'Slides', desc: 'Crée une présentation PowerPoint à partir de notes' },
-                    { id: 'Diagramme', icon: <Zap size={18} />, label: 'Diagramme', desc: 'Crée un diagramme Excalidraw à partir de notes' },
-                  ].map((type) => (
-                    <button
-                      key={type.id}
-                      onClick={() => setAgentType(type.id as any)}
-                      className={`p-6 rounded-2xl border-2 transition-all flex flex-col items-center gap-3 text-center group relative
-                        ${agentType === type.id ? 'border-blueprint bg-white shadow-xl shadow-blueprint/10' : 'border-border bg-white/50 hover:bg-white'}`}
-                    >
-                      <div className={`p-3 rounded-xl transition-all ${agentType === type.id ? 'bg-blueprint text-white' : 'bg-slate-50 text-concrete group-hover:text-ink'}`}>
-                        {type.icon}
-                      </div>
-                      <div className="space-y-1">
-                        <p className="text-[13px] font-bold text-ink">{type.label}</p>
-                        <p className="text-[10px] text-muted-ink leading-tight">{type.desc}</p>
-                      </div>
-                      <div className={`absolute top-4 right-4 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-all
-                        ${agentType === type.id ? 'border-blueprint' : 'border-border opacity-20'}`}>
-                        {agentType === type.id && <div className="w-2 h-2 bg-blueprint rounded-full" />}
-                      </div>
-                    </button>
-                  ))}
-                </div>
-              </div>
-            </section>
-
-            <section className="space-y-10">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-2 text-[10px] font-bold uppercase tracking-[0.3em] text-concrete">
-                  CONFIGURATION <Info size={12} className="opacity-40" />
-                </div>
-                <button className="flex items-center gap-2 px-6 py-2 border-2 border-rose-100 bg-rose-50 rounded-xl text-rose-500 text-[11px] font-bold uppercase tracking-widest hover:bg-rose-100 transition-colors">
-                  <Trash2 size={14} /> Supprimer
-                </button>
-              </div>
-
-              <div className="bg-white dark:bg-white/5 border border-border/60 rounded-[32px] p-12 space-y-12 shadow-sm">
-                <div className="space-y-6">
-                  <div className="flex items-center gap-2">
-                    <label className="text-[11px] font-bold uppercase tracking-widest text-concrete">DESCRIPTION (OPTIONEL)</label>
-                    <Info size={12} className="text-concrete/40" />
-                  </div>
-                  <textarea 
-                    className="w-full bg-slate-50 dark:bg-black/20 border border-border/40 rounded-2xl p-6 text-sm outline-none focus:ring-4 ring-blueprint/5 focus:border-blueprint/40 transition-all font-light leading-relaxed resize-none text-ink"
-                    placeholder="Décrivez brièvement le rôle de cet agent..."
-                    defaultValue="Lit une note et génère un diagramme visuel dans le Lab Excalidraw."
-                  />
-                </div>
-
-                <div className="space-y-6">
-                  <div className="flex items-center gap-2">
-                    <label className="text-[11px] font-bold uppercase tracking-widest text-concrete">CARNET À SURVEILLER</label>
-                    <Info size={12} className="text-concrete/40" />
-                  </div>
-                  <HierarchicalCarnetSelector 
-                    carnets={carnets}
-                    selectedId={selectedCarnetForAgent}
-                    onSelect={setSelectedCarnetForAgent}
-                  />
-                </div>
-
-                <div className="space-y-6">
-                  <div className="flex items-center gap-2">
-                    <label className="text-[11px] font-bold uppercase tracking-widest text-concrete">NOTES À ANALYSER</label>
-                    <Info size={12} className="text-concrete/40" />
-                  </div>
-                  <div className="bg-slate-50 dark:bg-black/20 border border-border/40 rounded-2xl overflow-hidden divide-y divide-border/20">
-                    {[
-                      'Résumé du conteneur LXC devSandbox',
-                      'Connexion SSH sans mot de passe à devSandbox',
-                      'Gateway token (blank to generate)',
-                      'Procédure d\'accès à openclaw',
-                      'Derniers commits du repo Momento'
-                    ].map((note, i) => (
-                      <label key={i} className="flex items-center gap-4 px-6 py-4 cursor-pointer hover:bg-white/50 transition-colors group">
-                        <div className={`w-5 h-5 rounded border transition-all flex items-center justify-center
-                          ${i === 0 ? 'bg-blueprint border-blueprint text-white' : 'bg-white border-border group-hover:border-blueprint/40'}`}>
-                          {i === 0 && <Check size={12} />}
-                        </div>
-                        <input type="checkbox" className="hidden" defaultChecked={i === 0} />
-                        <span className={`text-[13px] transition-colors ${i === 0 ? 'font-medium text-ink' : 'text-muted-ink'}`}>{note}</span>
-                      </label>
-                    ))}
-                  </div>
-                  <p className="text-[10px] text-concrete/60 italic font-medium">{1} note(s) sélectionnée(s)</p>
-                </div>
-
-                <div className="space-y-8">
-                  <div className="flex items-center gap-2">
-                    <label className="text-[11px] font-bold uppercase tracking-widest text-concrete">TYPE DE DIAGRAMME</label>
-                  </div>
-                  <div className="grid grid-cols-2 md:grid-cols-2 gap-3">
-                    {[
-                      'Auto (détection métier)', 'Flowchart (processus)',
-                      'Mindmap (idées)', 'Organigramme (équipes)',
-                      'Timeline / roadmap', 'Process map (opérations)',
-                      'Architecture cloud (zones/RG)'
-                    ].map((type, i) => (
-                      <button key={i} className={`px-6 py-4 rounded-xl border text-[13px] text-left transition-all
-                        ${i === 0 ? 'border-ink bg-slate-50 font-bold text-ink ring-2 ring-ink/5' : 'border-border text-concrete hover:border-concrete/40 hover:bg-slate-50/50'}`}>
-                        {type}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-
-                <div className="space-y-8">
-                  <div className="flex items-center gap-2">
-                    <label className="text-[11px] font-bold uppercase tracking-widest text-concrete">STYLE DU DIAGRAMME EXCALIDRAW</label>
-                  </div>
-                  <div className="flex flex-wrap gap-4">
-                    {[
-                      'Coloré (Excalidraw)', 'Sketch+ (Excalidraw accentué)', 'Austère (sobre)'
-                    ].map((style, i) => (
-                      <button key={i} className={`px-6 py-4 rounded-xl border text-[13px] transition-all
-                        ${i === 1 ? 'border-ink bg-white font-bold text-ink ring-2 ring-ink/5 shadow-lg' : 'border-border text-concrete hover:bg-slate-50'}`}>
-                        {style}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </section>
-          </div>
-        </motion.div>
-      )}
-    </div>
-  );
-};

architectural-grid11/src/components/BrainstormView/BrainstormView.tsx

@@ -1,445 +0,0 @@
-
-import React, { useState, useEffect, useMemo } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { 
-  Zap, 
-  Search, 
-  ArrowRight, 
-  History, 
-  Plus, 
-  Wind,
-  PlusCircle,
-  FileText,
-  ChevronRight,
-  Maximize2
-} from 'lucide-react';
-import { WaveCanvas } from './WaveCanvas';
-import { BrainstormSession, BrainstormIdea, Note } from '../../types';
-import { generateBrainstormWave, generateExpansion, getEmbedding, cosineSimilarity } from '../../services/geminiService';
-
-interface BrainstormViewProps {
-  notes: Note[];
-  onConvertNote: (idea: BrainstormIdea) => void;
-}
-
-export const BrainstormView: React.FC<BrainstormViewProps> = ({ notes, onConvertNote }) => {
-  const [seedInput, setSeedInput] = useState('');
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [sessions, setSessions] = useState<BrainstormSession[]>([]);
-  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
-  const [ideas, setIdeas] = useState<BrainstormIdea[]>([]);
-  const [selectedIdeaId, setSelectedIdeaId] = useState<string | null>(null);
-  
-  useEffect(() => {
-    fetch('/api/brainstorm/sessions')
-      .then(res => res.json())
-      .then(data => setSessions(data))
-      .catch(err => console.error("Failed to load sessions", err));
-  }, []);
-
-  useEffect(() => {
-    if (activeSessionId) {
-      fetch(`/api/brainstorm/${activeSessionId}`)
-        .then(res => res.json())
-        .then(data => {
-          if (data.ideas) {
-            setIdeas(prev => {
-              const filtered = prev.filter(i => i.sessionId !== activeSessionId);
-              return [...filtered, ...data.ideas];
-            });
-          }
-        })
-        .catch(err => console.error("Failed to load ideas", err));
-    }
-  }, [activeSessionId]);
-
-  const activeSession = useMemo(() => 
-    sessions.find(s => s.id === activeSessionId),
-  [activeSessionId, sessions]);
-
-  const activeIdeas = useMemo(() => 
-    ideas.filter(i => i.sessionId === activeSessionId),
-  [activeSessionId, ideas]);
-
-  const selectedIdea = useMemo(() => 
-    ideas.find(i => i.id === selectedIdeaId),
-  [selectedIdeaId, ideas]);
-
-  useEffect(() => {
-    const handleRemoteStart = (e: any) => {
-      if (e.detail?.seed) {
-        handleStartBrainstorm(e.detail.seed, e.detail.sourceNoteId);
-      }
-    };
-    window.addEventListener('start-brainstorm', handleRemoteStart);
-    return () => window.removeEventListener('start-brainstorm', handleRemoteStart);
-  }, [notes]);
-
-  const handleStartBrainstorm = async (seed: string, sourceNoteId?: string) => {
-    if (!seed.trim()) return;
-    
-    setIsGenerating(true);
-    setError(null);
-    
-    try {
-      // 1. Create session on backend
-      const sessionRes = await fetch('/api/brainstorm/sessions', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ 
-          seedIdea: seed, 
-          sourceNoteId
-        })
-      });
-      const session = await sessionRes.json();
-      if (!sessionRes.ok) throw new Error(session.error || "Failed to create session");
-
-      setSessions(prev => [session, ...prev]);
-      setActiveSessionId(session.id);
-      setSeedInput('');
-
-      // 2. Generate waves in frontend concurrently
-      const contextSummaries = notes.slice(0, 5).map(n => n.title).join(', ');
-      
-      const wavePromises = [1, 2, 3].map(async (num) => {
-        try {
-          const generated = await generateBrainstormWave(seed, num, contextSummaries);
-          return generated.map(g => ({
-            ...g,
-            waveNumber: num
-          }));
-        } catch (e) {
-          console.error(`Wave ${num} failed`, e);
-          return [];
-        }
-      });
-
-      const wavesResults = await Promise.all(wavePromises);
-      const allNewIdeas = wavesResults.flat();
-
-      if (allNewIdeas.length === 0) {
-        throw new Error("No ideas were generated. Gemini might be shy today.");
-      }
-
-      // 3. Save ideas to backend
-      const ideasRes = await fetch(`/api/brainstorm/${session.id}/ideas`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ideas: allNewIdeas })
-      });
-      const savedIdeas = await ideasRes.json();
-      setIdeas(prev => [...prev, ...savedIdeas]);
-
-    } catch (err: any) {
-      console.error("Brainstorm failed:", err);
-      setError(err.message || "An unexpected error occurred while brainstorming.");
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const updateIdea = async (ideaId: string, updates: Partial<BrainstormIdea>) => {
-    try {
-      const res = await fetch(`/api/brainstorm/ideas/${ideaId}`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(updates)
-      });
-      const updated = await res.json();
-      setIdeas(prev => prev.map(i => i.id === ideaId ? updated : i));
-    } catch (err) {
-      console.error("Update failed", err);
-    }
-  };
-
-  const handleDeepenIdea = async (idea: BrainstormIdea) => {
-    setIsGenerating(true);
-    try {
-      const generated = await generateExpansion(idea.title, idea.description);
-      const newIdeasData = generated.map(g => ({
-        ...g,
-        waveNumber: Math.min(idea.waveNumber + 1, 3),
-        parentIdeaId: idea.id
-      }));
-
-      const res = await fetch(`/api/brainstorm/${idea.sessionId}/ideas`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ ideas: newIdeasData })
-      });
-      const savedIdeas = await res.json();
-      setIdeas(prev => [...prev, ...savedIdeas]);
-    } catch (err) {
-      console.error("Deepen failed", err);
-      setError("Failed to expand this idea.");
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  const handleDismissIdea = (ideaId: string) => {
-    updateIdea(ideaId, { status: 'dismissed' });
-    setSelectedIdeaId(null);
-  };
-
-  const handleConvertToNote = (idea: BrainstormIdea) => {
-    updateIdea(idea.id, { status: 'converted' });
-    onConvertNote(idea);
-  };
-
-  return (
-    <div className="h-full flex flex-col bg-[#F8F7F2] dark:bg-[#0A0A0A] overflow-hidden">
-      {/* Header / Start area */}
-      <div className="p-12 border-b border-border/20 backdrop-blur-md bg-white/20 dark:bg-dark-paper/20 z-10 relative overflow-hidden">
-        {/* Architectural Grid Background */}
-        <div className="absolute inset-0 pointer-events-none opacity-[0.03] dark:opacity-[0.05]" 
-             style={{ backgroundImage: 'linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px)', backgroundSize: '40px 40px' }} />
-        
-        <div className="max-w-4xl mx-auto relative">
-          <div className="flex items-center gap-5 mb-8">
-            <motion.div 
-              animate={{ rotate: isGenerating ? 360 : 0 }}
-              transition={{ repeat: isGenerating ? Infinity : 0, duration: 20, ease: "linear" }}
-              className="w-14 h-14 rounded-2xl bg-ochre shadow-[0_0_20px_rgba(212,163,115,0.2)] flex items-center justify-center text-paper"
-            >
-              <Wind size={28} />
-            </motion.div>
-            <div>
-              <h1 className="text-4xl font-serif font-medium text-ink dark:text-dark-ink tracking-tight">Waves of Thought</h1>
-              <div className="flex items-center gap-2 mt-1">
-                <span className="w-8 h-px bg-ochre/40" />
-                <p className="text-[10px] text-concrete tracking-[0.3em] uppercase font-bold">Unfold dimensions of potentiality</p>
-              </div>
-            </div>
-          </div>
-
-          <div className="relative group">
-            <div className="absolute -inset-1 bg-gradient-to-r from-ochre/20 to-blueprint/20 rounded-[28px] blur-xl opacity-0 group-focus-within:opacity-100 transition-opacity duration-700" />
-            <input 
-              type="text"
-              value={seedInput}
-              onChange={(e) => setSeedInput(e.target.value)}
-              onKeyDown={(e) => e.key === 'Enter' && handleStartBrainstorm(seedInput)}
-              placeholder="Enter a concept to unfold..."
-              className={`w-full relative bg-white dark:bg-[#1A1A1A] border-2 rounded-2xl px-8 py-7 pr-20 outline-none transition-all text-2xl font-serif italic text-ink dark:text-dark-ink shadow-sm group-hover:shadow-md
-                ${error ? 'border-rose-400 focus:ring-rose-100 shadow-rose-100' : 'border-border/40 focus:border-ochre/40 focus:ring-4 focus:ring-ochre/5'}`}
-            />
-            <button 
-              onClick={() => handleStartBrainstorm(seedInput)}
-              disabled={isGenerating || !seedInput.trim()}
-              className="absolute right-4 top-4 bottom-4 px-6 bg-ink dark:bg-ochre text-paper rounded-xl disabled:opacity-50 transition-all hover:scale-[1.02] active:scale-[0.98] flex items-center justify-center gap-2 min-w-[70px] shadow-lg"
-            >
-              {isGenerating ? (
-                <div className="w-6 h-6 border-3 border-paper/30 border-t-paper rounded-full animate-spin" />
-              ) : (
-                <Plus size={24} />
-              )}
-            </button>
-          </div>
-
-          <AnimatePresence>
-            {error && (
-              <motion.div 
-                initial={{ opacity: 0, y: -10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -10 }}
-                className="mt-6 p-5 bg-rose-50 dark:bg-rose-500/10 border border-rose-200 dark:border-rose-500/20 rounded-2xl flex items-start gap-4 text-rose-600 dark:text-rose-400 text-sm overflow-hidden shadow-sm"
-              >
-                <div className="w-5 h-5 rounded-full bg-rose-100 dark:bg-rose-500/20 flex items-center justify-center shrink-0 mt-0.5">
-                   <div className="w-2 h-2 rounded-full bg-rose-500" />
-                </div>
-                <div className="flex-1">
-                  <p className="font-bold uppercase tracking-wider text-[10px] mb-1">Obstruction detected</p>
-                  <span>{error}</span>
-                </div>
-              </motion.div>
-            )}
-            
-            {isGenerating && !error && (
-              <motion.div
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                className="mt-6 flex items-center gap-4 text-ochre/80 italic font-serif"
-              >
-                <div className="flex gap-1.5">
-                  {[0.2, 0.4, 0.6].map((d, i) => (
-                    <motion.div 
-                      key={i}
-                      animate={{ scale: [1, 1.5, 1], opacity: [0.3, 1, 0.3] }}
-                      transition={{ duration: 1.5, repeat: Infinity, delay: d }}
-                      className="w-1.5 h-1.5 rounded-full bg-ochre" 
-                    />
-                  ))}
-                </div>
-                <span className="text-base tracking-tight">Gemini is harvesting seeds of thought from the digital ether...</span>
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      </div>
-
-      <div className="flex-1 flex overflow-hidden relative">
-        {/* Main Canvas Area */}
-        <div className="flex-1 relative bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] dark:bg-[radial-gradient(#ffffff10_1px,transparent_1px)] [background-size:20px_20px]">
-          {activeSession ? (
-            <WaveCanvas 
-              session={activeSession}
-              ideas={activeIdeas}
-              onNodeSelect={setSelectedIdeaId}
-              onPositionUpdate={(id, pos) => updateIdea(id, { position: pos })}
-              selectedNodeId={selectedIdeaId}
-              relatedNotes={notes}
-            />
-          ) : (
-            <div className="absolute inset-0 flex items-center justify-center pointer-events-none opacity-20 flex-col gap-6">
-               <Wind size={120} strokeWidth={1} className="text-concrete animate-pulse" />
-               <p className="text-xl font-serif italic text-concrete">The canvas is waiting for your spark...</p>
-            </div>
-          )}
-
-          {/* Floating UI overlays */}
-          <AnimatePresence>
-            {activeSession && (
-              <motion.div 
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                className="absolute bottom-6 left-6 flex gap-2"
-              >
-                <div className="px-4 py-2 bg-paper/80 dark:bg-black/60 backdrop-blur-xl border border-border shadow-xl rounded-full flex items-center gap-6">
-                  <div className="flex items-center gap-2">
-                    <div className="w-2 h-2 rounded-full bg-orange-400 shadow-[0_0_8px_rgba(251,146,60,0.6)]" />
-                    <span className="text-[10px] font-bold uppercase tracking-widest text-concrete">Wave 1</span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <div className="w-2 h-2 rounded-full bg-blue-400 shadow-[0_0_8px_rgba(96,165,250,0.6)]" />
-                    <span className="text-[10px] font-bold uppercase tracking-widest text-concrete">Wave 2</span>
-                  </div>
-                  <div className="flex items-center gap-2">
-                    <div className="w-2 h-2 rounded-full bg-violet-400 shadow-[0_0_8px_rgba(167,139,250,0.6)]" />
-                    <span className="text-[10px] font-bold uppercase tracking-widest text-concrete">Wave 3</span>
-                  </div>
-                </div>
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-
-        {/* Right Sidebar Detail Panel */}
-        <AnimatePresence>
-          {selectedIdea && (
-            <motion.div
-              initial={{ x: '100%' }}
-              animate={{ x: 0 }}
-              exit={{ x: '100%' }}
-              className="w-[400px] border-l border-border bg-paper dark:bg-dark-paper flex flex-col z-20 shadow-[-20px_0_40px_rgba(0,0,0,0.05)]"
-            >
-              <div className="p-8 flex-1 overflow-y-auto custom-scrollbar">
-                <div className="flex items-center justify-between mb-8">
-                   <div className={`px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest border
-                     ${selectedIdea.waveNumber === 1 ? 'border-orange-200 bg-orange-50 text-orange-600' : 
-                       selectedIdea.waveNumber === 2 ? 'border-blue-200 bg-blue-50 text-blue-600' : 
-                       'border-violet-200 bg-violet-50 text-violet-600'}`}>
-                     Vague {selectedIdea.waveNumber}
-                   </div>
-                   <div className="flex items-center gap-2">
-                      {selectedIdea.status === 'converted' && (
-                        <span className="text-[10px] font-bold text-emerald-500 uppercase tracking-widest bg-emerald-500/10 px-2 py-1 rounded-full">Note Created</span>
-                      )}
-                      <button onClick={() => setSelectedIdeaId(null)} className="p-2 hover:bg-ink/5 rounded-full transition-colors">
-                        <ChevronRight size={20} />
-                      </button>
-                   </div>
-                </div>
-
-                <h2 className="text-3xl font-serif font-medium text-ink dark:text-dark-ink mb-2">{selectedIdea.title}</h2>
-                <div className="flex items-center gap-4 mb-8">
-                   <div className="flex items-center gap-1">
-                     <Zap size={14} className="text-ochre" />
-                     <span className="text-xs font-bold text-concrete">Novelty: {selectedIdea.noveltyScore}/10</span>
-                   </div>
-                </div>
-
-                <p className="text-ink/80 dark:text-dark-ink/80 leading-relaxed font-light mb-10 text-lg">
-                  {selectedIdea.description}
-                </p>
-
-                <div className="p-6 bg-slate-50 dark:bg-white/5 rounded-2xl border border-border/40 mb-10">
-                   <h4 className="text-[10px] font-bold uppercase tracking-widest text-concrete mb-3">Origin connection</h4>
-                   <p className="text-sm italic text-muted-ink leading-relaxed">
-                     "{selectedIdea.connectionToSeed}"
-                   </p>
-                </div>
-
-                {selectedIdea.relatedNoteIds && selectedIdea.relatedNoteIds.length > 0 && (
-                  <div className="space-y-4 mb-10">
-                    <h4 className="text-[10px] font-bold uppercase tracking-widest text-concrete px-1">Semantic Context</h4>
-                    {selectedIdea.relatedNoteIds.map(noteId => {
-                      const note = notes.find(n => n.id === noteId);
-                      return note ? (
-                        <div key={noteId} className="p-4 rounded-xl border border-border bg-white dark:bg-white/5 hover:border-ink/20 transition-all cursor-pointer group">
-                           <div className="flex items-center justify-between">
-                             <h5 className="text-sm font-medium text-ink dark:text-dark-ink truncate">{note.title}</h5>
-                             <ArrowRight size={14} className="text-concrete group-hover:text-ink transition-colors" />
-                           </div>
-                        </div>
-                      ) : null;
-                    })}
-                  </div>
-                )}
-
-                <div className="grid grid-cols-1 gap-4">
-                  <div className="grid grid-cols-2 gap-4">
-                    <button 
-                      onClick={() => handleDeepenIdea(selectedIdea)}
-                      disabled={isGenerating}
-                      className="flex flex-col items-center justify-center p-6 border-2 border-dashed border-border rounded-2xl hover:border-ochre/40 hover:bg-ochre/5 transition-all group disabled:opacity-50"
-                    >
-                      <Wind size={24} className="text-concrete group-hover:text-ochre mb-2" />
-                      <span className="text-[11px] font-bold uppercase tracking-widest text-muted-ink group-hover:text-ink">Deepen</span>
-                    </button>
-                    <button 
-                      onClick={() => handleConvertToNote(selectedIdea)}
-                      disabled={selectedIdea.status === 'converted'}
-                      className="flex flex-col items-center justify-center p-6 border-2 border-dashed border-border rounded-2xl hover:border-blueprint/40 hover:bg-blueprint/5 transition-all group disabled:opacity-50"
-                    >
-                      <FileText size={24} className="text-concrete group-hover:text-blueprint mb-2" />
-                      <span className="text-[11px] font-bold uppercase tracking-widest text-muted-ink group-hover:text-ink">Extract</span>
-                    </button>
-                  </div>
-                  
-                  <button 
-                    onClick={() => handleDismissIdea(selectedIdea.id)}
-                    className="w-full py-4 text-[10px] font-bold uppercase tracking-[0.2em] text-concrete hover:text-rose-500 hover:bg-rose-500/5 rounded-xl transition-all border border-transparent hover:border-rose-500/10"
-                  >
-                    Not pertinent
-                  </button>
-                </div>
-              </div>
-            </motion.div>
-          )}
-        </AnimatePresence>
-
-        {/* History Rail */}
-        <div className="w-16 border-l border-border flex flex-col items-center py-6 gap-6 bg-paper dark:bg-dark-paper z-10">
-           <History size={18} className="text-concrete" />
-           <div className="w-px flex-1 bg-border/40" />
-           <div className="flex flex-col gap-3 overflow-y-auto px-2 custom-scrollbar">
-            {sessions.map(session => (
-              <button
-                key={session.id}
-                onClick={() => setActiveSessionId(session.id)}
-                className={`w-10 h-10 min-h-[40px] rounded-xl flex items-center justify-center text-xs font-bold transition-all shrink-0
-                  ${activeSessionId === session.id ? 'bg-ink text-paper scale-110 shadow-lg' : 'bg-paper dark:bg-white/10 text-concrete hover:bg-black/5 hover:text-ink'}`}
-                title={session.seedIdea}
-              >
-                {session.seedIdea.charAt(0).toUpperCase()}
-              </button>
-            ))}
-           </div>
-           <div className="w-px h-12 bg-border/40" />
-        </div>
-      </div>
-    </div>
-  );
-};

architectural-grid11/src/components/BrainstormView/WaveCanvas.tsx

@@ -1,250 +0,0 @@
-
-import React, { useEffect, useRef } from 'react';
-import * as d3 from 'd3';
-import { BrainstormSession, BrainstormIdea, Note } from '../../types';
-
-interface WaveCanvasProps {
-  session: BrainstormSession;
-  ideas: BrainstormIdea[];
-  onNodeSelect: (id: string) => void;
-  onPositionUpdate: (id: string, pos: { x: number; y: number }) => void;
-  selectedNodeId: string | null;
-  relatedNotes: Note[];
-}
-
-export const WaveCanvas: React.FC<WaveCanvasProps> = ({ 
-  session, 
-  ideas, 
-  onNodeSelect, 
-  onPositionUpdate,
-  selectedNodeId,
-  relatedNotes 
-}) => {
-  const svgRef = useRef<SVGSVGElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!svgRef.current || !containerRef.current) return;
-
-    const width = containerRef.current.clientWidth;
-    const height = containerRef.current.clientHeight;
-    const centerX = width / 2;
-    const centerY = height / 2;
-
-    const svg = d3.select(svgRef.current);
-    svg.selectAll("*").remove();
-
-    const g = svg.append("g");
-
-    // Zoom behavior
-    const zoom = d3.zoom<SVGSVGElement, unknown>()
-      .scaleExtent([0.1, 5])
-      .on("zoom", (event) => {
-        g.attr("transform", event.transform);
-      });
-
-    svg.call(zoom);
-
-    // Initial transform to center
-    svg.call(zoom.transform, d3.zoomIdentity.translate(centerX, centerY).scale(0.8));
-
-    // Data structures for d3
-    interface D3Node extends d3.SimulationNodeDatum {
-      id: string;
-      type: 'root' | 'idea' | 'note';
-      wave?: number;
-      title: string;
-      color: string;
-      radius: number;
-      status?: string;
-    }
-
-    interface D3Link extends d3.SimulationLinkDatum<D3Node> {
-      source: string | D3Node;
-      target: string | D3Node;
-      type: 'wave' | 'context' | 'parent';
-    }
-
-    const nodes: D3Node[] = [];
-    const links: D3Link[] = [];
-
-    // Root node
-    const rootNode: D3Node = {
-      id: 'root',
-      type: 'root',
-      title: session.seedIdea,
-      color: '#141414',
-      radius: 40,
-      fx: 0,
-      fy: 0
-    };
-    nodes.push(rootNode);
-
-    // Idea nodes
-    const colors = {
-      1: '#fb923c', // orange
-      2: '#60a5fa', // blue
-      3: '#a78bfa'  // violet
-    };
-
-    ideas.forEach(idea => {
-      nodes.push({
-        id: idea.id,
-        type: 'idea',
-        wave: idea.waveNumber,
-        title: idea.title,
-        color: colors[idea.waveNumber as 1|2|3] || '#94a3b8',
-        radius: 28,
-        status: idea.status,
-        x: idea.position?.x,
-        y: idea.position?.y
-      });
-
-      if (idea.parentIdeaId) {
-        links.push({
-          source: idea.parentIdeaId,
-          target: idea.id,
-          type: 'parent'
-        });
-      } else {
-        links.push({
-          source: 'root',
-          target: idea.id,
-          type: 'wave'
-        });
-      }
-    });
-
-    // Radial layout forces
-    const simulation = d3.forceSimulation<D3Node>(nodes)
-      .force("link", d3.forceLink<D3Node, D3Link>(links).id(d => d.id).distance(d => {
-          if (d.type === 'wave') {
-              const targetNode = nodes.find(n => n.id === (typeof d.target === 'string' ? d.target : (d.target as any).id));
-              return (targetNode?.wave || 1) * 200;
-          }
-          if (d.type === 'parent') return 180;
-          return 100;
-      }))
-      .force("charge", d3.forceManyBody().strength(-800))
-      .force("radial", d3.forceRadial<D3Node>(d => {
-          if (d.type === 'root') return 0;
-          if (d.id.includes('-')) return (d.wave || 1) * 200 + 100; // Deepened ideas push out
-          return (d.wave || 1) * 200;
-      }, 0, 0).strength(0.8))
-      .force("collision", d3.forceCollide<D3Node>().radius(d => d.radius + 30));
-
-    // Drawing rings
-    const ringRadii = [200, 400, 600];
-    g.selectAll(".ring")
-      .data(ringRadii)
-      .enter()
-      .append("circle")
-      .attr("class", "ring")
-      .attr("r", d => d)
-      .attr("fill", "none")
-      .attr("stroke", "#e2e8f0")
-      .attr("stroke-width", 1)
-      .attr("stroke-dasharray", "4,4")
-      .style("opacity", 0.5);
-
-    // Links
-    const link = g.append("g")
-      .selectAll("line")
-      .data(links)
-      .enter()
-      .append("line")
-      .attr("stroke", d => d.type === 'wave' ? "#cbd5e1" : d.type === 'parent' ? "#fde047" : "#94a3b8")
-      .attr("stroke-width", d => d.type === 'wave' ? 1.5 : 2)
-      .attr("stroke-dasharray", d => d.type === 'parent' ? "none" : "4,4");
-
-    // Nodes
-    const node = g.append("g")
-      .selectAll(".node")
-      .data(nodes)
-      .enter()
-      .append("g")
-      .attr("class", "node")
-      .style("opacity", d => d.status === 'dismissed' ? 0.4 : 1)
-      .on("click", (event, d) => {
-        if (d.type === 'idea') onNodeSelect(d.id);
-      })
-      .call(d3.drag<SVGGElement, D3Node>()
-        .on("start", dragstarted)
-        .on("drag", dragged)
-        .on("end", dragended) as any);
-
-    node.append("circle")
-      .attr("r", d => d.radius)
-      .attr("fill", d => d.status === 'converted' ? '#ecfdf5' : (d.type === 'root' ? '#141414' : '#fff'))
-      .attr("stroke", d => d.status === 'converted' ? '#10b981' : d.color)
-      .attr("stroke-width", d => d.id === selectedNodeId ? 4 : 2)
-      .attr("class", "cursor-pointer transition-all hover:scale-110")
-      .style("filter", d => d.id === selectedNodeId ? `drop-shadow(0 0 12px ${d.color}cc)` : "none");
-
-    // State indicators (converted)
-    node.filter(d => d.status === 'converted')
-      .append("path")
-      .attr("d", d3.symbol().type(d3.symbolCircle).size(150))
-      .attr("fill", "#10b981");
-
-    // Icons/Text in nodes
-    node.append("text")
-      .attr("dy", d => d.type === 'root' ? ".35em" : d.radius + 20)
-      .attr("text-anchor", "middle")
-      .attr("fill", d => d.type === 'root' ? "#fff" : (d.status === 'dismissed' ? "#94a3b8" : "#141414"))
-      .attr("class", d => d.type === 'root' ? "text-[10px] font-bold pointer-events-none tracking-widest" : "text-[11px] font-bold uppercase tracking-tight pointer-events-none")
-      .text(d => d.type === 'root' ? "SEED" : d.title.length > 18 ? d.title.substring(0, 18) + "..." : d.title);
-
-    if (rootNode) {
-       g.append("text")
-         .attr("text-anchor", "middle")
-         .attr("dy", 80)
-         .attr("class", "text-2xl font-serif italic fill-ink dark:fill-dark-ink pointer-events-none shadow-sm")
-         .text(session.seedIdea);
-    }
-
-    simulation.on("tick", () => {
-      link
-        .attr("x1", d => (d.source as any).x)
-        .attr("y1", d => (d.source as any).y)
-        .attr("x2", d => (d.target as any).x)
-        .attr("y2", d => (d.target as any).y);
-
-      node
-        .attr("transform", d => `translate(${d.x},${d.y})`);
-    });
-
-    function dragstarted(event: any, d: D3Node) {
-      if (!event.active) simulation.alphaTarget(0.3).restart();
-      d.fx = d.x;
-      d.fy = d.y;
-    }
-
-    function dragged(event: any, d: D3Node) {
-      d.fx = event.x;
-      d.fy = event.y;
-    }
-
-    function dragended(event: any, d: D3Node) {
-      if (!event.active) simulation.alphaTarget(0);
-      d.fx = null;
-      d.fy = null;
-      if (d.type === 'idea') {
-        onPositionUpdate(d.id, { x: event.x, y: event.y });
-      }
-    }
-
-    return () => {
-      simulation.stop();
-    };
-  }, [session, ideas, selectedNodeId, onNodeSelect]);
-
-  return (
-    <div ref={containerRef} className="w-full h-full relative cursor-grab active:cursor-grabbing">
-      <svg ref={svgRef} className="w-full h-full" />
-      <div className="absolute top-6 left-6 pointer-events-none">
-         <p className="text-[10px] font-bold tracking-[0.3em] uppercase text-concrete opacity-40">Spatial Exploration Mode</p>
-      </div>
-    </div>
-  );
-};

architectural-grid11/src/components/HierarchicalCarnetSelector.tsx

@@ -1,208 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { 
-  ChevronRight, 
-  ChevronDown, 
-  Folder, 
-  FolderOpen, 
-  Check, 
-  Search
-} from 'lucide-react';
-import { Carnet } from '../types';
-import { motion, AnimatePresence } from 'motion/react';
-
-interface HierarchicalCarnetSelectorProps {
-  carnets: Carnet[];
-  selectedId: string | null;
-  onSelect: (id: string) => void;
-  className?: string;
-  placeholder?: string;
-}
-
-export const HierarchicalCarnetSelector: React.FC<HierarchicalCarnetSelectorProps> = ({
-  carnets,
-  selectedId,
-  onSelect,
-  className = "",
-  placeholder = "Sélectionner un carnet..."
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set(['1', '4'])); // Default expand some
-
-  const selectedCarnet = carnets.find(c => c.id === selectedId);
-
-  // Derive the path for display
-  const path = useMemo(() => {
-    if (!selectedCarnet) return [];
-    const trail: Carnet[] = [];
-    let current = selectedCarnet;
-    while (current) {
-      trail.unshift(current);
-      if (!current.parentId) break;
-      const parent = carnets.find(c => c.id === current.parentId);
-      if (!parent) break;
-      current = parent;
-    }
-    return trail;
-  }, [selectedCarnet, carnets]);
-
-  const toggleExpand = (e: React.MouseEvent, id: string) => {
-    e.stopPropagation();
-    const newExpanded = new Set(expandedIds);
-    if (newExpanded.has(id)) {
-      newExpanded.delete(id);
-    } else {
-      newExpanded.add(id);
-    }
-    setExpandedIds(newExpanded);
-  };
-
-  const filteredCarnets = useMemo(() => {
-    if (!searchQuery) return carnets;
-    return carnets.filter(c => c.name.toLowerCase().includes(searchQuery.toLowerCase()));
-  }, [carnets, searchQuery]);
-
-  const renderTree = (parentId?: string, level = 0) => {
-    const children = carnets.filter(c => c.parentId === parentId);
-    if (children.length === 0) return null;
-
-    return (
-      <div className={level > 0 ? "ml-4 border-l border-border/40 pl-2" : ""}>
-        {children.map(carnet => {
-          const isExpanded = expandedIds.has(carnet.id) || searchQuery.length > 0;
-          const hasChildren = carnets.some(c => c.parentId === carnet.id);
-          const isSelected = selectedId === carnet.id;
-
-          // If searching and this carnet doesn't match AND none of its children match, skip it
-          if (searchQuery && !carnet.name.toLowerCase().includes(searchQuery.toLowerCase())) {
-            const hasMatchingChild = (id: string): boolean => {
-              const childrenOfId = carnets.filter(c => c.parentId === id);
-              return childrenOfId.some(c => c.name.toLowerCase().includes(searchQuery.toLowerCase()) || hasMatchingChild(c.id));
-            };
-            if (!hasMatchingChild(carnet.id)) return null;
-          }
-
-          return (
-            <div key={carnet.id} className="select-none">
-              <div 
-                onClick={() => {
-                  onSelect(carnet.id);
-                  if (!searchQuery) setIsOpen(false);
-                }}
-                className={`flex items-center gap-2.5 px-2 py-1.5 rounded-lg cursor-pointer transition-all group
-                  ${isSelected ? 'bg-blueprint/10 text-blueprint font-bold' : 'hover:bg-slate-50 dark:hover:bg-white/5 text-ink'}`}
-              >
-                <div className="w-4 flex items-center justify-center">
-                  {hasChildren ? (
-                    <button 
-                      onClick={(e) => toggleExpand(e, carnet.id)}
-                      className="p-1 hover:bg-black/5 dark:hover:bg-white/5 rounded transition-colors"
-                    >
-                      {isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
-                    </button>
-                  ) : null}
-                </div>
-                
-                <div className={`p-1 rounded ${isSelected ? 'bg-blueprint/20' : 'bg-slate-100 dark:bg-white/5 group-hover:bg-white/40'}`}>
-                  {isExpanded && hasChildren ? <FolderOpen size={13} /> : <Folder size={13} />}
-                </div>
-                
-                <span className="text-[13px] truncate flex-1">{carnet.name}</span>
-                
-                {isSelected && <Check size={14} className="opacity-60" />}
-              </div>
-              
-              <AnimatePresence>
-                {isExpanded && (
-                  <motion.div
-                    initial={{ height: 0, opacity: 0 }}
-                    animate={{ height: "auto", opacity: 1 }}
-                    exit={{ height: 0, opacity: 0 }}
-                    className="overflow-hidden"
-                  >
-                    {renderTree(carnet.id, level + 1)}
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
-
-  return (
-    <div className={`relative ${className}`}>
-      <div 
-        onClick={() => setIsOpen(!isOpen)}
-        className="w-full bg-slate-50 dark:bg-black/20 border border-border/80 rounded-xl px-4 py-4 text-sm outline-none focus:ring-4 ring-blueprint/5 focus:border-blueprint/40 transition-all cursor-pointer text-ink flex items-center gap-3"
-      >
-        <Folder size={16} className="text-blueprint/60 shrink-0" />
-        <div className="flex-1 flex items-center gap-1 min-w-0">
-          {path.length > 0 ? (
-            <div className="flex items-center gap-1.5 truncate">
-              {path.map((item, i) => (
-                <React.Fragment key={item.id}>
-                  {i > 0 && <span className="text-concrete/40 text-[10px]">/</span>}
-                  <span className={`truncate ${i === path.length - 1 ? 'font-bold' : 'text-concrete'}`}>
-                    {item.name}
-                  </span>
-                </React.Fragment>
-              ))}
-            </div>
-          ) : (
-            <span className="text-concrete italic">{placeholder}</span>
-          )}
-        </div>
-        <ChevronDown size={14} className={`transition-transform duration-300 text-concrete shrink-0 ${isOpen ? 'rotate-180' : ''}`} />
-      </div>
-
-      <AnimatePresence>
-        {isOpen && (
-          <>
-            <div 
-              className="fixed inset-0 z-[60]" 
-              onClick={() => setIsOpen(false)} 
-            />
-            <motion.div 
-              initial={{ opacity: 0, y: 10, scale: 0.98 }}
-              animate={{ opacity: 1, y: 0, scale: 1 }}
-              exit={{ opacity: 0, y: 10, scale: 0.98 }}
-              className="absolute z-[70] mt-2 w-full bg-white dark:bg-dark-paper border border-border shadow-2xl rounded-2xl overflow-hidden flex flex-col min-w-[280px]"
-            >
-              <div className="p-3 border-b border-border/40 bg-slate-50/50">
-                <div className="relative">
-                  <Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-concrete" />
-                  <input 
-                    autoFocus
-                    type="text"
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    placeholder="Filtrer les carnets..."
-                    className="w-full bg-white border border-border rounded-lg pl-9 pr-4 py-2 text-xs outline-none focus:border-blueprint transition-colors"
-                  />
-                </div>
-              </div>
-
-              <div className="max-h-72 overflow-y-auto custom-scrollbar p-2">
-                {renderTree(undefined)}
-              </div>
-              
-              <div className="p-2 border-t border-border/40 bg-slate-50/30 flex justify-between items-center px-4">
-                <span className="text-[9px] font-bold text-concrete uppercase tracking-widest">
-                  Structure des carnets
-                </span>
-                <button 
-                  onClick={() => setIsOpen(false)}
-                  className="text-[10px] font-bold text-blueprint hover:underline"
-                >
-                  Fermer
-                </button>
-              </div>
-            </motion.div>
-          </>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};

architectural-grid11/src/components/InsightsView.tsx

@@ -1,248 +0,0 @@
-
-import React, { useState, useEffect, useMemo } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { 
-  Network, 
-  Lightbulb, 
-  Layers, 
-  Sparkles, 
-  ArrowRight, 
-  RefreshCw,
-  Trophy,
-  Zap,
-  Tag,
-  Link as LinkIcon
-} from 'lucide-react';
-import { Note, NoteCluster, BridgeNote, ConnectionSuggestion } from '../types';
-import { runClustering, detectBridges, calculateCentroid } from '../services/clusteringService';
-import { nameCluster, suggestBridgeIdeas } from '../services/geminiService';
-import { NetworkGraph } from './NetworkGraph';
-
-interface InsightsViewProps {
-  notes: Note[];
-  onUpdateNotes: (updatedNotes: Note[]) => void;
-  onNoteSelect: (noteId: string) => void;
-}
-
-export const InsightsView: React.FC<InsightsViewProps> = ({ 
-  notes, 
-  onUpdateNotes,
-  onNoteSelect 
-}) => {
-  const [isCalculating, setIsCalculating] = useState(false);
-  const [clusters, setClusters] = useState<NoteCluster[]>([]);
-  const [bridgeNotes, setBridgeNotes] = useState<BridgeNote[]>([]);
-  const [suggestions, setSuggestions] = useState<ConnectionSuggestion[]>([]);
-  const [selectedClusterId, setSelectedClusterId] = useState<string | null>(null);
-
-  const performAnalysis = async () => {
-    setIsCalculating(true);
-    try {
-      // 1. Run clustering
-      const { clusters: newClusters } = runClustering(notes);
-      
-      // 2. Name clusters (first 5 unique notes per cluster)
-      const namedClusters = await Promise.all(newClusters.map(async (c) => {
-          const clusterNoteSummaries = notes
-            .filter(n => c.noteIds.includes(n.id))
-            .slice(0, 5)
-            .map(n => n.title);
-          
-          const name = await nameCluster(clusterNoteSummaries);
-          const centroid = calculateCentroid(c.noteIds, notes);
-          
-          return { ...c, name, centroid };
-      }));
-
-      // 3. Update notes with cluster IDs
-      const updatedNotes = notes.map(n => {
-          const cluster = namedClusters.find(c => c.noteIds.includes(n.id));
-          return { ...n, clusterId: cluster?.id };
-      });
-      onUpdateNotes(updatedNotes);
-
-      // 4. Detect bridges
-      const bridges = detectBridges(updatedNotes, namedClusters);
-
-      // 5. Build suggestions for isolated cluster pairs
-      // For demo, we'll just pick a few interesting pairs
-      const newSuggestions: ConnectionSuggestion[] = [];
-      if (namedClusters.length >= 2) {
-          // Find clusters with no mutual bridge notes or low connectivity
-          for (let i = 0; i < Math.min(namedClusters.length, 3); i++) {
-              for (let j = i + 1; j < Math.min(namedClusters.length, 3); j++) {
-                  const cA = namedClusters[i];
-                  const cB = namedClusters[j];
-                  
-                  const cA_notes = updatedNotes.filter(n => cA.noteIds.includes(n.id)).map(n => n.title).join(', ');
-                  const cB_notes = updatedNotes.filter(n => cB.noteIds.includes(n.id)).map(n => n.title).join(', ');
-
-                  const bridgeIdeas = await suggestBridgeIdeas(cA.name, cB.name, cA_notes, cB_notes);
-                  bridgeIdeas.forEach((idea, idx) => {
-                      newSuggestions.push({
-                          id: `suggestion-${i}-${j}-${idx}`,
-                          ...idea,
-                          clusterAId: cA.id,
-                          clusterBId: cB.id
-                      });
-                  });
-              }
-          }
-      }
-
-      setClusters(namedClusters);
-      setBridgeNotes(bridges);
-      setSuggestions(newSuggestions);
-    } catch (error) {
-      console.error("Analysis failed:", error);
-    } finally {
-      setIsCalculating(false);
-    }
-  };
-
-  useEffect(() => {
-    if (notes.some(n => n.embedding) && clusters.length === 0) {
-        performAnalysis();
-    }
-  }, [notes]);
-
-  const bridgeList = useMemo(() => {
-    return bridgeNotes.map(b => {
-        const note = notes.find(n => n.id === b.noteId);
-        return { ...b, title: note?.title || 'Unknown Note' };
-    });
-  }, [bridgeNotes, notes]);
-
-  return (
-    <div className="h-full flex flex-col bg-paper dark:bg-[#0D0D0D] overflow-hidden">
-        {/* Header */}
-        <div className="p-8 border-b border-border/40 flex items-center justify-between backdrop-blur-xl bg-white/40 dark:bg-black/20 z-10">
-            <div>
-                <div className="flex items-center gap-3 mb-1">
-                    <div className="w-8 h-8 rounded-lg bg-indigo-500/10 flex items-center justify-center text-indigo-500">
-                        <Sparkles size={18} />
-                    </div>
-                    <h1 className="text-2xl font-serif font-medium text-ink dark:text-dark-ink">Semantic Insights</h1>
-                </div>
-                <p className="text-[11px] text-concrete tracking-[0.2em] uppercase font-bold">Discovering the hidden architecture of your knowledge</p>
-            </div>
-            <button 
-                onClick={performAnalysis}
-                disabled={isCalculating}
-                className="flex items-center gap-2 px-6 py-2.5 bg-ink text-paper dark:bg-white dark:text-black rounded-full text-xs font-bold uppercase tracking-widest hover:scale-105 active:scale-95 transition-all disabled:opacity-50"
-            >
-                {isCalculating ? <RefreshCw size={14} className="animate-spin" /> : <RefreshCw size={14} />}
-                {isCalculating ? 'Mapping...' : 'Re-sync Network'}
-            </button>
-        </div>
-
-        <div className="flex-1 flex overflow-hidden">
-            {/* Left: Graph View */}
-            <div className="flex-[1.5] p-6 relative">
-                 <NetworkGraph 
-                    notes={notes}
-                    clusters={clusters}
-                    bridgeNotes={bridgeNotes}
-                    onNoteSelect={onNoteSelect}
-                 />
-            </div>
-
-            {/* Right: Insight Dashboard */}
-            <div className="flex-1 border-l border-border/40 flex flex-col h-full bg-paper/50 dark:bg-black/10 backdrop-blur-sm overflow-hidden">
-                <div className="p-8 flex-1 overflow-y-auto custom-scrollbar space-y-12">
-                    {/* Stats Summary */}
-                    <div className="grid grid-cols-2 gap-4">
-                        <div className="p-5 rounded-2xl bg-white dark:bg-white/5 border border-border shadow-sm">
-                            <div className="flex items-center gap-2 text-indigo-500 mb-2">
-                                <Layers size={14} />
-                                <span className="text-[10px] font-bold uppercase tracking-widest">Clusters</span>
-                            </div>
-                            <div className="text-3xl font-serif font-medium text-ink dark:text-dark-ink">{clusters.length}</div>
-                        </div>
-                        <div className="p-5 rounded-2xl bg-white dark:bg-white/5 border border-border shadow-sm">
-                            <div className="flex items-center gap-2 text-ochre mb-2">
-                                <Trophy size={14} />
-                                <span className="text-[10px] font-bold uppercase tracking-widest">Bridge Notes</span>
-                            </div>
-                            <div className="text-3xl font-serif font-medium text-ink dark:text-dark-ink">{bridgeNotes.length}</div>
-                        </div>
-                    </div>
-
-                    {/* Bridge Notes Section */}
-                    <section>
-                         <div className="flex items-center gap-2 mb-6 px-1">
-                            <Zap size={16} className="text-ochre" />
-                            <h3 className="text-sm font-bold uppercase tracking-widest text-ink dark:text-dark-ink">Powerful Bridge Notes</h3>
-                         </div>
-                         <div className="space-y-3">
-                            {bridgeList.map(bridge => (
-                                <motion.div 
-                                    key={bridge.noteId}
-                                    whileHover={{ x: 4 }}
-                                    onClick={() => onNoteSelect(bridge.noteId)}
-                                    className="p-4 rounded-xl bg-white dark:bg-white/5 border border-border hover:border-ochre/40 transition-all cursor-pointer group"
-                                >
-                                    <div className="flex items-center justify-between mb-2">
-                                        <h4 className="text-sm font-medium text-ink dark:text-dark-ink truncate flex-1">{bridge.title}</h4>
-                                        <span className="text-[10px] font-bold text-ochre bg-ochre/10 px-2 py-0.5 rounded-full">
-                                            Score: {(bridge.bridgeScore * 100).toFixed(0)}%
-                                        </span>
-                                    </div>
-                                    <div className="flex items-center gap-2">
-                                         {bridge.connectedClusterIds.map(cid => {
-                                             const c = clusters.find(cl => cl.id === cid);
-                                             return (
-                                                <div key={cid} className="flex items-center gap-1">
-                                                    <div className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: c?.color }} />
-                                                    <span className="text-[9px] text-concrete font-medium whitespace-nowrap">{c?.name}</span>
-                                                </div>
-                                             );
-                                         })}
-                                    </div>
-                                </motion.div>
-                            ))}
-                            {bridgeList.length === 0 && !isCalculating && (
-                                <div className="text-xs text-concrete italic">No significant bridge notes found yet. Deepen your research to find new connections.</div>
-                            )}
-                         </div>
-                    </section>
-
-                    {/* Connection Suggestions */}
-                    <section>
-                         <div className="flex items-center gap-2 mb-6 px-1">
-                            <Lightbulb size={16} className="text-indigo-500" />
-                            <h3 className="text-sm font-bold uppercase tracking-widest text-ink dark:text-dark-ink">Missing Links (AI Generated)</h3>
-                         </div>
-                         <div className="space-y-4">
-                             {suggestions.map((s, idx) => (
-                                 <div key={s.id} className="p-6 rounded-2xl bg-gradient-to-br from-indigo-500/5 to-transparent border border-indigo-500/10 hover:border-indigo-500/30 transition-all">
-                                     <div className="flex items-center gap-3 mb-4">
-                                         <div className="flex -space-x-2">
-                                             <div className="w-6 h-6 rounded-full border-2 border-paper bg-indigo-500 flex items-center justify-center text-[10px] text-white">A</div>
-                                             <div className="w-6 h-6 rounded-full border-2 border-paper bg-ochre flex items-center justify-center text-[10px] text-white">B</div>
-                                         </div>
-                                         <span className="text-[9px] font-bold uppercase tracking-widest text-indigo-500/60">Bridging {clusters.find(c => c.id === s.clusterAId)?.name} & {clusters.find(c => c.id === s.clusterBId)?.name}</span>
-                                     </div>
-                                     <h4 className="text-base font-serif font-medium text-ink dark:text-dark-ink mb-2">{s.title}</h4>
-                                     <p className="text-xs text-muted-ink leading-relaxed mb-4">{s.description}</p>
-                                     <div className="p-3 bg-white/40 dark:bg-white/5 rounded-xl border border-border/40 text-[10px] italic text-concrete flex gap-2">
-                                         <Zap size={12} className="shrink-0" />
-                                         <span>{s.reasoning}</span>
-                                     </div>
-                                 </div>
-                             ))}
-                             {isCalculating && (
-                                 <div className="animate-pulse space-y-4">
-                                     {[1, 2].map(i => (
-                                         <div key={i} className="h-32 bg-indigo-500/5 rounded-2xl border border-indigo-500/10" />
-                                     ))}
-                                 </div>
-                             )}
-                         </div>
-                    </section>
-                </div>
-            </div>
-        </div>
-    </div>
-  );
-};

architectural-grid11/src/components/NetworkGraph.tsx

@@ -1,173 +0,0 @@
-
-import React, { useEffect, useRef } from 'react';
-import * as d3 from 'd3';
-import { Note, NoteCluster, BridgeNote } from '../types';
-
-interface NetworkGraphProps {
-  notes: Note[];
-  clusters: NoteCluster[];
-  bridgeNotes: BridgeNote[];
-  onNoteSelect: (id: string) => void;
-}
-
-export const NetworkGraph: React.FC<NetworkGraphProps> = ({ 
-  notes, 
-  clusters, 
-  bridgeNotes,
-  onNoteSelect
-}) => {
-  const svgRef = useRef<SVGSVGElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!svgRef.current || !containerRef.current) return;
-
-    const width = containerRef.current.clientWidth;
-    const height = containerRef.current.clientHeight;
-
-    const svg = d3.select(svgRef.current);
-    svg.selectAll("*").remove();
-
-    const g = svg.append("g");
-
-    const zoom = d3.zoom<SVGSVGElement, unknown>()
-      .scaleExtent([0.1, 4])
-      .on("zoom", (event) => {
-        g.attr("transform", event.transform);
-      });
-
-    svg.call(zoom);
-
-    // Filter notes with embeddings and cluster assignments
-    const visibleNotes = notes.filter(n => n.embedding && n.clusterId);
-    
-    interface D3Node extends d3.SimulationNodeDatum {
-      id: string;
-      title: string;
-      clusterId: string;
-      color: string;
-      isBridge: boolean;
-      radius: number;
-    }
-
-    interface D3Link extends d3.SimulationLinkDatum<D3Node> {
-      source: string;
-      target: string;
-      strength: number;
-    }
-
-    const bridgeSet = new Set(bridgeNotes.map(b => b.noteId));
-
-    const nodes: D3Node[] = visibleNotes.map(n => {
-      const cluster = clusters.find(c => c.id === n.clusterId);
-      const isBridge = bridgeSet.has(n.id);
-      return {
-        id: n.id,
-        title: n.title,
-        clusterId: n.clusterId!,
-        color: cluster?.color || '#cbd5e1',
-        isBridge,
-        radius: isBridge ? 12 : 8
-      };
-    });
-
-    const links: D3Link[] = [];
-    // Only connect strong links
-    for (let i = 0; i < visibleNotes.length; i++) {
-      for (let j = i + 1; j < visibleNotes.length; j++) {
-        const ni = visibleNotes[i];
-        const nj = visibleNotes[j];
-        
-        if (ni.clusterId === nj.clusterId) {
-            links.push({ source: ni.id, target: nj.id, strength: 0.5 });
-        }
-      }
-    }
-
-    const simulation = d3.forceSimulation<D3Node>(nodes)
-      .force("link", d3.forceLink<D3Node, D3Link>(links).id(d => d.id).distance(100))
-      .force("charge", d3.forceManyBody().strength(-200))
-      .force("center", d3.forceCenter(width / 2, height / 2))
-      .force("collision", d3.forceCollide<D3Node>().radius(d => d.radius + 10));
-
-    // Links
-    const link = g.append("g")
-      .selectAll("line")
-      .data(links)
-      .enter()
-      .append("line")
-      .attr("stroke", "#e2e8f0")
-      .attr("stroke-opacity", 0.6)
-      .attr("stroke-width", 1);
-
-    // Nodes
-    const node = g.append("g")
-      .selectAll(".node")
-      .data(nodes)
-      .enter()
-      .append("g")
-      .attr("class", "node cursor-pointer")
-      .on("click", (event, d) => onNoteSelect(d.id))
-      .call(d3.drag<SVGGElement, D3Node>()
-        .on("start", dragstarted)
-        .on("drag", dragged)
-        .on("end", dragended) as any);
-
-    node.append("circle")
-      .attr("r", d => d.radius)
-      .attr("fill", d => d.color)
-      .attr("stroke", d => d.isBridge ? "#D4AF37" : "#fff")
-      .attr("stroke-width", d => d.isBridge ? 3 : 2)
-      .style("filter", d => d.isBridge ? "drop-shadow(0 0 4px rgba(212, 175, 55, 0.4))" : "none");
-
-    node.append("text")
-      .attr("dy", d => d.radius + 14)
-      .attr("text-anchor", "middle")
-      .attr("class", "text-[10px] fill-concrete dark:fill-concrete/60 font-medium pointer-events-none")
-      .text(d => d.title.length > 20 ? d.title.substring(0, 20) + "..." : d.title);
-
-    simulation.on("tick", () => {
-      link
-        .attr("x1", d => (d.source as any).x)
-        .attr("y1", d => (d.source as any).y)
-        .attr("x2", d => (d.target as any).x)
-        .attr("y2", d => (d.target as any).y);
-
-      node
-        .attr("transform", d => `translate(${d.x},${d.y})`);
-    });
-
-    function dragstarted(event: any, d: D3Node) {
-      if (!event.active) simulation.alphaTarget(0.3).restart();
-      d.fx = d.x;
-      d.fy = d.y;
-    }
-
-    function dragged(event: any, d: D3Node) {
-      d.fx = event.x;
-      d.fy = event.y;
-    }
-
-    function dragended(event: any, d: D3Node) {
-      if (!event.active) simulation.alphaTarget(0);
-      d.fx = null;
-      d.fy = null;
-    }
-
-    return () => simulation.stop();
-  }, [notes, clusters, bridgeNotes, onNoteSelect]);
-
-  return (
-    <div ref={containerRef} className="w-full h-full bg-paper dark:bg-[#121212] rounded-3xl overflow-hidden border border-border/40 relative">
-        <div className="absolute top-6 left-6 z-10 flex flex-wrap gap-3 max-w-[300px]">
-             {clusters.map(c => (
-                 <div key={c.id} className="flex items-center gap-1.5 px-2 py-1 bg-white/80 dark:bg-white/5 backdrop-blur-sm border border-border rounded-full shadow-sm">
-                     <div className="w-2 h-2 rounded-full" style={{ backgroundColor: c.color }} />
-                     <span className="text-[9px] font-bold uppercase tracking-widest text-concrete whitespace-nowrap">{c.name}</span>
-                 </div>
-             ))}
-        </div>
-        <svg ref={svgRef} className="w-full h-full" />
-    </div>
-  );
-};

architectural-grid11/src/components/NotebooksView.tsx

@@ -1,489 +0,0 @@
-import React from 'react';
-import { 
-  Plus, 
-  Search, 
-  Share2, 
-  Pin, 
-  ChevronRight,
-  ArrowLeft,
-  MoreVertical,
-  Sparkles,
-  Tag as TagIcon,
-  X,
-  BookOpen,
-  Edit3,
-  Eye,
-  Trash2,
-  Wind
-} from 'lucide-react';
-import { motion, AnimatePresence } from 'motion/react';
-import { Note, Carnet, Tag } from '../types';
-import { SlashMenu } from './SlashMenu';
-
-interface NotebooksViewProps {
-  activeNoteId: string | null;
-  activeCarnet: Carnet | undefined;
-  filteredNotes: Note[];
-  activeNote: Note | undefined;
-  setActiveNoteId: (id: string | null) => void;
-  togglePin: (id: string) => void;
-  setShowNewNoteModal: (show: boolean) => void;
-  isAISidebarOpen: boolean;
-  setIsAISidebarOpen: (open: boolean) => void;
-  selectedTagIds: string[];
-  setSelectedTagIds: (ids: string[]) => void;
-  allNotes: Note[];
-  activeCarnetId: string;
-  setShowNewCarnetModal: (show: boolean, parentId?: string, isRenaming?: boolean, carnetId?: string) => void;
-  onDeleteNote: (id: string) => void;
-  onBrainstormNote: (note: Note) => void;
-}
-
-export const NotebooksView: React.FC<NotebooksViewProps> = ({
-  activeNoteId,
-  activeCarnet,
-  filteredNotes,
-  activeNote,
-  setActiveNoteId,
-  togglePin,
-  setShowNewNoteModal,
-  isAISidebarOpen,
-  setIsAISidebarOpen,
-  selectedTagIds,
-  setSelectedTagIds,
-  allNotes,
-  activeCarnetId,
-  setShowNewCarnetModal,
-  onDeleteNote,
-  onBrainstormNote
-}) => {
-  const [isTagsExpanded, setIsTagsExpanded] = React.useState(false);
-  const [tagSearchQuery, setTagSearchQuery] = React.useState('');
-  const [isEditing, setIsEditing] = React.useState(false);
-  const [slashMenu, setSlashMenu] = React.useState<{ isOpen: boolean; top: number; left: number } | null>(null);
-
-  const handleEditorKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === '/') {
-      const selection = window.getSelection();
-      if (selection && selection.rangeCount > 0) {
-        const range = selection.getRangeAt(0);
-        const rect = range.getBoundingClientRect();
-        setSlashMenu({
-          isOpen: true,
-          top: rect.bottom + window.scrollY,
-          left: rect.left + window.scrollX
-        });
-      }
-    }
-  };
-
-  const insertCommand = (type: string) => {
-    console.log(`Command selected: ${type}`);
-    setSlashMenu(null);
-  };
-
-  const availableTags = React.useMemo(() => {
-    const carnetNotes = allNotes.filter(n => n.carnetId === activeCarnetId);
-    const tagsMap = new Map<string, Tag>();
-    carnetNotes.forEach(note => {
-      note.tags?.forEach(tag => {
-        tagsMap.set(tag.id, tag);
-      });
-    });
-    return Array.from(tagsMap.values()).sort((a, b) => {
-      // AI tags first, then alphabetical
-      if (a.type === 'ai' && b.type !== 'ai') return -1;
-      if (a.type !== 'ai' && b.type === 'ai') return 1;
-      return a.label.localeCompare(b.label);
-    });
-  }, [allNotes, activeCarnetId]);
-
-  const visibleTags = React.useMemo(() => {
-    let filtered = availableTags;
-    if (tagSearchQuery) {
-      filtered = availableTags.filter(t => 
-        t.label.toLowerCase().includes(tagSearchQuery.toLowerCase())
-      );
-    } else if (!isTagsExpanded) {
-      filtered = availableTags.slice(0, 10);
-      // Ensure selected tags are always visible even if not in the first 10
-      selectedTagIds.forEach(id => {
-        if (!filtered.find(t => t.id === id)) {
-          const tag = availableTags.find(t => t.id === id);
-          if (tag) filtered.push(tag);
-        }
-      });
-    }
-    return filtered;
-  }, [availableTags, isTagsExpanded, tagSearchQuery, selectedTagIds]);
-
-  const toggleTag = (tagId: string) => {
-    if (selectedTagIds.includes(tagId)) {
-      setSelectedTagIds(selectedTagIds.filter(id => id !== tagId));
-    } else {
-      setSelectedTagIds([...selectedTagIds, tagId]);
-    }
-  };
-
-  if (!activeNoteId) {
-    return (
-      <div className="h-full flex flex-col overflow-y-auto">
-        <header className="px-12 pt-12 pb-8 flex flex-col gap-6 sticky top-0 bg-paper/80 backdrop-blur-md z-30">
-          <div className="flex justify-between items-start">
-            <h1 className="text-4xl font-serif font-medium tracking-tight text-ink leading-tight pr-12">
-              {activeCarnet?.name} — {filteredNotes[0]?.date || 'Oct 26'}
-            </h1>
-          </div>
-          
-          <div className="flex items-center justify-between border-b border-ink/5 pb-4">
-            <div className="flex items-center gap-6">
-              <button 
-                onClick={() => setShowNewNoteModal(true)}
-                className="flex items-center gap-2 text-[13px] text-ink font-medium hover:opacity-70 transition-opacity"
-              >
-                <Plus size={16} />
-                <span>Add Note</span>
-              </button>
-              <button 
-                onClick={() => setShowNewCarnetModal(true, activeCarnetId)}
-                className="flex items-center gap-2 text-[13px] text-concrete font-medium hover:text-ink transition-all"
-              >
-                <BookOpen size={16} />
-                <span>New Sub-Carnet</span>
-              </button>
-              <button className="flex items-center gap-2 text-[13px] text-ink font-medium hover:opacity-70 transition-opacity">
-                <Search size={16} />
-                <span>Search</span>
-              </button>
-            </div>
-            <button className="flex items-center gap-2 text-[13px] text-ink font-medium hover:opacity-70 transition-opacity">
-              <Share2 size={16} />
-              <span>Share</span>
-            </button>
-          </div>
-
-          <div className="flex flex-col gap-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-3 text-[10px] font-bold uppercase tracking-[0.2em] text-concrete">
-                <TagIcon size={12} />
-                <span>Filter by Tags</span>
-                {selectedTagIds.length > 0 && (
-                  <span className="bg-blueprint/10 text-blueprint px-2 py-0.5 rounded-full text-[9px] lowercase tracking-normal">
-                    {selectedTagIds.length} active
-                  </span>
-                )}
-              </div>
-              
-              {availableTags.length > 10 && (
-                <div className="relative group">
-                  <input 
-                    type="text"
-                    placeholder="Search tags..."
-                    className="bg-transparent border-b border-border/40 text-[10px] outline-none focus:border-blueprint/40 py-1 px-2 w-32 transition-all focus:w-48 placeholder:text-concrete/40"
-                    onChange={(e) => setTagSearchQuery(e.target.value)}
-                  />
-                </div>
-              )}
-            </div>
-
-            <div className="flex flex-wrap gap-2 items-center min-h-[32px]">
-              <AnimatePresence mode="popLayout">
-                {visibleTags.map(tag => {
-                  const isActive = selectedTagIds.includes(tag.id);
-                  return (
-                    <motion.button
-                      layout
-                      initial={{ opacity: 0, scale: 0.9 }}
-                      animate={{ opacity: 1, scale: 1 }}
-                      exit={{ opacity: 0, scale: 0.9 }}
-                      key={tag.id}
-                      onClick={() => toggleTag(tag.id)}
-                      className={`px-3 py-1.5 rounded-full text-[10px] font-bold uppercase tracking-wider transition-all border flex items-center gap-2
-                        ${isActive 
-                          ? 'bg-ink text-paper border-ink shadow-lg shadow-ink/10' 
-                          : 'bg-white/40 border-border text-concrete hover:border-concrete/40 hover:bg-white/60'}`}
-                    >
-                      {tag.type === 'ai' && (
-                        <Sparkles 
-                          size={10} 
-                          className={isActive ? 'text-blueprint' : 'text-blueprint/60'} 
-                        />
-                      )}
-                      {tag.label}
-                      {isActive && <X size={10} />}
-                    </motion.button>
-                  );
-                })}
-              </AnimatePresence>
-
-              {availableTags.length > 10 && !tagSearchQuery && (
-                <button 
-                  onClick={() => setIsTagsExpanded(!isTagsExpanded)}
-                  className="px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider text-concrete/60 hover:text-ink transition-colors border border-dashed border-border rounded-full"
-                >
-                  {isTagsExpanded ? 'Show less' : `+ ${availableTags.length - 10} more`}
-                </button>
-              )}
-
-              {selectedTagIds.length > 0 && (
-                <button 
-                  onClick={() => setSelectedTagIds([])}
-                  className="px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider text-rust hover:underline ml-auto"
-                >
-                  Clear all
-                </button>
-              )}
-            </div>
-          </div>
-        </header>
-
-        <div className="px-12 flex-1 pb-20">
-          <div className="max-w-3xl space-y-16">
-            {filteredNotes.map((note, index) => (
-              <motion.div 
-                 initial={{ opacity: 0, y: 20 }}
-                 animate={{ opacity: 1, y: 0 }}
-                 transition={{ delay: 0.1 * index, duration: 0.8 }}
-                 key={note.id} 
-                 className="space-y-4 group cursor-pointer relative"
-                 onClick={() => setActiveNoteId(note.id)}
-              >
-                <h2 className="text-2xl font-serif font-medium text-ink flex items-center justify-between">
-                  <span className="flex items-center gap-3">
-                    {note.isPinned && <Pin size={18} className="text-amber-500 fill-amber-500" />}
-                    {note.title}
-                  </span>
-                  <div className="flex items-center gap-2">
-                    <button 
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onBrainstormNote(note);
-                      }}
-                      className="p-2 rounded-full opacity-0 group-hover:opacity-60 hover:opacity-100 hover:bg-ochre/10 text-ochre transition-all"
-                      title="Brainstorm this concept"
-                    >
-                      <Wind size={16} />
-                    </button>
-                    <button 
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        togglePin(note.id);
-                      }}
-                      className={`p-2 rounded-full transition-all ${note.isPinned ? 'text-amber-600 bg-amber-50' : 'opacity-0 group-hover:opacity-60 hover:bg-slate-100 text-ink'}`}
-                    >
-                      <Pin size={16} />
-                    </button>
-                    <button 
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onDeleteNote(note.id);
-                      }}
-                      className="p-2 rounded-full opacity-0 group-hover:opacity-60 hover:opacity-100 hover:bg-rose-50 text-rose-500 transition-all"
-                    >
-                      <Trash2 size={16} />
-                    </button>
-                    <button className="opacity-0 group-hover:opacity-40 transition-opacity">
-                      <ChevronRight size={20} />
-                    </button>
-                  </div>
-                </h2>
-                <div className="flex flex-col md:flex-row gap-8 items-start">
-                  <div className="w-full md:w-56 aspect-[4/3] bg-white/50 dark:bg-white/5 border border-border overflow-hidden rounded shadow-sm flex-shrink-0">
-                    <img 
-                      src={note.imageUrl} 
-                      alt={note.title} 
-                      className="w-full h-full object-cover mix-blend-multiply opacity-80 grayscale contrast-125 hover:grayscale-0 hover:opacity-100 transition-all duration-500"
-                      referrerPolicy="no-referrer"
-                    />
-                  </div>
-                  <div className="space-y-3">
-                    <div className="flex flex-wrap gap-2 mb-2">
-                      {note.tags?.map(tag => (
-                        <div 
-                          key={tag.id}
-                          className={`px-2 py-0.5 rounded text-[9px] font-bold uppercase tracking-wider border flex items-center gap-1.5
-                            ${tag.type === 'ai' 
-                              ? 'bg-blueprint/5 border-blueprint/20 text-blueprint' 
-                              : 'bg-concrete/5 border-border text-concrete'}`}
-                        >
-                          {tag.type === 'ai' && <Sparkles size={8} />}
-                          {tag.label}
-                        </div>
-                      ))}
-                    </div>
-                    <p className="text-[14px] leading-relaxed text-ink/80 font-light max-w-lg line-clamp-4">
-                      {note.content}
-                    </p>
-                    <span className="text-[11px] text-muted-ink uppercase tracking-widest font-medium">Read more</span>
-                  </div>
-                </div>
-              </motion.div>
-            ))}
-            {filteredNotes.length === 0 && (
-              <div className="h-64 flex flex-col items-center justify-center text-center space-y-4">
-                <p className="font-serif text-xl italic text-muted-ink">This notebook is waiting for its first vision.</p>
-                <button 
-                  onClick={() => setShowNewNoteModal(true)}
-                  className="px-6 py-2 border border-ink text-[13px] uppercase tracking-[0.2em] hover:bg-ink hover:text-paper transition-all"
-                >
-                  Begin Drawing
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-
-        <footer className="px-12 py-6 border-t border-ink/5 text-center mt-auto">
-          <p className="text-[11px] text-muted-ink uppercase tracking-[0.2em] font-medium">
-            &copy; 2024 Architectural Grid. All rights reserved.
-          </p>
-        </footer>
-      </div>
-    );
-  }
-
-  return (
-    <div className="h-full flex overflow-hidden transition-all duration-500">
-      <div className="flex-1 flex flex-col overflow-y-auto bg-white dark:bg-paper">
-        <div className="px-12 py-8 flex items-center justify-between sticky top-0 bg-white/90 dark:bg-paper/90 backdrop-blur-sm z-40 border-b border-border">
-          <button 
-            onClick={() => setActiveNoteId(null)}
-            className="flex items-center gap-2 text-ink hover:opacity-60 transition-opacity"
-          >
-            <ArrowLeft size={18} />
-            <span className="text-sm font-medium">Back to collection</span>
-          </button>
-          <div className="flex items-center gap-4">
-            <button 
-              onClick={() => onBrainstormNote(activeNote!)}
-              className="flex items-center gap-2 px-3 py-1.5 rounded-full border border-ochre/30 text-ochre hover:bg-ochre/5 transition-all"
-            >
-              <Wind size={16} />
-              <span className="text-xs font-bold uppercase tracking-widest">Brainstorm</span>
-            </button>
-            <button 
-              onClick={() => setIsEditing(!isEditing)}
-              className={`flex items-center gap-2 px-4 py-1.5 rounded-lg border transition-all duration-300
-                ${isEditing ? 'bg-blueprint text-white border-blueprint shadow-lg shadow-blueprint/20' : 'border-border text-ink hover:bg-slate-50'}`}
-            >
-              {isEditing ? <Eye size={16} /> : <Edit3 size={16} />}
-              <span className="text-xs font-bold uppercase tracking-widest">{isEditing ? 'Visualiser' : 'Modifier'}</span>
-            </button>
-            <button 
-              onClick={() => togglePin(activeNoteId!)}
-              className={`p-2 rounded-full transition-all ${activeNote?.isPinned ? 'text-amber-600 bg-amber-50 dark:bg-ochre/10' : 'text-muted-ink hover:text-ink'}`}
-              title={activeNote?.isPinned ? "Unpin note" : "Pin note"}
-            >
-              <Pin size={18} className={activeNote?.isPinned ? 'fill-amber-600' : ''} />
-            </button>
-            <button 
-              onClick={() => setIsAISidebarOpen(!isAISidebarOpen)}
-              className={`flex items-center gap-2 px-3 py-1.5 rounded-full border transition-all duration-300
-                ${isAISidebarOpen ? 'bg-ink text-paper border-ink' : 'border-border text-ink hover:bg-white/50 dark:hover:bg-white/5'}`}
-            >
-              <Sparkles size={16} />
-              <span className="text-xs font-medium">AI Assistant</span>
-            </button>
-            <button className="p-2 text-muted-ink hover:text-red-500 transition-colors">
-              <Trash2 size={18} />
-            </button>
-            <button className="p-2 text-muted-ink hover:text-ink transition-colors">
-              <MoreVertical size={18} />
-            </button>
-          </div>
-        </div>
-
-        <div className="max-w-4xl mx-auto w-full px-12 py-16 space-y-12 relative">
-          <AnimatePresence>
-            {slashMenu?.isOpen && (
-              <SlashMenu 
-                position={{ top: slashMenu.top, left: slashMenu.left }}
-                onSelect={(type) => insertCommand(type)}
-                onClose={() => setSlashMenu(null)}
-              />
-            )}
-          </AnimatePresence>
-
-          <div className="space-y-4">
-            <div className="flex items-center gap-3 text-[12px] text-muted-ink uppercase tracking-[.25em] font-bold">
-              <span className="text-blueprint">{activeCarnet?.name}</span>
-              <ChevronRight size={10} className="text-concrete" />
-              <span className="text-concrete">{activeNote?.date}</span>
-            </div>
-            
-            {isEditing ? (
-              <input 
-                type="text"
-                defaultValue={activeNote?.title}
-                className="w-full text-5xl md:text-6xl font-serif font-bold text-ink leading-tight bg-transparent border-none outline-none focus:ring-0 placeholder:text-concrete/20"
-                placeholder="Titre de la note..."
-              />
-            ) : (
-              <h1 className="text-5xl md:text-6xl font-serif font-bold text-ink leading-tight">
-                {activeNote?.title}
-              </h1>
-            )}
-
-            <div className="flex flex-wrap gap-2 pt-2">
-              {activeNote?.tags?.map(tag => (
-                <div 
-                  key={tag.id}
-                  className={`px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest border flex items-center gap-2
-                    ${tag.type === 'ai' 
-                      ? 'bg-blueprint/5 border-blueprint/20 text-blueprint' 
-                      : 'bg-paper border-border text-concrete'}`}
-                >
-                  {tag.type === 'ai' && <Sparkles size={12} />}
-                  {tag.label}
-                  {tag.type === 'ai' && (
-                    <div className="w-1.5 h-1.5 rounded-full bg-blueprint animate-pulse" />
-                  )}
-                </div>
-              ))}
-            </div>
-          </div>
-
-          <div className="aspect-[16/9] w-full bg-slate-100 dark:bg-white/5 rounded-xl overflow-hidden shadow-2xl relative group/img">
-            <img 
-              src={activeNote?.imageUrl} 
-              alt={activeNote?.title} 
-              className="w-full h-full object-cover transition-transform duration-700 group-hover/img:scale-105"
-              referrerPolicy="no-referrer"
-            />
-            <div className="absolute inset-0 bg-gradient-to-t from-ink/20 to-transparent pointer-events-none" />
-          </div>
-
-          <div className="max-w-2xl mx-auto w-full space-y-8 pb-40">
-            {isEditing ? (
-              <textarea 
-                defaultValue={activeNote?.content}
-                onKeyDown={handleEditorKeyDown}
-                className="w-full min-h-[500px] text-lg leading-relaxed text-ink/90 font-serif bg-transparent border-none outline-none focus:ring-0 resize-none placeholder:text-concrete/20"
-                placeholder="Commencez à écrire... Tapez '/' pour les commandes."
-              />
-            ) : (
-              <div className="space-y-8">
-                <p className="text-xl md:text-2xl font-serif leading-relaxed text-ink italic">
-                  {activeNote?.content.split('.')[0]}.
-                </p>
-                <div className="h-px bg-border w-32" />
-                <div className="space-y-6">
-                  {activeNote?.content.split('\n').map((line, i) => (
-                    <p key={i} className="text-lg leading-relaxed text-ink/80 font-light text-justify selection:bg-blueprint/20">
-                      {line}
-                    </p>
-                  ))}
-                  {activeNote?.id.startsWith('n-') && (
-                    <p className="text-lg leading-relaxed text-ink/80 font-light text-justify border-l-2 border-blueprint/20 pl-6 italic">
-                      Architectural grids serve as the invisible scaffolding upon which spatial experiences are constructed. Beyond mere structural repetition, they facilitate a rhythmic dialogue between materiality and void. In this exploration, we examine how light fractures these rigid boundaries, creating a dynamic interplay that evolves with the passage of time.
-                    </p>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

architectural-grid11/src/components/SettingsView.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { SettingsTab } from '../types';
-import { SettingsHeader } from './settings/SettingsHeader';
-import { GeneralTab } from './settings/GeneralTab';
-import { AITab } from './settings/AITab';
-import { AppearanceTab } from './settings/AppearanceTab';
-
-interface SettingsViewProps {
-  activeSettingsTab: SettingsTab;
-  setActiveSettingsTab: (tab: SettingsTab) => void;
-}
-
-export const SettingsView: React.FC<SettingsViewProps> = ({
-  activeSettingsTab,
-  setActiveSettingsTab
-}) => {
-  return (
-    <div className="h-full flex flex-col bg-paper dark:bg-dark-paper overflow-y-auto custom-scrollbar relative font-sans">
-      <div className="absolute inset-0 opacity-[0.04] pointer-events-none grainy-bg mix-blend-multiply dark:mix-blend-overlay" />
-      
-      <div className="relative z-10 flex flex-col min-h-full">
-        <SettingsHeader 
-          activeTab={activeSettingsTab} 
-          setActiveTab={setActiveSettingsTab} 
-        />
-
-        <div className="flex-1 px-12 pb-24 h-full">
-          <div className="max-w-6xl mx-auto">
-            <AnimatePresence mode="wait">
-              {activeSettingsTab === 'general' && (
-                <GeneralTab key="general" />
-              )}
-
-              {activeSettingsTab === 'ai' && (
-                <AITab key="ai" />
-              )}
-
-              {activeSettingsTab === 'appearance' && (
-                <AppearanceTab key="appearance" />
-              )}
-
-              {['profile', 'data', 'mcp', 'about'].includes(activeSettingsTab) && (
-                <motion.div 
-                  key="placeholder"
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -10 }}
-                  className="h-[50vh] flex flex-col items-center justify-center border border-dashed border-border rounded-[32px] space-y-6 bg-white/20 dark:bg-white/5"
-                >
-                  <div className="w-16 h-16 rounded-3xl border border-dashed border-concrete/20 flex items-center justify-center text-concrete/40 bg-paper/50">
-                    <span className="text-2xl font-serif italic text-concrete">?</span>
-                  </div>
-                  <div className="text-center space-y-1">
-                    <p className="text-ink font-bold text-sm tracking-tight">Section en développement</p>
-                    <p className="text-concrete italic text-[11px] font-light">Le module {activeSettingsTab} sera disponible prochainement.</p>
-                  </div>
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

architectural-grid11/src/components/Sidebar.tsx

@@ -1,569 +0,0 @@
-import React from 'react';
-import { 
-  Plus, 
-  Archive, 
-  Settings, 
-  ChevronRight,
-  BookOpen,
-  Bot,
-  Microscope,
-  Activity,
-  Pin,
-  Moon,
-  Sun,
-  Bell,
-  Lock,
-  Edit3,
-  Trash2,
-  Users,
-  Clock,
-  GripVertical,
-  Wind,
-  Network
-} from 'lucide-react';
-import { motion, AnimatePresence } from 'motion/react';
-import { NavigationView, Carnet, Note } from '../types';
-
-interface NoteLinkProps {
-  note: Note;
-  isActive: boolean;
-  onClick: () => void;
-}
-
-const NoteLink: React.FC<NoteLinkProps> = ({ note, isActive, onClick }) => (
-  <motion.button
-    initial={{ opacity: 0, x: -10 }}
-    animate={{ opacity: 1, x: 0 }}
-    onClick={onClick}
-    className={`w-full flex items-center gap-2 pl-12 pr-4 py-2 text-[12px] transition-colors rounded-lg
-      ${isActive ? 'bg-white/50 dark:bg-white/10 text-ink font-medium' : 'text-muted-ink hover:text-ink hover:bg-white/30'}`}
-  >
-    <div className="flex items-center gap-2 flex-1 truncate">
-      <div className={`w-1.5 h-1.5 rounded-full shrink-0 ${isActive ? 'bg-ink' : 'bg-transparent border border-muted-ink/30'}`} />
-      <span className="truncate">{note.title}</span>
-    </div>
-    {note.isPinned && <Pin size={10} className="text-amber-500 shrink-0" />}
-  </motion.button>
-);
-
-interface SidebarItemProps {
-  carnet: Carnet;
-  isActive: boolean;
-  notes: Note[];
-  activeNoteId: string | null;
-  onCarnetClick: () => void;
-  onNoteClick: (noteId: string) => void;
-  onAddSubCarnet: () => void;
-  onRename: () => void;
-  onDelete: () => void;
-  children?: React.ReactNode;
-  level: number;
-  isExpanded: boolean;
-  toggleExpand: () => void;
-  onMove?: (draggedId: string, targetId?: string) => void;
-}
-
-const SidebarItem: React.FC<SidebarItemProps> = ({ 
-  carnet, 
-  isActive, 
-  notes,
-  activeNoteId,
-  onCarnetClick,
-  onNoteClick,
-  onAddSubCarnet,
-  onRename,
-  onDelete,
-  children,
-  level,
-  isExpanded,
-  toggleExpand,
-  onMove
-}) => {
-  const hasChildren = React.Children.count(children) > 0;
-
-  return (
-    <div className="space-y-0.5">
-      <div 
-        className="flex items-center group relative h-10"
-        style={{ paddingLeft: `${level * 12}px` }}
-      >
-        {/* Subtle Drag Handle */}
-        <div className="absolute left-[-2px] opacity-0 group-hover:opacity-40 cursor-grab active:cursor-grabbing text-concrete transition-opacity z-10">
-          <GripVertical size={10} />
-        </div>
-
-        {/* Hierarchy Guide Line */}
-        {level > 0 && (
-          <div className="absolute left-[8px] top-[-10px] bottom-1/2 w-px bg-border/40" />
-        )}
-        {level > 0 && (
-          <div className="absolute left-[8px] top-1/2 w-[8px] h-px bg-border/40" />
-        )}
-
-        <div className="flex-1 flex items-center gap-1">
-          {hasChildren ? (
-            <button
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleExpand();
-              }}
-              className="p-1 hover:bg-ink/5 dark:hover:bg-white/5 rounded-md transition-colors text-muted-ink"
-            >
-              <motion.div animate={{ rotate: isExpanded ? 90 : 0 }} transition={{ duration: 0.2 }}>
-                <ChevronRight size={14} />
-              </motion.div>
-            </button>
-          ) : (
-            <div className="w-6" /> // Spacer for alignment
-          )}
-
-          <motion.div
-            whileHover={{ x: 2 }}
-            className={`flex-1 flex items-center gap-2 px-2 py-1.5 rounded-lg transition-all duration-300 group/item cursor-pointer relative
-              ${isActive ? 'bg-white shadow-sm border border-border/40 dark:bg-white/10' : 'hover:bg-white/40 dark:hover:bg-white/5'}`}
-            onClick={onCarnetClick}
-            onDragOver={(e) => {
-              e.preventDefault();
-              e.dataTransfer.dropEffect = 'move';
-              e.currentTarget.classList.add('bg-blueprint/5', 'ring-1', 'ring-blueprint/20');
-            }}
-            onDragLeave={(e) => {
-              e.currentTarget.classList.remove('bg-blueprint/5', 'ring-1', 'ring-blueprint/20');
-            }}
-            onDrop={(e) => {
-              e.preventDefault();
-              e.currentTarget.classList.remove('bg-blueprint/5', 'ring-1', 'ring-blueprint/20');
-              const draggedId = e.dataTransfer.getData('carnetId');
-              console.log('Dropped carnet:', draggedId, 'on target:', carnet.id);
-              if (draggedId && draggedId !== carnet.id) {
-                onMove?.(draggedId, carnet.id);
-              }
-            }}
-            draggable
-            onDragStart={(e) => {
-              console.log('Starting drag for carnet:', carnet.id);
-              e.dataTransfer.setData('carnetId', carnet.id);
-              e.dataTransfer.effectAllowed = 'move';
-              const ghost = e.currentTarget.cloneNode(true) as HTMLElement;
-              ghost.style.position = 'absolute';
-              ghost.style.top = '-1000px';
-              ghost.style.opacity = '0.5';
-              document.body.appendChild(ghost);
-              e.dataTransfer.setDragImage(ghost, 0, 0);
-              setTimeout(() => document.body.removeChild(ghost), 0);
-            }}
-          >
-            {/* active indicator dot */}
-            {isActive && (
-              <motion.div 
-                layoutId="active-indicator"
-                className="absolute -left-1 w-1 h-4 bg-blueprint rounded-full"
-              />
-            )}
-            
-            <div className={`w-6 h-6 rounded-md flex items-center justify-center text-[10px] font-bold border transition-all
-              ${isActive ? 'bg-blueprint text-white border-blueprint' : 'bg-paper dark:bg-white/10 text-concrete border-border dark:border-white/10'}`}>
-              {carnet.initial}
-            </div>
-            <div className="flex-1 text-left flex items-center gap-2 min-w-0">
-              <span className={`text-[12px] font-medium transition-colors truncate ${isActive ? 'text-ink' : 'text-muted-ink group-hover:text-ink'}`}>
-                {carnet.name}
-              </span>
-              {carnet.isPrivate && <Lock size={10} className="text-concrete/60 shrink-0" />}
-            </div>
-            
-            <div className="flex items-center gap-1 opacity-0 group-hover/item:opacity-100 transition-opacity shrink-0">
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onAddSubCarnet();
-                }}
-                className="p-1 hover:bg-ink/10 dark:hover:bg-white/10 rounded-md transition-all text-concrete hover:text-ink"
-                title="Add sub-carnet"
-              >
-                <Plus size={10} />
-              </button>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onRename();
-                }}
-                className="p-1 hover:bg-ink/10 dark:hover:bg-white/10 rounded-md transition-all text-concrete hover:text-ink"
-                title="Rename"
-              >
-                <Edit3 size={10} />
-              </button>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onDelete();
-                }}
-                className="p-1 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md transition-all text-concrete hover:text-red-500"
-                title="Delete"
-              >
-                <Trash2 size={10} />
-              </button>
-              
-              {notes.length > 0 && (
-                <span className="text-[9px] font-bold text-concrete/40 px-1.5 border border-border/40 rounded-full group-hover:text-concrete transition-colors">
-                  {notes.length}
-                </span>
-              )}
-            </div>
-          </motion.div>
-        </div>
-      </div>
-
-      <AnimatePresence initial={false}>
-        {(isExpanded || (isActive && !hasChildren)) && (
-          <motion.div
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: 'auto', opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            transition={{ duration: 0.3, ease: [0.23, 1, 0.32, 1] }}
-            className="overflow-hidden"
-          >
-            <div className="relative" style={{ marginLeft: `${(level + 1) * 12 + 10}px` }}>
-              {/* Vertical line for nested content */}
-              <div className="absolute left-[-6px] top-0 bottom-4 w-px bg-border/30" />
-              
-              <div className="space-y-1 py-1">
-                {children}
-                {isActive && !hasChildren && notes.map(note => (
-                  <NoteLink 
-                    key={note.id} 
-                    note={note} 
-                    isActive={activeNoteId === note.id}
-                    onClick={() => onNoteClick(note.id)}
-                  />
-                ))}
-                {isActive && !hasChildren && notes.length === 0 && (
-                  <p className="pl-8 py-2 text-[10px] italic text-concrete/40 font-light">
-                    No notes found
-                  </p>
-                )}
-              </div>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};
-
-interface SidebarProps {
-  activeView: NavigationView;
-  isDarkMode: boolean;
-  setIsDarkMode: (val: boolean) => void;
-  setActiveView: (view: NavigationView) => void;
-  carnets: Carnet[];
-  notes: Note[];
-  activeCarnetId: string;
-  activeNoteId: string | null;
-  setActiveCarnetId: (id: string) => void;
-  setActiveNoteId: (id: string | null) => void;
-  setShowNewCarnetModal: (show: boolean, parentId?: string, isRenaming?: boolean, carnetId?: string) => void;
-  onDeleteCarnet: (id: string) => void;
-  onMoveCarnet: (draggedId: string, targetId?: string) => void;
-}
-
-export const Sidebar: React.FC<SidebarProps> = ({
-  activeView,
-  isDarkMode,
-  setIsDarkMode,
-  setActiveView,
-  carnets,
-  notes,
-  activeCarnetId,
-  activeNoteId,
-  setActiveCarnetId,
-  setActiveNoteId,
-  setShowNewCarnetModal,
-  onDeleteCarnet,
-  onMoveCarnet
-}) => {
-  const [expandedIds, setExpandedIds] = React.useState<Set<string>>(new Set(['4'])); // Default expand Research
-
-  const toggleExpand = (id: string) => {
-    const newSet = new Set(expandedIds);
-    if (newSet.has(id)) newSet.delete(id);
-    else newSet.add(id);
-    setExpandedIds(newSet);
-  };
-
-  const renderCarnetTree = (parentId: string | undefined = undefined, level: number = 0) => {
-    return carnets
-      .filter(c => c.parentId === parentId && !c.isDeleted)
-      .map(carnet => (
-        <SidebarItem 
-          key={carnet.id} 
-          carnet={carnet} 
-          isActive={activeCarnetId === carnet.id}
-          notes={notes.filter(n => n.carnetId === carnet.id && !n.isDeleted)}
-          activeNoteId={activeNoteId}
-          level={level}
-          isExpanded={expandedIds.has(carnet.id)}
-          toggleExpand={() => toggleExpand(carnet.id)}
-          onAddSubCarnet={() => {
-            if (!expandedIds.has(carnet.id)) toggleExpand(carnet.id);
-            setShowNewCarnetModal(true, carnet.id);
-          }}
-          onRename={() => {
-            setShowNewCarnetModal(true, undefined, true, carnet.id);
-          }}
-          onDelete={() => {
-            onDeleteCarnet(carnet.id);
-          }}
-          onCarnetClick={() => {
-            setActiveCarnetId(carnet.id);
-            setActiveNoteId(null);
-            // Auto expand when clicking
-            if (!expandedIds.has(carnet.id)) toggleExpand(carnet.id);
-          }}
-          onNoteClick={(id) => {
-            setActiveCarnetId(carnet.id);
-            setActiveNoteId(id);
-          }}
-          onMove={onMoveCarnet}
-        >
-          {renderCarnetTree(carnet.id, level + 1)}
-        </SidebarItem>
-      ));
-  };
-
-  return (
-    <aside className="w-80 bg-white/30 dark:bg-[#151515] backdrop-blur-md border-r border-border p-6 flex flex-col z-20 shrink-0 transition-colors duration-500">
-      <div className="mb-10 flex items-center justify-between">
-        <div className="w-10 h-10 rounded-full bg-slate-200 dark:bg-white/10 border border-border flex items-center justify-center text-ink font-serif text-lg shadow-sm">
-          A
-        </div>
-        <div className="flex items-center gap-2">
-          <button 
-            onClick={() => setIsDarkMode(!isDarkMode)}
-            className="p-2 text-muted-ink hover:text-ink transition-all bg-white/50 dark:bg-white/10 rounded-full border border-border dark:border-white/10"
-          >
-            {isDarkMode ? <Sun size={14} /> : <Moon size={14} />}
-          </button>
-
-          <button className="p-2 text-muted-ink hover:text-ink transition-all relative group bg-white/50 dark:bg-white/10 rounded-full border border-border dark:border-white/10">
-            <Bell size={14} />
-            <span className="absolute -top-1 -right-1 w-4 h-4 bg-rose-500 text-white text-[9px] font-bold flex items-center justify-center rounded-full border border-white shadow-sm">
-              3
-            </span>
-          </button>
-
-          <div className="flex bg-white/50 dark:bg-white/10 p-1 rounded-full border border-border dark:border-white/10 transition-all">
-            <button 
-              onClick={() => setActiveView('notebooks')}
-              className={`p-1.5 rounded-full transition-all ${activeView === 'notebooks' ? 'bg-ink text-paper shadow-sm' : 'text-muted-ink hover:text-ink'}`}
-              title="Carnets"
-            >
-              <BookOpen size={14} />
-            </button>
-            <button 
-              onClick={() => setActiveView('reminders')}
-              className={`p-1.5 rounded-full transition-all ${activeView === 'reminders' ? 'bg-ink text-paper shadow-sm' : 'text-muted-ink hover:text-ink'}`}
-              title="Rappels"
-            >
-              <Clock size={14} />
-            </button>
-            <button 
-              onClick={() => setActiveView('agents')}
-              className={`p-1.5 rounded-full transition-all ${activeView === 'agents' ? 'bg-ink text-paper shadow-sm' : 'text-muted-ink hover:text-ink'}`}
-              title="Agents"
-            >
-              <Bot size={14} />
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div className="flex-1 overflow-y-auto space-y-8 -mx-2 px-2 py-4 custom-scrollbar">
-        {activeView === 'notebooks' ? (
-            <div className="space-y-6">
-              <div 
-                className="flex items-center justify-between px-4 py-1 rounded-lg transition-colors group/header"
-                onDragOver={(e) => {
-                  e.preventDefault();
-                  e.dataTransfer.dropEffect = 'move';
-                  e.currentTarget.classList.add('bg-blueprint/5', 'ring-1', 'ring-blueprint/20');
-                }}
-                onDragLeave={(e) => {
-                  e.currentTarget.classList.remove('bg-blueprint/5', 'ring-1', 'ring-blueprint/20');
-                }}
-                onDrop={(e) => {
-                  e.preventDefault();
-                  e.currentTarget.classList.remove('bg-blueprint/5', 'ring-1', 'ring-blueprint/20');
-                  const draggedId = e.dataTransfer.getData('carnetId');
-                  console.log('Dropped carnet on root:', draggedId);
-                  if (draggedId) {
-                    onMoveCarnet(draggedId, undefined);
-                  }
-                }}
-              >
-                <p className="text-[10px] font-bold text-concrete tracking-[0.2em] uppercase">
-                  Architecture Grid
-                </p>
-              <button 
-                onClick={() => setShowNewCarnetModal(true)}
-                className="p-1 hover:bg-paper dark:hover:bg-white/5 rounded-md text-concrete hover:text-ink transition-colors"
-                title="New Carnet"
-              >
-                <Plus size={14} />
-              </button>
-            </div>
-            
-            <nav className="space-y-0.5">
-              {renderCarnetTree()}
-            </nav>
-          </div>
-        ) : activeView === 'shared' ? (
-          <div className="space-y-6">
-            <p className="text-[10px] font-bold text-concrete tracking-[0.2em] uppercase px-4">
-              Partagé avec moi
-            </p>
-            <div className="px-4 py-8 text-center border border-dashed border-border rounded-2xl bg-paper/30">
-              <Users size={24} className="mx-auto text-concrete/40 mb-3" />
-              <p className="text-[11px] text-concrete italic">Aucun document partagé pour le moment.</p>
-            </div>
-          </div>
-        ) : activeView === 'reminders' ? (
-          <div className="space-y-6">
-            <p className="text-[10px] font-bold text-concrete tracking-[0.2em] uppercase px-4">
-              Rappels programmés
-            </p>
-            <div className="px-4 py-8 text-center border border-dashed border-border rounded-2xl bg-paper/30">
-              <Clock size={24} className="mx-auto text-concrete/40 mb-3" />
-              <p className="text-[11px] text-concrete italic">Aucun rappel actif.</p>
-            </div>
-          </div>
-        ) : activeView === 'agents' ? (
-          <div>
-            <p className="text-[10px] font-bold text-muted-ink tracking-widest uppercase mb-4 px-4">
-              Intelligence OS
-            </p>
-            <div className="space-y-1">
-              {[
-                { id: 'a1', name: 'Mes Agents', icon: <Bot size={16} /> },
-                { id: 'a2', name: 'Le Lab AI', icon: <Microscope size={16} /> },
-                { id: 'a3', name: 'Activités', icon: <Activity size={16} /> },
-              ].map(item => (
-                <button
-                  key={item.id}
-                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 group
-                    ${item.id === 'a1' ? 'active-nav-item' : 'text-muted-ink hover:bg-white/40 dark:hover:bg-white/5 hover:text-ink'}`}
-                >
-                  <div className={`w-8 h-8 rounded-full flex items-center justify-center border transition-colors
-                    ${item.id === 'a1' ? 'bg-ink text-paper border-ink' : 'bg-white/60 dark:bg-white/10 border-border dark:border-white/10 group-hover:border-ink/20'}`}>
-                    {item.icon}
-                  </div>
-                  <span className="text-[13px] font-medium">{item.name}</span>
-                </button>
-              ))}
-            </div>
-
-            <div className="mt-8 space-y-1">
-              <p className="text-[10px] font-bold text-concrete tracking-[0.2em] uppercase px-4 mb-2">
-                Capabilities
-              </p>
-              <button 
-                onClick={() => setActiveView('brainstorm')}
-                className="w-full flex items-center gap-3 px-4 py-3 text-[13px] transition-all font-medium group rounded-xl text-muted-ink hover:text-ochre hover:bg-ochre/5"
-              >
-                <div className="w-8 h-8 rounded-full flex items-center justify-center border bg-white/60 dark:bg-white/10 border-border dark:border-white/10 group-hover:border-ochre/20">
-                  <Wind size={16} />
-                </div>
-                <span className="flex-1 text-left">Brainstorm Wave</span>
-              </button>
-
-              <button 
-                onClick={() => setActiveView('insights')}
-                className="w-full flex items-center gap-3 px-4 py-3 text-[13px] transition-all font-medium group rounded-xl text-muted-ink hover:text-indigo-500 hover:bg-indigo-500/5"
-              >
-                <div className="w-8 h-8 rounded-full flex items-center justify-center border bg-white/60 dark:bg-white/10 border-border dark:border-white/10 group-hover:border-indigo-500/20">
-                  <Network size={16} />
-                </div>
-                <span className="flex-1 text-left">Semantic Network</span>
-              </button>
-
-              <button 
-                onClick={() => setActiveView('temporal')}
-                className="w-full flex items-center gap-3 px-4 py-3 text-[13px] transition-all font-medium group rounded-xl text-muted-ink hover:text-rose-500 hover:bg-rose-500/5"
-              >
-                <div className="w-8 h-8 rounded-full flex items-center justify-center border bg-white/60 dark:bg-white/10 border-border dark:border-white/10 group-hover:border-rose-500/20">
-                  <Clock size={16} />
-                </div>
-                <span className="flex-1 text-left">Temporal Forecast</span>
-              </button>
-            </div>
-          </div>
-        ) : null}
-      </div>
-
-      <div className="pt-4 border-t border-border/40 mt-auto pb-4">
-        <div className="px-2 space-y-0.5">
-          <button 
-            onClick={() => setActiveView('shared')}
-            className={`w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl ${activeView === 'shared' ? 'bg-blueprint/5 text-blueprint' : 'text-muted-ink hover:text-ink hover:bg-black/5'}`}
-          >
-            <Users size={14} className={activeView === 'shared' ? 'text-blueprint' : 'text-muted-ink group-hover:text-ink'} />
-            <span className="flex-1 text-left">Partagé</span>
-          </button>
-
-          <button className="w-full flex items-center gap-3 px-3 py-2 text-[12px] text-muted-ink hover:text-ink hover:bg-black/5 transition-all font-medium group rounded-xl">
-            <Archive size={14} className="text-muted-ink group-hover:text-ink" />
-            <span className="flex-1 text-left">Archives</span>
-          </button>
-
-          <button 
-            onClick={() => setActiveView('trash')}
-            className={`w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl ${activeView === 'trash' ? 'bg-rose-50 text-rose-500' : 'text-muted-ink hover:text-rose-500 hover:bg-rose-50/50'}`}
-          >
-            <Trash2 size={14} className={activeView === 'trash' ? 'text-rose-500' : 'text-muted-ink group-hover:text-rose-500'} />
-            <span className="flex-1 text-left">Corbeille</span>
-            {notes.some(n => n.isDeleted) && (
-              <div className="w-1.5 h-1.5 rounded-full bg-rose-400" />
-            )}
-          </button>
-
-          <div className="my-4 pt-4 border-t border-border/20">
-             <p className="text-[10px] font-bold text-muted-ink tracking-[0.2em] uppercase px-3 mb-2 opacity-60">Intelligence</p>
-             <button 
-                onClick={() => setActiveView('brainstorm')}
-                className={`w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl ${activeView === 'brainstorm' ? 'bg-ochre/10 text-ochre' : 'text-muted-ink hover:text-ochre hover:bg-ochre/5'}`}
-              >
-                <Wind size={14} className={activeView === 'brainstorm' ? 'text-ochre' : 'text-muted-ink group-hover:text-ochre'} />
-                <span className="flex-1 text-left">Brainstorm Wave</span>
-              </button>
-
-              <button 
-                onClick={() => setActiveView('insights')}
-                className={`w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl ${activeView === 'insights' ? 'bg-indigo-500/10 text-indigo-500' : 'text-muted-ink hover:text-indigo-500 hover:bg-indigo-500/5'}`}
-              >
-                <Network size={14} className={activeView === 'insights' ? 'text-indigo-500' : 'text-muted-ink group-hover:text-indigo-500'} />
-                <span className="flex-1 text-left">Semantic Network</span>
-              </button>
-
-              <button 
-                onClick={() => setActiveView('temporal')}
-                className={`w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl ${activeView === 'temporal' ? 'bg-rose-500/10 text-rose-500' : 'text-muted-ink hover:text-rose-500 hover:bg-rose-500/5'}`}
-              >
-                <Clock size={14} className={activeView === 'temporal' ? 'text-rose-500' : 'text-muted-ink group-hover:text-rose-500'} />
-                <span className="flex-1 text-left">Temporal Forecast</span>
-              </button>
-          </div>
-
-          <div className="my-2 h-px bg-border/20 mx-2" />
-
-          <button 
-            onClick={() => setActiveView('settings')}
-            className={`w-full flex items-center gap-3 px-3 py-2 text-[12px] transition-all font-medium group rounded-xl ${activeView === 'settings' ? 'bg-ink text-paper shadow-sm' : 'text-muted-ink hover:text-ink hover:bg-black/5'}`}
-          >
-            <Settings size={14} className={activeView === 'settings' ? 'text-paper' : 'text-muted-ink group-hover:text-ink'} />
-            <span className="flex-1 text-left">Paramètres</span>
-          </button>
-        </div>
-      </div>
-    </aside>
-  );
-};

architectural-grid11/src/components/SlashMenu.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { 
-  Heading1, 
-  Heading2, 
-  List, 
-  Quote, 
-  Code, 
-  Image as ImageIcon, 
-  Type,
-  Sparkles
-} from 'lucide-react';
-import { motion, AnimatePresence } from 'motion/react';
-
-interface SlashMenuProps {
-  position: { top: number; left: number };
-  onSelect: (type: string) => void;
-  onClose: () => void;
-}
-
-export const SlashMenu: React.FC<SlashMenuProps> = ({ position, onSelect, onClose }) => {
-  const commands = [
-    { id: 'h1', label: 'Titre Principal', icon: <Heading1 size={14} />, desc: 'Grand titre de section' },
-    { id: 'h2', label: 'Sous-titre', icon: <Heading2 size={14} />, desc: 'Titre de niveau 2' },
-    { id: 'bullet', label: 'Liste à puces', icon: <List size={14} />, desc: 'Liste simple' },
-    { id: 'quote', label: 'Citation', icon: <Quote size={14} />, desc: 'Bloc de texte mis en avant' },
-    { id: 'code', label: 'Bloc de Code', icon: <Code size={14} />, desc: 'Code ou texte technique' },
-    { id: 'image', label: 'Image', icon: <ImageIcon size={14} />, desc: 'Insérer un visuel' },
-    { id: 'ai-summary', label: 'Résumé IA', icon: <Sparkles size={14} />, desc: 'Générer un résumé court', special: true },
-  ];
-
-  return (
-    <>
-      <div className="fixed inset-0 z-[60]" onClick={onClose} />
-      <motion.div
-        initial={{ opacity: 0, scale: 0.95, y: 10 }}
-        animate={{ opacity: 1, scale: 1, y: 0 }}
-        exit={{ opacity: 0, scale: 0.95, y: 10 }}
-        className="fixed z-[70] w-64 bg-white dark:bg-[#1A1A1A] border border-border shadow-2xl rounded-xl overflow-hidden py-2"
-        style={{ top: position.top, left: position.left }}
-      >
-        <div className="px-3 py-2 text-[10px] font-bold text-concrete uppercase tracking-widest border-b border-border/40 mb-1">
-          Commandes rapides
-        </div>
-        <div className="max-h-80 overflow-y-auto custom-scrollbar">
-          {commands.map((cmd) => (
-            <button
-              key={cmd.id}
-              onClick={() => onSelect(cmd.id)}
-              className="w-full flex items-start gap-3 px-3 py-2 hover:bg-paper dark:hover:bg-white/5 transition-colors group text-left"
-            >
-              <div className={`p-2 rounded-lg border border-border transition-colors group-hover:border-ink/20 
-                ${cmd.special ? 'bg-blueprint/10 text-blueprint border-blueprint/20' : 'bg-white/50 dark:bg-white/5 text-ink'}`}>
-                {cmd.icon}
-              </div>
-              <div className="space-y-0.5">
-                <p className="text-xs font-bold text-ink">{cmd.label}</p>
-                <p className="text-[10px] text-muted-ink leading-tight">{cmd.desc}</p>
-              </div>
-            </button>
-          ))}
-        </div>
-      </motion.div>
-    </>
-  );
-};

architectural-grid11/src/components/TrashView.tsx

@@ -1,218 +0,0 @@
-import React from 'react';
-import { 
-  Trash2, 
-  RotateCcw, 
-  X, 
-  FileText, 
-  Folder, 
-  Search,
-  ChevronRight,
-  Clock,
-  AlertCircle
-} from 'lucide-react';
-import { motion, AnimatePresence } from 'motion/react';
-import { Note, Carnet } from '../types';
-
-interface TrashViewProps {
-  deletedNotes: Note[];
-  deletedCarnets: Carnet[];
-  onRestoreNote: (id: string) => void;
-  onRestoreCarnet: (id: string) => void;
-  onPermanentDeleteNote: (id: string) => void;
-  onPermanentDeleteCarnet: (id: string) => void;
-  onEmptyTrash: () => void;
-}
-
-export const TrashView: React.FC<TrashViewProps> = ({
-  deletedNotes,
-  deletedCarnets,
-  onRestoreNote,
-  onRestoreCarnet,
-  onPermanentDeleteNote,
-  onPermanentDeleteCarnet,
-  onEmptyTrash
-}) => {
-  const [searchQuery, setSearchQuery] = React.useState('');
-  const [filterType, setFilterType] = React.useState<'all' | 'notes' | 'carnets'>('all');
-
-  const getDaysRemaining = (dateString?: string) => {
-    if (!dateString) return 30;
-    const deletedDate = new Date(dateString);
-    const now = new Date();
-    const diffTime = now.getTime() - deletedDate.getTime();
-    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
-    return Math.max(0, 30 - diffDays);
-  };
-
-  const filteredItems = React.useMemo(() => {
-    const items = [
-      ...deletedNotes.map(n => ({ ...n, itemType: 'note' as const })),
-      ...deletedCarnets.map(c => ({ ...c, itemType: 'carnet' as const }))
-    ];
-
-    return items
-      .filter(item => {
-        const matchesSearch = ('title' in item ? item.title : item.name).toLowerCase().includes(searchQuery.toLowerCase());
-        const matchesType = filterType === 'all' || (filterType === 'notes' && item.itemType === 'note') || (filterType === 'carnets' && item.itemType === 'carnet');
-        return matchesSearch && matchesType;
-      })
-      .sort((a, b) => {
-        const dateA = a.deletedAt ? new Date(a.deletedAt).getTime() : 0;
-        const dateB = b.deletedAt ? new Date(b.deletedAt).getTime() : 0;
-        return dateB - dateA;
-      });
-  }, [deletedNotes, deletedCarnets, searchQuery, filterType]);
-
-  return (
-    <div className="h-full flex flex-col bg-[#F9F8F6] dark:bg-dark-paper">
-      <header className="px-12 pt-12 pb-8 flex flex-col gap-6 sticky top-0 bg-[#F9F8F6]/80 backdrop-blur-md z-30 border-b border-border/20">
-        <div className="flex items-center justify-between">
-          <div className="space-y-1">
-            <h1 className="text-4xl font-serif font-medium text-ink flex items-center gap-4">
-              Corbeille <Trash2 size={28} className="text-rose-400 opacity-40" />
-            </h1>
-            <p className="text-[10px] text-concrete font-bold uppercase tracking-[0.3em] opacity-60">
-              Auto-suppression après 30 jours
-            </p>
-          </div>
-          
-          {filteredItems.length > 0 && (
-            <button 
-              onClick={() => {
-                if (window.confirm('Vider la corbeille ? Cette action est irréversible.')) {
-                  onEmptyTrash();
-                }
-              }}
-              className="px-6 py-3 bg-paper border border-border text-rose-500 rounded-2xl text-[10px] font-bold uppercase tracking-widest hover:bg-rose-50 hover:border-rose-100 transition-all shadow-sm"
-            >
-              Vider tout
-            </button>
-          )}
-        </div>
-
-        <div className="flex items-center gap-6">
-          <div className="group relative flex-1 max-w-xl">
-            <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-concrete group-focus-within:text-ink transition-colors" size={16} />
-            <input 
-              type="text"
-              placeholder="Rechercher..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full bg-white dark:bg-white/5 border border-border/40 rounded-2xl pl-12 pr-6 py-4 text-sm outline-none focus:ring-4 ring-ink/5 transition-all shadow-sm"
-            />
-          </div>
-
-          <div className="flex bg-white dark:bg-white/5 p-1 rounded-2xl border border-border shadow-sm">
-            {(['all', 'notes', 'carnets'] as const).map((type) => (
-              <button
-                key={type}
-                onClick={() => setFilterType(type)}
-                className={`px-6 py-3 rounded-xl text-[10px] font-bold uppercase tracking-widest transition-all
-                  ${filterType === type ? 'bg-ink text-paper shadow-lg' : 'text-concrete hover:text-ink'}`}
-              >
-                {type === 'all' ? 'Tous' : type === 'notes' ? 'Notes' : 'Carnets'}
-              </button>
-            ))}
-          </div>
-        </div>
-      </header>
-
-      <main className="flex-1 px-12 py-12 overflow-y-auto custom-scrollbar">
-        {filteredItems.length > 0 ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <AnimatePresence mode="popLayout">
-              {filteredItems.map((item) => {
-                const daysLeft = getDaysRemaining(item.deletedAt);
-                return (
-                  <motion.div
-                    key={item.id}
-                    layout
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, scale: 0.9 }}
-                    className="bg-white dark:bg-white/5 border border-border/60 rounded-[32px] p-8 group hover:shadow-2xl hover:border-blueprint/20 transition-all relative overflow-hidden flex flex-col"
-                  >
-                    {/* Countdown Progress Bar */}
-                    <div className="absolute top-0 left-0 w-full h-1 bg-slate-100 overflow-hidden">
-                      <motion.div 
-                        initial={{ width: 0 }}
-                        animate={{ width: `${(daysLeft / 30) * 100}%` }}
-                        className={`h-full ${daysLeft < 5 ? 'bg-rose-500' : 'bg-blueprint'}`}
-                      />
-                    </div>
-
-                    <div className="flex justify-between items-start mb-6">
-                      <div className={`p-3 rounded-2xl ${item.itemType === 'note' ? 'bg-blueprint/10 text-blueprint' : 'bg-concrete/10 text-concrete'}`}>
-                        {item.itemType === 'note' ? <FileText size={20} /> : <Folder size={20} />}
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <button 
-                          onClick={() => item.itemType === 'note' ? onRestoreNote(item.id) : onRestoreCarnet(item.id)}
-                          className="flex items-center gap-2 px-4 py-2 bg-emerald-50 text-emerald-600 rounded-xl text-[10px] font-bold uppercase tracking-widest hover:bg-emerald-100 transition-colors"
-                        >
-                          <RotateCcw size={12} /> Restaurer
-                        </button>
-                        <button 
-                          onClick={() => item.itemType === 'note' ? onPermanentDeleteNote(item.id) : onPermanentDeleteCarnet(item.id)}
-                          className="p-2 hover:bg-rose-50 text-rose-500 rounded-xl transition-colors"
-                          title="Supprimer définitivement"
-                        >
-                          <X size={16} />
-                        </button>
-                      </div>
-                    </div>
-
-                    <div className="space-y-2 mb-8 flex-1">
-                      <h3 className="text-base font-serif font-medium text-ink leading-tight">
-                        {'title' in item ? item.title : item.name}
-                      </h3>
-                      <div className="flex items-center gap-3">
-                        <div className={`text-[9px] font-bold uppercase tracking-widest px-2 py-0.5 rounded border ${daysLeft < 5 ? 'border-rose-200 text-rose-500 bg-rose-50' : 'border-blueprint/20 text-blueprint bg-blueprint/5'}`}>
-                          {daysLeft} JOURS RESTANTS
-                        </div>
-                        <span className="text-[10px] text-concrete font-medium uppercase tracking-tight flex items-center gap-1">
-                          <Clock size={10} /> {('deletedAt' in item && item.deletedAt) ? new Date(item.deletedAt).toLocaleDateString() : ''}
-                        </span>
-                      </div>
-                    </div>
-
-                    {item.itemType === 'note' && 'content' in item ? (
-                      <div className="text-[12px] text-concrete line-clamp-3 leading-relaxed opacity-60 font-light border-t border-border/40 pt-4">
-                        {item.content.replace(/[#*`]/g, '')}
-                      </div>
-                    ) : (
-                      <div className="border-t border-border/40 pt-4">
-                        <div className="text-[9px] font-bold text-concrete/40 uppercase tracking-widest">
-                          Contenu du dossier préservé
-                        </div>
-                      </div>
-                    )}
-                  </motion.div>
-                );
-              })}
-            </AnimatePresence>
-          </div>
-        ) : (
-          <div className="h-full flex flex-col items-center justify-center text-center space-y-6 opacity-40">
-            <div className="p-8 rounded-full bg-slate-100 border-2 border-dashed border-border flex items-center justify-center">
-              <Trash2 size={64} className="text-concrete" />
-            </div>
-            <div className="space-y-2">
-              <h2 className="text-2xl font-serif text-ink italic">Corbeille vide</h2>
-              <p className="text-sm text-concrete max-w-xs">
-                Les éléments que vous supprimez apparaîtront ici. Ils seront conservés pendant 30 jours avant suppression définitive.
-              </p>
-            </div>
-          </div>
-        )}
-      </main>
-
-      <footer className="px-12 py-6 bg-white/50 border-t border-border flex items-center gap-4">
-        <AlertCircle size={14} className="text-concrete" />
-        <p className="text-[10px] text-concrete font-medium uppercase tracking-widest">
-          Conseil : La restauration d'un carnet restaurera également toutes les notes à l'intérieur.
-        </p>
-      </footer>
-    </div>
-  );
-};

architectural-grid11/src/components/settings/AITab.tsx

@@ -1,152 +0,0 @@
-import React from 'react';
-import { Sparkles, Edit3, MessageCircle, Languages, Tag, History, FlaskConical } from 'lucide-react';
-import { motion } from 'motion/react';
-
-const AISettingCard = ({ icon, title, description, defaultChecked = false }: any) => (
-  <div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-6 flex items-center justify-between group hover:shadow-xl hover:shadow-blueprint/5 transition-all duration-300">
-    <div className="flex items-center gap-5">
-      <div className="p-3 bg-paper dark:bg-blueprint/10 rounded-2xl text-blueprint group-hover:bg-blueprint group-hover:text-white group-hover:scale-110 transition-all duration-300 border border-blueprint/20">
-        {icon}
-      </div>
-      <div className="space-y-1">
-        <h4 className="text-[13px] font-bold text-ink">{title}</h4>
-        <p className="text-[10px] text-muted-ink leading-relaxed pr-4 line-clamp-2">{description}</p>
-      </div>
-    </div>
-    <label className="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
-      <input type="checkbox" className="sr-only peer" defaultChecked={defaultChecked} />
-      <div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-blueprint"></div>
-    </label>
-  </div>
-);
-
-export const AITab: React.FC = () => {
-  return (
-    <motion.div 
-      initial={{ opacity: 0, y: 10 }} 
-      animate={{ opacity: 1, y: 0 }} 
-      className="space-y-16 pb-20"
-    >
-      <div className="space-y-10">
-        <h3 className="text-[10px] font-bold uppercase tracking-[0.4em] text-muted-ink opacity-60">Configurez vos fonctionnalités IA et préférences</h3>
-        
-        <div className="space-y-6">
-          <h4 className="text-sm font-bold text-ink border-b border-border/40 pb-4">Fonctionnalités IA</h4>
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-            <AISettingCard 
-              icon={<Edit3 size={18} />}
-              title="Suggestions de titre"
-              description="Suggérer des titres pour les notes sans titre après 50+ mots"
-              defaultChecked
-            />
-            <AISettingCard 
-              icon={<Sparkles size={18} />}
-              title="IA Note"
-              description="Active le bouton de chat IA et les outils d'amélioration du texte"
-              defaultChecked
-            />
-            <AISettingCard 
-              icon={<MessageCircle size={18} />}
-              title="💡 J'ai remarqué quelque chose..."
-              description="Aperçu quotidien de vos notes"
-              defaultChecked
-            />
-            <AISettingCard 
-              icon={<Languages size={18} />}
-              title="Détection de langue"
-              description="Détecte automatiquement la langue de vos notes"
-              defaultChecked
-            />
-            <AISettingCard 
-              icon={<Tag size={18} />}
-              title="Suggestion des labels"
-              description="Suggère et applique des étiquettes automatiquement à vos notes"
-              defaultChecked
-            />
-            <AISettingCard 
-              icon={<History size={18} />}
-              title="Historique des notes"
-              description="Active les snapshots de versions et la restauration depuis History"
-              defaultChecked
-            />
-          </div>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-6">
-          {/* Fréquence */}
-          <div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-8 space-y-10">
-            <div className="space-y-1.5 text-left text-blueprint">
-              <h4 className="text-sm font-bold">Fréquence</h4>
-              <p className="text-[10px] opacity-60 uppercase tracking-wider font-semibold">Fréquence d'analyse des connexions</p>
-            </div>
-            <div className="space-y-6">
-              <label className="flex items-center gap-4 cursor-pointer group">
-                <input type="radio" name="freq" className="sr-only peer" defaultChecked />
-                <div className="w-5 h-5 rounded-full border-2 border-border peer-checked:border-blueprint flex items-center justify-center p-0.5 transition-all">
-                  <div className="w-full h-full rounded-full bg-transparent peer-checked:bg-blueprint" />
-                </div>
-                <span className="text-sm font-medium text-ink group-hover:opacity-70 transition-opacity">Quotidienne</span>
-              </label>
-              <label className="flex items-center gap-4 cursor-pointer group">
-                <input type="radio" name="freq" className="sr-only peer" />
-                <div className="w-5 h-5 rounded-full border-2 border-border peer-checked:border-blueprint flex items-center justify-center p-0.5 transition-all">
-                  <div className="w-full h-full rounded-full bg-transparent peer-checked:bg-blueprint" />
-                </div>
-                <span className="text-sm font-medium text-ink group-hover:opacity-70 transition-opacity">Hebdomadaire</span>
-              </label>
-            </div>
-          </div>
-
-          {/* Mode d'historique */}
-          <div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-8 space-y-10">
-            <div className="space-y-1.5 text-left text-blueprint">
-              <h4 className="text-sm font-bold">Mode d'historique</h4>
-              <p className="text-[10px] opacity-60 uppercase tracking-wider font-semibold">Gestion des snapshots</p>
-            </div>
-            <div className="space-y-6">
-              <label className="flex items-center gap-4 cursor-pointer group">
-                <input type="radio" name="hist" className="sr-only peer" defaultChecked />
-                <div className="w-5 h-5 rounded-full border-2 border-border peer-checked:border-blueprint flex items-center justify-center p-0.5 transition-all">
-                  <div className="w-full h-full rounded-full bg-transparent peer-checked:bg-blueprint" />
-                </div>
-                <div className="space-y-0.5">
-                  <p className="text-sm font-bold text-ink">Manuel (bouton commit)</p>
-                  <p className="text-[10px] text-muted-ink">Créer des snapshots manuellement</p>
-                </div>
-              </label>
-              <label className="flex items-center gap-4 cursor-pointer group">
-                <input type="radio" name="hist" className="sr-only peer" />
-                <div className="w-5 h-5 rounded-full border-2 border-border peer-checked:border-blueprint flex items-center justify-center p-0.5 transition-all">
-                  <div className="w-full h-full rounded-full bg-transparent peer-checked:bg-blueprint" />
-                </div>
-                <div className="space-y-0.5">
-                  <p className="text-sm font-bold text-ink">Automatique (intelligent)</p>
-                  <p className="text-[10px] text-muted-ink">Snapshots automatiques avec détection</p>
-                </div>
-              </label>
-            </div>
-          </div>
-        </div>
-
-        {/* Mode Démo */}
-        <div className="bg-ochre/5 dark:bg-ochre/10 border border-ochre/20 rounded-2xl p-8 flex items-center justify-between group transition-all duration-300 hover:bg-ochre/10">
-          <div className="flex items-center gap-6">
-            <div className="p-3 bg-paper dark:bg-ochre/20 rounded-2xl text-ochre border border-ochre/30">
-              <FlaskConical size={20} />
-            </div>
-            <div className="space-y-1.5 text-left">
-              <h4 className="text-sm font-bold text-ink flex items-center gap-3">
-                🧪 Mode Démo
-              </h4>
-              <p className="text-[11px] text-muted-ink leading-relaxed font-medium">Accélère Memory Echo pour les tests. Les connexions apparaissent instantanément.</p>
-            </div>
-          </div>
-          <label className="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
-            <input type="checkbox" className="sr-only peer" />
-            <div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-ochre"></div>
-          </label>
-        </div>
-      </div>
-    </motion.div>
-  );
-};

architectural-grid11/src/components/settings/AppearanceTab.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import { Palette, Type, LayoutGrid, Maximize } from 'lucide-react';
-import { motion } from 'motion/react';
-
-const AppearanceSelect = ({ icon, title, description, options, defaultValue }: any) => (
-  <div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-8 space-y-8 group transition-all duration-300 hover:shadow-xl hover:shadow-slate/5">
-    <div className="flex items-center gap-5">
-      <div className="p-3 bg-paper dark:bg-white/10 rounded-2xl text-slate border border-border group-hover:scale-110 transition-transform duration-300">
-        {icon}
-      </div>
-      <div className="space-y-0.5 text-left">
-        <h4 className="text-base font-bold text-ink">{title}</h4>
-        <p className="text-[11px] text-concrete leading-tight">{description}</p>
-      </div>
-    </div>
-    
-    <div className="relative group/select">
-      <select 
-        defaultValue={defaultValue}
-        className="w-full bg-white/50 dark:bg-black/40 border border-border rounded-xl px-5 py-4 text-sm outline-none focus:ring-1 ring-slate/20 appearance-none cursor-pointer text-ink font-bold transition-all hover:bg-white dark:hover:bg-black/60"
-      >
-        {options.map((opt: string) => (
-          <option key={opt}>{opt}</option>
-        ))}
-      </select>
-      <div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-concrete group-hover/select:text-slate transition-colors">
-        <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M1 1L5 5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-        </svg>
-      </div>
-    </div>
-  </div>
-);
-
-export const AppearanceTab: React.FC = () => {
-  return (
-    <motion.div 
-      initial={{ opacity: 0, y: 10 }} 
-      animate={{ opacity: 1, y: 0 }} 
-      className="space-y-16 pb-20"
-    >
-      <div className="space-y-10">
-        <h3 className="text-[10px] font-bold uppercase tracking-[0.4em] text-concrete opacity-60">Personnaliser l'apparence de l'application</h3>
-        
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-          <AppearanceSelect 
-            icon={<Palette size={20} />}
-            title="Thème"
-            description="Sélectionner le mode visuel"
-            options={['Clair', 'Sombre', 'Système']}
-            defaultValue="Clair"
-          />
-          <AppearanceSelect 
-            icon={<Type size={20} />}
-            title="Taille de la police"
-            description="Ajustez la lisibilité globale de l'interface"
-            options={['Petite', 'Moyenne', 'Grande']}
-            defaultValue="Moyenne"
-          />
-          <AppearanceSelect 
-            icon={<Type size={20} />}
-            title="Famille de polices"
-            description="La typographie définit l'âme de l'application"
-            options={['Inter', 'JetBrains Mono', 'Public Sans', 'Outfit']}
-            defaultValue="JetBrains Mono"
-          />
-          <AppearanceSelect 
-            icon={<LayoutGrid size={20} />}
-            title="Affichage des notes"
-            description="Gestion visuelle de la grille de composition"
-            options={['Cartes (grille)', 'Liste', 'Tableau']}
-            defaultValue="Cartes (grille)"
-          />
-          <AppearanceSelect 
-            icon={<Maximize size={20} />}
-            title="Taille des notes"
-            description="Structure de la mise en page des éléments"
-            options={['Taille uniforme', 'Variable (Masonry)']}
-            defaultValue="Taille uniforme"
-          />
-        </div>
-      </div>
-    </motion.div>
-  );
-};

architectural-grid11/src/components/settings/GeneralTab.tsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import { Globe, Bell } from 'lucide-react';
-import { motion } from 'motion/react';
-
-export const GeneralTab: React.FC = () => {
-  return (
-    <motion.div 
-      initial={{ opacity: 0, y: 10 }} 
-      animate={{ opacity: 1, y: 0 }} 
-      className="space-y-12"
-    >
-      <div className="space-y-4">
-        <h3 className="text-[10px] font-bold uppercase tracking-[0.3em] text-concrete">Paramètres généraux de l'application</h3>
-        
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          {/* Langue */}
-          <div className="bg-white/40 dark:bg-white/5 border border-border rounded-xl p-8 space-y-6">
-            <div className="flex items-center gap-5">
-              <div className="p-3 bg-paper dark:bg-white/10 rounded-2xl text-slate border border-border">
-                <Globe size={18} />
-              </div>
-              <div className="space-y-0.5">
-                <h4 className="text-base font-bold text-ink">Langue</h4>
-                <p className="text-[11px] text-concrete">Sélectionner une langue</p>
-              </div>
-            </div>
-            
-            <div className="relative group">
-              <select className="w-full bg-white/50 dark:bg-black/40 border border-border rounded-xl px-5 py-3.5 text-sm outline-none focus:ring-1 ring-blueprint/20 appearance-none cursor-pointer transition-all hover:bg-white dark:hover:bg-black/60 text-ink font-medium">
-                <option>Français</option>
-                <option>English</option>
-                <option>Español</option>
-              </select>
-              <div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none opacity-40 text-concrete">
-                <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M1 1L5 5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-                </svg>
-              </div>
-            </div>
-          </div>
-
-          {/* Notifications */}
-          <div className="bg-white/40 dark:bg-white/5 border border-border rounded-xl p-8 space-y-6">
-            <div className="flex items-center gap-5">
-              <div className="p-3 bg-paper dark:bg-white/10 rounded-2xl text-slate border border-border">
-                <Bell size={18} />
-              </div>
-              <div className="space-y-0.5">
-                <h4 className="text-base font-bold text-ink">Notifications</h4>
-                <p className="text-[11px] text-concrete">Gérez vos préférences de notifications</p>
-              </div>
-            </div>
-            
-            <div className="space-y-6 divide-y divide-border/40 text-left">
-              <div className="flex items-center justify-between pt-0">
-                <div className="space-y-1">
-                  <p className="text-xs font-bold text-ink">Notifications par email</p>
-                  <p className="text-[10px] text-concrete leading-relaxed">Recevoir des notifications importantes par email</p>
-                </div>
-                <label className="relative inline-flex items-center cursor-pointer">
-                  <input type="checkbox" className="sr-only peer" />
-                  <div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-slate"></div>
-                </label>
-              </div>
-              
-              <div className="flex items-center justify-between pt-6">
-                <div className="space-y-1">
-                  <p className="text-xs font-bold text-ink">Notifications bureau</p>
-                  <p className="text-[10px] text-concrete leading-relaxed">Recevoir des notifications dans votre navigateur</p>
-                </div>
-                <label className="relative inline-flex items-center cursor-pointer">
-                  <input type="checkbox" className="sr-only peer" defaultChecked />
-                  <div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-slate"></div>
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </motion.div>
-  );
-};

architectural-grid11/src/components/settings/SettingsHeader.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import { Settings, Sparkles, Palette, User, Database, Code, Info } from 'lucide-react';
-import { motion } from 'motion/react';
-import { SettingsTab } from '../../types';
-
-interface SettingsHeaderProps {
-  activeTab: SettingsTab;
-  setActiveTab: (tab: SettingsTab) => void;
-}
-
-export const SettingsHeader: React.FC<SettingsHeaderProps> = ({ activeTab, setActiveTab }) => {
-  const tabs = [
-    { id: 'general', label: 'Paramètres généraux', icon: <Settings size={14} /> },
-    { id: 'ai', label: 'Paramètres IA', icon: <Sparkles size={14} /> },
-    { id: 'appearance', label: 'Apparence', icon: <Palette size={14} /> },
-    { id: 'profile', label: 'Profil', icon: <User size={14} /> },
-    { id: 'data', label: 'Gestion des données', icon: <Database size={14} /> },
-    { id: 'mcp', label: 'Paramètres MCP', icon: <Code size={14} /> },
-    { id: 'about', label: 'À propos', icon: <Info size={14} /> },
-  ];
-
-  return (
-    <header className="px-12 pt-20 pb-16 space-y-12">
-      <div className="space-y-4">
-        <h1 className="text-[64px] font-serif text-ink tracking-tight leading-none italic font-medium">Paramètres</h1>
-        <p className="text-[10px] font-bold uppercase tracking-[0.4em] text-concrete opacity-60">Configuration & Préférences</p>
-      </div>
-
-      <nav className="flex items-center gap-1 border-b border-border/40 pb-px">
-        {tabs.map((tab) => (
-          <button
-            key={tab.id}
-            onClick={() => setActiveTab(tab.id as SettingsTab)}
-            className={`flex items-center gap-2.5 px-6 py-5 text-[10px] font-bold uppercase tracking-[0.18em] transition-all relative whitespace-nowrap
-              ${activeTab === tab.id ? 'text-ink' : 'text-concrete hover:text-ink/60'}`}
-          >
-            <span className={activeTab === tab.id ? 'text-ink' : 'text-concrete'}>{tab.icon}</span>
-            {tab.label}
-            {activeTab === tab.id && (
-              <motion.div 
-                layoutId="activeSettingsTabLine" 
-                className="absolute bottom-0 left-0 right-0 h-0.5 bg-ink" 
-                transition={{ type: 'spring', bounce: 0.1, duration: 0.8 }}
-              />
-            )}
-          </button>
-        ))}
-      </nav>
-    </header>
-  );
-};

architectural-grid11/src/constants.ts

@@ -1,93 +0,0 @@
-import { Carnet, Note } from './types';
-
-export const CARNETS: Carnet[] = [
-  { id: '1', name: 'Daily Notes', initial: 'D', type: 'Private', isPrivate: true },
-  { id: '2', name: 'Project: Neo', initial: 'P', type: 'Project' },
-  { id: '3', name: 'Shared Docs', initial: 'S', type: 'Shared' },
-  { id: '4', name: 'Architecture Research', initial: 'A', type: 'Project' },
-  { id: '5', name: 'History of Architecture', initial: 'H', type: 'Project', parentId: '4' },
-  { id: '6', name: 'Modernism', initial: 'M', type: 'Project', parentId: '5' },
-  { id: '7', name: 'Sustainable Design', initial: 'S', type: 'Project', parentId: '4' },
-];
-
-export const ALL_NOTES: Note[] = [
-  {
-    id: 'n1',
-    carnetId: '4',
-    title: 'Grid Systems & Geometry',
-    date: 'Oct 26, 2024',
-    content: 'Grid Systems are the foundation of cognitive design. We use geometric blocks to define spaces. The repetitive structure creates a sense of order and rhythm in the built environment.',
-    imageUrl: 'https://images.unsplash.com/photo-1503387762-592dea58ef23?auto=format&fit=crop&q=80&w=800&h=600',
-    tags: [
-      { id: 't1', label: 'Architecture', type: 'user' },
-      { id: 't2', label: 'Systems', type: 'ai' }
-    ],
-    embedding: [0.1, 0.1]
-  },
-  {
-    id: 'n1-b',
-    carnetId: '4',
-    title: 'Parametric Grids',
-    date: 'Oct 27, 2024',
-    content: 'Parametricism allows us to deform traditional grid systems. By using mathematical algorithms, we can create fluid yet structured geometries that respond to environmental data.',
-    imageUrl: 'https://images.unsplash.com/photo-1511225070737-5af5ac9a690d?auto=format&fit=crop&q=80&w=800&h=600',
-    tags: [{ id: 't1', label: 'Geometry', type: 'user' }],
-    embedding: [0.12, 0.08]
-  },
-  {
-    id: 'n2',
-    carnetId: '4',
-    title: 'Sustainable Materiality',
-    date: 'Oct 24, 2024',
-    content: 'Exploring cross-laminated timber (CLT) as a sustainable alternative to concrete. Material choice is key to carbon-neutral construction. The warmth of wood contrasts with the coldness of steel.',
-    imageUrl: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=800&h=600',
-    tags: [
-      { id: 't3', label: 'Materials', type: 'user' },
-      { id: 't4', label: 'Sustainabilty', type: 'ai' }
-    ],
-    embedding: [0.8, 0.8]
-  },
-  {
-    id: 'n2-b',
-    carnetId: '7',
-    title: 'Solar Passive Design',
-    date: 'Oct 25, 2024',
-    content: 'Using orientation to maximize natural heat. Sustainable architecture must prioritize passive systems over active ones. Thermal mass and insulation are critical factors.',
-    imageUrl: 'https://images.unsplash.com/photo-1509391366360-fe5bb5843e0c?auto=format&fit=crop&q=80&w=800&h=600',
-    tags: [{ id: 't4', label: 'Sustainabilty', type: 'user' }],
-    embedding: [0.85, 0.75]
-  },
-  {
-    id: 'n3',
-    carnetId: '4',
-    title: 'Light & Minimalist Space',
-    date: 'Oct 22, 2024',
-    content: 'Minimalism is about the subtraction of the unnecessary. Light becomes a material in itself. Reflections on glass and white surfaces create depth without clutter.',
-    imageUrl: 'https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=800&h=600',
-    tags: [
-      { id: 't5', label: 'Lighting', type: 'user' },
-      { id: 't6', label: 'Atmosphere', type: 'ai' }
-    ],
-    embedding: [0.2, 0.8]
-  },
-  {
-    id: 'n3-b',
-    carnetId: '6',
-    title: 'The Glass House Study',
-    date: 'Oct 23, 2024',
-    content: 'Analyzing the transparency of the Glass House. The boundary between interior and exterior is blurred. A pure expression of modernist ideals and minimal structure.',
-    imageUrl: 'https://images.unsplash.com/photo-1464938050520-ef2270bb8ce8?auto=format&fit=crop&q=80&w=800&h=600',
-    tags: [{ id: 't6', label: 'Modernism', type: 'user' }],
-    embedding: [0.25, 0.85]
-  },
-  {
-    id: 'bridge-1',
-    carnetId: '4',
-    title: 'Geometric Ecology',
-    date: 'Oct 28, 2024',
-    content: 'Can we use grid systems to optimize sustainable solar collection? This note bridges the gap between rigid geometry and ecological necessity. Structured sustainability.',
-    imageUrl: 'https://images.unsplash.com/photo-1464146072230-91cabc968276?auto=format&fit=crop&q=80&w=800&h=600',
-    tags: [{ id: 't1', label: 'Bridge', type: 'ai' }],
-    embedding: [0.45, 0.45] // Center point
-  }
-];

architectural-grid11/src/index.css

@@ -1,98 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');
-@import "tailwindcss";
-
-@theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
-  --font-serif: "Playfair Display", serif;
-  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
-
-  /* Foundation */
-  --color-paper: #F2F0E9;
-  --color-ink: #1C1C1C;
-  --color-muted-ink: rgba(28, 28, 28, 0.6);
-  --color-border: rgba(28, 28, 28, 0.1);
-  --color-concrete: #8D8D8D;
-
-  /* Architectural Accents */
-  --color-blueprint: #75B2D6;
-  --color-slate: #4A4E69;
-  --color-ochre: #D4A373;
-  --color-sage: #A3B18A;
-  --color-rust: #9B2226;
-  --color-glass: rgba(255, 255, 255, 0.4);
-
-  /* Dark Theme Aliases */
-  --color-dark-paper: #0D0D0D;
-  --color-dark-ink: #EAEAEA;
-  --color-dark-muted: rgba(234, 234, 234, 0.5);
-  --color-dark-border: rgba(234, 234, 234, 0.1);
-}
-
-@layer base {
-  body {
-    @apply bg-paper text-ink font-sans antialiased transition-colors duration-500;
-  }
-
-  .dark body {
-    @apply bg-dark-paper;
-  }
-
-  .dark {
-    --color-paper: #121212;
-    --color-ink: #EAEAEA;
-    --color-muted-ink: rgba(234, 234, 234, 0.6);
-    --color-border: rgba(255, 255, 255, 0.08);
-    --color-glass: rgba(0, 0, 0, 0.4);
-    --color-concrete: #555555;
-  }
-}
-
-.paper-texture {
-  background-color: var(--color-paper);
-  background-image: url("https://www.transparenttextures.com/patterns/natural-paper.png");
-}
-
-/* Custom Scrollbar - Architectural Minimalist */
-.custom-scrollbar::-webkit-scrollbar {
-  width: 3px;
-}
-
-.custom-scrollbar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.custom-scrollbar::-webkit-scrollbar-thumb {
-  background: rgba(28, 28, 28, 0.08);
-  border-radius: 10px;
-}
-
-.custom-scrollbar:hover::-webkit-scrollbar-thumb {
-  background: rgba(28, 28, 28, 0.2);
-}
-
-.ai-glass {
-  background: rgba(255, 255, 255, 0.85);
-  backdrop-filter: blur(20px);
-  border: 1px solid rgba(255, 255, 255, 0.5);
-}
-
-.dark .ai-glass {
-  background: rgba(30, 30, 30, 0.85);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.sidebar-shadow {
-  box-shadow: 1px 0 10px rgba(0, 0, 0, 0.05);
-}
-
-.active-nav-item {
-  background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.5);
-}
-
-.dark .active-nav-item {
-  background: rgba(255, 255, 255, 0.08);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-}

architectural-grid11/src/main.tsx

@@ -1,10 +0,0 @@
-import {StrictMode} from 'react';
-import {createRoot} from 'react-dom/client';
-import App from './App.tsx';
-import './index.css';
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-);

architectural-grid11/src/services/geminiService.ts

@@ -1,200 +0,0 @@
-
-import { GoogleGenAI, Type } from "@google/genai";
-import { BrainstormIdea } from "../types";
-
-const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });
-
-const BRAINSTORM_SCHEMA = {
-  type: Type.OBJECT,
-  properties: {
-    ideas: {
-      type: Type.ARRAY,
-      items: {
-        type: Type.OBJECT,
-        properties: {
-          title: { type: Type.STRING },
-          description: { type: Type.STRING },
-          connection_to_seed: { type: Type.STRING },
-          novelty_score: { type: Type.NUMBER }
-        },
-        required: ["title", "description", "connection_to_seed", "novelty_score"]
-      }
-    }
-  },
-  required: ["ideas"]
-};
-
-const SUGGESTIONS_SCHEMA = {
-  type: Type.OBJECT,
-  properties: {
-    suggestions: {
-      type: Type.ARRAY,
-      items: {
-        type: Type.OBJECT,
-        properties: {
-          title: { type: Type.STRING },
-          description: { type: Type.STRING },
-          reasoning: { type: Type.STRING }
-        },
-        required: ["title", "description", "reasoning"]
-      }
-    }
-  },
-  required: ["suggestions"]
-};
-
-export async function generateBrainstormWave(
-  seedIdea: string,
-  waveNumber: number,
-  contextSummaries: string = ""
-): Promise<Partial<BrainstormIdea>[]> {
-  const waveDescriptions = [
-    "", // index 0 unused
-    "VAGUE 1 (proximité directe) : Sous-aspects, reformulations, variations de l'idée. Reste dans le même domaine.",
-    "VAGUE 2 (analogies) : Trouve des parallèles dans d'autres domaines. Comment cette idée se manifeste-t-elle ailleurs ? Quelles techniques d'autres industries pourraient s'appliquer ?",
-    "VAGUE 3 (disruption) : Inverse l'idée. Pousse-la à l'extrême. Combine-la avec un domaine totalement non lié. Que se passe-t-il si l'opposé est vrai ?"
-  ];
-
-  const prompt = `
-    Idée seed : "${seedIdea}"
-    Contexte : ${contextSummaries}
-    Génère 5 idées pour la VAGUE ${waveNumber} : ${waveDescriptions[waveNumber]}
-    Format JSON selon le schéma.
-  `;
-
-  try {
-    const response = await ai.models.generateContent({
-      model: "gemini-3-flash-preview",
-      contents: [{ role: "user", parts: [{ text: prompt }] }],
-      config: {
-        systemInstruction: "Tu es un expert en brainstorming. Réponds uniquement en JSON valide.",
-        responseMimeType: "application/json",
-        responseSchema: BRAINSTORM_SCHEMA,
-        temperature: 1.0
-      }
-    });
-
-    const resText = response.text;
-    if (!resText) return [];
-
-    const parsed = JSON.parse(resText.replace(/^```json\n?/, '').replace(/\n?```$/, '').trim());
-    const ideas = Array.isArray(parsed.ideas) ? parsed.ideas : (Array.isArray(parsed) ? parsed : []);
-    
-    return ideas.map((item: any) => ({
-      title: item.title,
-      description: item.description,
-      connectionToSeed: item.connection_to_seed,
-      noveltyScore: item.novelty_score,
-      waveNumber
-    }));
-  } catch (error) {
-    console.error(`Error generating brainstorm wave ${waveNumber}:`, error);
-    throw error;
-  }
-}
-
-export async function generateExpansion(parentIdeaTitle: string, parentIdeaDescription: string): Promise<Partial<BrainstormIdea>[]> {
-  const prompt = `
-    Idée source : "${parentIdeaTitle} - ${parentIdeaDescription}"
-    Génère 3 idées d'extension ou de sous-aspects.
-    Format JSON.
-  `;
-
-  try {
-    const response = await ai.models.generateContent({
-      model: "gemini-3-flash-preview",
-      contents: [{ role: "user", parts: [{ text: prompt }] }],
-      config: {
-        systemInstruction: "Tu es un expert en brainstorming. Réponds uniquement en JSON valide.",
-        responseMimeType: "application/json",
-        responseSchema: BRAINSTORM_SCHEMA,
-        temperature: 1.0
-      }
-    });
-
-    const resText = response.text;
-    if (!resText) return [];
-
-    const parsed = JSON.parse(resText.replace(/^```json\n?/, '').replace(/\n?```$/, '').trim());
-    const ideas = Array.isArray(parsed.ideas) ? parsed.ideas : (Array.isArray(parsed) ? parsed : []);
-    
-    return ideas.map((item: any) => ({
-      title: item.title,
-      description: item.description,
-      connectionToSeed: item.connection_to_seed,
-      noveltyScore: item.novelty_score
-    }));
-  } catch (error) {
-    console.error("Error generating expansion:", error);
-    throw error;
-  }
-}
-
-export async function getEmbedding(text: string): Promise<number[]> {
-  try {
-    const result = await ai.models.embedContent({
-      model: 'gemini-embedding-2-preview',
-      contents: [text],
-    });
-    return result.embeddings[0].values;
-  } catch (error) {
-    console.error("Error generating embedding:", error);
-    throw error;
-  }
-}
-
-export function cosineSimilarity(a: number[], b: number[]): number {
-  if (!a || !b || a.length !== b.length) return 0;
-  const dotProduct = a.reduce((sum, val, i) => sum + val * b[i], 0);
-  const magnitudeA = Math.sqrt(a.reduce((sum, val) => sum + val * val, 0));
-  const magnitudeB = Math.sqrt(b.reduce((sum, val) => sum + val * val, 0));
-  if (magnitudeA === 0 || magnitudeB === 0) return 0;
-  return dotProduct / (magnitudeA * magnitudeB);
-}
-
-export async function nameCluster(noteSummaries: string[]): Promise<string> {
-  const prompt = `Quel thème commun relie ces notes ? Donne un nom court (2-4 mots).\nNotes :\n${noteSummaries.join('\n- ')}`;
-  try {
-    const result = await ai.models.generateContent({
-      model: "gemini-3-flash-preview",
-      contents: prompt
-    });
-    return result.text.trim();
-  } catch (error) {
-    console.error("Error naming cluster:", error);
-    return "Thematic Cluster";
-  }
-}
-
-export async function suggestBridgeIdeas(
-  clusterAName: string, 
-  clusterBName: string, 
-  clusterASummaries: string, 
-  clusterBSummaries: string
-): Promise<any[]> {
-  const prompt = `
-    Cluster A (${clusterAName}) contient des notes sur : ${clusterASummaries}
-    Cluster B (${clusterBName}) contient des notes sur : ${clusterBSummaries}
-    
-    Ces deux clusters ne sont pas connectés. Propose 3 idées 
-    de "notes pont" qui pourraient créer un lien créatif entre eux.
-    Pour chaque idée : titre, description, pourquoi ça connecte les deux.
-    
-    Format JSON.
-  `;
-
-  try {
-    const response = await ai.models.generateContent({
-      model: "gemini-3-flash-preview",
-      contents: prompt,
-      config: {
-        responseMimeType: "application/json",
-        responseSchema: SUGGESTIONS_SCHEMA
-      }
-    });
-    return JSON.parse(response.text);
-  } catch (error) {
-    console.error("Error suggesting bridge ideas:", error);
-    return [];
-  }
-}

architectural-grid11/src/types.ts

@@ -1,102 +0,0 @@
-export type NavigationView = 'notebooks' | 'agents' | 'settings' | 'shared' | 'reminders' | 'trash' | 'brainstorm' | 'insights' | 'temporal';
-export type AITone = 'Professional' | 'Creative' | 'Academic' | 'Casual';
-export type AITab = 'discussion' | 'actions' | 'resources' | 'explore';
-export type SettingsTab = 'general' | 'ai' | 'appearance' | 'profile' | 'data' | 'mcp' | 'about';
-
-export interface Tag {
-  id: string;
-  label: string;
-  type: 'ai' | 'user';
-}
-
-export interface Note {
-  id: string;
-  carnetId: string;
-  title: string;
-  content: string;
-  imageUrl: string;
-  date: string;
-  tags: Tag[];
-  isPinned?: boolean;
-  isDeleted?: boolean;
-  deletedAt?: string;
-  embedding?: number[];
-  clusterId?: string;
-}
-
-export interface NoteCluster {
-  id: string;
-  name: string;
-  noteIds: string[];
-  centroid? : number[];
-  color: string;
-}
-
-export interface BridgeNote {
-  noteId: string;
-  connectedClusterIds: string[];
-  bridgeScore: number;
-}
-
-export interface ConnectionSuggestion {
-  id: string;
-  title: string;
-  description: string;
-  reasoning: string;
-  clusterAId: string;
-  clusterBId: string;
-}
-
-export interface BrainstormSession {
-  id: string;
-  seedIdea: string;
-  sourceNoteId?: string;
-  contextNoteIds?: string[];
-  exportedNoteId?: string;
-  createdAt: string;
-  updatedAt: string;
-  userId: string;
-}
-
-export type BrainstormIdeaStatus = 'active' | 'dismissed' | 'converted';
-
-export interface BrainstormIdea {
-  id: string;
-  sessionId: string;
-  waveNumber: 1 | 2 | 3;
-  title: string;
-  description: string;
-  connectionToSeed: string;
-  noveltyScore: number; // 1-10
-  parentIdeaId?: string;
-  convertedToNoteId?: string;
-  relatedNoteIds?: string[];
-  status: BrainstormIdeaStatus;
-  position?: { x: number; y: number };
-}
-
-export interface Carnet {
-  id: string;
-  name: string;
-  initial: string;
-  type: 'Private' | 'Project' | 'Shared';
-  isPrivate?: boolean;
-  parentId?: string;
-  isDeleted?: boolean;
-  deletedAt?: string;
-}
-
-export interface NoteAccessLog {
-  noteId: string;
-  accessedAt: string;
-  action: 'view' | 'edit' | 'search_hit';
-}
-
-export interface NotePrediction {
-  noteId: string;
-  predictedRelevanceDate: string;
-  confidence: number;
-  reason: string;
-  generatedAt: string;
-}
-

architectural-grid11/tsconfig.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "module": "ESNext",
-    "lib": [
-      "ES2022",
-      "DOM",
-      "DOM.Iterable"
-    ],
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "isolatedModules": true,
-    "moduleDetection": "force",
-    "allowJs": true,
-    "jsx": "react-jsx",
-    "paths": {
-      "@/*": [
-        "./*"
-      ]
-    },
-    "allowImportingTsExtensions": true,
-    "noEmit": true
-  }
-}

architectural-grid11/vite.config.ts

@@ -1,24 +0,0 @@
-import tailwindcss from '@tailwindcss/vite';
-import react from '@vitejs/plugin-react';
-import path from 'path';
-import {defineConfig, loadEnv} from 'vite';
-
-export default defineConfig(({mode}) => {
-  const env = loadEnv(mode, '.', '');
-  return {
-    plugins: [react(), tailwindcss()],
-    define: {
-      'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY),
-    },
-    resolve: {
-      alias: {
-        '@': path.resolve(__dirname, '.'),
-      },
-    },
-    server: {
-      // HMR is disabled in AI Studio via DISABLE_HMR env var.
-      // Do not modify—file watching is disabled to prevent flickering during agent edits.
-      hmr: process.env.DISABLE_HMR !== 'true',
-    },
-  };
-});

architectural-grid12/.env.example

@@ -1,9 +0,0 @@
-# GEMINI_API_KEY: Required for Gemini AI API calls.
-# AI Studio automatically injects this at runtime from user secrets.
-# Users configure this via the Secrets panel in the AI Studio UI.
-GEMINI_API_KEY="MY_GEMINI_API_KEY"
-
-# APP_URL: The URL where this applet is hosted.
-# AI Studio automatically injects this at runtime with the Cloud Run service URL.
-# Used for self-referential links, OAuth callbacks, and API endpoints.
-APP_URL="MY_APP_URL"