feat(ui): canvas-first redesign with a self-hosted draw.io

The canvas now fills the window and the chat floats on its right. draw.io is
served from our own origin (public/drawio, downloaded at build time and
checked against the release's SHA-256), so the app can drive the editor
directly:

- every AI change becomes a version card with a thumbnail; compare, restore
  or undo it, and Ctrl+Z on the canvas takes an AI change back in one step
- shapes the AI just changed are highlighted on the canvas
- selected shapes appear as a chip and are sent to the model
- the app's own canvas toolbar, shape library and page tabs replace
  draw.io's chrome
- new start screen, session rename and switcher, open .drawio files
- settings split into Models & keys, Appearance, Advanced and About
- phones switch between canvas and chat
- dark mode keeps the diagram on a white sheet and no longer flashes

With an external draw.io (NEXT_PUBLIC_DRAWIO_BASE_URL) the app falls back to
draw.io's own toolbar and the features above that need same origin are off.

The chat logic moved from the 1500-line chat panel into a chat engine plus
small UI components; zustand holds canvas, versions, settings and UI state.

lib/session-storage.ts

@@ -1,6 +1,7 @@
 import { type DBSchema, type IDBPDatabase, openDB } from "idb"
 import { nanoid } from "nanoid"
 import { toast } from "sonner"
+import type { DiagramVersion } from "@/stores/versions-store"
 import type { Template } from "./template-storage"
 
 // Constants
@@ -20,13 +21,18 @@ export interface ChatSession {
     xmlSnapshots: [number, string][]
     diagramXml: string
     thumbnailDataUrl?: string // Small PNG preview of the diagram
-    diagramHistory?: { svg: string; xml: string }[] // Version history of diagram edits
+    // Old version list (before AI versions existed); read once, then replaced
+    diagramHistory?: { svg: string; xml: string }[]
+    // Diagram states produced by AI changes, shown as cards in the chat
+    versions?: DiagramVersion[]
 }
 
 export interface StoredMessage {
     id: string
     role: "user" | "assistant" | "system"
     parts: Array<{ type: string; [key: string]: unknown }>
+    // e.g. the shapes selected when a user message was sent
+    metadata?: unknown
 }
 
 export interface SessionMetadata {
@@ -241,6 +247,16 @@ export async function enforceSessionLimit(): Promise<void> {
     }
 }
 
+export async function renameSession(
+    id: string,
+    title: string,
+): Promise<ChatSession | null> {
+    const session = await getSession(id)
+    if (!session) return null
+    const updated = { ...session, title, updatedAt: Date.now() }
+    return (await saveSession(updated)) ? updated : null
+}
+
 // Helper: Create a new empty session
 export function createEmptySession(): ChatSession {
     return {
@@ -300,6 +316,7 @@ export function sanitizeMessage(message: unknown): StoredMessage | null {
         id: msg.id as string,
         role: role as "user" | "assistant" | "system",
         parts,
+        ...(msg.metadata !== undefined && { metadata: msg.metadata }),
     }
 }