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)/home/page.tsx

@@ -1,16 +1,29 @@
+import { cookies } from 'next/headers'
 import { getAllNotes } from '@/app/actions/notes'
 import { getAISettings } from '@/app/actions/ai-settings'
 import { HomeClient } from '@/components/home-client'
+import {
+  NOTES_LAYOUT_COOKIE,
+  NOTES_VIEW_TYPE_COOKIE,
+  parseNotesLayoutMode,
+  parseNotesViewType,
+} from '@/lib/notes-view-preference'
 
 export default async function HomePage() {
-  const [allNotes, settings] = await Promise.all([
+  const [allNotes, settings, cookieStore] = await Promise.all([
     getAllNotes(),
     getAISettings(),
+    cookies(),
   ])
 
+  const initialLayoutMode = parseNotesLayoutMode(cookieStore.get(NOTES_LAYOUT_COOKIE)?.value)
+  const initialViewType = parseNotesViewType(cookieStore.get(NOTES_VIEW_TYPE_COOKIE)?.value)
+
   return (
     <HomeClient
       initialNotes={allNotes}
+      initialLayoutMode={initialLayoutMode}
+      initialViewType={initialViewType}
       initialSettings={{
         showRecentNotes: settings?.showRecentNotes !== false,
         noteHistory: settings?.noteHistory === true,

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>
       )}

memento-note/app/(main)/layout.tsx

@@ -30,7 +30,11 @@ export default async function MainLayout({
   const showAIAssistant = aiSettings?.paragraphRefactor !== false;
 
   return (
-    <ProvidersWrapper initialLanguage={initialLanguage} initialTranslations={initialTranslations}>
+    <ProvidersWrapper
+      initialLanguage={initialLanguage}
+      initialTranslations={initialTranslations}
+      initialAiProcessingConsent={aiSettings?.aiProcessingConsent === true}
+    >
       {/* No top-bar header — sidebar-only navigation (architectural-grid design) */}
       <div className="flex h-screen overflow-hidden bg-memento-desk dark:bg-background">
         <Suspense fallback={<div className="hidden w-80 shrink-0 md:block" />}>

memento-note/app/(main)/settings/appearance/appearance-settings-client.tsx

@@ -7,6 +7,11 @@ import { useLanguage } from '@/lib/i18n'
 import { toast } from 'sonner'
 import { Palette, Type, LayoutGrid, Maximize } from 'lucide-react'
 import { applyDocumentTheme, normalizeThemeId, type ThemeId } from '@/lib/apply-document-theme'
+import {
+  NOTES_LAYOUT_STORAGE_KEY,
+  parseNotesLayoutMode,
+  setNotesLayoutPreference,
+} from '@/lib/notes-view-preference'
 import { motion } from 'motion/react'
 
 const PRESET_COLORS = [
@@ -38,6 +43,11 @@ export function AppearanceSettingsClient({
   const [fontSize, setFontSize] = useState(initialFontSize || 'medium')
   const [fontFamily, setFontFamily] = useState(initialFontFamily)
   const [accentColor, setAccentColor] = useState(initialAccentColor)
+  const [notesLayout, setNotesLayout] = useState<'grid' | 'list' | 'table'>('list')
+
+  useEffect(() => {
+    setNotesLayout(parseNotesLayoutMode(localStorage.getItem(NOTES_LAYOUT_STORAGE_KEY)))
+  }, [])
 
   useEffect(() => {
     document.documentElement.style.setProperty('--color-brand-accent', accentColor)
@@ -83,6 +93,14 @@ export function AppearanceSettingsClient({
     toast.success(t('settings.settingsSaved'))
   }
 
+  const handleNotesLayoutChange = (value: string) => {
+    const layout = value === 'grid' ? 'grid' : value === 'table' ? 'table' : 'list'
+    setNotesLayout(layout)
+    setNotesLayoutPreference(layout)
+    window.dispatchEvent(new CustomEvent('memento-notes-layout-change', { detail: { layout } }))
+    toast.success(t('settings.settingsSaved'))
+  }
+
   const SelectCard = ({
     icon: Icon,
     title,
@@ -275,6 +293,19 @@ export function AppearanceSettingsClient({
             ]}
             onChange={handleFontFamilyChange}
           />
+
+          <SelectCard
+            icon={LayoutGrid}
+            title={t('settings.notesViewLabel')}
+            description={t('settings.notesViewDescription')}
+            value={notesLayout === 'grid' ? 'masonry' : notesLayout === 'table' ? 'table' : 'list'}
+            options={[
+              { value: 'masonry', label: t('settings.notesViewMasonry') },
+              { value: 'list', label: t('settings.notesViewList') },
+              { value: 'table', label: t('settings.notesViewTable') },
+            ]}
+            onChange={(v) => handleNotesLayoutChange(v === 'masonry' ? 'grid' : v === 'table' ? 'table' : 'list')}
+          />
         </div>
       </div>
     </motion.div>

memento-note/app/(main)/settings/data/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { Download, Upload, Trash2, Loader2, RefreshCw, Sparkles, Database, ShieldAlert } from 'lucide-react'
+import { Download, Upload, Trash2, Loader2, RefreshCw, Sparkles, Database, ShieldAlert, FolderArchive } from 'lucide-react'
 import { toast } from 'sonner'
 import { useLanguage } from '@/lib/i18n'
 import { useSession } from 'next-auth/react'
@@ -20,6 +20,39 @@ export default function DataSettingsPage() {
   const [isDeleting, setIsDeleting] = useState(false)
   const [isReindexing, setIsReindexing] = useState(false)
   const [isCleaningUp, setIsCleaningUp] = useState(false)
+  const [isZipExporting, setIsZipExporting] = useState(false)
+
+  const handleZipExport = async () => {
+    setIsZipExporting(true)
+    try {
+      const response = await fetch('/api/user/export')
+      if (!response.ok) {
+        let message = t('dataManagement.zipExport.failed')
+        try {
+          const body = (await response.json()) as { error?: string }
+          if (body.error) message = body.error
+        } catch {
+          /* non-JSON error body */
+        }
+        toast.error(message)
+        return
+      }
+      const blob = await response.blob()
+      const url = window.URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href = url
+      a.download = `memento-workspace-export-${new Date().toISOString().split('T')[0]}.zip`
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      window.URL.revokeObjectURL(url)
+      toast.success(t('dataManagement.zipExport.success'))
+    } catch {
+      toast.error(t('dataManagement.zipExport.failed'))
+    } finally {
+      setIsZipExporting(false)
+    }
+  }
 
   const handleExport = async () => {
     setIsExporting(true)
@@ -135,6 +168,18 @@ export default function DataSettingsPage() {
       onAction: handleExport,
       btnClass: 'bg-ink text-paper shadow-xl shadow-ink/20 hover:scale-[1.02] active:scale-95',
     },
+    {
+      icon: FolderArchive,
+      iconColor: 'text-amber-600 dark:text-amber-400',
+      iconBg: 'bg-amber-500/10 dark:bg-amber-500/20',
+      title: t('dataManagement.zipExport.title'),
+      description: t('dataManagement.zipExport.description'),
+      loading: isZipExporting,
+      loadingText: t('dataManagement.zipExporting'),
+      buttonText: t('dataManagement.zipExport.button'),
+      onAction: handleZipExport,
+      btnClass: 'bg-ink text-paper shadow-xl shadow-ink/20 hover:scale-[1.02] active:scale-95',
+    },
     {
       icon: Upload,
       iconColor: 'text-emerald-600 dark:text-emerald-400',

memento-note/app/(main)/settings/general/general-settings-client.tsx

@@ -1,13 +1,17 @@
 'use client'
 
 import { useState } from 'react'
+import Link from 'next/link'
 import { useLanguage } from '@/lib/i18n'
 import { updateAISettings } from '@/app/actions/ai-settings'
 import { toast } from 'sonner'
 import { useRouter } from 'next/navigation'
-import { Globe, Bell, Shield } from 'lucide-react'
+import { Globe, Bell, Shield, Brain, HelpCircle } from 'lucide-react'
 import { motion } from 'motion/react'
 import { openCookiePreferences } from '@/lib/consent/cookie-consent'
+import { useAiConsent } from '@/components/legal/ai-consent-provider'
+import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
 
 
 interface GeneralSettingsClientProps {
@@ -21,6 +25,7 @@ interface GeneralSettingsClientProps {
 
 export function GeneralSettingsClient({ initialSettings }: GeneralSettingsClientProps) {
   const { t, setLanguage: setContextLanguage } = useLanguage()
+  const { hasAiConsent, revokeConsent, requestAiConsent } = useAiConsent()
   const router = useRouter()
   const [language, setLanguage] = useState(initialSettings.preferredLanguage || 'auto')
   const [emailNotifications, setEmailNotifications] = useState(initialSettings.emailNotifications ?? false)
@@ -196,6 +201,82 @@ export function GeneralSettingsClient({ initialSettings }: GeneralSettingsClient
             </button>
           </div>
         </div>
+
+        <div className="bg-white/40 dark:bg-white/5 border border-border rounded-xl p-8 space-y-6 md:col-span-2">
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex items-center gap-5">
+              <div className="p-3 bg-paper dark:bg-white/10 rounded-2xl text-concrete border border-border">
+                <Brain size={18} />
+              </div>
+              <div className="space-y-1">
+                <div className="flex items-center gap-2">
+                  <h4 className="text-base font-bold text-ink">{t('consent.ai.revocationTitle')}</h4>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        className="inline-flex text-concrete hover:text-ink transition-colors"
+                        aria-label={t('consent.ai.helpAriaLabel')}
+                      >
+                        <HelpCircle size={16} />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="top" className="max-w-sm text-balance leading-relaxed">
+                      {t('consent.ai.helpTooltip')}
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+                <p className="text-[11px] text-concrete max-w-2xl">{t('consent.ai.revocationDescription')}</p>
+              </div>
+            </div>
+            <span
+              className={cn(
+                'shrink-0 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider border',
+                hasAiConsent
+                  ? 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border-emerald-500/20'
+                  : 'bg-concrete/10 text-concrete border-border'
+              )}
+            >
+              {hasAiConsent ? t('consent.ai.statusActive') : t('consent.ai.statusInactive')}
+            </span>
+          </div>
+
+          {!hasAiConsent && (
+            <div className="rounded-xl border border-border/60 bg-paper/50 dark:bg-black/20 p-5 space-y-3 text-left">
+              <p className="text-xs font-semibold text-ink">{t('consent.ai.whatItMeansTitle')}</p>
+              <p className="text-[11px] text-concrete leading-relaxed">{t('consent.ai.inactiveHint')}</p>
+              <ul className="text-[11px] text-concrete leading-relaxed list-disc pl-4 space-y-1">
+                <li>{t('consent.ai.noCommercialUse')}</li>
+                <li>{t('consent.ai.affectedFeatures')}</li>
+                <li>{t('consent.ai.dataPortabilityHint')}</li>
+              </ul>
+              <Link
+                href="/settings/data"
+                className="inline-flex text-[11px] font-semibold text-ink underline underline-offset-2 hover:opacity-80"
+              >
+                {t('consent.ai.dataPortabilityLink')} →
+              </Link>
+            </div>
+          )}
+
+          <div className="flex flex-col sm:flex-row gap-3 pt-1">
+            {hasAiConsent ? (
+              <button
+                onClick={() => revokeConsent()}
+                className="flex-1 px-5 py-3.5 bg-white dark:bg-white/10 border border-border rounded-xl text-xs font-bold uppercase tracking-[0.25em] text-ink dark:text-paper hover:scale-[1.01] active:scale-95 transition-all duration-300 shadow-sm"
+              >
+                {t('consent.ai.revokeButton')}
+              </button>
+            ) : (
+              <button
+                onClick={() => requestAiConsent()}
+                className="flex-1 px-5 py-3.5 bg-ink text-paper border border-border rounded-xl text-xs font-bold uppercase tracking-[0.25em] hover:scale-[1.01] active:scale-95 transition-all duration-300 shadow-sm"
+              >
+                {t('consent.ai.grantButton')}
+              </button>
+            )}
+          </div>
+        </div>
       </div>
     </motion.div>
   )