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/use-file-processor.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react"
 import { toast } from "sonner"
+import { formatMessage } from "@/lib/i18n/utils"
 import {
     extractPdfText,
     extractTextFileContent,
@@ -16,11 +17,24 @@ export interface FileData {
     isExtracting: boolean
 }
 
+/** Toast texts; {name}, {limit} and {size} are filled in */
+export interface FileProcessorMessages {
+    tooLong: string
+    readFailed: string
+}
+
+const DEFAULT_MESSAGES: FileProcessorMessages = {
+    tooLong: "{name}: Content exceeds {limit}k character limit ({size}k chars)",
+    readFailed: "Failed to read file: {name}",
+}
+
 /**
  * Hook for processing file uploads, especially PDFs and text files.
  * Handles text extraction, character limit validation, and cleanup.
  */
-export function useFileProcessor() {
+export function useFileProcessor(
+    messages: FileProcessorMessages = DEFAULT_MESSAGES,
+) {
     const [files, setFiles] = useState<File[]>([])
     const [pdfData, setPdfData] = useState<Map<File, FileData>>(new Map())
 
@@ -58,9 +72,12 @@ export function useFileProcessor() {
 
                 // Check character limit
                 if (text.length > MAX_EXTRACTED_CHARS) {
-                    const limitK = MAX_EXTRACTED_CHARS / 1000
                     toast.error(
-                        `${file.name}: Content exceeds ${limitK}k character limit (${(text.length / 1000).toFixed(1)}k chars)`,
+                        formatMessage(messages.tooLong, {
+                            name: file.name,
+                            limit: MAX_EXTRACTED_CHARS / 1000,
+                            size: (text.length / 1000).toFixed(1),
+                        }),
                     )
                     setPdfData((prev) => {
                         const next = new Map(prev)
@@ -85,7 +102,9 @@ export function useFileProcessor() {
                 })
             } catch (error) {
                 console.error("Failed to extract text:", error)
-                toast.error(`Failed to read file: ${file.name}`)
+                toast.error(
+                    formatMessage(messages.readFailed, { name: file.name }),
+                )
                 setPdfData((prev) => {
                     const next = new Map(prev)
                     next.delete(file)