feat: add slides generation tool with multiple slide types

- Add slides.tool.ts with support for title, bullets, chart, stats, table, cards, timeline, quote, comparison, equation, image, summary slide types
- Chart types: bar, horizontal-bar, line, donut, radar
- Integrate with agent executor and canvas system
- Add multilingual support (en/fr)
- Various UI improvements and bug fixes

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

memento-note/components/lab/mermaid-diagram.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import mermaid from 'mermaid'
+
+let counter = 0
+
+export function MermaidDiagram({ chart, isDark }: { chart: string; isDark?: boolean }) {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!ref.current || !chart.trim()) return
+    const id = `mermaid-slide-${++counter}`
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: isDark ? 'dark' : 'default',
+      themeVariables: isDark
+        ? { primaryColor: '#A47148', primaryTextColor: '#F9F8F6', lineColor: '#D4A373', secondaryColor: '#2A2A2A', tertiaryColor: '#1C1C1C' }
+        : { primaryColor: '#A47148', primaryTextColor: '#1C1C1C', lineColor: '#D4A373' },
+      securityLevel: 'loose',
+    })
+    mermaid.render(id, chart)
+      .then(({ svg }) => {
+        if (ref.current) ref.current.innerHTML = svg
+      })
+      .catch((err) => {
+        console.error('[MermaidDiagram] render error:', err)
+        if (ref.current) ref.current.innerHTML = `<pre style="color:rgba(255,255,255,0.4);font-size:12px">${chart}</pre>`
+      })
+  }, [chart, isDark])
+
+  return (
+    <div
+      ref={ref}
+      className="flex justify-center items-center w-full h-full overflow-hidden"
+      style={{ minHeight: 200 }}
+    />
+  )
+}