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.

tests/e2e/chat.spec.ts

@@ -71,38 +71,35 @@ test.describe("Crossing the mobile breakpoint", () => {
     })
 
     test("keeps the chat and its streaming answer", async ({ page }) => {
-        const chat = page.locator('[data-panel-id="chat-panel"]')
         await sendMessage(page, "Tell me a story")
         await expect(page.getByText("Once upon")).toBeVisible({
             timeout: 10000,
         })
 
+        // Phones show the canvas or the chat, one at a time
         await page.setViewportSize({ width: 600, height: 900 })
+        await page.getByRole("button", { name: "Chat", exact: true }).click()
         await expect(page.getByText("Tell me a story")).toBeVisible()
-        // Half the height on mobile
-        await expect
-            .poll(async () => (await chat.boundingBox())?.height ?? 0)
-            .toBeCloseTo(450, -1)
 
         await page.setViewportSize({ width: 1280, height: 800 })
-        // A third of the width on desktop
-        await expect
-            .poll(async () => (await chat.boundingBox())?.width ?? 0)
-            .toBeCloseTo(1280 / 3, -1)
         await expect(page.getByText("Once upon a time.")).toBeVisible({
             timeout: 10000,
         })
         await expect(page.getByText("Tell me a story")).toBeVisible()
     })
 
-    test("opens a chat collapsed on desktop", async ({ page }) => {
-        await page.locator("button:has(svg.lucide-panel-right-close)").click()
+    test("reaches a chat hidden on desktop", async ({ page }) => {
+        // The start screen has no chat panel yet
+        await page.getByTestId("draw-yourself").click()
+        await page.getByRole("button", { name: "Hide chat panel" }).click()
         await expect(getChatInput(page)).toBeHidden()
 
         await page.setViewportSize({ width: 600, height: 900 })
+        await page.getByRole("button", { name: "Chat", exact: true }).click()
         await expect(getChatInput(page)).toBeVisible()
 
         await page.setViewportSize({ width: 1280, height: 800 })
+        await page.getByTestId("show-panel").click()
         await expect(getChatInput(page)).toBeVisible()
     })
 })