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

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
- draw.io's own simple UI: its toolbar, menus (auto layout, Mermaid, CSV
  import) and page tabs; the shape library starts closed
- new start screen, session rename and switcher, open .drawio files
- settings split into Models & keys, Appearance, Advanced and About
- Bedrock in the model settings also takes an API key instead of access keys
- phones switch between canvas and chat
- dark mode uses draw.io's own dark mode, with neutral greys around it

With an external draw.io (NEXT_PUBLIC_DRAWIO_BASE_URL) 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 {
@@ -214,13 +220,17 @@ export async function readSessionCount(): Promise<number | null> {
     }
 }
 
-export async function deleteOldestSession(): Promise<void> {
+// keepId: a chat being opened, which stays
+export async function deleteOldestSession(keepId?: string): Promise<void> {
     if (!isIndexedDBAvailable()) return
     try {
         const db = await getDB()
         const tx = db.transaction(STORE_NAME, "readwrite")
         const index = tx.store.index("by-updated")
-        const cursor = await index.openCursor()
+        let cursor = await index.openCursor()
+        while (cursor && cursor.value.id === keepId) {
+            cursor = await cursor.continue()
+        }
         if (cursor) {
             await cursor.delete()
         }
@@ -230,17 +240,30 @@ export async function deleteOldestSession(): Promise<void> {
     }
 }
 
-// Enforce max sessions limit
-export async function enforceSessionLimit(): Promise<void> {
+// Enforce max sessions limit. keep: the chat being opened, asked for right
+// before each deletion (it can be clicked while the count is read)
+export async function enforceSessionLimit(
+    keep?: () => string | undefined,
+): Promise<void> {
     const count = await getSessionCount()
     if (count > MAX_SESSIONS) {
         const toDelete = count - MAX_SESSIONS
         for (let i = 0; i < toDelete; i++) {
-            await deleteOldestSession()
+            await deleteOldestSession(keep?.())
         }
     }
 }
 
+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 +323,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 }),
     }
 }