UI Stabilization: Global color theme updates (#75B2D6), AI Assistant styling refactor, and navigation fixes

memento-note/components/lab/canvas-board.tsx

@@ -2,6 +2,7 @@
 
 import dynamic from 'next/dynamic'
 import { useState, useEffect, useRef, useMemo } from 'react'
+import { useRouter } from 'next/navigation'
 import { toast } from 'sonner'
 import { Download, Presentation } from 'lucide-react'
 import type { ExcalidrawElement } from '@excalidraw/excalidraw/element/types'
@@ -107,6 +108,8 @@ function PptxViewer({ data, name }: { data: PptxPayload; name: string }) {
 export function CanvasBoard({ initialData, canvasId, name }: CanvasBoardProps) {
   const [isDarkMode, setIsDarkMode] = useState(false)
   const [saveStatus, setSaveStatus] = useState<'saved' | 'saving' | 'error'>('saved')
+  const [localId, setLocalId] = useState<string | null>(canvasId || null)
+  const router = useRouter()
   const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null)
   const excalidrawAPIRef = useRef<ExcalidrawImperativeAPI | null>(null)
   const filesRef = useRef<BinaryFiles>({})
@@ -147,12 +150,22 @@ export function CanvasBoard({ initialData, canvasId, name }: CanvasBoardProps) {
     saveTimeoutRef.current = setTimeout(async () => {
       try {
         const snapshot = JSON.stringify({ elements: excalidrawElements, files: filesRef.current })
-        await fetch('/api/canvas', {
+        const res = await fetch('/api/canvas', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ id: canvasId || null, name, data: snapshot })
+          body: JSON.stringify({ id: localId || null, name, data: snapshot })
         })
-        setSaveStatus('saved')
+        const data = await res.json()
+        
+        if (data.success && data.canvas?.id) {
+          if (!localId) {
+            setLocalId(data.canvas.id)
+            router.replace(`/lab?id=${data.canvas.id}`, { scroll: false })
+          }
+          setSaveStatus('saved')
+        } else {
+          throw new Error(data.error || 'Failed to save')
+        }
       } catch (e) {
         console.error('[CanvasBoard] Save failure:', e)
         setSaveStatus('error')
@@ -164,7 +177,7 @@ export function CanvasBoard({ initialData, canvasId, name }: CanvasBoardProps) {
     return <PptxViewer data={scene.pptx} name={name} />
   }
 
-  const excalKey = canvasId ? `excal-${canvasId}` : 'excal-new'
+  const excalKey = localId ? `excal-${localId}` : 'excal-new'
 
   return (
     <div className="absolute inset-0 h-full w-full bg-slate-50 dark:bg-[#121212]" dir="ltr">