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>

memento-note/app/(main)/insights/page.tsx

@@ -1,20 +1,31 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { ClusterVisualization } from '@/components/cluster-visualization'
-import { BridgeNotesDashboard } from '@/components/bridge-notes-dashboard'
+import { NetworkGraph } from '@/components/network-graph'
 import { useRouter } from 'next/navigation'
+import { motion } from 'motion/react'
+import { Sparkles, RefreshCw, Layers, Trophy, Zap, Lightbulb } from 'lucide-react'
+
+interface Note {
+  id: string
+  title: string | null
+  content: string
+  clusterId?: number
+}
 
 interface Cluster {
+  id: string
   clusterId: number
   name?: string
   noteIds: string[]
+  color?: string
 }
 
 interface BridgeNote {
   noteId: string
   bridgeScore: number
   clustersConnected: number[]
+  clusterNames?: string[]
   note?: {
     id: string
     title: string | null
@@ -22,40 +33,80 @@ interface BridgeNote {
   }
 }
 
+interface BridgeSuggestion {
+  clusterAId: number
+  clusterBId: number
+  clusterAName: string
+  clusterBName: string
+  suggestedTitle: string
+  suggestedContent: string
+  justification: string
+}
+
+const COLOR_PALETTE = ['#F87171', '#60A5FA', '#34D399', '#FBBF24', '#A78BFA', '#F472B6', '#2DD4BF']
+
 export default function InsightsPage() {
   const router = useRouter()
+  const [notes, setNotes] = useState<Note[]>([])
   const [clusters, setClusters] = useState<Cluster[]>([])
   const [bridgeNotes, setBridgeNotes] = useState<BridgeNote[]>([])
+  const [suggestions, setSuggestions] = useState<BridgeSuggestion[]>([])
   const [loading, setLoading] = useState(true)
-  const [recalculating, setRecalculating] = useState(false)
-  const [message, setMessage] = useState<string | null>(null)
+  const [isCalculating, setIsCalculating] = useState(false)
 
   useEffect(() => {
-    loadClusters()
+    loadInitialData()
   }, [])
 
-  const loadClusters = async () => {
+  const loadInitialData = async () => {
     setLoading(true)
     try {
+      // First, try to get cached clusters
       const res = await fetch('/api/clusters')
       if (res.ok) {
         const data = await res.json()
-        setClusters(data.clusters || [])
 
-        if (data.message) {
-          setMessage(data.message)
+        // Check if we have clusters
+        if (data.clusters && data.clusters.length > 0) {
+          const clustersWithColors = data.clusters.map((c: Cluster, i: number) => ({
+            ...c,
+            id: c.clusterId.toString(),
+            color: COLOR_PALETTE[i % COLOR_PALETTE.length]
+          }))
+          setNotes(data.notes || [])
+          setClusters(clustersWithColors)
+
+          // Load bridge notes
+          const bridgeRes = await fetch('/api/bridge-notes?details=true')
+          if (bridgeRes.ok) {
+            const bridgeData = await bridgeRes.json()
+            setBridgeNotes(bridgeData.bridgeNotes || [])
+          }
+
+          // Load suggestions
+          const suggestionsRes = await fetch('/api/bridge-notes/suggestions')
+          if (suggestionsRes.ok) {
+            const suggestionsData = await suggestionsRes.json()
+            setSuggestions(suggestionsData.suggestions || [])
+          }
+        } else {
+          // No clusters - trigger calculation if we have enough notes
+          if (data.totalNotes >= 10) {
+            await performAnalysis()
+          } else {
+            // Not enough notes - show empty state
+          }
         }
       }
     } catch (error) {
-      console.error('Error loading clusters:', error)
-      setMessage('Failed to load clusters')
+      console.error('Error loading data:', error)
     } finally {
       setLoading(false)
     }
   }
 
-  const recalculateClusters = async () => {
-    setRecalculating(true)
+  const performAnalysis = async () => {
+    setIsCalculating(true)
     try {
       const res = await fetch('/api/clusters', {
         method: 'POST',
@@ -65,143 +116,214 @@ export default function InsightsPage() {
 
       if (res.ok) {
         const data = await res.json()
-        setClusters(data.clusters || [])
+        const clustersWithColors = (data.clusters || []).map((c: Cluster, i: number) => ({
+          ...c,
+          id: c.clusterId.toString(),
+          color: COLOR_PALETTE[i % COLOR_PALETTE.length]
+        }))
+        setNotes(data.notes || [])
+        setClusters(clustersWithColors)
         setBridgeNotes(data.bridgeNotes || [])
-        setMessage(data.message || 'Clusters recalculated successfully')
+
+        // Load suggestions (they were generated during POST)
+        const suggestionsRes = await fetch('/api/bridge-notes/suggestions')
+        if (suggestionsRes.ok) {
+          const suggestionsData = await suggestionsRes.json()
+          setSuggestions(suggestionsData.suggestions || [])
+        }
       }
     } catch (error) {
-      console.error('Error recalculating clusters:', error)
-      setMessage('Failed to recalculate clusters')
+      console.error('Error running analysis:', error)
     } finally {
-      setRecalculating(false)
+      setIsCalculating(false)
     }
   }
 
-  const handleNoteClick = (noteId: string, type: 'note' | 'cluster') => {
-    if (type === 'note') {
-      router.push(`/home?note=${noteId}`)
-    }
+  const handleNoteClick = (noteId: string) => {
+    router.push(`/home?note=${noteId}`)
   }
 
+  const bridgeList = bridgeNotes.map(b => ({
+    ...b,
+    title: b.note?.title || 'Unknown Note'
+  }))
+
   return (
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div className="h-full flex flex-col bg-paper dark:bg-[#0D0D0D] overflow-hidden">
       {/* Header */}
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-gray-900">
-          Insights
-        </h1>
-        <p className="mt-2 text-gray-600">
-          Discover thematic clusters and connections in your notes
-        </p>
-      </div>
-
-      {/* Stats Bar */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
-        <div className="bg-white rounded-lg shadow p-4">
-          <div className="text-sm text-gray-500">Total Clusters</div>
-          <div className="text-2xl font-bold text-gray-900">{clusters.length}</div>
-        </div>
-        <div className="bg-white rounded-lg shadow p-4">
-          <div className="text-sm text-gray-500">Bridge Notes</div>
-          <div className="text-2xl font-bold text-gray-900">{bridgeNotes.length}</div>
-        </div>
-        <div className="bg-white rounded-lg shadow p-4">
-          <div className="text-sm text-gray-500">Notes Analyzed</div>
-          <div className="text-2xl font-bold text-gray-900">
-            {clusters.reduce((sum, c) => sum + c.noteIds.length, 0)}
+      <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>
-        <div className="bg-white rounded-lg shadow p-4">
-          <button
-            onClick={recalculateClusters}
-            disabled={recalculating || loading}
-            className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors"
-          >
-            {recalculating ? 'Calculating...' : 'Recalculate'}
-          </button>
-        </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>
 
-      {/* Message */}
-      {message && (
-        <div className="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
-          <p className="text-sm text-blue-800">{message}</p>
-        </div>
-      )}
-
       {/* Loading State */}
       {loading && (
-        <div className="bg-white rounded-lg shadow p-12">
-          <div className="flex flex-col items-center justify-center">
-            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
-            <p className="text-gray-600">Analyzing your notes...</p>
-          </div>
+        <div className="flex-1 flex items-center justify-center">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="text-center"
+          >
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-500 mx-auto mb-4"></div>
+            <p className="text-concrete">Analyzing your notes...</p>
+          </motion.div>
         </div>
       )}
 
-      {/* Empty State */}
-      {!loading && clusters.length === 0 && (
-        <div className="bg-white rounded-lg shadow p-12">
-          <div className="flex flex-col items-center justify-center text-center">
-            <svg className="w-24 h-24 text-gray-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-            </svg>
-            <h3 className="text-xl font-semibold text-gray-900 mb-2">
-              Not enough notes to analyze
+      {/* Empty State - only if truly no notes */}
+      {!loading && clusters.length === 0 && !isCalculating && (
+        <div className="flex-1 flex items-center justify-center">
+          <div className="text-center max-w-md">
+            <div className="w-24 h-24 rounded-full bg-concrete/10 flex items-center justify-center mx-auto mb-6">
+              <Sparkles size={40} className="text-concrete/40" />
+            </div>
+            <h3 className="text-xl font-serif font-medium text-ink dark:text-dark-ink mb-2">
+              Discover your knowledge clusters
             </h3>
-            <p className="text-gray-600 mb-6">
-              Create at least 10 notes to start discovering clusters and connections
+            <p className="text-concrete mb-6">
+              Click "Re-sync Network" to analyze your notes and find hidden connections
             </p>
-            <button
-              onClick={() => router.push('/home')}
-              className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-            >
-              Create Notes
-            </button>
           </div>
         </div>
       )}
 
       {/* Main Content */}
       {!loading && clusters.length > 0 && (
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Visualization */}
-          <div className="lg:col-span-2">
-            <div className="bg-white rounded-lg shadow p-4">
-              <h2 className="text-lg font-semibold mb-4">Cluster Visualization</h2>
-              <ClusterVisualization
-                clusters={clusters}
-                bridgeNotes={bridgeNotes}
-                onNodeClick={handleNoteClick}
-              />
-            </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={handleNoteClick}
+            />
           </div>
 
-          {/* Dashboard */}
-          <div className="lg:col-span-1">
-            <BridgeNotesDashboard onNoteClick={(noteId) => handleNoteClick(noteId, 'note')} />
-          </div>
-        </div>
-      )}
-
-      {/* Cluster List */}
-      {!loading && clusters.length > 0 && (
-        <div className="mt-8">
-          <h2 className="text-lg font-semibold mb-4">All Clusters</h2>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-            {clusters.map((cluster) => (
-              <div
-                key={cluster.clusterId}
-                className="bg-white rounded-lg shadow p-4 hover:shadow-md transition-shadow cursor-pointer"
-              >
-                <h3 className="font-semibold text-gray-900 mb-1">
-                  {cluster.name || `Cluster ${cluster.clusterId}`}
-                </h3>
-                <p className="text-sm text-gray-600">
-                  {cluster.noteIds.length} {cluster.noteIds.length === 1 ? 'note' : 'notes'}
-                </p>
+          {/* 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={() => handleNoteClick(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.clusterNames?.map((name, i) => {
+                          const cluster = clusters.find(c => c.name === name)
+                          return (
+                            <div key={i} className="flex items-center gap-1">
+                              <div className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: cluster?.color || '#cbd5e1' }} />
+                              <span className="text-[9px] text-concrete font-medium whitespace-nowrap">{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.clusterAId}-${s.clusterBId}`} 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-start justify-between">
+                        <div className="flex-1">
+                          <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 {s.clusterAName} & {s.clusterBName}
+                            </span>
+                          </div>
+                          <h4 className="text-base font-serif font-medium text-ink dark:text-dark-ink mb-2">{s.suggestedTitle}</h4>
+                          <p className="text-xs text-muted-ink leading-relaxed mb-4">{s.suggestedContent}</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.justification}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                  {suggestions.length === 0 && !isCalculating && (
+                    <div className="text-center py-8 text-concrete">
+                      <Lightbulb size={24} className="mx-auto mb-3 opacity-50" />
+                      <p className="text-sm">No connection suggestions yet</p>
+                      <p className="text-xs mt-1">All your clusters may already be connected!</p>
+                    </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>
       )}