diff --git a/.github/workflows/electron-release.yml b/.github/workflows/electron-release.yml
index 9e8ef191..9fed5980 100644
--- a/.github/workflows/electron-release.yml
+++ b/.github/workflows/electron-release.yml
@@ -34,15 +34,7 @@ jobs:
           node-version: 24
           cache: "npm"
 
-      - name: Download draw.io static files for offline use
-        run: |
-          rm -rf public/drawio
-          git clone --depth 1 https://github.com/jgraph/drawio.git /tmp/drawio
-          mkdir -p public/drawio
-          cp -r /tmp/drawio/src/main/webapp/* public/drawio/
-          rm -rf public/drawio/WEB-INF
-          rm -rf public/drawio/META-INF
-
+      # npm run build downloads draw.io first (prebuild)
       - name: Install dependencies
         run: npm install
 
@@ -66,16 +58,7 @@ jobs:
           node-version: 24
           cache: "npm"
 
-      - name: Download draw.io static files for offline use
-        shell: bash
-        run: |
-          rm -rf public/drawio
-          git clone --depth 1 https://github.com/jgraph/drawio.git /tmp/drawio
-          mkdir -p public/drawio
-          cp -r /tmp/drawio/src/main/webapp/* public/drawio/
-          rm -rf public/drawio/WEB-INF
-          rm -rf public/drawio/META-INF
-
+      # npm run build downloads draw.io first (prebuild)
       - name: Install dependencies
         run: npm install
 
diff --git a/Dockerfile b/Dockerfile
index 037b48c1..54149c7c 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -23,8 +23,9 @@ COPY . .
 # Disable Next.js telemetry during build
 ENV NEXT_TELEMETRY_DISABLED=1
 
-# Build-time argument for self-hosted draw.io URL
-ARG NEXT_PUBLIC_DRAWIO_BASE_URL=https://embed.diagrams.net
+# Build-time argument for an external draw.io URL. Leave empty to use the
+# copy bundled into public/drawio (downloaded by `npm run build`)
+ARG NEXT_PUBLIC_DRAWIO_BASE_URL=""
 ENV NEXT_PUBLIC_DRAWIO_BASE_URL=${NEXT_PUBLIC_DRAWIO_BASE_URL}
 
 # Build-time argument to show About link and Notice icon
diff --git a/README.md b/README.md
index 5c94015a..cbf27f7e 100644
--- a/README.md
+++ b/README.md
@@ -107,7 +107,8 @@ Here are some example prompts and their generated diagrams:
 -   **Image-Based Diagram Replication**: Upload existing diagrams or images and have the AI replicate and enhance them automatically
 -   **PDF & Text File Upload**: Upload PDF documents and text files to extract content and generate diagrams from existing documents
 -   **AI Reasoning Display**: View the AI's thinking process for supported models (OpenAI o1/o3, Gemini, Claude, etc.)
--   **Diagram History**: Comprehensive version control that tracks all changes, allowing you to view and restore previous versions of your diagrams before the AI editing.
+-   **Versions and Undo**: Every AI change shows up in the chat as a version with a thumbnail. Compare it with the canvas, restore it, or undo it; Ctrl+Z on the canvas also takes back an AI change in one step. Shapes the AI just changed are highlighted.
+-   **Ask About a Selection**: Select shapes on the canvas and ask the AI to change just those.
 -   **Interactive Chat Interface**: Communicate with AI to refine your diagrams in real-time
 -   **Cloud Architecture Diagram Support**: Specialized support for generating cloud architecture diagrams (AWS, GCP, Azure)
 -   **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization
@@ -263,7 +264,7 @@ The application uses the following technologies:
 
 -   **Next.js**: For the frontend framework and routing
 -   **Vercel AI SDK** (`ai` + `@ai-sdk/*`): For streaming AI responses and multi-provider support
--   **react-drawio**: For diagram representation and manipulation
+-   **draw.io**: The editor runs from a copy bundled into `public/drawio` (downloaded by `npm run dev` / `npm run build`), so the app can drive it directly
 
 Diagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly.
 
diff --git a/app/[lang]/about/cn/page.tsx b/app/[lang]/about/cn/page.tsx
index bacd18e9..fe283122 100644
--- a/app/[lang]/about/cn/page.tsx
+++ b/app/[lang]/about/cn/page.tsx
@@ -149,8 +149,10 @@ export default function AboutCN() {
                             ：上传现有图表或图像，让AI自动复制和增强
                         </li>
                         <li>
-                            <strong>图表历史记录</strong>
-                            ：全面的版本控制，跟踪所有更改，允许您查看和恢复AI编辑前的图表版本
+                            <strong>版本与撤销</strong>
+                            ：AI
+                            的每次修改都会成为聊天里的一个版本，可以对比、恢复或撤销；在画布上按
+                            Ctrl+Z 也能撤回
                         </li>
                         <li>
                             <strong>交互式聊天界面</strong>
@@ -294,7 +296,8 @@ export default function AboutCN() {
                             ）：用于流式AI响应和多提供商支持
                         </li>
                         <li>
-                            <strong>react-drawio</strong>：用于图表表示和操作
+                            <strong>draw.io</strong>
+                            ：内置在应用里的编辑器，应用可以直接控制它
                         </li>
                     </ul>
                     <p className="text-gray-700 mt-4">
diff --git a/app/[lang]/about/ja/page.tsx b/app/[lang]/about/ja/page.tsx
index 22f53fc0..cf9d7e87 100644
--- a/app/[lang]/about/ja/page.tsx
+++ b/app/[lang]/about/ja/page.tsx
@@ -138,8 +138,10 @@ export default function AboutJA() {
                             ：既存のダイアグラムや画像をアップロードし、AIが自動的に複製・強化
                         </li>
                         <li>
-                            <strong>ダイアグラム履歴</strong>
-                            ：すべての変更を追跡する包括的なバージョン管理。AI編集前のダイアグラムの以前のバージョンを表示・復元可能
+                            <strong>バージョンと取り消し</strong>
+                            ：AI
+                            の変更はそれぞれチャット内のバージョンになり、比較・復元・取り消しができます。キャンバスで
+                            Ctrl+Z を押しても元に戻せます
                         </li>
                         <li>
                             <strong>
@@ -290,8 +292,8 @@ export default function AboutJA() {
                             ）：ストリーミングAIレスポンスとマルチプロバイダーサポート
                         </li>
                         <li>
-                            <strong>react-drawio</strong>
-                            ：ダイアグラムの表現と操作
+                            <strong>draw.io</strong>
+                            ：アプリに同梱されたエディター。アプリから直接操作できます
                         </li>
                     </ul>
                     <p className="text-gray-700 mt-4">
diff --git a/app/[lang]/about/page.tsx b/app/[lang]/about/page.tsx
index 85a46ef5..a25d8869 100644
--- a/app/[lang]/about/page.tsx
+++ b/app/[lang]/about/page.tsx
@@ -150,10 +150,10 @@ export default function About() {
                             replicate and enhance them automatically
                         </li>
                         <li>
-                            <strong>Diagram History</strong>: Comprehensive
-                            version control that tracks all changes, allowing
-                            you to view and restore previous versions of your
-                            diagrams before the AI editing
+                            <strong>Versions and Undo</strong>: Every AI change
+                            becomes a version in the chat that you can compare,
+                            restore or undo; Ctrl+Z on the canvas takes it back
+                            too
                         </li>
                         <li>
                             <strong>Interactive Chat Interface</strong>:
@@ -304,8 +304,8 @@ export default function About() {
                             and multi-provider support
                         </li>
                         <li>
-                            <strong>react-drawio</strong>: For diagram
-                            representation and manipulation
+                            <strong>draw.io</strong>: The editor, bundled with
+                            the app so it can be driven directly
                         </li>
                     </ul>
                     <p className="text-gray-700 mt-4">
diff --git a/app/[lang]/layout.tsx b/app/[lang]/layout.tsx
index 04bd4eb5..bc2fd112 100644
--- a/app/[lang]/layout.tsx
+++ b/app/[lang]/layout.tsx
@@ -1,19 +1,25 @@
 import { GoogleAnalytics } from "@next/third-parties/google"
 import type { Metadata, Viewport } from "next"
-import { JetBrains_Mono, Plus_Jakarta_Sans } from "next/font/google"
+import { Instrument_Sans, JetBrains_Mono } from "next/font/google"
 import { notFound } from "next/navigation"
+import Script from "next/script"
+import { AppToaster } from "@/components/workspace/app-toaster"
 import { DiagramProvider } from "@/contexts/diagram-context"
 import { DictionaryProvider } from "@/hooks/use-dictionary"
 import type { Locale } from "@/lib/i18n/config"
 import { i18n } from "@/lib/i18n/config"
 import { getDictionary, hasLocale } from "@/lib/i18n/dictionaries"
+import { THEME_INIT_SCRIPT } from "@/stores/settings-store"
 
 import "../globals.css"
 
-const plusJakarta = Plus_Jakarta_Sans({
-    variable: "--font-sans",
+const instrumentSans = Instrument_Sans({
+    variable: "--font-latin",
     subsets: ["latin"],
     weight: ["400", "500", "600", "700"],
+    // Chinese and Japanese text falls through to system fonts, in the
+    // order globals.css picks for the page's language
+    fallback: [],
 })
 
 const jetbrainsMono = JetBrains_Mono({
@@ -165,17 +171,22 @@ export default async function RootLayout({
     return (
         <html lang={validLang} suppressHydrationWarning>
             <head>
+                {/* Apply dark mode before the first paint (no white flash) */}
+                <Script id="theme-init" strategy="beforeInteractive">
+                    {THEME_INIT_SCRIPT}
+                </Script>
                 <script
                     type="application/ld+json"
                     dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
                 />
             </head>
             <body
-                className={`${plusJakarta.variable} ${jetbrainsMono.variable} antialiased`}
+                className={`${instrumentSans.variable} ${jetbrainsMono.variable} antialiased`}
             >
                 <DictionaryProvider dictionary={dictionary}>
                     <DiagramProvider>{children}</DiagramProvider>
                 </DictionaryProvider>
+                <AppToaster />
             </body>
             {process.env.NEXT_PUBLIC_GA_ID && (
                 <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
diff --git a/app/[lang]/page.tsx b/app/[lang]/page.tsx
index 79d0a2e8..53084f67 100644
--- a/app/[lang]/page.tsx
+++ b/app/[lang]/page.tsx
@@ -1,256 +1,11 @@
-"use client"
-import { usePathname, useRouter } from "next/navigation"
-import { Suspense, useCallback, useEffect, useRef, useState } from "react"
-import { DrawIoEmbed } from "react-drawio"
-import type { ImperativePanelHandle } from "react-resizable-panels"
-import ChatPanel from "@/components/chat-panel"
-import {
-    ResizableHandle,
-    ResizablePanel,
-    ResizablePanelGroup,
-} from "@/components/ui/resizable"
-import { useDiagram } from "@/contexts/diagram-context"
-import { type DrawioTheme, isDrawioTheme } from "@/lib/drawio-themes"
-import { i18n, type Locale } from "@/lib/i18n/config"
+import { Suspense } from "react"
+import { Workspace } from "@/components/workspace/workspace"
 
 export default function Home() {
-    const {
-        drawioRef,
-        handleDiagramExport,
-        handleDiagramAutoSave,
-        onDrawioLoad,
-        resetDrawioReady,
-    } = useDiagram()
-    const router = useRouter()
-    const pathname = usePathname()
-    // Extract current language from pathname (e.g., "/zh/about" → "zh")
-    const currentLang = (pathname.split("/")[1] || i18n.defaultLocale) as Locale
-    const [isMobile, setIsMobile] = useState(false)
-    const [isChatVisible, setIsChatVisible] = useState(true)
-    const [drawioUi, setDrawioUi] = useState<DrawioTheme>("kennedy")
-    const [darkMode, setDarkMode] = useState(false)
-    const [isLoaded, setIsLoaded] = useState(false)
-    const [isDrawioReady, setIsDrawioReady] = useState(false)
-    const [isElectron, setIsElectron] = useState(false)
-    const [drawioBaseUrl, setDrawioBaseUrl] = useState(
-        process.env.NEXT_PUBLIC_DRAWIO_BASE_URL || "https://embed.diagrams.net",
-    )
-
-    const chatPanelRef = useRef<ImperativePanelHandle>(null)
-
-    // Load preferences from localStorage after mount
-    useEffect(() => {
-        // Restore saved locale and redirect if needed
-        const savedLocale = localStorage.getItem("next-ai-draw-io-locale")
-        if (savedLocale && i18n.locales.includes(savedLocale as Locale)) {
-            const pathParts = pathname.split("/").filter(Boolean)
-            const currentLocale = pathParts[0]
-            if (currentLocale !== savedLocale) {
-                pathParts[0] = savedLocale
-                // Keep the query (e.g. ?session=) and hash
-                const { search, hash } = window.location
-                router.replace(`/${pathParts.join("/")}${search}${hash}`)
-                return // Wait for redirect
-            }
-        }
-
-        const savedUi = localStorage.getItem("drawio-theme")
-        if (isDrawioTheme(savedUi)) {
-            setDrawioUi(savedUi)
-        }
-
-        const savedDarkMode = localStorage.getItem("next-ai-draw-io-dark-mode")
-        if (savedDarkMode !== null) {
-            const isDark = savedDarkMode === "true"
-            setDarkMode(isDark)
-            document.documentElement.classList.toggle("dark", isDark)
-        } else {
-            const prefersDark = window.matchMedia(
-                "(prefers-color-scheme: dark)",
-            ).matches
-            setDarkMode(prefersDark)
-            document.documentElement.classList.toggle("dark", prefersDark)
-        }
-
-        // Detect Electron and use bundled draw.io files for offline use
-        // Note: react-drawio uses `new URL(baseUrl)` so we need absolute URL
-        // Include /index.html because Next.js doesn't auto-serve index.html for directories
-        const electronDetected =
-            !process.env.NEXT_PUBLIC_DRAWIO_BASE_URL &&
-            !!(window as unknown as { electronAPI?: unknown }).electronAPI
-        if (electronDetected) {
-            setIsElectron(true)
-            setDrawioBaseUrl(`${window.location.origin}/drawio/index.html`)
-        }
-
-        setIsLoaded(true)
-    }, [pathname, router])
-
-    const handleDrawioLoad = useCallback(() => {
-        setIsDrawioReady(true)
-        onDrawioLoad()
-    }, [onDrawioLoad])
-
-    const handleDarkModeChange = () => {
-        const newValue = !darkMode
-        setDarkMode(newValue)
-        localStorage.setItem("next-ai-draw-io-dark-mode", String(newValue))
-        document.documentElement.classList.toggle("dark", newValue)
-        setIsDrawioReady(false)
-        resetDrawioReady()
-    }
-
-    const handleDrawioUiChange = (theme: DrawioTheme) => {
-        localStorage.setItem("drawio-theme", theme)
-        setDrawioUi(theme)
-        setIsDrawioReady(false)
-        resetDrawioReady()
-    }
-
-    // Check mobile. No panel is remounted when crossing the breakpoint, so
-    // the draw.io ready state and the chat's turn stay as they are.
-    useEffect(() => {
-        const checkMobile = () => {
-            setIsMobile(window.innerWidth < 768)
-        }
-
-        checkMobile()
-        window.addEventListener("resize", checkMobile)
-        return () => window.removeEventListener("resize", checkMobile)
-    }, [])
-
-    // Give the chat panel the size of this side of the breakpoint. It is
-    // open on both sides: the mobile panel cannot be collapsed, and one
-    // collapsed on desktop comes back open
-    useEffect(() => {
-        chatPanelRef.current?.resize(isMobile ? 50 : 33)
-        setIsChatVisible(true)
-    }, [isMobile])
-
-    const toggleChatPanel = () => {
-        const panel = chatPanelRef.current
-        if (panel) {
-            if (panel.isCollapsed()) {
-                panel.expand()
-                setIsChatVisible(true)
-            } else {
-                panel.collapse()
-                setIsChatVisible(false)
-            }
-        }
-    }
-
-    // Keyboard shortcut for toggling chat panel
-    useEffect(() => {
-        const handleKeyDown = (event: KeyboardEvent) => {
-            if ((event.ctrlKey || event.metaKey) && event.key === "b") {
-                event.preventDefault()
-                toggleChatPanel()
-            }
-        }
-
-        window.addEventListener("keydown", handleKeyDown)
-        return () => window.removeEventListener("keydown", handleKeyDown)
-    }, [])
-
+    // The workspace reads ?session= from the URL, which needs a Suspense boundary
     return (
-        <div className="h-screen bg-background relative overflow-hidden">
-            <ResizablePanelGroup
-                id="main-panel-group"
-                direction={isMobile ? "vertical" : "horizontal"}
-                className="h-full"
-            >
-                <ResizablePanel
-                    id="drawio-panel"
-                    defaultSize={isMobile ? 50 : 67}
-                    minSize={20}
-                >
-                    <div
-                        className={`h-full relative ${
-                            isMobile ? "p-1" : "p-2"
-                        }`}
-                    >
-                        <div className="h-full rounded-xl overflow-hidden shadow-soft-lg border border-border/30 relative">
-                            {isLoaded && (
-                                <div
-                                    className={`h-full w-full ${isDrawioReady ? "" : "invisible absolute inset-0"}`}
-                                >
-                                    <DrawIoEmbed
-                                        key={`${drawioUi}-${darkMode}-${currentLang}-${isElectron}`}
-                                        ref={drawioRef}
-                                        autosave
-                                        onAutoSave={handleDiagramAutoSave}
-                                        onExport={handleDiagramExport}
-                                        onLoad={handleDrawioLoad}
-                                        baseUrl={drawioBaseUrl}
-                                        urlParameters={{
-                                            ui: drawioUi,
-                                            spin: false,
-                                            libraries: false,
-                                            saveAndExit: false,
-                                            noSaveBtn: true,
-                                            noExitBtn: true,
-                                            dark:
-                                                darkMode || drawioUi === "dark",
-                                            // draw.io names Traditional Chinese "zh-tw"
-                                            lang:
-                                                currentLang === "zh-Hant"
-                                                    ? "zh-tw"
-                                                    : currentLang,
-                                            // Enable offline mode in Electron to disable external service calls
-                                            ...(isElectron && {
-                                                offline: true,
-                                            }),
-                                        }}
-                                    />
-                                </div>
-                            )}
-                            {(!isLoaded || !isDrawioReady) && (
-                                <div className="h-full w-full bg-background flex items-center justify-center">
-                                    <span className="text-muted-foreground">
-                                        Draw.io panel is loading...
-                                    </span>
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                </ResizablePanel>
-
-                <ResizableHandle withHandle />
-
-                {/* Chat Panel */}
-                <ResizablePanel
-                    id="chat-panel"
-                    ref={chatPanelRef}
-                    defaultSize={isMobile ? 50 : 33}
-                    minSize={isMobile ? 20 : 15}
-                    maxSize={isMobile ? 80 : 50}
-                    collapsible={!isMobile}
-                    collapsedSize={isMobile ? 0 : 3}
-                    onCollapse={() => setIsChatVisible(false)}
-                    onExpand={() => setIsChatVisible(true)}
-                >
-                    <div className={`h-full ${isMobile ? "p-1" : "py-2 pr-2"}`}>
-                        <Suspense
-                            fallback={
-                                <div className="h-full bg-card rounded-xl border border-border/30 flex items-center justify-center text-muted-foreground">
-                                    Loading chat...
-                                </div>
-                            }
-                        >
-                            <ChatPanel
-                                isVisible={isChatVisible}
-                                onToggleVisibility={toggleChatPanel}
-                                drawioUi={drawioUi}
-                                onDrawioUiChange={handleDrawioUiChange}
-                                darkMode={darkMode}
-                                onToggleDarkMode={handleDarkModeChange}
-                                isMobile={isMobile}
-                            />
-                        </Suspense>
-                    </div>
-                </ResizablePanel>
-            </ResizablePanelGroup>
-        </div>
+        <Suspense fallback={<div className="fixed inset-0 bg-canvas" />}>
+            <Workspace />
+        </Suspense>
     )
 }
diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
index c5ea47a2..860fd228 100644
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@@ -25,6 +25,7 @@ import { findCachedResponse } from "@/lib/cached-responses"
 import {
     dropInvalidToolCalls,
     fixToolInputJson,
+    formatSelectionContext,
     replaceHistoricalToolInputs,
     validateFileParts,
 } from "@/lib/chat-helpers"
@@ -513,6 +514,7 @@ ${userInputText}
     const isSingleSystemProvider =
         SINGLE_SYSTEM_PROVIDERS.has(resolvedProvider) || isCustomOpenAIEndpoint
 
+    const selectionContext = formatSelectionContext(body.selectedCells)
     const xmlContext = `${
         previousXml
             ? `Previous diagram XML (before user's last message):
@@ -527,7 +529,7 @@ ${previousXml}
 ${xml || ""}
 """
 
-IMPORTANT: The "Current diagram XML" is the SINGLE SOURCE OF TRUTH for what's on the canvas right now. The user can manually add, delete, or modify shapes directly in draw.io. Always count and describe elements based on the CURRENT XML, not on what you previously generated. If both previous and current XML are shown, compare them to understand what the user changed.`
+IMPORTANT: The "Current diagram XML" is the SINGLE SOURCE OF TRUTH for what's on the canvas right now. The user can manually add, delete, or modify shapes directly in draw.io. Always count and describe elements based on the CURRENT XML, not on what you previously generated. If both previous and current XML are shown, compare them to understand what the user changed.${selectionContext ? `\n\n${selectionContext}` : ""}`
 
     const systemMessages = isSingleSystemProvider
         ? [
diff --git a/app/globals.css b/app/globals.css
index f4754392..40726dfb 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -8,21 +8,8 @@
 @theme inline {
     --color-background: var(--background);
     --color-foreground: var(--foreground);
-    --font-sans: var(--font-sans);
+    --font-sans: var(--font-latin), var(--font-cjk), system-ui, sans-serif;
     --font-mono: var(--font-mono);
-    --color-sidebar-ring: var(--sidebar-ring);
-    --color-sidebar-border: var(--sidebar-border);
-    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-    --color-sidebar-accent: var(--sidebar-accent);
-    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-    --color-sidebar-primary: var(--sidebar-primary);
-    --color-sidebar-foreground: var(--sidebar-foreground);
-    --color-sidebar: var(--sidebar);
-    --color-chart-5: var(--chart-5);
-    --color-chart-4: var(--chart-4);
-    --color-chart-3: var(--chart-3);
-    --color-chart-2: var(--chart-2);
-    --color-chart-1: var(--chart-1);
     --color-ring: var(--ring);
     --color-input: var(--input);
     --color-border: var(--border);
@@ -43,161 +30,16 @@
     --radius-md: calc(var(--radius) - 2px);
     --radius-lg: var(--radius);
     --radius-xl: calc(var(--radius) + 4px);
-}
 
-:root {
-    --radius: 0.75rem;
-
-    /* Clean Light Modern Palette */
-    --background: oklch(0.985 0.002 240);
-    --foreground: oklch(0.23 0.02 260);
-
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.23 0.02 260);
-
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.23 0.02 260);
-
-    /* Dark primary - slightly lighter */
-    --primary: oklch(0.35 0.01 260);
-    --primary-foreground: oklch(0.99 0 0);
-
-    /* Warm gray secondary */
-    --secondary: oklch(0.96 0.005 260);
-    --secondary-foreground: oklch(0.35 0.02 260);
-
-    /* Light muted tones */
-    --muted: oklch(0.965 0.005 260);
-    --muted-foreground: oklch(0.5 0.02 260);
-
-    /* Soft lavender accent */
-    --accent: oklch(0.94 0.03 280);
-    --accent-foreground: oklch(0.35 0.08 270);
-
-    /* Muted rose destructive */
-    --destructive: oklch(0.45 0.12 10);
-
-    /* Subtle borders */
-    --border: oklch(0.92 0.01 260);
-    --input: oklch(0.94 0.01 260);
-    --ring: oklch(0.25 0.01 260);
-
-    /* Chart colors - harmonious palette */
-    --chart-1: oklch(0.55 0.18 265);
-    --chart-2: oklch(0.65 0.15 170);
-    --chart-3: oklch(0.7 0.18 45);
-    --chart-4: oklch(0.6 0.2 330);
-    --chart-5: oklch(0.5 0.15 200);
-
-    /* Sidebar */
-    --sidebar: oklch(0.99 0.002 260);
-    --sidebar-foreground: oklch(0.23 0.02 260);
-    --sidebar-primary: oklch(0.55 0.18 265);
-    --sidebar-primary-foreground: oklch(0.99 0 0);
-    --sidebar-accent: oklch(0.96 0.02 270);
-    --sidebar-accent-foreground: oklch(0.35 0.05 265);
-    --sidebar-border: oklch(0.93 0.01 260);
-    --sidebar-ring: oklch(0.55 0.18 265);
-}
-
-.dark {
-    --background: oklch(0.15 0.015 260);
-    --foreground: oklch(0.95 0.01 260);
-
-    --card: oklch(0.2 0.015 260);
-    --card-foreground: oklch(0.95 0.01 260);
-
-    --popover: oklch(0.2 0.015 260);
-    --popover-foreground: oklch(0.95 0.01 260);
-
-    --primary: oklch(0.7 0.16 265);
-    --primary-foreground: oklch(0.15 0.02 260);
-
-    --secondary: oklch(0.25 0.015 260);
-    --secondary-foreground: oklch(0.9 0.01 260);
-
-    --muted: oklch(0.25 0.015 260);
-    --muted-foreground: oklch(0.65 0.02 260);
-
-    --accent: oklch(0.3 0.04 280);
-    --accent-foreground: oklch(0.9 0.03 270);
-
-    --destructive: oklch(0.55 0.12 10);
-
-    --border: oklch(0.28 0.015 260);
-    --input: oklch(0.25 0.015 260);
-    --ring: oklch(0.7 0.16 265);
-
-    --chart-1: oklch(0.7 0.16 265);
-    --chart-2: oklch(0.7 0.13 170);
-    --chart-3: oklch(0.75 0.16 45);
-    --chart-4: oklch(0.7 0.18 330);
-    --chart-5: oklch(0.6 0.13 200);
-
-    --sidebar: oklch(0.18 0.015 260);
-    --sidebar-foreground: oklch(0.95 0.01 260);
-    --sidebar-primary: oklch(0.7 0.16 265);
-    --sidebar-primary-foreground: oklch(0.15 0.02 260);
-    --sidebar-accent: oklch(0.25 0.03 270);
-    --sidebar-accent-foreground: oklch(0.9 0.02 265);
-    --sidebar-border: oklch(0.28 0.015 260);
-    --sidebar-ring: oklch(0.7 0.16 265);
-}
-
-/* ============================================
-   REFINED MINIMAL DESIGN SYSTEM
-   ============================================ */
-
-:root {
-    /* Surface layers for depth */
-    --surface-0: oklch(1 0 0);
-    --surface-1: oklch(0.985 0.002 240);
-    --surface-2: oklch(0.97 0.004 240);
-    --surface-elevated: oklch(1 0 0);
-
-    /* Subtle borders */
-    --border-subtle: oklch(0.94 0.008 260);
-    --border-default: oklch(0.91 0.012 260);
-
-    /* Interactive states */
-    --interactive-hover: oklch(0.96 0.015 260);
-    --interactive-active: oklch(0.93 0.02 265);
-
-    /* Success state */
-    --success: oklch(0.65 0.18 145);
-    --success-muted: oklch(0.95 0.03 145);
-
-    /* Animation timing */
-    --duration-fast: 120ms;
-    --duration-normal: 200ms;
-    --duration-slow: 300ms;
-    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.dark {
-    --surface-0: oklch(0.15 0.015 260);
-    --surface-1: oklch(0.18 0.015 260);
-    --surface-2: oklch(0.22 0.015 260);
-    --surface-elevated: oklch(0.25 0.015 260);
-
-    --border-subtle: oklch(0.25 0.012 260);
-    --border-default: oklch(0.3 0.015 260);
-
-    --interactive-hover: oklch(0.25 0.02 265);
-    --interactive-active: oklch(0.3 0.025 270);
-
-    --success: oklch(0.7 0.16 145);
-    --success-muted: oklch(0.25 0.04 145);
-}
-
-/* Expose surface colors to Tailwind */
-@theme inline {
+    /* App-specific tokens */
+    --color-canvas: var(--canvas);
+    --color-faint: var(--faint);
+    --color-marker: var(--marker);
+    --color-marker-soft: var(--marker-soft);
+    --color-marker-ink: var(--marker-ink);
     --color-surface-0: var(--surface-0);
     --color-surface-1: var(--surface-1);
     --color-surface-2: var(--surface-2);
-    --color-surface-elevated: var(--surface-elevated);
     --color-border-subtle: var(--border-subtle);
     --color-border-default: var(--border-default);
     --color-interactive-hover: var(--interactive-hover);
@@ -206,12 +48,150 @@
     --color-success-muted: var(--success-muted);
 }
 
+/*
+ * Light: a quiet light table. Ink for primary actions, a highlighter
+ * yellow reserved for what the AI just changed.
+ */
+:root {
+    --radius: 0.75rem;
+
+    --canvas: #f4f5f7;
+    --background: #f4f5f7;
+    --foreground: #14181d;
+
+    --card: #ffffff;
+    --card-foreground: #14181d;
+    --popover: #ffffff;
+    --popover-foreground: #14181d;
+
+    --primary: #14181d;
+    --primary-foreground: #ffffff;
+    --secondary: #f1f3f5;
+    --secondary-foreground: #14181d;
+    --muted: #f1f3f5;
+    --muted-foreground: #5d6672;
+    --faint: #687180;
+    --accent: #eef0f3;
+    --accent-foreground: #14181d;
+    --destructive: #c9372c;
+
+    --border: #e4e7eb;
+    --input: #dfe3e8;
+    --ring: #14181d;
+
+    --marker: #ffd84d;
+    --marker-soft: #fff4bf;
+    --marker-ink: #6b5200;
+
+    --surface-0: #ffffff;
+    --surface-1: #f7f8fa;
+    --surface-2: #f1f3f5;
+    --border-subtle: #eceef1;
+    --border-default: #e4e7eb;
+    --interactive-hover: #f1f3f5;
+    --interactive-active: #e7eaee;
+    --success: #1f9e5a;
+    --success-muted: #e3f5ea;
+
+    --shadow-float:
+        0 1px 2px rgb(20 24 29 / 0.05), 0 10px 30px -8px rgb(20 24 29 / 0.14);
+    --shadow-pop:
+        0 1px 2px rgb(20 24 29 / 0.06), 0 18px 48px -12px rgb(20 24 29 / 0.22);
+
+    --duration-normal: 200ms;
+    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/*
+ * Han characters are drawn differently in Simplified Chinese, Traditional
+ * Chinese and Japanese: each language lists its own system fonts first.
+ */
+:root {
+    --font-cjk:
+        "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC",
+        "Microsoft YaHei", "Hiragino Sans", "Meiryo";
+}
+:root:lang(ja) {
+    --font-cjk:
+        "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP",
+        "Yu Gothic UI", "Meiryo", "PingFang SC";
+}
+:root:lang(zh-Hant) {
+    --font-cjk:
+        "PingFang TC", "Noto Sans CJK TC", "Microsoft JhengHei",
+        "Hiragino Sans", "PingFang SC";
+}
+
+/*
+ * Dark: a blueprint-blue table. Surfaces get lighter the higher they float.
+ * The diagram stays on a white sheet so it looks the way it will export;
+ * primary actions are paper-white, and amber only marks AI changes.
+ */
+.dark {
+    --canvas: #0f2440;
+    --background: #0c1a29;
+    --foreground: #e9f0f6;
+
+    --card: #16304f;
+    --card-foreground: #e9f0f6;
+    --popover: #1b3a5d;
+    --popover-foreground: #e9f0f6;
+
+    --primary: #e9f0f6;
+    --primary-foreground: #0c1a29;
+    --secondary: #1d3b5e;
+    --secondary-foreground: #e9f0f6;
+    --muted: #1d3b5e;
+    --muted-foreground: #a8bbce;
+    --faint: #8aa0b6;
+    --accent: #21426a;
+    --accent-foreground: #e9f0f6;
+    --destructive: #f07167;
+
+    --border: rgb(170 200 230 / 0.16);
+    --input: rgb(170 200 230 / 0.24);
+    --ring: #e9f0f6;
+
+    --marker: #f5b13d;
+    --marker-soft: rgb(245 177 61 / 0.16);
+    --marker-ink: #f7c46b;
+
+    --surface-0: #16304f;
+    --surface-1: #132b48;
+    --surface-2: #1d3b5e;
+    --border-subtle: rgb(170 200 230 / 0.12);
+    --border-default: rgb(170 200 230 / 0.2);
+    --interactive-hover: #21426a;
+    --interactive-active: #264a75;
+    --success: #4fd18b;
+    --success-muted: rgb(79 209 139 / 0.14);
+
+    --shadow-float:
+        0 0 0 1px rgb(170 200 230 / 0.1), 0 14px 34px -12px rgb(0 0 0 / 0.55);
+    --shadow-pop:
+        0 0 0 1px rgb(170 200 230 / 0.14), 0 22px 56px -14px rgb(0 0 0 / 0.65);
+}
+
 @layer base {
     * {
         @apply border-border outline-ring/50;
     }
+    html {
+        color-scheme: light;
+    }
+    html.dark {
+        color-scheme: dark;
+    }
     body {
         @apply bg-background text-foreground font-sans;
+        font-size: 14px;
+        line-height: 1.55;
+        -webkit-font-smoothing: antialiased;
+    }
+    ::selection {
+        background: var(--marker-soft);
+        color: inherit;
     }
 }
 
@@ -221,46 +201,66 @@
     width: 100% !important;
 }
 
-/* Custom scrollbar */
 @layer utilities {
     .scrollbar-thin {
         scrollbar-width: thin;
-        scrollbar-color: oklch(0.85 0.01 260) transparent;
+        scrollbar-color: color-mix(in oklab, var(--foreground) 18%, transparent)
+            transparent;
     }
-
     .scrollbar-thin::-webkit-scrollbar {
         width: 6px;
     }
-
     .scrollbar-thin::-webkit-scrollbar-track {
         background: transparent;
     }
-
     .scrollbar-thin::-webkit-scrollbar-thumb {
-        background-color: oklch(0.85 0.01 260);
+        background-color: color-mix(
+            in oklab,
+            var(--foreground) 18%,
+            transparent
+        );
         border-radius: 3px;
     }
-
     .scrollbar-thin::-webkit-scrollbar-thumb:hover {
-        background-color: oklch(0.75 0.01 260);
+        background-color: color-mix(
+            in oklab,
+            var(--foreground) 30%,
+            transparent
+        );
     }
 
-    /* Dark mode scrollbar */
-    .dark .scrollbar-thin {
-        scrollbar-color: oklch(0.35 0.015 260) transparent;
+    /* Diagram pictures always render as on paper, also in dark mode
+       (draw.io SVGs use light-dark() colors) */
+    .sheet-light {
+        color-scheme: light;
     }
-
-    .dark .scrollbar-thin::-webkit-scrollbar-thumb {
-        background-color: oklch(0.35 0.015 260);
+    .shadow-float {
+        box-shadow: var(--shadow-float);
     }
-
-    .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
-        background-color: oklch(0.45 0.015 260);
+    .shadow-pop {
+        box-shadow: var(--shadow-pop);
+    }
+    /* Older names kept for components that still use them */
+    .shadow-soft {
+        box-shadow: var(--shadow-float);
+    }
+    .shadow-dialog {
+        box-shadow: var(--shadow-pop);
     }
 }
 
-/* Smooth page transitions */
 @keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(6px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes messageIn {
     from {
         opacity: 0;
         transform: translateY(8px);
@@ -271,121 +271,18 @@
     }
 }
 
-@keyframes slideInRight {
+/* The first prompt moves from the middle of the canvas into the panel */
+@keyframes panelIn {
     from {
         opacity: 0;
-        transform: translateX(16px);
+        transform: translateX(12px) scale(0.985);
     }
     to {
         opacity: 1;
-        transform: translateX(0);
+        transform: translateX(0) scale(1);
     }
 }
 
-.animate-fade-in {
-    animation: fadeIn 0.3s ease-out forwards;
-}
-
-.animate-slide-in-right {
-    animation: slideInRight 0.3s ease-out forwards;
-}
-
-/* Message bubble animations */
-@keyframes messageIn {
-    from {
-        opacity: 0;
-        transform: translateY(12px) scale(0.98);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0) scale(1);
-    }
-}
-
-.animate-message-in {
-    animation: messageIn 0.25s ease-out forwards;
-}
-
-/* Subtle floating shadow for cards */
-.shadow-soft {
-    box-shadow:
-        0 1px 2px oklch(0.23 0.02 260 / 0.04),
-        0 4px 12px oklch(0.23 0.02 260 / 0.06),
-        0 8px 24px oklch(0.23 0.02 260 / 0.04);
-}
-
-.shadow-soft-lg {
-    box-shadow:
-        0 2px 4px oklch(0.23 0.02 260 / 0.04),
-        0 8px 20px oklch(0.23 0.02 260 / 0.08),
-        0 16px 40px oklch(0.23 0.02 260 / 0.06);
-}
-
-/* Gradient text utility */
-.text-gradient-primary {
-    background: linear-gradient(
-        135deg,
-        oklch(0.55 0.18 265),
-        oklch(0.6 0.2 290)
-    );
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-}
-
-/* ============================================
-   REFINED DIALOG STYLES
-   ============================================ */
-
-/* Refined dialog shadow - multi-layer soft shadow */
-.shadow-dialog {
-    box-shadow:
-        0 0 0 1px oklch(0 0 0 / 0.03),
-        0 2px 4px oklch(0 0 0 / 0.02),
-        0 12px 24px oklch(0 0 0 / 0.06),
-        0 24px 48px oklch(0 0 0 / 0.04);
-}
-
-.dark .shadow-dialog {
-    box-shadow:
-        0 0 0 1px oklch(1 0 0 / 0.05),
-        0 2px 4px oklch(0 0 0 / 0.2),
-        0 12px 24px oklch(0 0 0 / 0.3),
-        0 24px 48px oklch(0 0 0 / 0.2);
-}
-
-/* Dialog animations */
-@keyframes dialog-in {
-    from {
-        opacity: 0;
-        transform: translate(-50%, -48%) scale(0.96);
-    }
-    to {
-        opacity: 1;
-        transform: translate(-50%, -50%) scale(1);
-    }
-}
-
-@keyframes dialog-out {
-    from {
-        opacity: 1;
-        transform: translate(-50%, -50%) scale(1);
-    }
-    to {
-        opacity: 0;
-        transform: translate(-50%, -48%) scale(0.96);
-    }
-}
-
-.animate-dialog-in {
-    animation: dialog-in var(--duration-normal) var(--ease-out) forwards;
-}
-
-.animate-dialog-out {
-    animation: dialog-out 150ms var(--ease-out) forwards;
-}
-
-/* Check pop animation for validation success */
 @keyframes check-pop {
     0% {
         transform: scale(0.8);
@@ -400,14 +297,23 @@
     }
 }
 
+.animate-fade-in {
+    animation: fadeIn 0.25s var(--ease-out) forwards;
+}
+.animate-message-in {
+    animation: messageIn 0.22s var(--ease-out) forwards;
+}
+.animate-panel-in {
+    animation: panelIn 0.32s var(--ease-out) both;
+}
 .animate-check-pop {
     animation: check-pop 0.25s var(--ease-spring) forwards;
 }
 
-/* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
-    .animate-dialog-in,
-    .animate-dialog-out,
+    .animate-fade-in,
+    .animate-message-in,
+    .animate-panel-in,
     .animate-check-pop {
         animation: none;
     }
diff --git a/components/canvas/canvas-stage.tsx b/components/canvas/canvas-stage.tsx
new file mode 100644
index 00000000..b617761f
--- /dev/null
+++ b/components/canvas/canvas-stage.tsx
@@ -0,0 +1,200 @@
+import { useParams } from "next/navigation"
+import { useEffect, useRef, useState } from "react"
+import { CanvasToolbar } from "@/components/canvas/canvas-toolbar"
+import { DrawioFrame } from "@/components/canvas/drawio-frame"
+import { PageTabs } from "@/components/canvas/page-tabs"
+import { SelectionAsk } from "@/components/canvas/selection-ask"
+import { useChatEngine } from "@/components/chat/chat-engine"
+import { useDiagram } from "@/contexts/diagram-context"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { getDrawioCss, getDrawioSrc } from "@/lib/drawio/drawio-config"
+import { keepCenter, refitIfRecent } from "@/lib/drawio/editor-bridge"
+import { i18n, type Locale } from "@/lib/i18n/config"
+import { STORAGE_KEYS } from "@/lib/storage"
+import { cn } from "@/lib/utils"
+import { useCanvasStore } from "@/stores/canvas-store"
+import { useSettingsStore } from "@/stores/settings-store"
+
+/**
+ * The draw.io canvas with the app's own toolbar, page tabs and the
+ * "ask AI" button laid over it. With an external (cross-origin) draw.io the
+ * overlays are hidden and draw.io's own toolbar is used.
+ */
+export function CanvasStage({
+    className,
+    style,
+    compact = false,
+    hideOverlays = false,
+    onOpenFile,
+}: {
+    className?: string
+    style?: React.CSSProperties
+    compact?: boolean
+    /** Opens the file picker for a .drawio file */
+    onOpenFile: () => void
+    /** Hide toolbar and buttons (e.g. while the start screen covers the canvas) */
+    hideOverlays?: boolean
+}) {
+    const dict = useDictionary()
+    const params = useParams<{ lang: string }>()
+    const lang = (
+        i18n.locales.includes(params.lang as Locale)
+            ? params.lang
+            : i18n.defaultLocale
+    ) as Locale
+    const {
+        drawioRef,
+        handleDiagramAutoSave,
+        handleDiagramExport,
+        onDrawioLoad,
+        resetDrawioReady,
+        isDrawioReady,
+    } = useDiagram()
+    const engine = useChatEngine()
+    const isDark = useSettingsStore((s) => s.isDark)
+    const hasEditor = useCanvasStore((s) => s.hasEditor)
+    // The model sees the first page only, so asking about shapes elsewhere
+    // would change the wrong page
+    const onFirstPage = useCanvasStore(
+        (s) => s.pages.length === 0 || s.pages[0]?.id === s.currentPageId,
+    )
+    // Canvas width when the chat panel starts sliding in or out
+    const slideStartWidthRef = useRef(0)
+
+    const [src, setSrc] = useState<string | null>(null)
+    // null until draw.io tells us whether we can drive it directly
+    const [editorAccess, setEditorAccess] = useState<boolean | null>(null)
+    // Bumped to reload draw.io when its CSS can only change with a reload
+    const [reloadKey, setReloadKey] = useState(0)
+    const stageRef = useRef<HTMLDivElement>(null)
+    const [size, setSize] = useState({ width: 0, height: 0 })
+
+    useEffect(() => {
+        // The page is about to switch to the language picked last time
+        // (useSavedLocale): load draw.io once, in that language
+        const saved = localStorage.getItem(STORAGE_KEYS.locale)
+        if (saved && saved !== lang && i18n.locales.includes(saved as Locale)) {
+            return
+        }
+        const isElectron = !!(window as { electronAPI?: unknown }).electronAPI
+        setSrc(getDrawioSrc({ lang, isElectron }))
+    }, [lang])
+
+    // A new iframe starts over: draw.io reports load and access again
+    useEffect(() => {
+        resetDrawioReady()
+        setEditorAccess(null)
+    }, [src, reloadKey])
+
+    // Cross-origin draw.io only takes CSS when it starts, so reload it when
+    // the theme changes. Same-origin updates the CSS in place.
+    const lastDarkRef = useRef(isDark)
+    useEffect(() => {
+        if (lastDarkRef.current === isDark) return
+        lastDarkRef.current = isDark
+        if (editorAccess === false) setReloadKey((key) => key + 1)
+    }, [isDark, editorAccess])
+
+    useEffect(() => {
+        const stage = stageRef.current
+        if (!stage) return
+        // React passes no transitionstart
+        const onSlideStart = (event: TransitionEvent) => {
+            if (event.target !== stage || event.propertyName !== "right") return
+            slideStartWidthRef.current = stage.clientWidth
+        }
+        stage.addEventListener("transitionstart", onSlideStart)
+        const observer = new ResizeObserver(([entry]) => {
+            setSize({
+                width: entry.contentRect.width,
+                height: entry.contentRect.height,
+            })
+            refitIfRecent()
+        })
+        observer.observe(stage)
+        return () => {
+            observer.disconnect()
+            stage.removeEventListener("transitionstart", onSlideStart)
+        }
+    }, [])
+
+    const showOverlays = hasEditor && isDrawioReady && !hideOverlays
+    // The full toolbar is about 590 px wide; a narrower canvas (small window
+    // with the chat panel open) gets the short one
+    const compactToolbar = compact || (size.width > 0 && size.width < 640)
+
+    return (
+        <div
+            ref={stageRef}
+            className={cn("absolute overflow-hidden bg-canvas", className)}
+            style={style}
+            data-testid="canvas-stage"
+            // The chat panel slides in or out (the canvas's right edge moves):
+            // once the canvas has its final size, fit a diagram just drawn,
+            // or keep the view's middle
+            onTransitionEnd={(event) => {
+                if (event.target !== event.currentTarget) return
+                if (event.propertyName !== "right") return
+                const stage = event.currentTarget
+                // Let draw.io take the new size first
+                setTimeout(() => {
+                    if (refitIfRecent(4000)) return
+                    keepCenter(slideStartWidthRef.current, stage.clientWidth)
+                }, 60)
+            }}
+        >
+            {src && (
+                <DrawioFrame
+                    key={`${src}#${reloadKey}`}
+                    ref={drawioRef}
+                    src={src}
+                    configCss={getDrawioCss({
+                        dark: isDark,
+                        customChrome: false,
+                    })}
+                    editorCss={getDrawioCss({
+                        dark: isDark,
+                        customChrome: true,
+                    })}
+                    onLoad={onDrawioLoad}
+                    onAutoSave={handleDiagramAutoSave}
+                    onExport={handleDiagramExport}
+                    onEditorAccess={setEditorAccess}
+                />
+            )}
+
+            {/* Covers the iframe until draw.io has loaded and been styled */}
+            {(!isDrawioReady || editorAccess === null) && (
+                <div
+                    className="absolute inset-0 flex items-center justify-center bg-canvas"
+                    data-testid="canvas-loading"
+                >
+                    <div className="flex items-center gap-2.5 text-[13px] text-muted-foreground">
+                        <span className="size-3.5 animate-spin rounded-full border-2 border-muted-foreground/30 border-t-muted-foreground" />
+                        {dict.workspace.canvasLoading}
+                    </div>
+                </div>
+            )}
+
+            {showOverlays && (
+                <>
+                    <div className="pointer-events-none absolute inset-x-0 top-3 z-10 flex justify-center px-3">
+                        <CanvasToolbar
+                            compact={compactToolbar}
+                            onOpenFile={onOpenFile}
+                        />
+                    </div>
+                    {/* Full width, so the tabs' max width is the canvas's */}
+                    <div className="pointer-events-none absolute inset-x-3 bottom-3 z-10 flex">
+                        <PageTabs />
+                    </div>
+                    <SelectionAsk
+                        width={size.width}
+                        height={size.height}
+                        hidden={engine.isBusy || !onFirstPage}
+                    />
+                </>
+            )}
+        </div>
+    )
+}
diff --git a/components/canvas/canvas-toolbar.tsx b/components/canvas/canvas-toolbar.tsx
new file mode 100644
index 00000000..3a07645d
--- /dev/null
+++ b/components/canvas/canvas-toolbar.tsx
@@ -0,0 +1,405 @@
+import {
+    Check,
+    Download,
+    Ellipsis,
+    Maximize2,
+    Minus,
+    MousePointer2,
+    Paintbrush,
+    PenLine,
+    Plus,
+    Redo2,
+    Shapes,
+    Spline,
+    Type,
+    Undo2,
+} from "lucide-react"
+import { useMemo, useState } from "react"
+import { useChatEngine } from "@/components/chat/chat-engine"
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover"
+import { IconButton, ToolbarDivider } from "@/components/workspace/icon-button"
+import { useDictionary } from "@/hooks/use-dictionary"
+import {
+    fitDiagram,
+    focusCanvas,
+    hasAction,
+    keepFocusInCanvas,
+    runAction,
+    stopFreehand,
+    toggleShapesPanel,
+    viewToggles,
+} from "@/lib/drawio/editor-bridge"
+import { isMac, modKey } from "@/lib/platform"
+import { cn } from "@/lib/utils"
+import { useCanvasStore } from "@/stores/canvas-store"
+import { useUiStore } from "@/stores/ui-store"
+
+interface MenuItem {
+    action: string
+    label: string
+    shortcut?: string
+}
+
+function MenuButton({
+    children,
+    onClick,
+    shortcut,
+    checked,
+    disabled,
+}: {
+    children: React.ReactNode
+    onClick: () => void
+    shortcut?: string
+    /** On/off items: a check mark when on, and room for it when off */
+    checked?: boolean
+    disabled?: boolean
+}) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            disabled={disabled}
+            {...(checked !== undefined && {
+                role: "menuitemcheckbox",
+                "aria-checked": checked,
+            })}
+            className="flex w-full items-center justify-between gap-6 rounded-md px-2.5 py-1.5 text-left text-[13px] text-foreground hover:bg-accent disabled:pointer-events-none disabled:opacity-40"
+        >
+            <span className="flex items-center gap-2">
+                {checked !== undefined && (
+                    <Check
+                        className={cn(
+                            "size-3.5 shrink-0",
+                            !checked && "invisible",
+                        )}
+                    />
+                )}
+                {children}
+            </span>
+            {shortcut && (
+                <span className="text-xs text-muted-foreground">
+                    {shortcut}
+                </span>
+            )}
+        </button>
+    )
+}
+
+/**
+ * The canvas toolbar. Every button calls an existing draw.io action; a
+ * button whose action is missing in this draw.io build is not shown.
+ */
+export function CanvasToolbar({
+    compact = false,
+    onOpenFile,
+}: {
+    compact?: boolean
+    onOpenFile: () => void
+}) {
+    const dict = useDictionary()
+    const t = dict.workspace
+    const canUndo = useCanvasStore((s) => s.canUndo)
+    const canRedo = useCanvasStore((s) => s.canRedo)
+    const zoom = useCanvasStore((s) => s.zoom)
+    const isFreehand = useCanvasStore((s) => s.isFreehand)
+    const isFormatOpen = useCanvasStore((s) => s.isFormatOpen)
+    const isShapesOpen = useCanvasStore((s) => s.isShapesOpen)
+    const setSaveDialogOpen = useUiStore((s) => s.setSaveDialogOpen)
+    const engine = useChatEngine()
+    const [moreOpen, setMoreOpen] = useState(false)
+    const [zoomOpen, setZoomOpen] = useState(false)
+
+    // Checked once per mount; hasAction warns about missing actions
+    const available = useMemo(() => {
+        const names = [
+            "undo",
+            "redo",
+            "toggleShapes",
+            "insertText",
+            "insertEdge",
+            "insertFreehand",
+            "zoomIn",
+            "zoomOut",
+            "fitWindow",
+            "resetView",
+            "format",
+            "findReplace",
+            "editDiagram",
+            "layers",
+            "outline",
+            "grid",
+            "pageView",
+            "insertImage",
+            "insertLink",
+            "selectAll",
+            "print",
+        ]
+        return new Set(names.filter((name) => hasAction(name)))
+    }, [])
+
+    // Read when the menu opens (draw.io has no event for these)
+    const toggles = moreOpen ? viewToggles() : { grid: false, pageView: false }
+    const checkedOf = (action: string) =>
+        action === "grid"
+            ? toggles.grid
+            : action === "pageView"
+              ? toggles.pageView
+              : undefined
+    const moreItems: MenuItem[] = [
+        { action: "findReplace", label: t.findReplace, shortcut: `${modKey}F` },
+        { action: "layers", label: t.layers, shortcut: `${modKey}⇧L` },
+        { action: "outline", label: t.outline, shortcut: `${modKey}⇧O` },
+        { action: "grid", label: t.toggleGrid, shortcut: `${modKey}⇧G` },
+        { action: "pageView", label: t.togglePageView },
+        { action: "insertImage", label: t.insertImage },
+        { action: "insertLink", label: t.insertLink },
+        { action: "selectAll", label: t.selectAll, shortcut: `${modKey}A` },
+        { action: "editDiagram", label: t.editDiagram },
+        { action: "print", label: t.print, shortcut: `${modKey}P` },
+    ].filter((item) => available.has(item.action))
+
+    const tool = (action: string) => () => {
+        if (isFreehand && action !== "insertFreehand") stopFreehand()
+        runAction(action)
+    }
+
+    return (
+        <div
+            role="toolbar"
+            aria-label={t.toolbar}
+            className={cn(
+                "pointer-events-auto flex items-center gap-0.5 rounded-xl bg-card p-1 shadow-float",
+                compact && "max-w-full overflow-x-auto",
+            )}
+        >
+            {available.has("undo") && (
+                <IconButton
+                    label={t.undo}
+                    shortcut={`${modKey}Z`}
+                    onClick={tool("undo")}
+                    disabled={!canUndo}
+                    data-testid="toolbar-undo"
+                >
+                    <Undo2 />
+                </IconButton>
+            )}
+            {available.has("redo") && (
+                <IconButton
+                    label={t.redo}
+                    shortcut={isMac ? "⌘⇧Z" : "Ctrl+Y"}
+                    onClick={tool("redo")}
+                    disabled={!canRedo}
+                >
+                    <Redo2 />
+                </IconButton>
+            )}
+            <ToolbarDivider />
+            {!compact && (
+                <IconButton
+                    label={t.select}
+                    active={!isFreehand}
+                    onClick={() => {
+                        stopFreehand()
+                        focusCanvas()
+                    }}
+                >
+                    <MousePointer2 />
+                </IconButton>
+            )}
+            {available.has("toggleShapes") && (
+                <IconButton
+                    label={t.shapes}
+                    shortcut={`${modKey}⇧K`}
+                    active={isShapesOpen}
+                    onClick={() => {
+                        if (isFreehand) stopFreehand()
+                        toggleShapesPanel()
+                        focusCanvas()
+                    }}
+                    data-testid="toolbar-shapes"
+                >
+                    <Shapes />
+                </IconButton>
+            )}
+            {!compact && available.has("insertText") && (
+                <IconButton label={t.text} onClick={tool("insertText")}>
+                    <Type />
+                </IconButton>
+            )}
+            {!compact && available.has("insertEdge") && (
+                <IconButton label={t.connector} onClick={tool("insertEdge")}>
+                    <Spline />
+                </IconButton>
+            )}
+            {!compact && available.has("insertFreehand") && (
+                <IconButton
+                    label={t.freehand}
+                    shortcut="X"
+                    active={isFreehand}
+                    onClick={tool("insertFreehand")}
+                >
+                    <PenLine />
+                </IconButton>
+            )}
+            <ToolbarDivider />
+            {!compact && available.has("zoomOut") && (
+                <IconButton
+                    label={t.zoomOut}
+                    shortcut={`${modKey}−`}
+                    onClick={tool("zoomOut")}
+                >
+                    <Minus />
+                </IconButton>
+            )}
+            <Popover open={zoomOpen} onOpenChange={setZoomOpen}>
+                <PopoverTrigger asChild>
+                    <button
+                        type="button"
+                        aria-label={t.zoomMenu}
+                        className="h-8 min-w-12 rounded-lg px-1.5 text-xs tabular-nums text-muted-foreground hover:bg-accent hover:text-foreground"
+                    >
+                        {zoom}%
+                    </button>
+                </PopoverTrigger>
+                <PopoverContent
+                    className="w-44 p-1"
+                    align="center"
+                    onCloseAutoFocus={keepFocusInCanvas}
+                >
+                    {available.has("fitWindow") && (
+                        <MenuButton
+                            shortcut={`${modKey}⇧H`}
+                            onClick={() => {
+                                runAction("fitWindow")
+                                setZoomOpen(false)
+                            }}
+                        >
+                            {t.fitWindow}
+                        </MenuButton>
+                    )}
+                    {available.has("resetView") && (
+                        <MenuButton
+                            shortcut="Home"
+                            onClick={() => {
+                                runAction("resetView")
+                                setZoomOpen(false)
+                            }}
+                        >
+                            {t.zoomReset}
+                        </MenuButton>
+                    )}
+                    {compact && available.has("zoomIn") && (
+                        <MenuButton onClick={() => runAction("zoomIn")}>
+                            {t.zoomIn}
+                        </MenuButton>
+                    )}
+                    {compact && available.has("zoomOut") && (
+                        <MenuButton onClick={() => runAction("zoomOut")}>
+                            {t.zoomOut}
+                        </MenuButton>
+                    )}
+                </PopoverContent>
+            </Popover>
+            {!compact && available.has("zoomIn") && (
+                <IconButton
+                    label={t.zoomIn}
+                    shortcut={`${modKey}+`}
+                    onClick={tool("zoomIn")}
+                >
+                    <Plus />
+                </IconButton>
+            )}
+            {!compact && (
+                <IconButton
+                    label={t.fitWindow}
+                    onClick={() => {
+                        fitDiagram()
+                        focusCanvas()
+                    }}
+                >
+                    <Maximize2 />
+                </IconButton>
+            )}
+            <ToolbarDivider />
+            {available.has("format") && (
+                <IconButton
+                    label={t.style}
+                    shortcut={`${modKey}⇧P`}
+                    active={isFormatOpen}
+                    onClick={tool("format")}
+                >
+                    <Paintbrush />
+                </IconButton>
+            )}
+            <Popover open={moreOpen} onOpenChange={setMoreOpen}>
+                <PopoverTrigger asChild>
+                    <IconButton label={t.more} data-testid="toolbar-more">
+                        <Ellipsis />
+                    </IconButton>
+                </PopoverTrigger>
+                <PopoverContent
+                    className="w-60 p-1"
+                    align="end"
+                    onCloseAutoFocus={keepFocusInCanvas}
+                >
+                    <MenuButton
+                        disabled={engine.isBusy}
+                        onClick={() => {
+                            setMoreOpen(false)
+                            onOpenFile()
+                        }}
+                    >
+                        {t.openFile}
+                    </MenuButton>
+                    {compact && available.has("insertText") && (
+                        <MenuButton
+                            onClick={() => {
+                                setMoreOpen(false)
+                                runAction("insertText")
+                            }}
+                        >
+                            {t.text}
+                        </MenuButton>
+                    )}
+                    {compact && available.has("insertFreehand") && (
+                        <MenuButton
+                            onClick={() => {
+                                setMoreOpen(false)
+                                runAction("insertFreehand")
+                            }}
+                        >
+                            {t.freehand}
+                        </MenuButton>
+                    )}
+                    <div className="my-1 h-px bg-border" />
+                    {moreItems.map((item) => (
+                        <MenuButton
+                            key={item.action}
+                            checked={checkedOf(item.action)}
+                            shortcut={compact ? undefined : item.shortcut}
+                            onClick={() => {
+                                setMoreOpen(false)
+                                runAction(item.action)
+                            }}
+                        >
+                            {item.label}
+                        </MenuButton>
+                    ))}
+                </PopoverContent>
+            </Popover>
+            <button
+                type="button"
+                onClick={() => setSaveDialogOpen(true)}
+                className="ml-1 inline-flex h-8 shrink-0 items-center gap-1.5 rounded-lg bg-primary px-3 text-[13px] font-medium text-primary-foreground transition-opacity hover:opacity-90"
+                data-testid="toolbar-export"
+            >
+                <Download className="size-4" />
+                {!compact && t.export}
+            </button>
+        </div>
+    )
+}
diff --git a/components/canvas/drawio-frame.tsx b/components/canvas/drawio-frame.tsx
new file mode 100644
index 00000000..51efe968
--- /dev/null
+++ b/components/canvas/drawio-frame.tsx
@@ -0,0 +1,233 @@
+"use client"
+
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react"
+import {
+    DRAWIO_CONFIG,
+    EMPTY_DRAWIO_DOCUMENT,
+} from "@/lib/drawio/drawio-config"
+import {
+    attachEditor,
+    detachEditor,
+    watchForEditorUi,
+} from "@/lib/drawio/editor-bridge"
+
+export interface DrawioExportEvent {
+    event: "export"
+    format: string
+    data: string
+    xml: string
+    message: { message?: string; [key: string]: unknown }
+}
+
+export interface DrawioFrameHandle {
+    load: (data: { xml: string }) => void
+    exportDiagram: (data: {
+        format: string
+        message?: string
+        [key: string]: unknown
+    }) => void
+}
+
+interface DrawioFrameProps {
+    src: string
+    /** CSS sent with the configure message (works cross-origin too) */
+    configCss: string
+    /** CSS injected once the editor is reachable directly (same origin) */
+    editorCss: string
+    onLoad?: () => void
+    onAutoSave?: (data: { xml?: string }) => void
+    onExport?: (data: DrawioExportEvent) => void
+    /** Called once we know whether the editor can be driven directly */
+    onEditorAccess?: (hasEditor: boolean) => void
+}
+
+const STYLE_ID = "next-ai-drawio-theme"
+
+/**
+ * The draw.io editor in an iframe, speaking draw.io's postMessage embed
+ * protocol (same messages react-drawio used). When the iframe is same-origin
+ * it also hands the editor object to editor-bridge for direct control.
+ */
+export const DrawioFrame = forwardRef<DrawioFrameHandle, DrawioFrameProps>(
+    function DrawioFrame(
+        {
+            src,
+            configCss,
+            editorCss,
+            onLoad,
+            onAutoSave,
+            onExport,
+            onEditorAccess,
+        },
+        ref,
+    ) {
+        const iframeRef = useRef<HTMLIFrameElement>(null)
+        const editorUiRef = useRef<any>(null)
+        const attachedRef = useRef(false)
+        const configCssRef = useRef(configCss)
+        configCssRef.current = configCss
+        const editorCssRef = useRef(editorCss)
+        editorCssRef.current = editorCss
+        // Handlers change on every render; the message listener reads refs
+        const handlersRef = useRef({
+            onLoad,
+            onAutoSave,
+            onExport,
+            onEditorAccess,
+        })
+        handlersRef.current = { onLoad, onAutoSave, onExport, onEditorAccess }
+
+        // draw.io's origin: messages go only there, and only its messages
+        // count (the frame could be navigated to another site)
+        // (read on use: there is no window while the page renders on the server)
+        const drawioOrigin = () => new URL(src, window.location.href).origin
+
+        const send = (action: string, data: Record<string, unknown> = {}) => {
+            iframeRef.current?.contentWindow?.postMessage(
+                JSON.stringify({ action, ...data }),
+                drawioOrigin(),
+            )
+        }
+
+        useImperativeHandle(ref, () => ({
+            load: ({ xml }) => send("load", { xml, autosave: 1 }),
+            exportDiagram: (data) => send("export", data),
+        }))
+
+        // Same-origin only: keep the theme CSS current without a reload
+        const applyThemeCss = () => {
+            if (!attachedRef.current) return
+            try {
+                const doc = iframeRef.current?.contentDocument
+                if (!doc?.head) return
+                let style = doc.getElementById(STYLE_ID)
+                if (!style) {
+                    style = doc.createElement("style")
+                    style.id = STYLE_ID
+                    doc.head.appendChild(style)
+                }
+                style.textContent = editorCssRef.current
+            } catch {
+                // Cross-origin: the configure message already applied it
+            }
+        }
+
+        useEffect(() => {
+            applyThemeCss()
+        }, [editorCss])
+
+        useEffect(() => {
+            const iframe = iframeRef.current
+            if (!iframe) return
+            editorUiRef.current = null
+            attachedRef.current = false
+            let reported: boolean | null = null
+            const report = (value: boolean) => {
+                if (reported === value) return
+                reported = value
+                handlersRef.current.onEditorAccess?.(value)
+            }
+
+            // Watch for draw.io's scripts so the editor object can be caught
+            // as it starts. Stops once hooked, or when the frame turns out to
+            // be cross-origin.
+            const startedAt = Date.now()
+            const poll = setInterval(() => {
+                const frameWindow = iframe.contentWindow as any
+                if (!frameWindow) return
+                let ready = false
+                try {
+                    ready =
+                        frameWindow.location.href !== "about:blank" &&
+                        !!frameWindow.EditorUi
+                } catch {
+                    clearInterval(poll)
+                    report(false)
+                    return
+                }
+                if (ready) {
+                    clearInterval(poll)
+                    const ok = watchForEditorUi(frameWindow, (ui) => {
+                        editorUiRef.current = ui
+                    })
+                    if (!ok) report(false)
+                } else if (Date.now() - startedAt > 60_000) {
+                    clearInterval(poll)
+                }
+            }, 5)
+
+            const handleMessage = (event: MessageEvent) => {
+                if (event.source !== iframe.contentWindow) return
+                if (event.origin !== drawioOrigin()) return
+                if (typeof event.data !== "string") return
+                let data: any
+                try {
+                    data = JSON.parse(event.data)
+                } catch {
+                    return
+                }
+                const handlers = handlersRef.current
+                switch (data.event) {
+                    case "init":
+                        send("load", {
+                            xml: EMPTY_DRAWIO_DOCUMENT,
+                            autosave: 1,
+                        })
+                        break
+                    case "configure":
+                        send("configure", {
+                            config: {
+                                ...DRAWIO_CONFIG,
+                                css: configCssRef.current,
+                            },
+                        })
+                        break
+                    case "load": {
+                        const tryAttach = () => {
+                            const ui = editorUiRef.current
+                            if (!ui || !iframe.contentWindow) return false
+                            attachEditor(ui, iframe.contentWindow, iframe)
+                            attachedRef.current = true
+                            applyThemeCss()
+                            report(true)
+                            return true
+                        }
+                        // The editor object is usually caught before the
+                        // first load; give it a moment, then fall back to
+                        // draw.io's own toolbar
+                        if (!tryAttach()) {
+                            setTimeout(() => {
+                                if (!tryAttach()) report(false)
+                            }, 800)
+                        }
+                        handlers.onLoad?.()
+                        break
+                    }
+                    case "autosave":
+                        handlers.onAutoSave?.(data)
+                        break
+                    case "export":
+                        handlers.onExport?.(data)
+                        break
+                }
+            }
+
+            window.addEventListener("message", handleMessage)
+            return () => {
+                clearInterval(poll)
+                window.removeEventListener("message", handleMessage)
+                detachEditor()
+            }
+        }, [src])
+
+        return (
+            <iframe
+                ref={iframeRef}
+                src={src}
+                title="draw.io"
+                allow="clipboard-read; clipboard-write"
+                className="block h-full w-full border-0"
+            />
+        )
+    },
+)
diff --git a/components/canvas/page-tabs.tsx b/components/canvas/page-tabs.tsx
new file mode 100644
index 00000000..fa2dcdc0
--- /dev/null
+++ b/components/canvas/page-tabs.tsx
@@ -0,0 +1,117 @@
+import { ChevronDown, Plus } from "lucide-react"
+import { useState } from "react"
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover"
+import { IconButton } from "@/components/workspace/icon-button"
+import { useDictionary } from "@/hooks/use-dictionary"
+import {
+    addPage,
+    canManagePages,
+    duplicatePage,
+    keepFocusInCanvas,
+    removePage,
+    renamePage,
+    selectPage,
+} from "@/lib/drawio/editor-bridge"
+import { useCanvasStore } from "@/stores/canvas-store"
+
+/** Page switcher at the bottom of the canvas (replaces draw.io's page tabs) */
+export function PageTabs() {
+    const dict = useDictionary()
+    const t = dict.workspace
+    const pages = useCanvasStore((s) => s.pages)
+    const currentPageId = useCanvasStore((s) => s.currentPageId)
+    const [menuFor, setMenuFor] = useState<string | null>(null)
+
+    if (!canManagePages() || pages.length === 0) return null
+
+    return (
+        <div
+            className="pointer-events-auto flex max-w-[min(640px,100%)] items-center gap-0.5 overflow-x-auto rounded-xl bg-card p-1 shadow-float"
+            data-testid="page-tabs"
+        >
+            {pages.map((page) => {
+                const isCurrent = page.id === currentPageId
+                if (!isCurrent) {
+                    return (
+                        <button
+                            key={page.id}
+                            type="button"
+                            onClick={() => selectPage(page.id)}
+                            className="h-7 max-w-40 shrink-0 truncate rounded-lg px-2.5 text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground"
+                        >
+                            {page.name}
+                        </button>
+                    )
+                }
+                return (
+                    <Popover
+                        key={page.id}
+                        open={menuFor === page.id}
+                        onOpenChange={(open) =>
+                            setMenuFor(open ? page.id : null)
+                        }
+                    >
+                        <PopoverTrigger asChild>
+                            <button
+                                type="button"
+                                className="flex h-7 max-w-44 shrink-0 items-center gap-1 rounded-lg bg-accent px-2.5 text-[13px] font-medium text-foreground"
+                            >
+                                <span className="truncate">{page.name}</span>
+                                <ChevronDown className="size-3.5 text-muted-foreground" />
+                            </button>
+                        </PopoverTrigger>
+                        <PopoverContent
+                            side="top"
+                            align="start"
+                            className="w-44 p-1"
+                            onCloseAutoFocus={keepFocusInCanvas}
+                        >
+                            {[
+                                {
+                                    label: t.renamePage,
+                                    run: () => renamePage(page.id),
+                                },
+                                {
+                                    label: t.duplicatePage,
+                                    run: () => duplicatePage(page.id),
+                                },
+                                ...(pages.length > 1
+                                    ? [
+                                          {
+                                              label: t.deletePage,
+                                              run: () => removePage(page.id),
+                                          },
+                                      ]
+                                    : []),
+                            ].map((item) => (
+                                <button
+                                    key={item.label}
+                                    type="button"
+                                    onClick={() => {
+                                        setMenuFor(null)
+                                        item.run()
+                                    }}
+                                    className="w-full rounded-md px-2.5 py-1.5 text-left text-[13px] hover:bg-accent"
+                                >
+                                    {item.label}
+                                </button>
+                            ))}
+                        </PopoverContent>
+                    </Popover>
+                )
+            })}
+            <IconButton
+                label={t.addPage}
+                size="sm"
+                tooltipSide="top"
+                onClick={addPage}
+            >
+                <Plus />
+            </IconButton>
+        </div>
+    )
+}
diff --git a/components/canvas/selection-ask.tsx b/components/canvas/selection-ask.tsx
new file mode 100644
index 00000000..dc509a19
--- /dev/null
+++ b/components/canvas/selection-ask.tsx
@@ -0,0 +1,68 @@
+import { Sparkles } from "lucide-react"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { modKey } from "@/lib/platform"
+import { useCanvasStore } from "@/stores/canvas-store"
+import { useUiStore } from "@/stores/ui-store"
+
+const BUTTON_HEIGHT = 32
+const GAP = 10
+
+/**
+ * "Ask AI to change this" next to the selected shapes. Clicking it moves
+ * focus to the chat input, where the selection already shows as a chip.
+ */
+export function SelectionAsk({
+    width,
+    height,
+    hidden,
+}: {
+    /** Size of the canvas area, for keeping the button inside it */
+    width: number
+    height: number
+    hidden: boolean
+}) {
+    const dict = useDictionary()
+    const rect = useCanvasStore((s) => s.selectionRect)
+    const selection = useCanvasStore((s) => s.selection)
+    const isFreehand = useCanvasStore((s) => s.isFreehand)
+    const focusComposer = useUiStore((s) => s.focusComposer)
+
+    if (hidden || !rect || selection.length === 0 || isFreehand) return null
+    // Selection scrolled out of view
+    if (
+        rect.x + rect.width < 0 ||
+        rect.y + rect.height < 0 ||
+        rect.x > width ||
+        rect.y > height
+    ) {
+        return null
+    }
+
+    // Above the selection's top-right corner, kept inside the canvas
+    const approxWidth = 168
+    const left = Math.min(
+        Math.max(8, rect.x + rect.width - approxWidth / 2),
+        width - approxWidth - 8,
+    )
+    const above = rect.y - BUTTON_HEIGHT - GAP
+    const top =
+        above > 64
+            ? above
+            : Math.min(rect.y + rect.height + GAP, height - BUTTON_HEIGHT - 72)
+
+    return (
+        <button
+            type="button"
+            onClick={focusComposer}
+            className="pointer-events-auto absolute z-10 flex h-8 items-center gap-1.5 rounded-xl bg-card pr-2.5 pl-2 text-[13px] font-medium text-foreground shadow-pop transition-transform animate-fade-in hover:-translate-y-px"
+            style={{ left, top }}
+            data-testid="selection-ask"
+        >
+            <Sparkles className="size-4 text-marker-ink" />
+            {dict.workspace.askAi}
+            <kbd className="ml-1 font-sans text-[11px] text-muted-foreground">
+                {modKey}/
+            </kbd>
+        </button>
+    )
+}
diff --git a/components/chat-example-panel.tsx b/components/chat-example-panel.tsx
deleted file mode 100644
index 17e95a76..00000000
--- a/components/chat-example-panel.tsx
+++ /dev/null
@@ -1,227 +0,0 @@
-"use client"
-
-import {
-    Cloud,
-    FileText,
-    GitBranch,
-    Palette,
-    Terminal,
-    Zap,
-} from "lucide-react"
-import { useDictionary } from "@/hooks/use-dictionary"
-import { getAssetUrl } from "@/lib/base-path"
-
-interface ExampleCardProps {
-    icon: React.ReactNode
-    title: string
-    description: string
-    onClick: () => void
-    isNew?: boolean
-}
-
-function ExampleCard({
-    icon,
-    title,
-    description,
-    onClick,
-    isNew,
-}: ExampleCardProps) {
-    const dict = useDictionary()
-
-    return (
-        <button
-            onClick={onClick}
-            className={`group w-full text-left p-4 rounded-xl border bg-card hover:bg-accent/50 hover:border-primary/30 transition-all duration-200 hover:shadow-sm ${
-                isNew
-                    ? "border-primary/40 ring-1 ring-primary/20"
-                    : "border-border/60"
-            }`}
-        >
-            <div className="flex items-start gap-3">
-                <div
-                    className={`w-9 h-9 rounded-lg flex items-center justify-center shrink-0 transition-colors ${
-                        isNew
-                            ? "bg-primary/20 group-hover:bg-primary/25"
-                            : "bg-primary/10 group-hover:bg-primary/15"
-                    }`}
-                >
-                    {icon}
-                </div>
-                <div className="min-w-0">
-                    <div className="flex items-center gap-2">
-                        <h3 className="text-sm font-medium text-foreground group-hover:text-primary transition-colors">
-                            {title}
-                        </h3>
-                        {isNew && (
-                            <span className="px-1.5 py-0.5 text-[10px] font-semibold bg-primary text-primary-foreground rounded">
-                                {dict.common.new}
-                            </span>
-                        )}
-                    </div>
-                    <p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
-                        {description}
-                    </p>
-                </div>
-            </div>
-        </button>
-    )
-}
-
-export default function ExamplePanel({
-    setInput,
-    setFiles,
-    minimal = false,
-}: {
-    setInput: (input: string) => void
-    setFiles: (files: File[]) => void
-    minimal?: boolean
-}) {
-    const dict = useDictionary()
-    const isSelfHosted = process.env.NEXT_PUBLIC_SELFHOSTED === "true"
-
-    const handleReplicateFlowchart = async () => {
-        setInput("Replicate this flowchart.")
-
-        try {
-            const response = await fetch(getAssetUrl("/example.png"))
-            const blob = await response.blob()
-            const file = new File([blob], "example.png", { type: "image/png" })
-            setFiles([file])
-        } catch (error) {
-            console.error(dict.errors.failedToLoadExample, error)
-        }
-    }
-
-    const handleReplicateArchitecture = async () => {
-        setInput("Replicate this in aws style")
-
-        try {
-            const response = await fetch(getAssetUrl("/architecture.png"))
-            const blob = await response.blob()
-            const file = new File([blob], "architecture.png", {
-                type: "image/png",
-            })
-            setFiles([file])
-        } catch (error) {
-            console.error(dict.errors.failedToLoadExample, error)
-        }
-    }
-
-    const handlePdfExample = async () => {
-        setInput("Summarize this paper as a diagram")
-
-        try {
-            const response = await fetch(getAssetUrl("/chain-of-thought.txt"))
-            const blob = await response.blob()
-            const file = new File([blob], "chain-of-thought.txt", {
-                type: "text/plain",
-            })
-            setFiles([file])
-        } catch (error) {
-            console.error(dict.errors.failedToLoadExample, error)
-        }
-    }
-
-    return (
-        <div className={minimal ? "" : "py-6 px-2 animate-fade-in"}>
-            {!minimal && (
-                <>
-                    {/* MCP Server Notice, hidden on self-hosted deployments */}
-                    {!isSelfHosted && (
-                        <a
-                            href="https://github.com/DayuanJiang/next-ai-draw-io/tree/main/packages/mcp-server"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="block mb-4 p-3 rounded-xl bg-gradient-to-r from-purple-500/10 to-blue-500/10 border border-purple-500/20 hover:border-purple-500/40 transition-colors group"
-                        >
-                            <div className="flex items-center gap-3">
-                                <div className="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center shrink-0">
-                                    <Terminal className="w-4 h-4 text-purple-500" />
-                                </div>
-                                <div className="min-w-0">
-                                    <div className="flex items-center gap-2">
-                                        <span className="text-sm font-medium text-foreground group-hover:text-purple-500 transition-colors">
-                                            {dict.examples.mcpServer}
-                                        </span>
-                                    </div>
-                                    <p className="text-xs text-muted-foreground">
-                                        {dict.examples.mcpDescription}
-                                    </p>
-                                </div>
-                            </div>
-                        </a>
-                    )}
-
-                    {/* Welcome section */}
-                    <div className="text-center mb-6">
-                        <h2 className="text-lg font-semibold text-foreground mb-2">
-                            {dict.examples.title}
-                        </h2>
-                        <p className="text-sm text-muted-foreground max-w-xs mx-auto">
-                            {dict.examples.subtitle}
-                        </p>
-                    </div>
-                </>
-            )}
-
-            {/* Examples grid */}
-            <div className="space-y-3">
-                {!minimal && (
-                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider px-1">
-                        {dict.examples.quickExamples}
-                    </p>
-                )}
-
-                <div className="grid gap-2">
-                    <ExampleCard
-                        icon={<FileText className="w-4 h-4 text-primary" />}
-                        title={dict.examples.paperToDiagram}
-                        description={dict.examples.paperDescription}
-                        onClick={handlePdfExample}
-                        isNew
-                    />
-
-                    <ExampleCard
-                        icon={<Zap className="w-4 h-4 text-primary" />}
-                        title={dict.examples.animatedDiagram}
-                        description={dict.examples.animatedDescription}
-                        onClick={() => {
-                            setInput(
-                                "Give me a **animated connector** diagram of transformer's architecture",
-                            )
-                            setFiles([])
-                        }}
-                    />
-
-                    <ExampleCard
-                        icon={<Cloud className="w-4 h-4 text-primary" />}
-                        title={dict.examples.awsArchitecture}
-                        description={dict.examples.awsDescription}
-                        onClick={handleReplicateArchitecture}
-                    />
-
-                    <ExampleCard
-                        icon={<GitBranch className="w-4 h-4 text-primary" />}
-                        title={dict.examples.replicateFlowchart}
-                        description={dict.examples.replicateDescription}
-                        onClick={handleReplicateFlowchart}
-                    />
-
-                    <ExampleCard
-                        icon={<Palette className="w-4 h-4 text-primary" />}
-                        title={dict.examples.creativeDrawing}
-                        description={dict.examples.creativeDescription}
-                        onClick={() => {
-                            setInput("Draw a cat for me")
-                            setFiles([])
-                        }}
-                    />
-                </div>
-
-                <p className="text-[11px] text-muted-foreground/60 text-center mt-4">
-                    {dict.examples.cachedNote}
-                </p>
-            </div>
-        </div>
-    )
-}
diff --git a/components/chat-input.tsx b/components/chat-input.tsx
deleted file mode 100644
index 0f375925..00000000
--- a/components/chat-input.tsx
+++ /dev/null
@@ -1,669 +0,0 @@
-"use client"
-
-import {
-    BookmarkPlus,
-    Download,
-    History,
-    Image as ImageIcon,
-    Link,
-    Send,
-    Square,
-} from "lucide-react"
-import type React from "react"
-import {
-    type Dispatch,
-    forwardRef,
-    type SetStateAction,
-    useCallback,
-    useEffect,
-    useImperativeHandle,
-    useRef,
-    useState,
-} from "react"
-import { toast } from "sonner"
-import { ButtonWithTooltip } from "@/components/button-with-tooltip"
-import { TemplateCreateDialog } from "@/components/chat/TemplateCreateDialog"
-import { ErrorToast } from "@/components/error-toast"
-import { HistoryDialog } from "@/components/history-dialog"
-import { ModelSelector } from "@/components/model-selector"
-import { SaveDialog } from "@/components/save-dialog"
-
-import { Button } from "@/components/ui/button"
-import { Textarea } from "@/components/ui/textarea"
-import { UrlInputDialog } from "@/components/url-input-dialog"
-import { useDiagram } from "@/contexts/diagram-context"
-import { useDictionary } from "@/hooks/use-dictionary"
-import { formatMessage } from "@/lib/i18n/utils"
-import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
-import { STORAGE_KEYS } from "@/lib/storage"
-import type { FlattenedModel } from "@/lib/types/model-config"
-import { extractUrlContent, type UrlData } from "@/lib/url-utils"
-import { isRealDiagram } from "@/lib/utils"
-import { FilePreviewList } from "./file-preview-list"
-
-const MAX_IMAGE_SIZE = 2 * 1024 * 1024 // 2MB
-const MAX_FILES = 5
-// Image formats every supported model provider accepts (SVG is read as text)
-const SUPPORTED_IMAGE_TYPES = [
-    "image/png",
-    "image/jpeg",
-    "image/gif",
-    "image/webp",
-]
-
-function isValidFileType(file: File): boolean {
-    return (
-        SUPPORTED_IMAGE_TYPES.includes(file.type) ||
-        isPdfFile(file) ||
-        isTextFile(file)
-    )
-}
-
-function formatFileSize(bytes: number): string {
-    const mb = bytes / 1024 / 1024
-    if (mb < 0.01) return `${(bytes / 1024).toFixed(0)}KB`
-    return `${mb.toFixed(2)}MB`
-}
-
-function showErrorToast(message: React.ReactNode) {
-    toast.custom(
-        (t) => (
-            <ErrorToast message={message} onDismiss={() => toast.dismiss(t)} />
-        ),
-        { duration: 5000 },
-    )
-}
-
-interface ValidationResult {
-    validFiles: File[]
-    errors: string[]
-}
-
-function validateFiles(
-    newFiles: File[],
-    existingCount: number,
-    dict: any,
-): ValidationResult {
-    const errors: string[] = []
-    const validFiles: File[] = []
-
-    const availableSlots = MAX_FILES - existingCount
-
-    if (availableSlots <= 0) {
-        errors.push(formatMessage(dict.errors.maxFiles, { max: MAX_FILES }))
-        return { validFiles, errors }
-    }
-
-    for (const file of newFiles) {
-        if (validFiles.length >= availableSlots) {
-            errors.push(
-                formatMessage(dict.errors.onlyMoreAllowed, {
-                    slots: availableSlots,
-                }),
-            )
-            break
-        }
-        if (!isValidFileType(file)) {
-            errors.push(
-                formatMessage(dict.errors.unsupportedType, { name: file.name }),
-            )
-            continue
-        }
-        // Only check size for images (PDFs/text files are extracted client-side, so file size doesn't matter)
-        const isExtractedFile = isPdfFile(file) || isTextFile(file)
-        if (!isExtractedFile && file.size > MAX_IMAGE_SIZE) {
-            const maxSizeMB = MAX_IMAGE_SIZE / 1024 / 1024
-            errors.push(
-                formatMessage(dict.errors.fileExceeds, {
-                    name: file.name,
-                    size: formatFileSize(file.size),
-                    max: maxSizeMB,
-                }),
-            )
-        } else {
-            validFiles.push(file)
-        }
-    }
-
-    return { validFiles, errors }
-}
-
-function showValidationErrors(errors: string[], dict: any) {
-    if (errors.length === 0) return
-
-    if (errors.length === 1) {
-        showErrorToast(
-            <span className="text-muted-foreground">{errors[0]}</span>,
-        )
-    } else {
-        showErrorToast(
-            <div className="flex flex-col gap-1">
-                <span className="font-medium">
-                    {formatMessage(dict.errors.filesRejected, {
-                        count: errors.length,
-                    })}
-                </span>
-                <ul className="text-muted-foreground text-xs list-disc list-inside">
-                    {errors.slice(0, 3).map((err) => (
-                        <li key={err}>{err}</li>
-                    ))}
-                    {errors.length > 3 && (
-                        <li>
-                            {formatMessage(dict.errors.andMore, {
-                                count: errors.length - 3,
-                            })}
-                        </li>
-                    )}
-                </ul>
-            </div>,
-        )
-    }
-}
-
-export interface ChatInputRef {
-    focus: () => void
-}
-
-interface ChatInputProps {
-    input: string
-    status: "submitted" | "streaming" | "ready" | "error"
-    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void
-    onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void
-    onStop?: () => void
-    files?: File[]
-    onFileChange?: (files: File[]) => void
-    pdfData?: Map<
-        File,
-        { text: string; charCount: number; isExtracting: boolean }
-    >
-    urlData?: Map<string, UrlData>
-    onUrlChange?: Dispatch<SetStateAction<Map<string, UrlData>>>
-
-    sessionId?: string
-    error?: Error | null
-    // Model selector props
-    models?: FlattenedModel[]
-    selectedModelId?: string
-    onModelSelect?: (modelId: string | undefined) => void
-    onConfigureModels?: () => void
-    showUnvalidatedModels?: boolean
-    // Focus control props
-    shouldFocus?: boolean
-    onFocused?: () => void
-}
-
-export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
-    function ChatInput(
-        {
-            input,
-            status,
-            onSubmit,
-            onChange,
-            onStop,
-            files = [],
-            onFileChange = () => {},
-            pdfData = new Map(),
-            urlData,
-            onUrlChange,
-            sessionId,
-            error = null,
-            models = [],
-            selectedModelId,
-            onModelSelect = () => {},
-            onConfigureModels,
-            showUnvalidatedModels = false,
-            shouldFocus = false,
-            onFocused,
-        },
-        ref,
-    ) {
-        const dict = useDictionary()
-        const {
-            chartXML,
-            diagramHistory,
-            saveDiagramToFile,
-            showSaveDialog,
-            setShowSaveDialog,
-        } = useDiagram()
-
-        const textareaRef = useRef<HTMLTextAreaElement>(null)
-        const fileInputRef = useRef<HTMLInputElement>(null)
-        const [isDragging, setIsDragging] = useState(false)
-
-        // Expose focus method via ref
-        useImperativeHandle(ref, () => ({
-            focus: () => {
-                textareaRef.current?.focus()
-            },
-        }))
-
-        // Focus the textarea when shouldFocus becomes true
-        // Use setTimeout to ensure focus happens after drawio iframe settles
-        useEffect(() => {
-            if (shouldFocus) {
-                const timer = setTimeout(() => {
-                    textareaRef.current?.focus()
-                    onFocused?.()
-                }, 150)
-                return () => clearTimeout(timer)
-            }
-        }, [shouldFocus, onFocused])
-
-        const [showHistory, setShowHistory] = useState(false)
-        const [showUrlDialog, setShowUrlDialog] = useState(false)
-        const [showSaveAsTemplate, setShowSaveAsTemplate] = useState(false)
-        const [isExtractingUrl, setIsExtractingUrl] = useState(false)
-        const [sendShortcut, setSendShortcut] = useState("ctrl-enter")
-        // Allow retry when there's an error (even if status is still "streaming" or "submitted")
-        const isDisabled =
-            (status === "streaming" || status === "submitted") && !error
-        // Block sending until attached files and URLs have their text, otherwise
-        // their content would be silently dropped
-        const isExtractingAttachments =
-            files.some((file) => pdfData.get(file)?.isExtracting) ||
-            Array.from(urlData?.values() ?? []).some((d) => d.isExtracting)
-
-        const adjustTextareaHeight = useCallback(() => {
-            const textarea = textareaRef.current
-            if (textarea) {
-                textarea.style.height = "auto"
-                textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`
-            }
-        }, [])
-        // Handle programmatic input changes (e.g., setInput("") after form submission)
-        useEffect(() => {
-            adjustTextareaHeight()
-        }, [input, adjustTextareaHeight])
-
-        // Load send shortcut preference from localStorage and listen for changes
-        useEffect(() => {
-            const stored = localStorage.getItem(STORAGE_KEYS.sendShortcut)
-            if (stored) setSendShortcut(stored)
-
-            const handleChange = (e: CustomEvent<string>) =>
-                setSendShortcut(e.detail)
-            window.addEventListener(
-                "sendShortcutChange",
-                handleChange as EventListener,
-            )
-            return () =>
-                window.removeEventListener(
-                    "sendShortcutChange",
-                    handleChange as EventListener,
-                )
-        }, [])
-
-        const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-            onChange(e)
-            adjustTextareaHeight()
-        }
-
-        const handleKeyDown = (e: React.KeyboardEvent) => {
-            // Enter that confirms an IME candidate must not send the message
-            if (e.nativeEvent.isComposing || e.keyCode === 229) return
-
-            const shouldSend =
-                sendShortcut === "enter"
-                    ? e.key === "Enter" &&
-                      !e.shiftKey &&
-                      !e.ctrlKey &&
-                      !e.metaKey
-                    : (e.metaKey || e.ctrlKey) && e.key === "Enter"
-
-            if (shouldSend) {
-                e.preventDefault()
-                const form = e.currentTarget.closest("form")
-                if (
-                    form &&
-                    input.trim() &&
-                    !isDisabled &&
-                    !isExtractingAttachments
-                ) {
-                    form.requestSubmit()
-                }
-            }
-        }
-
-        const handlePaste = async (e: React.ClipboardEvent) => {
-            if (isDisabled) return
-
-            const items = e.clipboardData.items
-            const imageItems = Array.from(items).filter((item) =>
-                item.type.startsWith("image/"),
-            )
-
-            if (imageItems.length > 0) {
-                const imageFiles = (
-                    await Promise.all(
-                        imageItems.map(async (item, index) => {
-                            const file = item.getAsFile()
-                            if (!file) return null
-                            return new File(
-                                [file],
-                                `pasted-image-${Date.now()}-${index}.${file.type.split("/")[1]}`,
-                                { type: file.type },
-                            )
-                        }),
-                    )
-                ).filter((f): f is File => f !== null)
-
-                const { validFiles, errors } = validateFiles(
-                    imageFiles,
-                    files.length,
-                    dict,
-                )
-                showValidationErrors(errors, dict)
-                if (validFiles.length > 0) {
-                    onFileChange([...files, ...validFiles])
-                }
-            }
-        }
-
-        const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-            const newFiles = Array.from(e.target.files || [])
-            const { validFiles, errors } = validateFiles(
-                newFiles,
-                files.length,
-                dict,
-            )
-            showValidationErrors(errors, dict)
-            if (validFiles.length > 0) {
-                onFileChange([...files, ...validFiles])
-            }
-
-            if (fileInputRef.current) {
-                fileInputRef.current.value = ""
-            }
-        }
-
-        const handleRemoveFile = (fileToRemove: File) => {
-            onFileChange(files.filter((file) => file !== fileToRemove))
-            if (fileInputRef.current) {
-                fileInputRef.current.value = ""
-            }
-        }
-
-        const triggerFileInput = () => {
-            fileInputRef.current?.click()
-        }
-
-        const handleDragOver = (e: React.DragEvent<HTMLFormElement>) => {
-            e.preventDefault()
-            e.stopPropagation()
-            setIsDragging(true)
-        }
-
-        const handleDragLeave = (e: React.DragEvent<HTMLFormElement>) => {
-            e.preventDefault()
-            e.stopPropagation()
-            setIsDragging(false)
-        }
-
-        const handleDrop = (e: React.DragEvent<HTMLFormElement>) => {
-            e.preventDefault()
-            e.stopPropagation()
-            setIsDragging(false)
-
-            if (isDisabled) return
-
-            // Let validateFiles show a toast for unsupported types
-            const { validFiles, errors } = validateFiles(
-                Array.from(e.dataTransfer.files),
-                files.length,
-                dict,
-            )
-            showValidationErrors(errors, dict)
-            if (validFiles.length > 0) {
-                onFileChange([...files, ...validFiles])
-            }
-        }
-
-        const handleUrlExtract = async (url: string) => {
-            if (!onUrlChange) return
-
-            setIsExtractingUrl(true)
-
-            // Use functional updates so a removal or send made while extracting
-            // is not overwritten when the request finishes
-            try {
-                onUrlChange((prev) =>
-                    new Map(prev).set(url, {
-                        url,
-                        title: url,
-                        content: "",
-                        charCount: 0,
-                        isExtracting: true,
-                    }),
-                )
-
-                const data = await extractUrlContent(url)
-
-                // Skip if the URL was removed while extracting
-                onUrlChange((prev) =>
-                    prev.has(url) ? new Map(prev).set(url, data) : prev,
-                )
-
-                setShowUrlDialog(false)
-            } catch (error) {
-                // Remove the URL from the data map on error
-                onUrlChange((prev) => {
-                    const next = new Map(prev)
-                    next.delete(url)
-                    return next
-                })
-                showErrorToast(
-                    <span className="text-muted-foreground">
-                        {error instanceof Error
-                            ? error.message
-                            : "Failed to extract URL content"}
-                    </span>,
-                )
-            } finally {
-                setIsExtractingUrl(false)
-            }
-        }
-
-        return (
-            <form
-                id="chat-form"
-                onSubmit={onSubmit}
-                className={`w-full transition-all duration-200 ${
-                    isDragging
-                        ? "ring-2 ring-primary ring-offset-2 rounded-2xl"
-                        : ""
-                }`}
-                onDragOver={handleDragOver}
-                onDragLeave={handleDragLeave}
-                onDrop={handleDrop}
-            >
-                {/* File & URL previews */}
-                {(files.length > 0 || (urlData && urlData.size > 0)) && (
-                    <div className="mb-3">
-                        <FilePreviewList
-                            files={files}
-                            onRemoveFile={handleRemoveFile}
-                            pdfData={pdfData}
-                            urlData={urlData}
-                            onRemoveUrl={
-                                onUrlChange
-                                    ? (url) =>
-                                          onUrlChange((prev) => {
-                                              const next = new Map(prev)
-                                              next.delete(url)
-                                              return next
-                                          })
-                                    : undefined
-                            }
-                        />
-                    </div>
-                )}
-                <div className="relative rounded-2xl border border-border bg-background shadow-sm focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary/50 transition-all duration-200">
-                    <Textarea
-                        ref={textareaRef}
-                        value={input}
-                        onChange={handleChange}
-                        onKeyDown={handleKeyDown}
-                        onPaste={handlePaste}
-                        placeholder={dict.chat.placeholder}
-                        disabled={isDisabled}
-                        aria-label="Chat input"
-                        className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent px-4 py-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60 scrollbar-thin"
-                    />
-
-                    <div className="flex items-center justify-end gap-1 px-3 py-2 border-t border-border/50">
-                        <div className="flex items-center gap-1 overflow-x-hidden">
-                            <ButtonWithTooltip
-                                type="button"
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => setShowHistory(true)}
-                                disabled={
-                                    isDisabled || diagramHistory.length === 0
-                                }
-                                tooltipContent={dict.chat.diagramHistory}
-                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                            >
-                                <History className="h-4 w-4" />
-                            </ButtonWithTooltip>
-
-                            <ButtonWithTooltip
-                                type="button"
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => setShowSaveDialog(true)}
-                                disabled={
-                                    isDisabled || !isRealDiagram(chartXML)
-                                }
-                                tooltipContent={dict.chat.saveDiagram}
-                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                            >
-                                <Download className="h-4 w-4" />
-                            </ButtonWithTooltip>
-
-                            <ButtonWithTooltip
-                                type="button"
-                                variant="ghost"
-                                size="sm"
-                                onClick={triggerFileInput}
-                                disabled={isDisabled}
-                                tooltipContent={dict.chat.uploadFile}
-                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                            >
-                                <ImageIcon className="h-4 w-4" />
-                            </ButtonWithTooltip>
-
-                            {onUrlChange && (
-                                <ButtonWithTooltip
-                                    type="button"
-                                    variant="ghost"
-                                    size="sm"
-                                    onClick={() => setShowUrlDialog(true)}
-                                    disabled={isDisabled}
-                                    tooltipContent={dict.chat.ExtractURL}
-                                    className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                                >
-                                    <Link className="h-4 w-4" />
-                                </ButtonWithTooltip>
-                            )}
-
-                            <ButtonWithTooltip
-                                type="button"
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => setShowSaveAsTemplate(true)}
-                                disabled={isDisabled || !input.trim()}
-                                tooltipContent={dict.templates.saveAsTemplate}
-                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                            >
-                                <BookmarkPlus className="h-4 w-4" />
-                            </ButtonWithTooltip>
-
-                            <input
-                                type="file"
-                                ref={fileInputRef}
-                                className="hidden"
-                                onChange={handleFileChange}
-                                accept="image/png,image/jpeg,image/gif,image/webp,.svg,.pdf,application/pdf,text/*,.md,.markdown,.json,.csv,.xml,.yaml,.yml,.toml"
-                                multiple
-                                disabled={isDisabled}
-                            />
-                        </div>
-                        <ModelSelector
-                            models={models}
-                            selectedModelId={selectedModelId}
-                            onSelect={onModelSelect}
-                            onConfigure={onConfigureModels}
-                            disabled={isDisabled}
-                            showUnvalidatedModels={showUnvalidatedModels}
-                        />
-                        <div className="w-px h-5 bg-border mx-1" />
-                        {(status === "streaming" || status === "submitted") &&
-                        onStop ? (
-                            <Button
-                                type="button"
-                                onClick={onStop}
-                                size="sm"
-                                variant="destructive"
-                                className="h-8 w-8 p-0 rounded-xl shadow-sm"
-                                aria-label={dict.chat.stopGeneration}
-                            >
-                                <Square className="h-4 w-4" />
-                            </Button>
-                        ) : (
-                            <Button
-                                type="submit"
-                                disabled={
-                                    isDisabled ||
-                                    isExtractingAttachments ||
-                                    !input.trim()
-                                }
-                                size="sm"
-                                className="h-8 px-4 rounded-xl font-medium shadow-sm"
-                                aria-label={dict.chat.send}
-                            >
-                                <Send className="h-4 w-4 mr-1.5" />
-                                {dict.chat.send}
-                            </Button>
-                        )}
-                    </div>
-                </div>
-                <HistoryDialog
-                    showHistory={showHistory}
-                    onToggleHistory={setShowHistory}
-                />
-                <SaveDialog
-                    open={showSaveDialog}
-                    onOpenChange={setShowSaveDialog}
-                    onSave={(filename, format) =>
-                        saveDiagramToFile(
-                            filename,
-                            format,
-                            sessionId,
-                            dict.save.savedSuccessfully,
-                        )
-                    }
-                    // Local date as YYYY-MM-DD (toISOString would give UTC)
-                    defaultFilename={`diagram-${new Date().toLocaleDateString("sv-SE")}`}
-                />
-                {onUrlChange && (
-                    <UrlInputDialog
-                        open={showUrlDialog}
-                        onOpenChange={setShowUrlDialog}
-                        onSubmit={handleUrlExtract}
-                        isExtracting={isExtractingUrl}
-                    />
-                )}
-                <TemplateCreateDialog
-                    open={showSaveAsTemplate}
-                    onOpenChange={setShowSaveAsTemplate}
-                    onSuccess={() => {
-                        setShowSaveAsTemplate(false)
-                        // Let the template list in the lobby reload
-                        window.dispatchEvent(new Event("templatesChanged"))
-                    }}
-                    initialPrompt={input.trim()}
-                />
-            </form>
-        )
-    },
-)
diff --git a/components/chat-message-display.tsx b/components/chat-message-display.tsx
deleted file mode 100644
index c149561b..00000000
--- a/components/chat-message-display.tsx
+++ /dev/null
@@ -1,1382 +0,0 @@
-"use client"
-
-import type { UIMessage } from "ai"
-
-import {
-    BookmarkPlus,
-    Check,
-    ChevronDown,
-    ChevronUp,
-    Copy,
-    FileCode,
-    FileText,
-    Link,
-    Pencil,
-    RotateCcw,
-    ThumbsDown,
-    ThumbsUp,
-    X,
-} from "lucide-react"
-import type { MutableRefObject } from "react"
-import { useCallback, useEffect, useRef, useState } from "react"
-import ReactMarkdown from "react-markdown"
-import { toast } from "sonner"
-import {
-    Reasoning,
-    ReasoningContent,
-    ReasoningTrigger,
-} from "@/components/ai-elements/reasoning"
-import { Shimmer } from "@/components/ai-elements/shimmer"
-import { ChatLobby } from "@/components/chat/ChatLobby"
-import { TemplateCreateDialog } from "@/components/chat/TemplateCreateDialog"
-import { ToolCallCard } from "@/components/chat/ToolCallCard"
-import type { DiagramOperation, ToolPartLike } from "@/components/chat/types"
-import type { ValidationState } from "@/components/chat/ValidationCard"
-import { ValidationCard } from "@/components/chat/ValidationCard"
-import Image from "@/components/image-with-basepath"
-import { ScrollArea } from "@/components/ui/scroll-area"
-import { useDictionary } from "@/hooks/use-dictionary"
-import { getApiEndpoint } from "@/lib/base-path"
-import {
-    convertToLegalXml,
-    extractCompleteMxCells,
-    replaceNodes,
-} from "@/lib/utils"
-import { applyDiagramOperations } from "@/packages/mcp-server/src/diagram-operations.ts"
-import { BLANK_MXFILE } from "@/packages/mcp-server/src/pages.ts"
-
-// Helper to extract complete operations from streaming input
-function getCompleteOperations(
-    operations: DiagramOperation[] | undefined,
-): DiagramOperation[] {
-    if (!operations || !Array.isArray(operations)) return []
-    return operations.filter(
-        (op) =>
-            op &&
-            typeof op.operation === "string" &&
-            ["update", "add", "delete"].includes(op.operation) &&
-            typeof op.cell_id === "string" &&
-            op.cell_id.length > 0 &&
-            (op.operation === "delete" || typeof op.new_xml === "string"),
-    )
-}
-
-import { useDiagram } from "@/contexts/diagram-context"
-
-// Helper to split text content into regular text and file/URL sections (PDF, text files, or URLs)
-interface TextSection {
-    type: "text" | "file" | "url"
-    content: string
-    filename?: string
-    charCount?: number
-    fileType?: "pdf" | "text" | "url"
-}
-
-function splitTextIntoFileSections(text: string): TextSection[] {
-    const sections: TextSection[] = []
-    // Match [PDF: filename], [File: filename], or [URL: url] patterns
-    const filePattern =
-        /\[(PDF|File|URL):\s*([^\]]+)\]\n([\s\S]*?)(?=\n\n\[(PDF|File|URL):|$)/g
-    let lastIndex = 0
-    let match
-
-    while ((match = filePattern.exec(text)) !== null) {
-        // Add text before this file section
-        const beforeText = text.slice(lastIndex, match.index).trim()
-        if (beforeText) {
-            sections.push({ type: "text", content: beforeText })
-        }
-
-        // Add file/url section
-        const sectionType = match[1].toLowerCase()
-        const fileType =
-            sectionType === "pdf"
-                ? "pdf"
-                : sectionType === "url"
-                  ? "url"
-                  : "text"
-        const filename = match[2].trim()
-        const content = match[3].trim()
-        sections.push({
-            type: sectionType === "url" ? "url" : "file",
-            content: content,
-            filename,
-            charCount: content.length,
-            fileType,
-        })
-
-        lastIndex = match.index + match[0].length
-    }
-
-    // Add remaining text after last section
-    const remainingText = text.slice(lastIndex).trim()
-    if (remainingText) {
-        sections.push({ type: "text", content: remainingText })
-    }
-
-    // If no file/url sections found, return original text
-    if (sections.length === 0) {
-        sections.push({ type: "text", content: text })
-    }
-
-    return sections
-}
-
-const getMessageTextContent = (message: UIMessage): string => {
-    if (!message.parts) return ""
-    return message.parts
-        .filter((part) => part.type === "text")
-        .map((part) => (part as { text: string }).text)
-        .join("\n")
-}
-
-// Matches the [PDF: ...], [File: ...] and [URL: ...] sections appended to the user's text
-export const APPENDED_FILE_SECTIONS_PATTERN =
-    /\n\n\[(PDF|File|URL):\s*[^\]]+\]\n[\s\S]*$/
-
-// Get only the user's original text, excluding appended file content
-const getUserOriginalText = (message: UIMessage): string => {
-    const fullText = getMessageTextContent(message)
-    return fullText.replace(APPENDED_FILE_SECTIONS_PATTERN, "").trim()
-}
-
-interface SessionMetadata {
-    id: string
-    title: string
-    updatedAt: number
-    thumbnailDataUrl?: string
-}
-
-interface ChatMessageDisplayProps {
-    messages: UIMessage[]
-    // Shown on an error that a model setting can fix (bad key, unknown model)
-    onOpenModelConfig?: () => void
-    setInput: (input: string) => void
-    setFiles: (files: File[]) => void
-    processedToolCallsRef: MutableRefObject<Set<string>>
-    editDiagramOriginalXmlRef: MutableRefObject<Map<string, string>>
-    sessionId?: string
-    onRegenerate?: (messageIndex: number) => void
-    onEditMessage?: (messageIndex: number, newText: string) => void
-    status?: "streaming" | "submitted" | "idle" | "error" | "ready"
-    isRestored?: boolean
-    sessions?: SessionMetadata[]
-    onSelectSession?: (id: string) => void
-    onDeleteSession?: (id: string) => void
-    loadedMessageIdsRef?: MutableRefObject<Set<string>>
-    validationStates?: Record<string, ValidationState>
-    onImproveWithSuggestions?: (feedback: string) => void
-    onSendTemplate?: (
-        template: import("@/lib/template-storage").Template,
-    ) => void
-    currentInput?: string
-}
-
-export function ChatMessageDisplay({
-    messages,
-    onOpenModelConfig,
-    setInput,
-    setFiles,
-    processedToolCallsRef,
-    editDiagramOriginalXmlRef,
-    sessionId,
-    onRegenerate,
-    onEditMessage,
-    status = "idle",
-    isRestored = false,
-    sessions = [],
-    onSelectSession,
-    onDeleteSession,
-    loadedMessageIdsRef,
-    validationStates = {},
-    onImproveWithSuggestions,
-    onSendTemplate,
-    currentInput = "",
-}: ChatMessageDisplayProps) {
-    const dict = useDictionary()
-    // The thinking header in the page language
-    const thinkingMessage = (isStreaming: boolean, duration?: number) => {
-        if (isStreaming || duration === 0) {
-            return <Shimmer duration={1}>{dict.reasoning.thinking}</Shimmer>
-        }
-        if (duration === undefined) return <p>{dict.reasoning.thoughtBrief}</p>
-        return (
-            <p>
-                {duration === 1
-                    ? dict.reasoning.thoughtForOne
-                    : dict.reasoning.thoughtFor.replace(
-                          "{duration}",
-                          String(duration),
-                      )}
-            </p>
-        )
-    }
-    const { chartXML, chartXMLRef, loadDiagram: onDisplayChart } = useDiagram()
-    const messagesEndRef = useRef<HTMLDivElement>(null)
-    const scrollTopRef = useRef<HTMLDivElement>(null)
-    const previousXML = useRef<string>("")
-    const processedToolCalls = processedToolCallsRef
-    // Track the last processed XML per toolCallId to skip redundant processing during streaming
-    const lastProcessedXmlRef = useRef<Map<string, string>>(new Map())
-
-    // Reset refs when messages become empty (new chat or session switch)
-    // This ensures cached examples work correctly after starting a new session
-    useEffect(() => {
-        if (messages.length === 0) {
-            previousXML.current = ""
-            lastProcessedXmlRef.current.clear()
-            // Note: processedToolCalls is passed from parent, so we clear it too
-            processedToolCalls.current.clear()
-            // Scroll to top to show newest history items
-            scrollTopRef.current?.scrollIntoView({ behavior: "instant" })
-        }
-    }, [messages.length, processedToolCalls])
-    const [expandedTools, setExpandedTools] = useState<Record<string, boolean>>(
-        {},
-    )
-    const [copiedToolCallId, setCopiedToolCallId] = useState<string | null>(
-        null,
-    )
-    const [copyFailedToolCallId, setCopyFailedToolCallId] = useState<
-        string | null
-    >(null)
-    const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null)
-    const [copyFailedMessageId, setCopyFailedMessageId] = useState<
-        string | null
-    >(null)
-    const [feedback, setFeedback] = useState<Record<string, "good" | "bad">>({})
-    const [editingMessageId, setEditingMessageId] = useState<string | null>(
-        null,
-    )
-    const editTextareaRef = useRef<HTMLTextAreaElement>(null)
-    const [editText, setEditText] = useState<string>("")
-    // Track which PDF sections are expanded (key: messageId-sectionIndex)
-    const [expandedPdfSections, setExpandedPdfSections] = useState<
-        Record<string, boolean>
-    >({})
-    // Track "Save as Template" dialog
-    const [saveAsTemplateMessageId, setSaveAsTemplateMessageId] = useState<
-        string | null
-    >(null)
-
-    const setCopyState = (
-        messageId: string,
-        isToolCall: boolean,
-        isSuccess: boolean,
-    ) => {
-        if (isSuccess) {
-            if (isToolCall) {
-                setCopiedToolCallId(messageId)
-                setTimeout(() => setCopiedToolCallId(null), 2000)
-            } else {
-                setCopiedMessageId(messageId)
-                setTimeout(() => setCopiedMessageId(null), 2000)
-            }
-        } else {
-            if (isToolCall) {
-                setCopyFailedToolCallId(messageId)
-                setTimeout(() => setCopyFailedToolCallId(null), 2000)
-            } else {
-                setCopyFailedMessageId(messageId)
-                setTimeout(() => setCopyFailedMessageId(null), 2000)
-            }
-        }
-    }
-
-    const copyMessageToClipboard = async (
-        messageId: string,
-        text: string,
-        isToolCall = false,
-    ) => {
-        try {
-            await navigator.clipboard.writeText(text)
-            setCopyState(messageId, isToolCall, true)
-        } catch (_err) {
-            // Fallback for non-secure contexts (HTTP) or permission denied
-            const textarea = document.createElement("textarea")
-            textarea.value = text
-            textarea.style.position = "fixed"
-            textarea.style.left = "-9999px"
-            textarea.style.opacity = "0"
-            document.body.appendChild(textarea)
-
-            try {
-                textarea.select()
-                const success = document.execCommand("copy")
-                if (!success) {
-                    throw new Error("Copy command failed")
-                }
-                setCopyState(messageId, isToolCall, true)
-            } catch (fallbackErr) {
-                console.error("Failed to copy message:", fallbackErr)
-                toast.error(dict.chat.failedToCopyDetail)
-                setCopyState(messageId, isToolCall, false)
-            } finally {
-                document.body.removeChild(textarea)
-            }
-        }
-    }
-
-    const submitFeedback = async (messageId: string, value: "good" | "bad") => {
-        // Toggle off if already selected
-        if (feedback[messageId] === value) {
-            setFeedback((prev) => {
-                const next = { ...prev }
-                delete next[messageId]
-                return next
-            })
-            return
-        }
-
-        setFeedback((prev) => ({ ...prev, [messageId]: value }))
-
-        try {
-            await fetch(getApiEndpoint("/api/log-feedback"), {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                    messageId,
-                    feedback: value,
-                    sessionId,
-                }),
-            })
-        } catch (error) {
-            console.error("Failed to log feedback:", error)
-            toast.error(dict.errors.failedToRecordFeedback)
-            // Revert optimistic UI update
-            setFeedback((prev) => {
-                const next = { ...prev }
-                delete next[messageId]
-                return next
-            })
-        }
-    }
-
-    // Streaming preview of display_diagram: draw the complete cells written
-    // so far. The tool handler validates and loads the final diagram.
-    const handleDisplayChart = useCallback(
-        (xml: string) => {
-            const completeCells = extractCompleteMxCells(xml || "")
-            if (!completeCells) return
-            const convertedXml = convertToLegalXml(completeCells)
-            if (convertedXml === previousXML.current) return
-
-            // Skip this update while the cells written so far don't parse
-            const testDoc = new DOMParser().parseFromString(
-                `<root>${convertedXml}</root>`,
-                "text/xml",
-            )
-            if (testDoc.querySelector("parsererror")) return
-
-            try {
-                // An empty canvas gets a default mxfile to put the cells in
-                const baseXML = chartXML || BLANK_MXFILE
-                const replacedXML = replaceNodes(baseXML, convertedXml)
-                previousXML.current = convertedXml
-                onDisplayChart(replacedXML, true)
-            } catch (error) {
-                console.error("Error processing XML:", error)
-            }
-        },
-        [chartXML, onDisplayChart],
-    )
-
-    // Track previous message count to detect bulk loads vs streaming
-    const prevMessageCountRef = useRef(0)
-    const scrollThrottleRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-
-    useEffect(() => {
-        if (messagesEndRef.current && messages.length > 0) {
-            const prevCount = prevMessageCountRef.current
-            const currentCount = messages.length
-            prevMessageCountRef.current = currentCount
-
-            // Bulk load (session restore) - instant scroll, no animation
-            if (prevCount === 0 || currentCount - prevCount > 1) {
-                messagesEndRef.current.scrollIntoView({ behavior: "instant" })
-                return
-            }
-
-            // Throttle scroll during streaming to avoid layout thrashing
-            // Leading + trailing: scroll immediately, then once more after cooldown
-            if (!scrollThrottleRef.current) {
-                messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
-                scrollThrottleRef.current = setTimeout(() => {
-                    scrollThrottleRef.current = null
-                    messagesEndRef.current?.scrollIntoView({
-                        behavior: "smooth",
-                    })
-                }, 150)
-            }
-        }
-    }, [messages])
-
-    useEffect(() => {
-        if (editingMessageId && editTextareaRef.current) {
-            editTextareaRef.current.focus()
-        }
-    }, [editingMessageId])
-
-    useEffect(() => {
-        // Only process the last message for streaming performance
-        // Previous messages are already processed and won't change
-        const messagesToProcess =
-            messages.length > 0 ? [messages[messages.length - 1]] : []
-        // The diagram without streamed previews, as loaded last: the tool
-        // handler's result of an earlier edit is there before the chartXML
-        // state catches up. Undoing a failed edit's preview below changes it
-        // too, and an edit streaming right after must start from the undone
-        // diagram.
-        let baseXml = chartXMLRef.current
-
-        messagesToProcess.forEach((message) => {
-            // Messages restored from a saved session were applied before it was
-            // saved; the saved diagram is authoritative, so don't replay them
-            const isRestoredMessage =
-                loadedMessageIdsRef?.current.has(message.id) ?? false
-
-            if (message.parts) {
-                message.parts.forEach((part) => {
-                    if (part.type?.startsWith("tool-")) {
-                        const toolPart = part as ToolPartLike
-                        const { toolCallId, state, input } = toolPart
-
-                        // Auto-collapse on completion, but only if user hasn't manually toggled
-                        if (state === "output-available") {
-                            setExpandedTools((prev) => {
-                                // Only auto-collapse if not already set (user hasn't interacted)
-                                if (prev[toolCallId] === undefined) {
-                                    return { ...prev, [toolCallId]: false }
-                                }
-                                return prev
-                            })
-                        }
-
-                        if (isRestoredMessage) return
-
-                        if (
-                            part.type !== "tool-display_diagram" &&
-                            part.type !== "tool-edit_diagram"
-                        ) {
-                            return
-                        }
-
-                        // Failed or stopped: if the original XML is still
-                        // stored, the tool handler never ran (invalid JSON,
-                        // or the user pressed stop), so undo the streamed
-                        // preview here. Invalid JSON leaves no input, so
-                        // check this first.
-                        if (state === "output-error") {
-                            const originalXml =
-                                editDiagramOriginalXmlRef.current.get(
-                                    toolCallId,
-                                )
-                            if (originalXml) {
-                                editDiagramOriginalXmlRef.current.delete(
-                                    toolCallId,
-                                )
-                                onDisplayChart(originalXml, true)
-                                baseXml = originalXml
-                            }
-                            return
-                        }
-
-                        // Input complete, or the tool handler, a stop or an
-                        // error took the call already: the tool handler loads
-                        // the checked diagram (with the original XML). The
-                        // messages update at most every 150 ms (useChat
-                        // throttle in chat-panel), so they can still show the
-                        // call streaming after that.
-                        if (
-                            state !== "input-streaming" ||
-                            processedToolCalls.current.has(toolCallId)
-                        ) {
-                            processedToolCalls.current.add(toolCallId)
-                            lastProcessedXmlRef.current.delete(toolCallId)
-                            lastProcessedXmlRef.current.delete(
-                                `${toolCallId}-opCount`,
-                            )
-                            return
-                        }
-
-                        if (part.type === "tool-display_diagram") {
-                            const xml = input?.xml as string | undefined
-                            // Skip if XML hasn't changed since last processing
-                            if (
-                                !xml ||
-                                lastProcessedXmlRef.current.get(toolCallId) ===
-                                    xml
-                            ) {
-                                return
-                            }
-                            // Keep the diagram from before the preview, to
-                            // undo it on a stop or an error
-                            if (
-                                !editDiagramOriginalXmlRef.current.has(
-                                    toolCallId,
-                                )
-                            ) {
-                                editDiagramOriginalXmlRef.current.set(
-                                    toolCallId,
-                                    baseXml || BLANK_MXFILE,
-                                )
-                            }
-                            handleDisplayChart(xml)
-                            lastProcessedXmlRef.current.set(toolCallId, xml)
-                            return
-                        }
-
-                        // Handle edit_diagram streaming - apply operations incrementally for preview
-                        // Uses shared editDiagramOriginalXmlRef to coordinate with tool handler
-                        if (part.type === "tool-edit_diagram") {
-                            if (!input?.operations) return
-                            const completeOps = getCompleteOperations(
-                                input.operations as DiagramOperation[],
-                            )
-                            if (completeOps.length === 0) return
-
-                            // Capture original XML when streaming starts (store in shared ref)
-                            if (
-                                !editDiagramOriginalXmlRef.current.has(
-                                    toolCallId,
-                                )
-                            ) {
-                                if (!baseXml) {
-                                    console.warn(
-                                        "[edit_diagram streaming] No chart XML available",
-                                    )
-                                    return
-                                }
-                                editDiagramOriginalXmlRef.current.set(
-                                    toolCallId,
-                                    baseXml,
-                                )
-                            }
-                            const originalXml =
-                                editDiagramOriginalXmlRef.current.get(
-                                    toolCallId,
-                                )
-                            if (!originalXml) return
-
-                            // Skip if no change from last processed state
-                            const countKey = `${toolCallId}-opCount`
-                            const opCount = String(completeOps.length)
-                            if (
-                                lastProcessedXmlRef.current.get(countKey) ===
-                                opCount
-                            ) {
-                                return
-                            }
-                            try {
-                                const { result } = applyDiagramOperations(
-                                    originalXml,
-                                    completeOps,
-                                )
-                                // Load the full document so other pages stay intact
-                                onDisplayChart(result, true)
-                                lastProcessedXmlRef.current.set(
-                                    countKey,
-                                    opCount,
-                                )
-                            } catch (e) {
-                                console.warn(
-                                    "[edit_diagram streaming] Operation failed:",
-                                    e instanceof Error ? e.message : e,
-                                )
-                            }
-                        }
-                    }
-                })
-            }
-        })
-    }, [messages, handleDisplayChart, chartXMLRef])
-
-    return (
-        <ScrollArea className="h-full w-full scrollbar-thin">
-            <div ref={scrollTopRef} />
-            {messages.length === 0 && isRestored ? (
-                <ChatLobby
-                    sessions={sessions}
-                    onSelectSession={onSelectSession || (() => {})}
-                    onDeleteSession={onDeleteSession}
-                    setInput={setInput}
-                    setFiles={setFiles}
-                    onSendTemplate={onSendTemplate}
-                    currentInput={currentInput}
-                    dict={dict}
-                />
-            ) : messages.length === 0 ? null : (
-                <div className="py-4 px-4 space-y-4">
-                    {messages.map((message, messageIndex) => {
-                        const userMessageText =
-                            message.role === "user"
-                                ? getMessageTextContent(message)
-                                : ""
-                        const isLastAssistantMessage =
-                            message.role === "assistant" &&
-                            (messageIndex === messages.length - 1 ||
-                                messages
-                                    .slice(messageIndex + 1)
-                                    .every((m) => m.role !== "assistant"))
-                        const isLastUserMessage =
-                            message.role === "user" &&
-                            (messageIndex === messages.length - 1 ||
-                                messages
-                                    .slice(messageIndex + 1)
-                                    .every((m) => m.role !== "user"))
-                        const isEditing = editingMessageId === message.id
-                        // Skip animation for loaded messages (from session restore)
-                        const isRestoredMessage =
-                            loadedMessageIdsRef?.current.has(message.id) ??
-                            false
-                        return (
-                            <div
-                                key={message.id}
-                                className={`flex w-full ${message.role === "user" ? "justify-end" : "justify-start"} ${isRestoredMessage ? "" : "animate-message-in"}`}
-                                style={
-                                    isRestoredMessage
-                                        ? undefined
-                                        : {
-                                              animationDelay: `${messageIndex * 50}ms`,
-                                          }
-                                }
-                            >
-                                {message.role === "user" &&
-                                    userMessageText &&
-                                    !isEditing && (
-                                        <div className="flex items-center gap-1 self-center mr-2">
-                                            {/* Edit button - only on last user message */}
-                                            {onEditMessage &&
-                                                isLastUserMessage && (
-                                                    <button
-                                                        type="button"
-                                                        onClick={() => {
-                                                            setEditingMessageId(
-                                                                message.id,
-                                                            )
-                                                            setEditText(
-                                                                getUserOriginalText(
-                                                                    message,
-                                                                ),
-                                                            )
-                                                        }}
-                                                        className="p-1.5 rounded-lg text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted transition-colors"
-                                                        title={
-                                                            dict.chat
-                                                                .editMessage
-                                                        }
-                                                    >
-                                                        <Pencil className="h-3.5 w-3.5" />
-                                                    </button>
-                                                )}
-                                            <button
-                                                type="button"
-                                                onClick={() =>
-                                                    copyMessageToClipboard(
-                                                        message.id,
-                                                        userMessageText,
-                                                    )
-                                                }
-                                                className="p-1.5 rounded-lg text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted transition-colors"
-                                                title={
-                                                    copiedMessageId ===
-                                                    message.id
-                                                        ? dict.chat.copied
-                                                        : copyFailedMessageId ===
-                                                            message.id
-                                                          ? dict.chat
-                                                                .failedToCopy
-                                                          : dict.chat
-                                                                .copyResponse
-                                                }
-                                            >
-                                                {copiedMessageId ===
-                                                message.id ? (
-                                                    <Check className="h-3.5 w-3.5 text-green-500" />
-                                                ) : copyFailedMessageId ===
-                                                  message.id ? (
-                                                    <X className="h-3.5 w-3.5 text-red-500" />
-                                                ) : (
-                                                    <Copy className="h-3.5 w-3.5" />
-                                                )}
-                                            </button>
-                                            {/* Save as Template button - only for user messages */}
-                                            <button
-                                                type="button"
-                                                onClick={() =>
-                                                    setSaveAsTemplateMessageId(
-                                                        message.id,
-                                                    )
-                                                }
-                                                className="p-1.5 rounded-lg text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted transition-colors"
-                                                title={
-                                                    dict.templates
-                                                        ?.saveAsTemplate ||
-                                                    "Save as Template"
-                                                }
-                                            >
-                                                <BookmarkPlus className="h-3.5 w-3.5" />
-                                            </button>
-                                        </div>
-                                    )}
-
-                                {/* Save as Template Dialog */}
-                                {saveAsTemplateMessageId === message.id && (
-                                    <TemplateCreateDialog
-                                        open={true}
-                                        onOpenChange={(open) => {
-                                            if (!open)
-                                                setSaveAsTemplateMessageId(null)
-                                        }}
-                                        onSuccess={() => {
-                                            setSaveAsTemplateMessageId(null)
-                                        }}
-                                        initialPrompt={getUserOriginalText(
-                                            message,
-                                        )}
-                                    />
-                                )}
-                                <div className="max-w-[85%] min-w-0">
-                                    {/* Reasoning blocks - displayed first for assistant messages */}
-                                    {message.role === "assistant" &&
-                                        message.parts?.map(
-                                            (part, partIndex) => {
-                                                if (part.type === "reasoning") {
-                                                    const reasoningPart =
-                                                        part as {
-                                                            type: "reasoning"
-                                                            text: string
-                                                        }
-                                                    const isLastPart =
-                                                        partIndex ===
-                                                        (message.parts
-                                                            ?.length ?? 0) -
-                                                            1
-                                                    const isLastMessage =
-                                                        message.id ===
-                                                        messages[
-                                                            messages.length - 1
-                                                        ]?.id
-                                                    const isStreamingReasoning =
-                                                        status ===
-                                                            "streaming" &&
-                                                        isLastPart &&
-                                                        isLastMessage
-
-                                                    return (
-                                                        <Reasoning
-                                                            key={`${message.id}-reasoning-${partIndex}`}
-                                                            className="w-full"
-                                                            isStreaming={
-                                                                isStreamingReasoning
-                                                            }
-                                                            defaultOpen={
-                                                                !isRestoredMessage
-                                                            }
-                                                        >
-                                                            <ReasoningTrigger
-                                                                getThinkingMessage={
-                                                                    thinkingMessage
-                                                                }
-                                                            />
-                                                            <ReasoningContent>
-                                                                {
-                                                                    reasoningPart.text
-                                                                }
-                                                            </ReasoningContent>
-                                                        </Reasoning>
-                                                    )
-                                                }
-                                                return null
-                                            },
-                                        )}
-                                    {/* Edit mode for user messages */}
-                                    {isEditing && message.role === "user" ? (
-                                        <div className="flex flex-col gap-2">
-                                            <textarea
-                                                ref={editTextareaRef}
-                                                value={editText}
-                                                onChange={(e) =>
-                                                    setEditText(e.target.value)
-                                                }
-                                                className="w-full min-w-[300px] px-4 py-3 text-sm rounded-2xl border border-primary bg-background text-foreground resize-none focus:outline-none focus:ring-2 focus:ring-primary"
-                                                rows={Math.min(
-                                                    editText.split("\n")
-                                                        .length + 1,
-                                                    6,
-                                                )}
-                                                onKeyDown={(e) => {
-                                                    if (e.key === "Escape") {
-                                                        setEditingMessageId(
-                                                            null,
-                                                        )
-                                                        setEditText("")
-                                                    } else if (
-                                                        e.key === "Enter" &&
-                                                        (e.metaKey || e.ctrlKey)
-                                                    ) {
-                                                        e.preventDefault()
-                                                        if (
-                                                            editText.trim() &&
-                                                            onEditMessage
-                                                        ) {
-                                                            onEditMessage(
-                                                                messageIndex,
-                                                                editText.trim(),
-                                                            )
-                                                            setEditingMessageId(
-                                                                null,
-                                                            )
-                                                            setEditText("")
-                                                        }
-                                                    }
-                                                }}
-                                            />
-                                            <div className="flex justify-end gap-2">
-                                                <button
-                                                    type="button"
-                                                    onClick={() => {
-                                                        setEditingMessageId(
-                                                            null,
-                                                        )
-                                                        setEditText("")
-                                                    }}
-                                                    className="px-3 py-1.5 text-xs rounded-lg bg-muted hover:bg-muted/80 transition-colors"
-                                                >
-                                                    {dict.common.cancel}
-                                                </button>
-                                                <button
-                                                    type="button"
-                                                    onClick={() => {
-                                                        if (
-                                                            editText.trim() &&
-                                                            onEditMessage
-                                                        ) {
-                                                            onEditMessage(
-                                                                messageIndex,
-                                                                editText.trim(),
-                                                            )
-                                                            setEditingMessageId(
-                                                                null,
-                                                            )
-                                                            setEditText("")
-                                                        }
-                                                    }}
-                                                    disabled={!editText.trim()}
-                                                    className="px-3 py-1.5 text-xs rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors"
-                                                >
-                                                    {dict.chat.saveAndSubmit}
-                                                </button>
-                                            </div>
-                                        </div>
-                                    ) : (
-                                        /* Render parts in order, grouping consecutive text/file parts into bubbles */
-                                        (() => {
-                                            const parts = message.parts || []
-                                            const groups: {
-                                                type: "content" | "tool"
-                                                parts: typeof parts
-                                                startIndex: number
-                                            }[] = []
-
-                                            parts.forEach((part, index) => {
-                                                const isToolPart =
-                                                    part.type?.startsWith(
-                                                        "tool-",
-                                                    )
-                                                // Blank text (some models send
-                                                // a lone space) gets no bubble
-                                                const isContentPart =
-                                                    (part.type === "text" &&
-                                                        part.text.trim() !==
-                                                            "") ||
-                                                    part.type === "file"
-
-                                                if (isToolPart) {
-                                                    groups.push({
-                                                        type: "tool",
-                                                        parts: [part],
-                                                        startIndex: index,
-                                                    })
-                                                } else if (isContentPart) {
-                                                    const lastGroup =
-                                                        groups[
-                                                            groups.length - 1
-                                                        ]
-                                                    if (
-                                                        lastGroup?.type ===
-                                                        "content"
-                                                    ) {
-                                                        lastGroup.parts.push(
-                                                            part,
-                                                        )
-                                                    } else {
-                                                        groups.push({
-                                                            type: "content",
-                                                            parts: [part],
-                                                            startIndex: index,
-                                                        })
-                                                    }
-                                                }
-                                            })
-
-                                            return groups.map(
-                                                (group, groupIndex) => {
-                                                    if (group.type === "tool") {
-                                                        const toolPart = group
-                                                            .parts[0] as ToolPartLike
-                                                        const toolCallId =
-                                                            toolPart.toolCallId
-                                                        const isDisplayDiagram =
-                                                            toolPart.type ===
-                                                            "tool-display_diagram"
-                                                        const validationState =
-                                                            validationStates[
-                                                                toolCallId
-                                                            ]
-
-                                                        return (
-                                                            <div
-                                                                key={`${message.id}-tool-${group.startIndex}`}
-                                                            >
-                                                                <ToolCallCard
-                                                                    part={
-                                                                        toolPart
-                                                                    }
-                                                                    expandedTools={
-                                                                        expandedTools
-                                                                    }
-                                                                    setExpandedTools={
-                                                                        setExpandedTools
-                                                                    }
-                                                                    onCopy={
-                                                                        copyMessageToClipboard
-                                                                    }
-                                                                    copiedToolCallId={
-                                                                        copiedToolCallId
-                                                                    }
-                                                                    copyFailedToolCallId={
-                                                                        copyFailedToolCallId
-                                                                    }
-                                                                    dict={dict}
-                                                                />
-                                                                {/* Show validation card for display_diagram tools */}
-                                                                {isDisplayDiagram &&
-                                                                    validationState && (
-                                                                        <ValidationCard
-                                                                            state={
-                                                                                validationState
-                                                                            }
-                                                                            onImproveWithSuggestions={
-                                                                                onImproveWithSuggestions
-                                                                            }
-                                                                        />
-                                                                    )}
-                                                            </div>
-                                                        )
-                                                    }
-
-                                                    // Content bubble
-                                                    return (
-                                                        <div
-                                                            key={`${message.id}-content-${group.startIndex}`}
-                                                            className={`px-4 py-3 text-sm leading-relaxed ${
-                                                                message.role ===
-                                                                "user"
-                                                                    ? "bg-primary text-primary-foreground rounded-2xl rounded-br-md shadow-sm"
-                                                                    : message.role ===
-                                                                        "system"
-                                                                      ? "bg-destructive/10 text-destructive border border-destructive/20 rounded-2xl rounded-bl-md"
-                                                                      : "bg-muted/60 text-foreground rounded-2xl rounded-bl-md"
-                                                            } ${message.role === "user" && isLastUserMessage && onEditMessage ? "cursor-pointer hover:opacity-90 transition-opacity" : ""} ${groupIndex > 0 ? "mt-3" : ""}`}
-                                                            role={
-                                                                message.role ===
-                                                                    "user" &&
-                                                                isLastUserMessage &&
-                                                                onEditMessage
-                                                                    ? "button"
-                                                                    : undefined
-                                                            }
-                                                            tabIndex={
-                                                                message.role ===
-                                                                    "user" &&
-                                                                isLastUserMessage &&
-                                                                onEditMessage
-                                                                    ? 0
-                                                                    : undefined
-                                                            }
-                                                            onClick={() => {
-                                                                if (
-                                                                    message.role ===
-                                                                        "user" &&
-                                                                    isLastUserMessage &&
-                                                                    onEditMessage
-                                                                ) {
-                                                                    setEditingMessageId(
-                                                                        message.id,
-                                                                    )
-                                                                    setEditText(
-                                                                        getUserOriginalText(
-                                                                            message,
-                                                                        ),
-                                                                    )
-                                                                }
-                                                            }}
-                                                            onKeyDown={(e) => {
-                                                                if (
-                                                                    (e.key ===
-                                                                        "Enter" ||
-                                                                        e.key ===
-                                                                            " ") &&
-                                                                    message.role ===
-                                                                        "user" &&
-                                                                    isLastUserMessage &&
-                                                                    onEditMessage
-                                                                ) {
-                                                                    e.preventDefault()
-                                                                    setEditingMessageId(
-                                                                        message.id,
-                                                                    )
-                                                                    setEditText(
-                                                                        getUserOriginalText(
-                                                                            message,
-                                                                        ),
-                                                                    )
-                                                                }
-                                                            }}
-                                                            title={
-                                                                message.role ===
-                                                                    "user" &&
-                                                                isLastUserMessage &&
-                                                                onEditMessage
-                                                                    ? dict.chat
-                                                                          .clickToEdit
-                                                                    : undefined
-                                                            }
-                                                        >
-                                                            {group.parts.map(
-                                                                (
-                                                                    part,
-                                                                    partIndex,
-                                                                ) => {
-                                                                    if (
-                                                                        part.type ===
-                                                                        "text"
-                                                                    ) {
-                                                                        const textContent =
-                                                                            (
-                                                                                part as {
-                                                                                    text: string
-                                                                                }
-                                                                            )
-                                                                                .text
-                                                                        const sections =
-                                                                            splitTextIntoFileSections(
-                                                                                textContent,
-                                                                            )
-                                                                        return (
-                                                                            <div
-                                                                                key={`${message.id}-text-${group.startIndex}-${partIndex}`}
-                                                                                className="space-y-2"
-                                                                            >
-                                                                                {sections.map(
-                                                                                    (
-                                                                                        section,
-                                                                                        sectionIndex,
-                                                                                    ) => {
-                                                                                        if (
-                                                                                            section.type ===
-                                                                                                "file" ||
-                                                                                            section.type ===
-                                                                                                "url"
-                                                                                        ) {
-                                                                                            const sectionKey = `${message.id}-${section.type}-${partIndex}-${sectionIndex}`
-                                                                                            const isExpanded =
-                                                                                                expandedPdfSections[
-                                                                                                    sectionKey
-                                                                                                ] ??
-                                                                                                false
-                                                                                            const charDisplay =
-                                                                                                section.charCount &&
-                                                                                                section.charCount >=
-                                                                                                    1000
-                                                                                                    ? `${(section.charCount / 1000).toFixed(1)}k`
-                                                                                                    : section.charCount
-
-                                                                                            // Icon selector
-                                                                                            const Icon =
-                                                                                                section.fileType ===
-                                                                                                "pdf"
-                                                                                                    ? FileText
-                                                                                                    : section.fileType ===
-                                                                                                        "url"
-                                                                                                      ? Link
-                                                                                                      : FileCode
-
-                                                                                            const iconColor =
-                                                                                                section.fileType ===
-                                                                                                "pdf"
-                                                                                                    ? "text-red-500"
-                                                                                                    : "text-blue-700"
-
-                                                                                            return (
-                                                                                                <div
-                                                                                                    key={
-                                                                                                        sectionKey
-                                                                                                    }
-                                                                                                    className="rounded-lg border border-border/60 bg-muted/30 overflow-hidden"
-                                                                                                >
-                                                                                                    <button
-                                                                                                        type="button"
-                                                                                                        onClick={(
-                                                                                                            e,
-                                                                                                        ) => {
-                                                                                                            e.stopPropagation()
-                                                                                                            setExpandedPdfSections(
-                                                                                                                (
-                                                                                                                    prev,
-                                                                                                                ) => ({
-                                                                                                                    ...prev,
-                                                                                                                    [sectionKey]:
-                                                                                                                        !isExpanded,
-                                                                                                                }),
-                                                                                                            )
-                                                                                                        }}
-                                                                                                        className="w-full flex items-center justify-between px-3 py-2 hover:bg-muted/50 transition-colors"
-                                                                                                    >
-                                                                                                        <div className="flex items-center gap-2">
-                                                                                                            <Icon
-                                                                                                                className={`h-4 w-4 ${iconColor}`}
-                                                                                                            />
-                                                                                                            <span className="text-xs font-medium truncate max-w-[200px]">
-                                                                                                                {
-                                                                                                                    section.filename
-                                                                                                                }
-                                                                                                            </span>
-                                                                                                            <span className="text-[10px] text-muted-foreground">
-                                                                                                                (
-                                                                                                                {
-                                                                                                                    charDisplay
-                                                                                                                }{" "}
-                                                                                                                chars)
-                                                                                                            </span>
-                                                                                                        </div>
-                                                                                                        {isExpanded ? (
-                                                                                                            <ChevronUp className="h-4 w-4 text-muted-foreground" />
-                                                                                                        ) : (
-                                                                                                            <ChevronDown className="h-4 w-4 text-muted-foreground" />
-                                                                                                        )}
-                                                                                                    </button>
-                                                                                                    {isExpanded && (
-                                                                                                        <div className="px-3 py-2 border-t border-border/40 max-h-48 overflow-y-auto bg-muted/30 scrollbar-thin">
-                                                                                                            <pre className="text-xs whitespace-pre-wrap text-foreground/80">
-                                                                                                                {
-                                                                                                                    section.content
-                                                                                                                }
-                                                                                                            </pre>
-                                                                                                        </div>
-                                                                                                    )}
-                                                                                                </div>
-                                                                                            )
-                                                                                        }
-                                                                                        // Regular text section
-                                                                                        return (
-                                                                                            <div
-                                                                                                key={`${message.id}-textsection-${partIndex}-${sectionIndex}`}
-                                                                                                className={`prose prose-sm max-w-none break-words [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 ${
-                                                                                                    message.role ===
-                                                                                                    "user"
-                                                                                                        ? "[&_*]:!text-primary-foreground prose-code:bg-white/20"
-                                                                                                        : "dark:prose-invert"
-                                                                                                }`}
-                                                                                            >
-                                                                                                <ReactMarkdown>
-                                                                                                    {
-                                                                                                        section.content
-                                                                                                    }
-                                                                                                </ReactMarkdown>
-                                                                                            </div>
-                                                                                        )
-                                                                                    },
-                                                                                )}
-                                                                            </div>
-                                                                        )
-                                                                    }
-                                                                    if (
-                                                                        part.type ===
-                                                                        "file"
-                                                                    ) {
-                                                                        return (
-                                                                            <div
-                                                                                key={`${message.id}-file-${group.startIndex}-${partIndex}`}
-                                                                                className="mt-2"
-                                                                            >
-                                                                                <Image
-                                                                                    src={
-                                                                                        (
-                                                                                            part as {
-                                                                                                url: string
-                                                                                            }
-                                                                                        )
-                                                                                            .url
-                                                                                    }
-                                                                                    width={
-                                                                                        200
-                                                                                    }
-                                                                                    height={
-                                                                                        200
-                                                                                    }
-                                                                                    alt={`Uploaded diagram or image for AI analysis`}
-                                                                                    className="rounded-lg border border-white/20"
-                                                                                    style={{
-                                                                                        objectFit:
-                                                                                            "contain",
-                                                                                    }}
-                                                                                />
-                                                                            </div>
-                                                                        )
-                                                                    }
-                                                                    return null
-                                                                },
-                                                            )}
-                                                            {message.role ===
-                                                                "system" &&
-                                                                (
-                                                                    message.metadata as
-                                                                        | {
-                                                                              openModelConfig?: boolean
-                                                                          }
-                                                                        | undefined
-                                                                )
-                                                                    ?.openModelConfig &&
-                                                                onOpenModelConfig && (
-                                                                    <button
-                                                                        type="button"
-                                                                        onClick={
-                                                                            onOpenModelConfig
-                                                                        }
-                                                                        className="mt-2 text-xs font-medium underline underline-offset-2 hover:opacity-80"
-                                                                    >
-                                                                        {
-                                                                            dict
-                                                                                .errors
-                                                                                .llm
-                                                                                .openModelSettings
-                                                                        }
-                                                                    </button>
-                                                                )}
-                                                        </div>
-                                                    )
-                                                },
-                                            )
-                                        })()
-                                    )}
-                                    {/* Action buttons for assistant messages */}
-                                    {message.role === "assistant" && (
-                                        <div className="flex items-center gap-1 mt-2">
-                                            {/* Copy button */}
-                                            <button
-                                                type="button"
-                                                onClick={() =>
-                                                    copyMessageToClipboard(
-                                                        message.id,
-                                                        getMessageTextContent(
-                                                            message,
-                                                        ),
-                                                    )
-                                                }
-                                                className={`p-1.5 rounded-lg transition-colors ${
-                                                    copiedMessageId ===
-                                                    message.id
-                                                        ? "text-green-600 bg-green-100"
-                                                        : "text-muted-foreground/60 hover:text-foreground hover:bg-muted"
-                                                }`}
-                                                title={
-                                                    copiedMessageId ===
-                                                    message.id
-                                                        ? dict.chat.copied
-                                                        : dict.chat.copyResponse
-                                                }
-                                            >
-                                                {copiedMessageId ===
-                                                message.id ? (
-                                                    <Check className="h-3.5 w-3.5" />
-                                                ) : (
-                                                    <Copy className="h-3.5 w-3.5" />
-                                                )}
-                                            </button>
-                                            {/* Regenerate button - only on last assistant message, not for cached examples */}
-                                            {onRegenerate &&
-                                                isLastAssistantMessage &&
-                                                !message.parts?.some((p: any) =>
-                                                    p.toolCallId?.startsWith(
-                                                        "cached-",
-                                                    ),
-                                                ) && (
-                                                    <button
-                                                        type="button"
-                                                        onClick={() =>
-                                                            onRegenerate(
-                                                                messageIndex,
-                                                            )
-                                                        }
-                                                        className="p-1.5 rounded-lg text-muted-foreground/60 hover:text-foreground hover:bg-muted transition-colors"
-                                                        title={
-                                                            dict.chat.regenerate
-                                                        }
-                                                    >
-                                                        <RotateCcw className="h-3.5 w-3.5" />
-                                                    </button>
-                                                )}
-                                            {/* Divider */}
-                                            <div className="w-px h-4 bg-border mx-1" />
-                                            {/* Thumbs up */}
-                                            <button
-                                                type="button"
-                                                onClick={() =>
-                                                    submitFeedback(
-                                                        message.id,
-                                                        "good",
-                                                    )
-                                                }
-                                                className={`p-1.5 rounded-lg transition-colors ${
-                                                    feedback[message.id] ===
-                                                    "good"
-                                                        ? "text-green-600 bg-green-100"
-                                                        : "text-muted-foreground/60 hover:text-green-600 hover:bg-green-50"
-                                                }`}
-                                                title={dict.chat.goodResponse}
-                                            >
-                                                <ThumbsUp className="h-3.5 w-3.5" />
-                                            </button>
-                                            {/* Thumbs down */}
-                                            <button
-                                                type="button"
-                                                onClick={() =>
-                                                    submitFeedback(
-                                                        message.id,
-                                                        "bad",
-                                                    )
-                                                }
-                                                className={`p-1.5 rounded-lg transition-colors ${
-                                                    feedback[message.id] ===
-                                                    "bad"
-                                                        ? "text-red-600 bg-red-100"
-                                                        : "text-muted-foreground/60 hover:text-red-600 hover:bg-red-50"
-                                                }`}
-                                                title={dict.chat.badResponse}
-                                            >
-                                                <ThumbsDown className="h-3.5 w-3.5" />
-                                            </button>
-                                        </div>
-                                    )}
-                                </div>
-                            </div>
-                        )
-                    })}
-                </div>
-            )}
-            <div ref={messagesEndRef} />
-        </ScrollArea>
-    )
-}
diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
deleted file mode 100644
index ce2278c0..00000000
--- a/components/chat-panel.tsx
+++ /dev/null
@@ -1,1641 +0,0 @@
-"use client"
-
-import { useChat } from "@ai-sdk/react"
-import { DefaultChatTransport, isToolUIPart, type UIMessage } from "ai"
-import {
-    MessageSquarePlus,
-    PanelRightClose,
-    PanelRightOpen,
-    Settings,
-} from "lucide-react"
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import type React from "react"
-import {
-    useCallback,
-    useEffect,
-    useLayoutEffect,
-    useRef,
-    useState,
-} from "react"
-import { flushSync } from "react-dom"
-import { Toaster, toast } from "sonner"
-import { ButtonWithTooltip } from "@/components/button-with-tooltip"
-import { ChatInput } from "@/components/chat-input"
-import Image from "@/components/image-with-basepath"
-import { ModelConfigDialog } from "@/components/model-config-dialog"
-import { SettingsDialog } from "@/components/settings-dialog"
-import { useDiagram } from "@/contexts/diagram-context"
-import { useDiagramToolHandlers } from "@/hooks/use-diagram-tool-handlers"
-import { useDictionary } from "@/hooks/use-dictionary"
-import { getSelectedAIConfig, useModelConfig } from "@/hooks/use-model-config"
-import { useSessionManager } from "@/hooks/use-session-manager"
-import { useValidateDiagram } from "@/hooks/use-validate-diagram"
-import { getApiEndpoint } from "@/lib/base-path"
-import { findCachedResponse } from "@/lib/cached-responses"
-import type { DrawioTheme } from "@/lib/drawio-themes"
-import { formatMessage } from "@/lib/i18n/utils"
-import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
-import { sanitizeMessages } from "@/lib/session-storage"
-import { STORAGE_KEYS } from "@/lib/storage"
-import type { UrlData } from "@/lib/url-utils"
-import { type FileData, useFileProcessor } from "@/lib/use-file-processor"
-import { useQuotaManager } from "@/lib/use-quota-manager"
-import { cn, formatXML, isRealDiagram } from "@/lib/utils"
-import { prepareNewDiagram } from "@/packages/mcp-server/src/new-diagram.ts"
-import { BLANK_MXFILE, hasCells } from "@/packages/mcp-server/src/pages.ts"
-import type { ValidationState } from "./chat/ValidationCard"
-import {
-    APPENDED_FILE_SECTIONS_PATTERN,
-    ChatMessageDisplay,
-} from "./chat-message-display"
-import { DevXmlSimulator } from "./dev-xml-simulator"
-
-// localStorage keys for persistence
-const STORAGE_SESSION_ID_KEY = "next-ai-draw-io-session-id"
-
-// sessionStorage keys
-const SESSION_STORAGE_INPUT_KEY = "next-ai-draw-io-input"
-
-interface ChatPanelProps {
-    isVisible: boolean
-    onToggleVisibility: () => void
-    drawioUi: DrawioTheme
-    onDrawioUiChange: (theme: DrawioTheme) => void
-    darkMode: boolean
-    onToggleDarkMode: () => void
-    isMobile?: boolean
-}
-
-// Constants for tool states
-const TOOL_ERROR_STATE = "output-error" as const
-const DEBUG = process.env.NODE_ENV === "development"
-// Increased to 3 to support VLM validation retries (matches MAX_VALIDATION_RETRIES)
-const MAX_AUTO_RETRY_COUNT = 3
-
-const MAX_CONTINUATION_RETRY_COUNT = 2 // Limit for truncation continuation retries
-
-/**
- * Check if auto-resubmit should happen based on tool errors.
- * Only checks the LAST tool part (most recent tool call), not all tool parts.
- */
-function hasToolErrors(messages: UIMessage[]): boolean {
-    const lastMessage = messages[messages.length - 1]
-    if (lastMessage?.role !== "assistant") return false
-    const lastToolPart = lastMessage.parts.filter(isToolUIPart).at(-1)
-    return lastToolPart?.state === TOOL_ERROR_STATE
-}
-
-/**
- * Snapshots keep the full multi-page document, but the model only sees and
- * edits the first page, so give it the first page's mxGraphModel.
- * Older snapshots already hold a single mxGraphModel and are returned as is.
- */
-function getFirstPageXml(xml: string): string {
-    if (!xml.includes("<mxfile")) return xml
-    const doc = new DOMParser().parseFromString(xml, "text/xml")
-    const model = doc.querySelector("diagram")?.querySelector("mxGraphModel")
-    return model ? formatXML(new XMLSerializer().serializeToString(model)) : xml
-}
-
-export default function ChatPanel({
-    isVisible,
-    onToggleVisibility,
-    drawioUi,
-    onDrawioUiChange,
-    darkMode,
-    onToggleDarkMode,
-    isMobile = false,
-}: ChatPanelProps) {
-    const {
-        loadDiagram: onDisplayChart,
-        handleExport: onExport,
-        handleExportWithoutHistory,
-        exportResolversRef,
-        chartXML,
-        chartXMLRef: liveChartXMLRef,
-        latestSvg,
-        clearDiagram,
-        getThumbnailSvg,
-        captureValidationPng,
-        diagramHistory,
-        setDiagramHistory,
-    } = useDiagram()
-
-    const dict = useDictionary()
-    const router = useRouter()
-    const pathname = usePathname()
-    const searchParams = useSearchParams()
-    const urlSessionId = searchParams.get("session")
-
-    const onFetchChart = (saveToHistory = true) => {
-        // Waits for the reply to its own export, by its tag
-        const tag = saveToHistory ? onExport() : handleExportWithoutHistory()
-        return Promise.race([
-            new Promise<string>((resolve) => {
-                if (tag) exportResolversRef.current[tag] = resolve
-            }),
-            new Promise<string>((_, reject) => {
-                setTimeout(() => {
-                    delete exportResolversRef.current[tag]
-                    reject(new Error("Chart export timed out after 10 seconds"))
-                }, 10000)
-            }),
-        ])
-    }
-
-    // File processing using extracted hook
-    const { files, pdfData, handleFileChange, setFiles } = useFileProcessor()
-    const [urlData, setUrlData] = useState<Map<string, UrlData>>(new Map())
-
-    const [showSettingsDialog, setShowSettingsDialog] = useState(false)
-    const [showModelConfigDialog, setShowModelConfigDialog] = useState(false)
-
-    // Model configuration hook
-    const modelConfig = useModelConfig()
-
-    // Session manager for chat history (pass URL session ID for restoration)
-    const sessionManager = useSessionManager({ initialSessionId: urlSessionId })
-
-    const [input, setInput] = useState("")
-    const [dailyRequestLimit, setDailyRequestLimit] = useState(0)
-    const [dailyTokenLimit, setDailyTokenLimit] = useState(0)
-    const [tpmLimit, setTpmLimit] = useState(0)
-    const [minimalStyle, setMinimalStyle] = useState(false)
-    const [vlmValidationEnabled, setVlmValidationEnabled] = useState(false)
-    const [customSystemMessage, setCustomSystemMessage] = useState("")
-    const [maxOutputTokens, setMaxOutputTokens] = useState("")
-    const [shouldFocusInput, setShouldFocusInput] = useState(false)
-
-    // Restore input from sessionStorage on mount (when ChatPanel remounts due to key change)
-    useEffect(() => {
-        const savedInput = sessionStorage.getItem(SESSION_STORAGE_INPUT_KEY)
-        if (savedInput) {
-            setInput(savedInput)
-        }
-    }, [])
-
-    // Load VLM validation setting from localStorage on mount
-    useEffect(() => {
-        const stored = localStorage.getItem(STORAGE_KEYS.vlmValidationEnabled)
-        if (stored !== null) {
-            setVlmValidationEnabled(stored === "true")
-        }
-    }, [])
-
-    // Load custom system message from localStorage on mount
-    useEffect(() => {
-        const stored = localStorage.getItem(STORAGE_KEYS.customSystemMessage)
-        if (stored !== null) {
-            setCustomSystemMessage(stored)
-        }
-    }, [])
-
-    // Load output token budget from localStorage on mount
-    useEffect(() => {
-        const stored = localStorage.getItem(STORAGE_KEYS.maxOutputTokens)
-        if (stored !== null) {
-            setMaxOutputTokens(stored)
-        }
-    }, [])
-
-    // Check config on mount
-    useEffect(() => {
-        fetch(getApiEndpoint("/api/config"))
-            .then((res) => res.json())
-            .then((data) => {
-                setDailyRequestLimit(data.dailyRequestLimit || 0)
-                setDailyTokenLimit(data.dailyTokenLimit || 0)
-                setTpmLimit(data.tpmLimit || 0)
-            })
-            .catch(() => {})
-    }, [])
-
-    // Quota management using extracted hook
-    const quotaManager = useQuotaManager({
-        dailyRequestLimit,
-        dailyTokenLimit,
-        tpmLimit,
-        onConfigModel: () => setShowModelConfigDialog(true),
-    })
-
-    // Generate a unique session ID for Langfuse tracing (restore from localStorage if available)
-    const [sessionId, setSessionId] = useState(() => {
-        if (typeof window !== "undefined") {
-            const saved = localStorage.getItem(STORAGE_SESSION_ID_KEY)
-            if (saved) return saved
-        }
-        return `session-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
-    })
-
-    // Store XML snapshots for each user message (keyed by message index)
-    const xmlSnapshotsRef = useRef<Map<number, string>>(new Map())
-
-    // Flag to track if we've restored from localStorage
-    const hasRestoredRef = useRef(false)
-    const [isRestored, setIsRestored] = useState(false)
-
-    // Track previous isVisible to only animate when toggling (not on page load)
-    const prevIsVisibleRef = useRef(isVisible)
-    const [shouldAnimatePanel, setShouldAnimatePanel] = useState(false)
-    useEffect(() => {
-        // Only animate when visibility changes from false to true (not on initial load)
-        if (!prevIsVisibleRef.current && isVisible) {
-            setShouldAnimatePanel(true)
-        }
-        prevIsVisibleRef.current = isVisible
-    }, [isVisible])
-
-    // Ref to track latest chartXML for use in callbacks (avoids stale closure)
-    const chartXMLRef = useRef(chartXML)
-    // Track session ID that was loaded without a diagram (to prevent thumbnail contamination)
-    const justLoadedSessionIdRef = useRef<string | null>(null)
-    useEffect(() => {
-        chartXMLRef.current = chartXML
-        // Clear the no-diagram flag when a diagram is generated
-        if (chartXML) {
-            justLoadedSessionIdRef.current = null
-        }
-    }, [chartXML])
-
-    // Ref to track latest SVG for thumbnail generation
-    const latestSvgRef = useRef(latestSvg)
-    useEffect(() => {
-        latestSvgRef.current = latestSvg
-    }, [latestSvg])
-
-    // Ref to track consecutive auto-retry count (reset on user action)
-    const autoRetryCountRef = useRef(0)
-    // Ref to track continuation retry count (for truncation handling)
-    const continuationRetryCountRef = useRef(0)
-
-    // Ref to accumulate partial XML when output is truncated due to maxOutputTokens
-    // When partialXmlRef.current.length > 0, we're in continuation mode
-    const partialXmlRef = useRef<string>("")
-
-    // Persist processed tool call IDs so collapsing the chat doesn't replay old tool outputs
-    const processedToolCallsRef = useRef<Set<string>>(new Set())
-
-    // Set by Stop until the user sends the next message
-    const stoppedRef = useRef(false)
-    const preparingSendRef = useRef(false)
-    // Presses of Stop: a check that began before one still knows of it after
-    // the next message clears stoppedRef
-    const stopCountRef = useRef(0)
-
-    // Store original XML for display_diagram and edit_diagram streaming -
-    // shared between streaming preview and tool handler
-    // Key: toolCallId, Value: XML before the call's preview was drawn
-    const editDiagramOriginalXmlRef = useRef<Map<string, string>>(new Map())
-
-    // Debounce timeout for localStorage writes (prevents blocking during streaming)
-    const localStorageDebounceRef = useRef<ReturnType<
-        typeof setTimeout
-    > | null>(null)
-    const LOCAL_STORAGE_DEBOUNCE_MS = 1000 // Save at most once per second
-
-    // Validation state for displaying VLM validation progress
-    // Key: toolCallId, Value: ValidationState
-    const [validationStates, setValidationStates] = useState<
-        Record<string, ValidationState>
-    >({})
-
-    // Callback to update validation state from tool handler
-    const handleValidationStateChange = useCallback(
-        (toolCallId: string, state: ValidationState) => {
-            setValidationStates((prev) => ({
-                ...prev,
-                [toolCallId]: state,
-            }))
-        },
-        [],
-    )
-
-    // Handler for VLM validation setting change
-    const handleVlmValidationChange = useCallback((value: boolean) => {
-        setVlmValidationEnabled(value)
-        localStorage.setItem(STORAGE_KEYS.vlmValidationEnabled, String(value))
-    }, [])
-
-    // Handler for custom system message change
-    const handleCustomSystemMessageChange = useCallback((value: string) => {
-        setCustomSystemMessage(value)
-        localStorage.setItem(STORAGE_KEYS.customSystemMessage, value)
-    }, [])
-
-    // Handler for output token budget change (empty string = use server default)
-    const handleMaxOutputTokensChange = useCallback((value: string) => {
-        const digitsOnly = value.replace(/\D/g, "")
-        setMaxOutputTokens(digitsOnly)
-        localStorage.setItem(STORAGE_KEYS.maxOutputTokens, digitsOnly)
-    }, [])
-
-    // Failed VLM validations in the current user turn (reset on user action)
-    const validationRetryCountRef = useRef(0)
-
-    // VLM validation hook using AI SDK's useObject
-    const { validateWithFallback, cancel: cancelValidation } =
-        useValidateDiagram()
-
-    // Diagram tool handlers (display_diagram, edit_diagram, append_diagram)
-    const { handleToolCall } = useDiagramToolHandlers({
-        partialXmlRef,
-        editDiagramOriginalXmlRef,
-        processedToolCallsRef,
-        validationRetryCountRef,
-        // A preview undone just before the tool call is in this one already
-        chartXMLRef: liveChartXMLRef,
-        onDisplayChart,
-        onFetchChart,
-        onExport,
-        captureValidationPng,
-        validateDiagram: validateWithFallback,
-        enableVlmValidation: vlmValidationEnabled,
-        sessionId,
-        watchStop: () => {
-            const stopsBefore = stopCountRef.current
-            return () =>
-                stoppedRef.current || stopCountRef.current !== stopsBefore
-        },
-        onValidationStateChange: handleValidationStateChange,
-    })
-
-    const {
-        messages,
-        sendMessage,
-        addToolOutput,
-        status,
-        error,
-        setMessages,
-        stop,
-    } = useChat({
-        transport: new DefaultChatTransport({
-            api: getApiEndpoint("/api/chat"),
-        }),
-        onToolCall: async ({ toolCall }) => {
-            await handleToolCall({ toolCall }, addToolOutput)
-        },
-        onFinish: ({ message, isAbort, isError }) => {
-            // Stopped or failed: tool calls still streaming never reach the
-            // tool handler. Mark them handled so a later render of the
-            // stream does not draw their preview again.
-            if (!isAbort && !isError) return
-            for (const part of message.parts as any[]) {
-                if (part.state === "input-streaming" && part.toolCallId) {
-                    processedToolCallsRef.current.add(part.toolCallId)
-                }
-            }
-        },
-        onError: (error) => {
-            // A diagram still streaming when the request failed never
-            // reaches the tool handler: undo its preview. Only previews not
-            // handled yet are stored, and the first one holds the diagram
-            // before any of them.
-            const [originalXml] = editDiagramOriginalXmlRef.current.values()
-            if (originalXml) onDisplayChart(originalXml, true)
-            editDiagramOriginalXmlRef.current.clear()
-
-            // Server errors are JSON: a quota limit ({type: request, token or
-            // tpm}), a provider error ({type: "provider", code, message}) or
-            // {error}. The SDK puts the response body in error.message.
-            let data: any = null
-            try {
-                data = JSON.parse(error.message)
-            } catch {
-                // Plain text, e.g. a network failure in the browser
-            }
-            if (data?.type === "request") {
-                quotaManager.showQuotaLimitToast(data.used, data.limit)
-                return
-            }
-            if (data?.type === "token") {
-                quotaManager.showTokenLimitToast(data.used, data.limit)
-                return
-            }
-            if (data?.type === "tpm") {
-                quotaManager.showTPMLimitToast(data.limit)
-                return
-            }
-
-            const isAccessCodeError = String(
-                data?.error ?? error.message,
-            ).includes("Invalid or missing access code")
-            // Silence access code error in console since it's handled by UI
-            if (!isAccessCodeError) console.error("Chat error:", error)
-
-            // A hint the user can act on, then the provider's own words
-            let text: string = error.message
-            let openModelConfig = false
-            if (data?.type === "provider") {
-                const hints = dict.errors.llm as Record<string, string>
-                const hint = hints[data.code]
-                text =
-                    hint && data.message
-                        ? `${hint}\n\n${data.message}`
-                        : hint || data.message
-                openModelConfig = [
-                    "invalid_api_key",
-                    "forbidden",
-                    "model_not_found",
-                    "server_key_forbidden",
-                ].includes(data.code)
-            } else if (typeof data?.error === "string") {
-                text = data.error
-            } else if (error.message === "Failed to fetch") {
-                text = dict.errors.networkError
-            }
-
-            // Add system message for error so it can be cleared
-            setMessages((currentMessages) => [
-                ...currentMessages,
-                {
-                    id: `error-${Date.now()}`,
-                    role: "system" as const,
-                    content: text,
-                    parts: [{ type: "text" as const, text }],
-                    // The message shows a button that opens model settings
-                    ...(openModelConfig && {
-                        metadata: { openModelConfig: true },
-                    }),
-                },
-            ])
-
-            if (isAccessCodeError) {
-                // Show settings dialog to help user fix it
-                setShowSettingsDialog(true)
-            }
-        },
-        // Re-render streamed messages at most every 150 ms. The streaming
-        // diagram preview draws on each update, so this also limits redraws
-        experimental_throttle: 150,
-        sendAutomaticallyWhen: ({ messages }) => {
-            // The user stopped: a tool result that arrives later (a VLM
-            // check still running) must not start a new request
-            if (stoppedRef.current) return false
-
-            const isInContinuationMode = partialXmlRef.current.length > 0
-
-            const shouldRetry = hasToolErrors(messages)
-
-            if (!shouldRetry) {
-                // No error, reset retry count and clear state
-                autoRetryCountRef.current = 0
-                continuationRetryCountRef.current = 0
-                partialXmlRef.current = ""
-                return false
-            }
-
-            // Continuation mode: limited retries for truncation handling
-            if (isInContinuationMode) {
-                if (
-                    continuationRetryCountRef.current >=
-                    MAX_CONTINUATION_RETRY_COUNT
-                ) {
-                    toast.error(
-                        formatMessage(dict.errors.continuationRetryLimit, {
-                            max: MAX_CONTINUATION_RETRY_COUNT,
-                        }),
-                    )
-                    continuationRetryCountRef.current = 0
-                    partialXmlRef.current = ""
-                    return false
-                }
-                continuationRetryCountRef.current++
-            } else {
-                // Regular error: check retry count limit
-                if (autoRetryCountRef.current >= MAX_AUTO_RETRY_COUNT) {
-                    toast.error(
-                        formatMessage(dict.errors.retryLimit, {
-                            max: MAX_AUTO_RETRY_COUNT,
-                        }),
-                    )
-                    autoRetryCountRef.current = 0
-                    partialXmlRef.current = ""
-                    return false
-                }
-                // Increment retry count for actual errors
-                autoRetryCountRef.current++
-            }
-
-            return true
-        },
-    })
-
-    // Ref to track latest messages for unload persistence
-    const messagesRef = useRef(messages)
-    useEffect(() => {
-        messagesRef.current = messages
-    }, [messages])
-
-    // Track last synced session ID to detect external changes (e.g., URL back/forward)
-    const lastSyncedSessionIdRef = useRef<string | null>(null)
-    // Message arrays of our own saves. A session holding one of them was
-    // created by our own save, so it must not be treated as an external
-    // switch (with two saves of a new chat at once, the first creates it).
-    const savedMessagesRef = useRef(new WeakSet<object>())
-
-    // Helper: Sync UI state with session data (eliminates duplication)
-    // Track message IDs that are being loaded from session (to skip animations/scroll)
-    const loadedMessageIdsRef = useRef<Set<string>>(new Set())
-    // Track when session was just loaded (to skip auto-save on load)
-    const justLoadedSessionRef = useRef(false)
-
-    const syncUIWithSession = useCallback(
-        (
-            data: {
-                messages: unknown[]
-                xmlSnapshots: [number, string][]
-                diagramXml: string
-                diagramHistory?: { svg: string; xml: string }[]
-            } | null,
-        ) => {
-            const hasRealDiagram = isRealDiagram(data?.diagramXml)
-            if (data) {
-                // Mark all message IDs as loaded from session
-                const messageIds = (data.messages as any[]).map(
-                    (m: any) => m.id,
-                )
-                loadedMessageIdsRef.current = new Set(messageIds)
-                setMessages(data.messages as any)
-                xmlSnapshotsRef.current = new Map(data.xmlSnapshots)
-                if (hasRealDiagram) {
-                    onDisplayChart(data.diagramXml, true)
-                    chartXMLRef.current = data.diagramXml
-                } else {
-                    clearDiagram()
-                    // Clear refs to prevent stale data from being saved
-                    chartXMLRef.current = ""
-                    latestSvgRef.current = ""
-                }
-                setDiagramHistory(data.diagramHistory || [])
-            } else {
-                loadedMessageIdsRef.current = new Set()
-                setMessages([])
-                xmlSnapshotsRef.current.clear()
-                clearDiagram()
-                // Clear refs to prevent stale data from being saved
-                chartXMLRef.current = ""
-                latestSvgRef.current = ""
-                setDiagramHistory([])
-            }
-        },
-        [setMessages, onDisplayChart, clearDiagram, setDiagramHistory],
-    )
-
-    // Helper: Build session data object for saving (eliminates duplication)
-    const buildSessionData = useCallback(
-        async (options: { withThumbnail?: boolean } = {}) => {
-            const currentDiagramXml = chartXMLRef.current || ""
-            // Only capture thumbnail if there's a meaningful diagram (not just empty template)
-            const hasRealDiagram = isRealDiagram(currentDiagramXml)
-            let thumbnailDataUrl: string | undefined
-            if (hasRealDiagram && options.withThumbnail) {
-                const freshThumb = await getThumbnailSvg()
-                if (freshThumb) {
-                    latestSvgRef.current = freshThumb
-                    thumbnailDataUrl = freshThumb
-                } else if (latestSvgRef.current) {
-                    // Use cached thumbnail only if we have a real diagram
-                    thumbnailDataUrl = latestSvgRef.current
-                }
-            }
-            const messages = sanitizeMessages(messagesRef.current)
-            savedMessagesRef.current.add(messages)
-            return {
-                messages,
-                xmlSnapshots: Array.from(xmlSnapshotsRef.current.entries()),
-                diagramXml: currentDiagramXml,
-                thumbnailDataUrl,
-                diagramHistory,
-            }
-        },
-        [diagramHistory, getThumbnailSvg],
-    )
-
-    // Restore messages and XML snapshots from session manager on mount
-    // This effect syncs with the session manager's loaded session
-    useLayoutEffect(() => {
-        if (hasRestoredRef.current) return
-        if (sessionManager.isLoading) return // Wait for session manager to load
-
-        hasRestoredRef.current = true
-
-        try {
-            const currentSession = sessionManager.currentSession
-            if (currentSession) {
-                // Restore from session manager (IndexedDB)
-                justLoadedSessionRef.current = true
-                syncUIWithSession(currentSession)
-            }
-            // Initialize lastSyncedSessionIdRef to prevent sync effect from firing immediately
-            lastSyncedSessionIdRef.current = sessionManager.currentSessionId
-            // Note: Migration from old localStorage format is handled by session-storage.ts
-        } catch (error) {
-            console.error("Failed to restore session:", error)
-            toast.error(dict.errors.sessionCorrupted)
-        } finally {
-            setIsRestored(true)
-        }
-    }, [
-        sessionManager.isLoading,
-        sessionManager.currentSession,
-        syncUIWithSession,
-        dict.errors.sessionCorrupted,
-    ])
-
-    // Sync UI when session changes externally (e.g., URL navigation via back/forward)
-    // This handles changes AFTER initial restore
-    useEffect(() => {
-        if (!isRestored) return // Wait for initial restore to complete
-        if (!sessionManager.isAvailable) return
-
-        const newSessionId = sessionManager.currentSessionId
-        const newSession = sessionManager.currentSession
-
-        // Skip if session ID hasn't changed (our own saves don't change the ID)
-        if (newSessionId === lastSyncedSessionIdRef.current) return
-
-        // Our own save created this session; the UI already shows its content
-        const isOwnNewSession =
-            !!newSession && savedMessagesRef.current.has(newSession.messages)
-
-        // Update last synced ID
-        lastSyncedSessionIdRef.current = newSessionId
-        if (isOwnNewSession) return
-
-        // Sync UI with new session
-        if (newSession) {
-            justLoadedSessionRef.current = true
-            syncUIWithSession(newSession)
-        } else if (!newSession) {
-            syncUIWithSession(null)
-        }
-    }, [
-        isRestored,
-        sessionManager.isAvailable,
-        sessionManager.currentSessionId,
-        sessionManager.currentSession,
-        syncUIWithSession,
-    ])
-
-    // Save messages to session manager (debounced, only when not streaming)
-    // Destructure stable values to avoid effect re-running on every render
-    const {
-        isAvailable: sessionIsAvailable,
-        currentSessionId,
-        saveCurrentSession,
-        getChatGeneration,
-        getSaveTicket,
-    } = sessionManager
-
-    // Use ref for saveCurrentSession to avoid infinite loop
-    // (saveCurrentSession changes after each save, which would re-trigger the effect)
-    const saveCurrentSessionRef = useRef(saveCurrentSession)
-    saveCurrentSessionRef.current = saveCurrentSession
-
-    useEffect(() => {
-        if (!hasRestoredRef.current) return
-        if (!sessionIsAvailable) return
-        // Only save when not actively streaming to avoid write storms
-        if (status === "streaming" || status === "submitted") return
-
-        // Skip auto-save if session was just loaded (to prevent re-ordering)
-        if (justLoadedSessionRef.current) {
-            justLoadedSessionRef.current = false
-            return
-        }
-
-        // Clear any pending save
-        if (localStorageDebounceRef.current) {
-            clearTimeout(localStorageDebounceRef.current)
-        }
-
-        // Capture the chat on screen at schedule time; the save is dropped
-        // if another chat is on screen by the time it runs
-        const scheduledForChat = getChatGeneration()
-        // Capture whether there's a REAL diagram NOW (not just empty template)
-        const hasDiagramNow = isRealDiagram(chartXMLRef.current)
-        // Check if this session was just loaded without a diagram
-        const isNodiagramSession =
-            justLoadedSessionIdRef.current === currentSessionId
-
-        // Debounce: save after 1 second of no changes
-        localStorageDebounceRef.current = setTimeout(async () => {
-            try {
-                if (messages.length > 0 || hasDiagramNow) {
-                    // Taken before the data is read, for the chat it was
-                    // scheduled for
-                    const ticket = {
-                        ...getSaveTicket(),
-                        generation: scheduledForChat,
-                    }
-                    const sessionData = await buildSessionData({
-                        // Only capture thumbnail if there was a diagram AND this isn't a no-diagram session
-                        withThumbnail: hasDiagramNow && !isNodiagramSession,
-                    })
-                    await saveCurrentSessionRef.current(sessionData, ticket)
-                }
-            } catch (error) {
-                console.error("Failed to save session:", error)
-            }
-        }, LOCAL_STORAGE_DEBOUNCE_MS)
-
-        // Cleanup on unmount
-        return () => {
-            if (localStorageDebounceRef.current) {
-                clearTimeout(localStorageDebounceRef.current)
-            }
-        }
-    }, [
-        chartXML,
-        messages,
-        status,
-        sessionIsAvailable,
-        currentSessionId,
-        getChatGeneration,
-        getSaveTicket,
-        buildSessionData,
-    ])
-
-    // Update URL when a new session is created (first message sent)
-    useEffect(() => {
-        if (sessionManager.currentSessionId && !urlSessionId) {
-            // A session was created but URL doesn't have the session param yet
-            router.replace(`?session=${sessionManager.currentSessionId}`, {
-                scroll: false,
-            })
-        }
-    }, [sessionManager.currentSessionId, urlSessionId, router])
-
-    // Save session ID to localStorage
-    useEffect(() => {
-        localStorage.setItem(STORAGE_SESSION_ID_KEY, sessionId)
-    }, [sessionId])
-
-    // Save session when page becomes hidden (tab switch, close, navigate away)
-    // This is more reliable than beforeunload for async IndexedDB operations
-    useEffect(() => {
-        if (!sessionManager.isAvailable) return
-
-        const handleVisibilityChange = async () => {
-            if (
-                document.visibilityState === "hidden" &&
-                (messagesRef.current.length > 0 ||
-                    isRealDiagram(chartXMLRef.current))
-            ) {
-                try {
-                    // Attempt to save session - browser may not wait for completion
-                    // Skip thumbnail capture as it may not complete in time
-                    const ticket = sessionManager.getSaveTicket()
-                    const sessionData = await buildSessionData({
-                        withThumbnail: false,
-                    })
-                    await sessionManager.saveCurrentSession(sessionData, ticket)
-                } catch (error) {
-                    console.error(
-                        "Failed to save session on visibility change:",
-                        error,
-                    )
-                }
-            }
-        }
-
-        document.addEventListener("visibilitychange", handleVisibilityChange)
-        return () =>
-            document.removeEventListener(
-                "visibilitychange",
-                handleVisibilityChange,
-            )
-    }, [sessionManager, buildSessionData])
-
-    const submitInput = async () => {
-        const isProcessing = status === "streaming" || status === "submitted"
-        // Attachments still extracting have no text yet. Template sends call
-        // requestSubmit() and skip the disabled send button, so check here too.
-        const isExtracting =
-            files.some((f) => pdfData.get(f)?.isExtracting) ||
-            Array.from(urlData.values()).some((d) => d.isExtracting)
-        if (input.trim() && !isProcessing && !isExtracting) {
-            // Check if input matches a cached example (only when no messages
-            // yet and the canvas is empty, same rule as the server)
-            if (messages.length === 0 && !hasCells(chartXMLRef.current || "")) {
-                // Pass the file name so a user's own file never matches an example
-                const cached = findCachedResponse(
-                    input.trim(),
-                    files.length > 0,
-                    files.length === 1 ? files[0].name : undefined,
-                )
-                if (cached) {
-                    // Add the user message and a finished display_diagram
-                    // answer, and load its diagram here: these messages never
-                    // reach the tool handler
-                    const toolCallId = `cached-${Date.now()}`
-
-                    // Build user message text including any file content
-                    const userText = await processFilesAndAppendContent(
-                        input,
-                        files,
-                        pdfData,
-                        undefined,
-                        urlData,
-                    )
-
-                    setMessages([
-                        {
-                            id: `user-${Date.now()}`,
-                            role: "user" as const,
-                            parts: [{ type: "text" as const, text: userText }],
-                        },
-                        {
-                            id: `assistant-${Date.now()}`,
-                            role: "assistant" as const,
-                            parts: [
-                                {
-                                    type: "tool-display_diagram" as const,
-                                    toolCallId,
-                                    state: "output-available" as const,
-                                    input: { xml: cached.xml },
-                                    output: "Successfully displayed the diagram.",
-                                },
-                            ],
-                        },
-                    ] as any)
-                    // Snapshot the canvas before the example so editing this message works
-                    xmlSnapshotsRef.current.set(
-                        0,
-                        chartXMLRef.current || BLANK_MXFILE,
-                    )
-                    const prepared = prepareNewDiagram(cached.xml, {
-                        pageId: "page-1",
-                        pageName: "Page-1",
-                    })
-                    if (prepared.ok) onDisplayChart(prepared.xml, true)
-                    setInput("")
-                    sessionStorage.removeItem(SESSION_STORAGE_INPUT_KEY)
-                    setFiles([])
-                    setUrlData(new Map())
-                    return
-                }
-            }
-
-            try {
-                // Build user text by concatenating input with pre-extracted text
-                // (Backend only reads first text part, so we must combine them)
-                const parts: any[] = []
-                const userText = await processFilesAndAppendContent(
-                    input,
-                    files,
-                    pdfData,
-                    parts,
-                    urlData,
-                )
-
-                // Add the combined text as the first part
-                parts.unshift({ type: "text", text: userText })
-
-                await sendWithCurrentDiagram(parts, () => {
-                    setInput("")
-                    sessionStorage.removeItem(SESSION_STORAGE_INPUT_KEY)
-                    setFiles([])
-                    setUrlData(new Map())
-                })
-            } catch (error) {
-                console.error("Error fetching chart data:", error)
-                toast.error(dict.errors.failedToExport)
-            }
-        }
-    }
-
-    const onFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault()
-        // While a send is prepared (attachments read, diagram exported) the
-        // status is still "ready": a second Enter or click would send the
-        // message again
-        if (preparingSendRef.current) return
-        preparingSendRef.current = true
-        try {
-            await submitInput()
-        } finally {
-            preparingSendRef.current = false
-        }
-    }
-
-    // Export the current diagram, snapshot it for this message, and send.
-    // onSent runs right after sending, so the input empties as the message
-    // shows in the chat
-    const sendWithCurrentDiagram = async (
-        parts: any[],
-        onSent?: () => void,
-    ) => {
-        const chartXml = formatXML(await onFetchChart())
-        const previousXml = getPreviousXml(messages.length)
-
-        // Snapshot the full multi-page document (kept fresh by autosave) so
-        // regenerate/edit can restore every page; the model gets page 1 only
-        xmlSnapshotsRef.current.set(
-            messages.length,
-            chartXMLRef.current || chartXml,
-        )
-
-        sendChatMessage(parts, chartXml, previousXml, sessionId)
-        onSent?.()
-    }
-
-    // Send VLM validation feedback as a new user message through the normal send path
-    const handleImproveWithSuggestions = async (feedback: string) => {
-        if (status === "streaming" || status === "submitted") return
-        try {
-            await sendWithCurrentDiagram([{ type: "text", text: feedback }])
-        } catch (error) {
-            console.error("Error fetching chart data:", error)
-            toast.error(dict.errors.failedToExport)
-        }
-    }
-
-    // The current chat could not be saved (storage full). The list where
-    // old chats can be deleted shows only in an empty chat, so let the user
-    // go on without saving. It replaces the plain message, and has its own
-    // id so a later failed auto-save does not take its button away.
-    const offerToContinueUnsaved = useCallback(
-        (proceed: () => void) => {
-            toast.dismiss("session-save-failed")
-            toast.error(dict.errors.sessionSaveFailedLeave, {
-                id: "session-save-leave",
-                duration: 15000,
-                action: {
-                    label: dict.errors.continueWithoutSaving,
-                    onClick: proceed,
-                },
-            })
-        },
-        [dict],
-    )
-
-    // A new turn makes the offer stale: going on would clear the chat while
-    // the answer streams in
-    useEffect(() => {
-        if (status === "submitted" || status === "streaming") {
-            toast.dismiss("session-save-leave")
-        }
-    }, [status])
-
-    // Handle session switching from history dropdown
-    const handleSelectSession = useCallback(
-        async (sessionId: string) => {
-            if (!sessionManager.isAvailable) return
-
-            // Switch to selected session
-            const open = async () => {
-                const sessionData =
-                    await sessionManager.switchSession(sessionId)
-                if (!sessionData) return
-                const hasRealDiagram = isRealDiagram(sessionData.diagramXml)
-                justLoadedSessionRef.current = true
-
-                // CRITICAL: Update latestSvgRef with the NEW session's thumbnail
-                // This prevents stale thumbnail from previous session being used by auto-save
-                latestSvgRef.current = sessionData.thumbnailDataUrl || ""
-
-                // Track if this session has no real diagram - to prevent thumbnail contamination
-                if (!hasRealDiagram) {
-                    justLoadedSessionIdRef.current = sessionId
-                } else {
-                    justLoadedSessionIdRef.current = null
-                }
-                setValidationStates({}) // Clear validation states when switching sessions
-                syncUIWithSession(sessionData)
-                router.replace(`?session=${sessionId}`, { scroll: false })
-            }
-
-            // Save current session before switching (also a diagram drawn
-            // without messages); if that failed (storage full), stay on it
-            // unless the user goes on without saving it
-            if (messages.length > 0 || isRealDiagram(chartXMLRef.current)) {
-                // Of the chat on screen now, also if another one comes on
-                // screen while the thumbnail is taken
-                const ticket = sessionManager.getSaveTicket()
-                const sessionData = await buildSessionData({
-                    withThumbnail: true,
-                })
-                if (
-                    !(await sessionManager.saveCurrentSession(
-                        sessionData,
-                        ticket,
-                    ))
-                ) {
-                    offerToContinueUnsaved(open)
-                    return
-                }
-            }
-            await open()
-        },
-        [
-            sessionManager,
-            messages,
-            buildSessionData,
-            syncUIWithSession,
-            router,
-            offerToContinueUnsaved,
-        ],
-    )
-
-    // Handle session deletion from history dropdown
-    const handleDeleteSession = useCallback(
-        async (sessionId: string) => {
-            if (!sessionManager.isAvailable) return
-            const result = await sessionManager.deleteSession(sessionId)
-
-            if (result.wasCurrentSession) {
-                // Deleted current session - clear UI and URL
-                syncUIWithSession(null)
-                router.replace(pathname, { scroll: false })
-            }
-        },
-        [sessionManager, syncUIWithSession, router, pathname],
-    )
-
-    const startNewChat = useCallback(() => {
-        // Clear session manager state BEFORE clearing URL to prevent race condition
-        // (otherwise the URL update effect would restore the old session URL)
-        sessionManager.clearCurrentSession()
-
-        // Clear UI state (can't use syncUIWithSession here because we also need to clear files)
-        setMessages([])
-        setInput("")
-        clearDiagram()
-        setDiagramHistory([])
-        setValidationStates({}) // Clear validation states to prevent memory leak
-        handleFileChange([]) // Use handleFileChange to also clear pdfData
-        setUrlData(new Map())
-        const newSessionId = `session-${Date.now()}-${Math.random()
-            .toString(36)
-            .slice(2, 9)}`
-        setSessionId(newSessionId)
-        xmlSnapshotsRef.current.clear()
-        sessionStorage.removeItem(SESSION_STORAGE_INPUT_KEY)
-        toast.success(dict.dialogs.clearSuccess)
-
-        // Clear URL param to show blank state
-        router.replace(pathname, { scroll: false })
-
-        // After starting a fresh chat, move focus back to the chat input
-        setShouldFocusInput(true)
-    }, [
-        clearDiagram,
-        handleFileChange,
-        setMessages,
-        setSessionId,
-        sessionManager,
-        router,
-        dict.dialogs.clearSuccess,
-        setDiagramHistory,
-        pathname,
-    ])
-
-    const handleNewChat = useCallback(async () => {
-        // Save current session before creating new one (also a diagram
-        // drawn without messages)
-        if (
-            sessionManager.isAvailable &&
-            (messages.length > 0 || isRealDiagram(chartXMLRef.current))
-        ) {
-            const ticket = sessionManager.getSaveTicket()
-            const sessionData = await buildSessionData({ withThumbnail: true })
-            // Not saved (storage full): keep the chat on screen, unless the
-            // user goes on without saving it
-            if (
-                !(await sessionManager.saveCurrentSession(sessionData, ticket))
-            ) {
-                offerToContinueUnsaved(startNewChat)
-                return
-            }
-            // Refresh sessions list to ensure dropdown shows the saved session
-            await sessionManager.refreshSessions()
-        }
-        startNewChat()
-    }, [
-        sessionManager,
-        messages,
-        buildSessionData,
-        offerToContinueUnsaved,
-        startNewChat,
-    ])
-
-    // Handle sending a template directly (called from TemplatePanel)
-    const handleSendTemplate = useCallback(
-        async (template: { prompt: string }) => {
-            // Keep attachments: they are sent along with the template prompt
-            flushSync(() => {
-                setInput(template.prompt)
-            })
-
-            const formElement = document.getElementById(
-                "chat-form",
-            ) as HTMLFormElement | null
-            if (formElement) {
-                formElement.requestSubmit()
-            }
-        },
-        [setInput],
-    )
-
-    const handleInputChange = (
-        e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-    ) => {
-        saveInputToSessionStorage(e.target.value)
-        setInput(e.target.value)
-    }
-
-    const saveInputToSessionStorage = (input: string) => {
-        sessionStorage.setItem(SESSION_STORAGE_INPUT_KEY, input)
-    }
-
-    // Helper functions for message actions (regenerate/edit)
-    // Extract previous XML snapshot (first page, as sent to the model) before a given message index
-    const getPreviousXml = (beforeIndex: number): string => {
-        const snapshotKeys = Array.from(xmlSnapshotsRef.current.keys())
-            .filter((k) => k < beforeIndex)
-            .sort((a, b) => b - a)
-        return snapshotKeys.length > 0
-            ? getFirstPageXml(
-                  xmlSnapshotsRef.current.get(snapshotKeys[0]) || "",
-              )
-            : ""
-    }
-
-    // Restore diagram from snapshot and update ref
-    const restoreDiagramFromSnapshot = (savedXml: string) => {
-        onDisplayChart(savedXml, true) // Skip validation for trusted snapshots
-        chartXMLRef.current = savedXml
-    }
-
-    // Clean up snapshots after a given message index
-    const cleanupSnapshotsAfter = (messageIndex: number) => {
-        for (const key of xmlSnapshotsRef.current.keys()) {
-            if (key > messageIndex) {
-                xmlSnapshotsRef.current.delete(key)
-            }
-        }
-    }
-
-    // Handle stop button click
-    const handleStop = useCallback(() => {
-        stoppedRef.current = true
-        stopCountRef.current++
-        // A running screenshot check holds up the chat (the SDK waits for
-        // the tool handler): end it, so the call gets its result now
-        cancelValidation()
-        const lastMessage = messages[messages.length - 1]
-        // Calls the tool handler already took can still show as streaming:
-        // the messages update at most every 150 ms (useChat throttle)
-        const toolParts = lastMessage?.parts?.filter(
-            (part: any) =>
-                part.type?.startsWith("tool-") &&
-                part.state === "input-streaming" &&
-                !processedToolCallsRef.current.has(part.toolCallId),
-        )
-
-        toolParts?.forEach((part: any) => {
-            if (part.toolCallId) {
-                addToolOutput({
-                    tool: part.type.replace("tool-", ""),
-                    toolCallId: part.toolCallId,
-                    state: "output-error",
-                    errorText: "Stopped by user",
-                })
-            }
-        })
-
-        stop()
-    }, [messages, addToolOutput, stop, cancelValidation])
-
-    // Send chat message with headers
-    const sendChatMessage = (
-        parts: any,
-        xml: string,
-        previousXml: string,
-        sessionId: string,
-    ) => {
-        // Reset all retry/continuation state on user-initiated message
-        autoRetryCountRef.current = 0
-        continuationRetryCountRef.current = 0
-        validationRetryCountRef.current = 0
-        partialXmlRef.current = ""
-        stoppedRef.current = false
-
-        const config = getSelectedAIConfig()
-
-        sendMessage(
-            { parts },
-            {
-                body: { xml, previousXml, sessionId, customSystemMessage },
-                headers: {
-                    "x-access-code": config.accessCode,
-                    ...(config.aiProvider && {
-                        "x-ai-provider": config.aiProvider,
-                        ...(config.aiBaseUrl && {
-                            "x-ai-base-url": config.aiBaseUrl,
-                        }),
-                        ...(config.aiApiKey && {
-                            "x-ai-api-key": config.aiApiKey,
-                        }),
-                        ...(config.aiModel && { "x-ai-model": config.aiModel }),
-                        // AWS Bedrock credentials
-                        ...(config.awsAccessKeyId && {
-                            "x-aws-access-key-id": config.awsAccessKeyId,
-                        }),
-                        ...(config.awsSecretAccessKey && {
-                            "x-aws-secret-access-key":
-                                config.awsSecretAccessKey,
-                        }),
-                        ...(config.awsRegion && {
-                            "x-aws-region": config.awsRegion,
-                        }),
-                        ...(config.awsSessionToken && {
-                            "x-aws-session-token": config.awsSessionToken,
-                        }),
-                        // Vertex AI credentials (Express Mode)
-                        ...(config.vertexApiKey && {
-                            "x-vertex-api-key": config.vertexApiKey,
-                        }),
-                    }),
-                    // Send selected model ID for server model lookup (apiKeyEnv/baseUrlEnv)
-                    ...(config.selectedModelId && {
-                        "x-selected-model-id": config.selectedModelId,
-                    }),
-                    ...(minimalStyle && {
-                        "x-minimal-style": "true",
-                    }),
-                    ...(maxOutputTokens && {
-                        "x-max-output-tokens": maxOutputTokens,
-                    }),
-                },
-            },
-        )
-    }
-
-    // Process files and append content to user text (handles PDF, text, and optionally images)
-    const processFilesAndAppendContent = async (
-        baseText: string,
-        files: File[],
-        pdfData: Map<File, FileData>,
-        imageParts?: any[],
-        urlDataParam?: Map<string, UrlData>,
-    ): Promise<string> => {
-        let userText = baseText
-
-        for (const file of files) {
-            if (isPdfFile(file)) {
-                const extracted = pdfData.get(file)
-                if (extracted?.text) {
-                    userText += `\n\n[PDF: ${file.name}]\n${extracted.text}`
-                }
-            } else if (isTextFile(file)) {
-                const extracted = pdfData.get(file)
-                if (extracted?.text) {
-                    userText += `\n\n[File: ${file.name}]\n${extracted.text}`
-                }
-            } else if (imageParts) {
-                // Handle as image (only if imageParts array provided)
-                const reader = new FileReader()
-                const dataUrl = await new Promise<string>((resolve) => {
-                    reader.onload = () => resolve(reader.result as string)
-                    reader.readAsDataURL(file)
-                })
-
-                imageParts.push({
-                    type: "file",
-                    url: dataUrl,
-                    mediaType: file.type,
-                })
-            }
-        }
-
-        if (urlDataParam) {
-            for (const [url, data] of urlDataParam) {
-                if (data.content) {
-                    userText += `\n\n[URL: ${url}]\nTitle: ${data.title}\n\n${data.content}`
-                }
-            }
-        }
-
-        return userText
-    }
-
-    const handleRegenerate = async (messageIndex: number) => {
-        const isProcessing = status === "streaming" || status === "submitted"
-        if (isProcessing) return
-
-        // Find the user message before this assistant message
-        let userMessageIndex = messageIndex - 1
-        while (
-            userMessageIndex >= 0 &&
-            messages[userMessageIndex].role !== "user"
-        ) {
-            userMessageIndex--
-        }
-
-        if (userMessageIndex < 0) return
-
-        const userMessage = messages[userMessageIndex]
-        const userParts = userMessage.parts
-
-        // Get the text from the user message
-        const textPart = userParts?.find((p: any) => p.type === "text")
-        if (!textPart) return
-
-        // Get the saved XML snapshot for this user message
-        const savedXml = xmlSnapshotsRef.current.get(userMessageIndex)
-        if (!savedXml) {
-            console.error(
-                "No saved XML snapshot for message index:",
-                userMessageIndex,
-            )
-            return
-        }
-
-        // Get previous XML and restore diagram state
-        const previousXml = getPreviousXml(userMessageIndex)
-        restoreDiagramFromSnapshot(savedXml)
-
-        // Clean up snapshots for messages after the user message (they will be removed)
-        cleanupSnapshotsAfter(userMessageIndex)
-
-        // Remove the user message AND assistant message onwards (sendMessage will re-add the user message)
-        // Use flushSync to ensure state update is processed synchronously before sending
-        const newMessages = messages.slice(0, userMessageIndex)
-        flushSync(() => {
-            setMessages(newMessages)
-        })
-
-        // Now send the message after state is guaranteed to be updated
-        sendChatMessage(
-            userParts,
-            getFirstPageXml(savedXml),
-            previousXml,
-            sessionId,
-        )
-    }
-
-    const handleEditMessage = async (messageIndex: number, newText: string) => {
-        const isProcessing = status === "streaming" || status === "submitted"
-        if (isProcessing) return
-
-        const message = messages[messageIndex]
-        if (!message || message.role !== "user") return
-
-        // Get the saved XML snapshot for this user message
-        const savedXml = xmlSnapshotsRef.current.get(messageIndex)
-        if (!savedXml) {
-            console.error(
-                "No saved XML snapshot for message index:",
-                messageIndex,
-            )
-            return
-        }
-
-        // Get previous XML and restore diagram state
-        const previousXml = getPreviousXml(messageIndex)
-        restoreDiagramFromSnapshot(savedXml)
-
-        // Clean up snapshots for messages after the user message (they will be removed)
-        cleanupSnapshotsAfter(messageIndex)
-
-        // Create new parts with updated text. The edit box only shows the typed
-        // text, so keep the appended PDF/file/URL content
-        const newParts = message.parts?.map((part: any) => {
-            if (part.type === "text") {
-                const appended =
-                    part.text.match(APPENDED_FILE_SECTIONS_PATTERN)?.[0] ?? ""
-                return { ...part, text: newText + appended }
-            }
-            return part
-        }) || [{ type: "text", text: newText }]
-
-        // Remove the user message AND assistant message onwards (sendMessage will re-add the user message)
-        // Use flushSync to ensure state update is processed synchronously before sending
-        const newMessages = messages.slice(0, messageIndex)
-        flushSync(() => {
-            setMessages(newMessages)
-        })
-
-        // Now send the edited message after state is guaranteed to be updated
-        sendChatMessage(
-            newParts,
-            getFirstPageXml(savedXml),
-            previousXml,
-            sessionId,
-        )
-    }
-
-    // Collapsed view (desktop only)
-    if (!isVisible && !isMobile) {
-        return (
-            <div className="h-full flex flex-col items-center pt-4 bg-card border border-border/30 rounded-xl">
-                <ButtonWithTooltip
-                    tooltipContent={dict.nav.showPanel}
-                    variant="ghost"
-                    size="icon"
-                    onClick={onToggleVisibility}
-                    className="hover:bg-accent transition-colors"
-                >
-                    <PanelRightOpen className="h-5 w-5 text-muted-foreground" />
-                </ButtonWithTooltip>
-                <div
-                    className="text-sm font-medium text-muted-foreground mt-8 tracking-wide"
-                    style={{
-                        writingMode: "vertical-rl",
-                    }}
-                >
-                    {dict.nav.aiChat}
-                </div>
-            </div>
-        )
-    }
-
-    // Full view
-    return (
-        <div
-            className={cn(
-                "h-full flex flex-col bg-card shadow-soft rounded-xl border border-border/30 relative",
-                shouldAnimatePanel && "animate-slide-in-right",
-            )}
-        >
-            <Toaster
-                position="bottom-left"
-                richColors
-                expand
-                toastOptions={{
-                    style: {
-                        maxWidth: "480px",
-                    },
-                    duration: 2000,
-                }}
-            />
-            {/* Header */}
-            <header
-                className={`${isMobile ? "px-3 py-2" : "px-5 py-4"} border-b border-border/50`}
-            >
-                <div className="flex items-center justify-between">
-                    <button
-                        type="button"
-                        onClick={handleNewChat}
-                        disabled={
-                            status === "streaming" || status === "submitted"
-                        }
-                        className="flex items-center gap-2 overflow-x-hidden hover:opacity-80 transition-opacity cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
-                        title={dict.nav.newChat}
-                    >
-                        <div className="flex items-center gap-2">
-                            <Image
-                                src={
-                                    darkMode
-                                        ? "/favicon-white.svg"
-                                        : "/favicon.ico"
-                                }
-                                alt="Next AI Drawio"
-                                width={isMobile ? 24 : 28}
-                                height={isMobile ? 24 : 28}
-                                className="rounded flex-shrink-0"
-                            />
-                            <h1
-                                className={`${isMobile ? "text-sm" : "text-base"} font-semibold tracking-tight whitespace-nowrap`}
-                            >
-                                Next AI Drawio
-                            </h1>
-                        </div>
-                    </button>
-                    <div className="flex items-center gap-1 justify-end overflow-visible">
-                        <ButtonWithTooltip
-                            tooltipContent={dict.nav.newChat}
-                            variant="ghost"
-                            size="icon"
-                            onClick={handleNewChat}
-                            disabled={
-                                status === "streaming" || status === "submitted"
-                            }
-                            className="hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed"
-                            data-testid="new-chat-button"
-                        >
-                            <MessageSquarePlus
-                                className={`${isMobile ? "h-4 w-4" : "h-5 w-5"} text-muted-foreground`}
-                            />
-                        </ButtonWithTooltip>
-
-                        <ButtonWithTooltip
-                            tooltipContent={dict.nav.settings}
-                            variant="ghost"
-                            size="icon"
-                            onClick={() => setShowSettingsDialog(true)}
-                            className="hover:bg-accent"
-                            data-testid="settings-button"
-                        >
-                            <Settings
-                                className={`${isMobile ? "h-4 w-4" : "h-5 w-5"} text-muted-foreground`}
-                            />
-                        </ButtonWithTooltip>
-                        <div className="hidden sm:flex items-center gap-2">
-                            {!isMobile && (
-                                <ButtonWithTooltip
-                                    tooltipContent={dict.nav.hidePanel}
-                                    variant="ghost"
-                                    size="icon"
-                                    className="hover:bg-accent"
-                                    onClick={onToggleVisibility}
-                                >
-                                    <PanelRightClose className="h-5 w-5 text-muted-foreground" />
-                                </ButtonWithTooltip>
-                            )}
-                        </div>
-                    </div>
-                </div>
-            </header>
-
-            {/* Messages */}
-            <main className="flex-1 w-full overflow-hidden">
-                <ChatMessageDisplay
-                    onOpenModelConfig={() => setShowModelConfigDialog(true)}
-                    messages={messages}
-                    setInput={setInput}
-                    setFiles={handleFileChange}
-                    processedToolCallsRef={processedToolCallsRef}
-                    editDiagramOriginalXmlRef={editDiagramOriginalXmlRef}
-                    sessionId={sessionId}
-                    onRegenerate={handleRegenerate}
-                    status={status}
-                    onEditMessage={handleEditMessage}
-                    isRestored={isRestored}
-                    sessions={sessionManager.sessions}
-                    onSelectSession={handleSelectSession}
-                    onDeleteSession={handleDeleteSession}
-                    loadedMessageIdsRef={loadedMessageIdsRef}
-                    validationStates={validationStates}
-                    onImproveWithSuggestions={handleImproveWithSuggestions}
-                    onSendTemplate={handleSendTemplate}
-                    currentInput={input}
-                />
-            </main>
-
-            {/* Dev XML Streaming Simulator - only in development */}
-            {DEBUG && (
-                <DevXmlSimulator
-                    setMessages={setMessages}
-                    onDisplayChart={onDisplayChart}
-                    onShowQuotaToast={() =>
-                        quotaManager.showQuotaLimitToast(50, 50)
-                    }
-                />
-            )}
-
-            {/* Input */}
-            <footer
-                className={`${isMobile ? "p-2" : "p-4"} border-t border-border/50 bg-card/50`}
-            >
-                <ChatInput
-                    input={input}
-                    status={status}
-                    onSubmit={onFormSubmit}
-                    onChange={handleInputChange}
-                    onStop={handleStop}
-                    files={files}
-                    onFileChange={handleFileChange}
-                    pdfData={pdfData}
-                    urlData={urlData}
-                    onUrlChange={setUrlData}
-                    sessionId={sessionId}
-                    error={error}
-                    models={modelConfig.models}
-                    selectedModelId={modelConfig.selectedModelId}
-                    onModelSelect={modelConfig.setSelectedModelId}
-                    onConfigureModels={() => setShowModelConfigDialog(true)}
-                    showUnvalidatedModels={modelConfig.showUnvalidatedModels}
-                    shouldFocus={shouldFocusInput}
-                    onFocused={() => setShouldFocusInput(false)}
-                />
-            </footer>
-
-            <SettingsDialog
-                open={showSettingsDialog}
-                onOpenChange={setShowSettingsDialog}
-                drawioUi={drawioUi}
-                onDrawioUiChange={onDrawioUiChange}
-                darkMode={darkMode}
-                onToggleDarkMode={onToggleDarkMode}
-                minimalStyle={minimalStyle}
-                onMinimalStyleChange={setMinimalStyle}
-                vlmValidationEnabled={vlmValidationEnabled}
-                onVlmValidationChange={handleVlmValidationChange}
-                customSystemMessage={customSystemMessage}
-                onCustomSystemMessageChange={handleCustomSystemMessageChange}
-                maxOutputTokens={maxOutputTokens}
-                onMaxOutputTokensChange={handleMaxOutputTokensChange}
-                onOpenModelConfig={() => setShowModelConfigDialog(true)}
-            />
-
-            <ModelConfigDialog
-                open={showModelConfigDialog}
-                onOpenChange={setShowModelConfigDialog}
-                modelConfig={modelConfig}
-            />
-        </div>
-    )
-}
diff --git a/components/chat/ChatLobby.tsx b/components/chat/ChatLobby.tsx
deleted file mode 100644
index 9f6425bf..00000000
--- a/components/chat/ChatLobby.tsx
+++ /dev/null
@@ -1,360 +0,0 @@
-"use client"
-
-import {
-    ChevronDown,
-    ChevronUp,
-    MessageSquare,
-    Search,
-    Trash2,
-    X,
-} from "lucide-react"
-import { useEffect, useState } from "react"
-import { TemplatePanel } from "@/components/chat/TemplatePanel"
-import ExamplePanel from "@/components/chat-example-panel"
-import Image from "@/components/image-with-basepath"
-import {
-    AlertDialog,
-    AlertDialogAction,
-    AlertDialogCancel,
-    AlertDialogContent,
-    AlertDialogDescription,
-    AlertDialogFooter,
-    AlertDialogHeader,
-    AlertDialogTitle,
-} from "@/components/ui/alert-dialog"
-import { STORAGE_KEYS } from "@/lib/storage"
-import type { Template } from "@/lib/template-storage"
-
-interface SessionMetadata {
-    id: string
-    title: string
-    updatedAt: number
-    thumbnailDataUrl?: string
-}
-
-interface ChatLobbyProps {
-    sessions: SessionMetadata[]
-    onSelectSession: (id: string) => void
-    onDeleteSession?: (id: string) => void
-    setInput: (input: string) => void
-    setFiles: (files: File[]) => void
-    onSendTemplate?: (template: Template) => void
-    currentInput?: string
-    dict: {
-        sessionHistory?: {
-            recentChats?: string
-            searchPlaceholder?: string
-            noResults?: string
-            justNow?: string
-            deleteTitle?: string
-            deleteDescription?: string
-        }
-        templates?: {
-            title?: string
-            myTemplates?: string
-        }
-        examples?: {
-            quickExamples?: string
-        }
-        common: {
-            delete: string
-            cancel: string
-        }
-    }
-}
-
-// Helper to format session date
-function formatSessionDate(
-    timestamp: number,
-    dict?: { justNow?: string },
-): string {
-    const date = new Date(timestamp)
-    const now = new Date()
-    const diffMs = now.getTime() - date.getTime()
-    const diffMins = Math.floor(diffMs / (1000 * 60))
-    const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
-
-    if (diffMins < 1) return dict?.justNow || "Just now"
-    if (diffMins < 60) return `${diffMins}m ago`
-    if (diffHours < 24) return `${diffHours}h ago`
-
-    return date.toLocaleDateString(undefined, {
-        month: "short",
-        day: "numeric",
-    })
-}
-
-function getPanelVisibility() {
-    if (typeof window === "undefined")
-        return { recentChats: true, myTemplates: true, quickExamples: true }
-    return {
-        recentChats:
-            localStorage.getItem(STORAGE_KEYS.showRecentChats) !== "false",
-        myTemplates:
-            localStorage.getItem(STORAGE_KEYS.showMyTemplates) !== "false",
-        quickExamples:
-            localStorage.getItem(STORAGE_KEYS.showQuickExamples) !== "false",
-    }
-}
-
-export function ChatLobby({
-    sessions,
-    onSelectSession,
-    onDeleteSession,
-    setInput,
-    setFiles,
-    onSendTemplate,
-    currentInput = "",
-    dict,
-}: ChatLobbyProps) {
-    const [templatesExpanded, setTemplatesExpanded] = useState(true)
-    const [examplesExpanded, setExamplesExpanded] = useState(true)
-    const [panelVisibility, setPanelVisibility] = useState(getPanelVisibility)
-    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
-    const [sessionToDelete, setSessionToDelete] = useState<string | null>(null)
-    const [searchQuery, setSearchQuery] = useState("")
-
-    // Listen for panel visibility changes from settings
-    useEffect(() => {
-        const handler = () => setPanelVisibility(getPanelVisibility())
-        window.addEventListener("panelVisibilityChange", handler)
-        return () =>
-            window.removeEventListener("panelVisibilityChange", handler)
-    }, [])
-
-    const hasHistory = sessions.length > 0
-
-    if (!hasHistory) {
-        if (!panelVisibility.myTemplates && !panelVisibility.quickExamples) {
-            return null
-        }
-        return (
-            <div className="animate-fade-in">
-                {panelVisibility.myTemplates && (
-                    <TemplatePanel
-                        setInput={setInput}
-                        onSendTemplate={onSendTemplate}
-                        currentInput={currentInput}
-                    />
-                )}
-                {panelVisibility.quickExamples && (
-                    <div className={panelVisibility.myTemplates ? "mt-6" : ""}>
-                        <ExamplePanel setInput={setInput} setFiles={setFiles} />
-                    </div>
-                )}
-            </div>
-        )
-    }
-
-    // Show history + collapsible examples when there are sessions
-    return (
-        <div className="py-6 px-2 animate-fade-in">
-            {/* Recent Chats Section */}
-            {panelVisibility.recentChats && (
-                <div className="mb-6">
-                    <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider px-1 mb-3">
-                        {dict.sessionHistory?.recentChats || "Recent Chats"}
-                    </p>
-                    {/* Search Bar */}
-                    <div className="relative mb-3">
-                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-                        <input
-                            type="text"
-                            placeholder={
-                                dict.sessionHistory?.searchPlaceholder ||
-                                "Search chats..."
-                            }
-                            value={searchQuery}
-                            onChange={(e) => setSearchQuery(e.target.value)}
-                            className="w-full pl-9 pr-3 py-2 text-sm rounded-lg border border-border/60 bg-background focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary/50 transition-all"
-                        />
-                        {searchQuery && (
-                            <button
-                                type="button"
-                                onClick={() => setSearchQuery("")}
-                                className="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-muted transition-colors"
-                            >
-                                <X className="w-3 h-3 text-muted-foreground" />
-                            </button>
-                        )}
-                    </div>
-                    <div className="space-y-2">
-                        {sessions
-                            .filter((session) =>
-                                session.title
-                                    .toLowerCase()
-                                    .includes(searchQuery.toLowerCase()),
-                            )
-                            .map((session) => (
-                                // biome-ignore lint/a11y/useSemanticElements: Cannot use button - has nested delete button which causes hydration error
-                                <div
-                                    key={session.id}
-                                    role="button"
-                                    tabIndex={0}
-                                    className="group w-full flex items-center gap-3 p-3 rounded-xl border border-border/60 bg-card hover:bg-accent/50 hover:border-primary/30 transition-all duration-200 cursor-pointer text-left"
-                                    onClick={() => onSelectSession(session.id)}
-                                    onKeyDown={(e) => {
-                                        // Ignore keys bubbling up from the delete button
-                                        if (e.target !== e.currentTarget) return
-                                        if (
-                                            e.key === "Enter" ||
-                                            e.key === " "
-                                        ) {
-                                            e.preventDefault()
-                                            onSelectSession(session.id)
-                                        }
-                                    }}
-                                >
-                                    {session.thumbnailDataUrl ? (
-                                        <div className="w-12 h-12 shrink-0 rounded-lg border bg-white overflow-hidden">
-                                            <Image
-                                                src={session.thumbnailDataUrl}
-                                                alt=""
-                                                width={48}
-                                                height={48}
-                                                className="object-contain w-full h-full"
-                                            />
-                                        </div>
-                                    ) : (
-                                        <div className="w-12 h-12 shrink-0 rounded-lg bg-primary/10 flex items-center justify-center">
-                                            <MessageSquare className="w-5 h-5 text-primary" />
-                                        </div>
-                                    )}
-                                    <div className="min-w-0 flex-1">
-                                        <div className="text-sm font-medium truncate">
-                                            {session.title}
-                                        </div>
-                                        <div className="text-xs text-muted-foreground">
-                                            {formatSessionDate(
-                                                session.updatedAt,
-                                                dict.sessionHistory,
-                                            )}
-                                        </div>
-                                    </div>
-                                    {onDeleteSession && (
-                                        <button
-                                            type="button"
-                                            onClick={(e) => {
-                                                e.stopPropagation()
-                                                setSessionToDelete(session.id)
-                                                setDeleteDialogOpen(true)
-                                            }}
-                                            className="p-1.5 rounded-lg opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-all"
-                                            title={dict.common.delete}
-                                        >
-                                            <Trash2 className="w-4 h-4" />
-                                        </button>
-                                    )}
-                                </div>
-                            ))}
-                        {sessions.filter((s) =>
-                            s.title
-                                .toLowerCase()
-                                .includes(searchQuery.toLowerCase()),
-                        ).length === 0 &&
-                            searchQuery && (
-                                <p className="text-sm text-muted-foreground text-center py-4">
-                                    {dict.sessionHistory?.noResults ||
-                                        "No chats found"}
-                                </p>
-                            )}
-                    </div>
-                </div>
-            )}
-
-            {/* Collapsible My Templates Section */}
-            {panelVisibility.myTemplates && (
-                <div className="border-t border-border/50 pt-4">
-                    <button
-                        type="button"
-                        onClick={() => setTemplatesExpanded(!templatesExpanded)}
-                        className="w-full flex items-center justify-between px-1 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider hover:text-foreground transition-colors"
-                    >
-                        <span>
-                            {dict.templates?.myTemplates || "My Templates"}
-                        </span>
-                        {templatesExpanded ? (
-                            <ChevronUp className="w-4 h-4" />
-                        ) : (
-                            <ChevronDown className="w-4 h-4" />
-                        )}
-                    </button>
-                    {templatesExpanded && (
-                        <div className="mt-2">
-                            <TemplatePanel
-                                setInput={setInput}
-                                onSendTemplate={onSendTemplate}
-                                currentInput={currentInput}
-                            />
-                        </div>
-                    )}
-                </div>
-            )}
-
-            {/* Collapsible Quick Examples Section */}
-            {panelVisibility.quickExamples && (
-                <div className="border-t border-border/50 pt-4">
-                    <button
-                        type="button"
-                        onClick={() => setExamplesExpanded(!examplesExpanded)}
-                        className="w-full flex items-center justify-between px-1 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider hover:text-foreground transition-colors"
-                    >
-                        <span>
-                            {dict.examples?.quickExamples || "Quick Examples"}
-                        </span>
-                        {examplesExpanded ? (
-                            <ChevronUp className="w-4 h-4" />
-                        ) : (
-                            <ChevronDown className="w-4 h-4" />
-                        )}
-                    </button>
-                    {examplesExpanded && (
-                        <div className="mt-2">
-                            <ExamplePanel
-                                setInput={setInput}
-                                setFiles={setFiles}
-                                minimal
-                            />
-                        </div>
-                    )}
-                </div>
-            )}
-
-            {/* Delete Confirmation Dialog */}
-            <AlertDialog
-                open={deleteDialogOpen}
-                onOpenChange={setDeleteDialogOpen}
-            >
-                <AlertDialogContent className="max-w-sm">
-                    <AlertDialogHeader>
-                        <AlertDialogTitle>
-                            {dict.sessionHistory?.deleteTitle ||
-                                "Delete this chat?"}
-                        </AlertDialogTitle>
-                        <AlertDialogDescription>
-                            {dict.sessionHistory?.deleteDescription ||
-                                "This will permanently delete this chat session and its diagram. This action cannot be undone."}
-                        </AlertDialogDescription>
-                    </AlertDialogHeader>
-                    <AlertDialogFooter>
-                        <AlertDialogCancel>
-                            {dict.common.cancel}
-                        </AlertDialogCancel>
-                        <AlertDialogAction
-                            onClick={() => {
-                                if (sessionToDelete && onDeleteSession) {
-                                    onDeleteSession(sessionToDelete)
-                                }
-                                setDeleteDialogOpen(false)
-                                setSessionToDelete(null)
-                            }}
-                            className="border border-red-300 bg-red-50 text-red-700 hover:bg-red-100 hover:border-red-400"
-                        >
-                            {dict.common.delete}
-                        </AlertDialogAction>
-                    </AlertDialogFooter>
-                </AlertDialogContent>
-            </AlertDialog>
-        </div>
-    )
-}
diff --git a/components/chat/TemplatePanel.tsx b/components/chat/TemplatePanel.tsx
index 45e43da1..24d55c1e 100644
--- a/components/chat/TemplatePanel.tsx
+++ b/components/chat/TemplatePanel.tsx
@@ -333,14 +333,6 @@ export function TemplatePanel({
     if (!loading && templates.length === 0) {
         return (
             <div className="py-6 px-2 animate-fade-in">
-                <div className="text-center mb-6">
-                    <h2 className="text-lg font-semibold text-foreground mb-2">
-                        {dict.templates.title}
-                    </h2>
-                    <p className="text-sm text-muted-foreground max-w-xs mx-auto">
-                        {dict.templates.subtitle}
-                    </p>
-                </div>
                 <div className="flex flex-col items-center justify-center py-8 px-4">
                     <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center mb-4">
                         <FileText className="w-8 h-8 text-primary/60" />
diff --git a/components/chat/ToolCallCard.tsx b/components/chat/ToolCallCard.tsx
deleted file mode 100644
index 8ada80e2..00000000
--- a/components/chat/ToolCallCard.tsx
+++ /dev/null
@@ -1,267 +0,0 @@
-"use client"
-
-import { Check, ChevronDown, ChevronUp, Copy, Cpu } from "lucide-react"
-import type { Dispatch, SetStateAction } from "react"
-import { CodeBlock } from "@/components/code-block"
-import { isMxCellXmlComplete } from "@/lib/utils"
-import type { DiagramOperation, ToolPartLike } from "./types"
-
-interface ToolCallCardProps {
-    part: ToolPartLike
-    expandedTools: Record<string, boolean>
-    setExpandedTools: Dispatch<SetStateAction<Record<string, boolean>>>
-    onCopy: (callId: string, text: string, isToolCall: boolean) => void
-    copiedToolCallId: string | null
-    copyFailedToolCallId: string | null
-    dict: {
-        tools: { complete: string }
-        chat: { copied: string; failedToCopy: string; copyResponse: string }
-    }
-}
-
-function OperationsDisplay({ operations }: { operations: DiagramOperation[] }) {
-    // Streamed or invalid input can hold anything: show only what React can
-    // render (an object in place of a string would crash the whole chat)
-    const shown = operations.filter(
-        (op) => typeof (op as { operation?: unknown })?.operation === "string",
-    )
-    const text = (value: unknown) => (typeof value === "string" ? value : "")
-    return (
-        <div className="space-y-3">
-            {shown.map((op, index) => (
-                <div
-                    key={`${op.operation}-${text(op.cell_id)}-${index}`}
-                    className="rounded-lg border border-border/50 overflow-hidden bg-background/50"
-                >
-                    <div className="px-3 py-1.5 bg-muted/40 border-b border-border/30 flex items-center gap-2">
-                        <span
-                            className={`text-[10px] font-medium uppercase tracking-wide ${
-                                op.operation === "delete"
-                                    ? "text-red-600"
-                                    : op.operation === "add"
-                                      ? "text-green-600"
-                                      : "text-blue-600"
-                            }`}
-                        >
-                            {op.operation}
-                        </span>
-                        <span className="text-xs text-muted-foreground">
-                            cell_id: {text(op.cell_id)}
-                        </span>
-                    </div>
-                    {text(op.new_xml) && (
-                        <div className="px-3 py-2">
-                            <pre className="text-[11px] font-mono text-foreground/80 bg-muted/30 rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all">
-                                {text(op.new_xml)}
-                            </pre>
-                        </div>
-                    )}
-                </div>
-            ))}
-        </div>
-    )
-}
-
-export function ToolCallCard({
-    part,
-    expandedTools,
-    setExpandedTools,
-    onCopy,
-    copiedToolCallId,
-    copyFailedToolCallId,
-    dict,
-}: ToolCallCardProps) {
-    const callId = part.toolCallId
-    const { state, input, output, errorText } = part
-    // Default to expanded for all states (user can manually collapse if needed)
-    const isExpanded = expandedTools[callId] ?? true
-    const toolName = part.type?.replace("tool-", "")
-    const isCopied = copiedToolCallId === callId
-
-    const toggleExpanded = () => {
-        setExpandedTools((prev) => ({
-            ...prev,
-            [callId]: !isExpanded,
-        }))
-    }
-
-    const getToolDisplayName = (name: string) => {
-        switch (name) {
-            case "display_diagram":
-                return "Generate Diagram"
-            case "edit_diagram":
-                return "Edit Diagram"
-            case "get_shape_library":
-                return "Get Shape Library"
-            default:
-                return name
-        }
-    }
-
-    // Incomplete XML means the output hit the length limit, unless the user
-    // stopped the generation themselves. Without an input the JSON was
-    // broken (the server repairs JSON cut short by the limit).
-    const isTruncated =
-        state === "output-error" &&
-        errorText !== "Stopped by user" &&
-        (toolName === "display_diagram" || toolName === "append_diagram") &&
-        typeof input?.xml === "string" &&
-        !isMxCellXmlComplete(input.xml)
-
-    const handleCopy = () => {
-        let textToCopy = ""
-
-        if (input && typeof input === "object") {
-            if (input.xml) {
-                textToCopy = input.xml
-            } else if (input.operations && Array.isArray(input.operations)) {
-                textToCopy = JSON.stringify(input.operations, null, 2)
-            } else if (Object.keys(input).length > 0) {
-                textToCopy = JSON.stringify(input, null, 2)
-            }
-        }
-
-        if (
-            output &&
-            toolName === "get_shape_library" &&
-            typeof output === "string"
-        ) {
-            textToCopy = output
-        }
-
-        if (textToCopy) {
-            onCopy(callId, textToCopy, true)
-        }
-    }
-
-    return (
-        <div className="my-3 rounded-xl border border-border/60 bg-muted/30 overflow-hidden">
-            <div className="flex items-center justify-between px-4 py-3 bg-muted/50">
-                <div className="flex items-center gap-2">
-                    <div className="w-6 h-6 rounded-md bg-primary/10 flex items-center justify-center">
-                        <Cpu className="w-3.5 h-3.5 text-primary" />
-                    </div>
-                    <span className="text-sm font-medium text-foreground/80">
-                        {getToolDisplayName(toolName)}
-                    </span>
-                </div>
-                <div className="flex items-center gap-2">
-                    {state === "input-streaming" && (
-                        <div className="h-4 w-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
-                    )}
-                    {state === "output-available" && (
-                        <>
-                            <span className="text-xs font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
-                                {dict.tools.complete}
-                            </span>
-                            {isExpanded && (
-                                <button
-                                    type="button"
-                                    onClick={handleCopy}
-                                    className="p-1 rounded hover:bg-muted transition-colors"
-                                    title={
-                                        copiedToolCallId === callId
-                                            ? dict.chat.copied
-                                            : copyFailedToolCallId === callId
-                                              ? dict.chat.failedToCopy
-                                              : dict.chat.copyResponse
-                                    }
-                                >
-                                    {isCopied ? (
-                                        <Check className="w-4 h-4 text-green-600" />
-                                    ) : (
-                                        <Copy className="w-4 h-4 text-muted-foreground" />
-                                    )}
-                                </button>
-                            )}
-                        </>
-                    )}
-                    {state === "output-error" &&
-                        (isTruncated ? (
-                            <span className="text-xs font-medium text-yellow-600 bg-yellow-50 px-2 py-0.5 rounded-full">
-                                Truncated
-                            </span>
-                        ) : (
-                            <span className="text-xs font-medium text-red-600 bg-red-50 px-2 py-0.5 rounded-full">
-                                Error
-                            </span>
-                        ))}
-                    {input && Object.keys(input).length > 0 && (
-                        <button
-                            type="button"
-                            onClick={toggleExpanded}
-                            className="p-1 rounded hover:bg-muted transition-colors"
-                        >
-                            {isExpanded ? (
-                                <ChevronUp className="w-4 h-4 text-muted-foreground" />
-                            ) : (
-                                <ChevronDown className="w-4 h-4 text-muted-foreground" />
-                            )}
-                        </button>
-                    )}
-                </div>
-            </div>
-            {input && isExpanded && (
-                <div className="px-4 py-3 border-t border-border/40 bg-muted/20">
-                    {typeof input === "object" && input.xml ? (
-                        state === "input-streaming" ||
-                        state === "input-available" ? (
-                            <pre
-                                className="text-[11px] leading-relaxed overflow-x-auto overflow-y-auto max-h-48 scrollbar-thin break-all whitespace-pre-wrap"
-                                style={{
-                                    fontFamily:
-                                        "var(--font-mono), ui-monospace, monospace",
-                                    margin: 0,
-                                    padding: 0,
-                                }}
-                            >
-                                {input.xml}
-                            </pre>
-                        ) : (
-                            <CodeBlock code={input.xml} language="xml" />
-                        )
-                    ) : typeof input === "object" &&
-                      input.operations &&
-                      Array.isArray(input.operations) ? (
-                        <OperationsDisplay operations={input.operations} />
-                    ) : typeof input === "object" &&
-                      Object.keys(input).length > 0 ? (
-                        <CodeBlock
-                            code={JSON.stringify(input, null, 2)}
-                            language="json"
-                        />
-                    ) : null}
-                </div>
-            )}
-            {/* AI SDK stores tool errors in errorText */}
-            {state === "output-error" && (errorText || output) && (
-                <div
-                    className={`px-4 py-3 border-t border-border/40 text-sm whitespace-pre-wrap break-words ${isTruncated ? "text-yellow-600" : "text-red-600"}`}
-                >
-                    {isTruncated
-                        ? "Output truncated due to length limits. Try a simpler request or increase Max Output Tokens in Settings."
-                        : (errorText ?? output)}
-                </div>
-            )}
-            {/* Show get_shape_library output on success */}
-            {output &&
-                toolName === "get_shape_library" &&
-                state === "output-available" &&
-                isExpanded && (
-                    <div className="px-4 py-3 border-t border-border/40">
-                        <div className="text-xs text-muted-foreground mb-2">
-                            Library loaded (
-                            {typeof output === "string" ? output.length : 0}{" "}
-                            chars)
-                        </div>
-                        <pre className="text-xs bg-muted/50 p-2 rounded-md overflow-auto max-h-32 whitespace-pre-wrap">
-                            {typeof output === "string"
-                                ? output.substring(0, 800) +
-                                  (output.length > 800 ? "\n..." : "")
-                                : String(output)}
-                        </pre>
-                    </div>
-                )}
-        </div>
-    )
-}
diff --git a/components/chat/attachments.ts b/components/chat/attachments.ts
new file mode 100644
index 00000000..33006d67
--- /dev/null
+++ b/components/chat/attachments.ts
@@ -0,0 +1,77 @@
+import { MAX_FILES, MAX_FILE_SIZE as MAX_IMAGE_SIZE } from "@/lib/chat-helpers"
+import { formatMessage } from "@/lib/i18n/utils"
+import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
+
+// Image formats every supported model provider accepts (SVG is read as text)
+const SUPPORTED_IMAGE_TYPES = [
+    "image/png",
+    "image/jpeg",
+    "image/gif",
+    "image/webp",
+]
+
+/** Accept list for the attachment picker */
+export const ATTACHMENT_ACCEPT =
+    "image/png,image/jpeg,image/gif,image/webp,.svg,.pdf,application/pdf,text/*,.md,.markdown,.json,.csv,.xml,.yaml,.yml,.toml"
+
+function isValidFileType(file: File): boolean {
+    return (
+        SUPPORTED_IMAGE_TYPES.includes(file.type) ||
+        isPdfFile(file) ||
+        isTextFile(file)
+    )
+}
+
+function formatFileSize(bytes: number): string {
+    const mb = bytes / 1024 / 1024
+    if (mb < 0.01) return `${(bytes / 1024).toFixed(0)}KB`
+    return `${mb.toFixed(2)}MB`
+}
+
+/** Keep the files that can be attached; describe the rest as errors */
+export function validateFiles(
+    newFiles: File[],
+    existingCount: number,
+    dict: any,
+): { validFiles: File[]; errors: string[] } {
+    const errors: string[] = []
+    const validFiles: File[] = []
+    const availableSlots = MAX_FILES - existingCount
+
+    if (availableSlots <= 0) {
+        errors.push(formatMessage(dict.errors.maxFiles, { max: MAX_FILES }))
+        return { validFiles, errors }
+    }
+
+    for (const file of newFiles) {
+        if (validFiles.length >= availableSlots) {
+            errors.push(
+                formatMessage(dict.errors.onlyMoreAllowed, {
+                    slots: availableSlots,
+                }),
+            )
+            break
+        }
+        if (!isValidFileType(file)) {
+            errors.push(
+                formatMessage(dict.errors.unsupportedType, { name: file.name }),
+            )
+            continue
+        }
+        // PDFs and text files are extracted in the browser, so only images
+        // have a size limit
+        const isExtractedFile = isPdfFile(file) || isTextFile(file)
+        if (!isExtractedFile && file.size > MAX_IMAGE_SIZE) {
+            errors.push(
+                formatMessage(dict.errors.fileExceeds, {
+                    name: file.name,
+                    size: formatFileSize(file.size),
+                    max: MAX_IMAGE_SIZE / 1024 / 1024,
+                }),
+            )
+        } else {
+            validFiles.push(file)
+        }
+    }
+    return { validFiles, errors }
+}
diff --git a/components/chat/chat-engine.tsx b/components/chat/chat-engine.tsx
new file mode 100644
index 00000000..a046ea08
--- /dev/null
+++ b/components/chat/chat-engine.tsx
@@ -0,0 +1,1503 @@
+"use client"
+
+import { useChat } from "@ai-sdk/react"
+import {
+    type ChatStatus,
+    DefaultChatTransport,
+    isToolUIPart,
+    type UIMessage,
+} from "ai"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import type React from "react"
+import {
+    createContext,
+    useCallback,
+    useContext,
+    useEffect,
+    useLayoutEffect,
+    useMemo,
+    useRef,
+    useState,
+} from "react"
+import { flushSync } from "react-dom"
+import { toast } from "sonner"
+import type { ValidationState } from "@/components/chat/ValidationCard"
+import { useDiagram } from "@/contexts/diagram-context"
+import { useDiagramToolHandlers } from "@/hooks/use-diagram-tool-handlers"
+import { useDictionary } from "@/hooks/use-dictionary"
+import {
+    getSelectedAIConfig,
+    type UseModelConfigReturn,
+    useModelConfig,
+} from "@/hooks/use-model-config"
+import {
+    getSessionVersions,
+    type SessionData,
+    useSessionManager,
+} from "@/hooks/use-session-manager"
+import { useValidateDiagram } from "@/hooks/use-validate-diagram"
+import { getApiEndpoint } from "@/lib/base-path"
+import { findCachedResponse } from "@/lib/cached-responses"
+import { buildChatHeaders } from "@/lib/chat-request"
+import { formatMessage } from "@/lib/i18n/utils"
+import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
+import type { SessionMetadata } from "@/lib/session-storage"
+import { sanitizeMessages } from "@/lib/session-storage"
+import { STORAGE_KEYS } from "@/lib/storage"
+import type { UrlData } from "@/lib/url-utils"
+import { type FileData, useFileProcessor } from "@/lib/use-file-processor"
+import { useQuotaManager } from "@/lib/use-quota-manager"
+import { formatXML, isRealDiagram } from "@/lib/utils"
+import { parseDrawioFileContent } from "@/packages/mcp-server/src/load-diagram.ts"
+import { prepareNewDiagram } from "@/packages/mcp-server/src/new-diagram.ts"
+import { BLANK_MXFILE, hasCells } from "@/packages/mcp-server/src/pages.ts"
+import { type SelectedCell, useCanvasStore } from "@/stores/canvas-store"
+import { useSettingsStore } from "@/stores/settings-store"
+import { useUiStore } from "@/stores/ui-store"
+import { useVersionsStore } from "@/stores/versions-store"
+import {
+    APPENDED_FILE_SECTIONS_PATTERN,
+    getUserOriginalText,
+} from "./message-text"
+import { useDiagramStreaming } from "./use-diagram-streaming"
+import { useVersions } from "./use-versions"
+
+// sessionStorage key for the unsent input (survives remounts and reloads)
+const SESSION_STORAGE_INPUT_KEY = "next-ai-draw-io-input"
+
+const TOOL_ERROR_STATE = "output-error" as const
+// 3 to support VLM validation retries (matches MAX_VALIDATION_RETRIES)
+const MAX_AUTO_RETRY_COUNT = 3
+// Limit for truncation continuation retries
+const MAX_CONTINUATION_RETRY_COUNT = 2
+// Save the session at most once per second
+const SAVE_DEBOUNCE_MS = 1000
+
+/**
+ * Check if auto-resubmit should happen based on tool errors.
+ * Only checks the LAST tool part (most recent tool call), not all tool parts.
+ */
+function hasToolErrors(messages: UIMessage[]): boolean {
+    const lastMessage = messages[messages.length - 1]
+    if (lastMessage?.role !== "assistant") return false
+    const lastToolPart = lastMessage.parts.filter(isToolUIPart).at(-1)
+    return lastToolPart?.state === TOOL_ERROR_STATE
+}
+
+/**
+ * Snapshots keep the full multi-page document, but the model only sees and
+ * edits the first page, so give it the first page's mxGraphModel.
+ * Older snapshots already hold a single mxGraphModel and are returned as is.
+ */
+function getFirstPageXml(xml: string): string {
+    if (!xml.includes("<mxfile")) return xml
+    const doc = new DOMParser().parseFromString(xml, "text/xml")
+    const model = doc.querySelector("diagram")?.querySelector("mxGraphModel")
+    return model ? formatXML(new XMLSerializer().serializeToString(model)) : xml
+}
+
+// Shapes sent with a user message (also kept in its metadata)
+type MessageSelection = Pick<SelectedCell, "id" | "label">[]
+
+function selectionOf(message: UIMessage): MessageSelection {
+    const meta = message.metadata as
+        | { selectedCells?: MessageSelection }
+        | undefined
+    return Array.isArray(meta?.selectedCells) ? meta.selectedCells : []
+}
+
+function newLangfuseSessionId() {
+    return `session-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
+}
+
+/**
+ * Read the diagram document out of a .drawio, .xml or .drawio.svg file, with
+ * its pages inflated: previews and the model read it before draw.io saves
+ * it again. A broken or cut off file gives null.
+ */
+async function readDiagramFile(file: File): Promise<string | null> {
+    let text = await file.text()
+    // Editable SVG: the diagram is stored in the root's `content` attribute
+    if (text.includes("<svg")) {
+        const doc = new DOMParser().parseFromString(text, "image/svg+xml")
+        text = doc.documentElement?.getAttribute("content") ?? ""
+    }
+    const loaded = parseDrawioFileContent(text)
+    return loaded.ok ? loaded.xml : null
+}
+
+export interface ChatEngine {
+    messages: UIMessage[]
+    status: ChatStatus
+    error: Error | undefined
+    isBusy: boolean
+    /** The chat on screen is being left (saved, then another one shown) */
+    isLeaving: boolean
+    /** A message is being sent again; the chat is not empty meanwhile */
+    isResending: boolean
+    setMessages: (messages: UIMessage[]) => void
+    stop: () => void
+
+    input: string
+    setInput: (value: string) => void
+    files: File[]
+    pdfData: Map<File, FileData>
+    setFiles: (files: File[]) => void
+    urlData: Map<string, UrlData>
+    setUrlData: React.Dispatch<React.SetStateAction<Map<string, UrlData>>>
+    isExtractingAttachments: boolean
+
+    submit: (overrideText?: string) => Promise<void>
+    sendTemplate: (prompt: string) => void
+    improveWithSuggestions: (feedback: string) => Promise<void>
+    regenerate: (messageIndex: number) => Promise<void>
+    retryLastMessage: () => void
+    editMessage: (messageIndex: number, newText: string) => Promise<void>
+
+    /** Selected shapes that will be sent with the next message */
+    chatSelection: SelectedCell[]
+    dismissSelection: () => void
+
+    sessions: SessionMetadata[]
+    currentSessionId: string | null
+    currentTitle: string | null
+    isRestored: boolean
+    newChat: () => Promise<void>
+    selectSession: (id: string) => Promise<void>
+    deleteSession: (id: string) => Promise<void>
+    renameSession: (title: string) => Promise<void>
+    openDiagramFile: (file: File) => Promise<void>
+    /**
+     * Save the chat on screen, then leave the page (another language) with
+     * the chat's session id; nothing happens while an answer runs
+     */
+    leavePage: (go: (sessionId: string | null) => void) => Promise<void>
+
+    restoreVersion: (versionId: string) => void
+    undoVersion: (versionId: string) => void
+
+    langfuseSessionId: string
+    loadedMessageIdsRef: React.RefObject<Set<string>>
+    validationStates: Record<string, ValidationState>
+    modelConfig: UseModelConfigReturn
+}
+
+const ChatEngineContext = createContext<ChatEngine | null>(null)
+
+export function useChatEngine(): ChatEngine {
+    const engine = useContext(ChatEngineContext)
+    if (!engine) {
+        throw new Error("useChatEngine must be used inside ChatEngineProvider")
+    }
+    return engine
+}
+
+export function ChatEngineProvider({
+    children,
+}: {
+    children: React.ReactNode
+}) {
+    const {
+        loadDiagram: onDisplayChart,
+        handleExport: onExport,
+        exportResolversRef,
+        chartXML,
+        chartXMLRef: liveChartXMLRef,
+        latestSvg,
+        clearDiagram,
+        getThumbnailSvg,
+        captureValidationPng,
+        startTurn,
+    } = useDiagram()
+
+    const dict = useDictionary()
+    const router = useRouter()
+    const pathname = usePathname()
+    const searchParams = useSearchParams()
+    const urlSessionId = searchParams.get("session")
+
+    const settings = useSettingsStore()
+    const openSettings = useUiStore((s) => s.openSettings)
+    const focusComposer = useUiStore((s) => s.focusComposer)
+
+    const onFetchChart = () => {
+        // Waits for the reply to its own export, by its tag
+        const tag = onExport()
+        return Promise.race([
+            new Promise<string>((resolve) => {
+                if (tag) exportResolversRef.current[tag] = resolve
+            }),
+            new Promise<string>((_, reject) => {
+                setTimeout(() => {
+                    delete exportResolversRef.current[tag]
+                    reject(new Error("Chart export timed out after 10 seconds"))
+                }, 10000)
+            }),
+        ])
+    }
+
+    const { files, pdfData, handleFileChange, setFiles } = useFileProcessor({
+        tooLong: dict.errors.fileTooLong,
+        readFailed: dict.errors.fileReadFailed,
+    })
+    const [urlData, setUrlData] = useState<Map<string, UrlData>>(new Map())
+    const filesRef = useRef(files)
+    filesRef.current = files
+
+    const modelConfig = useModelConfig()
+    const sessionManager = useSessionManager({ initialSessionId: urlSessionId })
+
+    const [input, setInputState] = useState("")
+    const [dailyRequestLimit, setDailyRequestLimit] = useState(0)
+    const [dailyTokenLimit, setDailyTokenLimit] = useState(0)
+    const [tpmLimit, setTpmLimit] = useState(0)
+
+    // Restore the unsent input from sessionStorage
+    useEffect(() => {
+        const savedInput = sessionStorage.getItem(SESSION_STORAGE_INPUT_KEY)
+        if (savedInput) {
+            inputRef.current = savedInput
+            setInputState(savedInput)
+        }
+    }, [])
+
+    // Latest composer contents, for code that runs after an await
+    const inputRef = useRef("")
+    const setInput = useCallback((value: string) => {
+        inputRef.current = value
+        setInputState(value)
+        if (value) sessionStorage.setItem(SESSION_STORAGE_INPUT_KEY, value)
+        else sessionStorage.removeItem(SESSION_STORAGE_INPUT_KEY)
+    }, [])
+
+    useEffect(() => {
+        fetch(getApiEndpoint("/api/config"))
+            .then((res) => res.json())
+            .then((data) => {
+                setDailyRequestLimit(data.dailyRequestLimit || 0)
+                setDailyTokenLimit(data.dailyTokenLimit || 0)
+                setTpmLimit(data.tpmLimit || 0)
+            })
+            .catch(() => {})
+    }, [])
+
+    const quotaManager = useQuotaManager({
+        dailyRequestLimit,
+        dailyTokenLimit,
+        tpmLimit,
+        onConfigModel: () => openSettings("models"),
+    })
+
+    // Session ID for Langfuse tracing (restored from localStorage if available)
+    const [langfuseSessionId, setLangfuseSessionId] = useState(() => {
+        if (typeof window !== "undefined") {
+            const saved = localStorage.getItem(STORAGE_KEYS.sessionId)
+            if (saved) return saved
+        }
+        return newLangfuseSessionId()
+    })
+    useEffect(() => {
+        localStorage.setItem(STORAGE_KEYS.sessionId, langfuseSessionId)
+    }, [langfuseSessionId])
+
+    // Title for a session that is not saved yet (opened file, early rename)
+    const [pendingTitle, setPendingTitleState] = useState<string | null>(null)
+    const pendingTitleRef = useRef<string | null>(null)
+    const setPendingTitle = (title: string | null) => {
+        pendingTitleRef.current = title
+        setPendingTitleState(title)
+    }
+
+    // XML snapshot taken before each user message (keyed by message index)
+    const xmlSnapshotsRef = useRef<Map<number, string>>(new Map())
+    // Index of the user message whose turn is running (versions belong to it)
+    const currentTurnRef = useRef(0)
+
+    const hasRestoredRef = useRef(false)
+    const [isRestored, setIsRestored] = useState(false)
+
+    // Latest chartXML for callbacks (avoids stale closures)
+    const chartXMLRef = useRef(chartXML)
+    // Session loaded without a diagram (prevents thumbnail contamination)
+    const justLoadedSessionIdRef = useRef<string | null>(null)
+    useEffect(() => {
+        chartXMLRef.current = chartXML
+        if (chartXML) justLoadedSessionIdRef.current = null
+    }, [chartXML])
+
+    const latestSvgRef = useRef(latestSvg)
+    useEffect(() => {
+        latestSvgRef.current = latestSvg
+    }, [latestSvg])
+
+    const autoRetryCountRef = useRef(0)
+    const continuationRetryCountRef = useRef(0)
+    // Partial XML when output was truncated; non-empty means continuation mode
+    const partialXmlRef = useRef<string>("")
+    // Diagram before a cut off drawing, whose half drawn preview stays on
+    // the canvas while append_diagram finishes it
+    const continuationOriginalRef = useRef<string | null>(null)
+    // Tool calls already applied, so remounts never replay old outputs
+    const processedToolCallsRef = useRef<Set<string>>(new Set())
+    // Set by Stop until the user sends the next message
+    const stoppedRef = useRef(false)
+    const preparingSendRef = useRef(false)
+    // Set while the chat on screen is left (saved, then another one put on
+    // screen): an answer started meanwhile would land in the next chat
+    const leavingRef = useRef(false)
+    const [isLeaving, setIsLeaving] = useState(false)
+    // A message is being sent again (retry, regenerate, edit), until the
+    // SDK has put it back
+    const [isResending, setIsResending] = useState(false)
+    // Presses of Stop: a check that began before one still knows of it after
+    // the next message clears stoppedRef
+    const stopCountRef = useRef(0)
+    // Diagram before each streamed display_diagram and edit_diagram preview
+    // (key: toolCallId), shared between the streaming preview and the tool
+    // handler
+    const editDiagramOriginalXmlRef = useRef<Map<string, string>>(new Map())
+    const saveDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+    const [validationStates, setValidationStates] = useState<
+        Record<string, ValidationState>
+    >({})
+    const handleValidationStateChange = useCallback(
+        (toolCallId: string, state: ValidationState) => {
+            setValidationStates((prev) => ({ ...prev, [toolCallId]: state }))
+        },
+        [],
+    )
+
+    // Failed VLM validations in the current user turn (reset on user action)
+    const validationRetryCountRef = useRef(0)
+    const { validateWithFallback, cancel: cancelValidation } =
+        useValidateDiagram()
+
+    const { handleToolCall } = useDiagramToolHandlers({
+        partialXmlRef,
+        continuationOriginalRef,
+        editDiagramOriginalXmlRef,
+        processedToolCallsRef,
+        validationRetryCountRef,
+        // A preview undone just before the tool call is in this one already
+        chartXMLRef: liveChartXMLRef,
+        onDisplayChart,
+        onFetchChart,
+        captureValidationPng,
+        validateDiagram: validateWithFallback,
+        enableVlmValidation: settings.vlmValidationEnabled,
+        sessionId: langfuseSessionId,
+        watchStop: () => {
+            const stopsBefore = stopCountRef.current
+            return () =>
+                stoppedRef.current || stopCountRef.current !== stopsBefore
+        },
+        onValidationStateChange: handleValidationStateChange,
+    })
+
+    // The turn ends without finishing a cut off drawing: back to the
+    // diagram before it
+    const abandonContinuation = () => {
+        const original = continuationOriginalRef.current
+        if (original === null) return
+        continuationOriginalRef.current = null
+        // Previews drawn since are on top of the cut off one: none of them
+        // may be undone to it later
+        for (const id of editDiagramOriginalXmlRef.current.keys()) {
+            processedToolCallsRef.current.add(id)
+        }
+        editDiagramOriginalXmlRef.current.clear()
+        onDisplayChart(original, true, "revert")
+    }
+
+    const transport = useMemo(
+        () => new DefaultChatTransport({ api: getApiEndpoint("/api/chat") }),
+        [],
+    )
+
+    const {
+        messages,
+        sendMessage,
+        addToolOutput,
+        status,
+        error,
+        setMessages,
+        stop,
+    } = useChat({
+        transport,
+        onToolCall: async ({ toolCall }) => {
+            await handleToolCall({ toolCall }, addToolOutput)
+        },
+        onFinish: ({ message, isAbort, isError }) => {
+            // Stopped or failed: tool calls still streaming never reach the
+            // tool handler. Mark them handled so a later render of the
+            // stream does not draw their preview again.
+            if (!isAbort && !isError) return
+            for (const part of message.parts as any[]) {
+                if (part.state === "input-streaming" && part.toolCallId) {
+                    processedToolCallsRef.current.add(part.toolCallId)
+                }
+            }
+        },
+        onError: (error) => {
+            // A diagram still streaming when the request failed never
+            // reaches the tool handler: undo its preview. Only previews not
+            // handled yet are stored, and the first one holds the diagram
+            // before any of them.
+            const [originalXml] = editDiagramOriginalXmlRef.current.values()
+            if (originalXml) onDisplayChart(originalXml, true, "revert")
+            editDiagramOriginalXmlRef.current.clear()
+            abandonContinuation()
+
+            // Server errors are JSON: a quota limit ({type: request, token or
+            // tpm}), a provider error ({type: "provider", code, message}) or
+            // {error}. The SDK puts the response body in error.message.
+            let data: any = null
+            try {
+                data = JSON.parse(error.message)
+            } catch {
+                // Plain text, e.g. a network failure in the browser
+            }
+            if (data?.type === "request") {
+                quotaManager.showQuotaLimitToast(data.used, data.limit)
+                return
+            }
+            if (data?.type === "token") {
+                quotaManager.showTokenLimitToast(data.used, data.limit)
+                return
+            }
+            if (data?.type === "tpm") {
+                quotaManager.showTPMLimitToast(data.limit)
+                return
+            }
+
+            const isAccessCodeError = String(
+                data?.error ?? error.message,
+            ).includes("Invalid or missing access code")
+            if (!isAccessCodeError) console.error("Chat error:", error)
+
+            // A hint the user can act on, then the provider's own words
+            let text: string = error.message
+            let openModelConfig = false
+            if (data?.type === "provider") {
+                const hints = dict.errors.llm as Record<string, string>
+                const hint = hints[data.code]
+                text =
+                    hint && data.message
+                        ? `${hint}\n\n${data.message}`
+                        : hint || data.message
+                openModelConfig = [
+                    "invalid_api_key",
+                    "forbidden",
+                    "model_not_found",
+                    "server_key_forbidden",
+                ].includes(data.code)
+            } else if (typeof data?.error === "string") {
+                text = data.error
+            } else if (error.message === "Failed to fetch") {
+                text = dict.errors.networkError
+            }
+
+            // A system message, so it can be cleared with the conversation
+            setMessages((currentMessages) => [
+                ...currentMessages,
+                {
+                    id: `error-${Date.now()}`,
+                    role: "system" as const,
+                    parts: [{ type: "text" as const, text }],
+                    // The message shows a button that opens model settings
+                    ...(openModelConfig && {
+                        metadata: { openModelConfig: true },
+                    }),
+                },
+            ])
+
+            if (isAccessCodeError) openSettings("advanced")
+        },
+        // Re-render streamed messages at most every 150 ms. The streaming
+        // diagram preview draws on each update, so this also limits redraws
+        experimental_throttle: 150,
+        sendAutomaticallyWhen: ({ messages }) => {
+            const send = shouldSendAgain(messages)
+            // The turn ends here
+            if (!send) abandonContinuation()
+            return send
+        },
+    })
+
+    // After each request: send the next one (retry, continue a cut off
+    // drawing) or end the turn
+    const shouldSendAgain = (messages: UIMessage[]) => {
+        // The user stopped: a tool result that arrives later (a VLM
+        // check still running) must not start a new request
+        if (stoppedRef.current) return false
+
+        const isInContinuationMode = partialXmlRef.current.length > 0
+        const shouldRetry = hasToolErrors(messages)
+
+        if (!shouldRetry) {
+            autoRetryCountRef.current = 0
+            continuationRetryCountRef.current = 0
+            partialXmlRef.current = ""
+            return false
+        }
+
+        if (isInContinuationMode) {
+            if (
+                continuationRetryCountRef.current >=
+                MAX_CONTINUATION_RETRY_COUNT
+            ) {
+                toast.error(
+                    formatMessage(dict.errors.continuationRetryLimit, {
+                        max: MAX_CONTINUATION_RETRY_COUNT,
+                    }),
+                )
+                continuationRetryCountRef.current = 0
+                partialXmlRef.current = ""
+                return false
+            }
+            continuationRetryCountRef.current++
+        } else {
+            if (autoRetryCountRef.current >= MAX_AUTO_RETRY_COUNT) {
+                toast.error(
+                    formatMessage(dict.errors.retryLimit, {
+                        max: MAX_AUTO_RETRY_COUNT,
+                    }),
+                )
+                autoRetryCountRef.current = 0
+                partialXmlRef.current = ""
+                return false
+            }
+            autoRetryCountRef.current++
+        }
+        return true
+    }
+
+    const isBusy = status === "streaming" || status === "submitted"
+    useEffect(() => {
+        if (messages.length > 0) setIsResending(false)
+    }, [messages.length])
+    // isBusy of the latest render, for code that runs after an await
+    const busyRef = useRef(isBusy)
+    busyRef.current = isBusy
+    // The page goes (another language mounts a new one): the answer stops,
+    // so it cannot reach the next page's canvas
+    const stopRef = useRef(stop)
+    stopRef.current = stop
+    useEffect(
+        () => () => {
+            stopRef.current()
+        },
+        [],
+    )
+    // While an answer is sent or streams in, the chat must stay on screen:
+    // the rest of the answer and its diagram would land in another chat
+    // (Between the requests of one turn the SDK is idle for a moment; a cut
+    // off drawing still waiting for its continuation keeps the turn going)
+    const isTurnActive = () =>
+        busyRef.current ||
+        preparingSendRef.current ||
+        continuationOriginalRef.current !== null
+    // Sending, version actions: not during an answer, nor while leaving
+    const canStartTurn = () => !isTurnActive() && !leavingRef.current
+
+    // Message IDs loaded from a session (skip animations and replays)
+    const loadedMessageIdsRef = useRef<Set<string>>(new Set())
+
+    useDiagramStreaming({
+        messages,
+        processedToolCallsRef,
+        editDiagramOriginalXmlRef,
+        loadedMessageIdsRef,
+    })
+
+    const { restoreVersion, undoVersion } = useVersions({
+        currentTurnRef,
+        isBusy,
+        isTurnActive: () => !canStartTurn(),
+        getChatGeneration: sessionManager.getChatGeneration,
+    })
+
+    // ---------------------------------------------------------------------
+    // Selection sent with the next message
+    // ---------------------------------------------------------------------
+
+    const selection = useCanvasStore((s) => s.selection)
+    // The model sees and edits the first page only
+    const onFirstPage = useCanvasStore(
+        (s) => s.pages.length === 0 || s.pages[0]?.id === s.currentPageId,
+    )
+    const [dismissedSelectionKey, setDismissedSelectionKey] = useState("")
+    const selectionKey = selection.map((c) => c.id).join(",")
+    const chatSelection =
+        !onFirstPage || selectionKey === dismissedSelectionKey ? [] : selection
+    // Once nothing is selected, picking the same shapes again attaches them
+    useEffect(() => {
+        if (selection.length === 0) setDismissedSelectionKey("")
+    }, [selection.length])
+    const dismissSelection = useCallback(
+        () => setDismissedSelectionKey(selectionKey),
+        [selectionKey],
+    )
+
+    // ---------------------------------------------------------------------
+    // Sessions
+    // ---------------------------------------------------------------------
+
+    const messagesRef = useRef(messages)
+    useEffect(() => {
+        messagesRef.current = messages
+    }, [messages])
+
+    // Last synced session ID, to detect external changes (URL back/forward)
+    const lastSyncedSessionIdRef = useRef<string | null>(null)
+    // Message arrays of our own saves. A session holding one of them was
+    // created by our own save, so it must not be treated as an external
+    // switch (with two saves of a new chat at once, the first creates it).
+    const savedMessagesRef = useRef(new WeakSet<object>())
+    // Session was just loaded (skip the auto-save that would reorder it)
+    const justLoadedSessionRef = useRef(false)
+
+    const syncUIWithSession = useCallback(
+        (
+            data:
+                | (SessionData & {
+                      diagramHistory?: { svg: string; xml: string }[]
+                  })
+                | null,
+        ) => {
+            const hasRealDiagram = isRealDiagram(data?.diagramXml)
+            // They act on the chat that was on screen: its canvas (Undo of
+            // a restore) or leaving it unsaved
+            toast.dismiss("version-restored")
+            toast.dismiss("session-save-leave")
+            if (data) {
+                loadedMessageIdsRef.current = new Set(
+                    (data.messages as { id: string }[]).map((m) => m.id),
+                )
+                setMessages(data.messages as unknown as UIMessage[])
+                xmlSnapshotsRef.current = new Map(data.xmlSnapshots)
+                if (hasRealDiagram) {
+                    onDisplayChart(data.diagramXml, true)
+                    chartXMLRef.current = data.diagramXml
+                } else {
+                    clearDiagram()
+                    chartXMLRef.current = ""
+                    latestSvgRef.current = ""
+                }
+                useVersionsStore
+                    .getState()
+                    .setVersions(getSessionVersions(data))
+            } else {
+                loadedMessageIdsRef.current = new Set()
+                setMessages([])
+                xmlSnapshotsRef.current.clear()
+                clearDiagram()
+                chartXMLRef.current = ""
+                latestSvgRef.current = ""
+                useVersionsStore.getState().clear()
+            }
+        },
+        [setMessages, onDisplayChart, clearDiagram],
+    )
+
+    const buildSessionData = useCallback(
+        async (
+            options: { withThumbnail?: boolean } = {},
+        ): Promise<SessionData> => {
+            // Read together, before the wait for the thumbnail: what changes
+            // meanwhile goes into the next save, not half into this one
+            const currentDiagramXml = chartXMLRef.current || ""
+            const messages = sanitizeMessages(messagesRef.current)
+            savedMessagesRef.current.add(messages)
+            const data = {
+                messages,
+                xmlSnapshots: Array.from(xmlSnapshotsRef.current.entries()),
+                diagramXml: currentDiagramXml,
+                versions: useVersionsStore.getState().versions,
+                title: pendingTitleRef.current ?? undefined,
+            }
+            let thumbnailDataUrl: string | undefined
+            if (isRealDiagram(currentDiagramXml) && options.withThumbnail) {
+                const freshThumb = await getThumbnailSvg()
+                if (freshThumb) {
+                    latestSvgRef.current = freshThumb
+                    thumbnailDataUrl = freshThumb
+                } else if (latestSvgRef.current) {
+                    thumbnailDataUrl = latestSvgRef.current
+                }
+            }
+            return { ...data, thumbnailDataUrl }
+        },
+        [getThumbnailSvg],
+    )
+
+    // Restore from the session manager once it has loaded
+    useLayoutEffect(() => {
+        if (hasRestoredRef.current) return
+        if (sessionManager.isLoading) return
+        hasRestoredRef.current = true
+        try {
+            const currentSession = sessionManager.currentSession
+            if (currentSession) {
+                justLoadedSessionRef.current = true
+                syncUIWithSession(currentSession)
+            }
+            lastSyncedSessionIdRef.current = sessionManager.currentSessionId
+        } catch (error) {
+            console.error("Failed to restore session:", error)
+            toast.error(dict.errors.sessionCorrupted)
+        } finally {
+            setIsRestored(true)
+        }
+    }, [
+        sessionManager.isLoading,
+        sessionManager.currentSession,
+        syncUIWithSession,
+        dict.errors.sessionCorrupted,
+    ])
+
+    // Sync UI when the session changes externally (URL back/forward)
+    useEffect(() => {
+        if (!isRestored) return
+        if (!sessionManager.isAvailable) return
+        const newSessionId = sessionManager.currentSessionId
+        const newSession = sessionManager.currentSession
+        if (newSessionId === lastSyncedSessionIdRef.current) return
+        const isOwnNewSession =
+            !!newSession && savedMessagesRef.current.has(newSession.messages)
+        lastSyncedSessionIdRef.current = newSessionId
+        if (isOwnNewSession) {
+            setPendingTitle(null)
+            return
+        }
+        justLoadedSessionRef.current = true
+        syncUIWithSession(newSession)
+    }, [
+        isRestored,
+        sessionManager.isAvailable,
+        sessionManager.currentSessionId,
+        sessionManager.currentSession,
+        syncUIWithSession,
+    ])
+
+    const {
+        isAvailable: sessionIsAvailable,
+        currentSessionId,
+        saveCurrentSession,
+        getChatGeneration,
+        getSaveTicket,
+    } = sessionManager
+    // Ref avoids re-running the save effect after every save
+    const saveCurrentSessionRef = useRef(saveCurrentSession)
+    saveCurrentSessionRef.current = saveCurrentSession
+
+    const versions = useVersionsStore((s) => s.versions)
+
+    // Debounced auto-save, only when not streaming
+    useEffect(() => {
+        if (!hasRestoredRef.current) return
+        if (!sessionIsAvailable) return
+        if (status === "streaming" || status === "submitted") return
+        if (justLoadedSessionRef.current) {
+            justLoadedSessionRef.current = false
+            return
+        }
+        if (saveDebounceRef.current) clearTimeout(saveDebounceRef.current)
+
+        // Capture the chat on screen at schedule time; the save is dropped
+        // if another chat is on screen by the time it runs
+        const scheduledForChat = getChatGeneration()
+        const hasDiagramNow = isRealDiagram(chartXMLRef.current)
+        const isNoDiagramSession =
+            justLoadedSessionIdRef.current === currentSessionId
+
+        saveDebounceRef.current = setTimeout(async () => {
+            try {
+                if (messagesRef.current.length > 0 || hasDiagramNow) {
+                    // Taken before the data is read, for the chat it was
+                    // scheduled for
+                    const ticket = {
+                        ...getSaveTicket(),
+                        generation: scheduledForChat,
+                    }
+                    const sessionData = await buildSessionData({
+                        withThumbnail: hasDiagramNow && !isNoDiagramSession,
+                    })
+                    await saveCurrentSessionRef.current(sessionData, ticket)
+                }
+            } catch (error) {
+                console.error("Failed to save session:", error)
+            }
+        }, SAVE_DEBOUNCE_MS)
+
+        return () => {
+            if (saveDebounceRef.current) clearTimeout(saveDebounceRef.current)
+        }
+    }, [
+        chartXML,
+        messages,
+        versions,
+        status,
+        sessionIsAvailable,
+        currentSessionId,
+        getChatGeneration,
+        getSaveTicket,
+        buildSessionData,
+    ])
+
+    // Put the session in the URL once it exists. Not while the chat is left:
+    // the save just gave it a session, and this URL would win over the one
+    // of what comes next (another chat, a new one, another language).
+    useEffect(() => {
+        if (leavingRef.current) return
+        if (sessionManager.currentSessionId && !urlSessionId) {
+            router.replace(`?session=${sessionManager.currentSessionId}`, {
+                scroll: false,
+            })
+        }
+    }, [sessionManager.currentSessionId, urlSessionId, router])
+
+    // Save when the page is hidden (more reliable than beforeunload for IndexedDB)
+    useEffect(() => {
+        if (!sessionManager.isAvailable) return
+        const handleVisibilityChange = async () => {
+            if (
+                document.visibilityState === "hidden" &&
+                (messagesRef.current.length > 0 ||
+                    isRealDiagram(chartXMLRef.current))
+            ) {
+                try {
+                    const ticket = sessionManager.getSaveTicket()
+                    const sessionData = await buildSessionData({
+                        withThumbnail: false,
+                    })
+                    await sessionManager.saveCurrentSession(sessionData, ticket)
+                } catch (error) {
+                    console.error(
+                        "Failed to save session on visibility change:",
+                        error,
+                    )
+                }
+            }
+        }
+        document.addEventListener("visibilitychange", handleVisibilityChange)
+        return () =>
+            document.removeEventListener(
+                "visibilitychange",
+                handleVisibilityChange,
+            )
+    }, [sessionManager, buildSessionData])
+
+    // ---------------------------------------------------------------------
+    // Sending
+    // ---------------------------------------------------------------------
+
+    const isExtractingAttachments =
+        files.some((f) => pdfData.get(f)?.isExtracting) ||
+        Array.from(urlData.values()).some((d) => d.isExtracting)
+
+    // Append PDF, text file and URL content to the user's text; images
+    // become file parts when imageParts is given
+    const processFilesAndAppendContent = async (
+        baseText: string,
+        imageParts?: any[],
+    ): Promise<string> => {
+        let userText = baseText
+        for (const file of files) {
+            if (isPdfFile(file)) {
+                const extracted = pdfData.get(file)
+                if (extracted?.text) {
+                    userText += `\n\n[PDF: ${file.name}]\n${extracted.text}`
+                }
+            } else if (isTextFile(file)) {
+                const extracted = pdfData.get(file)
+                if (extracted?.text) {
+                    userText += `\n\n[File: ${file.name}]\n${extracted.text}`
+                }
+            } else if (imageParts) {
+                const reader = new FileReader()
+                const dataUrl = await new Promise<string>((resolve) => {
+                    reader.onload = () => resolve(reader.result as string)
+                    reader.readAsDataURL(file)
+                })
+                imageParts.push({
+                    type: "file",
+                    url: dataUrl,
+                    mediaType: file.type,
+                })
+            }
+        }
+        for (const [url, data] of urlData) {
+            if (data.content) {
+                userText += `\n\n[URL: ${url}]\nTitle: ${data.title}\n\n${data.content}`
+            }
+        }
+        return userText
+    }
+
+    const getPreviousXml = (beforeIndex: number): string => {
+        const snapshotKeys = Array.from(xmlSnapshotsRef.current.keys())
+            .filter((k) => k < beforeIndex)
+            .sort((a, b) => b - a)
+        return snapshotKeys.length > 0
+            ? getFirstPageXml(
+                  xmlSnapshotsRef.current.get(snapshotKeys[0]) || "",
+              )
+            : ""
+    }
+
+    const sendChatMessage = (
+        parts: any,
+        xml: string,
+        previousXml: string,
+        turnIndex: number,
+        selectedCells: MessageSelection,
+    ) => {
+        autoRetryCountRef.current = 0
+        continuationRetryCountRef.current = 0
+        validationRetryCountRef.current = 0
+        partialXmlRef.current = ""
+        continuationOriginalRef.current = null
+        stoppedRef.current = false
+        currentTurnRef.current = turnIndex
+        // Busy from now on, before the next render says so
+        busyRef.current = true
+        // Its Undo would take this answer's diagram away
+        toast.dismiss("version-restored")
+        startTurn()
+
+        const config = getSelectedAIConfig()
+        const { customSystemMessage, minimalStyle, maxOutputTokens } =
+            useSettingsStore.getState()
+
+        const selected = selectedCells.map(({ id, label }) => ({ id, label }))
+        const options = {
+            body: {
+                xml,
+                previousXml,
+                sessionId: langfuseSessionId,
+                customSystemMessage,
+                ...(selected.length > 0 && { selectedCells: selected }),
+            },
+            headers: buildChatHeaders(config, {
+                minimalStyle,
+                maxOutputTokens,
+            }),
+        }
+        // The selection stays with the message, for regenerate and retry
+        sendMessage(
+            {
+                parts,
+                ...(selected.length > 0 && {
+                    metadata: { selectedCells: selected },
+                }),
+            },
+            options,
+        )
+    }
+
+    // Export the current diagram, snapshot it for this message, and send
+    const sendWithCurrentDiagram = async (
+        parts: any[],
+        selectedCells: MessageSelection = [],
+    ) => {
+        const chartXml = formatXML(await onFetchChart())
+        const turnIndex = messagesRef.current.length
+        const previousXml = getPreviousXml(turnIndex)
+        // Snapshot the full multi-page document (kept fresh by autosave) so
+        // regenerate/edit can restore every page; the model gets page 1 only
+        xmlSnapshotsRef.current.set(turnIndex, chartXMLRef.current || chartXml)
+        sendChatMessage(parts, chartXml, previousXml, turnIndex, selectedCells)
+    }
+
+    const clearComposer = () => {
+        setInput("")
+        setFiles([])
+        setUrlData(new Map())
+    }
+
+    const submitInput = async (overrideText?: string) => {
+        const text = overrideText ?? input
+        if (!text.trim() || isBusy || isExtractingAttachments) return
+
+        // Cached example: only with no messages and an empty canvas (same
+        // rule as the server)
+        if (
+            messagesRef.current.length === 0 &&
+            !hasCells(chartXMLRef.current || "")
+        ) {
+            // The file name keeps a user's own file from matching an example
+            const cached = findCachedResponse(
+                text.trim(),
+                files.length > 0,
+                files.length === 1 ? files[0].name : undefined,
+            )
+            if (cached) {
+                const toolCallId = `cached-${Date.now()}`
+                const userText = await processFilesAndAppendContent(text)
+                currentTurnRef.current = 0
+                startTurn()
+                setMessages([
+                    {
+                        id: `user-${Date.now()}`,
+                        role: "user" as const,
+                        parts: [{ type: "text" as const, text: userText }],
+                    },
+                    {
+                        id: `assistant-${Date.now()}`,
+                        role: "assistant" as const,
+                        parts: [
+                            {
+                                type: "tool-display_diagram" as const,
+                                toolCallId,
+                                state: "output-available" as const,
+                                input: { xml: cached.xml },
+                                output: "Successfully displayed the diagram.",
+                            },
+                        ],
+                    },
+                ] as any)
+                // Snapshot the canvas before the example so editing this message works
+                xmlSnapshotsRef.current.set(
+                    0,
+                    chartXMLRef.current || BLANK_MXFILE,
+                )
+                // Load its diagram here: these messages never reach the
+                // tool handler
+                const prepared = prepareNewDiagram(cached.xml, {
+                    pageId: "page-1",
+                    pageName: "Page-1",
+                })
+                if (prepared.ok) {
+                    onDisplayChart(prepared.xml, true, "commit", {
+                        toolCallId,
+                    })
+                }
+                clearComposer()
+                return
+            }
+        }
+
+        const parts: any[] = []
+        // The backend only reads the first text part, so combine them
+        const userText = await processFilesAndAppendContent(text, parts)
+        parts.unshift({ type: "text", text: userText })
+        // Clear right away, so text typed while the diagram exports is kept
+        const sentFiles = files
+        const sentUrls = urlData
+        clearComposer()
+        setDismissedSelectionKey(selectionKey)
+        try {
+            await sendWithCurrentDiagram(parts, chatSelection)
+        } catch (error) {
+            console.error("Error fetching chart data:", error)
+            toast.error(dict.errors.failedToExport)
+            // Nothing was sent: give the message back, unless something new
+            // was typed or attached meanwhile
+            if (!inputRef.current && filesRef.current.length === 0) {
+                setInput(text)
+                setFiles(sentFiles)
+                setUrlData(sentUrls)
+            }
+        }
+    }
+
+    const submit = async (overrideText?: string) => {
+        // While a send is prepared (attachments read, diagram exported) the
+        // status is still "ready": a second Enter or click would send the
+        // message again
+        if (preparingSendRef.current || leavingRef.current) return
+        preparingSendRef.current = true
+        try {
+            await submitInput(overrideText)
+        } finally {
+            preparingSendRef.current = false
+        }
+    }
+
+    // Templates fill the input and send it right away (attachments included)
+    const sendTemplate = (prompt: string) => {
+        setInput(prompt)
+        submit(prompt)
+    }
+
+    const improveWithSuggestions = async (feedback: string) => {
+        if (!canStartTurn()) return
+        // Like submit: the diagram export comes first
+        preparingSendRef.current = true
+        try {
+            await sendWithCurrentDiagram([{ type: "text", text: feedback }])
+        } catch (error) {
+            console.error("Error fetching chart data:", error)
+            toast.error(dict.errors.failedToExport)
+        } finally {
+            preparingSendRef.current = false
+        }
+    }
+
+    const restoreDiagramFromSnapshot = (savedXml: string) => {
+        onDisplayChart(savedXml, true)
+        chartXMLRef.current = savedXml
+    }
+
+    const cleanupAfterTurn = (messageIndex: number, keepVersions = false) => {
+        for (const key of xmlSnapshotsRef.current.keys()) {
+            if (key > messageIndex) xmlSnapshotsRef.current.delete(key)
+        }
+        // The canvas goes back to the snapshot: no kept version is on it
+        if (keepVersions) useVersionsStore.getState().clearCanvasFlags()
+        else useVersionsStore.getState().removeFromTurn(messageIndex)
+    }
+
+    // Send the user message at index again with these parts, from the
+    // diagram it was sent with. keepVersions: a retry keeps what the failed
+    // turn drew (in the strip).
+    const rerunFrom = (index: number, parts: any[], keepVersions = false) => {
+        const savedXml = xmlSnapshotsRef.current.get(index)
+        if (!savedXml) {
+            console.error("No saved XML snapshot for message index:", index)
+            return
+        }
+        const previousXml = getPreviousXml(index)
+        restoreDiagramFromSnapshot(savedXml)
+        cleanupAfterTurn(index, keepVersions)
+
+        // Remove the user message onwards (sendMessage re-adds it). For a
+        // moment there may be no message: that is no empty chat.
+        flushSync(() => {
+            setIsResending(true)
+            setMessages(messages.slice(0, index))
+        })
+        sendChatMessage(
+            parts,
+            getFirstPageXml(savedXml),
+            previousXml,
+            index,
+            selectionOf(messages[index]),
+        )
+    }
+
+    const regenerate = async (messageIndex: number) => {
+        if (!canStartTurn()) return
+        let userMessageIndex = messageIndex - 1
+        while (
+            userMessageIndex >= 0 &&
+            messages[userMessageIndex].role !== "user"
+        ) {
+            userMessageIndex--
+        }
+        if (userMessageIndex < 0) return
+        const userParts = messages[userMessageIndex].parts
+        if (!userParts?.some((p: any) => p.type === "text")) return
+        rerunFrom(userMessageIndex, userParts)
+    }
+
+    const editMessage = async (
+        messageIndex: number,
+        newText: string,
+        keepVersions = false,
+    ) => {
+        if (!canStartTurn()) return
+        const message = messages[messageIndex]
+        if (message?.role !== "user") return
+        // The edit box only shows the typed text; keep appended file content
+        const newParts = message.parts?.map((part: any) => {
+            if (part.type === "text") {
+                const appended =
+                    part.text.match(APPENDED_FILE_SECTIONS_PATTERN)?.[0] ?? ""
+                return { ...part, text: newText + appended }
+            }
+            return part
+        }) || [{ type: "text", text: newText }]
+        rerunFrom(messageIndex, newParts, keepVersions)
+    }
+
+    /** Send the last user message again (after an error) */
+    const retryLastMessage = () => {
+        const index = messages.map((m) => m.role).lastIndexOf("user")
+        if (index < 0) return
+        editMessage(index, getUserOriginalText(messages[index]), true)
+    }
+
+    const handleStop = useCallback(() => {
+        stoppedRef.current = true
+        stopCountRef.current++
+        // A running screenshot check holds up the chat (the SDK waits for
+        // the tool handler): end it, so the call gets its result now
+        cancelValidation()
+        const lastMessage = messages[messages.length - 1]
+        // Calls the tool handler already took can still show as streaming:
+        // the messages update at most every 150 ms (useChat throttle)
+        const toolParts = lastMessage?.parts?.filter(
+            (part: any) =>
+                part.type?.startsWith("tool-") &&
+                part.state === "input-streaming" &&
+                !processedToolCallsRef.current.has(part.toolCallId),
+        )
+        for (const part of (toolParts ?? []) as any[]) {
+            if (part.toolCallId) {
+                addToolOutput({
+                    tool: part.type.replace("tool-", ""),
+                    toolCallId: part.toolCallId,
+                    state: "output-error",
+                    errorText: "Stopped by user",
+                })
+            }
+        }
+        stop()
+        abandonContinuation()
+    }, [messages, addToolOutput, stop, cancelValidation])
+
+    // ---------------------------------------------------------------------
+    // Session actions
+    // ---------------------------------------------------------------------
+
+    // The current chat could not be saved (storage full). The list where
+    // old chats can be deleted shows only in an empty chat, so let the user
+    // go on without saving. It replaces the plain message, and has its own
+    // id so a later failed auto-save does not take its button away.
+    const offerToContinueUnsaved = useCallback(
+        (proceed: () => void) => {
+            toast.dismiss("session-save-failed")
+            toast.error(dict.errors.sessionSaveFailedLeave, {
+                id: "session-save-leave",
+                duration: 15000,
+                action: {
+                    label: dict.errors.continueWithoutSaving,
+                    onClick: proceed,
+                },
+            })
+        },
+        [dict],
+    )
+
+    // A new turn makes the offer stale: going on would clear the chat while
+    // the answer streams in
+    useEffect(() => {
+        if (isBusy) toast.dismiss("session-save-leave")
+    }, [isBusy])
+
+    // Save the chat on screen before leaving it (also a diagram drawn
+    // without messages). If that failed (storage full), stay on it unless
+    // the user goes on without saving: then proceed runs later. Resolves to
+    // whether the caller can leave now.
+    const saveBeforeLeaving = async (proceed: () => void) => {
+        if (!sessionManager.isAvailable) return true
+        if (
+            messagesRef.current.length === 0 &&
+            !isRealDiagram(chartXMLRef.current)
+        ) {
+            return true
+        }
+        // Of the chat on screen now, also if another one comes on screen
+        // while the thumbnail is taken
+        const ticket = sessionManager.getSaveTicket()
+        const sessionData = await buildSessionData({ withThumbnail: true })
+        if (!(await sessionManager.saveCurrentSession(sessionData, ticket))) {
+            offerToContinueUnsaved(proceed)
+            return false
+        }
+        return true
+    }
+
+    // Leaving the chat on screen: no answer can start until it is done
+    const whileLeaving = async (fn: () => unknown) => {
+        leavingRef.current = true
+        // The composer shows it: what is typed now could not be sent
+        setIsLeaving(true)
+        try {
+            await fn()
+        } finally {
+            leavingRef.current = false
+            setIsLeaving(false)
+        }
+    }
+
+    const selectSession = async (id: string) => {
+        if (!sessionManager.isAvailable || !canStartTurn()) return
+        const open = async () => {
+            if (isTurnActive()) return
+            const sessionData = await sessionManager.switchSession(id)
+            if (!sessionData) return
+            const hasRealDiagram = isRealDiagram(sessionData.diagramXml)
+            justLoadedSessionRef.current = true
+            // Use the new session's thumbnail, never the previous one's
+            latestSvgRef.current = sessionData.thumbnailDataUrl || ""
+            justLoadedSessionIdRef.current = hasRealDiagram ? null : id
+            // Shown here: the effect that follows session changes must not
+            // show it again (that would save it, first in the list)
+            lastSyncedSessionIdRef.current = id
+            setValidationStates({})
+            syncUIWithSession(sessionData)
+            router.replace(`?session=${id}`, { scroll: false })
+        }
+        // Going on without saving (storage full) is a leave of its own
+        const proceed = () => whileLeaving(open)
+        await whileLeaving(async () => {
+            if (await saveBeforeLeaving(proceed)) await open()
+        })
+    }
+
+    const deleteSession = useCallback(
+        async (id: string) => {
+            if (!sessionManager.isAvailable) return
+            const isCurrent = id === sessionManager.currentSessionId
+            if (isCurrent && !canStartTurn()) return
+            const remove = async () => {
+                const result = await sessionManager.deleteSession(id)
+                if (result.wasCurrentSession) {
+                    syncUIWithSession(null)
+                    router.replace(pathname, { scroll: false })
+                }
+            }
+            if (isCurrent) await whileLeaving(remove)
+            else await remove()
+        },
+        [sessionManager, syncUIWithSession, router, pathname, isBusy],
+    )
+
+    // Clear everything for a new conversation (the old one is saved)
+    const startNewChat = () => {
+        // Clear session state BEFORE the URL, so the URL effect does not
+        // bring the old session back
+        sessionManager.clearCurrentSession()
+        toast.dismiss("version-restored")
+        toast.dismiss("session-save-leave")
+        // A new conversation brings the start screen back
+        useUiStore.getState().setHeroDismissed(false)
+        setMessages([])
+        setInput("")
+        clearDiagram()
+        useVersionsStore.getState().clear()
+        setValidationStates({})
+        handleFileChange([])
+        setUrlData(new Map())
+        setLangfuseSessionId(newLangfuseSessionId())
+        xmlSnapshotsRef.current.clear()
+        setPendingTitle(null)
+        router.replace(pathname, { scroll: false })
+    }
+
+    const newChat = async () => {
+        if (!canStartTurn()) return
+        const start = () => {
+            if (isTurnActive()) return
+            startNewChat()
+            toast.success(dict.dialogs.clearSuccess)
+            focusComposer()
+        }
+        await whileLeaving(async () => {
+            if (!(await saveBeforeLeaving(start))) return
+            // The list shows the chat just saved
+            if (sessionManager.isAvailable) {
+                await sessionManager.refreshSessions()
+            }
+            start()
+        })
+    }
+
+    const renameSession = useCallback(
+        async (title: string) => {
+            const id = sessionManager.currentSessionId
+            if (!id) {
+                // Not saved yet: use the title when the session is created
+                setPendingTitle(title.trim().slice(0, 100) || null)
+                return
+            }
+            await sessionManager.renameSession(id, title)
+        },
+        [sessionManager],
+    )
+
+    const leavePage = async (go: (sessionId: string | null) => void) => {
+        if (!canStartTurn()) return
+        const proceed = () => go(sessionManager.getCurrentSessionId())
+        await whileLeaving(async () => {
+            if (await saveBeforeLeaving(proceed)) proceed()
+        })
+    }
+
+    const openDiagramFile = async (file: File) => {
+        if (!canStartTurn()) return
+        await whileLeaving(() => openFile(file))
+    }
+
+    const openFile = async (file: File) => {
+        const xml = await readDiagramFile(file).catch(() => null)
+        if (!xml) {
+            toast.error(
+                formatMessage(dict.errors.notADiagramFile, {
+                    name: file.name,
+                }),
+            )
+            return
+        }
+        // A loaded file starts a fresh conversation named after it
+        const open = () => {
+            if (isTurnActive()) return
+            startNewChat()
+            // This empty chat is ours: the effect that follows session
+            // changes must not clear the file it is about to show
+            lastSyncedSessionIdRef.current = null
+            setPendingTitle(
+                file.name.replace(/\.(drawio\.svg|drawio|xml|svg)$/i, ""),
+            )
+            onDisplayChart(xml, true)
+            // The file is on screen, also one without shapes yet
+            useUiStore.getState().setHeroDismissed(true)
+        }
+        // Going on without saving (storage full) is a leave of its own
+        const proceed = () => whileLeaving(open)
+        if (await saveBeforeLeaving(proceed)) open()
+    }
+
+    const engine: ChatEngine = {
+        messages,
+        status,
+        error,
+        isBusy,
+        isLeaving,
+        isResending,
+        setMessages: setMessages as (messages: UIMessage[]) => void,
+        stop: handleStop,
+        input,
+        setInput,
+        files,
+        pdfData,
+        setFiles: handleFileChange,
+        urlData,
+        setUrlData,
+        isExtractingAttachments,
+        submit,
+        sendTemplate,
+        improveWithSuggestions,
+        regenerate,
+        retryLastMessage,
+        editMessage,
+        chatSelection,
+        dismissSelection,
+        sessions: sessionManager.sessions,
+        currentSessionId: sessionManager.currentSessionId,
+        currentTitle: sessionManager.currentSession?.title ?? pendingTitle,
+        isRestored,
+        newChat,
+        selectSession,
+        deleteSession,
+        renameSession,
+        openDiagramFile,
+        leavePage,
+        restoreVersion,
+        undoVersion,
+        langfuseSessionId,
+        loadedMessageIdsRef,
+        validationStates,
+        modelConfig,
+    }
+
+    return (
+        <ChatEngineContext.Provider value={engine}>
+            {children}
+        </ChatEngineContext.Provider>
+    )
+}
diff --git a/components/chat/chat-panel.tsx b/components/chat/chat-panel.tsx
new file mode 100644
index 00000000..5eb2bb05
--- /dev/null
+++ b/components/chat/chat-panel.tsx
@@ -0,0 +1,192 @@
+import {
+    ChevronDown,
+    Download,
+    MessageSquareDashed,
+    PanelRightClose,
+    Settings2,
+    SquarePen,
+} from "lucide-react"
+import { useRef } from "react"
+import { DevXmlSimulator } from "@/components/dev-xml-simulator"
+import { BrandMark } from "@/components/workspace/brand-mark"
+import { IconButton } from "@/components/workspace/icon-button"
+import { useDiagram } from "@/contexts/diagram-context"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { usePanelWidth } from "@/hooks/use-panel-width"
+import { modKey } from "@/lib/platform"
+import { cn } from "@/lib/utils"
+import { useCanvasStore } from "@/stores/canvas-store"
+import {
+    PANEL_MAX_WIDTH,
+    PANEL_MIN_WIDTH,
+    useSettingsStore,
+} from "@/stores/settings-store"
+import { useUiStore } from "@/stores/ui-store"
+import { useChatEngine } from "./chat-engine"
+import { Composer } from "./composer"
+import { MessageList } from "./message-list"
+import { SessionMenu, useSessionTitle } from "./session-menu"
+import { VersionStrip } from "./version-strip"
+
+const DEBUG = process.env.NODE_ENV === "development"
+
+/** Drag handle on the panel's left edge (the panel sits on the right) */
+function ResizeHandle() {
+    const panelWidth = usePanelWidth()
+    const setPanelWidth = useSettingsStore((s) => s.setPanelWidth)
+    const startRef = useRef<{ x: number; width: number } | null>(null)
+
+    return (
+        // biome-ignore lint/a11y/useSemanticElements: a draggable handle, not a divider line
+        <div
+            role="separator"
+            aria-orientation="vertical"
+            aria-valuenow={panelWidth}
+            aria-valuemin={PANEL_MIN_WIDTH}
+            aria-valuemax={PANEL_MAX_WIDTH}
+            tabIndex={-1}
+            className="absolute top-4 -left-1.5 bottom-4 z-10 w-3 cursor-col-resize after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 after:-translate-x-1/2 after:rounded-full after:bg-foreground/0 after:transition-colors hover:after:bg-foreground/15"
+            onPointerDown={(e) => {
+                e.preventDefault()
+                const panel = e.currentTarget.parentElement
+                startRef.current = {
+                    x: e.clientX,
+                    width: panel?.getBoundingClientRect().width ?? 384,
+                }
+                e.currentTarget.setPointerCapture(e.pointerId)
+            }}
+            onPointerMove={(e) => {
+                const start = startRef.current
+                if (!start) return
+                // Dragging left widens the panel
+                setPanelWidth(start.width - (e.clientX - start.x))
+            }}
+            onPointerUp={(e) => {
+                startRef.current = null
+                e.currentTarget.releasePointerCapture(e.pointerId)
+            }}
+        />
+    )
+}
+
+function EmptyThread() {
+    const dict = useDictionary()
+    return (
+        <div className="flex h-full flex-col items-center justify-center gap-2 px-8 text-center">
+            <MessageSquareDashed className="size-5 text-faint" />
+            <p className="max-w-60 text-[13px] text-muted-foreground">
+                {dict.chat.emptyThread}
+            </p>
+        </div>
+    )
+}
+
+/** The floating chat panel: header, versions, conversation, message box */
+export function ChatPanel({
+    mobile = false,
+    onOpenFile,
+}: {
+    mobile?: boolean
+    onOpenFile: () => void
+}) {
+    const dict = useDictionary()
+    const engine = useChatEngine()
+    const { loadDiagram, isDrawioReady } = useDiagram()
+    // An external draw.io has no app toolbar (and so no Export button there)
+    const hasEditor = useCanvasStore((s) => s.hasEditor)
+    const setSaveDialogOpen = useUiStore((s) => s.setSaveDialogOpen)
+    const title = useSessionTitle()
+    const panelWidth = usePanelWidth()
+    const openSettings = useUiStore((s) => s.openSettings)
+    const setPanelOpen = useUiStore((s) => s.setPanelOpen)
+
+    return (
+        <aside
+            className={cn(
+                "flex flex-col bg-card",
+                mobile
+                    ? "absolute inset-0"
+                    : "absolute top-3 right-3 bottom-3 z-20 rounded-2xl shadow-float animate-panel-in",
+            )}
+            style={mobile ? undefined : { width: panelWidth }}
+            aria-label={dict.nav.aiChat}
+            data-testid="chat-panel"
+        >
+            <header className="flex h-[52px] shrink-0 items-center gap-1 pr-2 pl-3">
+                <BrandMark />
+                <SessionMenu onOpenFile={onOpenFile}>
+                    <button
+                        type="button"
+                        className="ml-1 flex min-w-0 items-center gap-1 rounded-lg px-1.5 py-1 hover:bg-accent"
+                        data-testid="session-title"
+                    >
+                        <span className="truncate text-[15px] font-semibold tracking-[-0.01em]">
+                            {title}
+                        </span>
+                        <ChevronDown className="size-4 shrink-0 text-faint" />
+                    </button>
+                </SessionMenu>
+                <div className="ml-auto flex items-center">
+                    {!hasEditor && isDrawioReady && (
+                        <IconButton
+                            label={dict.workspace.export}
+                            onClick={() => setSaveDialogOpen(true)}
+                        >
+                            <Download />
+                        </IconButton>
+                    )}
+                    <IconButton
+                        label={dict.nav.newChat}
+                        onClick={engine.newChat}
+                        disabled={engine.isBusy}
+                        data-testid="new-chat-button"
+                    >
+                        <SquarePen />
+                    </IconButton>
+                    <IconButton
+                        label={dict.nav.settings}
+                        onClick={() => openSettings()}
+                        data-testid="settings-button"
+                    >
+                        <Settings2 />
+                    </IconButton>
+                    {!mobile && (
+                        <IconButton
+                            label={dict.nav.hidePanel}
+                            shortcut={`${modKey}B`}
+                            onClick={() => setPanelOpen(false)}
+                        >
+                            <PanelRightClose />
+                        </IconButton>
+                    )}
+                </div>
+            </header>
+
+            <VersionStrip />
+
+            <div className="min-h-0 flex-1 overflow-y-auto scrollbar-thin">
+                {engine.messages.length > 0 ? <MessageList /> : <EmptyThread />}
+            </div>
+
+            {DEBUG && (
+                <DevXmlSimulator
+                    setMessages={engine.setMessages as any}
+                    onDisplayChart={(xml) => loadDiagram(xml, true)}
+                />
+            )}
+
+            <div className="shrink-0 p-2.5 pt-1">
+                <Composer
+                    placeholder={
+                        engine.messages.length > 0 &&
+                        engine.chatSelection.length === 0
+                            ? dict.chat.placeholderFollowUp
+                            : undefined
+                    }
+                />
+            </div>
+
+            {!mobile && <ResizeHandle />}
+        </aside>
+    )
+}
diff --git a/components/chat/compare-dialog.tsx b/components/chat/compare-dialog.tsx
new file mode 100644
index 00000000..f138c915
--- /dev/null
+++ b/components/chat/compare-dialog.tsx
@@ -0,0 +1,152 @@
+import { ChevronLeft, ChevronRight, RotateCcw } from "lucide-react"
+import { useEffect, useMemo, useState } from "react"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog"
+import { useDiagram } from "@/contexts/diagram-context"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { diffDiagrams, isSameDocument } from "@/lib/diagram-diff"
+import { formatMessage } from "@/lib/i18n/utils"
+import { describeChanges } from "@/lib/version-text"
+import { useUiStore } from "@/stores/ui-store"
+import { useVersionsStore } from "@/stores/versions-store"
+import { useChatEngine } from "./chat-engine"
+import { VersionThumb } from "./tool-activity"
+
+function Sheet({
+    label,
+    svg,
+}: {
+    label: string
+    svg: string | null | undefined
+}) {
+    return (
+        <figure className="flex min-w-0 flex-1 flex-col gap-2">
+            <figcaption className="text-xs font-medium text-muted-foreground">
+                {label}
+            </figcaption>
+            <div className="sheet-light flex aspect-[16/10] items-center justify-center overflow-hidden rounded-xl border border-border bg-white p-2">
+                <VersionThumb svg={svg} className="max-h-full max-w-full" />
+            </div>
+        </figure>
+    )
+}
+
+/** A saved version next to the current canvas, with restore */
+export function CompareDialog() {
+    const dict = useDictionary()
+    const t = dict.versions
+    const engine = useChatEngine()
+    const { getVersionSvg, chartXML } = useDiagram()
+    const versionId = useUiStore((s) => s.compareVersionId)
+    const openCompare = useUiStore((s) => s.openCompare)
+    const closeCompare = useUiStore((s) => s.closeCompare)
+    const versions = useVersionsStore((s) => s.versions)
+    const [currentSvg, setCurrentSvg] = useState<string | null>(null)
+
+    const index = versions.findIndex((v) => v.id === versionId)
+    const version = index >= 0 ? versions[index] : null
+
+    // Whether the canvas is this version, on every page
+    const same = useMemo(
+        () => !version || isSameDocument(version.xml, chartXML),
+        [version, chartXML],
+    )
+    // What the canvas has changed since this version on the first page
+    // (null: nothing there)
+    const changes = useMemo(() => {
+        if (!version || same) return null
+        const { summary } = diffDiagrams(version.xml, chartXML)
+        return Object.values(summary).some((n) => n > 0) ? summary : null
+    }, [version, chartXML, same])
+
+    // Picture of the canvas as it is now, taken again once an answer that
+    // was running is done ("" when none could be made)
+    useEffect(() => {
+        if (!versionId) return
+        let cancelled = false
+        setCurrentSvg(null)
+        getVersionSvg().then((svg) => {
+            if (!cancelled) setCurrentSvg(svg ?? "")
+        })
+        return () => {
+            cancelled = true
+        }
+    }, [versionId, engine.isBusy])
+
+    return (
+        <Dialog
+            open={!!version}
+            onOpenChange={(open) => !open && closeCompare()}
+        >
+            <DialogContent className="gap-5 sm:max-w-4xl">
+                <DialogHeader>
+                    <DialogTitle>{t.compareTitle}</DialogTitle>
+                    <DialogDescription>
+                        {!version
+                            ? ""
+                            : same
+                              ? t.isOnCanvas
+                              : changes
+                                ? `${formatMessage(t.compareSince, { n: index + 1 })} ${describeChanges(changes, t)}`
+                                : formatMessage(t.differsElsewhere, {
+                                      n: index + 1,
+                                  })}
+                    </DialogDescription>
+                </DialogHeader>
+                {version && (
+                    <div className="flex flex-col gap-4 sm:flex-row">
+                        <Sheet
+                            label={formatMessage(t.versionLabel, {
+                                n: index + 1,
+                            })}
+                            svg={version.svg}
+                        />
+                        <Sheet label={t.currentCanvas} svg={currentSvg} />
+                    </div>
+                )}
+                <div className="flex items-center gap-2">
+                    <button
+                        type="button"
+                        disabled={index <= 0}
+                        onClick={() => openCompare(versions[index - 1].id)}
+                        className="inline-flex size-8 items-center justify-center rounded-lg border border-border text-muted-foreground hover:text-foreground disabled:opacity-30"
+                        aria-label={t.previous}
+                    >
+                        <ChevronLeft className="size-4" />
+                    </button>
+                    <button
+                        type="button"
+                        disabled={index < 0 || index >= versions.length - 1}
+                        onClick={() => openCompare(versions[index + 1].id)}
+                        className="inline-flex size-8 items-center justify-center rounded-lg border border-border text-muted-foreground hover:text-foreground disabled:opacity-30"
+                        aria-label={t.next}
+                    >
+                        <ChevronRight className="size-4" />
+                    </button>
+                    <span className="text-xs text-muted-foreground tabular-nums">
+                        {index + 1} / {versions.length}
+                    </span>
+                    <button
+                        type="button"
+                        disabled={!version || same || engine.isBusy}
+                        onClick={() => {
+                            if (!version) return
+                            engine.restoreVersion(version.id)
+                            closeCompare()
+                        }}
+                        className="ml-auto inline-flex h-9 items-center gap-1.5 rounded-lg bg-primary px-3.5 text-[13px] font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
+                        data-testid="compare-restore"
+                    >
+                        <RotateCcw className="size-4" />
+                        {formatMessage(t.restoreVersion, { n: index + 1 })}
+                    </button>
+                </div>
+            </DialogContent>
+        </Dialog>
+    )
+}
diff --git a/components/chat/composer.tsx b/components/chat/composer.tsx
new file mode 100644
index 00000000..341718a8
--- /dev/null
+++ b/components/chat/composer.tsx
@@ -0,0 +1,525 @@
+import {
+    ArrowUp,
+    BookMarked,
+    BookmarkPlus,
+    Globe,
+    Paperclip,
+    Plus,
+    Square,
+    SquareDashedMousePointer,
+    X,
+} from "lucide-react"
+import type React from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
+import { toast } from "sonner"
+import { TemplateCreateDialog } from "@/components/chat/TemplateCreateDialog"
+import { TemplatePanel } from "@/components/chat/TemplatePanel"
+import { ErrorToast } from "@/components/error-toast"
+import { FilePreviewList } from "@/components/file-preview-list"
+import { ModelSelector } from "@/components/model-selector"
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog"
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover"
+import { UrlInputDialog } from "@/components/url-input-dialog"
+import { IconButton } from "@/components/workspace/icon-button"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { formatMessage } from "@/lib/i18n/utils"
+import { modKey } from "@/lib/platform"
+import { extractUrlContent } from "@/lib/url-utils"
+import { cn } from "@/lib/utils"
+import { useSettingsStore } from "@/stores/settings-store"
+import { useUiStore } from "@/stores/ui-store"
+import { ATTACHMENT_ACCEPT, validateFiles } from "./attachments"
+import { useChatEngine } from "./chat-engine"
+
+function showErrorToast(message: React.ReactNode) {
+    toast.custom(
+        (t) => (
+            <ErrorToast message={message} onDismiss={() => toast.dismiss(t)} />
+        ),
+        { duration: 5000 },
+    )
+}
+
+function showValidationErrors(errors: string[], dict: any) {
+    if (errors.length === 0) return
+    if (errors.length === 1) {
+        showErrorToast(
+            <span className="text-muted-foreground">{errors[0]}</span>,
+        )
+        return
+    }
+    showErrorToast(
+        <div className="flex flex-col gap-1">
+            <span className="font-medium">
+                {formatMessage(dict.errors.filesRejected, {
+                    count: errors.length,
+                })}
+            </span>
+            <ul className="list-inside list-disc text-xs text-muted-foreground">
+                {errors.slice(0, 3).map((err) => (
+                    <li key={err}>{err}</li>
+                ))}
+                {errors.length > 3 && (
+                    <li>
+                        {formatMessage(dict.errors.andMore, {
+                            count: errors.length - 3,
+                        })}
+                    </li>
+                )}
+            </ul>
+        </div>,
+    )
+}
+
+function MenuItem({
+    icon,
+    children,
+    onClick,
+    disabled,
+    disabledHint,
+}: {
+    icon: React.ReactNode
+    children: React.ReactNode
+    onClick: () => void
+    disabled?: boolean
+    /** Why the item can't be used now, shown under it while disabled */
+    disabledHint?: string
+}) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            disabled={disabled}
+            className="group/item flex w-full items-start gap-2.5 rounded-md px-2.5 py-2 text-left text-[13px] hover:bg-accent disabled:pointer-events-none [&_svg]:mt-px [&_svg]:size-4 [&_svg]:text-muted-foreground"
+        >
+            <span className="contents group-disabled/item:[&>svg]:opacity-40">
+                {icon}
+            </span>
+            <span className="min-w-0">
+                <span className="block group-disabled/item:opacity-40">
+                    {children}
+                </span>
+                {disabled && disabledHint && (
+                    <span className="block text-xs text-muted-foreground">
+                        {disabledHint}
+                    </span>
+                )}
+            </span>
+        </button>
+    )
+}
+
+/**
+ * The message box: text, attachments, the selected shapes, the model picker
+ * and send/stop. `variant="hero"` is the large box on the start screen.
+ */
+export function Composer({
+    variant = "panel",
+    placeholder,
+    autoFocus = false,
+}: {
+    variant?: "panel" | "hero"
+    placeholder?: string
+    autoFocus?: boolean
+}) {
+    const dict = useDictionary()
+    const engine = useChatEngine()
+    const {
+        input,
+        setInput,
+        files,
+        setFiles,
+        pdfData,
+        urlData,
+        setUrlData,
+        isBusy,
+        error,
+        chatSelection,
+        dismissSelection,
+        modelConfig,
+    } = engine
+    const sendShortcut = useSettingsStore((s) => s.sendShortcut)
+    const openSettings = useUiStore((s) => s.openSettings)
+    const focusToken = useUiStore((s) => s.focusComposerToken)
+
+    const textareaRef = useRef<HTMLTextAreaElement>(null)
+    const fileInputRef = useRef<HTMLInputElement>(null)
+    const [isDragging, setIsDragging] = useState(false)
+    const [addOpen, setAddOpen] = useState(false)
+    const [templatesOpen, setTemplatesOpen] = useState(false)
+    const [showUrlDialog, setShowUrlDialog] = useState(false)
+    const [isExtractingUrl, setIsExtractingUrl] = useState(false)
+    const [saveTemplateOpen, setSaveTemplateOpen] = useState(false)
+
+    const isHero = variant === "hero"
+    // Allow a retry when the last request failed, even mid-stream. While
+    // the chat is being left, what is typed could not be sent.
+    const isDisabled = (isBusy && !error) || engine.isLeaving
+    const canSend =
+        !isDisabled && !engine.isExtractingAttachments && !!input.trim()
+
+    const adjustHeight = useCallback(() => {
+        const textarea = textareaRef.current
+        if (!textarea) return
+        textarea.style.height = "auto"
+        textarea.style.height = `${Math.min(textarea.scrollHeight, 220)}px`
+    }, [])
+    useEffect(() => {
+        adjustHeight()
+    }, [input, adjustHeight])
+
+    // Focus requests from elsewhere (new chat, "ask AI" button, ⌘/)
+    useEffect(() => {
+        if (focusToken === 0 && !autoFocus) return
+        const timer = setTimeout(() => textareaRef.current?.focus(), 60)
+        return () => clearTimeout(timer)
+    }, [focusToken, autoFocus])
+
+    const addFiles = (newFiles: File[]) => {
+        const { validFiles, errors } = validateFiles(
+            newFiles,
+            files.length,
+            dict,
+        )
+        showValidationErrors(errors, dict)
+        if (validFiles.length > 0) setFiles([...files, ...validFiles])
+    }
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        // Enter that confirms an IME candidate must not send the message
+        if (e.nativeEvent.isComposing || e.keyCode === 229) return
+        const shouldSend =
+            sendShortcut === "enter"
+                ? e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey
+                : (e.metaKey || e.ctrlKey) && e.key === "Enter"
+        if (shouldSend) {
+            e.preventDefault()
+            if (canSend) engine.submit()
+        }
+    }
+
+    const handlePaste = async (e: React.ClipboardEvent) => {
+        if (isDisabled) return
+        const imageItems = Array.from(e.clipboardData.items).filter((item) =>
+            item.type.startsWith("image/"),
+        )
+        if (imageItems.length === 0) return
+        const imageFiles = imageItems
+            .map((item, index) => {
+                const file = item.getAsFile()
+                if (!file) return null
+                return new File(
+                    [file],
+                    `pasted-image-${Date.now()}-${index}.${file.type.split("/")[1]}`,
+                    { type: file.type },
+                )
+            })
+            .filter((f): f is File => f !== null)
+        addFiles(imageFiles)
+    }
+
+    const handleUrlExtract = async (url: string) => {
+        setIsExtractingUrl(true)
+        // Functional updates, so a removal or send made while extracting is
+        // not overwritten when the request finishes
+        try {
+            setUrlData((prev) =>
+                new Map(prev).set(url, {
+                    url,
+                    title: url,
+                    content: "",
+                    charCount: 0,
+                    isExtracting: true,
+                }),
+            )
+            const data = await extractUrlContent(url)
+            setUrlData((prev) =>
+                prev.has(url) ? new Map(prev).set(url, data) : prev,
+            )
+            setShowUrlDialog(false)
+        } catch (err) {
+            setUrlData((prev) => {
+                const next = new Map(prev)
+                next.delete(url)
+                return next
+            })
+            showErrorToast(
+                <span className="text-muted-foreground">
+                    {err instanceof Error ? err.message : dict.url.failed}
+                </span>,
+            )
+        } finally {
+            setIsExtractingUrl(false)
+        }
+    }
+
+    const selectionLabel =
+        chatSelection.length === 1
+            ? formatMessage(dict.selection.one, {
+                  label:
+                      chatSelection[0].label ||
+                      (chatSelection[0].isEdge
+                          ? dict.selection.connector
+                          : dict.selection.shape),
+              })
+            : formatMessage(dict.selection.many, {
+                  count: chatSelection.length,
+              })
+
+    const hasChips =
+        chatSelection.length > 0 || files.length > 0 || urlData.size > 0
+
+    return (
+        <form
+            id={isHero ? "hero-chat-form" : "chat-form"}
+            onSubmit={(e) => {
+                e.preventDefault()
+                if (canSend) engine.submit()
+            }}
+            onDragOver={(e) => {
+                e.preventDefault()
+                setIsDragging(true)
+            }}
+            onDragLeave={(e) => {
+                e.preventDefault()
+                setIsDragging(false)
+            }}
+            onDrop={(e) => {
+                e.preventDefault()
+                setIsDragging(false)
+                if (!isDisabled) addFiles(Array.from(e.dataTransfer.files))
+            }}
+            className={cn(
+                "group/composer relative w-full rounded-[14px] border border-border bg-card transition-[border-color,box-shadow] duration-150",
+                "focus-within:border-foreground/20 focus-within:shadow-[0_0_0_4px_var(--accent)]",
+                isHero && "rounded-[18px] border-transparent shadow-pop",
+                isDragging &&
+                    "border-foreground/30 shadow-[0_0_0_4px_var(--marker-soft)]",
+            )}
+        >
+            {hasChips && (
+                <div className="flex flex-wrap items-center gap-1.5 px-2.5 pt-2.5">
+                    {chatSelection.length > 0 && (
+                        <span
+                            className="inline-flex max-w-full items-center gap-1.5 rounded-lg bg-marker-soft py-1 pr-1 pl-2 text-xs font-medium text-marker-ink"
+                            data-testid="selection-chip"
+                        >
+                            <SquareDashedMousePointer className="size-3.5 shrink-0" />
+                            <span className="truncate">{selectionLabel}</span>
+                            <button
+                                type="button"
+                                onClick={dismissSelection}
+                                aria-label={dict.selection.remove}
+                                className="rounded p-0.5 hover:bg-black/5 dark:hover:bg-white/10"
+                            >
+                                <X className="size-3" />
+                            </button>
+                        </span>
+                    )}
+                    {(files.length > 0 || urlData.size > 0) && (
+                        <div className="w-full">
+                            <FilePreviewList
+                                files={files}
+                                onRemoveFile={(file) =>
+                                    setFiles(files.filter((f) => f !== file))
+                                }
+                                pdfData={pdfData}
+                                urlData={urlData}
+                                onRemoveUrl={(url) =>
+                                    setUrlData((prev) => {
+                                        const next = new Map(prev)
+                                        next.delete(url)
+                                        return next
+                                    })
+                                }
+                            />
+                        </div>
+                    )}
+                </div>
+            )}
+
+            <textarea
+                ref={textareaRef}
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={handleKeyDown}
+                onPaste={handlePaste}
+                placeholder={
+                    placeholder ??
+                    (chatSelection.length > 0
+                        ? dict.selection.placeholder
+                        : dict.chat.placeholder)
+                }
+                disabled={isDisabled}
+                aria-label={dict.chat.inputLabel}
+                data-testid="chat-input"
+                rows={isHero ? 3 : 2}
+                className={cn(
+                    "block w-full resize-none bg-transparent text-foreground outline-none placeholder:text-faint scrollbar-thin disabled:opacity-60",
+                    isHero
+                        ? "min-h-[84px] px-[18px] pt-4 pb-1 text-[15px] leading-relaxed"
+                        : "min-h-[52px] px-3.5 pt-3 pb-1 text-sm",
+                )}
+            />
+
+            <div
+                className={cn(
+                    "flex items-center gap-0.5",
+                    isHero ? "px-2.5 pt-1 pb-2.5" : "px-1.5 pt-0.5 pb-1.5",
+                )}
+            >
+                <Popover open={addOpen} onOpenChange={setAddOpen}>
+                    <PopoverTrigger asChild>
+                        <IconButton
+                            label={dict.chat.attach}
+                            tooltipSide="top"
+                            disabled={isDisabled}
+                            data-testid="composer-add"
+                        >
+                            <Plus />
+                        </IconButton>
+                    </PopoverTrigger>
+                    <PopoverContent
+                        side="top"
+                        align="start"
+                        className="w-64 p-1"
+                    >
+                        <MenuItem
+                            icon={<Paperclip />}
+                            onClick={() => {
+                                setAddOpen(false)
+                                fileInputRef.current?.click()
+                            }}
+                        >
+                            {dict.chat.uploadFile}
+                        </MenuItem>
+                        <MenuItem
+                            icon={<Globe />}
+                            onClick={() => {
+                                setAddOpen(false)
+                                setShowUrlDialog(true)
+                            }}
+                        >
+                            {dict.chat.ExtractURL}
+                        </MenuItem>
+                        <MenuItem
+                            icon={<BookmarkPlus />}
+                            disabled={!input.trim()}
+                            disabledHint={dict.templates.saveDisabledHint}
+                            onClick={() => {
+                                setAddOpen(false)
+                                setSaveTemplateOpen(true)
+                            }}
+                        >
+                            {dict.templates.saveAsTemplate}
+                        </MenuItem>
+                    </PopoverContent>
+                </Popover>
+                <IconButton
+                    label={dict.templates.myTemplates}
+                    tooltipSide="top"
+                    disabled={isDisabled}
+                    onClick={() => setTemplatesOpen(true)}
+                >
+                    <BookMarked />
+                </IconButton>
+
+                <div className="ml-auto flex min-w-0 flex-1 items-center justify-end gap-1">
+                    <ModelSelector
+                        models={modelConfig.models}
+                        selectedModelId={modelConfig.selectedModelId}
+                        onSelect={modelConfig.setSelectedModelId}
+                        onConfigure={() => openSettings("models")}
+                        disabled={isDisabled}
+                        showUnvalidatedModels={
+                            modelConfig.showUnvalidatedModels
+                        }
+                    />
+                    {!isBusy && input.trim() && (
+                        <kbd
+                            className="hidden shrink-0 font-sans text-[11px] text-faint sm:inline"
+                            aria-hidden
+                        >
+                            {sendShortcut === "enter" ? "↵" : `${modKey}↵`}
+                        </kbd>
+                    )}
+                    {isBusy ? (
+                        <button
+                            type="button"
+                            onClick={engine.stop}
+                            aria-label={dict.chat.stopGeneration}
+                            className="inline-flex size-8 shrink-0 items-center justify-center rounded-[10px] bg-foreground text-background transition-opacity hover:opacity-85"
+                        >
+                            <Square className="size-3 fill-current" />
+                        </button>
+                    ) : (
+                        <button
+                            type="submit"
+                            disabled={!canSend}
+                            aria-label={dict.chat.send}
+                            className="inline-flex size-8 shrink-0 items-center justify-center rounded-[10px] bg-primary text-primary-foreground transition-[opacity,background-color] hover:opacity-90 disabled:bg-muted disabled:text-faint"
+                        >
+                            <ArrowUp className="size-4 stroke-[2.25]" />
+                        </button>
+                    )}
+                </div>
+            </div>
+
+            <input
+                ref={fileInputRef}
+                type="file"
+                className="hidden"
+                accept={ATTACHMENT_ACCEPT}
+                data-testid="attachment-input"
+                multiple
+                disabled={isDisabled}
+                onChange={(e) => {
+                    addFiles(Array.from(e.target.files || []))
+                    e.target.value = ""
+                }}
+            />
+
+            <UrlInputDialog
+                open={showUrlDialog}
+                onOpenChange={setShowUrlDialog}
+                onSubmit={handleUrlExtract}
+                isExtracting={isExtractingUrl}
+            />
+            <TemplateCreateDialog
+                open={saveTemplateOpen}
+                onOpenChange={setSaveTemplateOpen}
+                onSuccess={() => setSaveTemplateOpen(false)}
+                initialPrompt={input.trim()}
+            />
+            <Dialog open={templatesOpen} onOpenChange={setTemplatesOpen}>
+                <DialogContent className="flex max-h-[80vh] flex-col gap-0 p-0 sm:max-w-lg">
+                    <DialogHeader className="px-5 pt-5 pb-2">
+                        <DialogTitle>{dict.templates.myTemplates}</DialogTitle>
+                    </DialogHeader>
+                    <div className="min-h-0 flex-1 overflow-y-auto px-3 pb-3 scrollbar-thin">
+                        <TemplatePanel
+                            setInput={(value) => {
+                                setInput(value)
+                                setTemplatesOpen(false)
+                            }}
+                            currentInput={input}
+                            onSendTemplate={(template) => {
+                                setTemplatesOpen(false)
+                                engine.sendTemplate(template.prompt)
+                            }}
+                        />
+                    </div>
+                </DialogContent>
+            </Dialog>
+        </form>
+    )
+}
diff --git a/components/chat/lobby-hero.tsx b/components/chat/lobby-hero.tsx
new file mode 100644
index 00000000..ec168246
--- /dev/null
+++ b/components/chat/lobby-hero.tsx
@@ -0,0 +1,284 @@
+import { FileText, FileUp, History, Pencil } from "lucide-react"
+import type React from "react"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { getAssetUrl } from "@/lib/base-path"
+import { cn } from "@/lib/utils"
+import { useChatEngine } from "./chat-engine"
+import { Composer } from "./composer"
+import { SessionMenu } from "./session-menu"
+
+interface Example {
+    key: string
+    title: string
+    description: string
+    /** Picture of the result (or of the input, for "replicate" examples) */
+    image?: string
+    prompt: string
+    /** Bundled file sent with the prompt; matches the cached example */
+    file?: { path: string; name: string; type: string }
+}
+
+async function loadExampleFile(file: NonNullable<Example["file"]>) {
+    const response = await fetch(getAssetUrl(file.path))
+    const blob = await response.blob()
+    return new File([blob], file.name, { type: file.type })
+}
+
+/** One start-screen choice: a small picture, a title and one line */
+function ExampleCard({
+    onClick,
+    title,
+    description,
+    picture,
+    plain,
+    testId,
+}: {
+    onClick: () => void
+    title: string
+    description: string
+    picture: React.ReactNode
+    /** An icon on a tinted tile instead of a diagram on paper */
+    plain?: boolean
+    testId?: string
+}) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            className="group/example flex min-w-0 items-center gap-2.5 rounded-xl border border-border bg-card p-1.5 pr-2.5 text-left transition-colors hover:border-foreground/25"
+            data-testid={testId}
+        >
+            <span
+                className={cn(
+                    "flex h-12 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg",
+                    plain ? "bg-muted" : "sheet-light bg-white",
+                )}
+            >
+                {picture}
+            </span>
+            <span className="min-w-0 flex-1">
+                <span className="line-clamp-2 text-[13px] leading-snug font-medium text-foreground">
+                    {title}
+                </span>
+                <span className="mt-0.5 block truncate text-xs text-muted-foreground">
+                    {description}
+                </span>
+            </span>
+        </button>
+    )
+}
+
+/**
+ * Start screen over an empty canvas: one large message box and the cached
+ * examples (they answer instantly without calling a model).
+ */
+export function LobbyHero({
+    onDrawYourself,
+    onOpenFile,
+    compact = false,
+}: {
+    onDrawYourself: () => void
+    onOpenFile: () => void
+    /** Phone layout: no example pictures, tighter spacing */
+    compact?: boolean
+}) {
+    const dict = useDictionary()
+    const t = dict.lobby
+    const engine = useChatEngine()
+
+    // Prompts and file names must stay as they are: cached responses match them
+    const examples: Example[] = [
+        {
+            key: "paper",
+            title: dict.examples.paperToDiagram,
+            description: dict.examples.paperDescription,
+            prompt: "Summarize this paper as a diagram",
+            file: {
+                path: "/chain-of-thought.txt",
+                name: "chain-of-thought.txt",
+                type: "text/plain",
+            },
+        },
+        {
+            key: "animated",
+            title: dict.examples.animatedDiagram,
+            description: dict.examples.animatedDescription,
+            image: "/animated_connectors.svg",
+            prompt: "Give me a **animated connector** diagram of transformer's architecture",
+        },
+        {
+            key: "aws",
+            title: dict.examples.awsArchitecture,
+            description: dict.examples.awsDescription,
+            image: "/aws_demo.svg",
+            prompt: "Replicate this in aws style",
+            file: {
+                path: "/architecture.png",
+                name: "architecture.png",
+                type: "image/png",
+            },
+        },
+        {
+            key: "flowchart",
+            title: dict.examples.replicateFlowchart,
+            description: dict.examples.replicateDescription,
+            image: "/example.png",
+            prompt: "Replicate this flowchart.",
+            file: {
+                path: "/example.png",
+                name: "example.png",
+                type: "image/png",
+            },
+        },
+        {
+            key: "cat",
+            title: dict.examples.creativeDrawing,
+            description: dict.examples.creativeDescription,
+            image: "/cat_demo.svg",
+            prompt: "Draw a cat for me",
+        },
+    ]
+
+    const pickExample = async (example: Example) => {
+        engine.setInput(example.prompt)
+        if (!example.file) {
+            engine.setFiles([])
+            return
+        }
+        try {
+            engine.setFiles([await loadExampleFile(example.file)])
+        } catch (error) {
+            console.error(dict.errors.failedToLoadExample, error)
+        }
+    }
+
+    return (
+        <div
+            className={cn(
+                "mx-auto w-full",
+                compact ? "max-w-xl px-4 py-8" : "max-w-[720px] px-6 py-10",
+            )}
+            data-testid="lobby-hero"
+        >
+            <h1
+                className={cn(
+                    "text-center font-semibold tracking-[-0.025em] text-foreground",
+                    compact
+                        ? "text-[26px] leading-tight"
+                        : "text-[34px] leading-[1.15]",
+                )}
+            >
+                {t.title}
+            </h1>
+            <p
+                className={cn(
+                    "mx-auto mt-2.5 max-w-[34em] text-center text-muted-foreground",
+                    compact ? "mb-5 text-[13px]" : "mb-6 text-[14.5px]",
+                )}
+            >
+                {t.lede}
+            </p>
+
+            <Composer
+                variant="hero"
+                autoFocus={!compact}
+                placeholder={t.placeholder}
+            />
+
+            <div
+                className={cn(
+                    "mt-5 grid gap-2",
+                    compact ? "grid-cols-1" : "grid-cols-3",
+                )}
+            >
+                {examples.map((example) =>
+                    compact ? (
+                        <button
+                            key={example.key}
+                            type="button"
+                            onClick={() => pickExample(example)}
+                            className="flex items-center gap-3 rounded-xl border border-border bg-card px-3 py-2.5 text-left hover:border-foreground/25"
+                        >
+                            <span className="min-w-0 flex-1">
+                                <span className="block truncate text-[13px] font-medium">
+                                    {example.title}
+                                </span>
+                                <span className="block truncate text-xs text-muted-foreground">
+                                    {example.description}
+                                </span>
+                            </span>
+                        </button>
+                    ) : (
+                        <ExampleCard
+                            key={example.key}
+                            onClick={() => pickExample(example)}
+                            title={example.title}
+                            description={example.description}
+                            testId={`example-${example.key}`}
+                            picture={
+                                example.image ? (
+                                    // biome-ignore lint/performance/noImgElement: static preview
+                                    <img
+                                        src={getAssetUrl(example.image)}
+                                        alt=""
+                                        className="max-h-10 max-w-[56px] object-contain transition-transform duration-300 group-hover/example:scale-[1.06]"
+                                    />
+                                ) : (
+                                    <FileText className="size-5 text-muted-foreground" />
+                                )
+                            }
+                            plain={!example.image}
+                        />
+                    ),
+                )}
+                {!compact && (
+                    <ExampleCard
+                        onClick={onOpenFile}
+                        title={dict.workspace.openFile}
+                        description={t.openFileHint}
+                        picture={
+                            <FileUp className="size-5 text-muted-foreground" />
+                        }
+                        plain
+                    />
+                )}
+            </div>
+            <p className="mt-3 text-center text-xs text-faint">
+                {dict.examples.cachedNote}
+            </p>
+
+            <div className="mt-6 flex flex-wrap items-center justify-center gap-x-5 gap-y-2 text-[13px] text-muted-foreground">
+                {engine.sessions.length > 0 && (
+                    <SessionMenu align="center" onOpenFile={onOpenFile}>
+                        <button
+                            type="button"
+                            className="inline-flex items-center gap-1.5 hover:text-foreground"
+                        >
+                            <History className="size-4" />
+                            {t.recent}
+                        </button>
+                    </SessionMenu>
+                )}
+                {compact && (
+                    <button
+                        type="button"
+                        onClick={onOpenFile}
+                        className="inline-flex items-center gap-1.5 hover:text-foreground"
+                    >
+                        <FileUp className="size-4" />
+                        {dict.workspace.openFile}
+                    </button>
+                )}
+                <button
+                    type="button"
+                    onClick={onDrawYourself}
+                    className="inline-flex items-center gap-1.5 hover:text-foreground"
+                    data-testid="draw-yourself"
+                >
+                    <Pencil className="size-4" />
+                    {t.drawYourself}
+                </button>
+            </div>
+        </div>
+    )
+}
diff --git a/components/chat/message-list.tsx b/components/chat/message-list.tsx
new file mode 100644
index 00000000..1418cf7d
--- /dev/null
+++ b/components/chat/message-list.tsx
@@ -0,0 +1,634 @@
+import type { UIMessage } from "ai"
+import {
+    AlertCircle,
+    BookmarkPlus,
+    Check,
+    ChevronDown,
+    Copy,
+    FileCode,
+    FileText,
+    Link,
+    Pencil,
+    RotateCcw,
+    ThumbsDown,
+    ThumbsUp,
+} from "lucide-react"
+import { useEffect, useRef, useState } from "react"
+import ReactMarkdown from "react-markdown"
+import { toast } from "sonner"
+import {
+    Reasoning,
+    ReasoningContent,
+    ReasoningTrigger,
+} from "@/components/ai-elements/reasoning"
+import { Shimmer } from "@/components/ai-elements/shimmer"
+import { TemplateCreateDialog } from "@/components/chat/TemplateCreateDialog"
+import type { ToolPartLike } from "@/components/chat/types"
+import { ValidationCard } from "@/components/chat/ValidationCard"
+import Image from "@/components/image-with-basepath"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { getApiEndpoint } from "@/lib/base-path"
+import { useCopy } from "@/lib/clipboard"
+import { cn } from "@/lib/utils"
+import { useUiStore } from "@/stores/ui-store"
+import { useChatEngine } from "./chat-engine"
+import {
+    getMessageTextContent,
+    getUserOriginalText,
+    splitTextIntoFileSections,
+    type TextSection,
+} from "./message-text"
+import { ToolActivity } from "./tool-activity"
+
+function ActionButton({
+    label,
+    onClick,
+    active,
+    children,
+}: {
+    label: string
+    onClick: () => void
+    active?: boolean
+    children: React.ReactNode
+}) {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            title={label}
+            aria-label={label}
+            className={cn(
+                "inline-flex size-7 items-center justify-center rounded-lg text-faint transition-colors hover:bg-accent hover:text-foreground [&_svg]:size-3.5",
+                active && "text-foreground",
+            )}
+        >
+            {children}
+        </button>
+    )
+}
+
+/** Copies a message's text, with a short "copied" state */
+function CopyButton({ text }: { text: string }) {
+    const dict = useDictionary()
+    const { copied, copy } = useCopy(() =>
+        toast.error(dict.chat.failedToCopyDetail),
+    )
+    return (
+        <ActionButton
+            label={copied ? dict.chat.copied : dict.chat.copyResponse}
+            onClick={() => copy(text)}
+        >
+            {copied ? <Check /> : <Copy />}
+        </ActionButton>
+    )
+}
+
+function AttachedSection({ section }: { section: TextSection }) {
+    const [open, setOpen] = useState(false)
+    const dict = useDictionary()
+    const Icon =
+        section.fileType === "pdf"
+            ? FileText
+            : section.fileType === "url"
+              ? Link
+              : FileCode
+    const chars =
+        section.charCount && section.charCount >= 1000
+            ? `${(section.charCount / 1000).toFixed(1)}k`
+            : section.charCount
+    return (
+        <div className="overflow-hidden rounded-lg border border-border bg-card">
+            <button
+                type="button"
+                onClick={(e) => {
+                    e.stopPropagation()
+                    setOpen((v) => !v)
+                }}
+                className="flex w-full items-center gap-2 px-2.5 py-1.5 text-left hover:bg-accent"
+            >
+                <Icon className="size-4 shrink-0 text-muted-foreground" />
+                <span className="min-w-0 flex-1 truncate text-xs font-medium text-foreground">
+                    {section.filename}
+                </span>
+                <span className="shrink-0 text-[11px] text-faint">
+                    {chars} {dict.file.chars}
+                </span>
+                <ChevronDown
+                    className={cn(
+                        "size-3.5 shrink-0 text-muted-foreground transition-transform",
+                        open && "rotate-180",
+                    )}
+                />
+            </button>
+            {open && (
+                <pre className="max-h-48 overflow-y-auto whitespace-pre-wrap border-t border-border px-2.5 py-2 text-xs text-muted-foreground scrollbar-thin">
+                    {section.content}
+                </pre>
+            )}
+        </div>
+    )
+}
+
+function MessageText({ text }: { text: string }) {
+    const sections = splitTextIntoFileSections(text)
+    return (
+        <div className="space-y-2">
+            {sections.map((section, index) =>
+                section.type === "text" ? (
+                    <div
+                        key={index}
+                        className={cn(
+                            "prose prose-sm max-w-none break-words text-[14px] leading-relaxed text-foreground [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+                            "prose-p:my-1.5 prose-pre:bg-surface-2 prose-pre:text-foreground prose-code:before:content-none prose-code:after:content-none dark:prose-invert",
+                        )}
+                    >
+                        <ReactMarkdown>{section.content}</ReactMarkdown>
+                    </div>
+                ) : (
+                    <AttachedSection key={index} section={section} />
+                ),
+            )}
+        </div>
+    )
+}
+
+function UserMessage({
+    message,
+    index,
+    isLast,
+}: {
+    message: UIMessage
+    index: number
+    isLast: boolean
+}) {
+    const dict = useDictionary()
+    const engine = useChatEngine()
+    const [editing, setEditing] = useState(false)
+    const [editText, setEditText] = useState("")
+    const [saveTemplate, setSaveTemplate] = useState(false)
+    const textareaRef = useRef<HTMLTextAreaElement>(null)
+    const text = getMessageTextContent(message)
+    const canEdit = isLast && !engine.isBusy
+
+    useEffect(() => {
+        if (editing) textareaRef.current?.focus()
+    }, [editing])
+
+    const startEdit = () => {
+        if (!canEdit) return
+        setEditText(getUserOriginalText(message))
+        setEditing(true)
+    }
+    const submitEdit = () => {
+        if (!editText.trim()) return
+        engine.editMessage(index, editText.trim())
+        setEditing(false)
+    }
+
+    if (editing) {
+        return (
+            <div className="ml-6 flex flex-col gap-2">
+                <textarea
+                    ref={textareaRef}
+                    value={editText}
+                    onChange={(e) => setEditText(e.target.value)}
+                    rows={Math.min(editText.split("\n").length + 1, 6)}
+                    onKeyDown={(e) => {
+                        if (e.key === "Escape") setEditing(false)
+                        else if (
+                            e.key === "Enter" &&
+                            (e.metaKey || e.ctrlKey)
+                        ) {
+                            e.preventDefault()
+                            submitEdit()
+                        }
+                    }}
+                    className="w-full resize-none rounded-xl border border-foreground/20 bg-card px-3 py-2.5 text-sm outline-none focus:shadow-[0_0_0_4px_var(--accent)]"
+                />
+                <div className="flex justify-end gap-2">
+                    <button
+                        type="button"
+                        onClick={() => setEditing(false)}
+                        className="h-7 rounded-lg px-3 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
+                    >
+                        {dict.common.cancel}
+                    </button>
+                    <button
+                        type="button"
+                        onClick={submitEdit}
+                        disabled={!editText.trim()}
+                        className="h-7 rounded-lg bg-primary px-3 text-xs font-medium text-primary-foreground disabled:opacity-40"
+                    >
+                        {dict.chat.saveAndSubmit}
+                    </button>
+                </div>
+            </div>
+        )
+    }
+
+    const images = (message.parts ?? []).filter((p) => p.type === "file") as {
+        url: string
+    }[]
+
+    return (
+        <div className="group/message flex items-start justify-end gap-1">
+            <div className="mt-1 flex shrink-0 items-center transition-opacity [@media(hover:hover)]:opacity-0 group-hover/message:opacity-100 focus-within:opacity-100">
+                {canEdit && (
+                    <ActionButton
+                        label={dict.chat.editMessage}
+                        onClick={startEdit}
+                    >
+                        <Pencil />
+                    </ActionButton>
+                )}
+                <CopyButton text={text} />
+                <ActionButton
+                    label={dict.templates.saveAsTemplate}
+                    onClick={() => setSaveTemplate(true)}
+                >
+                    <BookmarkPlus />
+                </ActionButton>
+            </div>
+            <div
+                className={cn(
+                    "min-w-0 max-w-[85%] rounded-2xl rounded-br-md bg-secondary px-3.5 py-2.5",
+                    canEdit &&
+                        "cursor-pointer transition-colors hover:bg-interactive-active",
+                )}
+                role={canEdit ? "button" : undefined}
+                tabIndex={canEdit ? 0 : undefined}
+                onClick={startEdit}
+                onKeyDown={(e) => {
+                    if (canEdit && (e.key === "Enter" || e.key === " ")) {
+                        e.preventDefault()
+                        startEdit()
+                    }
+                }}
+                title={canEdit ? dict.chat.clickToEdit : undefined}
+            >
+                {images.length > 0 && (
+                    <div className="mb-2 flex flex-wrap gap-1.5">
+                        {images.map((image, i) => (
+                            <Image
+                                key={i}
+                                src={image.url}
+                                width={96}
+                                height={72}
+                                alt={dict.chat.attachedImage}
+                                className="h-[72px] w-24 rounded-lg border border-border bg-white object-cover"
+                            />
+                        ))}
+                    </div>
+                )}
+                {text && <MessageText text={text} />}
+            </div>
+            {saveTemplate && (
+                <TemplateCreateDialog
+                    open
+                    onOpenChange={(open) => !open && setSaveTemplate(false)}
+                    onSuccess={() => setSaveTemplate(false)}
+                    initialPrompt={getUserOriginalText(message)}
+                />
+            )}
+        </div>
+    )
+}
+
+function AssistantMessage({
+    message,
+    index,
+    isLastMessage,
+    isLastAssistant,
+}: {
+    message: UIMessage
+    index: number
+    isLastMessage: boolean
+    isLastAssistant: boolean
+}) {
+    const dict = useDictionary()
+    // The thinking header in the page language
+    const thinkingMessage = (isStreaming: boolean, duration?: number) => {
+        if (isStreaming || duration === 0) {
+            return <Shimmer duration={1}>{dict.reasoning.thinking}</Shimmer>
+        }
+        if (duration === undefined) return <p>{dict.reasoning.thoughtBrief}</p>
+        return (
+            <p>
+                {duration === 1
+                    ? dict.reasoning.thoughtForOne
+                    : dict.reasoning.thoughtFor.replace(
+                          "{duration}",
+                          String(duration),
+                      )}
+            </p>
+        )
+    }
+    const engine = useChatEngine()
+    const [feedback, setFeedback] = useState<"good" | "bad" | null>(null)
+    const isRestored = engine.loadedMessageIdsRef.current.has(message.id)
+    const parts = message.parts ?? []
+    const isCachedExample = parts.some((p: any) =>
+        p.toolCallId?.startsWith("cached-"),
+    )
+    const text = getMessageTextContent(message)
+
+    const submitFeedback = async (value: "good" | "bad") => {
+        if (feedback === value) {
+            setFeedback(null)
+            return
+        }
+        setFeedback(value)
+        try {
+            await fetch(getApiEndpoint("/api/log-feedback"), {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                    messageId: message.id,
+                    feedback: value,
+                    sessionId: engine.langfuseSessionId,
+                }),
+            })
+        } catch (error) {
+            console.error("Failed to log feedback:", error)
+            toast.error(dict.errors.failedToRecordFeedback)
+            setFeedback(null)
+        }
+    }
+
+    // Consecutive text parts render together; tools render in place
+    const blocks: { kind: "text" | "tool" | "reasoning"; index: number }[] = []
+    parts.forEach((part, partIndex) => {
+        if (part.type === "reasoning")
+            blocks.push({ kind: "reasoning", index: partIndex })
+        else if (part.type?.startsWith("tool-"))
+            blocks.push({ kind: "tool", index: partIndex })
+        else if (part.type === "text") {
+            const last = blocks[blocks.length - 1]
+            if (last?.kind !== "text")
+                blocks.push({ kind: "text", index: partIndex })
+        }
+    })
+
+    const textRun = (start: number) => {
+        const out: string[] = []
+        for (let i = start; i < parts.length && parts[i].type === "text"; i++) {
+            out.push((parts[i] as { text: string }).text)
+        }
+        return out.join("\n")
+    }
+
+    return (
+        <div className="group/message space-y-2.5">
+            {blocks.map((block) => {
+                const part = parts[block.index]
+                if (block.kind === "reasoning") {
+                    const isStreamingReasoning =
+                        engine.status === "streaming" &&
+                        isLastMessage &&
+                        block.index === parts.length - 1
+                    return (
+                        <Reasoning
+                            key={`r-${block.index}`}
+                            className="w-full"
+                            isStreaming={isStreamingReasoning}
+                            defaultOpen={!isRestored}
+                        >
+                            <ReasoningTrigger
+                                getThinkingMessage={thinkingMessage}
+                            />
+                            <ReasoningContent>
+                                {(part as { text: string }).text}
+                            </ReasoningContent>
+                        </Reasoning>
+                    )
+                }
+                if (block.kind === "tool") {
+                    const toolPart = part as unknown as ToolPartLike
+                    const validationState =
+                        engine.validationStates[toolPart.toolCallId]
+                    return (
+                        <div key={`t-${block.index}`} className="space-y-2">
+                            <ToolActivity
+                                part={toolPart}
+                                isLastMessage={isLastMessage}
+                            />
+                            {toolPart.type === "tool-display_diagram" &&
+                                validationState && (
+                                    <ValidationCard
+                                        state={validationState}
+                                        onImproveWithSuggestions={
+                                            engine.improveWithSuggestions
+                                        }
+                                    />
+                                )}
+                        </div>
+                    )
+                }
+                const run = textRun(block.index)
+                if (!run.trim()) return null
+                return <MessageText key={`x-${block.index}`} text={run} />
+            })}
+
+            {!(engine.isBusy && isLastMessage) && (
+                <div className="-ml-1.5 flex items-center transition-opacity [@media(hover:hover)]:opacity-0 group-hover/message:opacity-100 focus-within:opacity-100">
+                    {text && <CopyButton text={text} />}
+                    {isLastAssistant && !isCachedExample && (
+                        <ActionButton
+                            label={dict.chat.regenerate}
+                            onClick={() => engine.regenerate(index)}
+                        >
+                            <RotateCcw />
+                        </ActionButton>
+                    )}
+                    <ActionButton
+                        label={dict.chat.goodResponse}
+                        active={feedback === "good"}
+                        onClick={() => submitFeedback("good")}
+                    >
+                        <ThumbsUp
+                            className={cn(
+                                feedback === "good" && "fill-current",
+                            )}
+                        />
+                    </ActionButton>
+                    <ActionButton
+                        label={dict.chat.badResponse}
+                        active={feedback === "bad"}
+                        onClick={() => submitFeedback("bad")}
+                    >
+                        <ThumbsDown
+                            className={cn(feedback === "bad" && "fill-current")}
+                        />
+                    </ActionButton>
+                </div>
+            )}
+        </div>
+    )
+}
+
+/**
+ * A failed request: what to do in the text color, the provider's own words
+ * below it, and the action that can fix it first
+ */
+function ErrorNotice({
+    text,
+    openModelConfig,
+    onOpenModelConfig,
+    onRetry,
+}: {
+    text: string
+    openModelConfig: boolean
+    onOpenModelConfig: () => void
+    onRetry?: () => void
+}) {
+    const dict = useDictionary()
+    // Provider errors are "hint\n\nprovider message"
+    const split = text.indexOf("\n\n")
+    const headline = split >= 0 ? text.slice(0, split) : text
+    const detail = split >= 0 ? text.slice(split + 2).trim() : ""
+    const button =
+        "inline-flex h-7 items-center gap-1 rounded-lg px-2.5 text-xs font-medium"
+    return (
+        <div
+            role="alert"
+            className="rounded-xl border border-destructive/25 bg-destructive/5 px-3.5 py-3 text-[13px]"
+        >
+            <div className="flex items-start gap-2.5">
+                <AlertCircle className="mt-0.5 size-4 shrink-0 text-destructive" />
+                <div className="min-w-0 flex-1">
+                    <p className="whitespace-pre-line break-words font-medium text-foreground">
+                        {headline}
+                    </p>
+                    {detail && (
+                        <p className="mt-1 whitespace-pre-line break-words text-xs text-muted-foreground">
+                            {detail}
+                        </p>
+                    )}
+                    {(openModelConfig || onRetry) && (
+                        <div className="mt-2.5 flex flex-wrap gap-2">
+                            {openModelConfig && (
+                                <button
+                                    type="button"
+                                    onClick={onOpenModelConfig}
+                                    className={cn(
+                                        button,
+                                        "bg-primary text-primary-foreground hover:opacity-90",
+                                    )}
+                                >
+                                    {dict.errors.llm.openModelSettings}
+                                </button>
+                            )}
+                            {onRetry && (
+                                <button
+                                    type="button"
+                                    onClick={onRetry}
+                                    className={cn(
+                                        button,
+                                        "border border-border bg-card text-foreground hover:bg-accent",
+                                    )}
+                                    data-testid="retry-button"
+                                >
+                                    <RotateCcw className="size-3.5" />
+                                    {dict.chat.retry}
+                                </button>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export function MessageList() {
+    const dict = useDictionary()
+    const openSettings = useUiStore((s) => s.openSettings)
+    const engine = useChatEngine()
+    const { messages } = engine
+    const endRef = useRef<HTMLDivElement>(null)
+    const prevCountRef = useRef(0)
+    const throttleRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+    // Keep the newest message in view; jump instantly on bulk loads
+    useEffect(() => {
+        if (!endRef.current || messages.length === 0) return
+        const prev = prevCountRef.current
+        prevCountRef.current = messages.length
+        if (prev === 0 || messages.length - prev > 1) {
+            endRef.current.scrollIntoView({ behavior: "instant", block: "end" })
+            return
+        }
+        if (!throttleRef.current) {
+            endRef.current.scrollIntoView({ behavior: "smooth", block: "end" })
+            throttleRef.current = setTimeout(() => {
+                throttleRef.current = null
+                endRef.current?.scrollIntoView({
+                    behavior: "smooth",
+                    block: "end",
+                })
+            }, 150)
+        }
+    }, [messages])
+
+    const lastAssistantIndex = messages
+        .map((m) => m.role)
+        .lastIndexOf("assistant")
+    const lastUserIndex = messages.map((m) => m.role).lastIndexOf("user")
+
+    return (
+        <div className="space-y-4 px-4 pt-4 pb-2">
+            {messages.map((message, index) => {
+                const isRestored = engine.loadedMessageIdsRef.current.has(
+                    message.id,
+                )
+                return (
+                    <div
+                        key={message.id}
+                        className={cn(!isRestored && "animate-message-in")}
+                    >
+                        {message.role === "user" ? (
+                            <UserMessage
+                                message={message}
+                                index={index}
+                                isLast={index === lastUserIndex}
+                            />
+                        ) : message.role === "assistant" ? (
+                            <AssistantMessage
+                                message={message}
+                                index={index}
+                                isLastMessage={index === messages.length - 1}
+                                isLastAssistant={index === lastAssistantIndex}
+                            />
+                        ) : (
+                            <ErrorNotice
+                                text={getMessageTextContent(message)}
+                                openModelConfig={
+                                    !!(
+                                        message.metadata as
+                                            | { openModelConfig?: boolean }
+                                            | undefined
+                                    )?.openModelConfig
+                                }
+                                onOpenModelConfig={() => openSettings("models")}
+                                onRetry={
+                                    index === messages.length - 1 &&
+                                    !engine.isBusy &&
+                                    lastUserIndex >= 0
+                                        ? engine.retryLastMessage
+                                        : undefined
+                                }
+                            />
+                        )}
+                    </div>
+                )
+            })}
+            {engine.status === "submitted" &&
+                messages[messages.length - 1]?.role === "user" && (
+                    <div className="px-1 text-[13px]" aria-live="polite">
+                        <Shimmer as="span">{dict.reasoning.thinking}</Shimmer>
+                    </div>
+                )}
+            <div ref={endRef} />
+        </div>
+    )
+}
diff --git a/components/chat/message-text.ts b/components/chat/message-text.ts
new file mode 100644
index 00000000..0b5d62d2
--- /dev/null
+++ b/components/chat/message-text.ts
@@ -0,0 +1,64 @@
+import type { UIMessage } from "ai"
+
+/** A run of plain text, or an attached file / URL whose text was inlined */
+export interface TextSection {
+    type: "text" | "file" | "url"
+    content: string
+    filename?: string
+    charCount?: number
+    fileType?: "pdf" | "text" | "url"
+}
+
+// Matches the [PDF: ...], [File: ...] and [URL: ...] sections appended to the user's text
+export const APPENDED_FILE_SECTIONS_PATTERN =
+    /\n\n\[(PDF|File|URL):\s*[^\]]+\]\n[\s\S]*$/
+
+export function splitTextIntoFileSections(text: string): TextSection[] {
+    const sections: TextSection[] = []
+    const filePattern =
+        /\[(PDF|File|URL):\s*([^\]]+)\]\n([\s\S]*?)(?=\n\n\[(PDF|File|URL):|$)/g
+    let lastIndex = 0
+    let match: RegExpExecArray | null
+
+    while ((match = filePattern.exec(text)) !== null) {
+        const beforeText = text.slice(lastIndex, match.index).trim()
+        if (beforeText) sections.push({ type: "text", content: beforeText })
+
+        const sectionType = match[1].toLowerCase()
+        const fileType =
+            sectionType === "pdf"
+                ? "pdf"
+                : sectionType === "url"
+                  ? "url"
+                  : "text"
+        const content = match[3].trim()
+        sections.push({
+            type: sectionType === "url" ? "url" : "file",
+            content,
+            filename: match[2].trim(),
+            charCount: content.length,
+            fileType,
+        })
+        lastIndex = match.index + match[0].length
+    }
+
+    const remainingText = text.slice(lastIndex).trim()
+    if (remainingText) sections.push({ type: "text", content: remainingText })
+    if (sections.length === 0) sections.push({ type: "text", content: text })
+    return sections
+}
+
+export function getMessageTextContent(message: UIMessage): string {
+    if (!message.parts) return ""
+    return message.parts
+        .filter((part) => part.type === "text")
+        .map((part) => (part as { text: string }).text)
+        .join("\n")
+}
+
+/** Only the user's typed text, without appended file content */
+export function getUserOriginalText(message: UIMessage): string {
+    return getMessageTextContent(message)
+        .replace(APPENDED_FILE_SECTIONS_PATTERN, "")
+        .trim()
+}
diff --git a/components/chat/session-menu.tsx b/components/chat/session-menu.tsx
new file mode 100644
index 00000000..08ed3544
--- /dev/null
+++ b/components/chat/session-menu.tsx
@@ -0,0 +1,294 @@
+import { FileUp, Pencil, Plus, Search, Trash2 } from "lucide-react"
+import { useParams } from "next/navigation"
+import { useEffect, useRef, useState } from "react"
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/components/ui/popover"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { formatRelativeTime } from "@/lib/relative-time"
+import { cn } from "@/lib/utils"
+import { useChatEngine } from "./chat-engine"
+
+/** Title shown for a session, with the default "New Chat" localized */
+export function useSessionTitle(): string {
+    const dict = useDictionary()
+    const { currentTitle } = useChatEngine()
+    return !currentTitle || currentTitle === "New Chat"
+        ? dict.workspace.untitled
+        : currentTitle
+}
+
+/**
+ * Popover listing saved diagrams: rename the current one, switch, delete,
+ * start a new one or open a file.
+ */
+export function SessionMenu({
+    children,
+    align = "start",
+    onOpenFile,
+}: {
+    children: React.ReactNode
+    align?: "start" | "center" | "end"
+    onOpenFile: () => void
+}) {
+    const dict = useDictionary()
+    const t = dict.sessionHistory
+    const params = useParams<{ lang: string }>()
+    const engine = useChatEngine()
+    const [open, setOpen] = useState(false)
+    const title = useSessionTitle()
+    const [query, setQuery] = useState("")
+    const [renaming, setRenaming] = useState(false)
+    const [draftTitle, setDraftTitle] = useState("")
+    const [toDelete, setToDelete] = useState<string | null>(null)
+    const renameRef = useRef<HTMLInputElement>(null)
+
+    useEffect(() => {
+        if (!open) {
+            setRenaming(false)
+            setQuery("")
+        }
+    }, [open])
+    useEffect(() => {
+        if (renaming) renameRef.current?.select()
+    }, [renaming])
+
+    const sessions = engine.sessions.filter((s) =>
+        s.title.toLowerCase().includes(query.trim().toLowerCase()),
+    )
+
+    const commitRename = async () => {
+        const next = draftTitle.trim()
+        setRenaming(false)
+        if (next && next !== title) await engine.renameSession(next)
+    }
+
+    return (
+        <>
+            <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger asChild>{children}</PopoverTrigger>
+                <PopoverContent
+                    align={align}
+                    className="flex max-h-[min(560px,80vh)] w-[340px] flex-col overflow-hidden rounded-xl p-0 shadow-pop"
+                >
+                    <div className="border-b border-border p-3">
+                        {renaming ? (
+                            <input
+                                ref={renameRef}
+                                value={draftTitle}
+                                onChange={(e) => setDraftTitle(e.target.value)}
+                                onBlur={commitRename}
+                                onKeyDown={(e) => {
+                                    // Enter that picks an IME candidate
+                                    // (Safari: keyCode 229)
+                                    if (
+                                        e.nativeEvent.isComposing ||
+                                        e.keyCode === 229
+                                    ) {
+                                        return
+                                    }
+                                    if (e.key === "Enter") commitRename()
+                                    if (e.key === "Escape") setRenaming(false)
+                                }}
+                                maxLength={100}
+                                aria-label={t.rename}
+                                className="h-8 w-full rounded-lg border border-foreground/20 bg-card px-2.5 text-[13px] font-medium outline-none"
+                            />
+                        ) : (
+                            <button
+                                type="button"
+                                onClick={() => {
+                                    setDraftTitle(title)
+                                    setRenaming(true)
+                                }}
+                                className="group/rename flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-left hover:bg-accent"
+                                data-testid="rename-session"
+                            >
+                                <span className="min-w-0 flex-1 truncate text-[13px] font-medium">
+                                    {title}
+                                </span>
+                                <Pencil className="size-3.5 shrink-0 text-muted-foreground" />
+                            </button>
+                        )}
+                        <div className="mt-2 flex gap-1.5">
+                            <button
+                                type="button"
+                                disabled={engine.isBusy}
+                                onClick={() => {
+                                    setOpen(false)
+                                    engine.newChat()
+                                }}
+                                className="flex h-8 flex-1 items-center justify-center gap-1.5 rounded-lg bg-primary text-xs font-medium text-primary-foreground hover:opacity-90 disabled:opacity-40"
+                            >
+                                <Plus className="size-3.5" />
+                                {dict.nav.newChat}
+                            </button>
+                            <button
+                                type="button"
+                                disabled={engine.isBusy}
+                                onClick={() => {
+                                    setOpen(false)
+                                    onOpenFile()
+                                }}
+                                className="flex h-8 flex-1 items-center justify-center gap-1.5 rounded-lg border border-border text-xs text-muted-foreground hover:text-foreground disabled:opacity-40"
+                            >
+                                <FileUp className="size-3.5" />
+                                {dict.workspace.openFile}
+                            </button>
+                        </div>
+                    </div>
+
+                    {engine.sessions.length > 0 && (
+                        <div className="px-3 pt-3">
+                            <div className="relative">
+                                <Search className="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-faint" />
+                                <input
+                                    value={query}
+                                    onChange={(e) => setQuery(e.target.value)}
+                                    placeholder={t.searchPlaceholder}
+                                    className="h-8 w-full rounded-lg bg-muted pr-2.5 pl-8 text-[13px] outline-none placeholder:text-faint"
+                                />
+                            </div>
+                        </div>
+                    )}
+
+                    <div className="min-h-0 flex-1 overflow-y-auto p-1.5 scrollbar-thin">
+                        {engine.sessions.length === 0 ? (
+                            <p className="px-3 py-6 text-center text-xs text-muted-foreground">
+                                {t.empty}
+                            </p>
+                        ) : sessions.length === 0 ? (
+                            <p className="px-3 py-6 text-center text-xs text-muted-foreground">
+                                {t.noResults}
+                            </p>
+                        ) : (
+                            sessions.map((session) => {
+                                const isCurrent =
+                                    session.id === engine.currentSessionId
+                                // The answer being written must stay in its
+                                // own chat
+                                const locked = engine.isBusy && !isCurrent
+                                const choose = () => {
+                                    if (locked) return
+                                    setOpen(false)
+                                    if (!isCurrent) {
+                                        engine.selectSession(session.id)
+                                    }
+                                }
+                                return (
+                                    // biome-ignore lint/a11y/useSemanticElements: contains the delete button
+                                    <div
+                                        key={session.id}
+                                        role="button"
+                                        tabIndex={locked ? -1 : 0}
+                                        aria-disabled={locked || undefined}
+                                        title={locked ? t.busyHint : undefined}
+                                        onClick={choose}
+                                        onKeyDown={(e) => {
+                                            if (e.target !== e.currentTarget)
+                                                return
+                                            if (
+                                                e.key === "Enter" ||
+                                                e.key === " "
+                                            ) {
+                                                e.preventDefault()
+                                                choose()
+                                            }
+                                        }}
+                                        className={cn(
+                                            "group/session flex cursor-pointer items-center gap-2.5 rounded-lg p-1.5 hover:bg-accent",
+                                            isCurrent && "bg-accent",
+                                            locked &&
+                                                "cursor-not-allowed opacity-50 hover:bg-transparent",
+                                        )}
+                                    >
+                                        <span className="sheet-light flex h-9 w-12 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-white">
+                                            {session.thumbnailDataUrl && (
+                                                // biome-ignore lint/performance/noImgElement: data URL thumbnail
+                                                <img
+                                                    src={
+                                                        session.thumbnailDataUrl
+                                                    }
+                                                    alt=""
+                                                    className="max-h-8 max-w-11 object-contain"
+                                                />
+                                            )}
+                                        </span>
+                                        <span className="min-w-0 flex-1">
+                                            <span className="block truncate text-[13px] text-foreground">
+                                                {session.title === "New Chat"
+                                                    ? dict.workspace.untitled
+                                                    : session.title}
+                                            </span>
+                                            <span className="block text-[11px] text-faint">
+                                                {formatRelativeTime(
+                                                    session.updatedAt,
+                                                    params.lang,
+                                                    t.justNow,
+                                                )}
+                                            </span>
+                                        </span>
+                                        <button
+                                            type="button"
+                                            disabled={
+                                                isCurrent && engine.isBusy
+                                            }
+                                            onClick={(e) => {
+                                                e.stopPropagation()
+                                                setToDelete(session.id)
+                                            }}
+                                            aria-label={t.deleteTitle}
+                                            className="inline-flex size-7 shrink-0 items-center justify-center rounded-md text-faint [@media(hover:hover)]:opacity-0 hover:bg-destructive/10 hover:text-destructive group-hover/session:opacity-100 focus-visible:opacity-100"
+                                        >
+                                            <Trash2 className="size-3.5" />
+                                        </button>
+                                    </div>
+                                )
+                            })
+                        )}
+                    </div>
+                </PopoverContent>
+            </Popover>
+
+            <AlertDialog
+                open={!!toDelete}
+                onOpenChange={(o) => !o && setToDelete(null)}
+            >
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>{t.deleteTitle}</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            {t.deleteDescription}
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>
+                            {dict.common.cancel}
+                        </AlertDialogCancel>
+                        <AlertDialogAction
+                            className="bg-destructive text-white hover:bg-destructive/90"
+                            onClick={() => {
+                                if (toDelete) engine.deleteSession(toDelete)
+                                setToDelete(null)
+                            }}
+                        >
+                            {dict.common.delete}
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </>
+    )
+}
diff --git a/components/chat/tool-activity.tsx b/components/chat/tool-activity.tsx
new file mode 100644
index 00000000..1a2397ca
--- /dev/null
+++ b/components/chat/tool-activity.tsx
@@ -0,0 +1,487 @@
+import {
+    AlertCircle,
+    Check,
+    ChevronDown,
+    Code2,
+    Copy,
+    Library,
+    PenTool,
+    Redo2,
+    RotateCcw,
+    Undo2,
+} from "lucide-react"
+import { useState } from "react"
+import { Shimmer } from "@/components/ai-elements/shimmer"
+import { CodeBlock } from "@/components/code-block"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { useCopy } from "@/lib/clipboard"
+import { formatMessage } from "@/lib/i18n/utils"
+import { cn, isMxCellXmlComplete } from "@/lib/utils"
+import { describeChanges } from "@/lib/version-text"
+import { useUiStore } from "@/stores/ui-store"
+import { type DiagramVersion, useVersionsStore } from "@/stores/versions-store"
+import { useChatEngine } from "./chat-engine"
+import type { DiagramOperation, ToolPartLike } from "./types"
+
+export function ToolInputDetails({ part }: { part: ToolPartLike }) {
+    const { input, state } = part
+    if (!input || typeof input !== "object") return null
+    if (typeof input.xml === "string" && input.xml) {
+        // Plain text while streaming; highlighting re-runs on every chunk
+        return state === "input-streaming" || state === "input-available" ? (
+            <pre className="max-h-48 overflow-auto whitespace-pre-wrap break-all font-mono text-[11px] leading-relaxed text-muted-foreground scrollbar-thin">
+                {input.xml}
+            </pre>
+        ) : (
+            <CodeBlock code={input.xml} language="xml" />
+        )
+    }
+    if (Array.isArray(input.operations)) {
+        // Streamed or invalid input can hold anything: show only what React
+        // can render (an object in place of a string would crash the chat)
+        const shown = (input.operations as DiagramOperation[]).filter(
+            (op) =>
+                typeof (op as { operation?: unknown })?.operation === "string",
+        )
+        const text = (value: unknown) =>
+            typeof value === "string" ? value : ""
+        return (
+            <div className="space-y-2">
+                {shown.map((op, index) => (
+                    <div
+                        key={`${op.operation}-${text(op.cell_id)}-${index}`}
+                        className="overflow-hidden rounded-lg border border-border bg-card"
+                    >
+                        <div className="flex items-center gap-2 border-b border-border px-2.5 py-1 text-[11px]">
+                            <span className="font-medium text-foreground">
+                                {op.operation}
+                            </span>
+                            <span className="text-muted-foreground">
+                                {text(op.cell_id)}
+                            </span>
+                        </div>
+                        {text(op.new_xml) && (
+                            <pre className="overflow-x-auto whitespace-pre-wrap break-all px-2.5 py-1.5 font-mono text-[11px] text-muted-foreground">
+                                {text(op.new_xml)}
+                            </pre>
+                        )}
+                    </div>
+                ))}
+            </div>
+        )
+    }
+    if (Object.keys(input).length === 0) return null
+    return <CodeBlock code={JSON.stringify(input, null, 2)} language="json" />
+}
+
+function toolText(part: ToolPartLike): string {
+    const { input } = part
+    if (!input || typeof input !== "object") return ""
+    if (typeof input.xml === "string" && input.xml) return input.xml
+    if (Array.isArray(input.operations)) {
+        return JSON.stringify(input.operations, null, 2)
+    }
+    return JSON.stringify(input, null, 2)
+}
+
+/** Picture of a version (SVG data URL), or what stands in for it */
+export function VersionThumb({
+    svg,
+    dimmed,
+    className,
+}: {
+    /** undefined or null: still being made; "": none could be made */
+    svg: string | null | undefined
+    dimmed?: boolean
+    className?: string
+}) {
+    const t = useDictionary().versions
+    if (svg) {
+        return (
+            // biome-ignore lint/performance/noImgElement: data URL thumbnail
+            <img
+                src={svg}
+                alt=""
+                className={cn(
+                    "object-contain transition-opacity",
+                    dimmed && "opacity-40",
+                    className,
+                )}
+            />
+        )
+    }
+    if (svg === "") {
+        return <span className="text-xs text-faint">{t.noPreview}</span>
+    }
+    return (
+        <Shimmer as="span" className="text-xs">
+            {t.rendering}
+        </Shimmer>
+    )
+}
+
+/**
+ * Card for one diagram version produced by a tool call. The latest shows
+ * its picture; older ones fold into one row (the picture opens Compare).
+ */
+function VersionCard({
+    part,
+    version,
+    index,
+    isLatest,
+}: {
+    part: ToolPartLike
+    version: DiagramVersion
+    index: number
+    isLatest: boolean
+}) {
+    const dict = useDictionary()
+    const t = dict.versions
+    const engine = useChatEngine()
+    const undoneVersionId = useVersionsStore((s) => s.undoneVersionId)
+    const onCanvasVersionId = useVersionsStore((s) => s.onCanvasVersionId)
+    const openCompare = useUiStore((s) => s.openCompare)
+    const [showCode, setShowCode] = useState(false)
+    const { copied, copy } = useCopy()
+
+    const isUndone = undoneVersionId === version.id
+    const isOnCanvas = onCanvasVersionId === version.id
+    const isEdit = part.type === "tool-edit_diagram"
+    // Undo/redo belongs to the newest change while it is (or was) on the
+    // canvas; after an older version was restored, this one is restored too
+    const canUndo =
+        isLatest && version.beforeXml !== undefined && (isOnCanvas || isUndone)
+    const title = isUndone ? t.undone : isEdit ? t.edited : t.created
+    const summary = version.fromScratch
+        ? formatMessage(t.totals, {
+              shapes: version.summary.shapesAdded,
+              edges: version.summary.edgesAdded,
+          })
+        : describeChanges(version.summary, t)
+    const badge = (
+        <span
+            className={cn(
+                "shrink-0 rounded-md px-1.5 py-0.5 text-[11px] font-semibold tabular-nums",
+                isOnCanvas
+                    ? "bg-marker-soft text-marker-ink"
+                    : "bg-muted text-muted-foreground",
+            )}
+        >
+            v{index + 1}
+        </span>
+    )
+    const actionClass =
+        "inline-flex h-7 shrink-0 items-center gap-1 rounded-lg px-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-40"
+    const restoreButton = (
+        <button
+            type="button"
+            disabled={engine.isBusy || isOnCanvas}
+            onClick={() => engine.restoreVersion(version.id)}
+            className={actionClass}
+            data-testid="version-restore"
+        >
+            <RotateCcw className="size-3.5" />
+            {formatMessage(t.restoreVersion, { n: index + 1 })}
+        </button>
+    )
+
+    if (!isLatest) {
+        return (
+            <div
+                className="flex items-center gap-2.5 rounded-xl border border-border bg-card p-1.5 pr-2"
+                data-testid="version-card"
+                data-tool-state={part.state}
+            >
+                <button
+                    type="button"
+                    onClick={() => openCompare(version.id)}
+                    className="sheet-light flex h-9 w-14 shrink-0 items-center justify-center overflow-hidden rounded-md border border-border bg-white hover:border-foreground/30"
+                    aria-label={t.compare}
+                    title={t.compare}
+                >
+                    <VersionThumb
+                        svg={version.svg}
+                        className="max-h-8 max-w-[52px]"
+                    />
+                </button>
+                {badge}
+                <div className="min-w-0 flex-1" title={summary}>
+                    <div className="truncate text-[13px] text-foreground">
+                        {title}
+                    </div>
+                    <div className="truncate text-xs text-muted-foreground">
+                        {summary}
+                    </div>
+                </div>
+                {restoreButton}
+            </div>
+        )
+    }
+
+    return (
+        <div
+            className={cn(
+                "overflow-hidden rounded-xl border border-border bg-card",
+                isOnCanvas && "border-foreground/15",
+            )}
+            data-testid="version-card"
+            data-tool-state={part.state}
+        >
+            <button
+                type="button"
+                onClick={() => openCompare(version.id)}
+                className="group/thumb sheet-light relative flex h-24 w-full items-center justify-center border-b border-border bg-white"
+                aria-label={t.compare}
+            >
+                <VersionThumb
+                    svg={version.svg}
+                    dimmed={isUndone}
+                    className="max-h-20 max-w-[88%]"
+                />
+                <span className="absolute right-2 bottom-2 rounded-md bg-black/60 px-1.5 py-0.5 text-[11px] text-white opacity-0 transition-opacity group-hover/thumb:opacity-100">
+                    {t.compare}
+                </span>
+            </button>
+            <div className="flex items-center gap-2.5 px-3 py-2.5">
+                {badge}
+                <div className="min-w-0 flex-1" title={summary}>
+                    <div className="truncate text-[13px] font-medium text-foreground">
+                        {title}
+                    </div>
+                    <div className="line-clamp-2 text-xs text-muted-foreground">
+                        {summary}
+                    </div>
+                </div>
+                <button
+                    type="button"
+                    onClick={() => setShowCode((v) => !v)}
+                    aria-label={showCode ? t.hideCode : t.showCode}
+                    title={showCode ? t.hideCode : t.showCode}
+                    className="inline-flex size-7 shrink-0 items-center justify-center rounded-lg text-muted-foreground hover:bg-accent hover:text-foreground"
+                >
+                    <Code2 className="size-4" />
+                </button>
+                {canUndo ? (
+                    <button
+                        type="button"
+                        disabled={engine.isBusy}
+                        onClick={() => engine.undoVersion(version.id)}
+                        className={actionClass}
+                        data-testid="version-undo"
+                    >
+                        {isUndone ? (
+                            <Redo2 className="size-3.5" />
+                        ) : (
+                            <Undo2 className="size-3.5" />
+                        )}
+                        {isUndone ? t.redo : t.undo}
+                    </button>
+                ) : (
+                    restoreButton
+                )}
+            </div>
+            {showCode && (
+                <div className="relative border-t border-border bg-surface-1 px-3 py-2.5">
+                    <button
+                        type="button"
+                        onClick={() => copy(toolText(part))}
+                        className="absolute top-2 right-2 z-10 inline-flex size-7 items-center justify-center rounded-lg bg-card text-muted-foreground shadow-float hover:text-foreground"
+                        aria-label={dict.chat.copyResponse}
+                    >
+                        {copied ? (
+                            <Check className="size-3.5" />
+                        ) : (
+                            <Copy className="size-3.5" />
+                        )}
+                    </button>
+                    <ToolInputDetails part={part} />
+                </div>
+            )}
+        </div>
+    )
+}
+
+/** Compact row for tool calls that are running, failed or produced no version */
+function ToolRow({
+    part,
+    icon,
+    label,
+    tone = "default",
+    detail,
+}: {
+    part: ToolPartLike
+    icon: React.ReactNode
+    label: React.ReactNode
+    tone?: "default" | "error" | "warning"
+    detail?: string
+}) {
+    const [open, setOpen] = useState(false)
+    const hasInput = !!part.input && Object.keys(part.input).length > 0
+    return (
+        <div
+            className={cn(
+                "overflow-hidden rounded-xl border border-border bg-card",
+                tone === "error" && "border-destructive/25",
+            )}
+            data-testid="tool-row"
+            data-tool-name={part.type?.replace("tool-", "")}
+            data-tool-state={part.state}
+        >
+            <button
+                type="button"
+                onClick={() => setOpen((v) => !v)}
+                disabled={!hasInput && !detail}
+                className="flex w-full items-center gap-2.5 px-3 py-2.5 text-left"
+            >
+                <span
+                    className={cn(
+                        "inline-flex size-7 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground [&_svg]:size-4",
+                        tone === "error" &&
+                            "bg-destructive/10 text-destructive",
+                        tone === "warning" && "bg-marker-soft text-marker-ink",
+                    )}
+                >
+                    {icon}
+                </span>
+                <span className="min-w-0 flex-1 truncate text-[13px] text-foreground">
+                    {label}
+                </span>
+                {(hasInput || detail) && (
+                    <ChevronDown
+                        className={cn(
+                            "size-4 shrink-0 text-muted-foreground transition-transform",
+                            open && "rotate-180",
+                        )}
+                    />
+                )}
+            </button>
+            {open && (
+                <div className="space-y-2 border-t border-border bg-surface-1 px-3 py-2.5">
+                    {detail && (
+                        <p
+                            className={cn(
+                                "whitespace-pre-wrap break-words text-xs",
+                                tone === "error"
+                                    ? "text-destructive"
+                                    : "text-muted-foreground",
+                            )}
+                        >
+                            {detail}
+                        </p>
+                    )}
+                    {hasInput && <ToolInputDetails part={part} />}
+                </div>
+            )}
+        </div>
+    )
+}
+
+export function ToolActivity({
+    part,
+    isLastMessage,
+}: {
+    part: ToolPartLike
+    isLastMessage: boolean
+}) {
+    const dict = useDictionary()
+    const t = dict.versions
+    const engine = useChatEngine()
+    const versions = useVersionsStore((s) => s.versions)
+    const toolName = part.type?.replace("tool-", "")
+    const { state, errorText, output } = part
+
+    const versionIndex = versions.findIndex(
+        (v) => v.toolCallId === part.toolCallId,
+    )
+    if (state === "output-available" && versionIndex >= 0) {
+        return (
+            <VersionCard
+                part={part}
+                version={versions[versionIndex]}
+                index={versionIndex}
+                isLatest={versionIndex === versions.length - 1}
+            />
+        )
+    }
+
+    if (toolName === "get_shape_library" && state !== "output-error") {
+        const isDone = state === "output-available"
+        return (
+            <ToolRow
+                part={part}
+                icon={<Library />}
+                label={
+                    isDone ? (
+                        t.libraryLoaded
+                    ) : (
+                        <Shimmer as="span">{t.loadingLibrary}</Shimmer>
+                    )
+                }
+                detail={
+                    isDone && typeof output === "string"
+                        ? `${output.slice(0, 600)}${output.length > 600 ? "…" : ""}`
+                        : undefined
+                }
+            />
+        )
+    }
+
+    if (state === "input-streaming" || state === "input-available") {
+        return (
+            <ToolRow
+                part={part}
+                icon={<PenTool />}
+                label={
+                    <Shimmer as="span">
+                        {toolName === "edit_diagram" ? t.editing : t.drawing}
+                    </Shimmer>
+                }
+            />
+        )
+    }
+
+    if (state === "output-error") {
+        const stopped = errorText === "Stopped by user"
+        // Incomplete XML means the output hit the length limit. Without an
+        // input the JSON was broken (the server repairs JSON cut short by
+        // the limit).
+        const truncated =
+            !stopped &&
+            (toolName === "display_diagram" || toolName === "append_diagram") &&
+            typeof part.input?.xml === "string" &&
+            !isMxCellXmlComplete(part.input.xml)
+        return (
+            <ToolRow
+                part={part}
+                icon={<AlertCircle />}
+                tone={stopped ? "default" : truncated ? "warning" : "error"}
+                label={
+                    stopped
+                        ? t.stopped
+                        : truncated
+                          ? dict.tools.truncated
+                          : isLastMessage && engine.isBusy
+                            ? t.failedRetrying
+                            : t.failed
+                }
+                detail={
+                    stopped
+                        ? undefined
+                        : truncated
+                          ? t.truncatedHint
+                          : (errorText ??
+                            (typeof output === "string" ? output : ""))
+                }
+            />
+        )
+    }
+
+    // Finished without a version (sessions saved before versions existed)
+    return (
+        <ToolRow
+            part={part}
+            icon={<PenTool />}
+            label={toolName === "edit_diagram" ? t.edited : t.created}
+        />
+    )
+}
diff --git a/components/chat/use-diagram-streaming.ts b/components/chat/use-diagram-streaming.ts
new file mode 100644
index 00000000..770bb5e7
--- /dev/null
+++ b/components/chat/use-diagram-streaming.ts
@@ -0,0 +1,223 @@
+"use client"
+
+import type { UIMessage } from "ai"
+import type { RefObject } from "react"
+import { useCallback, useEffect, useRef } from "react"
+import type { DiagramOperation, ToolPartLike } from "@/components/chat/types"
+import { useDiagram } from "@/contexts/diagram-context"
+import {
+    convertToLegalXml,
+    extractCompleteMxCells,
+    replaceNodes,
+} from "@/lib/utils"
+import { applyDiagramOperations } from "@/packages/mcp-server/src/diagram-operations.ts"
+import { BLANK_MXFILE } from "@/packages/mcp-server/src/pages.ts"
+
+// Helper to extract complete operations from streaming input
+function getCompleteOperations(
+    operations: DiagramOperation[] | undefined,
+): DiagramOperation[] {
+    if (!operations || !Array.isArray(operations)) return []
+    return operations.filter(
+        (op) =>
+            op &&
+            typeof op.operation === "string" &&
+            ["update", "add", "delete"].includes(op.operation) &&
+            typeof op.cell_id === "string" &&
+            op.cell_id.length > 0 &&
+            (op.operation === "delete" || typeof op.new_xml === "string"),
+    )
+}
+
+interface UseDiagramStreamingParams {
+    messages: UIMessage[]
+    processedToolCallsRef: RefObject<Set<string>>
+    editDiagramOriginalXmlRef: RefObject<Map<string, string>>
+    loadedMessageIdsRef: RefObject<Set<string>>
+}
+
+/**
+ * Draws AI tool output onto the canvas while it streams, as a preview that
+ * is not recorded in undo history.
+ *
+ * display_diagram: the complete mxCells written so far. edit_diagram: the
+ * complete operations applied to the diagram from before the call. The tool
+ * handler validates and commits the final result. Runs in the chat engine
+ * so streaming continues while the chat panel is collapsed.
+ */
+export function useDiagramStreaming({
+    messages,
+    processedToolCallsRef,
+    editDiagramOriginalXmlRef,
+    loadedMessageIdsRef,
+}: UseDiagramStreamingParams) {
+    const { chartXML, chartXMLRef, loadDiagram } = useDiagram()
+    const previousXML = useRef<string>("")
+    // Last processed XML per toolCallId, to skip redundant work while streaming
+    const lastProcessedXmlRef = useRef<Map<string, string>>(new Map())
+
+    // Reset when messages become empty (new chat or session switch), so
+    // cached examples work again after starting a new session
+    useEffect(() => {
+        if (messages.length === 0) {
+            previousXML.current = ""
+            lastProcessedXmlRef.current.clear()
+            processedToolCallsRef.current.clear()
+            editDiagramOriginalXmlRef.current.clear()
+        }
+    }, [messages.length, processedToolCallsRef, editDiagramOriginalXmlRef])
+
+    // Streaming preview of display_diagram: draw the complete cells written
+    // so far. The tool handler validates and loads the final diagram.
+    const handleDisplayChart = useCallback(
+        (xml: string) => {
+            const completeCells = extractCompleteMxCells(xml || "")
+            if (!completeCells) return
+            const convertedXml = convertToLegalXml(completeCells)
+            if (convertedXml === previousXML.current) return
+
+            // Skip this update while the cells written so far don't parse
+            const testDoc = new DOMParser().parseFromString(
+                `<root>${convertedXml}</root>`,
+                "text/xml",
+            )
+            if (testDoc.querySelector("parsererror")) return
+
+            try {
+                // Replace the first page's cells so other pages stay intact.
+                // An empty canvas gets a default mxfile to put the cells in.
+                const baseXML = chartXML || BLANK_MXFILE
+                const replacedXML = replaceNodes(baseXML, convertedXml)
+                previousXML.current = convertedXml
+                loadDiagram(replacedXML, true, "preview")
+            } catch (error) {
+                console.error("Error processing XML:", error)
+            }
+        },
+        [chartXML, loadDiagram],
+    )
+
+    useEffect(() => {
+        // Only the last message can still be streaming
+        const message = messages[messages.length - 1]
+        if (!message?.parts) return
+
+        // Messages restored from a saved session were applied before it was
+        // saved; the saved diagram is authoritative, so don't replay them
+        if (loadedMessageIdsRef.current.has(message.id)) return
+
+        // The diagram without streamed previews, as loaded last: the tool
+        // handler's result of an earlier edit is there before the chartXML
+        // state catches up. Undoing a failed edit's preview below changes it
+        // too, and an edit streaming right after must start from the undone
+        // diagram.
+        let baseXml = chartXMLRef.current
+
+        for (const part of message.parts) {
+            if (
+                part.type !== "tool-display_diagram" &&
+                part.type !== "tool-edit_diagram"
+            ) {
+                continue
+            }
+            const { toolCallId, state, input } = part as ToolPartLike
+
+            // Failed or stopped: if the original XML is still stored, the
+            // tool handler never ran (invalid JSON, or the user pressed
+            // stop), so undo the streamed preview here. Invalid JSON leaves
+            // no input, so check this first.
+            if (state === "output-error") {
+                const originalXml =
+                    editDiagramOriginalXmlRef.current.get(toolCallId)
+                if (originalXml) {
+                    editDiagramOriginalXmlRef.current.delete(toolCallId)
+                    loadDiagram(originalXml, true, "revert")
+                    baseXml = originalXml
+                }
+                continue
+            }
+
+            // Input complete, or the tool handler, a stop or an error took
+            // the call already: the tool handler loads the checked diagram.
+            // The messages update at most every 150 ms (useChat throttle in
+            // the chat engine), so they can still show the call streaming
+            // after that.
+            if (
+                state !== "input-streaming" ||
+                processedToolCallsRef.current.has(toolCallId)
+            ) {
+                processedToolCallsRef.current.add(toolCallId)
+                lastProcessedXmlRef.current.delete(toolCallId)
+                lastProcessedXmlRef.current.delete(`${toolCallId}-opCount`)
+                continue
+            }
+
+            if (part.type === "tool-display_diagram") {
+                const xml = input?.xml as string | undefined
+                // Skip if XML hasn't changed since last processing
+                if (!xml || lastProcessedXmlRef.current.get(toolCallId) === xml)
+                    continue
+                // Keep the diagram from before the preview, to undo it on a
+                // stop or an error
+                if (!editDiagramOriginalXmlRef.current.has(toolCallId)) {
+                    editDiagramOriginalXmlRef.current.set(
+                        toolCallId,
+                        baseXml || BLANK_MXFILE,
+                    )
+                }
+                handleDisplayChart(xml)
+                lastProcessedXmlRef.current.set(toolCallId, xml)
+                continue
+            }
+
+            // edit_diagram: apply operations incrementally for a preview.
+            // editDiagramOriginalXmlRef is shared with the tool handler.
+            if (!input?.operations) continue
+            const completeOps = getCompleteOperations(
+                input.operations as DiagramOperation[],
+            )
+            if (completeOps.length === 0) continue
+
+            // Capture the original XML when streaming starts
+            if (!editDiagramOriginalXmlRef.current.has(toolCallId)) {
+                if (!baseXml) {
+                    console.warn(
+                        "[edit_diagram streaming] No chart XML available",
+                    )
+                    continue
+                }
+                editDiagramOriginalXmlRef.current.set(toolCallId, baseXml)
+            }
+            const originalXml =
+                editDiagramOriginalXmlRef.current.get(toolCallId)
+            if (!originalXml) continue
+
+            // Skip if no change from last processed state
+            const countKey = `${toolCallId}-opCount`
+            const opCount = String(completeOps.length)
+            if (lastProcessedXmlRef.current.get(countKey) === opCount) continue
+            try {
+                const { result } = applyDiagramOperations(
+                    originalXml,
+                    completeOps,
+                )
+                // Load the full document so other pages stay intact
+                loadDiagram(result, true, "preview")
+                lastProcessedXmlRef.current.set(countKey, opCount)
+            } catch (e) {
+                console.warn(
+                    "[edit_diagram streaming] Operation failed:",
+                    e instanceof Error ? e.message : e,
+                )
+            }
+        }
+    }, [
+        messages,
+        handleDisplayChart,
+        chartXMLRef,
+        loadDiagram,
+        processedToolCallsRef,
+        editDiagramOriginalXmlRef,
+        loadedMessageIdsRef,
+    ])
+}
diff --git a/components/chat/use-versions.ts b/components/chat/use-versions.ts
new file mode 100644
index 00000000..330771a8
--- /dev/null
+++ b/components/chat/use-versions.ts
@@ -0,0 +1,169 @@
+import type { RefObject } from "react"
+import { useEffect, useRef } from "react"
+import { toast } from "sonner"
+import { useDiagram } from "@/contexts/diagram-context"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { diffDiagrams, isSameDocument } from "@/lib/diagram-diff"
+import { clearHighlights, highlightCells } from "@/lib/drawio/editor-bridge"
+import { formatMessage } from "@/lib/i18n/utils"
+import { BLANK_MXFILE } from "@/packages/mcp-server/src/pages.ts"
+import { useVersionsStore } from "@/stores/versions-store"
+
+interface UseVersionsParams {
+    /** Index of the user message whose turn is running */
+    currentTurnRef: RefObject<number>
+    isBusy: boolean
+    /** Live busy state, for the restore toast's Undo that runs later */
+    isTurnActive: () => boolean
+    /** Changes when another chat comes on screen */
+    getChatGeneration: () => number
+}
+
+/**
+ * Turns every committed AI change into a version (card in the chat), marks
+ * the changed shapes on the canvas, and restores or undoes versions.
+ */
+export function useVersions({
+    currentTurnRef,
+    isBusy,
+    isTurnActive,
+    getChatGeneration,
+}: UseVersionsParams) {
+    const dict = useDictionary()
+    // chartXML changes with hand edits, undo and loads; the ref is the
+    // document on the canvas now
+    const {
+        loadDiagram,
+        getVersionSvg,
+        setCommitHandler,
+        chartXML,
+        chartXMLRef,
+    } = useDiagram()
+    // A restore commits too; that path must not add a version
+    const restoringRef = useRef(false)
+
+    // Registered once: re-registering on every render would leave a gap
+    // (effect cleanups run before the streaming hook commits). The handler
+    // only reads refs and stable functions.
+    useEffect(() => {
+        setCommitHandler(({ beforeXml, afterXml, toolCallId }) => {
+            if (restoringRef.current) return
+            const { summary, touchedIds, fromScratch } = diffDiagrams(
+                beforeXml,
+                afterXml,
+            )
+            const id = useVersionsStore.getState().addVersion({
+                xml: afterXml,
+                beforeXml,
+                turnIndex: currentTurnRef.current,
+                toolCallId,
+                summary,
+                fromScratch,
+            })
+            // Mark what changed, unless the whole diagram is new
+            if (!fromScratch) {
+                setTimeout(() => {
+                    const marker = getComputedStyle(document.documentElement)
+                        .getPropertyValue("--marker")
+                        .trim()
+                    highlightCells(touchedIds, marker || "#ffd84d")
+                }, 60)
+            }
+            // The picture is of the canvas: take it right away, before a
+            // newer version can be on it; once one is, this one gets none
+            // rather than the newer one's
+            const isNewest = () =>
+                useVersionsStore.getState().versions.at(-1)?.id === id
+            setTimeout(async () => {
+                const svg = isNewest() ? await getVersionSvg() : null
+                useVersionsStore
+                    .getState()
+                    .updateVersion(id, { svg: svg && isNewest() ? svg : "" })
+            }, 0)
+        })
+        return () => setCommitHandler(null)
+    }, [])
+
+    // A version is on the canvas (or its change undone) while the canvas
+    // holds that XML. Hand edits, Ctrl+Z or a new page end it, with an
+    // external draw.io too. Checked once an answer is done: its previews
+    // change the canvas on the way.
+    useEffect(() => {
+        if (isBusy || isTurnActive() || !chartXML) return
+        const store = useVersionsStore.getState()
+        const id = store.onCanvasVersionId ?? store.undoneVersionId
+        const version = store.versions.find((v) => v.id === id)
+        if (!version) return
+        const shown =
+            id === store.onCanvasVersionId
+                ? version.xml
+                : version.beforeXml || BLANK_MXFILE
+        if (isSameDocument(shown, chartXML)) return
+        store.clearCanvasFlags()
+        // Its Undo would also take the changes made since away
+        toast.dismiss("version-restored")
+    }, [chartXML, isBusy])
+
+    const apply = (xml: string) => {
+        restoringRef.current = true
+        try {
+            loadDiagram(xml, true, "commit")
+        } finally {
+            restoringRef.current = false
+        }
+        clearHighlights()
+    }
+
+    const restoreVersion = (versionId: string) => {
+        if (isTurnActive()) return
+        const store = useVersionsStore.getState()
+        const index = store.versions.findIndex((v) => v.id === versionId)
+        if (index < 0) return
+        // The canvas before the restore, to go back to it: a multi-page
+        // document is loaded in full, which Ctrl+Z cannot undo
+        const before = chartXMLRef.current
+        const wasOnCanvas = store.onCanvasVersionId
+        const wasUndone = store.undoneVersionId
+        const generation = getChatGeneration()
+        apply(store.versions[index].xml)
+        store.setOnCanvas(versionId)
+        toast.success(
+            formatMessage(dict.versions.restoredVersion, { n: index + 1 }),
+            {
+                id: "version-restored",
+                duration: 8000,
+                action: {
+                    label: dict.versions.undoRestore,
+                    onClick: () => {
+                        // Another chat is on screen, or an answer is
+                        // changing the canvas: the old canvas is not theirs
+                        if (!before || isTurnActive()) return
+                        if (getChatGeneration() !== generation) return
+                        apply(before)
+                        const now = useVersionsStore.getState()
+                        if (wasUndone) now.setUndone(wasUndone)
+                        else if (wasOnCanvas) now.setOnCanvas(wasOnCanvas)
+                    },
+                },
+            },
+        )
+    }
+
+    /** Undo the change of the latest version, or redo it when undone */
+    const undoVersion = (versionId: string) => {
+        if (isTurnActive()) return
+        const store = useVersionsStore.getState()
+        const version = store.versions.find((v) => v.id === versionId)
+        if (!version) return
+        if (store.undoneVersionId === versionId) {
+            apply(version.xml)
+            store.setOnCanvas(versionId)
+            return
+        }
+        if (version.beforeXml === undefined) return
+        apply(version.beforeXml || BLANK_MXFILE)
+        store.setUndone(versionId)
+    }
+
+    return { restoreVersion, undoVersion }
+}
diff --git a/components/chat/version-strip.tsx b/components/chat/version-strip.tsx
new file mode 100644
index 00000000..77ff46db
--- /dev/null
+++ b/components/chat/version-strip.tsx
@@ -0,0 +1,91 @@
+import { useEffect, useRef } from "react"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { cn } from "@/lib/utils"
+import { useUiStore } from "@/stores/ui-store"
+import { useVersionsStore } from "@/stores/versions-store"
+import { useChatEngine } from "./chat-engine"
+
+/** Row of version thumbnails under the panel header; click to compare */
+export function VersionStrip() {
+    const dict = useDictionary()
+    const versions = useVersionsStore((s) => s.versions)
+    const onCanvasVersionId = useVersionsStore((s) => s.onCanvasVersionId)
+    const openCompare = useUiStore((s) => s.openCompare)
+    const engine = useChatEngine()
+    const scrollRef = useRef<HTMLDivElement>(null)
+
+    // Keep the newest version in view
+    useEffect(() => {
+        const el = scrollRef.current
+        if (el) el.scrollTo({ left: el.scrollWidth, behavior: "smooth" })
+    }, [versions.length])
+
+    // Versions with no card in the chat: saved by older app versions, from
+    // a turn that was retried, or drawn by a call that then failed its
+    // screenshot check (a call still running gets its card when done)
+    const hasCardless = versions.some(
+        (v) =>
+            !v.toolCallId ||
+            !engine.messages.some((m) =>
+                m.parts?.some((p) => {
+                    const part = p as { toolCallId?: string; state?: string }
+                    return (
+                        part.toolCallId === v.toolCallId &&
+                        part.state !== "output-error"
+                    )
+                }),
+            ),
+    )
+    // One version with a card: the strip adds nothing to it
+    if (versions.length < 2 && !hasCardless) return null
+
+    return (
+        <div className="flex items-center gap-2 border-b border-border px-3.5 pt-1 pb-3">
+            <span className="shrink-0 text-xs text-muted-foreground">
+                {dict.versions.strip}
+            </span>
+            <div
+                ref={scrollRef}
+                className="flex min-w-0 flex-1 gap-1.5 overflow-x-auto p-1 scrollbar-thin"
+            >
+                {versions.map((version, index) => {
+                    const isCurrent = version.id === onCanvasVersionId
+                    return (
+                        <button
+                            key={version.id}
+                            type="button"
+                            onClick={() => openCompare(version.id)}
+                            title={`v${index + 1}${version.id === onCanvasVersionId ? ` · ${dict.versions.currentCanvas}` : ""}`}
+                            className={cn(
+                                "sheet-light relative flex h-12 w-[72px] shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-white transition-colors hover:border-foreground/30",
+                                // An outline with a gap reads on the white
+                                // picture in both themes
+                                isCurrent &&
+                                    "outline-2 outline-offset-2 outline-foreground",
+                            )}
+                            data-testid="version-thumb"
+                        >
+                            {version.svg && (
+                                // biome-ignore lint/performance/noImgElement: data URL thumbnail
+                                <img
+                                    src={version.svg}
+                                    alt=""
+                                    className="max-h-9 max-w-[62px] object-contain"
+                                />
+                            )}
+                            <span
+                                className={cn(
+                                    "absolute bottom-0.5 left-1 text-[10px] font-medium tabular-nums text-neutral-500",
+                                    isCurrent &&
+                                        "font-semibold text-neutral-900",
+                                )}
+                            >
+                                v{index + 1}
+                            </span>
+                        </button>
+                    )
+                })}
+            </div>
+        </div>
+    )
+}
diff --git a/components/history-dialog.tsx b/components/history-dialog.tsx
deleted file mode 100644
index a2fd746f..00000000
--- a/components/history-dialog.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import Image from "@/components/image-with-basepath"
-import { Button } from "@/components/ui/button"
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from "@/components/ui/dialog"
-import { useDiagram } from "@/contexts/diagram-context"
-import { useDictionary } from "@/hooks/use-dictionary"
-import { formatMessage } from "@/lib/i18n/utils"
-
-interface HistoryDialogProps {
-    showHistory: boolean
-    onToggleHistory: (show: boolean) => void
-}
-
-export function HistoryDialog({
-    showHistory,
-    onToggleHistory,
-}: HistoryDialogProps) {
-    const dict = useDictionary()
-    const { loadDiagram: onDisplayChart, diagramHistory } = useDiagram()
-    const [selectedIndex, setSelectedIndex] = useState<number | null>(null)
-
-    const handleClose = () => {
-        setSelectedIndex(null)
-        onToggleHistory(false)
-    }
-
-    const handleConfirmRestore = () => {
-        if (selectedIndex !== null) {
-            // Skip validation for trusted history snapshots
-            onDisplayChart(diagramHistory[selectedIndex].xml, true)
-            handleClose()
-        }
-    }
-
-    return (
-        <Dialog open={showHistory} onOpenChange={onToggleHistory}>
-            <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto scrollbar-thin">
-                <DialogHeader>
-                    <DialogTitle>{dict.history.title}</DialogTitle>
-                    <DialogDescription>
-                        {dict.history.description}
-                    </DialogDescription>
-                </DialogHeader>
-
-                {diagramHistory.length === 0 ? (
-                    <div className="text-center p-4 text-gray-500">
-                        {dict.history.noHistory}
-                    </div>
-                ) : (
-                    <div className="grid grid-cols-2 md:grid-cols-3 gap-4 py-4">
-                        {diagramHistory.map((item, index) => (
-                            <div
-                                key={index}
-                                className={`border rounded-md p-2 cursor-pointer hover:border-primary transition-colors ${
-                                    selectedIndex === index
-                                        ? "border-primary ring-2 ring-primary"
-                                        : ""
-                                }`}
-                                onClick={() => setSelectedIndex(index)}
-                            >
-                                <div className="aspect-video bg-white rounded overflow-hidden flex items-center justify-center">
-                                    <Image
-                                        src={item.svg}
-                                        alt={`${dict.history.version} ${index + 1}`}
-                                        width={200}
-                                        height={100}
-                                        className="object-contain w-full h-full p-1"
-                                    />
-                                </div>
-                                <div className="text-xs text-center mt-1 text-gray-500">
-                                    {dict.history.version} {index + 1}
-                                </div>
-                            </div>
-                        ))}
-                    </div>
-                )}
-
-                <DialogFooter>
-                    {selectedIndex !== null ? (
-                        <>
-                            <div className="flex-1 text-sm text-muted-foreground">
-                                {formatMessage(dict.history.restoreTo, {
-                                    version: selectedIndex + 1,
-                                })}
-                            </div>
-                            <Button
-                                variant="outline"
-                                onClick={() => setSelectedIndex(null)}
-                            >
-                                {dict.common.cancel}
-                            </Button>
-                            <Button onClick={handleConfirmRestore}>
-                                {dict.common.confirm}
-                            </Button>
-                        </>
-                    ) : (
-                        <Button variant="outline" onClick={handleClose}>
-                            {dict.common.close}
-                        </Button>
-                    )}
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    )
-}
diff --git a/components/model-config-dialog.tsx b/components/model-config-dialog.tsx
index dfe242e7..9dd00120 100644
--- a/components/model-config-dialog.tsx
+++ b/components/model-config-dialog.tsx
@@ -41,13 +41,6 @@ import {
     CommandItem,
     CommandList,
 } from "@/components/ui/command"
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogHeader,
-    DialogTitle,
-} from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import {
@@ -80,7 +73,6 @@ import { cn } from "@/lib/utils"
 
 interface ModelConfigDialogProps {
     open: boolean
-    onOpenChange: (open: boolean) => void
     modelConfig: UseModelConfigReturn
 }
 
@@ -103,7 +95,7 @@ function ConfigSection({
             <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
                     <Icon className="h-4 w-4 text-muted-foreground" />
-                    <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                    <span className="text-xs font-medium text-muted-foreground">
                         {title}
                     </span>
                 </div>
@@ -123,9 +115,20 @@ function ConfigCard({ children }: { children: React.ReactNode }) {
     )
 }
 
+/** Providers as last saved (the model config is saved on every change) */
+function savedProviders(): ProviderConfig[] {
+    try {
+        const stored = localStorage.getItem(STORAGE_KEYS.modelConfigs)
+        return stored
+            ? (JSON.parse(stored) as { providers: ProviderConfig[] }).providers
+            : []
+    } catch {
+        return []
+    }
+}
+
 export function ModelConfigDialog({
     open,
-    onOpenChange,
     modelConfig,
 }: ModelConfigDialogProps) {
     const dict = useDictionary()
@@ -192,10 +195,22 @@ export function ModelConfigDialog({
     // Number of the latest Test click: only that test may reset the busy
     // state when its credentials changed meanwhile
     const validationRunRef = useRef(0)
+    // Set when this view goes away (settings closed or on another tab): its
+    // config no longer follows edits, the saved one does
+    const closedRef = useRef(false)
+    useEffect(() => {
+        closedRef.current = false
+        return () => {
+            closedRef.current = true
+        }
+    }, [])
     // A model list or test result belongs to the credentials it was asked
     // with; they can change meanwhile, here or in another tab
     const credentialsOf = (providerId: string) => {
-        const p = configRef.current.providers.find((x) => x.id === providerId)
+        const providers = closedRef.current
+            ? savedProviders()
+            : configRef.current.providers
+        const p = providers.find((x) => x.id === providerId)
         return JSON.stringify([
             p?.provider,
             p?.apiKey,
@@ -266,7 +281,9 @@ export function ModelConfigDialog({
                 const hints = dict.errors.llm as Record<string, string>
                 setFetchModelsError(
                     [hints[data.code], data.error].filter(Boolean).join(" ") ||
-                        `Request failed (${response.status})`,
+                        formatMessage(dict.modelConfig.requestFailed, {
+                            status: response.status,
+                        }),
                 )
             }
         } catch {
@@ -485,14 +502,17 @@ export function ModelConfigDialog({
                                       .filter(Boolean)
                                       .join(" ") ||
                                   (response.ok
-                                      ? "Validation failed"
-                                      : `Request failed (${response.status})`),
+                                      ? dict.modelConfig.validationError
+                                      : formatMessage(
+                                            dict.modelConfig.requestFailed,
+                                            { status: response.status },
+                                        )),
                               validationWarning: undefined,
                           }
                 } catch {
                     update = {
                         validated: false,
-                        validationError: "Network error",
+                        validationError: dict.errors.networkError,
                         validationWarning: undefined,
                     }
                 }
@@ -565,7 +585,11 @@ export function ModelConfigDialog({
             }, 1500)
         } else {
             setValidationStatus("error")
-            setValidationError(`${errorCount} model(s) failed validation`)
+            setValidationError(
+                formatMessage(dict.modelConfig.validationFailedCount, {
+                    count: errorCount,
+                }),
+            )
         }
     }, [
         selectedProvider,
@@ -682,27 +706,13 @@ export function ModelConfigDialog({
     }
 
     return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-4xl h-[80vh] max-h-[800px] overflow-hidden flex flex-col gap-0 p-0">
-                {/* Header */}
-                <DialogHeader className="px-6 pt-6 pb-4 shrink-0">
-                    <DialogTitle className="flex items-center gap-3">
-                        <div className="p-2 rounded-xl bg-surface-2">
-                            <Server className="h-5 w-5 text-primary" />
-                        </div>
-                        {dict.modelConfig?.title || "AI Model Configuration"}
-                    </DialogTitle>
-                    <DialogDescription className="mt-1">
-                        {dict.modelConfig?.description ||
-                            "Configure multiple AI providers and models for your workspace"}
-                    </DialogDescription>
-                </DialogHeader>
-
-                <div className="flex flex-1 min-h-0 overflow-hidden border-t border-border-subtle">
+        <>
+            <div className="flex min-h-0 flex-1 flex-col">
+                <div className="flex flex-1 min-h-0 overflow-hidden">
                     {/* Provider List (Left Sidebar) */}
                     <div className="w-60 shrink-0 flex flex-col bg-surface-1/50 border-r border-border-subtle">
                         <div className="px-4 py-3">
-                            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                            <span className="text-xs font-medium text-muted-foreground">
                                 {dict.modelConfig.providers}
                             </span>
                         </div>
@@ -1413,7 +1423,7 @@ export function ModelConfigDialog({
                                                                                 model.id,
                                                                             )
                                                                         }
-                                                                        aria-label={`Delete ${model.modelId}`}
+                                                                        aria-label={`${dict.common.delete} ${model.modelId}`}
                                                                     >
                                                                         <X className="h-4 w-4" />
                                                                     </Button>
@@ -1474,10 +1484,14 @@ export function ModelConfigDialog({
                                     <Server className="h-8 w-8 text-muted-foreground" />
                                 </div>
                                 <h3 className="font-semibold text-lg tracking-tight mb-1">
-                                    {dict.modelConfig.configureProviders}
+                                    {config.providers.length === 0
+                                        ? dict.modelConfig.noProvidersTitle
+                                        : dict.modelConfig.configureProviders}
                                 </h3>
                                 <p className="text-sm text-muted-foreground max-w-xs">
-                                    {dict.modelConfig.selectProviderHint}
+                                    {config.providers.length === 0
+                                        ? dict.modelConfig.noProvidersHint
+                                        : dict.modelConfig.selectProviderHint}
                                 </p>
                             </div>
                         )}
@@ -1508,7 +1522,7 @@ export function ModelConfigDialog({
                         </p>
                     </div>
                 </div>
-            </DialogContent>
+            </div>
 
             {/* Delete Confirmation Dialog */}
             <AlertDialog
@@ -1588,6 +1602,6 @@ export function ModelConfigDialog({
                     </AlertDialogFooter>
                 </AlertDialogContent>
             </AlertDialog>
-        </Dialog>
+        </>
     )
 }
diff --git a/components/model-selector.tsx b/components/model-selector.tsx
index 271e964c..d0629e07 100644
--- a/components/model-selector.tsx
+++ b/components/model-selector.tsx
@@ -26,6 +26,7 @@ import {
     ModelSelectorTrigger,
 } from "@/components/ai-elements/model-selector"
 import { ButtonWithTooltip } from "@/components/button-with-tooltip"
+import { ProviderLogo } from "@/components/provider-logo"
 import { useDictionary } from "@/hooks/use-dictionary"
 import {
     type FlattenedModel,
@@ -66,6 +67,26 @@ function groupModelsByProvider(
     return groups
 }
 
+/**
+ * The model id without the provider or region prefix that the logo already
+ * shows: "nvidia/nemotron-3-ultra" and "global.anthropic.claude-opus-5-5"
+ * become "nemotron-3-ultra" and "claude-opus-5-5". The full id is in the
+ * tooltip and the list.
+ */
+export function shortModelName(id: string): string {
+    const name = id.slice(id.lastIndexOf("/") + 1)
+    const short = name.replace(
+        /^(?:(?:global|us|eu|apac|jp|au|ca|us-gov)\.)?[a-z][a-z0-9-]*\.(?=[a-z])/i,
+        "",
+    )
+    // Ids like "deepseek.r1-v1:0" name the vendor only in the prefix: drop
+    // just the region
+    if (!short || /^[a-z]\d/i.test(short)) {
+        return name.replace(/^(?:global|us|eu|apac|jp|au|ca|us-gov)\./i, "")
+    }
+    return short
+}
+
 export function ModelSelector({
     models,
     selectedModelId,
@@ -158,7 +179,7 @@ export function ModelSelector({
     }, [])
 
     return (
-        <div ref={wrapperRef} className="min-w-0 max-w-48">
+        <div ref={wrapperRef} className="min-w-0 max-w-44">
             <ModelSelectorRoot open={open} onOpenChange={setOpen}>
                 <ModelSelectorTrigger asChild>
                     <ButtonWithTooltip
@@ -167,18 +188,26 @@ export function ModelSelector({
                         size="sm"
                         disabled={disabled}
                         className={cn(
-                            "h-8 min-w-0 max-w-full shrink overflow-hidden gap-1.5 px-2 transition-[padding,background-color] duration-150 ease-in-out hover:bg-accent",
+                            "h-8 min-w-0 max-w-full shrink overflow-hidden gap-1.5 px-2 font-normal text-muted-foreground transition-[padding,background-color] duration-150 ease-in-out hover:bg-accent hover:text-foreground",
                             !showLabel && "px-1.5 justify-center",
                         )}
                         // accessibility: expose label to screen readers
                         aria-label={tooltipContent}
+                        data-testid="model-selector"
                     >
-                        <Bot className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
+                        {selectedModel ? (
+                            <ProviderLogo
+                                provider={selectedModel.provider}
+                                className="size-3.5 flex-shrink-0 opacity-80"
+                            />
+                        ) : (
+                            <Bot className="h-4 w-4 flex-shrink-0" />
+                        )}
                         {/* show/hide visible label based on measured width */}
                         {showLabel ? (
                             <span className="min-w-0 truncate text-xs">
                                 {selectedModel
-                                    ? selectedModel.modelId
+                                    ? shortModelName(selectedModel.modelId)
                                     : dict.modelConfig.default}
                             </span>
                         ) : (
diff --git a/components/reset-warning-modal.tsx b/components/reset-warning-modal.tsx
deleted file mode 100644
index 84cef0e3..00000000
--- a/components/reset-warning-modal.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client"
-
-import { Button } from "@/components/ui/button"
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from "@/components/ui/dialog"
-import { useDictionary } from "@/hooks/use-dictionary"
-
-interface ResetWarningModalProps {
-    open: boolean
-    onOpenChange: (open: boolean) => void
-    onClear: () => void
-}
-
-export function ResetWarningModal({
-    open,
-    onOpenChange,
-    onClear,
-}: ResetWarningModalProps) {
-    const dict = useDictionary()
-
-    return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>{dict.dialogs.clearTitle}</DialogTitle>
-                    <DialogDescription>
-                        {dict.dialogs.clearDescription}
-                    </DialogDescription>
-                </DialogHeader>
-                <DialogFooter>
-                    <Button
-                        variant="outline"
-                        onClick={() => onOpenChange(false)}
-                    >
-                        {dict.common.cancel}
-                    </Button>
-                    <Button variant="destructive" onClick={onClear}>
-                        {dict.dialogs.clearEverything}
-                    </Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    )
-}
diff --git a/components/save-dialog.tsx b/components/save-dialog.tsx
index 0d2c13c4..8afbb430 100644
--- a/components/save-dialog.tsx
+++ b/components/save-dialog.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { Button } from "@/components/ui/button"
 import {
     Dialog,
@@ -10,15 +10,8 @@ import {
     DialogHeader,
     DialogTitle,
 } from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "@/components/ui/select"
 import { useDictionary } from "@/hooks/use-dictionary"
+import { cn } from "@/lib/utils"
 
 export type ExportFormat = "drawio" | "png" | "svg" | "xmlsvg"
 
@@ -39,10 +32,12 @@ export function SaveDialog({
     const [filename, setFilename] = useState(defaultFilename)
     const [format, setFormat] = useState<ExportFormat>("drawio")
 
+    // The default name each time the dialog opens; a chat title that comes
+    // while it is open (the chat is saved meanwhile) keeps what was typed
+    const wasOpenRef = useRef(false)
     useEffect(() => {
-        if (open) {
-            setFilename(defaultFilename)
-        }
+        if (open && !wasOpenRef.current) setFilename(defaultFilename)
+        wasOpenRef.current = open
     }, [open, defaultFilename])
 
     const handleSave = () => {
@@ -52,6 +47,8 @@ export function SaveDialog({
     }
 
     const handleKeyDown = (e: React.KeyboardEvent) => {
+        // Enter that picks an IME candidate (Safari: keyCode 229)
+        if (e.nativeEvent.isComposing || e.keyCode === 229) return
         if (e.key === "Enter") {
             e.preventDefault()
             handleSave()
@@ -62,21 +59,25 @@ export function SaveDialog({
         {
             value: "drawio" as const,
             label: dict.save.formats.drawio,
+            hint: dict.save.hints.drawio,
             extension: ".drawio",
         },
         {
             value: "png" as const,
             label: dict.save.formats.png,
+            hint: dict.save.hints.png,
             extension: ".png",
         },
         {
             value: "svg" as const,
             label: dict.save.formats.svg,
+            hint: dict.save.hints.svg,
             extension: ".svg",
         },
         {
             value: "xmlsvg" as const,
             label: dict.save.formats.xmlsvg,
+            hint: dict.save.hints.xmlsvg,
             extension: ".drawio.svg",
         },
     ]
@@ -85,7 +86,7 @@ export function SaveDialog({
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-md">
+            <DialogContent className="sm:max-w-lg">
                 <DialogHeader>
                     <DialogTitle>{dict.save.title}</DialogTitle>
                     <DialogDescription>
@@ -93,44 +94,54 @@ export function SaveDialog({
                     </DialogDescription>
                 </DialogHeader>
                 <div className="space-y-4">
-                    <div className="space-y-2">
-                        <label className="text-sm font-medium">
-                            {dict.save.format}
-                        </label>
-                        <Select
-                            value={format}
-                            onValueChange={(v) => setFormat(v as ExportFormat)}
-                        >
-                            <SelectTrigger>
-                                <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                                {FORMAT_OPTIONS.map((opt) => (
-                                    <SelectItem
-                                        key={opt.value}
-                                        value={opt.value}
-                                    >
-                                        {opt.label}
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </Select>
+                    <div
+                        role="radiogroup"
+                        aria-label={dict.save.format}
+                        className="grid grid-cols-2 gap-2"
+                    >
+                        {FORMAT_OPTIONS.map((opt) => (
+                            // biome-ignore lint/a11y/useSemanticElements: styled radio tile
+                            <button
+                                key={opt.value}
+                                type="button"
+                                role="radio"
+                                aria-checked={format === opt.value}
+                                onClick={() => setFormat(opt.value)}
+                                className={cn(
+                                    "rounded-lg border border-border p-3 text-left transition-colors hover:border-foreground/30",
+                                    format === opt.value &&
+                                        "border-foreground bg-accent",
+                                )}
+                            >
+                                <span className="block text-[13px] font-medium text-foreground">
+                                    {opt.label}
+                                </span>
+                                <span className="mt-0.5 block text-xs text-muted-foreground">
+                                    {opt.hint}
+                                </span>
+                            </button>
+                        ))}
                     </div>
                     <div className="space-y-2">
-                        <label className="text-sm font-medium">
+                        <label
+                            htmlFor="export-filename"
+                            className="text-sm font-medium"
+                        >
                             {dict.save.filename}
                         </label>
-                        <div className="flex items-stretch">
-                            <Input
+                        {/* One field: the name, then its extension */}
+                        <div className="flex h-9 items-center overflow-hidden rounded-md border border-input focus-within:ring-2 focus-within:ring-ring/40">
+                            <input
+                                id="export-filename"
                                 value={filename}
                                 onChange={(e) => setFilename(e.target.value)}
                                 onKeyDown={handleKeyDown}
                                 placeholder={dict.save.filenamePlaceholder}
                                 autoFocus
                                 onFocus={(e) => e.target.select()}
-                                className="rounded-r-none border-r-0 focus-visible:z-10"
+                                className="h-full min-w-0 flex-1 bg-transparent px-3 text-sm outline-none"
                             />
-                            <span className="inline-flex items-center px-3 rounded-r-md border border-l-0 border-input bg-muted text-sm text-muted-foreground font-mono">
+                            <span className="shrink-0 pr-3 text-sm text-muted-foreground">
                                 {currentFormat?.extension || ".drawio"}
                             </span>
                         </div>
@@ -143,7 +154,9 @@ export function SaveDialog({
                     >
                         {dict.common.cancel}
                     </Button>
-                    <Button onClick={handleSave}>{dict.common.save}</Button>
+                    <Button onClick={handleSave}>
+                        {dict.workspace.export}
+                    </Button>
                 </DialogFooter>
             </DialogContent>
         </Dialog>
diff --git a/components/settings-dialog.tsx b/components/settings-dialog.tsx
index 4d89e6de..df6fab2b 100644
--- a/components/settings-dialog.tsx
+++ b/components/settings-dialog.tsx
@@ -1,19 +1,27 @@
-"use client"
-
-import { ChevronRight, Github, Info, Moon, Sun, Tag } from "lucide-react"
+import {
+    Github,
+    Info,
+    KeyRound,
+    Monitor,
+    Moon,
+    Palette,
+    SlidersHorizontal,
+    Sun,
+    Terminal,
+} from "lucide-react"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import { Suspense, useCallback, useEffect, useState } from "react"
+import { useEffect, useState } from "react"
 import { toast } from "sonner"
+import { useChatEngine } from "@/components/chat/chat-engine"
+import { ModelConfigDialog } from "@/components/model-config-dialog"
 import { Button } from "@/components/ui/button"
 import {
     Dialog,
     DialogContent,
     DialogDescription,
-    DialogHeader,
     DialogTitle,
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
 import {
     Select,
     SelectContent,
@@ -23,36 +31,18 @@ import {
 } from "@/components/ui/select"
 import { Switch } from "@/components/ui/switch"
 import { Textarea } from "@/components/ui/textarea"
+import { BrandMark } from "@/components/workspace/brand-mark"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { getApiEndpoint } from "@/lib/base-path"
-import type { DrawioTheme } from "@/lib/drawio-themes"
 import { i18n, type Locale } from "@/lib/i18n/config"
 import { STORAGE_KEYS } from "@/lib/storage"
-
-// Reusable setting item component for consistent layout
-function SettingItem({
-    label,
-    description,
-    children,
-}: {
-    label: string
-    description?: string
-    children: React.ReactNode
-}) {
-    return (
-        <div className="flex items-center justify-between py-4 first:pt-0 last:pb-0">
-            <div className="space-y-0.5 pr-4">
-                <Label className="text-sm font-medium">{label}</Label>
-                {description && (
-                    <p className="text-xs text-muted-foreground max-w-[260px]">
-                        {description}
-                    </p>
-                )}
-            </div>
-            <div className="shrink-0">{children}</div>
-        </div>
-    )
-}
+import { cn } from "@/lib/utils"
+import {
+    type SendShortcut,
+    type ThemePreference,
+    useSettingsStore,
+} from "@/stores/settings-store"
+import { type SettingsTab, useUiStore } from "@/stores/ui-store"
 
 const LANGUAGE_LABELS: Record<Locale, string> = {
     en: "English",
@@ -61,90 +51,204 @@ const LANGUAGE_LABELS: Record<Locale, string> = {
     "zh-Hant": "繁體中文",
 }
 
-interface SettingsDialogProps {
-    open: boolean
-    onOpenChange: (open: boolean) => void
-    drawioUi: DrawioTheme
-    onDrawioUiChange: (theme: DrawioTheme) => void
-    darkMode: boolean
-    onToggleDarkMode: () => void
-    minimalStyle?: boolean
-    onMinimalStyleChange?: (value: boolean) => void
-    vlmValidationEnabled?: boolean
-    onVlmValidationChange?: (value: boolean) => void
-    onOpenModelConfig?: () => void
-    customSystemMessage?: string
-    onCustomSystemMessageChange?: (value: string) => void
-    maxOutputTokens?: string
-    onMaxOutputTokensChange?: (value: string) => void
+function Row({
+    label,
+    description,
+    htmlFor,
+    children,
+    stacked = false,
+}: {
+    label: string
+    description?: string
+    htmlFor?: string
+    children: React.ReactNode
+    stacked?: boolean
+}) {
+    return (
+        <div
+            className={cn(
+                "py-4 first:pt-1",
+                stacked
+                    ? "space-y-3"
+                    : "flex items-center justify-between gap-6",
+            )}
+        >
+            <div className="min-w-0 space-y-0.5">
+                <label
+                    htmlFor={htmlFor}
+                    className="block text-[13px] font-medium text-foreground"
+                >
+                    {label}
+                </label>
+                {description && (
+                    <p className="max-w-[34em] text-xs text-muted-foreground">
+                        {description}
+                    </p>
+                )}
+            </div>
+            <div className={cn(!stacked && "shrink-0")}>{children}</div>
+        </div>
+    )
 }
 
-export const STORAGE_ACCESS_CODE_KEY = "next-ai-draw-io-access-code"
-const STORAGE_ACCESS_CODE_REQUIRED_KEY = "next-ai-draw-io-access-code-required"
-
-function getStoredAccessCodeRequired(): boolean | null {
-    if (typeof window === "undefined") return null
-    const stored = localStorage.getItem(STORAGE_ACCESS_CODE_REQUIRED_KEY)
-    if (stored === null) return null
-    return stored === "true"
+function Segmented<T extends string>({
+    value,
+    options,
+    onChange,
+    label,
+}: {
+    value: T
+    options: { value: T; label: string; icon?: React.ReactNode }[]
+    onChange: (value: T) => void
+    label: string
+}) {
+    return (
+        <div
+            role="radiogroup"
+            aria-label={label}
+            className="inline-flex rounded-lg bg-muted p-0.5"
+        >
+            {options.map((option) => (
+                // biome-ignore lint/a11y/useSemanticElements: styled segmented control
+                <button
+                    key={option.value}
+                    type="button"
+                    role="radio"
+                    aria-checked={value === option.value}
+                    onClick={() => onChange(option.value)}
+                    className={cn(
+                        "inline-flex h-7 items-center gap-1.5 rounded-md px-2.5 text-xs text-muted-foreground transition-colors [&_svg]:size-3.5",
+                        value === option.value &&
+                            "bg-card font-medium text-foreground shadow-float",
+                    )}
+                >
+                    {option.icon}
+                    {option.label}
+                </button>
+            ))}
+        </div>
+    )
 }
 
-function SettingsContent({
-    open,
-    onOpenChange,
-    drawioUi,
-    onDrawioUiChange,
-    darkMode,
-    onToggleDarkMode,
-    minimalStyle = false,
-    onMinimalStyleChange = () => {},
-    vlmValidationEnabled = false,
-    onVlmValidationChange = () => {},
-    onOpenModelConfig,
-    customSystemMessage = "",
-    onCustomSystemMessageChange = () => {},
-    maxOutputTokens = "",
-    onMaxOutputTokensChange = () => {},
-}: SettingsDialogProps) {
+function AppearanceTab() {
     const dict = useDictionary()
+    const t = dict.settings
+    const engine = useChatEngine()
     const router = useRouter()
     const pathname = usePathname() || "/"
     const search = useSearchParams()
+    const theme = useSettingsStore((s) => s.theme)
+    const setTheme = useSettingsStore((s) => s.setTheme)
+    const minimalStyle = useSettingsStore((s) => s.minimalStyle)
+    const setMinimalStyle = useSettingsStore((s) => s.setMinimalStyle)
+    const currentLang =
+        (pathname.split("/").filter(Boolean)[0] as Locale) || i18n.defaultLocale
+
+    // The page mounts anew in the other language: the chat is saved first
+    // (it may not be yet), and its session goes into the new URL
+    const changeLanguage = (lang: string) =>
+        engine.leavePage((sessionId) => {
+            localStorage.setItem(STORAGE_KEYS.locale, lang)
+            // The page reloads in the new language; close settings as before
+            useUiStore.getState().setSettingsOpen(false)
+            // Keep the desktop app's menu language in sync
+            window.electronAPI
+                ?.setUserLocale?.(lang)
+                .catch((error: unknown) => {
+                    console.error("Failed to sync locale with Electron:", error)
+                })
+            const parts = pathname.split("/")
+            if (parts.length > 1 && i18n.locales.includes(parts[1] as Locale)) {
+                parts[1] = lang
+            } else {
+                parts.splice(1, 0, lang)
+            }
+            const params = new URLSearchParams(search?.toString())
+            if (sessionId) params.set("session", sessionId)
+            const query = params.toString() ? `?${params.toString()}` : ""
+            router.push((parts.join("/") || "/") + query)
+        })
+
+    return (
+        <div className="divide-y divide-border">
+            <Row label={t.theme} description={t.themeDescription}>
+                <Segmented<ThemePreference>
+                    label={t.theme}
+                    value={theme}
+                    onChange={setTheme}
+                    options={[
+                        { value: "light", label: t.themeLight, icon: <Sun /> },
+                        {
+                            value: "dark",
+                            label: t.themeDarkMode,
+                            icon: <Moon />,
+                        },
+                        {
+                            value: "system",
+                            label: t.themeSystem,
+                            icon: <Monitor />,
+                        },
+                    ]}
+                />
+            </Row>
+            <Row label={t.language} description={t.languageDescription}>
+                <Select
+                    value={currentLang}
+                    onValueChange={changeLanguage}
+                    // Not while an answer runs: the page mounts anew
+                    disabled={engine.isBusy}
+                >
+                    <SelectTrigger
+                        id="language-select"
+                        className="h-8 w-[132px] rounded-lg"
+                    >
+                        <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {i18n.locales.map((locale) => (
+                            <SelectItem key={locale} value={locale}>
+                                {LANGUAGE_LABELS[locale]}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </Row>
+            <Row label={t.diagramStyle} description={t.diagramStyleDescription}>
+                <Segmented<"styled" | "minimal">
+                    label={t.diagramStyle}
+                    value={minimalStyle ? "minimal" : "styled"}
+                    onChange={(value) => setMinimalStyle(value === "minimal")}
+                    options={[
+                        { value: "styled", label: dict.chat.styledMode },
+                        { value: "minimal", label: dict.chat.minimalStyle },
+                    ]}
+                />
+            </Row>
+        </div>
+    )
+}
+
+function AdvancedTab({ open }: { open: boolean }) {
+    const dict = useDictionary()
+    const t = dict.settings
+    const settings = useSettingsStore()
     const [accessCode, setAccessCode] = useState("")
-    const [isVerifying, setIsVerifying] = useState(false)
-    const [error, setError] = useState("")
     const [accessCodeRequired, setAccessCodeRequired] = useState(
-        () => getStoredAccessCodeRequired() ?? false,
+        () => localStorage.getItem(STORAGE_KEYS.accessCodeRequired) === "true",
     )
-    const [currentLang, setCurrentLang] = useState("en")
-    const [sendShortcut, setSendShortcut] = useState("ctrl-enter")
-
-    // Panel visibility state
-    const [showRecentChats, setShowRecentChats] = useState(true)
-    const [showMyTemplates, setShowMyTemplates] = useState(true)
-    const [showQuickExamples, setShowQuickExamples] = useState(true)
-
-    const handlePanelToggle = useCallback(
-        (key: string, value: boolean, setter: (v: boolean) => void) => {
-            setter(value)
-            localStorage.setItem(key, String(value))
-            window.dispatchEvent(new CustomEvent("panelVisibilityChange"))
-        },
-        [],
-    )
-
-    // Proxy settings state (Electron only)
+    const [isVerifying, setIsVerifying] = useState(false)
+    const [accessError, setAccessError] = useState("")
     const [httpProxy, setHttpProxy] = useState("")
     const [httpsProxy, setHttpsProxy] = useState("")
     const [isApplyingProxy, setIsApplyingProxy] = useState(false)
+    const isElectron =
+        typeof window !== "undefined" && !!window.electronAPI?.isElectron
 
     useEffect(() => {
-        // Re-fetch config whenever the dialog opens to ensure we always show
-        // the access code input if the server requires it. This fixes the case
-        // where a stale localStorage cache (from before ACCESS_CODE_LIST was
-        // configured) would hide the access code input.
         if (!open) return
-
+        setAccessCode(localStorage.getItem(STORAGE_KEYS.accessCode) || "")
+        setAccessError("")
+        // Re-check on every open: a stale cached value would hide the field
         fetch(getApiEndpoint("/api/config"))
             .then((res) => {
                 if (!res.ok) throw new Error(`HTTP ${res.status}`)
@@ -153,605 +257,337 @@ function SettingsContent({
             .then((data) => {
                 const required = data?.accessCodeRequired === true
                 localStorage.setItem(
-                    STORAGE_ACCESS_CODE_REQUIRED_KEY,
+                    STORAGE_KEYS.accessCodeRequired,
                     String(required),
                 )
                 setAccessCodeRequired(required)
             })
-            .catch(() => {
-                // Keep existing cached value on error
-            })
+            .catch(() => {})
+        window.electronAPI?.getProxy?.().then((config: any) => {
+            setHttpProxy(config.httpProxy || "")
+            setHttpsProxy(config.httpsProxy || "")
+        })
     }, [open])
 
-    // Detect current language from pathname
-    useEffect(() => {
-        const seg = pathname.split("/").filter(Boolean)
-        const first = seg[0]
-        if (first && i18n.locales.includes(first as Locale)) {
-            setCurrentLang(first)
-        } else {
-            setCurrentLang(i18n.defaultLocale)
-        }
-    }, [pathname])
-
-    useEffect(() => {
-        if (open) {
-            const storedCode =
-                localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || ""
-            setAccessCode(storedCode)
-
-            const storedSendShortcut = localStorage.getItem(
-                STORAGE_KEYS.sendShortcut,
-            )
-            setSendShortcut(storedSendShortcut || "ctrl-enter")
-
-            setShowRecentChats(
-                localStorage.getItem(STORAGE_KEYS.showRecentChats) !== "false",
-            )
-            setShowMyTemplates(
-                localStorage.getItem(STORAGE_KEYS.showMyTemplates) !== "false",
-            )
-            setShowQuickExamples(
-                localStorage.getItem(STORAGE_KEYS.showQuickExamples) !==
-                    "false",
-            )
-
-            setError("")
-
-            // Load proxy settings (Electron only)
-            if (window.electronAPI?.getProxy) {
-                window.electronAPI.getProxy().then((config) => {
-                    setHttpProxy(config.httpProxy || "")
-                    setHttpsProxy(config.httpsProxy || "")
-                })
-            }
-        }
-    }, [open])
-
-    const changeLanguage = (lang: string) => {
-        // Save locale to localStorage for persistence across restarts
-        localStorage.setItem("next-ai-draw-io-locale", lang)
-
-        // Notify Electron main process to update its menu language
-        if (window.electronAPI?.setUserLocale) {
-            window.electronAPI.setUserLocale(lang).catch((error) => {
-                console.error("Failed to sync locale with Electron:", error)
-            })
-        }
-
-        const parts = pathname.split("/")
-        if (parts.length > 1 && i18n.locales.includes(parts[1] as Locale)) {
-            parts[1] = lang
-        } else {
-            parts.splice(1, 0, lang)
-        }
-        const newPath = parts.join("/") || "/"
-        const searchStr = search?.toString() ? `?${search.toString()}` : ""
-        router.push(newPath + searchStr)
-    }
-
-    const handleSave = async () => {
-        if (!accessCodeRequired) return
-
-        setError("")
+    const saveAccessCode = async () => {
+        setAccessError("")
         setIsVerifying(true)
-
         try {
             const response = await fetch(
                 getApiEndpoint("/api/verify-access-code"),
                 {
                     method: "POST",
-                    headers: {
-                        "x-access-code": accessCode.trim(),
-                    },
+                    headers: { "x-access-code": accessCode.trim() },
                 },
             )
-
             const data = await response.json()
-
             if (!data.valid) {
-                setError(data.message || dict.errors.invalidAccessCode)
+                setAccessError(data.message || dict.errors.invalidAccessCode)
                 return
             }
-
-            localStorage.setItem(STORAGE_ACCESS_CODE_KEY, accessCode.trim())
-            onOpenChange(false)
+            localStorage.setItem(STORAGE_KEYS.accessCode, accessCode.trim())
+            toast.success(t.accessCodeSaved)
         } catch {
-            setError(dict.errors.networkError)
+            setAccessError(dict.errors.networkError)
         } finally {
             setIsVerifying(false)
         }
     }
 
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter") {
-            e.preventDefault()
-            handleSave()
-        }
-    }
-
-    const handleApplyProxy = async () => {
+    const applyProxy = async () => {
         if (!window.electronAPI?.setProxy) return
-
-        // Validate proxy URLs (must start with http:// or https://)
-        const validateProxyUrl = (url: string): boolean => {
-            if (!url) return true // Empty is OK
-            return url.startsWith("http://") || url.startsWith("https://")
-        }
-
-        const trimmedHttp = httpProxy.trim()
-        const trimmedHttps = httpsProxy.trim()
-
-        if (trimmedHttp && !validateProxyUrl(trimmedHttp)) {
-            toast.error("HTTP Proxy must start with http:// or https://")
+        const isValid = (url: string) =>
+            !url || url.startsWith("http://") || url.startsWith("https://")
+        const http = httpProxy.trim()
+        const https = httpsProxy.trim()
+        if (!isValid(http) || !isValid(https)) {
+            toast.error(t.proxyInvalid)
             return
         }
-        if (trimmedHttps && !validateProxyUrl(trimmedHttps)) {
-            toast.error("HTTPS Proxy must start with http:// or https://")
-            return
-        }
-
         setIsApplyingProxy(true)
         try {
             const result = await window.electronAPI.setProxy({
-                httpProxy: trimmedHttp || undefined,
-                httpsProxy: trimmedHttps || undefined,
+                httpProxy: http || undefined,
+                httpsProxy: https || undefined,
             })
-
-            if (result.success) {
-                toast.success(dict.settings.proxyApplied)
-            } else {
-                toast.error(result.error || "Failed to apply proxy settings")
-            }
+            if (result.success) toast.success(t.proxyApplied)
+            else toast.error(result.error || t.proxyFailed)
         } catch {
-            toast.error("Failed to apply proxy settings")
+            toast.error(t.proxyFailed)
         } finally {
             setIsApplyingProxy(false)
         }
     }
 
     return (
-        <DialogContent className="sm:max-w-lg p-0 gap-0 max-h-[90vh] flex flex-col overflow-hidden">
-            {/* Header */}
-            <DialogHeader className="px-6 pt-6 pb-4">
-                <DialogTitle>{dict.settings.title}</DialogTitle>
-                <DialogDescription className="mt-1">
-                    {dict.settings.description}
-                </DialogDescription>
-            </DialogHeader>
-
-            {/* Content */}
-            <div className="px-6 pb-6 overflow-y-auto flex-1 scrollbar-thin">
-                <div className="divide-y divide-border-subtle">
-                    {/* API Keys & Models */}
-                    {onOpenModelConfig && (
-                        <SettingItem
-                            label={dict.settings.apiKeysModels}
-                            description={dict.settings.apiKeysModelsDescription}
-                        >
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                className="h-9 w-9 p-0"
-                                onClick={() => {
-                                    onOpenChange(false)
-                                    onOpenModelConfig()
-                                }}
-                                aria-label={dict.settings.apiKeysModels}
-                            >
-                                <ChevronRight className="h-4 w-4" />
-                            </Button>
-                        </SettingItem>
-                    )}
-
-                    {/* Access Code (conditional) */}
-                    {accessCodeRequired && (
-                        <div className="py-4 first:pt-0 space-y-3">
-                            <div className="space-y-0.5">
-                                <Label
-                                    htmlFor="access-code"
-                                    className="text-sm font-medium"
-                                >
-                                    {dict.settings.accessCode}
-                                </Label>
-                                <p className="text-xs text-muted-foreground">
-                                    {dict.settings.accessCodeDescription}
-                                </p>
-                            </div>
-                            <div className="flex gap-2">
-                                <Input
-                                    id="access-code"
-                                    type="password"
-                                    value={accessCode}
-                                    onChange={(e) =>
-                                        setAccessCode(e.target.value)
-                                    }
-                                    onKeyDown={handleKeyDown}
-                                    placeholder={
-                                        dict.settings.accessCodePlaceholder
-                                    }
-                                    autoComplete="off"
-                                    className="h-9"
-                                />
-                                <Button
-                                    onClick={handleSave}
-                                    disabled={isVerifying || !accessCode.trim()}
-                                    className="h-9 px-4 rounded-xl"
-                                >
-                                    {isVerifying ? "..." : dict.common.save}
-                                </Button>
-                            </div>
-                            {error && (
-                                <p className="text-xs text-destructive">
-                                    {error}
-                                </p>
-                            )}
-                        </div>
-                    )}
-
-                    {/* Language */}
-                    <SettingItem
-                        label={dict.settings.language}
-                        description={dict.settings.languageDescription}
-                    >
-                        <Select
-                            value={currentLang}
-                            onValueChange={changeLanguage}
-                        >
-                            <SelectTrigger
-                                id="language-select"
-                                className="w-[120px] h-9 rounded-xl"
-                            >
-                                <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                                {i18n.locales.map((locale) => (
-                                    <SelectItem key={locale} value={locale}>
-                                        {LANGUAGE_LABELS[locale]}
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </Select>
-                    </SettingItem>
-
-                    {/* Theme */}
-                    <SettingItem
-                        label={dict.settings.theme}
-                        description={dict.settings.themeDescription}
-                    >
-                        <Button
-                            id="theme-toggle"
-                            variant="outline"
-                            size="icon"
-                            onClick={onToggleDarkMode}
-                            className="h-9 w-9 rounded-xl border-border-subtle hover:bg-interactive-hover"
-                        >
-                            {darkMode ? (
-                                <Sun className="h-4 w-4" />
-                            ) : (
-                                <Moon className="h-4 w-4" />
-                            )}
-                        </Button>
-                    </SettingItem>
-
-                    {/* Draw.io Style */}
-                    <SettingItem
-                        label={dict.settings.drawioStyle}
-                        description={dict.settings.drawioStyleDescription}
-                    >
-                        <Select
-                            value={drawioUi}
-                            onValueChange={(v) =>
-                                onDrawioUiChange(v as DrawioTheme)
-                            }
-                        >
-                            <SelectTrigger
-                                id="drawio-ui-select"
-                                aria-label={dict.settings.drawioStyle}
-                                className="w-[120px] h-9 rounded-xl"
-                            >
-                                <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="kennedy">
-                                    {dict.settings.themeDefault}
-                                </SelectItem>
-                                <SelectItem value="atlas">Atlas</SelectItem>
-                                <SelectItem value="dark">
-                                    {dict.settings.themeDark}
-                                </SelectItem>
-                                <SelectItem value="min">
-                                    {dict.settings.themeMinimal}
-                                </SelectItem>
-                                <SelectItem value="sketch">
-                                    {dict.settings.themeSketch}
-                                </SelectItem>
-                                <SelectItem value="simple">
-                                    {dict.settings.themeSimple}
-                                </SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </SettingItem>
-
-                    {/* Diagram Style */}
-                    <SettingItem
-                        label={dict.settings.diagramStyle}
-                        description={dict.settings.diagramStyleDescription}
-                    >
-                        <div className="flex items-center gap-2">
-                            <Switch
-                                id="minimal-style"
-                                checked={minimalStyle}
-                                onCheckedChange={onMinimalStyleChange}
-                            />
-                            <span className="text-sm text-muted-foreground">
-                                {minimalStyle
-                                    ? dict.chat.minimalStyle
-                                    : dict.chat.styledMode}
-                            </span>
-                        </div>
-                    </SettingItem>
-
-                    {/* Panel Visibility */}
-                    <SettingItem
-                        label={dict.settings.panelVisibility}
-                        description={dict.settings.panelVisibilityDescription}
-                    >
-                        <div className="flex flex-col gap-2">
-                            <label className="flex items-center gap-2 cursor-pointer">
-                                <Switch
-                                    id="show-recent-chats"
-                                    checked={showRecentChats}
-                                    onCheckedChange={(v) =>
-                                        handlePanelToggle(
-                                            STORAGE_KEYS.showRecentChats,
-                                            v,
-                                            setShowRecentChats,
-                                        )
-                                    }
-                                />
-                                <span className="text-xs text-muted-foreground">
-                                    {dict.settings.showRecentChats}
-                                </span>
-                            </label>
-                            <label className="flex items-center gap-2 cursor-pointer">
-                                <Switch
-                                    id="show-my-templates"
-                                    checked={showMyTemplates}
-                                    onCheckedChange={(v) =>
-                                        handlePanelToggle(
-                                            STORAGE_KEYS.showMyTemplates,
-                                            v,
-                                            setShowMyTemplates,
-                                        )
-                                    }
-                                />
-                                <span className="text-xs text-muted-foreground">
-                                    {dict.settings.showMyTemplates}
-                                </span>
-                            </label>
-                            <label className="flex items-center gap-2 cursor-pointer">
-                                <Switch
-                                    id="show-quick-examples"
-                                    checked={showQuickExamples}
-                                    onCheckedChange={(v) =>
-                                        handlePanelToggle(
-                                            STORAGE_KEYS.showQuickExamples,
-                                            v,
-                                            setShowQuickExamples,
-                                        )
-                                    }
-                                />
-                                <span className="text-xs text-muted-foreground">
-                                    {dict.settings.showQuickExamples}
-                                </span>
-                            </label>
-                        </div>
-                    </SettingItem>
-
-                    {/* VLM Diagram Validation */}
-                    <SettingItem
-                        label={dict.settings.diagramValidation}
-                        description={dict.settings.diagramValidationDescription}
-                    >
-                        <div className="flex items-center gap-2">
-                            <Switch
-                                id="vlm-validation"
-                                checked={vlmValidationEnabled}
-                                onCheckedChange={onVlmValidationChange}
-                            />
-                            <span className="text-sm text-muted-foreground">
-                                {vlmValidationEnabled
-                                    ? dict.settings.enabled
-                                    : dict.settings.disabled}
-                            </span>
-                        </div>
-                    </SettingItem>
-
-                    {/* Custom System Message */}
-                    <div className="py-4 space-y-3">
-                        <div className="space-y-0.5">
-                            <Label
-                                htmlFor="custom-system-message"
-                                className="text-sm font-medium"
-                            >
-                                {dict.settings.customSystemMessage}
-                            </Label>
-                            <p className="text-xs text-muted-foreground">
-                                {dict.settings.customSystemMessageDescription}
-                            </p>
-                        </div>
-                        <Textarea
-                            id="custom-system-message"
-                            value={customSystemMessage}
-                            onChange={(e) =>
-                                onCustomSystemMessageChange(e.target.value)
-                            }
-                            placeholder={
-                                dict.settings.customSystemMessagePlaceholder
-                            }
-                            className="min-h-[80px] max-h-[160px] text-sm"
-                            maxLength={5000}
-                        />
-                    </div>
-
-                    {/* Max Output Tokens */}
-                    <SettingItem
-                        label={dict.settings.maxOutputTokens}
-                        description={dict.settings.maxOutputTokensDescription}
-                    >
+        <div className="divide-y divide-border">
+            {accessCodeRequired && (
+                <Row
+                    label={t.accessCode}
+                    description={t.accessCodeDescription}
+                    htmlFor="access-code"
+                    stacked
+                >
+                    <div className="flex gap-2">
                         <Input
-                            id="max-output-tokens"
-                            type="text"
-                            inputMode="numeric"
-                            value={maxOutputTokens}
-                            onChange={(e) =>
-                                onMaxOutputTokensChange(e.target.value)
-                            }
-                            placeholder="64000"
-                            className="h-9 w-28 text-sm"
-                        />
-                    </SettingItem>
-
-                    {/* Send Shortcut */}
-                    <SettingItem
-                        label={dict.settings.sendShortcut}
-                        description={dict.settings.sendShortcutDescription}
-                    >
-                        <Select
-                            value={sendShortcut}
-                            onValueChange={(value) => {
-                                setSendShortcut(value)
-                                localStorage.setItem(
-                                    STORAGE_KEYS.sendShortcut,
-                                    value,
-                                )
-                                window.dispatchEvent(
-                                    new CustomEvent("sendShortcutChange", {
-                                        detail: value,
-                                    }),
-                                )
+                            id="access-code"
+                            type="password"
+                            value={accessCode}
+                            onChange={(e) => setAccessCode(e.target.value)}
+                            onKeyDown={(e) => {
+                                if (e.key === "Enter") {
+                                    e.preventDefault()
+                                    saveAccessCode()
+                                }
                             }}
+                            placeholder={t.accessCodePlaceholder}
+                            autoComplete="off"
+                            className="h-9"
+                        />
+                        <Button
+                            onClick={saveAccessCode}
+                            disabled={isVerifying || !accessCode.trim()}
+                            className="h-9 rounded-lg px-4"
                         >
-                            <SelectTrigger
-                                id="send-shortcut-select"
-                                className="w-auto h-9 rounded-xl"
-                            >
-                                <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="enter">
-                                    {dict.settings.enterToSend}
-                                </SelectItem>
-                                <SelectItem value="ctrl-enter">
-                                    {dict.settings.ctrlEnterToSend}
-                                </SelectItem>
-                            </SelectContent>
-                        </Select>
-                    </SettingItem>
-
-                    {/* Proxy Settings - Electron only */}
-                    {typeof window !== "undefined" &&
-                        window.electronAPI?.isElectron && (
-                            <div className="py-4 space-y-3">
-                                <div className="space-y-0.5">
-                                    <Label className="text-sm font-medium">
-                                        {dict.settings.proxy}
-                                    </Label>
-                                    <p className="text-xs text-muted-foreground">
-                                        {dict.settings.proxyDescription}
-                                    </p>
-                                </div>
-
-                                <div className="space-y-2">
-                                    <Input
-                                        id="http-proxy"
-                                        type="text"
-                                        value={httpProxy}
-                                        onChange={(e) =>
-                                            setHttpProxy(e.target.value)
-                                        }
-                                        placeholder={`${dict.settings.httpProxy}: http://proxy:8080`}
-                                        className="h-9"
-                                    />
-                                    <Input
-                                        id="https-proxy"
-                                        type="text"
-                                        value={httpsProxy}
-                                        onChange={(e) =>
-                                            setHttpsProxy(e.target.value)
-                                        }
-                                        placeholder={`${dict.settings.httpsProxy}: http://proxy:8080`}
-                                        className="h-9"
-                                    />
-                                </div>
-
-                                <Button
-                                    onClick={handleApplyProxy}
-                                    disabled={isApplyingProxy}
-                                    className="h-9 px-4 rounded-xl w-full"
-                                >
-                                    {isApplyingProxy
-                                        ? "..."
-                                        : dict.settings.applyProxy}
-                                </Button>
-                            </div>
-                        )}
-                </div>
-            </div>
-
-            {/* Footer */}
-            <div className="px-6 py-4 border-t border-border-subtle bg-surface-1/50 rounded-b-2xl">
-                <div className="flex items-center justify-center gap-3">
-                    <span className="text-xs text-muted-foreground flex items-center gap-1">
-                        <Tag className="h-3 w-3" />
-                        {process.env.APP_VERSION}
-                    </span>
-                    <span className="text-muted-foreground">·</span>
-                    <a
-                        href="https://github.com/DayuanJiang/next-ai-draw-io"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
-                    >
-                        <Github className="h-3 w-3" />
-                        GitHub
-                    </a>
-                    {process.env.NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE ===
-                        "true" && (
-                        <>
-                            <span className="text-muted-foreground">·</span>
-                            <a
-                                href={`/${currentLang}/about${currentLang === "zh" ? "/cn" : currentLang === "ja" ? "/ja" : ""}`}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
-                            >
-                                <Info className="h-3 w-3" />
-                                {dict.nav.about}
-                            </a>
-                        </>
+                            {isVerifying ? "…" : dict.common.save}
+                        </Button>
+                    </div>
+                    {accessError && (
+                        <p className="text-xs text-destructive">
+                            {accessError}
+                        </p>
                     )}
-                </div>
-            </div>
-        </DialogContent>
+                </Row>
+            )}
+            <Row label={t.sendShortcut} description={t.sendShortcutDescription}>
+                <Select
+                    value={settings.sendShortcut}
+                    onValueChange={(value) =>
+                        settings.setSendShortcut(value as SendShortcut)
+                    }
+                >
+                    <SelectTrigger
+                        id="send-shortcut-select"
+                        className="h-8 w-auto rounded-lg"
+                    >
+                        <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="enter">{t.enterToSend}</SelectItem>
+                        <SelectItem value="ctrl-enter">
+                            {t.ctrlEnterToSend}
+                        </SelectItem>
+                    </SelectContent>
+                </Select>
+            </Row>
+            <Row
+                label={t.diagramValidation}
+                description={t.diagramValidationDescription}
+                htmlFor="vlm-validation"
+            >
+                <Switch
+                    id="vlm-validation"
+                    checked={settings.vlmValidationEnabled}
+                    onCheckedChange={settings.setVlmValidationEnabled}
+                />
+            </Row>
+            <Row
+                label={t.maxOutputTokens}
+                description={t.maxOutputTokensDescription}
+                htmlFor="max-output-tokens"
+            >
+                <Input
+                    id="max-output-tokens"
+                    type="text"
+                    inputMode="numeric"
+                    value={settings.maxOutputTokens}
+                    onChange={(e) =>
+                        settings.setMaxOutputTokens(e.target.value)
+                    }
+                    placeholder="64000"
+                    className="h-8 w-28 text-sm"
+                />
+            </Row>
+            <Row
+                label={t.customSystemMessage}
+                description={t.customSystemMessageDescription}
+                htmlFor="custom-system-message"
+                stacked
+            >
+                <Textarea
+                    id="custom-system-message"
+                    value={settings.customSystemMessage}
+                    onChange={(e) =>
+                        settings.setCustomSystemMessage(e.target.value)
+                    }
+                    placeholder={t.customSystemMessagePlaceholder}
+                    className="max-h-[180px] min-h-[96px] text-sm"
+                    maxLength={5000}
+                />
+            </Row>
+            {isElectron && (
+                <Row label={t.proxy} description={t.proxyDescription} stacked>
+                    <div className="space-y-2">
+                        <Input
+                            id="http-proxy"
+                            value={httpProxy}
+                            onChange={(e) => setHttpProxy(e.target.value)}
+                            placeholder={`${t.httpProxy}: http://proxy:8080`}
+                            className="h-9"
+                        />
+                        <Input
+                            id="https-proxy"
+                            value={httpsProxy}
+                            onChange={(e) => setHttpsProxy(e.target.value)}
+                            placeholder={`${t.httpsProxy}: http://proxy:8080`}
+                            className="h-9"
+                        />
+                        <Button
+                            onClick={applyProxy}
+                            disabled={isApplyingProxy}
+                            className="h-9 w-full rounded-lg"
+                        >
+                            {isApplyingProxy ? "…" : t.applyProxy}
+                        </Button>
+                    </div>
+                </Row>
+            )}
+        </div>
     )
 }
 
-export function SettingsDialog(props: SettingsDialogProps) {
+function AboutTab() {
+    const dict = useDictionary()
+    const pathname = usePathname() || "/"
+    const lang = pathname.split("/").filter(Boolean)[0] || i18n.defaultLocale
+    const showAbout = process.env.NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE === "true"
+    const isSelfHosted = process.env.NEXT_PUBLIC_SELFHOSTED === "true"
+    const aboutPath = `/${lang}/about${lang === "zh" ? "/cn" : lang === "ja" ? "/ja" : ""}`
+
     return (
-        <Dialog open={props.open} onOpenChange={props.onOpenChange}>
-            <Suspense
-                fallback={
-                    <DialogContent className="sm:max-w-lg p-0">
-                        <div className="h-80 flex items-center justify-center">
-                            <div className="animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full" />
+        <div className="space-y-5 pt-1">
+            <div className="flex items-center gap-3">
+                <BrandMark className="size-10 rounded-xl" />
+                <div>
+                    <div className="text-[15px] font-semibold">
+                        Next AI Draw.io
+                    </div>
+                    <div className="text-xs text-muted-foreground">
+                        {dict.settings.appVersion} {process.env.APP_VERSION}
+                    </div>
+                </div>
+            </div>
+            {/* MCP server card, hidden on self-hosted deployments */}
+            {!isSelfHosted && (
+                <a
+                    href="https://github.com/DayuanJiang/next-ai-draw-io/tree/main/packages/mcp-server"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-3 rounded-xl border border-border p-3.5 transition-colors hover:border-foreground/25"
+                >
+                    <span className="inline-flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted">
+                        <Terminal className="size-4 text-muted-foreground" />
+                    </span>
+                    <span className="min-w-0">
+                        <span className="block text-[13px] font-medium">
+                            {dict.examples.mcpServer}
+                        </span>
+                        <span className="block text-xs text-muted-foreground">
+                            {dict.examples.mcpDescription}
+                        </span>
+                    </span>
+                </a>
+            )}
+            <div className="flex flex-wrap gap-2">
+                <a
+                    href="https://github.com/DayuanJiang/next-ai-draw-io"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex h-8 items-center gap-1.5 rounded-lg border border-border px-3 text-xs text-muted-foreground hover:text-foreground"
+                >
+                    <Github className="size-3.5" />
+                    GitHub
+                </a>
+                {showAbout && (
+                    <a
+                        href={aboutPath}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="inline-flex h-8 items-center gap-1.5 rounded-lg border border-border px-3 text-xs text-muted-foreground hover:text-foreground"
+                    >
+                        <Info className="size-3.5" />
+                        {dict.settings.projectWebsite}
+                    </a>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export function SettingsDialog() {
+    const dict = useDictionary()
+    const t = dict.settings
+    const engine = useChatEngine()
+    const open = useUiStore((s) => s.settingsOpen)
+    const setOpen = useUiStore((s) => s.setSettingsOpen)
+    const tab = useUiStore((s) => s.settingsTab)
+    const setTab = useUiStore((s) => s.setSettingsTab)
+
+    const tabs: { id: SettingsTab; label: string; icon: React.ReactNode }[] = [
+        { id: "models", label: t.tabModels, icon: <KeyRound /> },
+        { id: "appearance", label: t.tabAppearance, icon: <Palette /> },
+        { id: "advanced", label: t.tabAdvanced, icon: <SlidersHorizontal /> },
+        { id: "about", label: t.tabAbout, icon: <Info /> },
+    ]
+    const current = tabs.find((item) => item.id === tab) ?? tabs[0]
+
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogContent className="flex h-[min(640px,88vh)] max-w-[calc(100%-1.5rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-4xl lg:flex-row">
+                {/* On top below 1024 px: beside the model settings' own
+                    provider list it would leave too little width */}
+                <nav className="flex shrink-0 gap-1 overflow-x-auto border-b border-border bg-surface-1 p-2 lg:w-52 lg:flex-col lg:overflow-visible lg:border-r lg:border-b-0 lg:p-3">
+                    <DialogTitle className="hidden px-2 pt-1 pb-3 text-[15px] lg:block">
+                        {t.title}
+                    </DialogTitle>
+                    {tabs.map((item) => (
+                        <button
+                            key={item.id}
+                            type="button"
+                            onClick={() => setTab(item.id)}
+                            className={cn(
+                                "flex h-8 shrink-0 items-center gap-2 rounded-lg px-2.5 text-[13px] text-muted-foreground hover:text-foreground [&_svg]:size-4",
+                                tab === item.id &&
+                                    "bg-card font-medium text-foreground shadow-float",
+                            )}
+                            data-testid={`settings-tab-${item.id}`}
+                        >
+                            {item.icon}
+                            {item.label}
+                        </button>
+                    ))}
+                </nav>
+                <section className="flex min-h-0 min-w-0 flex-1 flex-col">
+                    <DialogDescription className="sr-only">
+                        {t.description}
+                    </DialogDescription>
+                    {tab === "models" ? (
+                        <ModelConfigDialog
+                            open={open}
+                            modelConfig={engine.modelConfig}
+                        />
+                    ) : (
+                        <div className="min-h-0 flex-1 overflow-y-auto px-6 pt-5 pb-6 scrollbar-thin">
+                            <h2 className="mb-2 text-[15px] font-semibold">
+                                {current.label}
+                            </h2>
+                            {tab === "appearance" && <AppearanceTab />}
+                            {tab === "advanced" && <AdvancedTab open={open} />}
+                            {tab === "about" && <AboutTab />}
                         </div>
-                    </DialogContent>
-                }
-            >
-                <SettingsContent {...props} />
-            </Suspense>
+                    )}
+                </section>
+            </DialogContent>
         </Dialog>
     )
 }
diff --git a/components/ui/resizable.tsx b/components/ui/resizable.tsx
deleted file mode 100644
index 12bbd0b8..00000000
--- a/components/ui/resizable.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { GripVerticalIcon } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
-
-import { cn } from "@/lib/utils"
-
-function ResizablePanelGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
-  return (
-    <ResizablePrimitive.PanelGroup
-      data-slot="resizable-panel-group"
-      className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function ResizablePanel({
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
-}
-
-function ResizableHandle({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean
-}) {
-  return (
-    <ResizablePrimitive.PanelResizeHandle
-      data-slot="resizable-handle"
-      className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-        className
-      )}
-      {...props}
-    >
-      {withHandle && (
-        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
-          <GripVerticalIcon className="size-2.5" />
-        </div>
-      )}
-    </ResizablePrimitive.PanelResizeHandle>
-  )
-}
-
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/components/workspace/app-toaster.tsx b/components/workspace/app-toaster.tsx
new file mode 100644
index 00000000..cd9bb44f
--- /dev/null
+++ b/components/workspace/app-toaster.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { Toaster } from "sonner"
+import { useSettingsStore } from "@/stores/settings-store"
+
+/** The single toast container, mounted once at the root */
+export function AppToaster() {
+    const isDark = useSettingsStore((s) => s.isDark)
+    return (
+        <Toaster
+            position="bottom-center"
+            // Show stacked toasts in full, so a later one never covers the
+            // button of an earlier one (e.g. "Continue without saving")
+            expand
+            theme={isDark ? "dark" : "light"}
+            offset={{ bottom: 20 }}
+            mobileOffset={{ bottom: 72 }}
+            toastOptions={{
+                duration: 2500,
+                style: { maxWidth: "480px" },
+                classNames: {
+                    toast: "!rounded-xl !border-border !bg-card !text-foreground !shadow-pop",
+                    description: "!text-muted-foreground",
+                },
+            }}
+        />
+    )
+}
diff --git a/components/workspace/brand-mark.tsx b/components/workspace/brand-mark.tsx
new file mode 100644
index 00000000..1c763963
--- /dev/null
+++ b/components/workspace/brand-mark.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import { getAssetUrl } from "@/lib/base-path"
+import { cn } from "@/lib/utils"
+
+/** The app icon in a rounded tile; the white variant is used in dark mode */
+export function BrandMark({ className }: { className?: string }) {
+    return (
+        <span
+            className={cn(
+                "relative inline-flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-card",
+                className,
+            )}
+        >
+            {/* biome-ignore lint/performance/noImgElement: tiny static icon */}
+            <img
+                src={getAssetUrl("/favicon-192x192.png")}
+                alt=""
+                className="size-full object-contain dark:hidden"
+            />
+            {/* biome-ignore lint/performance/noImgElement: tiny static icon */}
+            <img
+                src={getAssetUrl("/favicon-white.svg")}
+                alt=""
+                className="hidden size-5 object-contain dark:block"
+            />
+        </span>
+    )
+}
diff --git a/components/workspace/icon-button.tsx b/components/workspace/icon-button.tsx
new file mode 100644
index 00000000..eb70f076
--- /dev/null
+++ b/components/workspace/icon-button.tsx
@@ -0,0 +1,80 @@
+"use client"
+
+import type React from "react"
+import { forwardRef } from "react"
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+
+interface IconButtonProps extends React.ComponentProps<"button"> {
+    label: string
+    /** Shown next to the label in the tooltip, e.g. "⌘B" */
+    shortcut?: string
+    active?: boolean
+    tooltipSide?: "top" | "bottom" | "left" | "right"
+    size?: "sm" | "md"
+}
+
+/** Square icon button with a tooltip; the tooltip text is also its label */
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+    function IconButton(
+        {
+            label,
+            shortcut,
+            active = false,
+            tooltipSide = "bottom",
+            size = "md",
+            className,
+            children,
+            ...props
+        },
+        ref,
+    ) {
+        return (
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <button
+                        ref={ref}
+                        type="button"
+                        aria-label={label}
+                        aria-pressed={active || undefined}
+                        className={cn(
+                            "inline-flex shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors",
+                            "hover:bg-accent hover:text-foreground",
+                            "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring",
+                            "disabled:pointer-events-none disabled:opacity-35",
+                            "[&_svg]:size-4 [&_svg]:stroke-[1.75]",
+                            size === "md" ? "size-8" : "size-7",
+                            // A tinted tile: solid ink is for the main action
+                            active &&
+                                "bg-interactive-active text-foreground hover:bg-interactive-active [&_svg]:stroke-2",
+                            className,
+                        )}
+                        {...props}
+                    >
+                        {children}
+                    </button>
+                </TooltipTrigger>
+                <TooltipContent
+                    side={tooltipSide}
+                    className="flex items-center gap-2"
+                >
+                    {label}
+                    {shortcut && (
+                        <kbd className="font-sans text-[11px] opacity-60">
+                            {shortcut}
+                        </kbd>
+                    )}
+                </TooltipContent>
+            </Tooltip>
+        )
+    },
+)
+
+/** Thin vertical divider between toolbar groups */
+export function ToolbarDivider() {
+    return <span className="mx-1 h-5 w-px shrink-0 bg-border" aria-hidden />
+}
diff --git a/components/workspace/workspace.tsx b/components/workspace/workspace.tsx
new file mode 100644
index 00000000..1b4e682c
--- /dev/null
+++ b/components/workspace/workspace.tsx
@@ -0,0 +1,422 @@
+"use client"
+
+import { MessageSquare, PanelRightOpen, Settings2, Shapes } from "lucide-react"
+import { usePathname, useRouter } from "next/navigation"
+import { useEffect, useRef, useState } from "react"
+import { CanvasStage } from "@/components/canvas/canvas-stage"
+import {
+    ChatEngineProvider,
+    useChatEngine,
+} from "@/components/chat/chat-engine"
+import { ChatPanel } from "@/components/chat/chat-panel"
+import { CompareDialog } from "@/components/chat/compare-dialog"
+import { LobbyHero } from "@/components/chat/lobby-hero"
+import { SaveDialog } from "@/components/save-dialog"
+import { SettingsDialog } from "@/components/settings-dialog"
+import { BrandMark } from "@/components/workspace/brand-mark"
+import { IconButton } from "@/components/workspace/icon-button"
+import { useDiagram } from "@/contexts/diagram-context"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { usePanelWidth } from "@/hooks/use-panel-width"
+import {
+    setAppShortcutHandler,
+    toggleShapesPanel,
+} from "@/lib/drawio/editor-bridge"
+import { i18n, type Locale } from "@/lib/i18n/config"
+import { modKey } from "@/lib/platform"
+import { STORAGE_KEYS } from "@/lib/storage"
+import { cn, isRealDiagram } from "@/lib/utils"
+import { useSettingsStore } from "@/stores/settings-store"
+import { useUiStore } from "@/stores/ui-store"
+import { useVersionsStore } from "@/stores/versions-store"
+
+/** File types the "Open .drawio file" picker accepts */
+const DIAGRAM_FILE_ACCEPT = ".drawio,.xml,.svg,application/xml,image/svg+xml"
+
+const MOBILE_BREAKPOINT = 768
+// Gap between the floating panel and the window edge
+const PANEL_GAP = 12
+
+function useIsMobile() {
+    const [isMobile, setIsMobile] = useState(false)
+    useEffect(() => {
+        const query = window.matchMedia(
+            `(max-width: ${MOBILE_BREAKPOINT - 1}px)`,
+        )
+        const update = () => setIsMobile(query.matches)
+        update()
+        query.addEventListener("change", update)
+        return () => query.removeEventListener("change", update)
+    }, [])
+    return isMobile
+}
+
+/** Restore the language picked last time (the URL may say otherwise) */
+function useSavedLocale() {
+    const router = useRouter()
+    const pathname = usePathname()
+    useEffect(() => {
+        const saved = localStorage.getItem(STORAGE_KEYS.locale)
+        if (!saved || !i18n.locales.includes(saved as Locale)) return
+        const parts = pathname.split("/").filter(Boolean)
+        if (parts[0] === saved) return
+        parts[0] = saved
+        const { search, hash } = window.location
+        router.replace(`/${parts.join("/")}${search}${hash}`)
+    }, [])
+}
+
+/** The diagram's title as a file name, or diagram-YYYY-MM-DD without one */
+export function exportFilename(title: string | null): string {
+    const name = (title && title !== "New Chat" ? title : "")
+        .replace(/[\\/:*?"<>|]+/g, "-")
+        .replace(/\s+/g, " ")
+        .trim()
+        .slice(0, 80)
+    // Local date (toISOString would give UTC)
+    return name || `diagram-${new Date().toLocaleDateString("sv-SE")}`
+}
+
+/** App name and settings button above the start screen */
+function StartBar({
+    className,
+    nameClassName,
+}: {
+    className: string
+    nameClassName: string
+}) {
+    const dict = useDictionary()
+    const openSettings = useUiStore((s) => s.openSettings)
+    return (
+        <div className={className}>
+            <BrandMark className="size-6" />
+            <span
+                className={cn(
+                    "text-[13px] font-semibold tracking-[-0.01em]",
+                    nameClassName,
+                )}
+            >
+                Next AI Draw.io
+            </span>
+            <IconButton
+                label={dict.nav.settings}
+                onClick={() => openSettings()}
+                data-testid="settings-button"
+            >
+                <Settings2 />
+            </IconButton>
+        </div>
+    )
+}
+
+/** The whole editor: canvas, chat panel, dialogs */
+export function Workspace() {
+    const hydrate = useSettingsStore((s) => s.hydrate)
+    useEffect(() => {
+        hydrate()
+    }, [hydrate])
+    useSavedLocale()
+
+    return (
+        <ChatEngineProvider>
+            <WorkspaceLayout />
+        </ChatEngineProvider>
+    )
+}
+
+function WorkspaceLayout() {
+    const dict = useDictionary()
+    const engine = useChatEngine()
+    const { chartXML, saveDiagramToFile } = useDiagram()
+    const isMobile = useIsMobile()
+    const panelWidth = usePanelWidth()
+    const {
+        panelOpen,
+        togglePanel,
+        setPanelOpen,
+        mobileView,
+        setMobileView,
+        focusComposer,
+        saveDialogOpen,
+        setSaveDialogOpen,
+    } = useUiStore()
+    const heroDismissed = useUiStore((s) => s.heroDismissed)
+    const setHeroDismissed = useUiStore((s) => s.setHeroDismissed)
+    const fileInputRef = useRef<HTMLInputElement>(null)
+
+    // Start screen: nothing said and nothing drawn yet
+    const showHero =
+        engine.isRestored &&
+        engine.messages.length === 0 &&
+        !engine.isResending &&
+        !isRealDiagram(chartXML) &&
+        !heroDismissed
+
+    // An emptied conversation brings the start screen back (a new chat
+    // does too, in the chat engine)
+    const messageCount = engine.messages.length
+    const wasEmptyRef = useRef(true)
+    useEffect(() => {
+        if (messageCount > 0) wasEmptyRef.current = false
+        else if (!wasEmptyRef.current) {
+            wasEmptyRef.current = true
+            setHeroDismissed(false)
+        }
+    }, [messageCount, setHeroDismissed])
+
+    // Phones: show the canvas while the AI draws and when a new version
+    // lands, so the result is visible; the chat tab gets a dot meanwhile
+    const isBusy = engine.isBusy
+    const versionCount = useVersionsStore((s) => s.versions.length)
+    const [chatUnread, setChatUnread] = useState(false)
+    const lastVersionCountRef = useRef(versionCount)
+    useEffect(() => {
+        if (isMobile && isBusy) setMobileView("canvas")
+    }, [isMobile, isBusy, setMobileView])
+    useEffect(() => {
+        const grew = versionCount > lastVersionCountRef.current
+        lastVersionCountRef.current = versionCount
+        if (isMobile && grew && engine.isRestored) {
+            setMobileView("canvas")
+            setChatUnread(true)
+        }
+    }, [versionCount, isMobile, engine.isRestored, setMobileView])
+    useEffect(() => {
+        if (mobileView === "chat") setChatUnread(false)
+    }, [mobileView])
+
+    // ⌘B toggles the panel; ⌘/ asks the AI about the selection; ⌘⇧K
+    // shows the shape library
+    useEffect(() => {
+        const handle = (event: KeyboardEvent) => {
+            if (!(event.metaKey || event.ctrlKey)) return false
+            if (event.shiftKey && (event.key === "k" || event.key === "K")) {
+                toggleShapesPanel()
+                return true
+            }
+            // ⌘⇧B stays with the browser (Chrome's bookmarks bar)
+            if (!event.shiftKey && (event.key === "b" || event.key === "B")) {
+                if (isMobile) return false
+                togglePanel()
+                return true
+            }
+            if (event.key === "/") {
+                setHeroDismissed(true)
+                focusComposer()
+                return true
+            }
+            return false
+        }
+        const onKeyDown = (event: KeyboardEvent) => {
+            if (handle(event)) event.preventDefault()
+        }
+        // draw.io takes focus when it (re)loads, e.g. after a language
+        // switch; Escape typed there must still close our dialogs.
+        // ⌘B stays with draw.io in the canvas (bold, and ⇧ for to back).
+        const handleInFrame = (event: KeyboardEvent) => {
+            if (event.key === "b" || event.key === "B") return false
+            if (event.key === "Escape") {
+                const ui = useUiStore.getState()
+                if (
+                    ui.settingsOpen ||
+                    ui.compareVersionId ||
+                    ui.saveDialogOpen
+                ) {
+                    ui.setSettingsOpen(false)
+                    ui.closeCompare()
+                    ui.setSaveDialogOpen(false)
+                    return true
+                }
+            }
+            return handle(event)
+        }
+        window.addEventListener("keydown", onKeyDown)
+        setAppShortcutHandler(handleInFrame)
+        return () => {
+            window.removeEventListener("keydown", onKeyDown)
+            setAppShortcutHandler(null)
+        }
+    }, [isMobile, togglePanel, focusComposer])
+
+    const openFile = () => fileInputRef.current?.click()
+    const dismissHero = () => {
+        setHeroDismissed(true)
+        setPanelOpen(true)
+    }
+
+    const panelVisible = !isMobile && !showHero && panelOpen
+    // The canvas edge slides with the panel as it opens or closes; a window
+    // resize or a dragged panel edge moves it at once. Set in the render
+    // that changes the edge, so the transition applies to that change.
+    const [sliding, setSliding] = useState(false)
+    const [lastPanelVisible, setLastPanelVisible] = useState(panelVisible)
+    if (lastPanelVisible !== panelVisible) {
+        setLastPanelVisible(panelVisible)
+        setSliding(true)
+    }
+    useEffect(() => {
+        if (!sliding) return
+        const timer = setTimeout(() => setSliding(false), 400)
+        return () => clearTimeout(timer)
+    }, [sliding])
+    // The panel floats on the right; the canvas ends where it begins
+    const canvasRight = panelVisible ? panelWidth + PANEL_GAP * 2 : 0
+
+    return (
+        <div
+            className="fixed inset-0 overflow-hidden bg-canvas"
+            data-testid="workspace"
+        >
+            {/* One canvas for both layouts: a new one would reload draw.io
+                and lose its undo history */}
+            <div className="absolute inset-0 flex flex-col">
+                <div className="relative min-h-0 flex-1">
+                    <CanvasStage
+                        className={
+                            isMobile
+                                ? cn(
+                                      "inset-0",
+                                      mobileView !== "canvas" && "invisible",
+                                  )
+                                : cn(
+                                      "inset-y-0 left-0",
+                                      sliding &&
+                                          "transition-[right] duration-300 ease-[var(--ease-out)]",
+                                  )
+                        }
+                        style={isMobile ? undefined : { right: canvasRight }}
+                        compact={isMobile}
+                        hideOverlays={!isMobile && showHero}
+                        onOpenFile={openFile}
+                    />
+                    {isMobile ? (
+                        mobileView === "chat" &&
+                        (showHero ? (
+                            <div className="absolute inset-0 overflow-y-auto bg-canvas">
+                                <StartBar
+                                    className="flex items-center gap-2 px-4 pt-3"
+                                    nameClassName="mr-auto"
+                                />
+                                <LobbyHero
+                                    compact
+                                    onOpenFile={openFile}
+                                    onDrawYourself={() => {
+                                        setHeroDismissed(true)
+                                        setMobileView("canvas")
+                                    }}
+                                />
+                            </div>
+                        ) : (
+                            <ChatPanel mobile onOpenFile={openFile} />
+                        ))
+                    ) : (
+                        <>
+                            {panelVisible && (
+                                <ChatPanel onOpenFile={openFile} />
+                            )}
+
+                            {!showHero && !panelOpen && (
+                                <div className="absolute top-3 right-3 z-20 flex items-center gap-1 rounded-xl bg-card p-1 shadow-float animate-fade-in">
+                                    <BrandMark className="mx-0.5 size-6" />
+                                    <IconButton
+                                        label={dict.nav.showPanel}
+                                        shortcut={`${modKey}B`}
+                                        onClick={() => setPanelOpen(true)}
+                                        data-testid="show-panel"
+                                    >
+                                        <PanelRightOpen />
+                                    </IconButton>
+                                </div>
+                            )}
+
+                            {showHero && (
+                                <>
+                                    <div className="absolute inset-0 z-10 overflow-y-auto bg-canvas">
+                                        <div className="flex min-h-full items-center">
+                                            <LobbyHero
+                                                onOpenFile={openFile}
+                                                onDrawYourself={dismissHero}
+                                            />
+                                        </div>
+                                    </div>
+                                    <StartBar
+                                        className="absolute top-3 left-3 z-20 flex items-center gap-1.5 rounded-xl bg-card py-1 pr-1 pl-1.5 shadow-float"
+                                        nameClassName="pr-1"
+                                    />
+                                </>
+                            )}
+                        </>
+                    )}
+                </div>
+                {isMobile && (
+                    <nav className="flex shrink-0 items-center justify-center gap-1 border-t border-border bg-card px-3 pt-1.5 pb-[max(6px,env(safe-area-inset-bottom))]">
+                        {(
+                            [
+                                {
+                                    view: "canvas",
+                                    label: dict.workspace.mobileCanvas,
+                                    icon: <Shapes />,
+                                },
+                                {
+                                    view: "chat",
+                                    label: dict.workspace.mobileChat,
+                                    icon: <MessageSquare />,
+                                },
+                            ] as const
+                        ).map((item) => (
+                            <button
+                                key={item.view}
+                                type="button"
+                                onClick={() => setMobileView(item.view)}
+                                aria-pressed={mobileView === item.view}
+                                className={cn(
+                                    "flex h-10 flex-1 items-center justify-center gap-2 rounded-xl text-[13px] text-muted-foreground [&_svg]:size-4",
+                                    mobileView === item.view &&
+                                        "bg-accent font-medium text-foreground",
+                                )}
+                            >
+                                {item.icon}
+                                {item.label}
+                                {item.view === "chat" &&
+                                    (isBusy || chatUnread) &&
+                                    mobileView !== "chat" && (
+                                        <span className="size-1.5 rounded-full bg-marker" />
+                                    )}
+                            </button>
+                        ))}
+                    </nav>
+                )}
+            </div>
+
+            <input
+                ref={fileInputRef}
+                type="file"
+                accept={DIAGRAM_FILE_ACCEPT}
+                className="hidden"
+                onChange={(event) => {
+                    // The opened diagram hides the start screen; a file
+                    // that is not one leaves it
+                    const file = event.target.files?.[0]
+                    if (file) engine.openDiagramFile(file)
+                    event.target.value = ""
+                }}
+            />
+
+            <SettingsDialog />
+            <CompareDialog />
+            <SaveDialog
+                open={saveDialogOpen}
+                onOpenChange={setSaveDialogOpen}
+                onSave={(filename, format) =>
+                    saveDiagramToFile(
+                        filename,
+                        format,
+                        engine.langfuseSessionId,
+                        dict.save.savedSuccessfully,
+                    )
+                }
+                defaultFilename={exportFilename(engine.currentTitle)}
+            />
+        </div>
+    )
+}
diff --git a/contexts/diagram-context.tsx b/contexts/diagram-context.tsx
index 0295a98f..b3b9bdb6 100644
--- a/contexts/diagram-context.tsx
+++ b/contexts/diagram-context.tsx
@@ -1,11 +1,29 @@
 "use client"
 
 import type React from "react"
-import { createContext, useCallback, useContext, useRef, useState } from "react"
-import type { DrawIoEmbedRef, EventExport } from "react-drawio"
+import {
+    createContext,
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+} from "react"
 import { toast } from "sonner"
+import type {
+    DrawioExportEvent,
+    DrawioFrameHandle,
+} from "@/components/canvas/drawio-frame"
 import type { ExportFormat } from "@/components/save-dialog"
 import { getApiEndpoint } from "@/lib/base-path"
+import { withPageDefaults } from "@/lib/drawio/drawio-config"
+import {
+    canReplaceDiagram,
+    commitDiagram,
+    previewDiagram,
+    resetPreview,
+    revertPreview,
+} from "@/lib/drawio/editor-bridge"
 import {
     BLANK_MXFILE,
     normalizeToMxfile,
@@ -13,24 +31,51 @@ import {
 import { validateAndFixXml } from "@/packages/mcp-server/src/xml-validation.ts"
 import { extractDiagramXML, isRealDiagram } from "../lib/utils"
 
+/**
+ * How a diagram reaches the canvas:
+ * - load: replace the whole document and reset undo (sessions, new chat)
+ * - preview: streaming AI output, not recorded in undo history
+ * - commit: final AI result, one undo step; reported to commit listeners
+ * - revert: drop the streaming preview and go back to the given diagram
+ *
+ * preview/commit/revert go through the draw.io editor when it is reachable
+ * (same origin); otherwise they fall back to a full load.
+ */
+export type LoadMode = "load" | "preview" | "commit" | "revert"
+
+/** The document without where its view was scrolled to (dx, dy) */
+function withoutView(xml: string): string {
+    return xml.replace(/<mxGraphModel\b[^>]*>/g, (tag) =>
+        tag.replace(/\s(?:dx|dy)="[^"]*"/g, ""),
+    )
+}
+
+export interface DiagramCommit {
+    beforeXml: string
+    afterXml: string
+    toolCallId?: string
+}
+
 interface DiagramContextType {
     chartXML: string
     // chartXML right away, before the re-render (loadDiagram sets both)
     chartXMLRef: React.MutableRefObject<string>
     latestSvg: string
-    diagramHistory: { svg: string; xml: string }[]
-    setDiagramHistory: (history: { svg: string; xml: string }[]) => void
-    loadDiagram: (chart: string, skipValidation?: boolean) => string | null
-    // Both return the export's tag (empty when draw.io is not there yet)
+    loadDiagram: (
+        chart: string,
+        skipValidation?: boolean,
+        mode?: LoadMode,
+        meta?: { toolCallId?: string },
+    ) => string | null
+    // Returns the export's tag (empty when draw.io is not there yet)
     handleExport: () => string
-    handleExportWithoutHistory: () => string
-    // Pending exports by tag; a history or plain export's resolver gets the
-    // first page's XML
+    // Pending exports by tag; a plain export's resolver gets the first
+    // page's XML
     exportResolversRef: React.MutableRefObject<
         Record<string, (data: string, xml?: string) => void>
     >
-    drawioRef: React.MutableRefObject<DrawIoEmbedRef | null>
-    handleDiagramExport: (data: EventExport) => void
+    drawioRef: React.MutableRefObject<DrawioFrameHandle | null>
+    handleDiagramExport: (data: DrawioExportEvent) => void
     handleDiagramAutoSave: (data: { xml?: string }) => void
     clearDiagram: () => void
     saveDiagramToFile: (
@@ -40,12 +85,17 @@ interface DiagramContextType {
         successMessage?: string,
     ) => void
     getThumbnailSvg: () => Promise<string | null>
+    getVersionSvg: () => Promise<string | null>
     captureValidationPng: () => Promise<string | null>
     isDrawioReady: boolean
     onDrawioLoad: () => void
     resetDrawioReady: () => void
-    showSaveDialog: boolean
-    setShowSaveDialog: (show: boolean) => void
+    /** Register the handler told about every committed AI change */
+    setCommitHandler: (
+        handler: ((commit: DiagramCommit) => void) | null,
+    ) => void
+    /** A new user turn starts: forget the streaming base */
+    startTurn: () => void
 }
 
 const DiagramContext = createContext<DiagramContextType | undefined>(undefined)
@@ -54,35 +104,42 @@ const DiagramContext = createContext<DiagramContextType | undefined>(undefined)
 // echoes the request back in the export event, so each result reaches its
 // own caller. Tags end in a request number, so a late result never answers
 // a newer request.
-type ExportTag = "thumbnail" | "validation"
+type ExportTag = "thumbnail" | "validation" | "version"
 
 export function DiagramProvider({ children }: { children: React.ReactNode }) {
     const [chartXML, setChartXML] = useState<string>("")
     const [latestSvg, setLatestSvg] = useState<string>("")
-    const [diagramHistory, setDiagramHistory] = useState<
-        { svg: string; xml: string }[]
-    >([])
     const [isDrawioReady, setIsDrawioReady] = useState(false)
-    const [showSaveDialog, setShowSaveDialog] = useState(false)
     const hasCalledOnLoadRef = useRef(false)
-    const drawioRef = useRef<DrawIoEmbedRef | null>(null)
+    const mountedRef = useRef(true)
+    useEffect(() => {
+        mountedRef.current = true
+        return () => {
+            mountedRef.current = false
+        }
+    }, [])
+    const drawioRef = useRef<DrawioFrameHandle | null>(null)
     // Pending exports, keyed by their export tag
     const exportResolversRef = useRef<
         Record<string, (data: string, xml?: string) => void>
     >({})
-    // Pending history exports: the document each one was asked for
-    const historyXmlRef = useRef(new Map<string, string>())
     const exportSeqRef = useRef(0)
     // Track latest chartXML for restoration after remount
     const chartXMLRef = useRef<string>("")
+    // Diagram before the current AI change started streaming
+    const turnBaseRef = useRef<string | null>(null)
+    const commitHandlerRef = useRef<((commit: DiagramCommit) => void) | null>(
+        null,
+    )
 
     const onDrawioLoad = () => {
         // Only set ready state once to prevent infinite loops
         if (hasCalledOnLoadRef.current) return
         hasCalledOnLoadRef.current = true
         setIsDrawioReady(true)
-        // Restore diagram after remount (e.g., theme/UI change)
-        if (drawioRef.current && isRealDiagram(chartXMLRef.current)) {
+        // Restore diagram after remount (e.g., theme/UI change), or a file
+        // opened while draw.io loaded (its page settings count too)
+        if (drawioRef.current && chartXMLRef.current) {
             drawioRef.current.load({ xml: chartXMLRef.current })
         }
     }
@@ -101,20 +158,7 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
 
     const handleExport = () => {
         if (!drawioRef.current) return ""
-        // Save this export to history, with the document shown now:
-        // chartXML can change before the result comes back
-        const tag = `history-${++exportSeqRef.current}`
-        historyXmlRef.current.set(tag, chartXMLRef.current)
-        drawioRef.current.exportDiagram({
-            format: "xmlsvg",
-            message: tag,
-        })
-        return tag
-    }
-
-    const handleExportWithoutHistory = () => {
-        if (!drawioRef.current) return ""
-        // Export without saving to history (for edit_diagram fetching current state)
+        // Export of the current state (for the chat and edit_diagram)
         const tag = `fetch-${++exportSeqRef.current}`
         drawioRef.current.exportDiagram({
             format: "xmlsvg",
@@ -128,7 +172,7 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
     // expected occasionally.
     // (Reads refs only, so it keeps one identity)
     const requestTaggedExport = useCallback(
-        (tag: ExportTag, format: "xmlsvg" | "png", timeoutMs: number) =>
+        (tag: ExportTag, format: "xmlsvg" | "svg" | "png", timeoutMs: number) =>
             new Promise<string | null>((resolve) => {
                 const id = `${tag}-${++exportSeqRef.current}`
                 const finish = (value: string | null) => {
@@ -162,6 +206,13 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         return null
     }, [requestTaggedExport])
 
+    // Plain SVG (no embedded diagram data) for version cards
+    const getVersionSvg = async (): Promise<string | null> => {
+        if (!drawioRef.current) return null
+        const svgData = await requestTaggedExport("version", "svg", 4000)
+        return svgData?.startsWith("data:image/svg") ? svgData : null
+    }
+
     // Capture current diagram as PNG for VLM validation
     const captureValidationPng = async (): Promise<string | null> => {
         if (!drawioRef.current) return null
@@ -176,7 +227,12 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
     const loadDiagram = (
         chart: string,
         skipValidation?: boolean,
+        mode: LoadMode = "load",
+        meta?: { toolCallId?: string },
     ): string | null => {
+        // The editor bridge is shared: a page that is gone (another language
+        // mounted a new one) must not change the new page's canvas
+        if (!mountedRef.current) return null
         let xmlToLoad = chart
 
         // Validate XML structure before loading (unless skipped for internal
@@ -201,23 +257,56 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
             }
         }
 
+        xmlToLoad = withPageDefaults(xmlToLoad)
+
+        const previousXml = chartXMLRef.current
+        if (mode === "preview" && turnBaseRef.current === null) {
+            turnBaseRef.current = previousXml
+        }
+        const beforeXml = turnBaseRef.current ?? previousXml
+        if (mode !== "preview") turnBaseRef.current = null
+
         // Keep chartXML in sync even when diagrams are injected (e.g., display_diagram tool)
         updateChartXML(xmlToLoad)
 
-        if (drawioRef.current) {
-            drawioRef.current.load({
-                xml: xmlToLoad,
+        let applied = false
+        if (mode !== "load" && canReplaceDiagram(xmlToLoad)) {
+            try {
+                if (mode === "preview") previewDiagram(xmlToLoad)
+                else if (mode === "commit") commitDiagram(xmlToLoad)
+                else revertPreview(xmlToLoad)
+                applied = true
+            } catch (error) {
+                console.warn("[loadDiagram] Editor update failed:", error)
+            }
+        }
+        if (!applied) {
+            // A full load replaces any preview, and its base is stale now
+            resetPreview()
+            drawioRef.current?.load({ xml: xmlToLoad })
+        }
+
+        if (mode === "commit") {
+            commitHandlerRef.current?.({
+                beforeXml,
+                afterXml: xmlToLoad,
+                toolCallId: meta?.toolCallId,
             })
         }
 
         return null
     }
 
-    const handleDiagramExport = (data: EventExport) => {
-        // Thumbnail, validation PNG and file save exports go only to their
-        // own caller
+    const startTurn = () => {
+        turnBaseRef.current = null
+        resetPreview()
+    }
+
+    const handleDiagramExport = (data: DrawioExportEvent) => {
+        // Thumbnail, version, validation PNG and file save exports go only
+        // to their own caller
         const tag = data.message?.message
-        if (/^(thumbnail|validation|save)-/.test(tag ?? "")) {
+        if (/^(thumbnail|validation|version|save)-/.test(tag ?? "")) {
             exportResolversRef.current[tag as string]?.(data.data, data.xml)
             return
         }
@@ -229,29 +318,6 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         const extractedXML = extractDiagramXML(data.data)
         setLatestSvg(data.data)
 
-        // Only add to history if this was a user-initiated export
-        // Limit to 20 entries to prevent memory leaks during long sessions
-        const MAX_HISTORY_SIZE = 20
-        const askedXml =
-            tag !== undefined ? historyXmlRef.current.get(tag) : undefined
-        if (askedXml !== undefined) {
-            historyXmlRef.current.delete(tag as string)
-            // Store the full multi-page document (extractedXML is only the
-            // first page), so restoring a version keeps every page
-            const historyXml = askedXml || extractedXML
-            setDiagramHistory((prev) => {
-                const newHistory = [
-                    ...prev,
-                    {
-                        svg: data.data,
-                        xml: historyXml,
-                    },
-                ]
-                // Keep only the last MAX_HISTORY_SIZE entries (circular buffer)
-                return newHistory.slice(-MAX_HISTORY_SIZE)
-            })
-        }
-
         // The chat's own export (onFetchChart), not another one in flight
         const resolve =
             tag !== undefined ? exportResolversRef.current[tag] : undefined
@@ -261,15 +327,17 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         }
     }
 
-    // react-drawio registers this callback once per iframe mount, so it must
+    // The frame registers this callback once per iframe mount, so it must
     // read refs: state captured in its closure would stay stale after a remount
     const handleDiagramAutoSave = (data: { xml?: string }) => {
         if (!data?.xml) return
-        // Don't overwrite a pending restore - if we have a real diagram but
+        // Don't overwrite a pending restore - if we have a diagram but
         // DrawIO hasn't loaded yet, it means we're waiting to restore
-        if (!hasCalledOnLoadRef.current && isRealDiagram(chartXMLRef.current)) {
-            return
-        }
+        if (!hasCalledOnLoadRef.current && chartXMLRef.current) return
+        // Only the view moved, or draw.io saved what it just loaded: nothing
+        // changed, and a save would put a chat that was only opened first
+        // in the list
+        if (withoutView(data.xml) === withoutView(chartXMLRef.current)) return
         updateChartXML(data.xml)
     }
 
@@ -278,7 +346,6 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         // Skip validation for trusted internal template (loadDiagram also sets chartXML)
         loadDiagram(emptyDiagram, true)
         setLatestSvg("")
-        setDiagramHistory([])
     }
 
     const saveDiagramToFile = (
@@ -361,10 +428,7 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
 
             // Show success toast after download is initiated
             if (successMessage) {
-                toast.success(successMessage, {
-                    position: "bottom-left",
-                    duration: 2500,
-                })
+                toast.success(successMessage, { duration: 2500 })
             }
 
             // Delay URL revocation to ensure download completes
@@ -397,17 +461,20 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         }
     }
 
+    const setCommitHandler = (
+        handler: ((commit: DiagramCommit) => void) | null,
+    ) => {
+        commitHandlerRef.current = handler
+    }
+
     return (
         <DiagramContext.Provider
             value={{
                 chartXML,
                 chartXMLRef,
                 latestSvg,
-                diagramHistory,
-                setDiagramHistory,
                 loadDiagram,
                 handleExport,
-                handleExportWithoutHistory,
                 exportResolversRef,
                 drawioRef,
                 handleDiagramExport,
@@ -415,12 +482,13 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
                 clearDiagram,
                 saveDiagramToFile,
                 getThumbnailSvg,
+                getVersionSvg,
                 captureValidationPng,
                 isDrawioReady,
                 onDrawioLoad,
                 resetDrawioReady,
-                showSaveDialog,
-                setShowSaveDialog,
+                setCommitHandler,
+                startTurn,
             }}
         >
             {children}
diff --git a/docker-compose.yml b/docker-compose.yml
index 55eb1312..78b4ff9c 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,14 +1,11 @@
 services:
-  drawio:
-    image: jgraph/drawio:latest
-    ports: ["8080:8080"]
   next-ai-draw-io:
     build:
       context: .
-      args:
-        - NEXT_PUBLIC_DRAWIO_BASE_URL=http://localhost:8080
-        # Uncomment below for subdirectory deployment
-        # - NEXT_PUBLIC_BASE_PATH=/nextaidrawio
+      # draw.io is bundled into the image (public/drawio), no separate container needed
+      # Uncomment below for subdirectory deployment
+      # args:
+      #   - NEXT_PUBLIC_BASE_PATH=/nextaidrawio
     ports: ["3000:3000"]
     env_file: .env
     volumes:
@@ -17,4 +14,3 @@ services:
     # environment:
     #   # For subdirectory deployment, uncomment and set your path:
     #   NEXT_PUBLIC_BASE_PATH: /nextaidrawio
-    depends_on: [drawio]
diff --git a/docs/cn/FAQ.md b/docs/cn/FAQ.md
index 7242bf33..81a97f85 100644
--- a/docs/cn/FAQ.md
+++ b/docs/cn/FAQ.md
@@ -18,9 +18,11 @@
 
 **问题**: 内网环境提示"找不到 embed.diagrams.net 的服务器 IP 地址"
 
-**关键点**: `NEXT_PUBLIC_*` 环境变量是**构建时**变量，会被打包到 JS 代码中，**运行时设置无效**！
+**关键点**: 应用现在自带一份 draw.io，从 `/drawio` 提供，浏览器不再需要访问 `embed.diagrams.net`。如果仍然看到这个错误，说明镜像是用 `NEXT_PUBLIC_DRAWIO_BASE_URL=https://embed.diagrams.net`（旧版 Dockerfile 的默认值）构建的，去掉这个构建参数重新构建即可。详见[离线部署](./offline-deployment.md)。
 
-**解决方案**: 必须在构建时通过 `args` 传入：
+`NEXT_PUBLIC_*` 环境变量是**构建时**变量，会被打包到 JS 代码中，**运行时设置无效**！
+
+**如果仍想使用单独的 draw.io 服务器**，在构建时通过 `args` 传入：
 
 ```yaml
 # docker-compose.yml
diff --git a/docs/cn/README_CN.md b/docs/cn/README_CN.md
index d9cff3e4..60c36327 100644
--- a/docs/cn/README_CN.md
+++ b/docs/cn/README_CN.md
@@ -93,7 +93,8 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   **基于图像的图表复制**：上传现有图表或图像，让AI自动复制和增强
 -   **PDF和文本文件上传**：上传PDF文档和文本文件，提取内容并从现有文档生成图表
 -   **AI推理过程显示**：查看支持模型的AI思考过程（OpenAI o1/o3、Gemini、Claude等）
--   **图表历史记录**：全面的版本控制，跟踪所有更改，允许您查看和恢复AI编辑前的图表版本
+-   **版本与撤销**：AI 每改一次图，聊天里就多一张带缩略图的版本卡片，可以和画布对比、恢复，也可以撤销这次修改；在画布上按 Ctrl+Z 也能一步撤回 AI 的修改。AI 刚改过的图形会在画布上标出来
+-   **针对选中图形提问**：在画布上选中图形，让 AI 只改这几个
 -   **交互式聊天界面**：与AI实时对话来完善您的图表
 -   **云架构图支持**：专门支持生成云架构图（AWS、GCP、Azure）
 -   **动画连接器**：在图表元素之间创建动态动画连接器，实现更好的可视化效果
@@ -243,7 +244,7 @@ npm run dev
 
 -   **Next.js**：用于前端框架和路由
 -   **Vercel AI SDK**（`ai` + `@ai-sdk/*`）：用于流式AI响应和多提供商支持
--   **react-drawio**：用于图表表示和操作
+-   **draw.io**：编辑器使用打包在 `public/drawio` 里的副本（由 `npm run dev` / `npm run build` 自动下载），应用可以直接控制它
 
 图表以XML格式表示，可在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。
 
diff --git a/docs/cn/offline-deployment.md b/docs/cn/offline-deployment.md
index 982e8495..2b1c6658 100644
--- a/docs/cn/offline-deployment.md
+++ b/docs/cn/offline-deployment.md
@@ -1,13 +1,25 @@
 # 离线部署
 
-通过自托管 draw.io 来替代 `embed.diagrams.net`，从而离线部署 Next AI Draw.io。
-
-**注意：** `NEXT_PUBLIC_DRAWIO_BASE_URL` 是一个**构建时**变量。修改它需要重新构建 Docker 镜像。
+Next AI Draw.io 自带一份 draw.io。`npm run build`（包括 Docker 构建）会把 draw.io 的发布包下载到 `public/drawio`，只下载一次，应用从 `/drawio` 提供它。使用时浏览器不会访问 `embed.diagrams.net`，所以只要构建时能联网，应用就能在离线网络或内网里使用。
 
 ## Docker Compose 设置
 
 1. 克隆仓库并在 `.env` 文件中定义 API 密钥。
-2. 创建 `docker-compose.yml`：
+2. 运行 `docker compose up -d`（使用仓库里的 `docker-compose.yml`）。
+3. 打开 `http://localhost:3000`。
+
+不需要单独的 draw.io 容器。
+
+## 构建机器不能联网时
+
+构建会从 [draw.io 发布页](https://github.com/jgraph/drawio/releases) 下载 `draw.war`（约 50 MB）。如果构建机器访问不了 GitHub：
+
+- 在另一台机器上下载 `scripts/fetch-drawio.mjs` 里写明的那个版本的 `draw.war`，解压到 `public/drawio`（删掉 `WEB-INF` 和 `META-INF`），再把版本号（例如 `v32.0.2`）写进 `public/drawio/.version`。构建时就会使用这份副本。
+- 或者在能联网的机器上构建镜像，再拷到离线网络里。
+
+## 使用单独的 draw.io 服务器（可选）
+
+仍然可以用构建时变量 `NEXT_PUBLIC_DRAWIO_BASE_URL` 让应用使用别处的 draw.io，比如 `jgraph/drawio` 镜像：
 
 ```yaml
 services:
@@ -24,9 +36,7 @@ services:
     depends_on: [drawio]
 ```
 
-3. 运行 `docker compose up -d` 并打开 `http://localhost:3000`。
-
-## 配置与重要警告
+使用外部 draw.io 时，应用改用 draw.io 自己的工具栏，以下功能不可用：标出 AI 改了哪些图形、针对选中的图形提问、应用自己的画布工具栏、用 Ctrl+Z 撤回 AI 的修改。浏览器不允许页面控制来自其他域名的编辑器。
 
 **`NEXT_PUBLIC_DRAWIO_BASE_URL` 必须是用户浏览器可访问的地址。**
 
diff --git a/docs/en/FAQ.md b/docs/en/FAQ.md
index 69e48363..7d57758b 100644
--- a/docs/en/FAQ.md
+++ b/docs/en/FAQ.md
@@ -18,9 +18,11 @@
 
 **Problem**: Intranet environment shows "Cannot find server IP address for embed.diagrams.net"
 
-**Key Point**: `NEXT_PUBLIC_*` environment variables are **build-time** variables, they get bundled into JS code. **Runtime settings don't work!**
+**Key Point**: The app now ships with its own copy of draw.io, served from `/drawio`, so the browser no longer needs `embed.diagrams.net`. If you still see this error, the image was built with `NEXT_PUBLIC_DRAWIO_BASE_URL=https://embed.diagrams.net` (the old Dockerfile default). Rebuild without that build argument. See [Offline Deployment](./offline-deployment.md).
 
-**Solution**: Must pass via `args` at build time:
+`NEXT_PUBLIC_*` environment variables are **build-time** variables, they get bundled into JS code. **Runtime settings don't work!**
+
+**To keep a separate draw.io server instead**, pass it via `args` at build time:
 
 ```yaml
 # docker-compose.yml
diff --git a/docs/en/offline-deployment.md b/docs/en/offline-deployment.md
index 8894a360..48a36bd7 100644
--- a/docs/en/offline-deployment.md
+++ b/docs/en/offline-deployment.md
@@ -1,13 +1,25 @@
 # Offline Deployment
 
-Deploy Next AI Draw.io offline by self-hosting draw.io to replace `embed.diagrams.net`.
-
-**Note:** `NEXT_PUBLIC_DRAWIO_BASE_URL` is a **build-time** variable. Changing it requires rebuilding the Docker image.
+Next AI Draw.io ships with its own copy of draw.io. `npm run build` (and the Docker build) downloads the draw.io release into `public/drawio` once, and the app serves it from `/drawio`. In use, the browser never contacts `embed.diagrams.net`, so the app works on an offline or intranet network as long as the build had internet access.
 
 ## Docker Compose Setup
 
 1. Clone the repository and define API keys in `.env`.
-2. Create `docker-compose.yml`:
+2. Run `docker compose up -d` (it uses the `docker-compose.yml` in the repository).
+3. Open `http://localhost:3000`.
+
+No separate draw.io container is needed.
+
+## Building Without Internet Access
+
+The build downloads `draw.war` (about 50 MB) from the [draw.io releases](https://github.com/jgraph/drawio/releases). If the build machine cannot reach GitHub:
+
+- On another machine, download `draw.war` for the version in `scripts/fetch-drawio.mjs`, unzip it into `public/drawio` (delete `WEB-INF` and `META-INF`), and write the version, for example `v32.0.2`, into `public/drawio/.version`. The build then uses this copy.
+- Or build the image on a machine with internet access and transfer it to the offline network.
+
+## Using a Separate draw.io Server (Optional)
+
+You can still point the app at another draw.io, such as the `jgraph/drawio` image, with the build-time variable `NEXT_PUBLIC_DRAWIO_BASE_URL`:
 
 ```yaml
 services:
@@ -24,9 +36,7 @@ services:
     depends_on: [drawio]
 ```
 
-3. Run `docker compose up -d` and open `http://localhost:3000`.
-
-## Configuration & Critical Warning
+With an external draw.io the app uses draw.io's own toolbar, and these features are off: highlighting what the AI changed, asking about selected shapes, the app's canvas toolbar, and undoing AI changes with Ctrl+Z. Browsers do not let a page control an editor served from a different origin.
 
 **The `NEXT_PUBLIC_DRAWIO_BASE_URL` must be accessible from the user's browser.**
 
diff --git a/docs/ja/FAQ.md b/docs/ja/FAQ.md
index e9559d00..fbf7a8bf 100644
--- a/docs/ja/FAQ.md
+++ b/docs/ja/FAQ.md
@@ -18,9 +18,11 @@
 
 **問題**: イントラネット環境で「embed.diagrams.netのサーバーIPアドレスが見つかりません」と表示される
 
-**重要**: `NEXT_PUBLIC_*` 環境変数は**ビルド時**変数であり、JSコードにバンドルされます。**実行時の設定は無効です！**
+**重要**: アプリには draw.io のコピーが同梱され、`/drawio` から配信されるため、ブラウザは `embed.diagrams.net` にアクセスしなくなりました。それでもこのエラーが出る場合は、イメージが `NEXT_PUBLIC_DRAWIO_BASE_URL=https://embed.diagrams.net`（以前の Dockerfile の既定値）でビルドされています。このビルド引数を外して再ビルドしてください。詳しくは[オフラインデプロイ](./offline-deployment.md)を参照してください。
 
-**解決策**: ビルド時に `args` で渡す必要があります：
+`NEXT_PUBLIC_*` 環境変数は**ビルド時**変数であり、JSコードにバンドルされます。**実行時の設定は無効です！**
+
+**別の draw.io サーバーを使い続ける場合**は、ビルド時に `args` で渡します：
 
 ```yaml
 # docker-compose.yml
diff --git a/docs/ja/README_JA.md b/docs/ja/README_JA.md
index 90454f42..683a9e8a 100644
--- a/docs/ja/README_JA.md
+++ b/docs/ja/README_JA.md
@@ -91,7 +91,8 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   **画像ベースのダイアグラム複製**：既存のダイアグラムや画像をアップロードし、AIが自動的に複製・強化
 -   **PDFとテキストファイルのアップロード**：PDFドキュメントやテキストファイルをアップロードして、既存のドキュメントからコンテンツを抽出し、ダイアグラムを生成
 -   **AI推論プロセス表示**：サポートされているモデル（OpenAI o1/o3、Gemini、Claudeなど）のAIの思考プロセスを表示
--   **ダイアグラム履歴**：すべての変更を追跡する包括的なバージョン管理。AI編集前のダイアグラムの以前のバージョンを表示・復元可能
+-   **バージョンと取り消し**：AI が図を変更するたびに、サムネイル付きのバージョンカードがチャットに表示されます。キャンバスと比較したり、復元したり、その変更を取り消したりできます。キャンバスで Ctrl+Z を押しても AI の変更を一度に元に戻せます。AI が変更した図形はキャンバス上で強調表示されます
+-   **選択した図形について依頼**：キャンバスで図形を選択し、その図形だけを AI に直してもらえます
 -   **インタラクティブなチャットインターフェース**：AIとリアルタイムでコミュニケーションしてダイアグラムを改善
 -   **クラウドアーキテクチャダイアグラムサポート**：クラウドアーキテクチャダイアグラムの生成を専門的にサポート（AWS、GCP、Azure）
 -   **アニメーションコネクタ**：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成
@@ -242,7 +243,7 @@ AWS BedrockとOpenRouter以外のすべてのプロバイダーはカスタム
 
 -   **Next.js**：フロントエンドフレームワークとルーティング
 -   **Vercel AI SDK**（`ai` + `@ai-sdk/*`）：ストリーミングAIレスポンスとマルチプロバイダーサポート
--   **react-drawio**：ダイアグラムの表現と操作
+-   **draw.io**：エディターは `public/drawio` に同梱したコピー（`npm run dev` / `npm run build` で自動ダウンロード）で動作し、アプリから直接操作できます
 
 ダイアグラムはdraw.ioでレンダリングできるXMLとして表現されます。AIがコマンドを処理し、それに応じてこのXMLを生成または変更します。
 
diff --git a/docs/ja/offline-deployment.md b/docs/ja/offline-deployment.md
index afca9955..66c31efc 100644
--- a/docs/ja/offline-deployment.md
+++ b/docs/ja/offline-deployment.md
@@ -1,13 +1,25 @@
 # オフラインデプロイ
 
-`embed.diagrams.net` の代わりに draw.io をセルフホストすることで、Next AI Draw.io をオフライン環境にデプロイできます。
-
-**注:** `NEXT_PUBLIC_DRAWIO_BASE_URL` は**ビルド時**の変数です。これを変更する場合は、Docker イメージの再ビルドが必要です。
+Next AI Draw.io には draw.io のコピーが同梱されています。`npm run build`（Docker ビルドを含む）が draw.io のリリースを一度だけ `public/drawio` にダウンロードし、アプリは `/drawio` からそれを配信します。利用中のブラウザは `embed.diagrams.net` にアクセスしないため、ビルド時にインターネットに接続できれば、オフライン環境やイントラネットでも動作します。
 
 ## Docker Compose のセットアップ
 
 1. リポジトリをクローンし、`.env` ファイルに API キーを定義します。
-2. `docker-compose.yml` を作成します。
+2. `docker compose up -d` を実行します（リポジトリの `docker-compose.yml` を使います）。
+3. `http://localhost:3000` を開きます。
+
+draw.io 用の別コンテナは不要です。
+
+## ビルド環境がインターネットに接続できない場合
+
+ビルドは [draw.io のリリース](https://github.com/jgraph/drawio/releases) から `draw.war`（約 50 MB）をダウンロードします。ビルド環境から GitHub にアクセスできない場合は、次のどちらかを行ってください。
+
+- 別のマシンで `scripts/fetch-drawio.mjs` に書かれたバージョンの `draw.war` をダウンロードし、`public/drawio` に展開します（`WEB-INF` と `META-INF` は削除）。さらにバージョン（例：`v32.0.2`）を `public/drawio/.version` に書き込みます。ビルドはこのコピーを使います。
+- インターネットに接続できるマシンでイメージをビルドし、オフライン環境に転送します。
+
+## 別の draw.io サーバーを使う場合（任意）
+
+ビルド時の変数 `NEXT_PUBLIC_DRAWIO_BASE_URL` で、`jgraph/drawio` イメージなど別の draw.io を使うこともできます。
 
 ```yaml
 services:
@@ -24,9 +36,7 @@ services:
     depends_on: [drawio]
 ```
 
-3. `docker compose up -d` を実行し、`http://localhost:3000` にアクセスします。
-
-## 設定と重要な警告
+外部の draw.io を使うと、アプリは draw.io 自身のツールバーを使い、次の機能は使えなくなります：AI が変更した図形の強調表示、選択した図形についての依頼、アプリのキャンバスツールバー、Ctrl+Z による AI の変更の取り消し。ブラウザは、別のオリジンから配信されたエディターをページから操作することを許可しないためです。
 
 **`NEXT_PUBLIC_DRAWIO_BASE_URL` は、ユーザーのブラウザからアクセスできる必要があります。**
 
diff --git a/env.example b/env.example
index ffdc0f0b..8ac203e5 100644
--- a/env.example
+++ b/env.example
@@ -143,8 +143,11 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 # SETTINGS_FILE=./data/settings.json  # Optional: custom settings file location
 
 # Draw.io Configuration (Optional)
-# NEXT_PUBLIC_DRAWIO_BASE_URL=https://embed.diagrams.net  # Default: https://embed.diagrams.net
-# Use this to point to a self-hosted draw.io instance
+# By default the app serves its own copy of draw.io from /drawio (downloaded into
+# public/drawio by `npm run dev` / `npm run build`). Same origin is required for
+# highlighting AI changes, asking about selected shapes and the custom toolbar.
+# NEXT_PUBLIC_DRAWIO_BASE_URL=https://embed.diagrams.net  # Optional: use an external draw.io instead
+# With an external draw.io the app falls back to draw.io's own toolbar and those features are off.
 
 # Subdirectory Deployment (Optional)
 # For deploying to a subdirectory (e.g., https://example.com/nextaidrawio)
@@ -178,7 +181,7 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 # which triggers the client UI to display messages suggesting self-hosting or sponsorship.
 # This switch allows self-hosted users to provide custom messages in response to a 429 code,
 # in messageTokenSelfHosted, messageApiSelfHosted, and tipSelfHosted translation strings.
-# It also turns off the MCP server advertisement in the chat examples.
+# It also turns off the MCP server advertisement in Settings > About.
 # NEXT_PUBLIC_SELFHOSTED=true
 
 # Minimax Configuration (Optional)
diff --git a/hooks/use-diagram-tool-handlers.ts b/hooks/use-diagram-tool-handlers.ts
index ad67ec28..f6cbef05 100644
--- a/hooks/use-diagram-tool-handlers.ts
+++ b/hooks/use-diagram-tool-handlers.ts
@@ -1,9 +1,10 @@
-import type { MutableRefObject } from "react"
+import type { RefObject } from "react"
 import type { DiagramOperation } from "@/components/chat/types"
 import type {
     ValidationState,
     ValidationStatus,
 } from "@/components/chat/ValidationCard"
+import type { LoadMode } from "@/contexts/diagram-context"
 import type { ValidationResult } from "@/lib/diagram-validator"
 import { formatValidationFeedback } from "@/lib/diagram-validator"
 import { isMxCellXmlComplete } from "@/lib/utils"
@@ -50,16 +51,23 @@ type ValidateDiagramFn = (
 ) => Promise<ValidationResult>
 
 interface UseDiagramToolHandlersParams {
-    partialXmlRef: MutableRefObject<string>
-    editDiagramOriginalXmlRef: MutableRefObject<Map<string, string>>
+    partialXmlRef: RefObject<string>
+    // Diagram before a cut off display_diagram whose half drawn preview
+    // stays while append_diagram finishes it; null when none is pending
+    continuationOriginalRef: RefObject<string | null>
+    editDiagramOriginalXmlRef: RefObject<Map<string, string>>
     // Tool calls the streaming preview must leave alone (shared with it)
-    processedToolCallsRef: MutableRefObject<Set<string>>
+    processedToolCallsRef: RefObject<Set<string>>
     // Failed VLM validations in the current user turn (reset on each user message)
-    validationRetryCountRef: MutableRefObject<number>
-    chartXMLRef: MutableRefObject<string>
-    onDisplayChart: (xml: string, skipValidation?: boolean) => string | null
-    onFetchChart: (saveToHistory?: boolean) => Promise<string>
-    onExport: () => void
+    validationRetryCountRef: RefObject<number>
+    chartXMLRef: RefObject<string>
+    onDisplayChart: (
+        xml: string,
+        skipValidation?: boolean,
+        mode?: LoadMode,
+        meta?: { toolCallId?: string },
+    ) => string | null
+    onFetchChart: () => Promise<string>
     captureValidationPng?: () => Promise<string | null>
     validateDiagram?: ValidateDiagramFn
     enableVlmValidation?: boolean
@@ -84,13 +92,13 @@ interface UseDiagramToolHandlersParams {
  */
 export function useDiagramToolHandlers({
     partialXmlRef,
+    continuationOriginalRef,
     editDiagramOriginalXmlRef,
     processedToolCallsRef,
     validationRetryCountRef,
     chartXMLRef,
     onDisplayChart,
     onFetchChart,
-    onExport,
     captureValidationPng,
     validateDiagram,
     enableVlmValidation = true,
@@ -146,6 +154,17 @@ export function useDiagramToolHandlers({
     // handler. The first is the diagram before all of them. A call that
     // draws its result replaces those previews, so the preview code must
     // neither draw them again nor undo them later. Returns that first one.
+    // The final result as one undo step. A cut off drawing it replaces goes
+    // first, so the step (and the version) starts from the diagram before
+    // it, also when a failed call in between was undone to the cut off one.
+    const commit = (xml: string, toolCallId: string) => {
+        const original = continuationOriginalRef.current
+        if (original !== null) onDisplayChart(original, true, "revert")
+        const error = onDisplayChart(xml, true, "commit", { toolCallId })
+        if (!error) continuationOriginalRef.current = null
+        return error
+    }
+
     const takeOriginals = (): string | undefined => {
         const [originalXml] = editDiagramOriginalXmlRef.current.values()
         for (const id of editDiagramOriginalXmlRef.current.keys()) {
@@ -181,6 +200,15 @@ export function useDiagramToolHandlers({
         if (isTruncated) {
             // Store the partial XML for continuation via append_diagram
             partialXmlRef.current = xml
+            // The half drawn preview stays while append_diagram finishes
+            // it; the chat engine brings this diagram back if that never
+            // happens
+            if (
+                originalXml !== undefined &&
+                continuationOriginalRef.current === null
+            ) {
+                continuationOriginalRef.current = originalXml
+            }
 
             // Tell LLM to use append_diagram to continue
             const partialEnding = partialXmlRef.current.slice(-500)
@@ -210,16 +238,19 @@ NEXT STEP: Call append_diagram with the continuation XML.
 
         // Wrap, validate and auto-fix the model's XML like the MCP server's
         // create_new_diagram, then load it
+        // One undo step (and a version) right away, before the screenshot
+        // check: a stop, another chat or a hand edit during the check then
+        // finds the diagram already in place
         const prepared = prepareNewDiagram(finalXml, NEW_PAGE)
         const validationError = prepared.ok
-            ? onDisplayChart(prepared.xml, true)
+            ? commit(prepared.xml, toolCall.toolCallId)
             : prepared.error
 
         if (validationError) {
             console.warn("[display_diagram] Validation error:", validationError)
             // Undo the streamed preview, as a failed edit does: the canvas
             // keeps the diagram from before this failed call
-            if (originalXml) onDisplayChart(originalXml, true)
+            if (originalXml) onDisplayChart(originalXml, true, "revert")
             // Return error to model - sendAutomaticallyWhen will trigger retry
             if (DEBUG) {
                 console.log(
@@ -430,7 +461,7 @@ ${finalXml}
         // On failure, undo the streaming preview so the canvas matches the XML
         // reported back to the model
         const restoreOriginal = () => {
-            if (originalXml) onDisplayChart(originalXml, true)
+            if (originalXml) onDisplayChart(originalXml, true, "revert")
         }
         try {
             if (originalXml) {
@@ -442,7 +473,7 @@ ${finalXml}
                     currentXml = cachedXML
                 } else {
                     // Last resort: export from iframe
-                    currentXml = await onFetchChart(false)
+                    currentXml = await onFetchChart()
                 }
             }
 
@@ -470,8 +501,7 @@ Please check the cell IDs and retry.`,
                 return
             }
 
-            onDisplayChart(outcome.xml, true)
-            onExport()
+            commit(outcome.xml, toolCall.toolCallId)
             addToolOutput({
                 tool: "edit_diagram",
                 toolCallId: toolCall.toolCallId,
@@ -561,14 +591,15 @@ Start your continuation with the NEXT character after where it stopped.`,
             // It draws now: it takes the stored originals, as display_diagram
             const originalXml = prepared.ok ? takeOriginals() : undefined
             const validationError = prepared.ok
-                ? onDisplayChart(prepared.xml, true)
+                ? commit(prepared.xml, toolCall.toolCallId)
                 : prepared.error
 
             if (validationError) {
-                // Loading failed: back to the diagram before the previews
-                if (prepared.ok && originalXml) {
-                    onDisplayChart(originalXml, true)
-                }
+                // Loading failed: back to the diagram before the previews,
+                // and before the cut off drawing
+                const before = originalXml ?? continuationOriginalRef.current
+                continuationOriginalRef.current = null
+                if (before) onDisplayChart(before, true, "revert")
                 addToolOutput({
                     tool: "append_diagram",
                     toolCallId: toolCall.toolCallId,
diff --git a/hooks/use-panel-width.ts b/hooks/use-panel-width.ts
new file mode 100644
index 00000000..e3dbc710
--- /dev/null
+++ b/hooks/use-panel-width.ts
@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react"
+import { PANEL_MIN_WIDTH, useSettingsStore } from "@/stores/settings-store"
+
+// Room the canvas keeps next to the chat panel in a small window
+const MIN_CANVAS_WIDTH = 400
+
+/** The chat panel's width, narrower when the window has no room for it */
+export function usePanelWidth(): number {
+    const width = useSettingsStore((s) => s.panelWidth)
+    // Set after mounting, so the server render and the first one agree
+    const [windowWidth, setWindowWidth] = useState(Number.POSITIVE_INFINITY)
+    useEffect(() => {
+        const update = () => setWindowWidth(window.innerWidth)
+        update()
+        window.addEventListener("resize", update)
+        return () => window.removeEventListener("resize", update)
+    }, [])
+    return Math.max(
+        PANEL_MIN_WIDTH,
+        Math.min(width, windowWidth - MIN_CANVAS_WIDTH),
+    )
+}
diff --git a/hooks/use-session-manager.ts b/hooks/use-session-manager.ts
index e950644a..25596812 100644
--- a/hooks/use-session-manager.ts
+++ b/hooks/use-session-manager.ts
@@ -14,18 +14,32 @@ import {
     isIndexedDBAvailable,
     migrateFromLocalStorage,
     readSessionCount,
+    renameSession as renameSessionInDB,
     type SessionMetadata,
     type StoredMessage,
     saveSession,
 } from "@/lib/session-storage"
 import { STORAGE_KEYS } from "@/lib/storage"
+import {
+    type DiagramVersion,
+    versionsFromLegacyHistory,
+} from "@/stores/versions-store"
 
 export interface SessionData {
     messages: StoredMessage[]
     xmlSnapshots: [number, string][]
     diagramXml: string
     thumbnailDataUrl?: string
-    diagramHistory?: { svg: string; xml: string }[]
+    versions?: DiagramVersion[]
+    /** Title for a session created by this save (default: first message) */
+    title?: string
+}
+
+/** Versions of a stored session, converting the old history format */
+export function getSessionVersions(
+    session: Pick<ChatSession, "versions" | "diagramHistory">,
+): DiagramVersion[] {
+    return session.versions ?? versionsFromLegacyHistory(session.diagramHistory)
 }
 
 // Taken right before a save's data is read: the chat on screen then, and
@@ -57,7 +71,10 @@ export interface UseSessionManagerReturn {
     refreshSessions: () => Promise<void>
     clearCurrentSession: () => void
     getChatGeneration: () => number
+    /** The chat on screen now, also right after a save created it */
+    getCurrentSessionId: () => string | null
     getSaveTicket: () => SaveTicket
+    renameSession: (id: string, title: string) => Promise<void>
 }
 
 // Reading the session list loads every stored session in full, and window
@@ -267,7 +284,7 @@ export function useSessionManager(
                 xmlSnapshots: session.xmlSnapshots,
                 diagramXml: session.diagramXml,
                 thumbnailDataUrl: session.thumbnailDataUrl,
-                diagramHistory: session.diagramHistory,
+                versions: getSessionVersions(session),
             }
         },
         [currentSessionId, changeChat],
@@ -319,8 +336,8 @@ export function useSessionManager(
                         xmlSnapshots: data.xmlSnapshots,
                         diagramXml: data.diagramXml,
                         thumbnailDataUrl: data.thumbnailDataUrl,
-                        diagramHistory: data.diagramHistory,
-                        title: extractTitle(data.messages),
+                        versions: data.versions,
+                        title: data.title || extractTitle(data.messages),
                     }
                     // Without a stored session, keep no session id (it would end
                     // up in the URL and point to nothing after a reload)
@@ -348,8 +365,9 @@ export function useSessionManager(
                     thumbnailDataUrl:
                         data.thumbnailDataUrl ??
                         currentSession.thumbnailDataUrl,
-                    diagramHistory:
-                        data.diagramHistory ?? currentSession.diagramHistory,
+                    versions:
+                        data.versions ?? getSessionVersions(currentSession),
+                    diagramHistory: undefined,
                     updatedAt: Date.now(),
                     // Update title if it's still default and we have messages
                     title:
@@ -403,6 +421,10 @@ export function useSessionManager(
     }, [changeChat])
 
     const getChatGeneration = useCallback(() => chatGenerationRef.current, [])
+    const getCurrentSessionId = useCallback(
+        () => currentSessionRef.current?.id ?? null,
+        [],
+    )
 
     const getSaveTicket = useCallback(
         (): SaveTicket => ({
@@ -412,6 +434,36 @@ export function useSessionManager(
         [],
     )
 
+    const renameSession = useCallback(
+        (id: string, title: string): Promise<void> => {
+            const trimmed = title.trim().slice(0, 100)
+            if (!trimmed) return Promise.resolve()
+            // In the save queue, so a save running now cannot put the old
+            // title back
+            const run = async () => {
+                const updated = await renameSessionInDB(id, trimmed)
+                if (!updated) {
+                    notifySaveFailed(dict.errors.sessionSaveFailed)
+                    return
+                }
+                const current = currentSessionRef.current
+                if (current?.id === id) {
+                    currentSessionRef.current = { ...current, title: trimmed }
+                    setCurrentSession(currentSessionRef.current)
+                }
+                setSessions((prev) =>
+                    prev.map((s) =>
+                        s.id === id ? { ...s, title: trimmed } : s,
+                    ),
+                )
+            }
+            const result = saveQueueRef.current.then(run)
+            saveQueueRef.current = result.catch(() => {})
+            return result
+        },
+        [dict],
+    )
+
     return {
         sessions,
         currentSessionId,
@@ -424,6 +476,8 @@ export function useSessionManager(
         refreshSessions,
         clearCurrentSession,
         getChatGeneration,
+        getCurrentSessionId,
         getSaveTicket,
+        renameSession,
     }
 }
diff --git a/lib/chat-helpers.ts b/lib/chat-helpers.ts
index ddd8a730..cee68773 100644
--- a/lib/chat-helpers.ts
+++ b/lib/chat-helpers.ts
@@ -133,3 +133,37 @@ export function fixToolInputJson(input: string): string {
             .replace(/"(\w+)"\s*=\s*"/g, '"$1": "')
     )
 }
+
+// Shapes the user selected on the canvas; sent with the request as
+// selectedCells: [{ id, label }]
+const MAX_SELECTED_CELLS = 50
+const MAX_SELECTED_TEXT = 100
+
+function cleanSelectionText(value: unknown): string {
+    if (typeof value !== "string") return ""
+    return value
+        .replace(/[\r\n"]+/g, " ")
+        .trim()
+        .slice(0, MAX_SELECTED_TEXT)
+}
+
+/** Prompt text describing the selection, or "" when there is none */
+export function formatSelectionContext(selectedCells: unknown): string {
+    if (!Array.isArray(selectedCells)) return ""
+    const lines = selectedCells
+        .slice(0, MAX_SELECTED_CELLS)
+        .map((cell) => {
+            const id = cleanSelectionText(cell?.id)
+            if (!id) return null
+            const label = cleanSelectionText(cell?.label)
+            return label ? `- id="${id}" (${label})` : `- id="${id}"`
+        })
+        .filter((line): line is string => line !== null)
+    if (lines.length === 0) return ""
+    // Past the limit the model must know the list is cut short
+    const more = selectedCells.length - MAX_SELECTED_CELLS
+    if (more > 0) lines.push(`- and ${more} more selected shapes not listed`)
+    return `The user selected these shapes on the canvas before sending this message:
+${lines.join("\n")}
+Apply the request to the selected shapes unless it clearly asks for something else. Prefer edit_diagram with these cell ids over redrawing the whole diagram.`
+}
diff --git a/lib/chat-request.ts b/lib/chat-request.ts
new file mode 100644
index 00000000..e0f8bf45
--- /dev/null
+++ b/lib/chat-request.ts
@@ -0,0 +1,37 @@
+import type { getSelectedAIConfig } from "@/hooks/use-model-config"
+
+type AIConfig = ReturnType<typeof getSelectedAIConfig>
+
+/**
+ * Request headers for /api/chat: the access code, the user's own provider
+ * credentials (when a client-side model is selected) and per-request options.
+ */
+export function buildChatHeaders(
+    config: AIConfig,
+    options: { minimalStyle: boolean; maxOutputTokens: string },
+): Record<string, string> {
+    const headers: Record<string, string> = {
+        "x-access-code": config.accessCode,
+    }
+    const set = (name: string, value: string | undefined) => {
+        if (value) headers[name] = value
+    }
+    if (config.aiProvider) {
+        set("x-ai-provider", config.aiProvider)
+        set("x-ai-base-url", config.aiBaseUrl)
+        set("x-ai-api-key", config.aiApiKey)
+        set("x-ai-model", config.aiModel)
+        // AWS Bedrock credentials
+        set("x-aws-access-key-id", config.awsAccessKeyId)
+        set("x-aws-secret-access-key", config.awsSecretAccessKey)
+        set("x-aws-region", config.awsRegion)
+        set("x-aws-session-token", config.awsSessionToken)
+        // Vertex AI credentials (Express Mode)
+        set("x-vertex-api-key", config.vertexApiKey)
+    }
+    // Selected model ID for server model lookup (apiKeyEnv/baseUrlEnv)
+    set("x-selected-model-id", config.selectedModelId)
+    if (options.minimalStyle) headers["x-minimal-style"] = "true"
+    set("x-max-output-tokens", options.maxOutputTokens)
+    return headers
+}
diff --git a/lib/clipboard.ts b/lib/clipboard.ts
new file mode 100644
index 00000000..8afbb06b
--- /dev/null
+++ b/lib/clipboard.ts
@@ -0,0 +1,36 @@
+import { useState } from "react"
+
+/** Copy text, falling back to execCommand for non-secure contexts (HTTP) */
+export async function copyText(text: string): Promise<boolean> {
+    try {
+        await navigator.clipboard.writeText(text)
+        return true
+    } catch {
+        const textarea = document.createElement("textarea")
+        textarea.value = text
+        textarea.style.position = "fixed"
+        textarea.style.left = "-9999px"
+        textarea.style.opacity = "0"
+        document.body.appendChild(textarea)
+        try {
+            textarea.select()
+            return document.execCommand("copy")
+        } catch {
+            return false
+        } finally {
+            document.body.removeChild(textarea)
+        }
+    }
+}
+
+/** Copy text and show "copied" for a moment; onFail runs when it failed */
+export function useCopy(onFail?: () => void) {
+    const [copied, setCopied] = useState(false)
+    const copy = async (text: string) => {
+        const ok = await copyText(text)
+        if (!ok) onFail?.()
+        setCopied(ok)
+        setTimeout(() => setCopied(false), 1500)
+    }
+    return { copied, copy }
+}
diff --git a/lib/diagram-diff.ts b/lib/diagram-diff.ts
new file mode 100644
index 00000000..867ab5f3
--- /dev/null
+++ b/lib/diagram-diff.ts
@@ -0,0 +1,273 @@
+import { decompressPageContent } from "@/packages/mcp-server/src/load-diagram.ts"
+
+/** What changed on the first page between two versions of a diagram */
+export interface ChangeSummary {
+    shapesAdded: number
+    shapesRemoved: number
+    shapesChanged: number
+    edgesAdded: number
+    edgesRemoved: number
+    edgesChanged: number
+}
+
+export interface DiagramDiff {
+    summary: ChangeSummary
+    /** Ids of cells that were added or changed (for highlighting) */
+    touchedIds: string[]
+    /** The diagram before had no shapes or connectors */
+    fromScratch: boolean
+}
+
+export const EMPTY_SUMMARY: ChangeSummary = {
+    shapesAdded: 0,
+    shapesRemoved: 0,
+    shapesChanged: 0,
+    edgesAdded: 0,
+    edgesRemoved: 0,
+    edgesChanged: 0,
+}
+
+interface CellInfo {
+    isEdge: boolean
+    signature: string
+}
+
+/** A page's mxGraphModel element, inflated when the page is compressed */
+function modelOfPage(diagram: Element): Element | null {
+    const model = diagram.querySelector("mxGraphModel")
+    if (model) return model
+    const inflated = decompressPageContent(diagram.textContent || "")
+    if (!inflated) return null
+    const inner = new DOMParser().parseFromString(inflated, "text/xml")
+    return inner.querySelector("mxGraphModel")
+}
+
+function parse(xml: string): Document | null {
+    if (!xml?.trim()) return null
+    const doc = new DOMParser().parseFromString(xml, "text/xml")
+    return doc.querySelector("parsererror") ? null : doc
+}
+
+/** The first page's mxGraphModel element, whatever wrapper the XML has */
+function firstPageModel(xml: string): Element | null {
+    const doc = parse(xml)
+    if (!doc) return null
+    const diagram = doc.querySelector("diagram")
+    if (diagram) return modelOfPage(diagram)
+    return doc.querySelector("mxGraphModel") ?? doc.documentElement
+}
+
+// Values draw.io leaves out when it saves: the model may write them
+const DEFAULT_VALUES: Record<string, Record<string, string>> = {
+    mxCell: {
+        vertex: "0",
+        edge: "0",
+        connectable: "1",
+        visible: "1",
+        collapsed: "0",
+        style: "",
+    },
+    mxGeometry: { x: "0", y: "0", width: "0", height: "0", relative: "0" },
+    mxPoint: { x: "0", y: "0" },
+}
+// Numbers draw.io writes back in their shortest form ("40.0" is "40")
+const NUMBERS = new Set(["x", "y", "width", "height"])
+
+/** A style as draw.io reads it: named styles in order, a later key wins */
+function normalStyle(style: string): string {
+    const named: string[] = []
+    const keys = new Map<string, string>()
+    for (const entry of style.split(";").map((e) => e.trim())) {
+        if (!entry) continue
+        const eq = entry.indexOf("=")
+        if (eq < 0) named.push(entry)
+        else keys.set(entry.slice(0, eq), entry.slice(eq + 1))
+    }
+    const pairs = [...keys].map(([k, v]) => `${k}=${v}`).sort()
+    return [...named, ...pairs].join(";")
+}
+
+/**
+ * What a cell is, independent of how the XML was written: the same cell
+ * saved by draw.io and written by the model can order attributes and style
+ * entries differently, and draw.io drops values that are the default
+ */
+function signatureOf(node: Element): string {
+    const defaults = DEFAULT_VALUES[node.tagName] ?? {}
+    const attrs = Array.from(node.attributes)
+        .flatMap((a) => {
+            let value = a.value
+            if (a.name === "style") value = normalStyle(value)
+            else if (NUMBERS.has(a.name) && value.trim() !== "") {
+                const n = Number(value)
+                if (Number.isFinite(n)) value = String(n)
+            }
+            if (defaults[a.name] === value) return []
+            return [`${a.name}=${value}`]
+        })
+        .sort()
+    const children = Array.from(node.children).map(signatureOf)
+    return `<${node.tagName} ${attrs.join(" ")}>${children.join("")}</>`
+}
+
+/** The cells of a page, layers included, with the element that holds each */
+function cellsIn(model: Element | null) {
+    if (!model) return []
+    return Array.from(model.getElementsByTagName("mxCell")).flatMap((cell) => {
+        // Cells with links or custom data are wrapped; the wrapper holds the id
+        const wrapper = cell.parentElement
+        const isWrapped =
+            wrapper?.tagName === "object" || wrapper?.tagName === "UserObject"
+        const id = cell.getAttribute("id") || wrapper?.getAttribute("id")
+        if (!id) return []
+        return [{ id, cell, node: isWrapped && wrapper ? wrapper : cell }]
+    })
+}
+
+/** Shapes and connectors of the first page */
+function collectCells(xml: string): Map<string, CellInfo> {
+    const cells = new Map<string, CellInfo>()
+    for (const { id, cell, node } of cellsIn(firstPageModel(xml))) {
+        if (id === "0" || id === "1") continue
+        cells.set(id, {
+            isEdge: cell.getAttribute("edge") === "1",
+            signature: signatureOf(node),
+        })
+    }
+    return cells
+}
+
+export function diffDiagrams(beforeXml: string, afterXml: string): DiagramDiff {
+    const before = collectCells(beforeXml)
+    const after = collectCells(afterXml)
+    const summary: ChangeSummary = { ...EMPTY_SUMMARY }
+    const touchedIds: string[] = []
+
+    for (const [id, cell] of after) {
+        const old = before.get(id)
+        if (!old) {
+            touchedIds.push(id)
+            if (cell.isEdge) summary.edgesAdded++
+            else summary.shapesAdded++
+        } else if (old.signature !== cell.signature) {
+            touchedIds.push(id)
+            if (cell.isEdge) summary.edgesChanged++
+            else summary.shapesChanged++
+        }
+    }
+    for (const [id, cell] of before) {
+        if (after.has(id)) continue
+        if (cell.isEdge) summary.edgesRemoved++
+        else summary.shapesRemoved++
+    }
+    return { summary, touchedIds, fromScratch: before.size === 0 }
+}
+
+// Where the view was scrolled to, saved with the page; not a change
+const VIEW_ATTRIBUTES = new Set(["dx", "dy"])
+
+// A page setting written on one side only is draw.io's default being
+// filled in when the other side has that default; an empty list: any value
+// is a change. Settings not listed are not compared then.
+const PAGE_DEFAULTS: Record<string, string[]> = {
+    background: ["none"],
+    backgroundImage: [],
+    extFonts: [],
+    math: ["0"],
+    shadow: ["0"],
+    page: ["1"],
+    pageScale: ["1"],
+    // Letter or A4, after the browser's language
+    pageWidth: ["850", "827"],
+    pageHeight: ["1100", "1169"],
+    grid: ["1"],
+    gridSize: ["10"],
+    guides: ["1"],
+    tooltips: ["1"],
+    connect: ["1"],
+    arrows: ["1"],
+    fold: ["1"],
+}
+
+function samePageSettings(a: Element, b: Element): boolean {
+    const names = new Set(
+        [...Array.from(a.attributes), ...Array.from(b.attributes)].map(
+            (attr) => attr.name,
+        ),
+    )
+    for (const name of names) {
+        if (VIEW_ATTRIBUTES.has(name)) continue
+        const va = a.getAttribute(name)
+        const vb = b.getAttribute(name)
+        if (va !== null && vb !== null) {
+            if (va !== vb) return false
+            continue
+        }
+        const defaults = PAGE_DEFAULTS[name]
+        if (defaults && !defaults.includes((va ?? vb) as string)) return false
+    }
+    return true
+}
+
+/**
+ * Every cell of a page, layers included, and the order of each parent's
+ * children (which shape is in front)
+ */
+function contentOf(model: Element | null) {
+    const cells = new Map<string, string>()
+    const children = new Map<string, string[]>()
+    for (const { id, cell, node } of cellsIn(model)) {
+        cells.set(id, signatureOf(node))
+        const parent = cell.getAttribute("parent") ?? ""
+        children.set(parent, [...(children.get(parent) ?? []), id])
+    }
+    return { cells, children }
+}
+
+function sameContent(a: Element | null, b: Element | null): boolean {
+    const ca = contentOf(a)
+    const cb = contentOf(b)
+    if (ca.cells.size !== cb.cells.size) return false
+    for (const [id, signature] of ca.cells) {
+        if (cb.cells.get(id) !== signature) return false
+    }
+    for (const [parent, ids] of ca.children) {
+        if (cb.children.get(parent)?.join("\n") !== ids.join("\n")) {
+            return false
+        }
+    }
+    return true
+}
+
+/**
+ * Whether two documents hold the same pages (names, cells, their order)
+ * and page settings
+ */
+export function isSameDocument(a: string, b: string): boolean {
+    const pagesOf = (xml: string) => {
+        const doc = parse(xml)
+        if (!doc) return null
+        const diagrams = Array.from(doc.getElementsByTagName("diagram"))
+        if (diagrams.length === 0) {
+            return [{ name: null, model: doc.querySelector("mxGraphModel") }]
+        }
+        return diagrams.map((d) => ({
+            name: d.getAttribute("name"),
+            model: modelOfPage(d),
+        }))
+    }
+    const pagesA = pagesOf(a)
+    const pagesB = pagesOf(b)
+    if (!pagesA || !pagesB) return a === b
+    if (pagesA.length !== pagesB.length) return false
+    return pagesA.every((pageA, i) => {
+        const pageB = pagesB[i]
+        if (pageA.name !== null && pageB.name !== null) {
+            if (pageA.name !== pageB.name) return false
+        }
+        if (pageA.model && pageB.model) {
+            if (!samePageSettings(pageA.model, pageB.model)) return false
+        }
+        return sameContent(pageA.model, pageB.model)
+    })
+}
diff --git a/lib/drawio-themes.ts b/lib/drawio-themes.ts
deleted file mode 100644
index 7eac1a65..00000000
--- a/lib/drawio-themes.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export const DRAWIO_THEMES = [
-    "kennedy",
-    "atlas",
-    "dark",
-    "min",
-    "sketch",
-    "simple",
-] as const
-
-export type DrawioTheme = (typeof DRAWIO_THEMES)[number]
-
-export function isDrawioTheme(value: unknown): value is DrawioTheme {
-    return (
-        typeof value === "string" &&
-        (DRAWIO_THEMES as readonly string[]).includes(value)
-    )
-}
diff --git a/lib/drawio/drawio-config.ts b/lib/drawio/drawio-config.ts
new file mode 100644
index 00000000..ef34925f
--- /dev/null
+++ b/lib/drawio/drawio-config.ts
@@ -0,0 +1,116 @@
+import { getAssetUrl } from "@/lib/base-path"
+import type { Locale } from "@/lib/i18n/config"
+import { BLANK_MXFILE } from "@/packages/mcp-server/src/pages.ts"
+
+/** External draw.io configured at build time (cross-origin, limited features) */
+const EXTERNAL_DRAWIO_URL = process.env.NEXT_PUBLIC_DRAWIO_BASE_URL || ""
+
+/**
+ * URL of the draw.io editor iframe. By default this is the copy bundled in
+ * public/drawio, served from our own origin.
+ */
+export function getDrawioSrc({
+    lang,
+    isElectron,
+}: {
+    lang: Locale
+    isElectron: boolean
+}): string {
+    // index.html: Next.js does not serve directory indexes
+    const base =
+        EXTERNAL_DRAWIO_URL ||
+        `${window.location.origin}${getAssetUrl("/drawio/index.html")}`
+    const url = new URL(base)
+    const params: Record<string, string> = {
+        embed: "1",
+        proto: "json",
+        configure: "1",
+        ui: "simple",
+        spin: "0",
+        libraries: "0",
+        noSaveBtn: "1",
+        noExitBtn: "1",
+        saveAndExit: "0",
+        // The diagram always renders on a light sheet; dark mode only
+        // recolors the table around it
+        dark: "0",
+        // draw.io names Traditional Chinese "zh-tw"
+        lang: lang === "zh-Hant" ? "zh-tw" : lang,
+    }
+    // No calls to external services from the desktop app
+    if (isElectron && !EXTERNAL_DRAWIO_URL) params.offline = "1"
+    for (const [key, value] of Object.entries(params)) {
+        url.searchParams.set(key, value)
+    }
+    return url.toString()
+}
+
+/**
+ * Show the page (a white sheet with a grid) unless the diagram says
+ * otherwise. AI output usually has a bare <mxGraphModel>, and draw.io's
+ * simple UI would then show neither page nor grid.
+ */
+export function withPageDefaults(xml: string): string {
+    return xml.replace(
+        /<mxGraphModel\b([^>]*?)(\/?)>/g,
+        (_match, attrs, slash) => {
+            let next = attrs as string
+            if (!/\spage\s*=/.test(next)) next += ' page="1"'
+            if (!/\sgrid\s*=/.test(next)) next += ' grid="1"'
+            if (!/\sgridSize\s*=/.test(next)) next += ' gridSize="10"'
+            return `<mxGraphModel${next}${slash}>`
+        },
+    )
+}
+
+/** Empty document loaded when draw.io starts */
+export const EMPTY_DRAWIO_DOCUMENT = withPageDefaults(BLANK_MXFILE)
+
+/**
+ * Editor defaults sent with draw.io's configure message. The simple UI turns
+ * page view off for new diagrams; keep the white page on the canvas, as in
+ * the classic UI.
+ */
+export const DRAWIO_CONFIG = {
+    defaultPageVisible: true,
+    defaultGridEnabled: true,
+}
+
+/**
+ * CSS injected into draw.io. `customChrome` hides draw.io's own toolbar and
+ * page tabs because the app draws its own over the canvas.
+ */
+export function getDrawioCss({
+    dark,
+    customChrome,
+}: {
+    dark: boolean
+    customChrome: boolean
+}): string {
+    const workspace = dark ? "#0f2440" : "#f4f5f7"
+    // draw.io itself stays light, so its focus color does too
+    const accent = "#14181d"
+    let css = `
+:root {
+    --workspace-color: ${workspace};
+    --focus-color: ${accent};
+}
+.geDiagramContainer { background-color: ${workspace}; }
+.geBackgroundPage { box-shadow: 0 1px 2px rgba(20,24,29,.08), 0 12px 32px -12px rgba(20,24,29,${dark ? ".5" : ".18"}) !important; }
+`
+    if (customChrome) {
+        css += `
+.geSimpleMainMenu, .geTabContainer, .geFooterContainer, .geStatus,
+body > .geToolbarContainer, .geHsplit,
+.geSidebarContainer:not(.geFormatContainer) { display: none !important; }
+.geDiagramContainer { top: 0 !important; bottom: 0 !important; left: 0 !important; border: 0 !important; }
+.geFormatContainer { top: 64px !important; bottom: 64px !important; border-radius: 14px 0 0 14px; box-shadow: 0 10px 30px -8px rgba(20,24,29,.2); border: 0 !important; }
+body.nai-shapes-open .geSidebarContainer:not(.geFormatContainer) { display: block !important; top: 64px !important; bottom: 64px !important; left: 12px !important; width: 248px !important; transform: none !important; border-radius: 14px; box-shadow: 0 10px 30px -8px rgba(20,24,29,.2); border: 0 !important; z-index: 3; }
+`
+    } else {
+        css += `
+.geSimpleMainMenu { border-bottom: 1px solid #e4e7eb !important; box-shadow: none !important; }
+`
+    }
+    return css
+}
diff --git a/lib/drawio/editor-bridge.ts b/lib/drawio/editor-bridge.ts
new file mode 100644
index 00000000..b7d08523
--- /dev/null
+++ b/lib/drawio/editor-bridge.ts
@@ -0,0 +1,745 @@
+/**
+ * Direct access to the draw.io editor running in our same-origin iframe.
+ *
+ * draw.io has no public JavaScript API for embedders; everything here uses
+ * its internal objects (EditorUi, mxGraph). Every call checks that what it
+ * needs exists, so a draw.io update that renames something turns the feature
+ * off (with a console warning) instead of breaking the page.
+ *
+ * With an external draw.io (cross-origin) none of this is available and the
+ * app uses the postMessage protocol only.
+ */
+import { hasCells } from "@/packages/mcp-server/src/pages.ts"
+import { type SelectedCell, useCanvasStore } from "@/stores/canvas-store"
+
+type EditorUi = any
+type FrameWindow = any
+
+let ui: EditorUi | null = null
+let win: FrameWindow | null = null
+let frameElement: HTMLIFrameElement | null = null
+let detachListeners: (() => void) | null = null
+const warned = new Set<string>()
+// Keyboard shortcuts of the app that must also work while focus is inside
+// the draw.io iframe (keydown events there never reach our window)
+let appShortcutHandler: ((event: KeyboardEvent) => boolean) | null = null
+
+/** The handler returns true when it handled the key */
+export function setAppShortcutHandler(
+    handler: ((event: KeyboardEvent) => boolean) | null,
+) {
+    appShortcutHandler = handler
+}
+
+function warnOnce(key: string, message: string) {
+    if (warned.has(key)) return
+    warned.add(key)
+    console.warn(`[drawio] ${message}`)
+}
+
+export function attachEditor(
+    editorUi: EditorUi,
+    frameWindow: FrameWindow,
+    frame: HTMLIFrameElement,
+) {
+    if (ui === editorUi) return
+    detachEditor()
+    ui = editorUi
+    win = frameWindow
+    frameElement = frame
+    detachListeners = installListeners()
+    keepPanelsOnResize()
+    closeSidePanels()
+    softenGrid()
+    useCanvasStore.getState().set({ hasEditor: true })
+    syncAll()
+}
+
+// draw.io's simple UI opens or closes its format panel and shape library
+// when its window crosses a width; the app's toolbar opens them, so a
+// resize (the chat panel sliding, a narrow window) must leave them alone.
+// windowResized only toggles them when it knows the previous width.
+function keepPanelsOnResize() {
+    const original = ui?.windowResized
+    if (typeof original !== "function" || original.naiWrapped) return
+    const wrapped = function (this: any, ...args: unknown[]) {
+        this.lastWindowWidth = null
+        return original.apply(this, args)
+    }
+    wrapped.naiWrapped = true
+    ui.windowResized = wrapped
+}
+
+// draw.io's grid (#e6e6e6 every 10 px) is busy behind pale shapes
+function softenGrid() {
+    const view = graph()?.view
+    if (!view) return
+    try {
+        view.gridColor = "#eceef1"
+        view.validateBackground()
+    } catch {
+        // ignore
+    }
+}
+
+// draw.io opens its format panel (and sometimes the shape library) on start;
+// the app opens them on demand from its own toolbar
+function closeSidePanels() {
+    try {
+        if (isFormatPanelOpen()) ui.actions?.get?.("format")?.funct()
+    } catch {
+        // ignore
+    }
+    try {
+        if (ui.sidebarWindow?.window?.isVisible?.()) {
+            ui.sidebarWindow.window.setVisible(false)
+        }
+    } catch {
+        // ignore
+    }
+}
+
+export function detachEditor() {
+    detachListeners?.()
+    detachListeners = null
+    clearHighlights()
+    ui = null
+    win = null
+    frameElement = null
+    previewBase = null
+    useCanvasStore.getState().set({
+        hasEditor: false,
+        selection: [],
+        selectionRect: null,
+        canUndo: false,
+        canRedo: false,
+    })
+}
+
+function graph() {
+    return ui?.editor?.graph ?? null
+}
+
+// ---------------------------------------------------------------------------
+// Actions (used by the toolbar)
+// ---------------------------------------------------------------------------
+
+export function hasAction(name: string): boolean {
+    if (!ui) return false
+    const action = ui.actions?.get?.(name)
+    if (!action) {
+        warnOnce(`action:${name}`, `Action "${name}" not found, hiding it`)
+        return false
+    }
+    return true
+}
+
+// Actions that open a dialog or start text editing, which takes the focus
+const FOCUS_TAKING_ACTIONS = new Set([
+    "findReplace",
+    "editDiagram",
+    "insertImage",
+    "insertLink",
+    "print",
+    "insertText",
+])
+
+export function runAction(name: string) {
+    const action = ui?.actions?.get?.(name)
+    if (!action) return
+    try {
+        action.funct()
+    } catch (error) {
+        console.warn(`[drawio] Action "${name}" failed:`, error)
+    }
+    // The app's buttons are outside the frame: keys go to draw.io again
+    if (!FOCUS_TAKING_ACTIONS.has(name)) focusCanvas()
+    // Some actions change state without firing an event we listen to
+    setTimeout(syncAll, 0)
+}
+
+/**
+ * For the app's menus: when their item handed the focus to draw.io (its
+ * dialog or the canvas), closing the menu must not take it back
+ */
+export function keepFocusInCanvas(event: Event) {
+    if (frameElement && document.activeElement === frameElement) {
+        event.preventDefault()
+    }
+}
+
+/** Whether the grid and the page view are on (for the menu's check marks) */
+export function viewToggles(): { grid: boolean; pageView: boolean } {
+    const g = graph()
+    return { grid: !!g?.isGridEnabled?.(), pageView: !!g?.pageVisible }
+}
+
+export function focusCanvas() {
+    try {
+        frameElement?.focus()
+        graph()?.container?.focus()
+    } catch {
+        // ignore
+    }
+}
+
+export function stopFreehand() {
+    const freehand = graph()?.freehand
+    if (freehand?.isDrawing?.()) freehand.stopDrawing()
+    syncAll()
+}
+
+// ---------------------------------------------------------------------------
+// Replacing the diagram (AI changes)
+// ---------------------------------------------------------------------------
+
+// Diagram before the current AI turn started streaming. Previews are applied
+// without undo history; the final result replaces this base as one undo step.
+let previewBase: string | null = null
+
+function currentFileXml(): string | null {
+    try {
+        const node = ui.getXmlFileData(null, null, true)
+        return win.mxUtils.getXml(node)
+    } catch {
+        return null
+    }
+}
+
+function withoutUndo(fn: () => void) {
+    const manager = ui?.editor?.undoManager
+    if (!manager?.undoableEditHappened) {
+        fn()
+        return
+    }
+    const original = manager.undoableEditHappened
+    manager.undoableEditHappened = () => {}
+    try {
+        fn()
+    } finally {
+        manager.undoableEditHappened = original
+    }
+}
+
+/**
+ * replaceDiagramData replaces the current page with one <mxGraphModel>. Only
+ * single-page documents qualify; multi-page ones fall back to a full load.
+ */
+function toSinglePageModel(xml: string): string | null {
+    const doc = new DOMParser().parseFromString(xml, "text/xml")
+    if (doc.querySelector("parsererror")) return null
+    const root = doc.documentElement
+    if (root.nodeName === "mxGraphModel") return xml
+    if (root.nodeName !== "mxfile") return null
+    const diagrams = root.getElementsByTagName("diagram")
+    if (diagrams.length !== 1) return null
+    const model = diagrams[0].getElementsByTagName("mxGraphModel")[0]
+    if (model) return new XMLSerializer().serializeToString(model)
+    // Compressed page
+    try {
+        const text = diagrams[0].textContent?.trim()
+        const inflated = text ? win?.Graph?.decompress?.(text) : null
+        return typeof inflated === "string" &&
+            inflated.includes("<mxGraphModel")
+            ? inflated
+            : null
+    } catch {
+        return null
+    }
+}
+
+function replace(xml: string) {
+    const model = toSinglePageModel(xml)
+    if (!model || typeof ui?.replaceDiagramData !== "function") {
+        throw new Error("Diagram can't be replaced in place")
+    }
+    ui.replaceDiagramData(model)
+}
+
+function isEmptyModel(): boolean {
+    const g = graph()
+    if (!g) return true
+    const root = g.model.getRoot()
+    const layer = root ? g.model.getChildAt(root, 0) : null
+    return !layer || g.model.getChildCount(layer) === 0
+}
+
+// Page settings draw.io applies on a full load only: replacing the page in
+// place keeps the old ones
+const LOAD_ONLY_SETTINGS =
+    /<mxGraphModel\b[^>]*\s(?:backgroundImage=|extFonts=|math="1"|shadow="1")/
+
+function canvasHasLoadOnlySettings(): boolean {
+    const g = graph()
+    return (
+        !!g &&
+        (!!g.backgroundImage ||
+            !!g.mathEnabled ||
+            !!g.shadowVisible ||
+            (g.extFonts?.length ?? 0) > 0)
+    )
+}
+
+/** Can this diagram go through the editor (with undo) instead of a full load? */
+export function canReplaceDiagram(xml: string): boolean {
+    if (!ui) return false
+    if (typeof ui.replaceDiagramData !== "function") {
+        warnOnce("replace", "replaceDiagramData not found, using full loads")
+        return false
+    }
+    // A document with them, or replacing one with them, loads in full
+    if (LOAD_ONLY_SETTINGS.test(xml) || canvasHasLoadOnlySettings()) {
+        return false
+    }
+    const pageCount = Array.isArray(ui.pages) ? ui.pages.length : 1
+    return pageCount <= 1 && toSinglePageModel(xml) !== null
+}
+
+/** Show a streaming preview without touching the undo history */
+export function previewDiagram(xml: string) {
+    if (previewBase === null) previewBase = currentFileXml() ?? ""
+    const wasEmpty = isEmptyModel()
+    withoutUndo(() => replace(xml))
+    if (wasEmpty) fitDiagram()
+}
+
+/** Name of the page in a single-page mxfile, if it has one */
+function pageName(xml: string): string | null {
+    const doc = new DOMParser().parseFromString(xml, "text/xml")
+    if (doc.documentElement?.nodeName !== "mxfile") return null
+    return doc.getElementsByTagName("diagram")[0]?.getAttribute("name") || null
+}
+
+/**
+ * Apply the final AI result (or a restored version) as a single undo step,
+ * page name included. The view is fitted only when the canvas was empty, so
+ * a restore keeps the user's zoom.
+ */
+export function commitDiagram(xml: string) {
+    const wasEmpty =
+        isEmptyModel() || (previewBase !== null && !hasCells(previewBase))
+    if (previewBase !== null) {
+        const base = previewBase
+        previewBase = null
+        // Undo then goes back to the diagram before streaming started
+        if (base && toSinglePageModel(base)) withoutUndo(() => replace(base))
+    }
+    const model = graph()?.model
+    const name = pageName(xml)
+    const page = ui?.currentPage
+    model?.beginUpdate()
+    try {
+        replace(xml)
+        if (name && page && win?.RenamePage && page.getName?.() !== name) {
+            model.execute(new win.RenamePage(ui, page, name))
+        }
+    } finally {
+        model?.endUpdate()
+    }
+    if (wasEmpty) fitDiagram()
+}
+
+/** Throw away the preview and go back to the given diagram */
+export function revertPreview(targetXml: string) {
+    previewBase = null
+    withoutUndo(() => replace(targetXml))
+}
+
+/** Forget the preview base (new user turn) without changing the canvas */
+export function resetPreview() {
+    previewBase = null
+}
+
+// When the app last fitted the diagram on its own; a canvas resize right
+// after (the chat panel sliding in) fits again, unless the user zoomed since
+let lastAutoFitAt = 0
+
+// True while fitDiagram runs: its own zoom change is not the user's
+let fitting = false
+
+/** The zoom changed: if the user did it, a later resize keeps their view */
+function zoomChanged() {
+    if (!fitting) lastAutoFitAt = 0
+}
+
+/** Fit again if the last automatic fit just happened (layout still moving) */
+export function refitIfRecent(windowMs = 1500) {
+    if (Date.now() - lastAutoFitAt < windowMs) {
+        fitDiagram()
+        return true
+    }
+    return false
+}
+
+// Room around a fitted diagram: the app's toolbar sits over the top of the
+// canvas and the page tabs over the bottom (half of this on each side)
+const FIT_BORDER = 128
+
+/**
+ * Fit the shapes (not the whole page) into the canvas, at most at 100%,
+ * clear of the toolbar and the page tabs
+ */
+export function fitDiagram() {
+    const g = graph()
+    if (!g) return
+    fitting = true
+    try {
+        const b = g.getGraphBounds()
+        const { scale, translate } = g.view
+        if (b && b.width > 0 && b.height > 0 && win?.mxRectangle) {
+            const model = new win.mxRectangle(
+                b.x / scale - translate.x,
+                b.y / scale - translate.y,
+                b.width / scale,
+                b.height / scale,
+            )
+            g.fitWindow(model, FIT_BORDER, 1)
+        } else if (ui?.actions?.get?.("fitWindow")) {
+            ui.actions.get("fitWindow").funct()
+            if (g.view.scale > 1) g.zoomTo(1, true)
+        }
+    } catch {
+        // ignore
+    } finally {
+        fitting = false
+    }
+    // After the zoom events of the fit itself
+    lastAutoFitAt = Date.now()
+    syncZoom()
+}
+
+/** The canvas changed width: keep what was in the middle in the middle */
+export function keepCenter(oldWidth: number, newWidth: number) {
+    const container = graph()?.container
+    if (!container || !oldWidth || !newWidth) return
+    container.scrollLeft += (oldWidth - newWidth) / 2
+}
+
+// ---------------------------------------------------------------------------
+// Highlighting what the AI changed
+// ---------------------------------------------------------------------------
+
+let highlights: any[] = []
+
+export function clearHighlights() {
+    for (const h of highlights) {
+        try {
+            h.destroy()
+        } catch {
+            // ignore
+        }
+    }
+    highlights = []
+}
+
+// Outline of changed shapes: dark enough to show on white paper and on
+// draw.io's pale fills (yellow ones included)
+const HIGHLIGHT_OUTLINE = "#a86b00"
+
+/**
+ * Marks changed cells: shapes get a soft halo plus a thin outline,
+ * connectors only the outline (a halo would cover their labels and arrows)
+ */
+export function highlightCells(ids: string[], color: string) {
+    clearHighlights()
+    const g = graph()
+    if (!g || !win?.mxCellHighlight || ids.length === 0) return
+    const add = (
+        state: any,
+        stroke: string,
+        width: number,
+        opacity: number,
+    ) => {
+        const h = new win.mxCellHighlight(g, stroke, width)
+        h.opacity = opacity
+        h.highlight(state)
+        highlights.push(h)
+    }
+    for (const id of ids.slice(0, 200)) {
+        const cell = g.model.getCell(id)
+        const state = cell ? g.view.getState(cell) : null
+        if (!state) continue
+        if (!g.model.isEdge(cell)) add(state, color, 8, 18)
+        add(state, HIGHLIGHT_OUTLINE, 2, 100)
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Selection
+// ---------------------------------------------------------------------------
+
+function cellLabel(cell: any): string {
+    const g = graph()
+    let text = ""
+    try {
+        text = g?.convertValueToString(cell) ?? ""
+    } catch {
+        text = ""
+    }
+    // Labels can contain HTML
+    text = text
+        .replace(/<br\s*\/?>/gi, " ")
+        .replace(/<[^>]+>/g, "")
+        .replace(/&nbsp;/g, " ")
+        .replace(/&amp;/g, "&")
+        .replace(/&lt;/g, "<")
+        .replace(/&gt;/g, ">")
+        .replace(/\s+/g, " ")
+        .trim()
+    return text.length > 80 ? `${text.slice(0, 80)}…` : text
+}
+
+function readSelection(): SelectedCell[] {
+    const g = graph()
+    if (!g) return []
+    return (g.getSelectionCells() as any[])
+        .filter((cell) => cell?.id)
+        .map((cell) => ({
+            id: String(cell.id),
+            label: cellLabel(cell),
+            isEdge: !!g.model.isEdge(cell),
+        }))
+}
+
+function readSelectionRect() {
+    const g = graph()
+    if (!g || g.isSelectionEmpty()) return null
+    const cells = g.getSelectionCells()
+    const bounds = g.view.getBounds(cells)
+    if (!bounds) return null
+    const container = g.container as HTMLElement
+    const rect = container.getBoundingClientRect()
+    return {
+        x: rect.left + bounds.x - container.scrollLeft,
+        y: rect.top + bounds.y - container.scrollTop,
+        width: bounds.width,
+        height: bounds.height,
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Pages
+// ---------------------------------------------------------------------------
+
+function readPages() {
+    const pages = (ui?.pages ?? []) as any[]
+    return pages.map((page, index) => ({
+        id: String(page.getId?.() ?? index),
+        name: String(page.getName?.() ?? `Page-${index + 1}`),
+    }))
+}
+
+function findPage(id: string) {
+    return ((ui?.pages ?? []) as any[]).find(
+        (page) => String(page.getId?.()) === id,
+    )
+}
+
+export function selectPage(id: string) {
+    const page = findPage(id)
+    if (page && typeof ui.selectPage === "function") ui.selectPage(page)
+    focusCanvas()
+    syncAll()
+}
+
+export function addPage() {
+    runAction("insertPage")
+}
+
+export function renamePage(id: string) {
+    const page = findPage(id)
+    if (page && typeof ui.renamePage === "function") ui.renamePage(page)
+}
+
+export function duplicatePage(id: string) {
+    const page = findPage(id)
+    if (page && typeof ui.duplicatePage === "function") {
+        // Named as draw.io's own menu names it ("Copy of …")
+        const name = win?.mxResources?.get?.("copyOf", [page.getName()])
+        ui.duplicatePage(page, name)
+    }
+    focusCanvas()
+    syncAll()
+}
+
+export function removePage(id: string) {
+    const page = findPage(id)
+    if (page && typeof ui.removePage === "function") ui.removePage(page)
+    syncAll()
+}
+
+export function canManagePages(): boolean {
+    return (
+        !!ui && Array.isArray(ui.pages) && typeof ui.selectPage === "function"
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Keeping the store in sync
+// ---------------------------------------------------------------------------
+
+function syncZoom() {
+    const g = graph()
+    if (!g) return
+    useCanvasStore.getState().set({ zoom: Math.round(g.view.scale * 100) })
+}
+
+function syncSelectionRect() {
+    useCanvasStore.getState().set({ selectionRect: readSelectionRect() })
+}
+
+function syncAll() {
+    if (!ui) return
+    const g = graph()
+    const manager = ui.editor?.undoManager
+    useCanvasStore.getState().set({
+        canUndo: !!manager?.canUndo?.(),
+        canRedo: !!manager?.canRedo?.(),
+        zoom: g ? Math.round(g.view.scale * 100) : 100,
+        pages: readPages(),
+        currentPageId: ui.currentPage?.getId
+            ? String(ui.currentPage.getId())
+            : null,
+        selection: readSelection(),
+        selectionRect: readSelectionRect(),
+        isFreehand: !!g?.freehand?.isDrawing?.(),
+        isFormatOpen: isFormatPanelOpen(),
+        isShapesOpen: isShapesPanelOpen(),
+    })
+}
+
+// draw.io keeps its docked shape library "visible" from the start; the app's
+// CSS hides it unless the frame's body has this class
+const SHAPES_OPEN_CLASS = "nai-shapes-open"
+
+function isShapesPanelOpen(): boolean {
+    return !!win?.document?.body?.classList.contains(SHAPES_OPEN_CLASS)
+}
+
+/** Show or hide draw.io's shape library, floating over the canvas */
+export function toggleShapesPanel() {
+    const body = win?.document?.body
+    if (!body) return
+    // Only the class: draw.io treats its docked library as open from the
+    // start, and lays the canvas out next to it while it shows
+    body.classList.toggle(SHAPES_OPEN_CLASS, !isShapesPanelOpen())
+    syncAll()
+}
+
+function isFormatPanelOpen(): boolean {
+    try {
+        if (typeof ui.isFormatPanelVisible === "function") {
+            return !!ui.isFormatPanelVisible()
+        }
+        return (ui.formatWidth ?? 0) > 0
+    } catch {
+        return false
+    }
+}
+
+function installListeners(): () => void {
+    const g = graph()
+    if (!g || !win?.mxEvent) return () => {}
+    const mxEvent = win.mxEvent
+    const cleanups: (() => void)[] = []
+
+    const listen = (source: any, name: string, handler: () => void) => {
+        if (!source?.addListener) return
+        source.addListener(name, handler)
+        cleanups.push(() => source.removeListener(handler))
+    }
+
+    // Any user action ends the "what the AI just changed" highlight
+    const onSelection = () => {
+        clearHighlights()
+        syncAll()
+    }
+    // Drawing stopped (Escape, X or the Select button): the toolbar shows
+    // it, and draw.io's freehand settings window goes away
+    const onFreehand = () => {
+        if (!g.freehand?.isDrawing?.()) {
+            ui?.freehandWindow?.window?.setVisible?.(false)
+        }
+        syncAll()
+    }
+    const onView = () => {
+        syncZoom()
+        syncSelectionRect()
+    }
+    const onScale = () => {
+        zoomChanged()
+        onView()
+    }
+
+    listen(g.getSelectionModel(), mxEvent.CHANGE, onSelection)
+    listen(g.model, mxEvent.CHANGE, syncAll)
+    listen(ui.editor?.undoManager, mxEvent.ADD, syncAll)
+    listen(ui.editor?.undoManager, mxEvent.UNDO, syncAll)
+    listen(ui.editor?.undoManager, mxEvent.REDO, syncAll)
+    listen(ui.editor?.undoManager, mxEvent.CLEAR, syncAll)
+    listen(g, "freehandStateChanged", onFreehand)
+    listen(g.view, mxEvent.SCALE, onScale)
+    listen(g.view, mxEvent.TRANSLATE, onView)
+    listen(g.view, mxEvent.SCALE_AND_TRANSLATE, onScale)
+    listen(ui.editor, "pageSelected", syncAll)
+    listen(ui, "formatWidthChanged", syncAll)
+
+    // Capture phase, so the app shortcut wins before draw.io's key handler
+    const onKeyDown = (event: KeyboardEvent) => {
+        if (appShortcutHandler?.(event)) {
+            event.preventDefault()
+            event.stopPropagation()
+        }
+    }
+    const frameDocument = win.document as Document | undefined
+    frameDocument?.addEventListener("keydown", onKeyDown, true)
+    cleanups.push(() =>
+        frameDocument?.removeEventListener("keydown", onKeyDown, true),
+    )
+
+    const container = g.container as HTMLElement | undefined
+    container?.addEventListener("scroll", syncSelectionRect, { passive: true })
+    cleanups.push(() =>
+        container?.removeEventListener("scroll", syncSelectionRect),
+    )
+
+    return () => {
+        for (const cleanup of cleanups) cleanup()
+    }
+}
+
+/**
+ * Finds the EditorUi instance inside a same-origin draw.io iframe.
+ *
+ * draw.io keeps no global reference to it, so we wrap prototype methods it
+ * calls on startup and after every load; the first call hands us `this`.
+ * Returns false when the frame is cross-origin.
+ */
+export function watchForEditorUi(
+    frameWindow: Window,
+    onFound: (editorUi: EditorUi) => void,
+): boolean {
+    let w: any
+    try {
+        w = frameWindow as any
+        // Throws for a cross-origin frame
+        void w.document
+    } catch {
+        return false
+    }
+    const hook = (proto: any, method: string) => {
+        if (!proto || typeof proto[method] !== "function") return
+        if (proto[method].__naiWrapped) return
+        const original = proto[method]
+        const wrapped = function (this: any, ...args: any[]) {
+            onFound(this)
+            return original.apply(this, args)
+        }
+        ;(wrapped as any).__naiWrapped = true
+        proto[method] = wrapped
+    }
+    hook(w.EditorUi?.prototype, "updateActionStates")
+    hook(w.App?.prototype, "fileLoaded")
+    hook(w.EditorUi?.prototype, "fileLoaded")
+    return true
+}
diff --git a/lib/i18n/dictionaries/en.json b/lib/i18n/dictionaries/en.json
index fb9cb9cb..883294a5 100644
--- a/lib/i18n/dictionaries/en.json
+++ b/lib/i18n/dictionaries/en.json
@@ -3,22 +3,19 @@
         "save": "Save",
         "cancel": "Cancel",
         "close": "Close",
-        "confirm": "Confirm",
         "clear": "Clear",
         "edit": "Edit",
         "delete": "Delete",
-        "loading": "Loading..",
-        "new": "NEW"
+        "loading": "Loading.."
     },
     "nav": {
-        "about": "About",
         "editor": "Editor",
-        "newChat": "Start fresh chat",
+        "newChat": "New diagram",
         "github": "GitHub",
         "settings": "Settings",
-        "hidePanel": "Hide chat panel (Ctrl+B)",
-        "showPanel": "Show chat panel (Ctrl+B)",
-        "aiChat": "AI Chat"
+        "hidePanel": "Hide chat panel",
+        "showPanel": "Show chat panel",
+        "aiChat": "AI chat"
     },
     "providers": {
         "useServerDefault": "Use Server Default",
@@ -39,12 +36,11 @@
     },
     "chat": {
         "placeholder": "Describe your diagram or upload a file...",
+        "inputLabel": "Chat input",
         "send": "Send",
         "stopGeneration": "Stop generation",
         "sendMessage": "Send message",
         "clearConversation": "Clear conversation",
-        "diagramHistory": "Diagram history",
-        "saveDiagram": "Save diagram",
         "uploadFile": "Upload file (image, PDF, text)",
         "minimalStyle": "Minimal",
         "styledMode": "Styled",
@@ -52,39 +48,38 @@
         "regenerate": "Regenerate response",
         "copyResponse": "Copy response",
         "copied": "Copied!",
-        "failedToCopy": "Failed to copy",
         "failedToCopyDetail": "Failed to copy message. Please copy manually or check clipboard permissions.",
         "goodResponse": "Good response",
         "badResponse": "Bad response",
         "clickToEdit": "Click to edit",
         "editMessage": "Edit message",
-        "saveAndSubmit": "Save & Submit",
-        "ExtractURL": "Extract from URL"
+        "saveAndSubmit": "Save & submit",
+        "ExtractURL": "Extract from URL",
+        "attach": "Add",
+        "placeholderFollowUp": "Ask for a change, or select shapes to edit them",
+        "emptyThread": "Draw on the canvas, or describe what you want below.",
+        "attachedImage": "Attached image",
+        "retry": "Retry"
     },
     "examples": {
-        "title": "Create diagrams with AI",
-        "subtitle": "Describe what you want to create or upload an image to replicate",
-        "quickExamples": "Quick Examples",
-        "paperToDiagram": "Paper to Diagram",
+        "paperToDiagram": "Paper to diagram",
         "paperDescription": "Upload .pdf, .txt, .md, .json, .csv, .py, .js, .ts and more",
-        "animatedDiagram": "Animated Diagram",
+        "animatedDiagram": "Animated diagram",
         "animatedDescription": "Draw a transformer architecture with animated connectors",
-        "awsArchitecture": "AWS Architecture",
+        "awsArchitecture": "AWS architecture",
         "awsDescription": "Create a cloud architecture diagram with AWS icons",
-        "replicateFlowchart": "Replicate Flowchart",
+        "replicateFlowchart": "Replicate a flowchart",
         "replicateDescription": "Upload and replicate an existing flowchart",
-        "creativeDrawing": "Creative Drawing",
+        "creativeDrawing": "Creative drawing",
         "creativeDescription": "Draw something fun and creative",
-        "cachedNote": "Examples are cached for instant response",
+        "cachedNote": "Examples open instantly and don't use your model.",
         "mcpServer": "MCP Server",
         "mcpDescription": "Use in Claude Desktop, VS Code & Cursor"
     },
     "settings": {
         "title": "Settings",
         "description": "Configure your application settings.",
-        "apiKeysModels": "API Keys & Models",
-        "apiKeysModelsDescription": "Configure AI providers and API keys.",
-        "accessCode": "Access Code",
+        "accessCode": "Access code",
         "accessCodePlaceholder": "Enter access code",
         "accessCodeDescription": "Required to use this application.",
         "aiProvider": "AI Provider Settings",
@@ -101,17 +96,10 @@
         "language": "Language",
         "languageDescription": "Choose your interface language.",
         "theme": "Theme",
-        "themeDescription": "Dark/Light mode for interface and DrawIO canvas.",
-        "drawioStyle": "DrawIO Style",
-        "drawioStyleDescription": "Canvas style",
-        "themeDefault": "Default",
-        "themeDark": "Dark",
-        "themeMinimal": "Minimal",
-        "themeSketch": "Sketch",
-        "themeSimple": "Simple",
-        "diagramStyle": "Diagram Style",
-        "diagramStyleDescription": "Toggle between minimal and styled diagram output.",
-        "sendShortcut": "Send Shortcut",
+        "themeDescription": "Light or dark interface. The diagram always stays on a white sheet, the way it exports.",
+        "diagramStyle": "Diagram style",
+        "diagramStyleDescription": "How the AI draws new diagrams: Styled uses colors and icons, Minimal keeps shapes plain.",
+        "sendShortcut": "Send shortcut",
         "sendShortcutDescription": "Choose how to send messages.",
         "enterToSend": "Enter to send",
         "ctrlEnterToSend": "Cmd/Ctrl+Enter to send",
@@ -119,52 +107,53 @@
         "diagramActionsDescription": "Manage diagram history and exports",
         "history": "History",
         "download": "Download",
-        "proxy": "Proxy Settings",
+        "proxy": "Proxy settings",
         "proxyDescription": "Configure HTTP/HTTPS proxy for API requests (Desktop only)",
-        "httpProxy": "HTTP Proxy",
-        "httpsProxy": "HTTPS Proxy",
+        "httpProxy": "HTTP proxy",
+        "httpsProxy": "HTTPS proxy",
         "applyProxy": "Apply",
         "proxyApplied": "Proxy settings applied",
-        "diagramValidation": "Diagram Validation (Experimental)",
-        "diagramValidationDescription": "Use a vision language model to validate generated diagrams. Requires a VLM like GPT-5.2 or Sonnet-4.5.",
-        "enabled": "Enabled",
-        "disabled": "Disabled",
-        "customSystemMessage": "Custom System Message",
+        "diagramValidation": "Check diagrams with a screenshot (experimental)",
+        "diagramValidationDescription": "After each drawing, a model that can read images looks at a screenshot and asks for fixes. Needs a model that can read images.",
+        "customSystemMessage": "Custom instructions",
         "customSystemMessageDescription": "Add custom instructions appended to the AI's system prompt.",
         "customSystemMessagePlaceholder": "e.g., Always use blue color scheme for diagrams...",
-        "maxOutputTokens": "Max Output Tokens",
+        "maxOutputTokens": "Max output tokens",
         "maxOutputTokensDescription": "Budget for one reply, shared by thinking and the diagram XML. Raise it if the AI keeps thinking and no diagram appears. Leave empty for the default.",
-        "panelVisibility": "Lobby Panels",
-        "panelVisibilityDescription": "Choose which panels to show on the chat lobby.",
-        "showRecentChats": "Recent Chats",
-        "showMyTemplates": "My Templates",
-        "showQuickExamples": "Quick Examples"
+        "tabModels": "Models & keys",
+        "tabAppearance": "Appearance",
+        "tabAdvanced": "Advanced",
+        "tabAbout": "About",
+        "themeLight": "Light",
+        "themeDarkMode": "Dark",
+        "themeSystem": "System",
+        "accessCodeSaved": "Access code saved",
+        "proxyInvalid": "Proxy addresses must start with http:// or https://",
+        "proxyFailed": "Couldn't apply the proxy settings",
+        "appVersion": "Version",
+        "projectWebsite": "Project website"
     },
     "save": {
-        "title": "Save Diagram",
-        "description": "Choose a format and filename to save your diagram.",
+        "title": "Export diagram",
+        "description": "Pick a format and a file name.",
         "format": "Format",
         "filename": "Filename",
         "filenamePlaceholder": "Enter filename",
         "formats": {
-            "drawio": "Draw.io XML",
-            "png": "PNG Image",
-            "svg": "SVG Image",
+            "drawio": "draw.io file",
+            "png": "PNG image",
+            "svg": "SVG image",
             "xmlsvg": "Editable SVG"
         },
-        "savedSuccessfully": "Saved successfully!"
-    },
-    "history": {
-        "title": "Diagram History",
-        "description": "Here saved each diagram before AI modification.\nClick on a diagram to restore it",
-        "noHistory": "No history available yet. Send messages to create diagram history.",
-        "version": "Version",
-        "restoreTo": "Restore to Version {version}?"
+        "savedSuccessfully": "Diagram exported",
+        "hints": {
+            "drawio": "Keeps everything editable",
+            "png": "A picture for slides and documents",
+            "svg": "A picture that scales without blur",
+            "xmlsvg": "A picture that still opens in draw.io"
+        }
     },
     "dialogs": {
-        "clearTitle": "Clear Everything?",
-        "clearDescription": "This will clear the current conversation and reset the diagram. This action cannot be undone.",
-        "clearEverything": "Clear Everything",
         "clearSuccess": "Started a fresh chat"
     },
     "errors": {
@@ -189,6 +178,9 @@
         "sessionSaveFailed": "Could not save this chat. Browser storage may be full: delete old chats from history and try again.",
         "sessionSaveFailedLeave": "Could not save this chat. Browser storage may be full. You can go on without saving it, then delete old chats from the list in the new chat.",
         "continueWithoutSaving": "Continue without saving",
+        "notADiagramFile": "{name} isn't a draw.io diagram.",
+        "fileTooLong": "{name}: Content exceeds {limit}k character limit ({size}k chars)",
+        "fileReadFailed": "Failed to read file: {name}",
         "llm": {
             "invalid_api_key": "The provider rejected the API key. Check it in model settings.",
             "forbidden": "The provider refused the request. The key may not have access to this model or region.",
@@ -227,11 +219,6 @@
         "usedOf": "{used}/{limit}"
     },
     "tools": {
-        "generateDiagram": "Generate Diagram",
-        "editDiagram": "Edit Diagram",
-        "appendDiagram": "Continue Diagram",
-        "complete": "Complete",
-        "error": "Error",
         "truncated": "Truncated"
     },
     "file": {
@@ -246,7 +233,8 @@
         "extract": "Extract",
         "Cancel": "Cancel",
         "enterUrl": "Please enter a URL",
-        "invalidFormat": "Invalid URL format"
+        "invalidFormat": "Invalid URL format",
+        "failed": "Couldn't read that page"
     },
     "reasoning": {
         "thinking": "Thinking...",
@@ -279,30 +267,29 @@
     "sessionHistory": {
         "tooltip": "Chat History",
         "newChat": "New Chat",
-        "empty": "No chat history yet",
+        "empty": "No diagrams yet",
         "emptyHint": "Start a conversation to begin",
         "today": "Today",
         "yesterday": "Yesterday",
         "thisWeek": "This Week",
         "earlier": "Earlier",
-        "deleteTitle": "Delete this chat?",
-        "deleteDescription": "This will permanently delete this chat session and its diagram. This action cannot be undone.",
-        "recentChats": "Recent Chats",
+        "deleteTitle": "Delete this diagram?",
+        "deleteDescription": "The diagram and its conversation are deleted for good.",
         "justNow": "Just now",
-        "searchPlaceholder": "Search chats...",
-        "noResults": "No chats found"
+        "searchPlaceholder": "Search diagrams…",
+        "noResults": "No chats found",
+        "rename": "Rename",
+        "busyHint": "Available when the answer is finished"
     },
     "templates": {
-        "title": "My Templates",
-        "subtitle": "Your personal prompt library for quick diagram creation",
-        "emptyTitle": "No templates yet",
-        "emptyDescription": "Create your first template to start building your personal prompt library",
-        "createFirst": "Create First Template",
+        "emptyTitle": "No saved prompts yet",
+        "emptyDescription": "Save a prompt you reuse, for example \"Draw an AWS architecture for…\". It shows up here.",
+        "createFirst": "Save your first prompt",
         "neverUsed": "Not used yet",
         "usedCount": "{count} uses",
-        "myTemplates": "My Templates",
-        "createTitle": "Create Template",
-        "createDescription": "Save a prompt for repeated use. Templates help you quickly start common workflows.",
+        "myTemplates": "Saved prompts",
+        "createTitle": "Save a prompt",
+        "createDescription": "Save a prompt to use again later.",
         "promptLabel": "Prompt",
         "promptPlaceholder": "Describe the diagram you want to create...",
         "promptRequired": "Prompt is required",
@@ -310,33 +297,34 @@
         "titlePlaceholder": "Enter a title",
         "titleHint": "Leave empty to use the first 20 characters of prompt",
         "descriptionLabel": "Description",
-        "descriptionPlaceholder": "Add a description for this template",
-        "pinnedLabel": "Pin Template",
-        "pinnedHint": "Pinned templates appear at the top of the list",
-        "createButton": "Create Template",
-        "createFailed": "Failed to create template. Please try again.",
-        "editTitle": "Edit Template",
-        "editDescription": "Update your template content and settings.",
-        "updateFailed": "Failed to update template. Please try again.",
+        "descriptionPlaceholder": "What this prompt is for",
+        "pinnedLabel": "Pin to top",
+        "pinnedHint": "Pinned prompts appear at the top of the list",
+        "createButton": "Save prompt",
+        "createFailed": "Couldn't save the prompt. Try again.",
+        "editTitle": "Edit saved prompt",
+        "editDescription": "Change the prompt and its settings.",
+        "updateFailed": "Couldn't update the prompt. Try again.",
         "duplicate": "Duplicate",
         "copySuffix": "(copy)",
-        "deleteTitle": "Delete this template?",
-        "deleteDescription": "This will permanently delete this template. This action cannot be undone.",
+        "deleteTitle": "Delete this saved prompt?",
+        "deleteDescription": "The prompt is deleted for good.",
         "confirmSendTitle": "Replace current input?",
-        "confirmSendDescription": "You have unsent content in the input. Sending this template will replace it.",
-        "confirmSendButton": "Send Template",
-        "searchPlaceholder": "Search templates...",
-        "searchNoResults": "No templates match your search",
+        "confirmSendDescription": "You have unsent text in the message box. Sending this prompt replaces it.",
+        "confirmSendButton": "Send prompt",
+        "searchPlaceholder": "Search saved prompts…",
+        "searchNoResults": "No saved prompts match",
         "pin": "Pin to top",
         "unpin": "Unpin from top",
-        "saveAsTemplate": "Save as Template",
-        "exportTemplates": "Export Templates",
-        "importTemplates": "Import Templates",
-        "exportEmpty": "No templates to export",
-        "exportSuccess": "Exported {count} template(s) successfully",
+        "saveAsTemplate": "Save this prompt",
+        "exportTemplates": "Export saved prompts",
+        "importTemplates": "Import saved prompts",
+        "exportEmpty": "No saved prompts to export",
+        "exportSuccess": "Exported {count} saved prompt(s)",
         "importNoFile": "Please select a JSON file",
         "importFailed": "Import failed: {error}",
-        "importSuccess": "Imported {imported} template(s), skipped {skipped} duplicate(s)"
+        "importSuccess": "Imported {imported} saved prompt(s), skipped {skipped} duplicate(s)",
+        "saveDisabledHint": "Type a prompt first"
     },
     "validation": {
         "title": "Validate Diagram",
@@ -357,8 +345,6 @@
         "regenerateWithFeedback": "Regenerate the diagram using the validation feedback"
     },
     "modelConfig": {
-        "title": "AI Model Configuration",
-        "description": "Configure multiple AI providers and models",
         "configure": "Configure",
         "addProvider": "Add Provider",
         "addModel": "Add Model",
@@ -375,7 +361,7 @@
         "validationError": "Validation failed",
         "addModelFirst": "Add at least one model to validate",
         "providers": "Providers",
-        "addProviderHint": "Add a provider to get started",
+        "addProviderHint": "No providers yet",
         "verified": "Verified",
         "configuration": "Configuration",
         "displayName": "Display Name",
@@ -404,13 +390,14 @@
         "noModelsConfigured": "No models configured",
         "modelIdEmpty": "Model ID cannot be empty",
         "modelIdExists": "This model ID already exists",
-        "configureProviders": "Configure AI Providers",
+        "configureProviders": "Set up AI providers",
         "selectProviderHint": "Select a provider from the list or add a new one to configure API keys and models",
         "deleteConfirmDesc": "Are you sure you want to delete {name}? This will remove all configured models and cannot be undone.",
         "typeToConfirm": "Type \"{name}\" to confirm",
         "typeProviderName": "Type provider name...",
         "modelsConfiguredCount": "{count} model(s) configured",
         "validationFailedCount": "{count} model(s) failed validation",
+        "requestFailed": "Request failed ({status})",
         "cancel": "Cancel",
         "delete": "Delete",
         "clickToChange": "(click to change)",
@@ -430,7 +417,9 @@
         "unvalidatedModelWarning": "This model has not been validated",
         "serverDefaultModel": "Server default model",
         "showValue": "Show value",
-        "hideValue": "Hide value"
+        "hideValue": "Hide value",
+        "noProvidersTitle": "Using the model set up on this server",
+        "noProvidersHint": "To use other models, add a provider with your own API key below the list on the left."
     },
     "admin": {
         "title": "Admin Settings",
@@ -575,5 +564,106 @@
                 "description": "Timezone for the daily reset boundary."
             }
         }
+    },
+    "workspace": {
+        "toolbar": "Canvas tools",
+        "undo": "Undo",
+        "redo": "Redo",
+        "select": "Select",
+        "shapes": "Shapes",
+        "text": "Text",
+        "connector": "Connector",
+        "freehand": "Freehand",
+        "zoomIn": "Zoom in",
+        "zoomOut": "Zoom out",
+        "zoomMenu": "Zoom",
+        "fitWindow": "Fit to window",
+        "zoomReset": "Actual size",
+        "style": "Style",
+        "more": "More",
+        "export": "Export",
+        "openFile": "Open .drawio file",
+        "findReplace": "Find and replace",
+        "layers": "Layers",
+        "outline": "Outline",
+        "toggleGrid": "Grid",
+        "togglePageView": "Page view",
+        "insertImage": "Insert image",
+        "insertLink": "Insert link",
+        "selectAll": "Select all",
+        "editDiagram": "Edit diagram XML",
+        "print": "Print",
+        "addPage": "Add page",
+        "renamePage": "Rename",
+        "duplicatePage": "Duplicate",
+        "deletePage": "Delete page",
+        "canvasLoading": "Loading the canvas…",
+        "askAi": "Ask AI to change this",
+        "untitled": "Untitled diagram",
+        "mobileCanvas": "Canvas",
+        "mobileChat": "Chat"
+    },
+    "selection": {
+        "one": "Selected: {label}",
+        "many": "{count} shapes selected",
+        "shape": "shape",
+        "connector": "connector",
+        "remove": "Don't send the selection",
+        "placeholder": "Describe how to change the selected shapes"
+    },
+    "versions": {
+        "strip": "Versions",
+        "created": "Drew the diagram",
+        "edited": "Changed the diagram",
+        "undone": "Change undone",
+        "undo": "Undo change",
+        "redo": "Redo change",
+        "compare": "Compare",
+        "compareTitle": "Compare versions",
+        "currentCanvas": "Canvas now",
+        "versionLabel": "Version {n}",
+        "previous": "Previous version",
+        "next": "Next version",
+        "rendering": "Rendering preview…",
+        "showCode": "Show XML",
+        "hideCode": "Hide XML",
+        "drawing": "Drawing the diagram…",
+        "editing": "Changing the diagram…",
+        "loadingLibrary": "Loading a shape library…",
+        "libraryLoaded": "Loaded a shape library",
+        "failed": "This attempt failed",
+        "failedRetrying": "This attempt failed, trying again",
+        "stopped": "Stopped",
+        "truncatedHint": "The reply hit the output limit before the diagram was complete. Ask for a simpler diagram, or raise Max output tokens in Settings > Advanced.",
+        "noChanges": "No visible changes",
+        "listSeparator": ", ",
+        "shapesAddedOne": "added 1 shape",
+        "shapesAddedOther": "added {count} shapes",
+        "edgesAddedOne": "added 1 connector",
+        "edgesAddedOther": "added {count} connectors",
+        "shapesChangedOne": "changed 1 shape",
+        "shapesChangedOther": "changed {count} shapes",
+        "edgesChangedOne": "changed 1 connector",
+        "edgesChangedOther": "changed {count} connectors",
+        "shapesRemovedOne": "removed 1 shape",
+        "shapesRemovedOther": "removed {count} shapes",
+        "edgesRemovedOne": "removed 1 connector",
+        "edgesRemovedOther": "removed {count} connectors",
+        "totals": "{shapes} shapes, {edges} connectors",
+        "restoreVersion": "Restore v{n}",
+        "restoredVersion": "Restored v{n}",
+        "undoRestore": "Undo",
+        "noPreview": "No preview",
+        "compareSince": "Since version {n}, the canvas has changed:",
+        "isOnCanvas": "This version is what the canvas shows now.",
+        "differsElsewhere": "The shapes and connectors on the first page are the same as in version {n}; their order, other pages or the page settings differ."
+    },
+    "lobby": {
+        "title": "What would you like to draw?",
+        "lede": "Describe a diagram, or upload a screenshot or PDF. You get a regular draw.io diagram that you can keep editing and export.",
+        "placeholder": "For example: a login sequence diagram with SMS codes and retries",
+        "recent": "Recent diagrams",
+        "drawYourself": "Start with a blank canvas",
+        "openFileHint": "Keep working on a diagram you have"
     }
 }
diff --git a/lib/i18n/dictionaries/ja.json b/lib/i18n/dictionaries/ja.json
index 8c549ace..692c7e2f 100644
--- a/lib/i18n/dictionaries/ja.json
+++ b/lib/i18n/dictionaries/ja.json
@@ -3,21 +3,18 @@
         "save": "保存",
         "cancel": "キャンセル",
         "close": "閉じる",
-        "confirm": "確認",
         "clear": "クリア",
         "edit": "編集",
         "delete": "削除",
-        "loading": "読み込み中..",
-        "new": "新規"
+        "loading": "読み込み中.."
     },
     "nav": {
-        "about": "概要",
         "editor": "エディタ",
-        "newChat": "新しいチャットを開始",
+        "newChat": "新しい図",
         "github": "GitHub",
         "settings": "設定",
-        "hidePanel": "チャットパネルを非表示 (Ctrl+B)",
-        "showPanel": "チャットパネルを表示 (Ctrl+B)",
+        "hidePanel": "チャットパネルを非表示",
+        "showPanel": "チャットパネルを表示",
         "aiChat": "AI チャット"
     },
     "providers": {
@@ -39,12 +36,11 @@
     },
     "chat": {
         "placeholder": "ダイアグラムを説明するか、ファイルをアップロード...",
+        "inputLabel": "チャット入力",
         "send": "送信",
         "stopGeneration": "生成を停止",
         "sendMessage": "メッセージを送信",
         "clearConversation": "会話をクリア",
-        "diagramHistory": "ダイアグラム履歴",
-        "saveDiagram": "ダイアグラムを保存",
         "uploadFile": "ファイルをアップロード（画像、PDF、テキスト）",
         "minimalStyle": "ミニマル",
         "styledMode": "スタイル付き",
@@ -52,38 +48,37 @@
         "regenerate": "応答を再生成",
         "copyResponse": "応答をコピー",
         "copied": "コピーしました！",
-        "failedToCopy": "コピーに失敗しました",
         "failedToCopyDetail": "メッセージのコピーに失敗しました。手動でコピーするか、クリップボードの権限を確認してください。",
         "goodResponse": "良い応答",
         "badResponse": "悪い応答",
         "clickToEdit": "クリックして編集",
         "editMessage": "メッセージを編集",
         "saveAndSubmit": "保存して送信",
-        "ExtractURL": "URLから抽出"
+        "ExtractURL": "URLから抽出",
+        "attach": "追加",
+        "placeholderFollowUp": "変更したい内容を入力。図形を選んでから頼むこともできます",
+        "emptyThread": "キャンバスに直接描くか、下で描きたいものを伝えてください。",
+        "attachedImage": "添付画像",
+        "retry": "再試行"
     },
     "examples": {
-        "title": "AI でダイアグラムを作成",
-        "subtitle": "作成したいものを説明するか、画像をアップロードして複製",
-        "quickExamples": "クイック例",
-        "paperToDiagram": "論文からダイアグラムへ",
+        "paperToDiagram": "論文を図に",
         "paperDescription": ".pdf, .txt, .md, .json, .csv, .py, .js, .ts などをアップロード",
         "animatedDiagram": "アニメーション図",
         "animatedDescription": "アニメーションコネクタ付きの Transformer アーキテクチャを描画",
-        "awsArchitecture": "AWS アーキテクチャ",
+        "awsArchitecture": "AWS 構成図",
         "awsDescription": "AWS アイコンでクラウドアーキテクチャ図を作成",
-        "replicateFlowchart": "フローチャートを複製",
+        "replicateFlowchart": "フローチャートを再現",
         "replicateDescription": "既存のフローチャートをアップロードして複製",
-        "creativeDrawing": "クリエイティブな描画",
+        "creativeDrawing": "自由なイラスト",
         "creativeDescription": "楽しくてクリエイティブなものを描く",
-        "cachedNote": "例はキャッシュされ、即座に応答します",
+        "cachedNote": "例はすぐに開き、モデルは使いません。",
         "mcpServer": "MCP サーバー",
         "mcpDescription": "Claude Desktop、VS Code、Cursor で使用"
     },
     "settings": {
         "title": "設定",
         "description": "アプリケーション設定を構成します。",
-        "apiKeysModels": "API キーとモデル",
-        "apiKeysModelsDescription": "AI プロバイダーと API キーを設定します。",
         "accessCode": "アクセスコード",
         "accessCodePlaceholder": "アクセスコードを入力",
         "accessCodeDescription": "このアプリケーションを使用するために必要です。",
@@ -101,17 +96,10 @@
         "language": "言語",
         "languageDescription": "インターフェース言語を選択します。",
         "theme": "テーマ",
-        "themeDescription": "インターフェースと DrawIO キャンバスのダーク/ライトモード。",
-        "drawioStyle": "DrawIO スタイル",
-        "drawioStyleDescription": "キャンバススタイル",
-        "themeDefault": "デフォルト",
-        "themeDark": "ダーク",
-        "themeMinimal": "ミニマル",
-        "themeSketch": "スケッチ",
-        "themeSimple": "シンプル",
-        "diagramStyle": "ダイアグラムスタイル",
-        "diagramStyleDescription": "ミニマルとスタイル付きの出力を切り替えます。",
-        "sendShortcut": "送信ショートカット",
+        "themeDescription": "画面をライトにするかダークにするか。図はエクスポートしたときと同じく、常に白い用紙の上に表示されます。",
+        "diagramStyle": "図のスタイル",
+        "diagramStyleDescription": "AI が新しい図を描くときのスタイル。スタイル付きは色やアイコンを使い、ミニマルは素朴な図形だけにします。",
+        "sendShortcut": "送信のショートカット",
         "sendShortcutDescription": "メッセージの送信方法を選択します。",
         "enterToSend": "Enterで送信",
         "ctrlEnterToSend": "Cmd/Ctrl+Enterで送信",
@@ -125,46 +113,47 @@
         "httpsProxy": "HTTPS プロキシ",
         "applyProxy": "適用",
         "proxyApplied": "プロキシ設定が適用されました",
-        "diagramValidation": "ダイアグラム検証（実験的）",
-        "diagramValidationDescription": "視覚言語モデルを使用して生成されたダイアグラムを検証します。GPT-5.2 や Sonnet-4.5 などの VLM が必要です。",
-        "enabled": "有効",
-        "disabled": "無効",
-        "customSystemMessage": "カスタムシステムメッセージ",
+        "diagramValidation": "スクリーンショットで図をチェック（実験的）",
+        "diagramValidationDescription": "描くたびに、画像を読めるモデルがスクリーンショットを確認し、修正を求めます。画像を読めるモデルが必要です。",
+        "customSystemMessage": "カスタム指示",
         "customSystemMessageDescription": "AIのシステムプロンプトに追加されるカスタム指示を入力します。",
         "customSystemMessagePlaceholder": "例：ダイアグラムには常に青色のカラースキームを使用...",
         "maxOutputTokens": "最大出力トークン数",
         "maxOutputTokensDescription": "1回の応答の予算で、思考過程とダイアグラムの XML が共有します。AI が考え続けてダイアグラムが生成されない場合は大きくしてください。空欄ならデフォルト値を使います。",
-        "panelVisibility": "ロビーパネル",
-        "panelVisibilityDescription": "チャットロビーに表示するパネルを選択します。",
-        "showRecentChats": "最近のチャット",
-        "showMyTemplates": "マイテンプレート",
-        "showQuickExamples": "クイック例"
+        "tabModels": "モデルとキー",
+        "tabAppearance": "外観",
+        "tabAdvanced": "詳細",
+        "tabAbout": "このアプリについて",
+        "themeLight": "ライト",
+        "themeDarkMode": "ダーク",
+        "themeSystem": "システムに合わせる",
+        "accessCodeSaved": "アクセスコードを保存しました",
+        "proxyInvalid": "プロキシのアドレスは http:// または https:// で始めてください",
+        "proxyFailed": "プロキシ設定を適用できませんでした",
+        "appVersion": "バージョン",
+        "projectWebsite": "プロジェクトのサイト"
     },
     "save": {
-        "title": "ダイアグラムを保存",
-        "description": "形式とファイル名を選択してダイアグラムを保存します。",
+        "title": "図をエクスポート",
+        "description": "形式とファイル名を選んでください。",
         "format": "形式",
         "filename": "ファイル名",
         "filenamePlaceholder": "ファイル名を入力",
         "formats": {
-            "drawio": "Draw.io XML",
+            "drawio": "draw.io ファイル",
             "png": "PNG 画像",
             "svg": "SVG 画像",
-            "xmlsvg": "編集可能 SVG"
+            "xmlsvg": "編集できる SVG"
         },
-        "savedSuccessfully": "保存完了！"
-    },
-    "history": {
-        "title": "ダイアグラム履歴",
-        "description": "AI 修正前に保存された各ダイアグラム。\nダイアグラムをクリックして復元",
-        "noHistory": "まだ履歴がありません。メッセージを送信してダイアグラム履歴を作成してください。",
-        "version": "バージョン",
-        "restoreTo": "バージョン {version} に復元しますか？"
+        "savedSuccessfully": "エクスポートしました",
+        "hints": {
+            "drawio": "すべて編集できるまま保存",
+            "png": "スライドや文書向けの画像",
+            "svg": "拡大してもぼやけない画像",
+            "xmlsvg": "draw.io でも開ける画像"
+        }
     },
     "dialogs": {
-        "clearTitle": "すべてクリアしますか？",
-        "clearDescription": "現在の会話をクリアし、ダイアグラムをリセットします。この操作は元に戻せません。",
-        "clearEverything": "すべてクリア",
         "clearSuccess": "新しいチャットを開始しました"
     },
     "errors": {
@@ -189,6 +178,9 @@
         "sessionSaveFailed": "このチャットを保存できませんでした。ブラウザのストレージがいっぱいの可能性があります。履歴から古いチャットを削除して、もう一度お試しください。",
         "sessionSaveFailedLeave": "このチャットを保存できませんでした。ブラウザのストレージがいっぱいの可能性があります。保存せずに続けて、新しいチャットの一覧から古いチャットを削除できます。",
         "continueWithoutSaving": "保存せずに続ける",
+        "notADiagramFile": "{name} は draw.io の図ではありません。",
+        "fileTooLong": "{name}：内容が上限の {limit}k 文字を超えています（{size}k 文字）",
+        "fileReadFailed": "ファイルを読み込めませんでした：{name}",
         "llm": {
             "invalid_api_key": "プロバイダーが API キーを拒否しました。モデル設定で確認してください。",
             "forbidden": "プロバイダーがリクエストを拒否しました。このキーにはこのモデルまたはリージョンの利用権限がない可能性があります。",
@@ -227,11 +219,6 @@
         "usedOf": "{used}/{limit}"
     },
     "tools": {
-        "generateDiagram": "ダイアグラムを生成",
-        "editDiagram": "ダイアグラムを編集",
-        "appendDiagram": "ダイアグラムに追加",
-        "complete": "完了",
-        "error": "エラー",
         "truncated": "切り捨て"
     },
     "file": {
@@ -246,7 +233,8 @@
         "extract": "抽出",
         "Cancel": "キャンセル",
         "enterUrl": "URLを入力してください",
-        "invalidFormat": "無効なURL形式です"
+        "invalidFormat": "無効なURL形式です",
+        "failed": "このページを読み込めませんでした"
     },
     "reasoning": {
         "thinking": "考え中...",
@@ -279,18 +267,19 @@
     "sessionHistory": {
         "tooltip": "チャット履歴",
         "newChat": "新しいチャット",
-        "empty": "チャット履歴はまだありません",
+        "empty": "まだ図はありません",
         "emptyHint": "会話を始めてください",
         "today": "今日",
         "yesterday": "昨日",
         "thisWeek": "今週",
         "earlier": "それ以前",
-        "deleteTitle": "このチャットを削除しますか？",
-        "deleteDescription": "このチャットセッションとダイアグラムは完全に削除されます。この操作は取り消せません。",
-        "recentChats": "最近のチャット",
+        "deleteTitle": "この図を削除しますか？",
+        "deleteDescription": "図とその会話は完全に削除されます。",
         "justNow": "たった今",
-        "searchPlaceholder": "チャットを検索...",
-        "noResults": "チャットが見つかりません"
+        "searchPlaceholder": "図を検索…",
+        "noResults": "チャットが見つかりません",
+        "rename": "名前を変更",
+        "busyHint": "回答が終わると選べます"
     },
     "validation": {
         "title": "ダイアグラムを検証",
@@ -311,8 +300,6 @@
         "regenerateWithFeedback": "検証フィードバックを使用してダイアグラムを再生成"
     },
     "modelConfig": {
-        "title": "AIモデル設定",
-        "description": "複数のAIプロバイダーとモデルを設定",
         "configure": "設定",
         "addProvider": "プロバイダーを追加",
         "addModel": "モデルを追加",
@@ -329,7 +316,7 @@
         "validationError": "検証に失敗しました",
         "addModelFirst": "検証するには少なくとも1つのモデルを追加してください",
         "providers": "プロバイダー",
-        "addProviderHint": "プロバイダーを追加して開始",
+        "addProviderHint": "プロバイダーはまだありません",
         "verified": "検証済み",
         "configuration": "設定",
         "displayName": "表示名",
@@ -358,13 +345,14 @@
         "noModelsConfigured": "モデルが設定されていません",
         "modelIdEmpty": "モデル ID は空にできません",
         "modelIdExists": "このモデル ID は既に存在します",
-        "configureProviders": "AI プロバイダーを設定",
+        "configureProviders": "AI プロバイダーの設定",
         "selectProviderHint": "リストからプロバイダーを選択するか、新規追加して API キーとモデルを設定",
         "deleteConfirmDesc": "{name} を削除してもよろしいですか？設定されたすべてのモデルが削除され、元に戻せません。",
         "typeToConfirm": "確認のため「{name}」と入力",
         "typeProviderName": "プロバイダー名を入力...",
         "modelsConfiguredCount": "{count} 個のモデルを設定済み",
         "validationFailedCount": "{count} 個のモデルの検証に失敗",
+        "requestFailed": "リクエストに失敗しました（{status}）",
         "cancel": "キャンセル",
         "delete": "削除",
         "clickToChange": "（クリックして変更）",
@@ -384,19 +372,19 @@
         "unvalidatedModelWarning": "このモデルは検証されていません",
         "serverDefaultModel": "サーバーデフォルトモデル",
         "showValue": "値を表示",
-        "hideValue": "値を非表示"
+        "hideValue": "値を非表示",
+        "noProvidersTitle": "このサーバーで設定されたモデルを使用中",
+        "noProvidersHint": "ほかのモデルを使うには、左のリストの下でプロバイダーを追加し、自分の API キーを入力してください。"
     },
     "templates": {
-        "title": "マイテンプレート",
-        "subtitle": "素早いダイアグラム作成のための個人的なプロンプトライブラリ",
-        "emptyTitle": "テンプレートがありません",
-        "emptyDescription": "最初のテンプレートを作成して、個人的なプロンプトライブラリを構築しましょう",
-        "createFirst": "最初のテンプレートを作成",
+        "emptyTitle": "保存したプロンプトはまだありません",
+        "emptyDescription": "「…の AWS 構成図を描いて」のようによく使うプロンプトを保存すると、ここに表示されます。",
+        "createFirst": "最初のプロンプトを保存",
         "neverUsed": "未使用",
         "usedCount": "{count} 回使用",
-        "myTemplates": "マイテンプレート",
-        "createTitle": "テンプレート作成",
-        "createDescription": "再利用のためにプロンプトを保存します。テンプレートを使用すると、一般的なワークフローを素早く開始できます。",
+        "myTemplates": "保存したプロンプト",
+        "createTitle": "プロンプトを保存",
+        "createDescription": "あとで使えるようにプロンプトを保存します。",
         "promptLabel": "プロンプト",
         "promptPlaceholder": "作成するダイアグラムを説明してください...",
         "promptRequired": "プロンプトは必須です",
@@ -404,33 +392,34 @@
         "titlePlaceholder": "タイトルを入力",
         "titleHint": "空欄の場合はプロンプトの最初の20文字が使用されます",
         "descriptionLabel": "説明",
-        "descriptionPlaceholder": "このテンプレートの説明を追加",
-        "pinnedLabel": "テンプレートをピン留め",
-        "pinnedHint": "ピン留めされたテンプレートはリストの上部に表示されます",
-        "createButton": "テンプレート作成",
-        "createFailed": "テンプレートの作成に失敗しました。もう一度お試しください。",
-        "editTitle": "テンプレート編集",
-        "editDescription": "テンプレートの内容と設定を更新します。",
-        "updateFailed": "テンプレートの更新に失敗しました。もう一度お試しください。",
+        "descriptionPlaceholder": "このプロンプトの用途",
+        "pinnedLabel": "先頭に固定",
+        "pinnedHint": "固定したプロンプトはリストの先頭に表示されます",
+        "createButton": "保存",
+        "createFailed": "プロンプトを保存できませんでした。もう一度お試しください。",
+        "editTitle": "プロンプトを編集",
+        "editDescription": "プロンプトと設定を変更します。",
+        "updateFailed": "プロンプトを更新できませんでした。もう一度お試しください。",
         "duplicate": "複製",
         "copySuffix": "(コピー)",
-        "deleteTitle": "このテンプレートを削除しますか？",
-        "deleteDescription": "このテンプレートは完全に削除されます。この操作は取り消せません。",
+        "deleteTitle": "このプロンプトを削除しますか？",
+        "deleteDescription": "プロンプトは完全に削除されます。",
         "confirmSendTitle": "現在の入力を置き換えますか？",
-        "confirmSendDescription": "未送信のコンテンツがあります。このテンプレートを送信すると置き換えられます。",
-        "confirmSendButton": "テンプレートを送信",
-        "searchPlaceholder": "テンプレートを検索...",
-        "searchNoResults": "検索に一致するテンプレートがありません",
+        "confirmSendDescription": "入力欄に未送信の内容があります。このプロンプトを送ると置き換わります。",
+        "confirmSendButton": "送信",
+        "searchPlaceholder": "プロンプトを検索…",
+        "searchNoResults": "一致するプロンプトはありません",
         "pin": "上部にピン留め",
         "unpin": "ピン留め解除",
-        "saveAsTemplate": "テンプレートとして保存",
-        "exportTemplates": "テンプレートをエクスポート",
-        "importTemplates": "テンプレートをインポート",
-        "exportEmpty": "エクスポートするテンプレートがありません",
-        "exportSuccess": "{count} 件のテンプレートをエクスポートしました",
+        "saveAsTemplate": "このプロンプトを保存",
+        "exportTemplates": "プロンプトをエクスポート",
+        "importTemplates": "プロンプトをインポート",
+        "exportEmpty": "エクスポートするプロンプトがありません",
+        "exportSuccess": "{count} 件のプロンプトをエクスポートしました",
         "importNoFile": "JSON ファイルを選択してください",
         "importFailed": "インポートに失敗しました：{error}",
-        "importSuccess": "{imported} 件インポート、{skipped} 件の重複をスキップしました"
+        "importSuccess": "{imported} 件のプロンプトをインポートし、重複 {skipped} 件をスキップしました",
+        "saveDisabledHint": "先にプロンプトを入力してください"
     },
     "admin": {
         "title": "管理者設定",
@@ -575,5 +564,106 @@
                 "description": "1 日のリセット境界に使用するタイムゾーン。"
             }
         }
+    },
+    "workspace": {
+        "toolbar": "キャンバスツール",
+        "undo": "元に戻す",
+        "redo": "やり直す",
+        "select": "選択",
+        "shapes": "図形ライブラリ",
+        "text": "テキスト",
+        "connector": "コネクタ",
+        "freehand": "フリーハンド",
+        "zoomIn": "拡大",
+        "zoomOut": "縮小",
+        "zoomMenu": "ズーム",
+        "fitWindow": "ウィンドウに合わせる",
+        "zoomReset": "実際のサイズ",
+        "style": "スタイル",
+        "more": "その他",
+        "export": "エクスポート",
+        "openFile": ".drawio ファイルを開く",
+        "findReplace": "検索と置換",
+        "layers": "レイヤー",
+        "outline": "アウトライン",
+        "toggleGrid": "グリッド",
+        "togglePageView": "ページ表示",
+        "insertImage": "画像を挿入",
+        "insertLink": "リンクを挿入",
+        "selectAll": "すべて選択",
+        "editDiagram": "図の XML を編集",
+        "print": "印刷",
+        "addPage": "ページを追加",
+        "renamePage": "名前を変更",
+        "duplicatePage": "複製",
+        "deletePage": "ページを削除",
+        "canvasLoading": "キャンバスを読み込み中…",
+        "askAi": "ここを AI に直してもらう",
+        "untitled": "無題の図",
+        "mobileCanvas": "キャンバス",
+        "mobileChat": "チャット"
+    },
+    "selection": {
+        "one": "選択中：{label}",
+        "many": "{count} 個の図形を選択中",
+        "shape": "図形",
+        "connector": "コネクタ",
+        "remove": "選択した図形を送らない",
+        "placeholder": "選択した図形をどう変えたいか書いてください"
+    },
+    "versions": {
+        "strip": "バージョン",
+        "created": "図を描きました",
+        "edited": "図を修正しました",
+        "undone": "この変更は取り消しました",
+        "undo": "変更を取り消す",
+        "redo": "変更をやり直す",
+        "compare": "比較",
+        "compareTitle": "バージョンを比較",
+        "currentCanvas": "現在のキャンバス",
+        "versionLabel": "バージョン {n}",
+        "previous": "前のバージョン",
+        "next": "次のバージョン",
+        "rendering": "プレビューを作成中…",
+        "showCode": "XML を表示",
+        "hideCode": "XML を隠す",
+        "drawing": "図を描いています…",
+        "editing": "図を修正しています…",
+        "loadingLibrary": "図形ライブラリを読み込み中…",
+        "libraryLoaded": "図形ライブラリを読み込みました",
+        "failed": "今回はうまくいきませんでした",
+        "failedRetrying": "うまくいかなかったので再試行しています",
+        "stopped": "停止しました",
+        "truncatedHint": "図が完成する前に出力の上限に達しました。もっと簡単な図を頼むか、設定 > 詳細 で最大出力トークン数を増やしてください。",
+        "noChanges": "目に見える変更はありません",
+        "listSeparator": "、",
+        "shapesAddedOne": "図形を 1 個追加",
+        "shapesAddedOther": "図形を {count} 個追加",
+        "edgesAddedOne": "コネクタを 1 本追加",
+        "edgesAddedOther": "コネクタを {count} 本追加",
+        "shapesChangedOne": "図形を 1 個変更",
+        "shapesChangedOther": "図形を {count} 個変更",
+        "edgesChangedOne": "コネクタを 1 本変更",
+        "edgesChangedOther": "コネクタを {count} 本変更",
+        "shapesRemovedOne": "図形を 1 個削除",
+        "shapesRemovedOther": "図形を {count} 個削除",
+        "edgesRemovedOne": "コネクタを 1 本削除",
+        "edgesRemovedOther": "コネクタを {count} 本削除",
+        "totals": "図形 {shapes} 個、コネクタ {edges} 本",
+        "restoreVersion": "v{n} に戻す",
+        "restoredVersion": "v{n} に戻しました",
+        "undoRestore": "元に戻す",
+        "noPreview": "プレビューなし",
+        "compareSince": "バージョン {n} から現在までの変更：",
+        "isOnCanvas": "現在のキャンバスはこのバージョンと同じです。",
+        "differsElsewhere": "1 ページ目の図形と線はバージョン {n} と同じですが、重なり順、ほかのページ、またはページ設定が変わっています。"
+    },
+    "lobby": {
+        "title": "どんな図を描きますか？",
+        "lede": "図の内容を説明するか、スクリーンショットや PDF をアップロードしてください。できあがるのは通常の draw.io の図なので、続けて編集もエクスポートもできます。",
+        "placeholder": "例：SMS 認証とリトライを含むログインのシーケンス図",
+        "recent": "最近の図",
+        "drawYourself": "白紙のキャンバスから始める",
+        "openFileHint": "手元の図の続きを編集"
     }
 }
diff --git a/lib/i18n/dictionaries/zh-Hant.json b/lib/i18n/dictionaries/zh-Hant.json
index 96282987..af301157 100644
--- a/lib/i18n/dictionaries/zh-Hant.json
+++ b/lib/i18n/dictionaries/zh-Hant.json
@@ -3,22 +3,19 @@
         "save": "儲存",
         "cancel": "取消",
         "close": "關閉",
-        "confirm": "確認",
         "clear": "清除",
         "edit": "編輯",
         "delete": "刪除",
-        "loading": "載入中...",
-        "new": "新建"
+        "loading": "載入中..."
     },
     "nav": {
-        "about": "關於",
         "editor": "編輯器",
-        "newChat": "開始新對話",
+        "newChat": "新增圖紙",
         "github": "GitHub",
         "settings": "設定",
-        "hidePanel": "隱藏聊天面板 (Ctrl+B)",
-        "showPanel": "顯示聊天面板 (Ctrl+B)",
-        "aiChat": "AI 聊天"
+        "hidePanel": "隱藏聊天面板",
+        "showPanel": "顯示聊天面板",
+        "aiChat": "AI 對話"
     },
     "providers": {
         "useServerDefault": "使用伺服器預設值",
@@ -39,12 +36,11 @@
     },
     "chat": {
         "placeholder": "描述您的圖表或上傳檔案...",
+        "inputLabel": "聊天輸入框",
         "send": "傳送",
         "stopGeneration": "停止產生",
         "sendMessage": "傳送訊息",
         "clearConversation": "清除對話",
-        "diagramHistory": "圖表歷史",
-        "saveDiagram": "儲存圖表",
         "uploadFile": "上傳檔案（圖片、PDF、文字）",
         "minimalStyle": "簡約",
         "styledMode": "精緻",
@@ -52,38 +48,37 @@
         "regenerate": "重新產生回應",
         "copyResponse": "複製回應",
         "copied": "已複製！",
-        "failedToCopy": "複製失敗",
         "failedToCopyDetail": "複製訊息失敗。請手動複製或檢查剪貼簿權限。",
         "goodResponse": "有幫助",
         "badResponse": "無幫助",
         "clickToEdit": "點擊編輯",
         "editMessage": "編輯訊息",
-        "saveAndSubmit": "儲存並提交",
-        "ExtractURL": "從 URL 擷取"
+        "saveAndSubmit": "儲存並送出",
+        "ExtractURL": "從 URL 擷取",
+        "attach": "新增",
+        "placeholderFollowUp": "說說想怎麼改，也可以先選取要改的圖形",
+        "emptyThread": "可以直接在畫布上畫，也可以在下面說說要畫什麼。",
+        "attachedImage": "附加的圖片",
+        "retry": "重試"
     },
     "examples": {
-        "title": "用 AI 建立圖表",
-        "subtitle": "描述您想要建立的內容或上傳圖片進行複製",
-        "quickExamples": "快速範例",
-        "paperToDiagram": "文件轉圖表",
+        "paperToDiagram": "論文轉圖表",
         "paperDescription": "上傳 .pdf, .txt, .md, .json, .csv, .py, .js, .ts 等檔案",
         "animatedDiagram": "動畫圖表",
         "animatedDescription": "繪製帶有動畫連接器的 Transformer 架構",
         "awsArchitecture": "AWS 架構",
         "awsDescription": "使用 AWS 圖示建立雲端架構圖",
-        "replicateFlowchart": "複製流程圖",
+        "replicateFlowchart": "複刻流程圖",
         "replicateDescription": "上傳並複製現有流程圖",
-        "creativeDrawing": "創意繪圖",
+        "creativeDrawing": "創意繪畫",
         "creativeDescription": "繪製有趣且富有創意的內容",
-        "cachedNote": "範例已快取，可即時回應",
+        "cachedNote": "範例會立即開啟，不呼叫模型。",
         "mcpServer": "MCP 伺服器",
         "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用"
     },
     "settings": {
         "title": "設定",
         "description": "配置您的應用程式設定。",
-        "apiKeysModels": "API 金鑰和模型",
-        "apiKeysModelsDescription": "配置 AI 提供商和 API 金鑰。",
         "accessCode": "存取碼",
         "accessCodePlaceholder": "輸入存取碼",
         "accessCodeDescription": "使用此應用程式需要存取碼。",
@@ -101,17 +96,10 @@
         "language": "語言",
         "languageDescription": "選擇介面語言。",
         "theme": "主題",
-        "themeDescription": "介面和 DrawIO 畫布的深色/淺色模式。",
-        "drawioStyle": "DrawIO 樣式",
-        "drawioStyleDescription": "畫布樣式",
-        "themeDefault": "預設",
-        "themeDark": "深色",
-        "themeMinimal": "簡約",
-        "themeSketch": "草圖",
-        "themeSimple": "簡單",
-        "diagramStyle": "圖表樣式",
-        "diagramStyleDescription": "切換簡約與精緻圖表輸出模式。",
-        "sendShortcut": "傳送快捷鍵",
+        "themeDescription": "介面用淺色還是深色。圖紙始終是白底，和匯出後的樣子一致。",
+        "diagramStyle": "圖形風格",
+        "diagramStyleDescription": "AI 畫新圖時的風格：精緻會用顏色和圖示，簡約只用樸素的圖形。",
+        "sendShortcut": "傳送快速鍵",
         "sendShortcutDescription": "選擇傳送訊息的方式。",
         "enterToSend": "Enter 傳送",
         "ctrlEnterToSend": "Cmd/Ctrl+Enter 傳送",
@@ -125,46 +113,47 @@
         "httpsProxy": "HTTPS 代理",
         "applyProxy": "套用",
         "proxyApplied": "代理設定已套用",
-        "diagramValidation": "圖表驗證（實驗性）",
-        "diagramValidationDescription": "使用視覺語言模型驗證產生的圖表。需要支援視覺的模型，如 GPT-5.2 或 Sonnet-4.5。",
-        "enabled": "已啟用",
-        "disabled": "已停用",
-        "customSystemMessage": "自訂系統訊息",
+        "diagramValidation": "用截圖檢查圖表（實驗性）",
+        "diagramValidationDescription": "每次畫完後，讓能看懂圖片的模型檢查截圖並要求修正。需要能讀圖片的模型。",
+        "customSystemMessage": "自訂指令",
         "customSystemMessageDescription": "新增自訂指示，將附加到 AI 的系統提示末尾。",
         "customSystemMessagePlaceholder": "例如：圖表始終使用藍色配色方案...",
         "maxOutputTokens": "最大輸出 token 數",
         "maxOutputTokensDescription": "單次回覆的額度，思考過程與圖表 XML 共用。若 AI 一直在思考卻沒有產生圖表，請將它調大。留空則使用預設值。",
-        "panelVisibility": "大廳面板",
-        "panelVisibilityDescription": "選擇在聊天大廳顯示哪些面板。",
-        "showRecentChats": "最近聊天",
-        "showMyTemplates": "我的範本",
-        "showQuickExamples": "快速範例"
+        "tabModels": "模型與金鑰",
+        "tabAppearance": "外觀",
+        "tabAdvanced": "進階",
+        "tabAbout": "關於",
+        "themeLight": "淺色",
+        "themeDarkMode": "深色",
+        "themeSystem": "跟隨系統",
+        "accessCodeSaved": "存取碼已儲存",
+        "proxyInvalid": "代理位址必須以 http:// 或 https:// 開頭",
+        "proxyFailed": "代理設定沒有生效",
+        "appVersion": "版本",
+        "projectWebsite": "專案網站"
     },
     "save": {
-        "title": "儲存圖表",
-        "description": "選擇格式和檔案名稱以儲存您的圖表。",
+        "title": "匯出圖紙",
+        "description": "選擇格式和檔案名稱。",
         "format": "格式",
         "filename": "檔案名稱",
         "filenamePlaceholder": "輸入檔案名稱",
         "formats": {
-            "drawio": "Draw.io XML",
+            "drawio": "draw.io 檔案",
             "png": "PNG 圖片",
             "svg": "SVG 圖片",
-            "xmlsvg": "可編輯 SVG"
+            "xmlsvg": "可編輯的 SVG"
         },
-        "savedSuccessfully": "儲存成功！"
-    },
-    "history": {
-        "title": "圖表歷史",
-        "description": "在 AI 修改之前儲存的每個圖表。\n點擊圖表以還原它",
-        "noHistory": "尚無歷史紀錄。傳送訊息以建立圖表歷史。",
-        "version": "版本",
-        "restoreTo": "還原到版本 {version}？"
+        "savedSuccessfully": "已匯出",
+        "hints": {
+            "drawio": "所有內容都能繼續編輯",
+            "png": "用於簡報和文件的圖片",
+            "svg": "放大也不會模糊的圖片",
+            "xmlsvg": "圖片，也能在 draw.io 裡開啟編輯"
+        }
     },
     "dialogs": {
-        "clearTitle": "清除所有內容？",
-        "clearDescription": "這將清除目前對話並重設圖表。此操作無法復原。",
-        "clearEverything": "清除所有內容",
         "clearSuccess": "已開始新對話"
     },
     "errors": {
@@ -189,6 +178,9 @@
         "sessionSaveFailed": "無法儲存這個對話。瀏覽器儲存空間可能已滿，請在歷史紀錄裡刪除舊對話後重試。",
         "sessionSaveFailedLeave": "無法儲存這個對話，瀏覽器儲存空間可能已滿。可以不儲存它、直接繼續，再在新對話的列表裡刪除舊對話。",
         "continueWithoutSaving": "不儲存，繼續",
+        "notADiagramFile": "{name} 不是 draw.io 圖表檔案。",
+        "fileTooLong": "{name}：內容超過了 {limit}k 字元的上限（{size}k 字元）",
+        "fileReadFailed": "無法讀取檔案：{name}",
         "llm": {
             "invalid_api_key": "服務商拒絕了這個 API Key，請在模型設定中檢查。",
             "forbidden": "服務商拒絕了這次請求。這個 Key 可能沒有使用該模型或該地區的權限。",
@@ -227,11 +219,6 @@
         "usedOf": "{used}/{limit}"
     },
     "tools": {
-        "generateDiagram": "產生圖表",
-        "editDiagram": "編輯圖表",
-        "appendDiagram": "繼續圖表",
-        "complete": "完成",
-        "error": "錯誤",
         "truncated": "已截斷"
     },
     "file": {
@@ -246,7 +233,8 @@
         "extract": "擷取",
         "Cancel": "取消",
         "enterUrl": "請輸入 URL",
-        "invalidFormat": "URL 格式無效"
+        "invalidFormat": "URL 格式無效",
+        "failed": "無法讀取這個網頁"
     },
     "reasoning": {
         "thinking": "思考中...",
@@ -279,30 +267,29 @@
     "sessionHistory": {
         "tooltip": "聊天歷史",
         "newChat": "新對話",
-        "empty": "暫無聊天紀錄",
+        "empty": "還沒有圖紙",
         "emptyHint": "開始對話吧",
         "today": "今天",
         "yesterday": "昨天",
         "thisWeek": "本週",
         "earlier": "更早",
-        "deleteTitle": "刪除此對話？",
-        "deleteDescription": "這將永久刪除此聊天工作階段及其圖表。此操作無法復原。",
-        "recentChats": "最近對話",
+        "deleteTitle": "刪除這張圖紙？",
+        "deleteDescription": "圖紙和它的對話會被永久刪除。",
         "justNow": "剛剛",
-        "searchPlaceholder": "搜尋對話...",
-        "noResults": "未找到對話"
+        "searchPlaceholder": "搜尋圖紙…",
+        "noResults": "未找到對話",
+        "rename": "重新命名",
+        "busyHint": "回答完成後才能切換"
     },
     "templates": {
-        "title": "我的範本",
-        "subtitle": "快速建立圖表的個人提示庫",
-        "emptyTitle": "尚無範本",
-        "emptyDescription": "建立您的第一個範本，開始構建您的個人提示庫",
-        "createFirst": "建立第一個範本",
+        "emptyTitle": "還沒有常用提示詞",
+        "emptyDescription": "把經常用的提示詞存起來，比如「畫一張……的 AWS 架構圖」，之後會出現在這裡。",
+        "createFirst": "儲存第一個提示詞",
         "neverUsed": "未使用過",
         "usedCount": "使用 {count} 次",
-        "myTemplates": "我的範本",
-        "createTitle": "建立範本",
-        "createDescription": "儲存常用提示以便重複使用。範本幫助您快速開始常用工作流程。",
+        "myTemplates": "常用提示詞",
+        "createTitle": "儲存提示詞",
+        "createDescription": "把提示詞存起來，以後再用。",
         "promptLabel": "提示",
         "promptPlaceholder": "描述您想建立的圖表...",
         "promptRequired": "提示為必填項",
@@ -310,33 +297,34 @@
         "titlePlaceholder": "輸入標題",
         "titleHint": "留空則使用提示的前 20 個字元",
         "descriptionLabel": "描述",
-        "descriptionPlaceholder": "為此範本新增描述",
-        "pinnedLabel": "釘選範本",
-        "pinnedHint": "釘選的範本會顯示在清單頂部",
-        "createButton": "建立範本",
-        "createFailed": "建立範本失敗，請重試。",
-        "editTitle": "編輯範本",
-        "editDescription": "更新範本內容和設定。",
-        "updateFailed": "更新範本失敗，請重試。",
+        "descriptionPlaceholder": "這個提示詞的用途",
+        "pinnedLabel": "置頂",
+        "pinnedHint": "置頂的提示詞顯示在清單最上面",
+        "createButton": "儲存",
+        "createFailed": "儲存提示詞失敗，請重試。",
+        "editTitle": "編輯提示詞",
+        "editDescription": "修改提示詞和它的設定。",
+        "updateFailed": "更新提示詞失敗，請重試。",
         "duplicate": "複製",
         "copySuffix": "(副本)",
-        "deleteTitle": "刪除此範本？",
-        "deleteDescription": "此操作將永久刪除該範本，無法復原。",
+        "deleteTitle": "刪除這個提示詞？",
+        "deleteDescription": "提示詞會被永久刪除。",
         "confirmSendTitle": "取代目前輸入？",
-        "confirmSendDescription": "您有未傳送的內容。傳送此範本將取代它。",
-        "confirmSendButton": "傳送範本",
-        "searchPlaceholder": "搜尋範本...",
-        "searchNoResults": "沒有符合的範本",
+        "confirmSendDescription": "輸入框裡有還沒傳送的內容，傳送這個提示詞會取代它。",
+        "confirmSendButton": "傳送",
+        "searchPlaceholder": "搜尋提示詞…",
+        "searchNoResults": "沒有符合的提示詞",
         "pin": "置頂",
         "unpin": "取消置頂",
-        "saveAsTemplate": "儲存為範本",
-        "exportTemplates": "匯出範本",
-        "importTemplates": "匯入範本",
-        "exportEmpty": "沒有可匯出的範本",
-        "exportSuccess": "成功匯出 {count} 個範本",
+        "saveAsTemplate": "儲存這個提示詞",
+        "exportTemplates": "匯出提示詞",
+        "importTemplates": "匯入提示詞",
+        "exportEmpty": "沒有可匯出的提示詞",
+        "exportSuccess": "已匯出 {count} 個提示詞",
         "importNoFile": "請選擇一個 JSON 檔案",
         "importFailed": "匯入失敗：{error}",
-        "importSuccess": "成功匯入 {imported} 個範本，跳過 {skipped} 個重複"
+        "importSuccess": "已匯入 {imported} 個提示詞，略過 {skipped} 個重複",
+        "saveDisabledHint": "先在輸入框裡寫好提示詞"
     },
     "validation": {
         "title": "驗證圖表",
@@ -357,8 +345,6 @@
         "regenerateWithFeedback": "使用驗證回饋重新產生圖表"
     },
     "modelConfig": {
-        "title": "AI 模型配置",
-        "description": "配置多個 AI 提供商和模型",
         "configure": "配置",
         "addProvider": "新增提供商",
         "addModel": "新增模型",
@@ -375,7 +361,7 @@
         "validationError": "驗證失敗",
         "addModelFirst": "請先新增至少一個模型以進行驗證",
         "providers": "提供商",
-        "addProviderHint": "新增提供商即可開始使用",
+        "addProviderHint": "還沒有服務商",
         "verified": "已驗證",
         "configuration": "配置",
         "displayName": "顯示名稱",
@@ -404,13 +390,14 @@
         "noModelsConfigured": "尚未配置模型",
         "modelIdEmpty": "模型 ID 不能為空",
         "modelIdExists": "此模型 ID 已存在",
-        "configureProviders": "配置 AI 提供商",
+        "configureProviders": "設定 AI 服務商",
         "selectProviderHint": "從列表中選擇提供商或新增以配置 API 金鑰和模型",
         "deleteConfirmDesc": "確定要刪除 {name} 嗎？這將移除所有配置的模型且無法復原。",
         "typeToConfirm": "輸入「{name}」以確認",
         "typeProviderName": "輸入提供商名稱...",
         "modelsConfiguredCount": "已配置 {count} 個模型",
         "validationFailedCount": "{count} 個模型驗證失敗",
+        "requestFailed": "請求失敗（{status}）",
         "cancel": "取消",
         "delete": "刪除",
         "clickToChange": "（點擊變更）",
@@ -430,7 +417,9 @@
         "unvalidatedModelWarning": "此模型尚未驗證",
         "serverDefaultModel": "伺服器預設模型",
         "showValue": "顯示值",
-        "hideValue": "隱藏值"
+        "hideValue": "隱藏值",
+        "noProvidersTitle": "正在使用伺服器上設定的模型",
+        "noProvidersHint": "想用其他模型，可以在左側清單下方新增服務商並填寫自己的 API Key。"
     },
     "admin": {
         "title": "管理員設定",
@@ -575,5 +564,106 @@
                 "description": "每日重置邊界所用的時區。"
             }
         }
+    },
+    "workspace": {
+        "toolbar": "畫布工具",
+        "undo": "復原",
+        "redo": "重做",
+        "select": "選取",
+        "shapes": "圖形庫",
+        "text": "文字",
+        "connector": "連線",
+        "freehand": "手繪",
+        "zoomIn": "放大",
+        "zoomOut": "縮小",
+        "zoomMenu": "縮放",
+        "fitWindow": "符合視窗",
+        "zoomReset": "實際大小",
+        "style": "樣式",
+        "more": "更多",
+        "export": "匯出",
+        "openFile": "開啟 .drawio 檔案",
+        "findReplace": "尋找與取代",
+        "layers": "圖層",
+        "outline": "縮圖",
+        "toggleGrid": "格線",
+        "togglePageView": "頁面檢視",
+        "insertImage": "插入圖片",
+        "insertLink": "插入連結",
+        "selectAll": "全選",
+        "editDiagram": "編輯圖表 XML",
+        "print": "列印",
+        "addPage": "新增頁面",
+        "renamePage": "重新命名",
+        "duplicatePage": "複製頁面",
+        "deletePage": "刪除頁面",
+        "canvasLoading": "正在載入畫布…",
+        "askAi": "讓 AI 改這裡",
+        "untitled": "未命名圖紙",
+        "mobileCanvas": "畫布",
+        "mobileChat": "對話"
+    },
+    "selection": {
+        "one": "已選取：{label}",
+        "many": "已選取 {count} 個圖形",
+        "shape": "圖形",
+        "connector": "連線",
+        "remove": "不傳送選取的圖形",
+        "placeholder": "說說要怎麼改選取的圖形"
+    },
+    "versions": {
+        "strip": "版本",
+        "created": "畫好了圖表",
+        "edited": "改好了圖表",
+        "undone": "這次修改已復原",
+        "undo": "復原修改",
+        "redo": "重做修改",
+        "compare": "比較",
+        "compareTitle": "比較版本",
+        "currentCanvas": "現在的畫布",
+        "versionLabel": "第 {n} 版",
+        "previous": "上一版",
+        "next": "下一版",
+        "rendering": "正在產生預覽…",
+        "showCode": "檢視 XML",
+        "hideCode": "收起 XML",
+        "drawing": "正在畫圖…",
+        "editing": "正在修改圖表…",
+        "loadingLibrary": "正在讀取圖形庫…",
+        "libraryLoaded": "讀取了圖形庫",
+        "failed": "這次沒有成功",
+        "failedRetrying": "這次沒有成功，正在重試",
+        "stopped": "已停止",
+        "truncatedHint": "回覆達到輸出長度上限，圖表沒有畫完。可以要一張簡單些的圖，或在 設定 > 進階 中調高最大輸出長度。",
+        "noChanges": "沒有可見的變化",
+        "listSeparator": "，",
+        "shapesAddedOne": "新增 1 個圖形",
+        "shapesAddedOther": "新增 {count} 個圖形",
+        "edgesAddedOne": "新增 1 條連線",
+        "edgesAddedOther": "新增 {count} 條連線",
+        "shapesChangedOne": "改了 1 個圖形",
+        "shapesChangedOther": "改了 {count} 個圖形",
+        "edgesChangedOne": "改了 1 條連線",
+        "edgesChangedOther": "改了 {count} 條連線",
+        "shapesRemovedOne": "刪了 1 個圖形",
+        "shapesRemovedOther": "刪了 {count} 個圖形",
+        "edgesRemovedOne": "刪了 1 條連線",
+        "edgesRemovedOther": "刪了 {count} 條連線",
+        "totals": "共 {shapes} 個圖形、{edges} 條連線",
+        "restoreVersion": "還原到 v{n}",
+        "restoredVersion": "已還原到 v{n}",
+        "undoRestore": "復原",
+        "noPreview": "沒有預覽",
+        "compareSince": "從第 {n} 版到現在，畫布上：",
+        "isOnCanvas": "畫布現在顯示的就是這一版。",
+        "differsElsewhere": "第一頁的形狀和連線與第 {n} 版相同，疊放順序、其他頁面或頁面設定有改動。"
+    },
+    "lobby": {
+        "title": "說說你要畫什麼",
+        "lede": "描述一張圖，或上傳截圖、PDF。畫出來的是標準的 draw.io 圖表，可以接著改，也可以匯出。",
+        "placeholder": "例如：使用者登入的時序圖，包含簡訊驗證碼和失敗重試",
+        "recent": "最近的圖紙",
+        "drawYourself": "從空白畫布開始",
+        "openFileHint": "接著編輯已有的圖"
     }
 }
diff --git a/lib/i18n/dictionaries/zh.json b/lib/i18n/dictionaries/zh.json
index 2c5a50c9..31a4e6e4 100644
--- a/lib/i18n/dictionaries/zh.json
+++ b/lib/i18n/dictionaries/zh.json
@@ -3,22 +3,19 @@
         "save": "保存",
         "cancel": "取消",
         "close": "关闭",
-        "confirm": "确认",
         "clear": "清除",
         "edit": "编辑",
         "delete": "删除",
-        "loading": "加载中...",
-        "new": "新建"
+        "loading": "加载中..."
     },
     "nav": {
-        "about": "关于",
         "editor": "编辑器",
-        "newChat": "开始新对话",
+        "newChat": "新建图纸",
         "github": "GitHub",
         "settings": "设置",
-        "hidePanel": "隐藏聊天面板 (Ctrl+B)",
-        "showPanel": "显示聊天面板 (Ctrl+B)",
-        "aiChat": "AI 聊天"
+        "hidePanel": "隐藏聊天面板",
+        "showPanel": "显示聊天面板",
+        "aiChat": "AI 对话"
     },
     "providers": {
         "useServerDefault": "使用服务器默认值",
@@ -39,12 +36,11 @@
     },
     "chat": {
         "placeholder": "描述您的图表或上传文件...",
+        "inputLabel": "聊天输入框",
         "send": "发送",
         "stopGeneration": "停止生成",
         "sendMessage": "发送消息",
         "clearConversation": "清除对话",
-        "diagramHistory": "图表历史",
-        "saveDiagram": "保存图表",
         "uploadFile": "上传文件（图片、PDF、文本）",
         "minimalStyle": "简约",
         "styledMode": "精致",
@@ -52,38 +48,37 @@
         "regenerate": "重新生成响应",
         "copyResponse": "复制响应",
         "copied": "已复制！",
-        "failedToCopy": "复制失败",
         "failedToCopyDetail": "复制消息失败。请手动复制或检查剪贴板权限。",
         "goodResponse": "有帮助",
         "badResponse": "无帮助",
         "clickToEdit": "点击编辑",
         "editMessage": "编辑消息",
         "saveAndSubmit": "保存并提交",
-        "ExtractURL": "从 URL 提取"
+        "ExtractURL": "从 URL 提取",
+        "attach": "添加",
+        "placeholderFollowUp": "说说想怎么改，也可以先选中要改的图形",
+        "emptyThread": "可以直接在画布上画，也可以在下面说说要画什么。",
+        "attachedImage": "附带的图片",
+        "retry": "重试"
     },
     "examples": {
-        "title": "用 AI 创建图表",
-        "subtitle": "描述您想要创建的内容或上传图片进行复制",
-        "quickExamples": "快速示例",
-        "paperToDiagram": "文档转图表",
+        "paperToDiagram": "论文转图表",
         "paperDescription": "上传 .pdf, .txt, .md, .json, .csv, .py, .js, .ts 等文件",
         "animatedDiagram": "动画图表",
         "animatedDescription": "绘制带有动画连接器的 Transformer 架构",
         "awsArchitecture": "AWS 架构",
         "awsDescription": "使用 AWS 图标创建云架构图",
-        "replicateFlowchart": "复制流程图",
+        "replicateFlowchart": "复刻流程图",
         "replicateDescription": "上传并复制现有流程图",
-        "creativeDrawing": "创意绘图",
+        "creativeDrawing": "创意绘画",
         "creativeDescription": "绘制有趣且富有创意的内容",
-        "cachedNote": "示例已缓存，可即时响应",
+        "cachedNote": "示例会立即打开，不调用模型。",
         "mcpServer": "MCP 服务器",
         "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用"
     },
     "settings": {
         "title": "设置",
         "description": "配置您的应用程序设置。",
-        "apiKeysModels": "API 密钥和模型",
-        "apiKeysModelsDescription": "配置 AI 提供商和 API 密钥。",
         "accessCode": "访问码",
         "accessCodePlaceholder": "输入访问码",
         "accessCodeDescription": "使用此应用程序需要访问码。",
@@ -101,16 +96,9 @@
         "language": "语言",
         "languageDescription": "选择界面语言。",
         "theme": "主题",
-        "themeDescription": "界面和 DrawIO 画布的深色/浅色模式。",
-        "drawioStyle": "DrawIO 样式",
-        "drawioStyleDescription": "画布样式",
-        "themeDefault": "默认",
-        "themeDark": "深色",
-        "themeMinimal": "简约",
-        "themeSketch": "草图",
-        "themeSimple": "简单",
-        "diagramStyle": "图表样式",
-        "diagramStyleDescription": "切换简约与精致图表输出模式。",
+        "themeDescription": "界面用浅色还是深色。图纸始终是白底，和导出后的样子一致。",
+        "diagramStyle": "图形风格",
+        "diagramStyleDescription": "AI 画新图时的风格：精致会用颜色和图标，简约只用朴素的图形。",
         "sendShortcut": "发送快捷键",
         "sendShortcutDescription": "选择发送消息的方式。",
         "enterToSend": "回车发送",
@@ -125,46 +113,47 @@
         "httpsProxy": "HTTPS 代理",
         "applyProxy": "应用",
         "proxyApplied": "代理设置已应用",
-        "diagramValidation": "图表验证（实验性）",
-        "diagramValidationDescription": "使用视觉语言模型验证生成的图表。需要支持视觉的模型，如 GPT-5.2 或 Sonnet-4.5。",
-        "enabled": "已启用",
-        "disabled": "已禁用",
-        "customSystemMessage": "自定义系统消息",
+        "diagramValidation": "用截图检查图表（实验性）",
+        "diagramValidationDescription": "每次画完后，让能看懂图片的模型检查截图并要求修正。需要能读图片的模型。",
+        "customSystemMessage": "自定义指令",
         "customSystemMessageDescription": "添加自定义指令，将附加到 AI 的系统提示末尾。",
         "customSystemMessagePlaceholder": "例如：图表始终使用蓝色配色方案...",
         "maxOutputTokens": "最大输出 token 数",
         "maxOutputTokensDescription": "单次回复的额度，思考过程和图表 XML 共用。如果 AI 一直在思考却没有生成图表，请把它调大。留空则使用默认值。",
-        "panelVisibility": "大厅面板",
-        "panelVisibilityDescription": "选择在聊天大厅显示哪些面板。",
-        "showRecentChats": "最近聊天",
-        "showMyTemplates": "我的模板",
-        "showQuickExamples": "快速示例"
+        "tabModels": "模型和密钥",
+        "tabAppearance": "外观",
+        "tabAdvanced": "高级",
+        "tabAbout": "关于",
+        "themeLight": "浅色",
+        "themeDarkMode": "深色",
+        "themeSystem": "跟随系统",
+        "accessCodeSaved": "访问码已保存",
+        "proxyInvalid": "代理地址必须以 http:// 或 https:// 开头",
+        "proxyFailed": "代理设置没有生效",
+        "appVersion": "版本",
+        "projectWebsite": "项目网站"
     },
     "save": {
-        "title": "保存图表",
-        "description": "选择格式和文件名以保存您的图表。",
+        "title": "导出图纸",
+        "description": "选择格式和文件名。",
         "format": "格式",
         "filename": "文件名",
         "filenamePlaceholder": "输入文件名",
         "formats": {
-            "drawio": "Draw.io XML",
+            "drawio": "draw.io 文件",
             "png": "PNG 图片",
             "svg": "SVG 图片",
-            "xmlsvg": "可编辑 SVG"
+            "xmlsvg": "可编辑的 SVG"
         },
-        "savedSuccessfully": "保存成功！"
-    },
-    "history": {
-        "title": "图表历史",
-        "description": "在 AI 修改之前保存的每个图表。\n点击图表以恢复它",
-        "noHistory": "尚无历史记录。发送消息以创建图表历史。",
-        "version": "版本",
-        "restoreTo": "恢复到版本 {version}？"
+        "savedSuccessfully": "已导出",
+        "hints": {
+            "drawio": "所有内容都能继续编辑",
+            "png": "用于幻灯片和文档的图片",
+            "svg": "放大也不会模糊的图片",
+            "xmlsvg": "图片，也能在 draw.io 里打开编辑"
+        }
     },
     "dialogs": {
-        "clearTitle": "清除所有内容？",
-        "clearDescription": "这将清除当前对话并重置图表。此操作无法撤消。",
-        "clearEverything": "清除所有内容",
         "clearSuccess": "已开始新对话"
     },
     "errors": {
@@ -189,6 +178,9 @@
         "sessionSaveFailed": "无法保存这个对话。浏览器存储空间可能已满，请在历史记录里删除旧对话后重试。",
         "sessionSaveFailedLeave": "无法保存这个对话，浏览器存储空间可能已满。可以不保存它、直接继续，再在新对话的列表里删除旧对话。",
         "continueWithoutSaving": "不保存，继续",
+        "notADiagramFile": "{name} 不是 draw.io 图表文件。",
+        "fileTooLong": "{name}：内容超过了 {limit}k 字符的上限（{size}k 字符）",
+        "fileReadFailed": "无法读取文件：{name}",
         "llm": {
             "invalid_api_key": "服务商拒绝了这个 API Key，请在模型设置里检查。",
             "forbidden": "服务商拒绝了这次请求。这个 Key 可能没有使用该模型或该地区的权限。",
@@ -227,11 +219,6 @@
         "usedOf": "{used}/{limit}"
     },
     "tools": {
-        "generateDiagram": "生成图表",
-        "editDiagram": "编辑图表",
-        "appendDiagram": "继续图表",
-        "complete": "完成",
-        "error": "错误",
         "truncated": "已截断"
     },
     "file": {
@@ -246,7 +233,8 @@
         "extract": "提取",
         "Cancel": "取消",
         "enterUrl": "请输入 URL",
-        "invalidFormat": "URL 格式无效"
+        "invalidFormat": "URL 格式无效",
+        "failed": "无法读取这个网页"
     },
     "reasoning": {
         "thinking": "思考中...",
@@ -279,30 +267,29 @@
     "sessionHistory": {
         "tooltip": "聊天历史",
         "newChat": "新对话",
-        "empty": "暂无聊天记录",
+        "empty": "还没有图纸",
         "emptyHint": "开始对话吧",
         "today": "今天",
         "yesterday": "昨天",
         "thisWeek": "本周",
         "earlier": "更早",
-        "deleteTitle": "删除此对话？",
-        "deleteDescription": "这将永久删除此聊天会话及其图表。此操作无法撤消。",
-        "recentChats": "最近对话",
+        "deleteTitle": "删除这张图纸？",
+        "deleteDescription": "图纸和它的对话会被永久删除。",
         "justNow": "刚刚",
-        "searchPlaceholder": "搜索对话...",
-        "noResults": "未找到对话"
+        "searchPlaceholder": "搜索图纸…",
+        "noResults": "未找到对话",
+        "rename": "重命名",
+        "busyHint": "回答完成后才能切换"
     },
     "templates": {
-        "title": "我的模板库",
-        "subtitle": "您的个人 prompt 库，快速创建图表",
-        "emptyTitle": "暂无模板",
-        "emptyDescription": "创建您的第一个模板，开始构建个人 prompt 库",
-        "createFirst": "创建第一个模板",
+        "emptyTitle": "还没有常用提示词",
+        "emptyDescription": "把经常用的提示词存起来，比如“画一张……的 AWS 架构图”，之后会出现在这里。",
+        "createFirst": "保存第一个提示词",
         "neverUsed": "未使用过",
         "usedCount": "使用 {count} 次",
-        "myTemplates": "我的模板",
-        "createTitle": "创建模板",
-        "createDescription": "保存常用 prompt 以便重复使用。模板帮助您快速开始常用工作流。",
+        "myTemplates": "常用提示词",
+        "createTitle": "保存提示词",
+        "createDescription": "把提示词存起来，以后再用。",
         "promptLabel": "提示词",
         "promptPlaceholder": "描述您想要创建的图表...",
         "promptRequired": "提示词不能为空",
@@ -310,33 +297,34 @@
         "titlePlaceholder": "输入标题",
         "titleHint": "留空则使用提示词前 20 个字符作为标题",
         "descriptionLabel": "描述",
-        "descriptionPlaceholder": "为此模板添加描述",
-        "pinnedLabel": "置顶模板",
-        "pinnedHint": "置顶的模板会显示在列表顶部",
-        "createButton": "创建模板",
-        "createFailed": "创建模板失败，请重试。",
-        "editTitle": "编辑模板",
-        "editDescription": "更新模板内容和设置。",
-        "updateFailed": "更新模板失败，请重试。",
+        "descriptionPlaceholder": "这个提示词的用途",
+        "pinnedLabel": "置顶",
+        "pinnedHint": "置顶的提示词显示在列表最上面",
+        "createButton": "保存",
+        "createFailed": "保存提示词失败，请重试。",
+        "editTitle": "编辑提示词",
+        "editDescription": "修改提示词和它的设置。",
+        "updateFailed": "更新提示词失败，请重试。",
         "duplicate": "复制",
         "copySuffix": "(副本)",
-        "deleteTitle": "删除此模板？",
-        "deleteDescription": "此操作将永久删除该模板，无法撤销。",
+        "deleteTitle": "删除这个提示词？",
+        "deleteDescription": "提示词会被永久删除。",
         "confirmSendTitle": "替换当前输入？",
-        "confirmSendDescription": "您有未发送的内容。发送此模板将替换它。",
-        "confirmSendButton": "发送模板",
-        "searchPlaceholder": "搜索模板...",
-        "searchNoResults": "没有匹配的模板",
+        "confirmSendDescription": "输入框里有还没发送的内容，发送这个提示词会替换它。",
+        "confirmSendButton": "发送",
+        "searchPlaceholder": "搜索提示词…",
+        "searchNoResults": "没有匹配的提示词",
         "pin": "置顶",
         "unpin": "取消置顶",
-        "saveAsTemplate": "保存为模板",
-        "exportTemplates": "导出模板",
-        "importTemplates": "导入模板",
-        "exportEmpty": "没有可导出的模板",
-        "exportSuccess": "成功导出 {count} 个模板",
+        "saveAsTemplate": "保存这个提示词",
+        "exportTemplates": "导出提示词",
+        "importTemplates": "导入提示词",
+        "exportEmpty": "没有可导出的提示词",
+        "exportSuccess": "已导出 {count} 个提示词",
         "importNoFile": "请选择一个 JSON 文件",
         "importFailed": "导入失败：{error}",
-        "importSuccess": "成功导入 {imported} 个模板，跳过 {skipped} 个重复"
+        "importSuccess": "已导入 {imported} 个提示词，跳过 {skipped} 个重复",
+        "saveDisabledHint": "先在输入框里写好提示词"
     },
     "validation": {
         "title": "验证图表",
@@ -357,8 +345,6 @@
         "regenerateWithFeedback": "使用验证反馈重新生成图表"
     },
     "modelConfig": {
-        "title": "AI 模型配置",
-        "description": "配置多个 AI 提供商和模型",
         "configure": "配置",
         "addProvider": "添加提供商",
         "addModel": "添加模型",
@@ -375,7 +361,7 @@
         "validationError": "验证失败",
         "addModelFirst": "请先添加至少一个模型以进行验证",
         "providers": "提供商",
-        "addProviderHint": "添加提供商即可开始使用",
+        "addProviderHint": "还没有服务商",
         "verified": "已验证",
         "configuration": "配置",
         "displayName": "显示名称",
@@ -404,13 +390,14 @@
         "noModelsConfigured": "尚未配置模型",
         "modelIdEmpty": "模型 ID 不能为空",
         "modelIdExists": "此模型 ID 已存在",
-        "configureProviders": "配置 AI 提供商",
+        "configureProviders": "设置 AI 服务商",
         "selectProviderHint": "从列表中选择提供商或添加新的以配置 API 密钥和模型",
         "deleteConfirmDesc": "确定要删除 {name} 吗？这将移除所有配置的模型且无法撤销。",
         "typeToConfirm": "输入 \"{name}\" 以确认",
         "typeProviderName": "输入提供商名称...",
         "modelsConfiguredCount": "已配置 {count} 个模型",
         "validationFailedCount": "{count} 个模型验证失败",
+        "requestFailed": "请求失败（{status}）",
         "cancel": "取消",
         "delete": "删除",
         "clickToChange": "（点击更改）",
@@ -430,7 +417,9 @@
         "unvalidatedModelWarning": "此模型尚未验证",
         "serverDefaultModel": "服务器默认模型",
         "showValue": "显示值",
-        "hideValue": "隐藏值"
+        "hideValue": "隐藏值",
+        "noProvidersTitle": "正在使用服务器上配置的模型",
+        "noProvidersHint": "想用其他模型，可以在左侧列表下方添加服务商并填写自己的 API Key。"
     },
     "admin": {
         "title": "管理员设置",
@@ -575,5 +564,106 @@
                 "description": "每日重置边界所用的时区。"
             }
         }
+    },
+    "workspace": {
+        "toolbar": "画布工具",
+        "undo": "撤销",
+        "redo": "重做",
+        "select": "选择",
+        "shapes": "图形库",
+        "text": "文字",
+        "connector": "连线",
+        "freehand": "手绘",
+        "zoomIn": "放大",
+        "zoomOut": "缩小",
+        "zoomMenu": "缩放",
+        "fitWindow": "适合窗口",
+        "zoomReset": "实际大小",
+        "style": "样式",
+        "more": "更多",
+        "export": "导出",
+        "openFile": "打开 .drawio 文件",
+        "findReplace": "查找和替换",
+        "layers": "图层",
+        "outline": "缩略图",
+        "toggleGrid": "网格",
+        "togglePageView": "页面视图",
+        "insertImage": "插入图片",
+        "insertLink": "插入链接",
+        "selectAll": "全选",
+        "editDiagram": "编辑图表 XML",
+        "print": "打印",
+        "addPage": "新建页面",
+        "renamePage": "重命名",
+        "duplicatePage": "复制页面",
+        "deletePage": "删除页面",
+        "canvasLoading": "正在加载画布…",
+        "askAi": "让 AI 改这里",
+        "untitled": "未命名图纸",
+        "mobileCanvas": "画布",
+        "mobileChat": "对话"
+    },
+    "selection": {
+        "one": "已选：{label}",
+        "many": "已选 {count} 个图形",
+        "shape": "图形",
+        "connector": "连线",
+        "remove": "不发送选中的图形",
+        "placeholder": "说说要怎么改选中的图形"
+    },
+    "versions": {
+        "strip": "版本",
+        "created": "画好了图表",
+        "edited": "改好了图表",
+        "undone": "这次修改已撤销",
+        "undo": "撤销修改",
+        "redo": "重做修改",
+        "compare": "对比",
+        "compareTitle": "对比版本",
+        "currentCanvas": "现在的画布",
+        "versionLabel": "第 {n} 版",
+        "previous": "上一版",
+        "next": "下一版",
+        "rendering": "正在生成预览…",
+        "showCode": "查看 XML",
+        "hideCode": "收起 XML",
+        "drawing": "正在画图…",
+        "editing": "正在修改图表…",
+        "loadingLibrary": "正在读取图形库…",
+        "libraryLoaded": "读取了图形库",
+        "failed": "这次没有成功",
+        "failedRetrying": "这次没有成功，正在重试",
+        "stopped": "已停止",
+        "truncatedHint": "回复达到了输出长度上限，图表没有画完。可以要一张简单些的图，或者在 设置 > 高级 里调高最大输出长度。",
+        "noChanges": "没有可见的变化",
+        "listSeparator": "，",
+        "shapesAddedOne": "新增 1 个图形",
+        "shapesAddedOther": "新增 {count} 个图形",
+        "edgesAddedOne": "新增 1 条连线",
+        "edgesAddedOther": "新增 {count} 条连线",
+        "shapesChangedOne": "改了 1 个图形",
+        "shapesChangedOther": "改了 {count} 个图形",
+        "edgesChangedOne": "改了 1 条连线",
+        "edgesChangedOther": "改了 {count} 条连线",
+        "shapesRemovedOne": "删了 1 个图形",
+        "shapesRemovedOther": "删了 {count} 个图形",
+        "edgesRemovedOne": "删了 1 条连线",
+        "edgesRemovedOther": "删了 {count} 条连线",
+        "totals": "共 {shapes} 个图形、{edges} 条连线",
+        "restoreVersion": "恢复到 v{n}",
+        "restoredVersion": "已恢复到 v{n}",
+        "undoRestore": "撤销",
+        "noPreview": "没有预览",
+        "compareSince": "从第 {n} 版到现在，画布上：",
+        "isOnCanvas": "画布现在显示的就是这一版。",
+        "differsElsewhere": "第一页的形状和连线与第 {n} 版相同，叠放顺序、其他页面或页面设置有改动。"
+    },
+    "lobby": {
+        "title": "说说你要画什么",
+        "lede": "描述一张图，或者上传截图、PDF。画出来的是标准的 draw.io 图表，可以接着改，也可以导出。",
+        "placeholder": "比如：用户登录的时序图，包含短信验证码和失败重试",
+        "recent": "最近的图纸",
+        "drawYourself": "从空白画布开始",
+        "openFileHint": "接着编辑已有的图"
     }
 }
diff --git a/lib/platform.ts b/lib/platform.ts
new file mode 100644
index 00000000..795c46c3
--- /dev/null
+++ b/lib/platform.ts
@@ -0,0 +1,7 @@
+/** True on macOS and iOS, where shortcuts use ⌘ instead of Ctrl */
+export const isMac =
+    typeof navigator !== "undefined" &&
+    /Mac|iPhone|iPad/.test(navigator.userAgent)
+
+/** Prefix for shortcut labels: "⌘" on Apple platforms, "Ctrl+" elsewhere */
+export const modKey = isMac ? "⌘" : "Ctrl+"
diff --git a/lib/relative-time.ts b/lib/relative-time.ts
new file mode 100644
index 00000000..10bd8cb4
--- /dev/null
+++ b/lib/relative-time.ts
@@ -0,0 +1,20 @@
+/** "3 min ago", "yesterday", or a short date, in the UI language */
+export function formatRelativeTime(
+    timestamp: number,
+    locale: string,
+    justNow: string,
+): string {
+    const diffMs = Date.now() - timestamp
+    const minutes = Math.floor(diffMs / 60_000)
+    if (minutes < 1) return justNow
+    const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" })
+    if (minutes < 60) return rtf.format(-minutes, "minute")
+    const hours = Math.floor(minutes / 60)
+    if (hours < 24) return rtf.format(-hours, "hour")
+    const days = Math.floor(hours / 24)
+    if (days < 7) return rtf.format(-days, "day")
+    return new Date(timestamp).toLocaleDateString(locale, {
+        month: "short",
+        day: "numeric",
+    })
+}
diff --git a/lib/session-storage.ts b/lib/session-storage.ts
index 33098367..7a8ed62a 100644
--- a/lib/session-storage.ts
+++ b/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 }),
     }
 }
 
diff --git a/lib/storage.ts b/lib/storage.ts
index 2f61181c..524eec53 100644
--- a/lib/storage.ts
+++ b/lib/storage.ts
@@ -1,26 +1,19 @@
-// Centralized localStorage keys for quota tracking and settings
-// Chat data is now stored in IndexedDB via session-storage.ts
+// Centralized localStorage keys for settings.
+// Chat data is stored in IndexedDB via session-storage.ts
 
 export const STORAGE_KEYS = {
-    // Quota tracking
-    requestCount: "next-ai-draw-io-request-count",
-    requestDate: "next-ai-draw-io-request-date",
-    tokenCount: "next-ai-draw-io-token-count",
-    tokenDate: "next-ai-draw-io-token-date",
-    tpmCount: "next-ai-draw-io-tpm-count",
-    tpmMinute: "next-ai-draw-io-tpm-minute",
-
-    // Settings
+    // Access code for password-protected deployments
     accessCode: "next-ai-draw-io-access-code",
     accessCodeRequired: "next-ai-draw-io-access-code-required",
-    aiProvider: "next-ai-draw-io-ai-provider",
-    aiBaseUrl: "next-ai-draw-io-ai-base-url",
-    aiApiKey: "next-ai-draw-io-ai-api-key",
-    aiModel: "next-ai-draw-io-ai-model",
 
     // Multi-model configuration
     modelConfigs: "next-ai-draw-io-model-configs",
-    selectedModelId: "next-ai-draw-io-selected-model-id",
+
+    // Appearance
+    darkMode: "next-ai-draw-io-dark-mode",
+    locale: "next-ai-draw-io-locale",
+    minimalStyle: "next-ai-draw-io-minimal-style",
+    panelWidth: "next-ai-draw-io-panel-width",
 
     // Chat input preferences
     sendShortcut: "next-ai-draw-io-send-shortcut",
@@ -34,8 +27,6 @@ export const STORAGE_KEYS = {
     // Output token budget per turn (empty = server default)
     maxOutputTokens: "next-ai-draw-io-max-output-tokens",
 
-    // Panel visibility
-    showRecentChats: "next-ai-draw-io-show-recent-chats",
-    showMyTemplates: "next-ai-draw-io-show-my-templates",
-    showQuickExamples: "next-ai-draw-io-show-quick-examples",
+    // Langfuse session id
+    sessionId: "next-ai-draw-io-session-id",
 } as const
diff --git a/lib/use-file-processor.tsx b/lib/use-file-processor.tsx
index 3f86d076..e4637577 100644
--- a/lib/use-file-processor.tsx
+++ b/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)
diff --git a/lib/version-text.ts b/lib/version-text.ts
new file mode 100644
index 00000000..1178a5ac
--- /dev/null
+++ b/lib/version-text.ts
@@ -0,0 +1,35 @@
+import type { ChangeSummary } from "@/lib/diagram-diff"
+import { formatMessage } from "@/lib/i18n/utils"
+
+type VersionDict = Record<string, string>
+
+const PARTS: [keyof ChangeSummary, string][] = [
+    ["shapesAdded", "shapesAdded"],
+    ["edgesAdded", "edgesAdded"],
+    ["shapesChanged", "shapesChanged"],
+    ["edgesChanged", "edgesChanged"],
+    ["shapesRemoved", "shapesRemoved"],
+    ["edgesRemoved", "edgesRemoved"],
+]
+
+/**
+ * "Added 2 shapes, changed 1 connector". Each dictionary entry has a
+ * singular (...One) and plural (...Other) form; languages without plurals
+ * use the same text for both.
+ */
+export function describeChanges(
+    summary: ChangeSummary,
+    t: VersionDict,
+): string {
+    const pieces = PARTS.filter(([field]) => summary[field] > 0).map(
+        ([field, key]) => {
+            const count = summary[field]
+            const template = count === 1 ? t[`${key}One`] : t[`${key}Other`]
+            return formatMessage(template ?? "", { count })
+        },
+    )
+    if (pieces.length === 0) return t.noChanges ?? ""
+    const text = pieces.join(t.listSeparator ?? ", ")
+    // Sentence case for scripts with letter case
+    return text.charAt(0).toUpperCase() + text.slice(1)
+}
diff --git a/next.config.ts b/next.config.ts
index 366b1351..03af07fd 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -4,6 +4,9 @@ import packageJson from "./package.json"
 const nextConfig: NextConfig = {
     /* config options here */
     output: "standalone",
+    // Keep the dev badge clear of the chat panel (right) and the page tabs
+    // (bottom left)
+    devIndicators: { position: "top-left" },
     // Support for subdirectory deployment (e.g., https://example.com/nextaidrawio)
     // Set NEXT_PUBLIC_BASE_PATH environment variable to your subdirectory path (e.g., /nextaidrawio)
     basePath: process.env.NEXT_PUBLIC_BASE_PATH || "",
diff --git a/package-lock.json b/package-lock.json
index 770e4bc6..18a4ba54 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,10 +60,8 @@
                 "prism-react-renderer": "^2.4.1",
                 "react": "^19.1.2",
                 "react-dom": "^19.1.2",
-                "react-drawio": "^1.0.3",
                 "react-icons": "^5.5.0",
                 "react-markdown": "^10.1.0",
-                "react-resizable-panels": "^3.0.6",
                 "remark-gfm": "^4.0.1",
                 "saxes": "^6.0.0",
                 "server-only": "^0.0.1",
@@ -72,7 +70,8 @@
                 "tailwindcss-animate": "^1.0.7",
                 "turndown": "^7.2.0",
                 "unpdf": "^1.4.0",
-                "zod": "^4.1.12"
+                "zod": "^4.1.12",
+                "zustand": "^5.0.15"
             },
             "devDependencies": {
                 "@anthropic-ai/tokenizer": "^0.0.4",
@@ -19658,15 +19657,6 @@
                 "react": "^19.3.0"
             }
         },
-        "node_modules/react-drawio": {
-            "version": "1.0.7",
-            "resolved": "https://registry.npmjs.org/react-drawio/-/react-drawio-1.0.7.tgz",
-            "integrity": "sha512-Vl3Bk7hLOl3k2i317CtxlG8axqBsLJMsuY6Sw5sT1wpvaT48L7o0JZQ1TW65+YF1GA1PuYeI3W2xpSggcB//wg==",
-            "license": "MIT",
-            "peerDependencies": {
-                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-            }
-        },
         "node_modules/react-icons": {
             "version": "5.7.0",
             "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.7.0.tgz",
@@ -19767,16 +19757,6 @@
                 }
             }
         },
-        "node_modules/react-resizable-panels": {
-            "version": "3.0.6",
-            "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-3.0.6.tgz",
-            "integrity": "sha512-b3qKHQ3MLqOgSS+FRYKapNkJZf5EQzuf6+RLiq1/IlTHw99YrZ2NJZLk4hQIzTnnIkRg2LUqyVinu6YWWpUYew==",
-            "license": "MIT",
-            "peerDependencies": {
-                "react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
-                "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
-            }
-        },
         "node_modules/react-style-singleton": {
             "version": "2.2.3",
             "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
@@ -24124,6 +24104,35 @@
                 "zod": "^3.25.0 || ^4.0.0"
             }
         },
+        "node_modules/zustand": {
+            "version": "5.0.15",
+            "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.15.tgz",
+            "integrity": "sha512-MpSEjRiBkA9crSYeOUH32rJC7SVqAbm0Fqcqge/bUi2PPoLcBWKOsG+C8mevmpr8TwXHBVkChbbJiyvkE+i/3A==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12.20.0"
+            },
+            "peerDependencies": {
+                "@types/react": ">=18.0.0",
+                "immer": ">=9.0.6",
+                "react": ">=18.0.0",
+                "use-sync-external-store": ">=1.2.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "immer": {
+                    "optional": true
+                },
+                "react": {
+                    "optional": true
+                },
+                "use-sync-external-store": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/zwitch": {
             "version": "2.0.4",
             "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
diff --git a/package.json b/package.json
index c1d1464e..46c23199 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,9 @@
     "private": true,
     "main": "dist-electron/main/index.js",
     "scripts": {
+        "predev": "node scripts/fetch-drawio.mjs",
         "dev": "next dev --turbopack --port 6002",
+        "prebuild": "node scripts/fetch-drawio.mjs",
         "build": "next build",
         "start": "next start --port 6001",
         "lint": "biome lint .",
@@ -82,10 +84,8 @@
         "prism-react-renderer": "^2.4.1",
         "react": "^19.1.2",
         "react-dom": "^19.1.2",
-        "react-drawio": "^1.0.3",
         "react-icons": "^5.5.0",
         "react-markdown": "^10.1.0",
-        "react-resizable-panels": "^3.0.6",
         "remark-gfm": "^4.0.1",
         "saxes": "^6.0.0",
         "server-only": "^0.0.1",
@@ -94,7 +94,8 @@
         "tailwindcss-animate": "^1.0.7",
         "turndown": "^7.2.0",
         "unpdf": "^1.4.0",
-        "zod": "^4.1.12"
+        "zod": "^4.1.12",
+        "zustand": "^5.0.15"
     },
     "optionalDependencies": {
         "@tailwindcss/oxide-linux-x64-gnu": "^4.1.18",
diff --git a/scripts/fetch-drawio.mjs b/scripts/fetch-drawio.mjs
new file mode 100644
index 00000000..cf1af18e
--- /dev/null
+++ b/scripts/fetch-drawio.mjs
@@ -0,0 +1,148 @@
+#!/usr/bin/env node
+/**
+ * Downloads the draw.io web app into public/drawio.
+ *
+ * The app embeds this copy from its own origin. Same origin lets the page
+ * call the draw.io editor directly (highlight AI changes, read the selection,
+ * undo AI edits, custom toolbar), which a cross-origin iframe does not allow.
+ *
+ * Runs before `dev` and `build`. It does nothing when the pinned version is
+ * already present, or when NEXT_PUBLIC_DRAWIO_BASE_URL points to an external
+ * draw.io (that setup does not need the bundled copy).
+ *
+ * The release asset (draw.war) is a zip file; it is unpacked with node:zlib
+ * so no extra dependency is needed.
+ */
+import crypto from "node:crypto"
+import fs from "node:fs"
+import path from "node:path"
+import zlib from "node:zlib"
+import nextEnv from "@next/env"
+
+// npm runs this before Next reads the .env files, so read them here: an
+// external draw.io set in .env.local must skip the download too
+nextEnv.loadEnvConfig(
+    process.cwd(),
+    process.env.npm_lifecycle_event === "predev",
+)
+
+// Pinned because the UI relies on draw.io internals; bump both deliberately
+const DRAWIO_VERSION = "v32.0.2"
+// SHA-256 of that release's draw.war, as GitHub lists it
+const DRAWIO_SHA256 =
+    "3cb8abec8e9bfc7504760c9cdc9194ecf7e8de178aa2a1d668801c32ecf1a1a7"
+const DEST = path.join(process.cwd(), "public", "drawio")
+const STAMP = path.join(DEST, ".version")
+const DOWNLOAD_URL = `https://github.com/jgraph/drawio/releases/download/${DRAWIO_VERSION}/draw.war`
+
+function log(message) {
+    console.log(`[fetch-drawio] ${message}`)
+}
+
+function readStamp() {
+    try {
+        return fs.readFileSync(STAMP, "utf8").trim()
+    } catch {
+        return null
+    }
+}
+
+// Minimal zip reader: finds the central directory and inflates each entry
+function* readZipEntries(buf) {
+    const EOCD_SIG = 0x06054b50
+    let eocd = -1
+    for (let i = buf.length - 22; i >= Math.max(0, buf.length - 65557); i--) {
+        if (buf.readUInt32LE(i) === EOCD_SIG) {
+            eocd = i
+            break
+        }
+    }
+    if (eocd < 0) throw new Error("Not a zip file (end record not found)")
+
+    const count = buf.readUInt16LE(eocd + 10)
+    let offset = buf.readUInt32LE(eocd + 16)
+
+    for (let n = 0; n < count; n++) {
+        if (buf.readUInt32LE(offset) !== 0x02014b50) {
+            throw new Error("Corrupt zip central directory")
+        }
+        const method = buf.readUInt16LE(offset + 10)
+        const compressedSize = buf.readUInt32LE(offset + 20)
+        const nameLength = buf.readUInt16LE(offset + 28)
+        const extraLength = buf.readUInt16LE(offset + 30)
+        const commentLength = buf.readUInt16LE(offset + 32)
+        const localOffset = buf.readUInt32LE(offset + 42)
+        const name = buf.toString("utf8", offset + 46, offset + 46 + nameLength)
+        offset += 46 + nameLength + extraLength + commentLength
+
+        const localNameLength = buf.readUInt16LE(localOffset + 26)
+        const localExtraLength = buf.readUInt16LE(localOffset + 28)
+        const start = localOffset + 30 + localNameLength + localExtraLength
+        const raw = buf.subarray(start, start + compressedSize)
+
+        if (name.endsWith("/")) continue
+        if (method !== 0 && method !== 8) {
+            throw new Error(`Unsupported zip compression ${method} (${name})`)
+        }
+        yield { name, data: method === 8 ? zlib.inflateRawSync(raw) : raw }
+    }
+}
+
+async function main() {
+    if (process.env.NEXT_PUBLIC_DRAWIO_BASE_URL) {
+        log("NEXT_PUBLIC_DRAWIO_BASE_URL is set, skipping the bundled copy")
+        return
+    }
+    if (readStamp() === DRAWIO_VERSION) return
+
+    log(`Downloading draw.io ${DRAWIO_VERSION} ...`)
+    let buf
+    try {
+        const res = await fetch(DOWNLOAD_URL)
+        if (!res.ok) throw new Error(`HTTP ${res.status} for ${DOWNLOAD_URL}`)
+        buf = Buffer.from(await res.arrayBuffer())
+        // The copy runs on the app's own origin: it must be the real release
+        const actual = crypto.createHash("sha256").update(buf).digest("hex")
+        if (actual !== DRAWIO_SHA256) {
+            throw new Error(`draw.war checksum mismatch (got ${actual})`)
+        }
+    } catch (error) {
+        if (fs.existsSync(path.join(DEST, "index.html"))) {
+            log(`Download failed (${error.message}); keeping the existing copy`)
+            return
+        }
+        console.error(
+            `[fetch-drawio] Download failed: ${error.message}\n` +
+                "The canvas needs draw.io. Check the network, or set " +
+                "NEXT_PUBLIC_DRAWIO_BASE_URL to an external draw.io.",
+        )
+        process.exit(1)
+    }
+
+    // Unpack next to the target, then swap it in
+    const tmp = `${DEST}.tmp-${process.pid}`
+    fs.rmSync(tmp, { recursive: true, force: true })
+    let files = 0
+    for (const { name, data } of readZipEntries(buf)) {
+        if (name.startsWith("WEB-INF/") || name.startsWith("META-INF/")) {
+            continue
+        }
+        const target = path.join(tmp, name)
+        if (!target.startsWith(tmp + path.sep)) {
+            throw new Error(`Unsafe path in archive: ${name}`)
+        }
+        fs.mkdirSync(path.dirname(target), { recursive: true })
+        fs.writeFileSync(target, data)
+        files++
+    }
+    fs.writeFileSync(path.join(tmp, ".version"), `${DRAWIO_VERSION}\n`)
+
+    fs.rmSync(DEST, { recursive: true, force: true })
+    fs.renameSync(tmp, DEST)
+    log(`Installed ${files} files into public/drawio`)
+}
+
+main().catch((error) => {
+    console.error(`[fetch-drawio] ${error.stack || error}`)
+    process.exit(1)
+})
diff --git a/stores/canvas-store.ts b/stores/canvas-store.ts
new file mode 100644
index 00000000..c4e99d74
--- /dev/null
+++ b/stores/canvas-store.ts
@@ -0,0 +1,54 @@
+import { create } from "zustand"
+
+export interface SelectedCell {
+    id: string
+    label: string
+    isEdge: boolean
+}
+
+/** Rectangle relative to the draw.io iframe's top-left corner */
+interface CanvasRect {
+    x: number
+    y: number
+    width: number
+    height: number
+}
+
+interface CanvasPage {
+    id: string
+    name: string
+}
+
+interface CanvasState {
+    /** The page can call the draw.io editor directly (same-origin iframe) */
+    hasEditor: boolean
+    canUndo: boolean
+    canRedo: boolean
+    /** Zoom in percent */
+    zoom: number
+    pages: CanvasPage[]
+    currentPageId: string | null
+    selection: SelectedCell[]
+    selectionRect: CanvasRect | null
+    /** Freehand drawing is on */
+    isFreehand: boolean
+    /** The format (style) panel is open */
+    isFormatOpen: boolean
+    isShapesOpen: boolean
+    set: (partial: Partial<Omit<CanvasState, "set">>) => void
+}
+
+export const useCanvasStore = create<CanvasState>((set) => ({
+    hasEditor: false,
+    canUndo: false,
+    canRedo: false,
+    zoom: 100,
+    pages: [],
+    currentPageId: null,
+    selection: [],
+    selectionRect: null,
+    isFreehand: false,
+    isFormatOpen: false,
+    isShapesOpen: false,
+    set: (partial) => set(partial),
+}))
diff --git a/stores/settings-store.ts b/stores/settings-store.ts
new file mode 100644
index 00000000..c7f4a9fa
--- /dev/null
+++ b/stores/settings-store.ts
@@ -0,0 +1,159 @@
+import { create } from "zustand"
+import { STORAGE_KEYS } from "@/lib/storage"
+
+export type ThemePreference = "light" | "dark" | "system"
+export type SendShortcut = "enter" | "ctrl-enter"
+
+export const PANEL_MIN_WIDTH = 320
+export const PANEL_MAX_WIDTH = 560
+export const PANEL_DEFAULT_WIDTH = 384
+
+interface SettingsState {
+    hydrated: boolean
+    theme: ThemePreference
+    /** Resolved from `theme` and the system setting */
+    isDark: boolean
+    sendShortcut: SendShortcut
+    minimalStyle: boolean
+    vlmValidationEnabled: boolean
+    customSystemMessage: string
+    maxOutputTokens: string
+    panelWidth: number
+    hydrate: () => void
+    setTheme: (theme: ThemePreference) => void
+    setSendShortcut: (value: SendShortcut) => void
+    setMinimalStyle: (value: boolean) => void
+    setVlmValidationEnabled: (value: boolean) => void
+    setCustomSystemMessage: (value: string) => void
+    setMaxOutputTokens: (value: string) => void
+    setPanelWidth: (value: number) => void
+}
+
+function read(key: string): string | null {
+    try {
+        return localStorage.getItem(key)
+    } catch {
+        return null
+    }
+}
+
+function write(key: string, value: string | null) {
+    try {
+        if (value === null) localStorage.removeItem(key)
+        else localStorage.setItem(key, value)
+    } catch {
+        // Storage can be unavailable (private mode, quota)
+    }
+}
+
+function systemPrefersDark(): boolean {
+    return (
+        typeof window !== "undefined" &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+    )
+}
+
+function applyDarkClass(isDark: boolean) {
+    document.documentElement.classList.toggle("dark", isDark)
+}
+
+export function clampPanelWidth(width: number): number {
+    return Math.min(PANEL_MAX_WIDTH, Math.max(PANEL_MIN_WIDTH, width))
+}
+
+export const useSettingsStore = create<SettingsState>((set, get) => ({
+    hydrated: false,
+    theme: "system",
+    isDark: false,
+    sendShortcut: "ctrl-enter",
+    minimalStyle: false,
+    vlmValidationEnabled: false,
+    customSystemMessage: "",
+    maxOutputTokens: "",
+    panelWidth: PANEL_DEFAULT_WIDTH,
+
+    hydrate: () => {
+        if (get().hydrated) return
+        // Stored as "true"/"false"; missing means follow the system
+        const storedDark = read(STORAGE_KEYS.darkMode)
+        const theme: ThemePreference =
+            storedDark === "true"
+                ? "dark"
+                : storedDark === "false"
+                  ? "light"
+                  : "system"
+        const isDark =
+            theme === "system" ? systemPrefersDark() : theme === "dark"
+        const width = Number(read(STORAGE_KEYS.panelWidth))
+        set({
+            hydrated: true,
+            theme,
+            isDark,
+            sendShortcut:
+                read(STORAGE_KEYS.sendShortcut) === "enter"
+                    ? "enter"
+                    : "ctrl-enter",
+            minimalStyle: read(STORAGE_KEYS.minimalStyle) === "true",
+            vlmValidationEnabled:
+                read(STORAGE_KEYS.vlmValidationEnabled) === "true",
+            customSystemMessage: read(STORAGE_KEYS.customSystemMessage) ?? "",
+            maxOutputTokens: read(STORAGE_KEYS.maxOutputTokens) ?? "",
+            panelWidth: width ? clampPanelWidth(width) : PANEL_DEFAULT_WIDTH,
+        })
+        applyDarkClass(isDark)
+
+        // Follow system changes while the preference is "system"
+        window
+            .matchMedia("(prefers-color-scheme: dark)")
+            .addEventListener("change", (event) => {
+                if (get().theme !== "system") return
+                set({ isDark: event.matches })
+                applyDarkClass(event.matches)
+            })
+    },
+
+    setTheme: (theme) => {
+        write(
+            STORAGE_KEYS.darkMode,
+            theme === "system" ? null : String(theme === "dark"),
+        )
+        const isDark =
+            theme === "system" ? systemPrefersDark() : theme === "dark"
+        set({ theme, isDark })
+        applyDarkClass(isDark)
+    },
+    setSendShortcut: (value) => {
+        write(STORAGE_KEYS.sendShortcut, value)
+        set({ sendShortcut: value })
+    },
+    setMinimalStyle: (value) => {
+        write(STORAGE_KEYS.minimalStyle, String(value))
+        set({ minimalStyle: value })
+    },
+    setVlmValidationEnabled: (value) => {
+        write(STORAGE_KEYS.vlmValidationEnabled, String(value))
+        set({ vlmValidationEnabled: value })
+    },
+    setCustomSystemMessage: (value) => {
+        write(STORAGE_KEYS.customSystemMessage, value)
+        set({ customSystemMessage: value })
+    },
+    setMaxOutputTokens: (value) => {
+        const digitsOnly = value.replace(/\D/g, "")
+        write(STORAGE_KEYS.maxOutputTokens, digitsOnly)
+        set({ maxOutputTokens: digitsOnly })
+    },
+    setPanelWidth: (value) => {
+        const width = clampPanelWidth(Math.round(value))
+        write(STORAGE_KEYS.panelWidth, String(width))
+        set({ panelWidth: width })
+    },
+}))
+
+/**
+ * Inline script for <head>: applies the dark class before the first paint so
+ * dark mode does not flash white while the page loads.
+ */
+export const THEME_INIT_SCRIPT = `(function(){try{var v=localStorage.getItem(${JSON.stringify(
+    STORAGE_KEYS.darkMode,
+)});var d=v==="true"||(v===null&&window.matchMedia("(prefers-color-scheme: dark)").matches);if(d)document.documentElement.classList.add("dark")}catch(e){}})()`
diff --git a/stores/ui-store.ts b/stores/ui-store.ts
new file mode 100644
index 00000000..e3aef83a
--- /dev/null
+++ b/stores/ui-store.ts
@@ -0,0 +1,62 @@
+import { create } from "zustand"
+
+export type SettingsTab = "models" | "appearance" | "advanced" | "about"
+export type MobileView = "canvas" | "chat"
+
+interface UiState {
+    /** Desktop: the floating chat panel is open */
+    panelOpen: boolean
+    /** The start screen was put away (drawing by hand, an opened file) */
+    heroDismissed: boolean
+    /** Phones: which half of the app is visible */
+    mobileView: MobileView
+    settingsOpen: boolean
+    settingsTab: SettingsTab
+    /** Version shown in the compare dialog, or null when closed */
+    compareVersionId: string | null
+    saveDialogOpen: boolean
+    /** Bumped to ask the composer to take focus */
+    focusComposerToken: number
+    setPanelOpen: (open: boolean) => void
+    setHeroDismissed: (dismissed: boolean) => void
+    togglePanel: () => void
+    setMobileView: (view: MobileView) => void
+    openSettings: (tab?: SettingsTab) => void
+    setSettingsOpen: (open: boolean) => void
+    setSettingsTab: (tab: SettingsTab) => void
+    openCompare: (versionId: string) => void
+    closeCompare: () => void
+    setSaveDialogOpen: (open: boolean) => void
+    focusComposer: () => void
+}
+
+export const useUiStore = create<UiState>((set) => ({
+    panelOpen: true,
+    heroDismissed: false,
+    mobileView: "chat",
+    settingsOpen: false,
+    settingsTab: "models",
+    compareVersionId: null,
+    saveDialogOpen: false,
+    focusComposerToken: 0,
+    setPanelOpen: (open) => set({ panelOpen: open }),
+    setHeroDismissed: (dismissed) => set({ heroDismissed: dismissed }),
+    togglePanel: () => set((state) => ({ panelOpen: !state.panelOpen })),
+    setMobileView: (view) => set({ mobileView: view }),
+    openSettings: (tab) =>
+        set((state) => ({
+            settingsOpen: true,
+            settingsTab: tab ?? state.settingsTab,
+        })),
+    setSettingsOpen: (open) => set({ settingsOpen: open }),
+    setSettingsTab: (tab) => set({ settingsTab: tab }),
+    openCompare: (versionId) => set({ compareVersionId: versionId }),
+    closeCompare: () => set({ compareVersionId: null }),
+    setSaveDialogOpen: (open) => set({ saveDialogOpen: open }),
+    focusComposer: () =>
+        set((state) => ({
+            panelOpen: true,
+            mobileView: "chat",
+            focusComposerToken: state.focusComposerToken + 1,
+        })),
+}))
diff --git a/stores/versions-store.ts b/stores/versions-store.ts
new file mode 100644
index 00000000..01993e75
--- /dev/null
+++ b/stores/versions-store.ts
@@ -0,0 +1,145 @@
+import { nanoid } from "nanoid"
+import { create } from "zustand"
+import type { ChangeSummary } from "@/lib/diagram-diff"
+import { EMPTY_SUMMARY } from "@/lib/diagram-diff"
+
+/** One diagram state produced by an AI change, shown as a card in the chat */
+export interface DiagramVersion {
+    id: string
+    /** Full multi-page document after the change */
+    xml: string
+    /** Diagram before the change; kept only on the latest version */
+    beforeXml?: string
+    /** SVG data URL thumbnail; "" when none could be made */
+    svg?: string
+    /** Index of the user message that started this turn */
+    turnIndex: number
+    toolCallId?: string
+    summary: ChangeSummary
+    /** Drawn on an empty canvas (the card shows totals, not changes) */
+    fromScratch?: boolean
+    /** Saved with the session: this version is what the canvas shows */
+    onCanvas?: boolean
+    /** Saved with the session: this version's change was undone */
+    undone?: boolean
+}
+
+// The two flags live on the versions so they are saved with the session
+function withFlags(
+    versions: DiagramVersion[],
+    onCanvasId: string | null,
+    undoneId: string | null,
+): DiagramVersion[] {
+    return versions.map(({ onCanvas, undone, ...rest }) => ({
+        ...rest,
+        ...(rest.id === onCanvasId && { onCanvas: true }),
+        ...(rest.id === undoneId && { undone: true }),
+    }))
+}
+
+// Versions are stored with the session; keep the list bounded
+export const MAX_VERSIONS = 20
+
+interface VersionsState {
+    versions: DiagramVersion[]
+    /** The change on the latest version was undone with its card's button */
+    undoneVersionId: string | null
+    /** The version the canvas shows (null after an undo or hand edits) */
+    onCanvasVersionId: string | null
+    setVersions: (versions: DiagramVersion[]) => void
+    addVersion: (version: Omit<DiagramVersion, "id">) => string
+    updateVersion: (id: string, patch: Partial<DiagramVersion>) => void
+    /** Drop versions from turns that are being re-run (edit or regenerate) */
+    removeFromTurn: (turnIndex: number) => void
+    /** The change of this version was undone; null: no undone change */
+    setUndone: (id: string | null) => void
+    /** This version is on the canvas again (restored or redone) */
+    setOnCanvas: (id: string) => void
+    /** The canvas was changed by hand (undo included): no version is on it */
+    clearCanvasFlags: () => void
+    clear: () => void
+}
+
+export const useVersionsStore = create<VersionsState>((set) => ({
+    versions: [],
+    undoneVersionId: null,
+    onCanvasVersionId: null,
+    setVersions: (versions) =>
+        set({
+            // A missing thumbnail could not be made: no "rendering" forever
+            versions: versions.map((v) => ({ ...v, svg: v.svg ?? "" })),
+            undoneVersionId: versions.find((v) => v.undone)?.id ?? null,
+            onCanvasVersionId: versions.find((v) => v.onCanvas)?.id ?? null,
+        }),
+    addVersion: (version) => {
+        const id = nanoid(10)
+        set((state) => {
+            // Only the newest version keeps its "before" XML
+            const older = state.versions.map(({ beforeXml, ...rest }) => rest)
+            const next = [...older, { ...version, id }].slice(-MAX_VERSIONS)
+            return {
+                versions: withFlags(next, id, null),
+                undoneVersionId: null,
+                onCanvasVersionId: id,
+            }
+        })
+        return id
+    },
+    updateVersion: (id, patch) =>
+        set((state) => ({
+            versions: state.versions.map((v) =>
+                v.id === id ? { ...v, ...patch } : v,
+            ),
+        })),
+    removeFromTurn: (turnIndex) =>
+        set((state) => {
+            const versions = state.versions.filter(
+                (v) => v.turnIndex < turnIndex,
+            )
+            // The canvas goes back to the snapshot before that turn, which
+            // can hold hand edits made after the latest kept version
+            return {
+                versions: withFlags(versions, null, null),
+                undoneVersionId: null,
+                onCanvasVersionId: null,
+            }
+        }),
+    setUndone: (id) =>
+        set((state) => ({
+            versions: withFlags(state.versions, null, id),
+            undoneVersionId: id,
+            onCanvasVersionId: null,
+        })),
+    setOnCanvas: (id) =>
+        set((state) => ({
+            versions: withFlags(state.versions, id, null),
+            undoneVersionId: null,
+            onCanvasVersionId: id,
+        })),
+    clearCanvasFlags: () =>
+        set((state) =>
+            state.onCanvasVersionId === null && state.undoneVersionId === null
+                ? state
+                : {
+                      versions: withFlags(state.versions, null, null),
+                      undoneVersionId: null,
+                      onCanvasVersionId: null,
+                  },
+        ),
+    clear: () =>
+        set({ versions: [], undoneVersionId: null, onCanvasVersionId: null }),
+}))
+
+/** Convert the old `diagramHistory` list ({svg, xml}) saved by earlier versions */
+export function versionsFromLegacyHistory(
+    history: { svg: string; xml: string }[] | undefined,
+): DiagramVersion[] {
+    if (!history?.length) return []
+    return history.slice(-MAX_VERSIONS).map((entry, index) => ({
+        id: `legacy-${index}`,
+        xml: entry.xml,
+        svg: entry.svg,
+        turnIndex: -1,
+        summary: { ...EMPTY_SUMMARY },
+    }))
+}
diff --git a/tests/e2e/chat-errors.spec.ts b/tests/e2e/chat-errors.spec.ts
index b29c0b66..2fa20df0 100644
--- a/tests/e2e/chat-errors.spec.ts
+++ b/tests/e2e/chat-errors.spec.ts
@@ -32,9 +32,10 @@ test("a rejected key shows a hint, the provider's words and a settings button",
     // First match: the Next.js dev overlay at the end also lists the error
     await expect(page.getByText("Authentication Fails").first()).toBeVisible()
     await page.getByRole("button", { name: "Open model settings" }).click()
-    await expect(
-        page.getByRole("dialog", { name: "AI Model Configuration" }),
-    ).toBeVisible()
+    // Settings opens on its models tab
+    const dialog = page.getByRole("dialog", { name: "Settings" })
+    await expect(dialog).toBeVisible()
+    await expect(dialog.getByText("Providers", { exact: true })).toBeVisible()
 })
 
 test("an error before the stream shows its text, not raw JSON", async ({
@@ -98,7 +99,8 @@ test("a refused server key shows only the quota hint and a settings button", asy
         0,
     )
     await page.getByRole("button", { name: "Open model settings" }).click()
-    await expect(
-        page.getByRole("dialog", { name: "AI Model Configuration" }),
-    ).toBeVisible()
+    // Settings opens on its models tab
+    const dialog = page.getByRole("dialog", { name: "Settings" })
+    await expect(dialog).toBeVisible()
+    await expect(dialog.getByText("Providers", { exact: true })).toBeVisible()
 })
diff --git a/tests/e2e/chat.spec.ts b/tests/e2e/chat.spec.ts
index 13f410d1..61726309 100644
--- a/tests/e2e/chat.spec.ts
+++ b/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()
     })
 })
diff --git a/tests/e2e/diagram-content.spec.ts b/tests/e2e/diagram-content.spec.ts
index 27d130f1..452d3c03 100644
--- a/tests/e2e/diagram-content.spec.ts
+++ b/tests/e2e/diagram-content.spec.ts
@@ -1,5 +1,11 @@
+import zlib from "node:zlib"
 import { expect, type Page, test } from "@playwright/test"
-import { getIframe, sendMessage, waitForCompleteCount } from "./lib/fixtures"
+import {
+    getIframe,
+    openDrawioFile,
+    sendMessage,
+    waitForCompleteCount,
+} from "./lib/fixtures"
 
 /**
  * Checks what draw.io actually shows after the diagram tools, not only the
@@ -45,6 +51,15 @@ const cell = (id: string, label: string, x: number) =>
 const page = (id: string, cells: string) =>
     `<diagram id="${id}" name="${id}"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/>${cells}</root></mxGraphModel></diagram>`
 
+// A screenshot check that finds a problem
+const FAILED_CHECK = {
+    valid: false,
+    issues: [
+        { type: "overlap", severity: "critical", description: "Boxes overlap" },
+    ],
+    suggestions: ["Move them apart"],
+}
+
 const sse = (events: object[]) =>
     events.map((e) => `data: ${JSON.stringify(e)}\n\n`).join("")
 const EDIT_GAMMA = {
@@ -127,7 +142,9 @@ test("display_diagram replaces the document with the fixed diagram", async ({
     await sendMessage(p, "Draw two pages")
     await waitForCompleteCount(p, 1)
     await expect(canvas.getByText("Old A")).toBeVisible({ timeout: 15000 })
-    await expect(canvas.getByText("Second", { exact: true })).toBeVisible()
+    // The app's page switcher (draw.io's own page tabs are hidden)
+    const pageTabs = p.getByTestId("page-tabs")
+    await expect(pageTabs.getByText("Second", { exact: true })).toBeVisible()
 
     await sendMessage(p, "Start over with three boxes")
     await waitForCompleteCount(p, 2)
@@ -140,7 +157,7 @@ test("display_diagram replaces the document with the fixed diagram", async ({
     }
     // The old pages are gone
     await expect(canvas.getByText("Old A")).toHaveCount(0)
-    await expect(canvas.getByText("Second", { exact: true })).toHaveCount(0)
+    await expect(pageTabs.getByText("Second", { exact: true })).toHaveCount(0)
 })
 
 test("an edit with a fixable cell is fixed, not rejected", async ({
@@ -221,9 +238,14 @@ test("edit_diagram applies all operations or none", async ({ page: p }) => {
     await expect(canvas.getByText("Alpha", { exact: true })).toHaveCount(0)
 
     await sendMessage(p, "Change again")
-    await expect(p.getByText(/No changes were made/).first()).toBeAttached({
-        timeout: 15000,
-    })
+    // The failed call's row opens to show the error
+    await p
+        .locator('[data-testid="tool-row"][data-tool-state="output-error"]')
+        .first()
+        .getByRole("button")
+        .first()
+        .click({ timeout: 15000 })
+    await expect(p.getByText(/No changes were made/).first()).toBeAttached()
     await p.waitForTimeout(1000)
     await expect(canvas.getByText("Gamma", { exact: true })).toBeVisible()
     await expect(canvas.getByText("Broken", { exact: true })).toHaveCount(0)
@@ -609,9 +631,9 @@ test("a broken edit's preview is undone after a shape library call", async ({
     await waitForCompleteCount(p, 1)
     await sendMessage(p, "Add another box")
     // The preview shows Gamma only for a moment; afterwards it must be gone
-    await expect(p.getByText("Get Shape Library").first()).toBeVisible({
-        timeout: 15000,
-    })
+    await expect(
+        p.locator('[data-tool-name="get_shape_library"]').first(),
+    ).toBeVisible({ timeout: 15000 })
     await p.waitForTimeout(2000)
     await expect(canvas.getByText("Gamma", { exact: true })).toHaveCount(0)
     await expect(canvas.getByText("Alpha", { exact: true })).toBeVisible()
@@ -640,10 +662,12 @@ test("a drawing rejected by the checks undoes its preview", async ({
     await expect(canvas.getByText("Beta", { exact: true })).toBeVisible({
         timeout: 15000,
     })
-    // The tool card shows the rejection
-    await expect(p.locator('text="Error"').first()).toBeVisible({
-        timeout: 15000,
-    })
+    // The tool row shows the rejection
+    await expect(
+        p
+            .locator('[data-testid="tool-row"][data-tool-state="output-error"]')
+            .first(),
+    ).toBeVisible({ timeout: 15000 })
     await p.waitForTimeout(1000)
     await expect(canvas.getByText("Beta", { exact: true })).toHaveCount(0)
     await expect(canvas.getByText("Alpha", { exact: true })).toBeVisible()
@@ -735,3 +759,345 @@ test("stopping during the screenshot check lets the next message go at once", as
         .find((part: any) => part.type === "tool-display_diagram")
     expect(draw?.state).toBe("output-available")
 })
+
+test("the request after a failed screenshot check keeps the model and diagram", async ({
+    page: p,
+}) => {
+    // After a failed check the SDK sends the next request itself; it must
+    // carry the turn's model headers and diagram
+    await p.addInitScript(() => {
+        localStorage.setItem("next-ai-draw-io-vlm-validation-enabled", "true")
+    })
+    const requests: { body: any; headers: Record<string, string> }[] = []
+    await p.route("**/api/chat", async (route) => {
+        requests.push({
+            body: route.request().postDataJSON(),
+            headers: route.request().headers(),
+        })
+        await route.fulfill({
+            status: 200,
+            contentType: "text/event-stream",
+            body: drawReply(`d${requests.length}`, cell("a", "Alpha", 40)),
+        })
+    })
+    let checks = 0
+    await p.route("**/api/validate-diagram", async (route) => {
+        checks++
+        await new Promise((r) => setTimeout(r, 500))
+        await route.fulfill({
+            status: 200,
+            contentType: "text/plain",
+            body: JSON.stringify(
+                checks === 1
+                    ? FAILED_CHECK
+                    : { valid: true, issues: [], suggestions: [] },
+            ),
+        })
+    })
+    await p.goto("/", { waitUntil: "networkidle" })
+    await getIframe(p).waitFor({ state: "visible", timeout: 30000 })
+    await sendMessage(p, "Draw a box")
+    await expect.poll(() => requests.length, { timeout: 20000 }).toBe(2)
+    const [first, retry] = requests
+    expect(retry.body.sessionId).toBe(first.body.sessionId)
+    expect(typeof retry.body.xml).toBe("string")
+    for (const name of Object.keys(first.headers)) {
+        if (name.startsWith("x-")) {
+            expect(retry.headers[name], name).toBe(first.headers[name])
+        }
+    }
+})
+
+// A display_diagram cut off by the output limit: its last cell is half
+// written, so the model has to continue with append_diagram
+const CUT = toolCallEvents("d2", "display_diagram", {
+    xml: `${cell("b", "Beta", 40)}<mxCell id="c" value="Gam`,
+})
+const cutReply = [
+    sse([{ type: "start" }, CUT.start, ...CUT.deltas]),
+    1500,
+    `${sse([CUT.done, { type: "finish" }])}data: [DONE]\n\n`,
+]
+
+test("a cut off drawing stays while it is continued, and goes if that fails", async ({
+    page: p,
+}) => {
+    const canvas = await chunkedReplies(p, [
+        [drawReply("d1", cell("a", "Alpha", 40))],
+        cutReply,
+        [
+            sse([{ type: "start" }]),
+            ...KEEP_OPEN.slice(0, 10),
+            `${sse([{ type: "error", errorText: "Upstream connection lost" }])}data: [DONE]\n\n`,
+        ],
+    ])
+    await sendMessage(p, "Draw a box")
+    await waitForCompleteCount(p, 1)
+    await sendMessage(p, "Draw a bigger one")
+    // The cut off call has its result; the continuation is running
+    await expect(
+        p.locator(
+            '[data-tool-name="display_diagram"][data-tool-state="output-error"]',
+        ),
+    ).toBeVisible({ timeout: 15000 })
+    await p.waitForTimeout(800)
+    await expect(canvas.getByText("Beta", { exact: true })).toBeVisible()
+    await expect(p.getByText("Upstream connection lost").first()).toBeVisible({
+        timeout: 15000,
+    })
+    await expect(canvas.getByText("Beta", { exact: true })).toHaveCount(0)
+    await expect(canvas.getByText("Alpha", { exact: true })).toBeVisible()
+})
+
+test("a finished continuation is one change, undone back to the diagram before", async ({
+    page: p,
+}) => {
+    const rest = toolCallEvents("a1", "append_diagram", {
+        xml: `ma" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="220" y="40" width="120" height="60" as="geometry"/></mxCell>`,
+    })
+    const canvas = await chunkedReplies(p, [
+        [drawReply("d1", cell("a", "Alpha", 40))],
+        cutReply,
+        [
+            `${sse([{ type: "start" }, rest.start, ...rest.deltas, rest.done, { type: "finish" }])}data: [DONE]\n\n`,
+        ],
+    ])
+    await sendMessage(p, "Draw a box")
+    await waitForCompleteCount(p, 1)
+    await sendMessage(p, "Draw a bigger one")
+    await expect(canvas.getByText("Gamma", { exact: true })).toBeVisible({
+        timeout: 15000,
+    })
+    await expect(canvas.getByText("Beta", { exact: true })).toBeVisible()
+    await expect(p.locator('[data-testid="new-chat-button"]')).toBeEnabled({
+        timeout: 15000,
+    })
+    await p.waitForTimeout(1500)
+    await p.locator('[data-testid="version-undo"]').click()
+    await expect(canvas.getByText("Alpha", { exact: true })).toBeVisible()
+    await expect(canvas.getByText("Beta", { exact: true })).toHaveCount(0)
+})
+
+test("a cut off drawing goes when the model stops without continuing", async ({
+    page: p,
+}) => {
+    const canvas = await chunkedReplies(p, [
+        [drawReply("d1", cell("a", "Alpha", 40))],
+        cutReply,
+        [textReply("I could not finish it.")],
+    ])
+    await sendMessage(p, "Draw a box")
+    await waitForCompleteCount(p, 1)
+    await sendMessage(p, "Draw a bigger one")
+    await expect(p.getByText("I could not finish it.")).toBeVisible({
+        timeout: 15000,
+    })
+    await expect(canvas.getByText("Beta", { exact: true })).toHaveCount(0)
+    await expect(canvas.getByText("Alpha", { exact: true })).toBeVisible()
+    // The first drawing is on the canvas again: its card can still undo it
+    await p.waitForTimeout(1500)
+    await expect(p.locator('[data-testid="version-undo"]')).toBeVisible()
+})
+
+test("stopping a continuation leaves the diagram from before the cut off one", async ({
+    page: p,
+}) => {
+    // The model draws anew instead of continuing, and the user stops it
+    const redraw = toolCallEvents("d3", "display_diagram", {
+        xml: cell("g", "Gamma", 400),
+    })
+    const canvas = await chunkedReplies(p, [
+        [drawReply("d1", cell("a", "Alpha", 40))],
+        cutReply,
+        [
+            sse([{ type: "start" }, redraw.start, ...redraw.deltas]),
+            ...KEEP_OPEN,
+        ],
+    ])
+    await sendMessage(p, "Draw a box")
+    await waitForCompleteCount(p, 1)
+    await sendMessage(p, "Draw a bigger one")
+    await expect(canvas.getByText("Gamma", { exact: true })).toBeVisible({
+        timeout: 15000,
+    })
+    await p.getByRole("button", { name: "Stop generation" }).click()
+    await p.waitForTimeout(1000)
+    await expect(canvas.getByText("Gamma", { exact: true })).toHaveCount(0)
+    await expect(canvas.getByText("Beta", { exact: true })).toHaveCount(0)
+    await expect(canvas.getByText("Alpha", { exact: true })).toBeVisible()
+})
+
+test("a drawing that failed its screenshot check can still be restored", async ({
+    page: p,
+}) => {
+    await p.addInitScript(() => {
+        localStorage.setItem("next-ai-draw-io-vlm-validation-enabled", "true")
+    })
+    let chatRequests = 0
+    await p.route("**/api/chat", async (route) => {
+        chatRequests++
+        if (chatRequests === 1) {
+            await route.fulfill({
+                status: 200,
+                contentType: "text/event-stream",
+                body: drawReply("d1", cell("a", "Alpha", 40)),
+            })
+            return
+        }
+        await route.fulfill({
+            status: 500,
+            contentType: "application/json",
+            body: JSON.stringify({ error: "Model is overloaded" }),
+        })
+    })
+    await p.route("**/api/validate-diagram", (route) =>
+        route.fulfill({
+            status: 200,
+            contentType: "text/plain",
+            body: JSON.stringify(FAILED_CHECK),
+        }),
+    )
+    await p.goto("/", { waitUntil: "networkidle" })
+    await getIframe(p).waitFor({ state: "visible", timeout: 30000 })
+    await sendMessage(p, "Draw a box")
+    await expect(p.getByText("Model is overloaded").first()).toBeVisible({
+        timeout: 20000,
+    })
+    await expect(p.locator('[data-testid="version-thumb"]')).toHaveCount(1)
+})
+
+test("retrying after an error keeps what the failed turn drew", async ({
+    page: p,
+}) => {
+    const draw = toolCallEvents("d1", "display_diagram", {
+        xml: cell("a", "Alpha", 40),
+    })
+    const canvas = await chunkedReplies(p, [
+        [
+            sse([{ type: "start" }, draw.start, ...draw.deltas, draw.done]),
+            `${sse([{ type: "error", errorText: "Model is overloaded" }])}data: [DONE]\n\n`,
+        ],
+        [textReply("Nothing to draw this time.")],
+    ])
+    await sendMessage(p, "Draw a box")
+    await expect(p.getByText("Model is overloaded").first()).toBeVisible({
+        timeout: 15000,
+    })
+    await p.locator('[data-testid="retry-button"]').click()
+    await expect(p.getByText("Nothing to draw this time.")).toBeVisible({
+        timeout: 15000,
+    })
+    // Its card went with the answer; the strip keeps the version
+    const thumb = p.locator('[data-testid="version-thumb"]')
+    await expect(thumb).toHaveCount(1)
+    await thumb.click()
+    await p.locator('[data-testid="compare-restore"]').click()
+    await expect(canvas.getByText("Alpha", { exact: true })).toBeVisible()
+})
+
+test("the request after opening a compressed file has the cells", async ({
+    page: p,
+}) => {
+    const requests: any[] = []
+    await p.route("**/api/chat", async (route) => {
+        requests.push(route.request().postDataJSON())
+        await route.fulfill({
+            status: 200,
+            contentType: "text/event-stream",
+            body: textReply("Looks fine."),
+        })
+    })
+    await p.goto("/", { waitUntil: "networkidle" })
+    await getIframe(p).waitFor({ state: "visible", timeout: 30000 })
+    // draw.io's compressed page: raw deflate of the URI-encoded model
+    const model = `<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/>${cell("a", "Packed", 40)}</root></mxGraphModel>`
+    const packed = zlib
+        .deflateRawSync(Buffer.from(encodeURIComponent(model)))
+        .toString("base64")
+    await openDrawioFile(
+        p,
+        "packed.drawio",
+        `<mxfile><diagram name="P" id="p">${packed}</diagram></mxfile>`,
+    )
+    await expect(
+        p.frameLocator("iframe").getByText("Packed", { exact: true }),
+    ).toBeVisible()
+    await sendMessage(p, "What is this?")
+    await expect(p.getByText("Looks fine.")).toBeVisible()
+    // Regenerate sends the snapshot taken before the message
+    await p.getByText("Looks fine.").hover()
+    await p.getByRole("button", { name: "Regenerate response" }).click()
+    await expect.poll(() => requests.length).toBe(2)
+    expect(requests[1].xml).toContain('value="Packed"')
+})
+
+test("a rejected drawing stops saying it tries again once retries end", async ({
+    page: p,
+}) => {
+    // Rejected by the checks every time: the automatic retries run out
+    let calls = 0
+    await p.route("**/api/chat", async (route) => {
+        calls++
+        await route.fulfill({
+            status: 200,
+            contentType: "text/event-stream",
+            body: drawReply(
+                `r${calls}`,
+                `<UserObject id="1" label="Bad" link="https://example.com"><mxCell vertex="1" parent="1"><mxGeometry x="0" y="0" width="80" height="40" as="geometry"/></mxCell></UserObject>`,
+            ),
+        })
+    })
+    await p.goto("/", { waitUntil: "networkidle" })
+    await getIframe(p).waitFor({ state: "visible", timeout: 30000 })
+    await sendMessage(p, "Draw a box")
+    await expect.poll(() => calls, { timeout: 20000 }).toBe(4)
+    await expect(p.locator('[data-testid="new-chat-button"]')).toBeEnabled({
+        timeout: 15000,
+    })
+    await p.waitForTimeout(500)
+    expect(calls).toBe(4)
+    await expect(p.getByText("trying again")).toHaveCount(0)
+    await expect(p.getByText("This attempt failed").first()).toBeVisible()
+})
+
+test("the version strip stays away while the first drawing is checked", async ({
+    page: p,
+}) => {
+    await p.addInitScript(() => {
+        localStorage.setItem("next-ai-draw-io-vlm-validation-enabled", "true")
+    })
+    await p.route("**/api/chat", (route) =>
+        route.fulfill({
+            status: 200,
+            contentType: "text/event-stream",
+            body: drawReply("d1", cell("a", "Alpha", 40)),
+        }),
+    )
+    let checking = false
+    await p.route("**/api/validate-diagram", async (route) => {
+        checking = true
+        await new Promise((r) => setTimeout(r, 3000))
+        await route
+            .fulfill({
+                status: 200,
+                contentType: "text/plain",
+                body: JSON.stringify({
+                    valid: true,
+                    issues: [],
+                    suggestions: [],
+                }),
+            })
+            .catch(() => {})
+    })
+    await p.goto("/", { waitUntil: "networkidle" })
+    await getIframe(p).waitFor({ state: "visible", timeout: 30000 })
+    await sendMessage(p, "Draw a box")
+    await expect.poll(() => checking, { timeout: 15000 }).toBe(true)
+    // The version exists already; its card comes when the check is done
+    await p.waitForTimeout(1000)
+    await expect(p.locator('[data-testid="version-thumb"]')).toHaveCount(0)
+    await expect(p.locator('[data-testid="version-card"]')).toHaveCount(1, {
+        timeout: 10000,
+    })
+    await expect(p.locator('[data-testid="version-thumb"]')).toHaveCount(0)
+})
diff --git a/tests/e2e/diagram-generation.spec.ts b/tests/e2e/diagram-generation.spec.ts
index 81629642..29c09a04 100644
--- a/tests/e2e/diagram-generation.spec.ts
+++ b/tests/e2e/diagram-generation.spec.ts
@@ -35,10 +35,8 @@ test.describe("Diagram Generation", () => {
 
     test("generates and displays a diagram", async ({ page }) => {
         await sendMessage(page, "Draw a cat")
-        await expect(page.locator('text="Generate Diagram"')).toBeVisible({
-            timeout: 15000,
-        })
         await waitForComplete(page)
+        await expect(page.locator('[data-testid="version-card"]')).toBeVisible()
     })
 
     test("chat input clears after sending", async ({ page }) => {
diff --git a/tests/e2e/error-handling.spec.ts b/tests/e2e/error-handling.spec.ts
index 0a9d7a2e..36e75a03 100644
--- a/tests/e2e/error-handling.spec.ts
+++ b/tests/e2e/error-handling.spec.ts
@@ -169,9 +169,14 @@ test.describe("Error Handling", () => {
         await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
         await sendMessage(page, "Draw something")
 
+        // The failed call's row opens to show the error
+        const failed = page
+            .locator('[data-testid="tool-row"][data-tool-state="output-error"]')
+            .first()
+        await failed.getByRole("button").first().click({ timeout: 15000 })
         await expect(
             page.getByText("Invalid input for tool display_diagram").first(),
-        ).toBeVisible({ timeout: 15000 })
+        ).toBeVisible()
         await expect(page.locator('text="Truncated"')).toHaveCount(0)
     })
 })
diff --git a/tests/e2e/file-upload.spec.ts b/tests/e2e/file-upload.spec.ts
index b7e254ad..d2b4b994 100644
--- a/tests/e2e/file-upload.spec.ts
+++ b/tests/e2e/file-upload.spec.ts
@@ -1,6 +1,7 @@
 import { SINGLE_BOX_XML } from "./fixtures/diagrams"
 import {
     expect,
+    getAttachmentInput,
     getChatInput,
     getIframe,
     sendMessage,
@@ -13,19 +14,22 @@ test.describe("File Upload", () => {
         await page.goto("/", { waitUntil: "networkidle" })
         await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
 
-        const uploadButton = page.locator(
-            'button[aria-label="Upload file"], button:has(svg.lucide-image)',
-        )
-        await expect(uploadButton.first()).toBeVisible({ timeout: 10000 })
-        await expect(uploadButton.first()).toBeEnabled()
+        // The "Add" menu holds the upload entry
+        const addButton = page.locator('[data-testid="composer-add"]')
+        await expect(addButton).toBeVisible({ timeout: 10000 })
+        await addButton.click()
+        const [chooser] = await Promise.all([
+            page.waitForEvent("filechooser"),
+            page.getByRole("button", { name: "Upload file" }).click(),
+        ])
+        expect(chooser.isMultiple()).toBe(true)
     })
 
     test("shows file preview after selecting image", async ({ page }) => {
         await page.goto("/", { waitUntil: "networkidle" })
         await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
 
-        // The chat attachment input; the template panel has its own file input
-        const fileInput = page.locator('input[type="file"][multiple]')
+        const fileInput = getAttachmentInput(page)
 
         await fileInput.setInputFiles({
             name: "test-image.png",
@@ -45,8 +49,7 @@ test.describe("File Upload", () => {
         await page.goto("/", { waitUntil: "networkidle" })
         await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
 
-        // The chat attachment input; the template panel has its own file input
-        const fileInput = page.locator('input[type="file"][multiple]')
+        const fileInput = getAttachmentInput(page)
 
         await fileInput.setInputFiles({
             name: "test-image.png",
@@ -93,8 +96,7 @@ test.describe("File Upload", () => {
         await page.goto("/", { waitUntil: "networkidle" })
         await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
 
-        // The chat attachment input; the template panel has its own file input
-        const fileInput = page.locator('input[type="file"][multiple]')
+        const fileInput = getAttachmentInput(page)
 
         await fileInput.setInputFiles({
             name: "architecture.png",
@@ -118,8 +120,7 @@ test.describe("File Upload", () => {
         await page.goto("/", { waitUntil: "networkidle" })
         await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
 
-        // The chat attachment input; the template panel has its own file input
-        const fileInput = page.locator('input[type="file"][multiple]')
+        const fileInput = getAttachmentInput(page)
         const largeBuffer = Buffer.alloc(3 * 1024 * 1024, "x")
 
         await fileInput.setInputFiles({
diff --git a/tests/e2e/history-restore.spec.ts b/tests/e2e/history-restore.spec.ts
index 1fa48d8a..ad33ff89 100644
--- a/tests/e2e/history-restore.spec.ts
+++ b/tests/e2e/history-restore.spec.ts
@@ -80,7 +80,7 @@ test.describe("History and Session Restore", () => {
         ).toBeVisible({ timeout: 5000 })
         await page.waitForTimeout(1000)
         // Still the conversation and its diagram, not the empty chat's examples
-        await expect(page.getByText("Paper to Diagram")).toHaveCount(0)
+        await expect(page.getByText("Paper to diagram")).toHaveCount(0)
         await expect(
             getIframeContent(page).getByText("Test Box", { exact: true }),
         ).toBeVisible()
@@ -117,7 +117,50 @@ test.describe("History and Session Restore", () => {
         await expect(
             page.locator('text="Created your test diagram."'),
         ).toHaveCount(0, { timeout: 5000 })
-        await expect(page.getByText("Paper to Diagram")).toBeVisible()
+        await expect(page.getByText("Paper to diagram")).toBeVisible()
+    })
+
+    test("the offer to go on without saving goes away with its chat", async ({
+        page,
+    }) => {
+        let n = 0
+        await page.route("**/api/chat", async (route) => {
+            n++
+            await route.fulfill({
+                status: 200,
+                contentType: "text/event-stream",
+                body: createMockSSEResponse(SINGLE_BOX_XML, `Answer ${n}.`),
+            })
+        })
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+        await sendMessage(page, "First chat")
+        await waitForText(page, "Answer 1.")
+        await page.waitForTimeout(1500)
+        await page.locator('[data-testid="new-chat-button"]').click()
+        await sendMessage(page, "Second chat")
+        await waitForText(page, "Answer 2.")
+        // Storage is full: leaving the second chat offers to go on unsaved
+        await page.evaluate(() => {
+            const put = IDBObjectStore.prototype.put
+            ;(window as any).__restorePut = () => {
+                IDBObjectStore.prototype.put = put
+            }
+            IDBObjectStore.prototype.put = () => {
+                throw new DOMException("Storage is full", "QuotaExceededError")
+            }
+        })
+        await page.locator('[data-testid="new-chat-button"]').click()
+        const offer = page.getByRole("button", {
+            name: "Continue without saving",
+        })
+        await expect(offer).toBeVisible({ timeout: 5000 })
+        // Storage works again, and the user opens the first chat
+        await page.evaluate(() => (window as any).__restorePut())
+        await page.locator('[data-testid="session-title"]').click()
+        await page.getByRole("button", { name: /First chat/ }).click()
+        await expect(page.getByText("Answer 1.")).toBeVisible()
+        await expect(offer).toHaveCount(0)
     })
 
     // A diagram drawn by hand, without chat messages: loaded into draw.io
@@ -155,6 +198,8 @@ test.describe("History and Session Restore", () => {
     }) => {
         await page.goto("/", { waitUntil: "networkidle" })
         await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+        // Leave the start screen to draw on the canvas
+        await page.getByTestId("draw-yourself").click()
         await drawByHand(page, "Hand drawn")
         await expect(
             getIframeContent(page).getByText("Hand drawn", { exact: true }),
@@ -188,17 +233,21 @@ test.describe("History and Session Restore", () => {
         await waitForText(page, "Created your test diagram.")
         await page.waitForTimeout(1500)
         await page.locator('[data-testid="new-chat-button"]').click()
-        // The empty chat lists the first one; draw something by hand
-        const firstChat = page.getByRole("button", {
-            name: /Create a test diagram/,
+        // The empty chat shows the start screen; draw something by hand
+        await expect(page.getByTestId("lobby-hero")).toBeVisible({
+            timeout: 10000,
         })
-        await expect(firstChat).toBeVisible({ timeout: 10000 })
+        await page.getByTestId("draw-yourself").click()
         await drawByHand(page, "Hand drawn")
         await expect(
             getIframeContent(page).getByText("Hand drawn", { exact: true }),
         ).toBeVisible({ timeout: 10000 })
         await storageFull(page)
-        await firstChat.click()
+        // The chat list lists the first one
+        await page.getByTestId("session-title").click()
+        await page
+            .getByRole("button", { name: /Create a test diagram/ })
+            .click()
         await expect(
             page.getByText(/Could not save this chat/).first(),
         ).toBeVisible({ timeout: 5000 })
@@ -284,11 +333,9 @@ test.describe("History and Session Restore", () => {
         await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
 
         const frame = getIframeContent(page)
-        await expect(
-            frame
-                .locator(".geMenubarContainer, .geDiagramContainer, canvas")
-                .first(),
-        ).toBeVisible({ timeout: 30000 })
+        await expect(frame.locator(".geDiagramContainer").first()).toBeVisible({
+            timeout: 30000,
+        })
     })
 
     test("can restore from browser back/forward", async ({ page }) => {
diff --git a/tests/e2e/iframe-interaction.spec.ts b/tests/e2e/iframe-interaction.spec.ts
index 6ac10a48..a11609df 100644
--- a/tests/e2e/iframe-interaction.spec.ts
+++ b/tests/e2e/iframe-interaction.spec.ts
@@ -18,11 +18,9 @@ test.describe("Iframe Interaction", () => {
 
         // iframe should have loaded draw.io content
         const frame = getIframeContent(page)
-        await expect(
-            frame
-                .locator(".geMenubarContainer, .geDiagramContainer, canvas")
-                .first(),
-        ).toBeVisible({ timeout: 30000 })
+        await expect(frame.locator(".geDiagramContainer").first()).toBeVisible({
+            timeout: 30000,
+        })
     })
 
     test("can interact with draw.io toolbar", async ({ page }) => {
diff --git a/tests/e2e/language.spec.ts b/tests/e2e/language.spec.ts
index ae753fd1..4b27d9c3 100644
--- a/tests/e2e/language.spec.ts
+++ b/tests/e2e/language.spec.ts
@@ -1,12 +1,22 @@
+import type { Page } from "@playwright/test"
 import {
     expect,
     getChatInput,
     getIframe,
-    openSettings,
+    getSendButton,
+    openSettingsTab,
     sleep,
     test,
 } from "./lib/fixtures"
 
+/** Pick a language in the settings, then close them */
+async function pickLanguage(page: Page, name: string) {
+    await openSettingsTab(page, "appearance")
+    await page.locator("#language-select").click()
+    await page.getByRole("option", { name, exact: true }).click()
+    await page.keyboard.press("Escape")
+}
+
 test.describe("Language Switching", () => {
     test("loads English by default", async ({ page }) => {
         await page.goto("/", { waitUntil: "networkidle" })
@@ -15,7 +25,7 @@ test.describe("Language Switching", () => {
         const chatInput = getChatInput(page)
         await expect(chatInput).toBeVisible({ timeout: 10000 })
 
-        await expect(page.locator('button:has-text("Send")')).toBeVisible()
+        await expect(getSendButton(page, "Send")).toBeVisible()
     })
 
     test("can switch to Japanese", async ({ page }) => {
@@ -23,14 +33,11 @@ test.describe("Language Switching", () => {
         await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
 
         await test.step("open settings and select Japanese", async () => {
-            await openSettings(page)
-            const languageSelector = page.locator('button:has-text("English")')
-            await languageSelector.first().click()
-            await page.locator('text="日本語"').click()
+            await pickLanguage(page, "日本語")
         })
 
         await test.step("verify UI is in Japanese", async () => {
-            await expect(page.locator('button:has-text("送信")')).toBeVisible({
+            await expect(getSendButton(page, "送信")).toBeVisible({
                 timeout: 5000,
             })
         })
@@ -41,14 +48,11 @@ test.describe("Language Switching", () => {
         await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
 
         await test.step("open settings and select Chinese", async () => {
-            await openSettings(page)
-            const languageSelector = page.locator('button:has-text("English")')
-            await languageSelector.first().click()
-            await page.locator('text="中文"').click()
+            await pickLanguage(page, "中文")
         })
 
         await test.step("verify UI is in Chinese", async () => {
-            await expect(page.locator('button:has-text("发送")')).toBeVisible({
+            await expect(getSendButton(page, "发送")).toBeVisible({
                 timeout: 5000,
             })
         })
@@ -59,16 +63,12 @@ test.describe("Language Switching", () => {
         await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
 
         await test.step("switch to Japanese", async () => {
-            await openSettings(page)
-            const languageSelector = page.locator('button:has-text("English")')
-            await languageSelector.first().click()
-            await page.locator('text="日本語"').click()
-            await page.keyboard.press("Escape")
+            await pickLanguage(page, "日本語")
             await sleep(500)
         })
 
         await test.step("verify Japanese before reload", async () => {
-            await expect(page.locator('button:has-text("送信")')).toBeVisible({
+            await expect(getSendButton(page, "送信")).toBeVisible({
                 timeout: 10000,
             })
         })
@@ -78,7 +78,7 @@ test.describe("Language Switching", () => {
             await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
             // Wait for hydration and localStorage to be read
             await sleep(1000)
-            await expect(page.locator('button:has-text("送信")')).toBeVisible({
+            await expect(getSendButton(page, "送信")).toBeVisible({
                 timeout: 10000,
             })
         })
@@ -88,7 +88,7 @@ test.describe("Language Switching", () => {
         await page.goto("/ja", { waitUntil: "networkidle" })
         await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
 
-        await expect(page.locator('button:has-text("送信")')).toBeVisible({
+        await expect(getSendButton(page, "送信")).toBeVisible({
             timeout: 10000,
         })
     })
@@ -97,7 +97,7 @@ test.describe("Language Switching", () => {
         await page.goto("/zh", { waitUntil: "networkidle" })
         await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
 
-        await expect(page.locator('button:has-text("发送")')).toBeVisible({
+        await expect(getSendButton(page, "发送")).toBeVisible({
             timeout: 10000,
         })
     })
diff --git a/tests/e2e/lib/fixtures.ts b/tests/e2e/lib/fixtures.ts
index f63f3acc..e9e868d3 100644
--- a/tests/e2e/lib/fixtures.ts
+++ b/tests/e2e/lib/fixtures.ts
@@ -30,7 +30,7 @@ export { expect }
 
 /** Get the chat input textarea */
 export function getChatInput(page: Page) {
-    return page.locator('textarea[aria-label="Chat input"]')
+    return page.getByTestId("chat-input")
 }
 
 /** Get the draw.io iframe */
@@ -43,6 +43,18 @@ export function getIframeContent(page: Page) {
     return page.frameLocator("iframe")
 }
 
+/** Open a .drawio file through the app's file picker */
+export async function openDrawioFile(page: Page, name: string, xml: string) {
+    await page
+        .locator('input[type="file"][accept^=".drawio"]')
+        .first()
+        .setInputFiles({
+            name,
+            mimeType: "application/xml",
+            buffer: Buffer.from(xml),
+        })
+}
+
 /** Get the settings button */
 export function getSettingsButton(page: Page) {
     return page.locator('[data-testid="settings-button"]')
@@ -60,20 +72,33 @@ export async function sendMessage(page: Page, message: string) {
     await chatInput.press("ControlOrMeta+Enter")
 }
 
-/** Wait for diagram generation to complete */
-export async function waitForComplete(page: Page, timeout = 15000) {
-    await expect(page.locator('text="Complete"')).toBeVisible({ timeout })
+/** Tool calls that finished (version cards and tool rows) */
+export function getCompletedTools(page: Page) {
+    return page.locator('[data-tool-state="output-available"]')
 }
 
-/** Wait for N "Complete" badges */
+/** Wait for diagram generation to complete */
+export async function waitForComplete(page: Page, timeout = 15000) {
+    await expect(getCompletedTools(page).first()).toBeVisible({ timeout })
+}
+
+/** Wait for N finished tool calls */
 export async function waitForCompleteCount(
     page: Page,
     count: number,
     timeout = 15000,
 ) {
-    await expect(page.locator('text="Complete"')).toHaveCount(count, {
-        timeout,
-    })
+    await expect(getCompletedTools(page)).toHaveCount(count, { timeout })
+}
+
+/** The file input behind the message box's "Add" menu */
+export function getAttachmentInput(page: Page) {
+    return page.locator('[data-testid="attachment-input"]')
+}
+
+/** The send button (icon only; found by its accessible name) */
+export function getSendButton(page: Page, name = "Send") {
+    return page.getByRole("button", { name, exact: true })
 }
 
 /** Wait for a specific text to appear */
@@ -83,10 +108,19 @@ export async function waitForText(page: Page, text: string, timeout = 15000) {
 
 /** Open settings dialog */
 export async function openSettings(page: Page) {
-    await getSettingsButton(page).click()
+    await getSettingsButton(page).first().click()
     await expect(page.locator('[role="dialog"]')).toBeVisible({ timeout: 5000 })
 }
 
+/** Open settings on one of its pages: models, appearance, advanced, about */
+export async function openSettingsTab(
+    page: Page,
+    tab: "models" | "appearance" | "advanced" | "about",
+) {
+    await openSettings(page)
+    await page.locator(`[data-testid="settings-tab-${tab}"]`).click()
+}
+
 // ============================================
 // Mock helpers
 // ============================================
diff --git a/tests/e2e/model-test.spec.ts b/tests/e2e/model-test.spec.ts
index 2a226846..ad38f569 100644
--- a/tests/e2e/model-test.spec.ts
+++ b/tests/e2e/model-test.spec.ts
@@ -48,7 +48,7 @@ test("the Test button checks all models at once and shows each result", async ({
     await page.goto("/", { waitUntil: "networkidle" })
     await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
 
-    await page.locator("button:has(svg.lucide-bot)").first().click()
+    await page.getByTestId("model-selector").click()
     await page.getByText("Configure Models...").click()
     const dialog = page.locator('[role="dialog"]')
     await dialog.getByText("GLM (Zhipu)").first().click()
@@ -75,7 +75,7 @@ test("the key link and the base URL cleanup", async ({ page }) => {
     }, CONFIG)
     await page.goto("/", { waitUntil: "networkidle" })
     await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
-    await page.locator("button:has(svg.lucide-bot)").first().click()
+    await page.getByTestId("model-selector").click()
     await page.getByText("Configure Models...").click()
     const dialog = page.locator('[role="dialog"]')
     await dialog.getByText("GLM (Zhipu)").first().click()
diff --git a/tests/e2e/provider-models.spec.ts b/tests/e2e/provider-models.spec.ts
index 75cadff2..7b4bf94d 100644
--- a/tests/e2e/provider-models.spec.ts
+++ b/tests/e2e/provider-models.spec.ts
@@ -23,7 +23,7 @@ async function openQwenSettings(page: Page, config: object = CONFIG) {
     }, config)
     await page.goto("/", { waitUntil: "networkidle" })
     await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
-    await page.locator("button:has(svg.lucide-bot)").first().click()
+    await page.getByTestId("model-selector").click()
     await page.getByText("Configure Models...").click()
     const dialog = page.locator('[role="dialog"]')
     await dialog.getByText("Qwen (Alibaba)").first().click()
@@ -357,3 +357,73 @@ test("no spinner stays after another tab's change while elsewhere", async ({
     await dialog.getByText("Qwen (Alibaba)").first().click()
     await expect(dialog.locator(".animate-spin")).toHaveCount(0)
 })
+
+const savedConfig = (page: Page) =>
+    page.evaluate(() =>
+        JSON.parse(
+            localStorage.getItem("next-ai-draw-io-model-configs") ?? "{}",
+        ),
+    )
+
+test("a test result that arrives after the settings closed is kept", async ({
+    page,
+}) => {
+    const release = await holdRoute(page, "**/api/validate-model", {
+        valid: true,
+        responseTime: 1000,
+    })
+    const dialog = await openQwenSettings(page, TWO_PROVIDERS)
+    await dialog.getByRole("button", { name: "Test", exact: true }).click()
+    await page.keyboard.press("Escape")
+    await expect(dialog).toHaveCount(0)
+    release()
+    await expect
+        .poll(
+            async () =>
+                (await savedConfig(page)).providers[0].models[0].validated,
+        )
+        .toBe(true)
+})
+
+test("a test result for a key changed on another settings tab is dropped", async ({
+    page,
+}) => {
+    const release = await holdRoute(page, "**/api/validate-model", {
+        valid: true,
+        responseTime: 1000,
+    })
+    const dialog = await openQwenSettings(page, TWO_PROVIDERS)
+    await dialog.getByRole("button", { name: "Test", exact: true }).click()
+    // The panel goes away while the test runs, then the key changes
+    await page.locator('[data-testid="settings-tab-advanced"]').click()
+    await page.locator('[data-testid="settings-tab-models"]').click()
+    await dialog.getByText("Qwen (Alibaba)").first().click()
+    await dialog.locator("input[type=password]").first().fill("new-key")
+    release()
+    await page.waitForTimeout(800)
+    const saved = await savedConfig(page)
+    expect(saved.providers[0].apiKey).toBe("new-key")
+    expect(saved.providers[0].models[0].validated).not.toBe(true)
+    expect(saved.providers[0].validated).not.toBe(true)
+})
+
+test("a failed test speaks the page's language", async ({ page }) => {
+    await page.addInitScript((config) => {
+        localStorage.setItem("next-ai-draw-io-locale", "zh")
+        localStorage.setItem(
+            "next-ai-draw-io-model-configs",
+            JSON.stringify(config),
+        )
+    }, TWO_PROVIDERS)
+    await page.route("**/api/validate-model", (route) => route.abort())
+    await page.goto("/zh", { waitUntil: "networkidle" })
+    await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+    await page.getByTestId("settings-button").first().click()
+    const dialog = page.locator('[role="dialog"]')
+    await dialog.getByText("Qwen (Alibaba)").first().click()
+    await dialog.getByRole("button", { name: "测试", exact: true }).click()
+    await expect(dialog.getByText("1 个模型验证失败")).toBeVisible()
+    await expect(
+        dialog.getByText("网络错误。请检查您的连接。").first(),
+    ).toBeAttached()
+})
diff --git a/tests/e2e/settings.spec.ts b/tests/e2e/settings.spec.ts
index c5c9b83c..dcfbeca9 100644
--- a/tests/e2e/settings.spec.ts
+++ b/tests/e2e/settings.spec.ts
@@ -1,4 +1,10 @@
-import { expect, getIframe, openSettings, test } from "./lib/fixtures"
+import {
+    expect,
+    getIframe,
+    openSettings,
+    openSettingsTab,
+    test,
+} from "./lib/fixtures"
 
 test.describe("Settings", () => {
     test.beforeEach(async ({ page }) => {
@@ -12,14 +18,14 @@ test.describe("Settings", () => {
     })
 
     test("language selection is available", async ({ page }) => {
-        await openSettings(page)
+        await openSettingsTab(page, "appearance")
 
         const dialog = page.locator('[role="dialog"]')
-        await expect(dialog.locator('text="English"')).toBeVisible()
+        await expect(dialog.locator("#language-select")).toHaveText(/English/)
     })
 
     test("max output tokens is editable and persists", async ({ page }) => {
-        await openSettings(page)
+        await openSettingsTab(page, "advanced")
 
         const input = page.locator("#max-output-tokens")
         await expect(input).toBeVisible()
@@ -38,11 +44,14 @@ test.describe("Settings", () => {
         await expect(input).toHaveValue("12000")
     })
 
-    test("draw.io theme toggle exists", async ({ page }) => {
-        await openSettings(page)
+    test("theme can be light, dark or follow the system", async ({ page }) => {
+        await openSettingsTab(page, "appearance")
 
         const dialog = page.locator('[role="dialog"]')
-        const themeText = dialog.locator("text=/sketch|minimal/i")
-        await expect(themeText.first()).toBeVisible()
+        for (const name of ["Light", "Dark", "System"]) {
+            await expect(dialog.getByRole("radio", { name })).toBeVisible()
+        }
+        await dialog.getByRole("radio", { name: "Dark" }).click()
+        await expect(page.locator("html")).toHaveClass(/dark/)
     })
 })
diff --git a/tests/e2e/workspace.spec.ts b/tests/e2e/workspace.spec.ts
new file mode 100644
index 00000000..50961f98
--- /dev/null
+++ b/tests/e2e/workspace.spec.ts
@@ -0,0 +1,1055 @@
+import type { Locator, Page, Route } from "@playwright/test"
+import { FLOWCHART_XML } from "./fixtures/diagrams"
+import {
+    expect,
+    getAttachmentInput,
+    getChatInput,
+    getIframe,
+    getIframeContent,
+    openDrawioFile,
+    openSettingsTab,
+    sendMessage,
+    test,
+    waitForComplete,
+    waitForCompleteCount,
+} from "./lib/fixtures"
+import { createMockSSEResponse } from "./lib/helpers"
+
+/** An edit_diagram response that adds one node next to "Start" */
+function createEditResponse() {
+    const toolCallId = `call_edit_${Date.now()}`
+    const newNode = `<mxCell id="review" value="Review Step" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="360" y="130" width="100" height="40" as="geometry"/></mxCell>`
+    const events = [
+        { type: "start", messageId: `msg_${Date.now()}` },
+        { type: "tool-input-start", toolCallId, toolName: "edit_diagram" },
+        {
+            type: "tool-input-available",
+            toolCallId,
+            toolName: "edit_diagram",
+            input: {
+                operations: [
+                    { operation: "add", cell_id: "review", new_xml: newNode },
+                ],
+            },
+        },
+        { type: "finish" },
+    ]
+    return (
+        events.map((e) => `data: ${JSON.stringify(e)}\n\n`).join("") +
+        "data: [DONE]\n\n"
+    )
+}
+
+/** First request draws the flowchart, later ones add a node */
+function drawThenEdit(onRequest?: (body: any) => void) {
+    let count = 0
+    return async (route: Route) => {
+        onRequest?.(route.request().postDataJSON())
+        const body =
+            count === 0
+                ? createMockSSEResponse(FLOWCHART_XML, "Here is the flowchart.")
+                : createEditResponse()
+        count++
+        await route.fulfill({
+            status: 200,
+            contentType: "text/event-stream",
+            body,
+        })
+    }
+}
+
+async function openApp(page: Page) {
+    await page.goto("/", { waitUntil: "networkidle" })
+    await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+    // The cover goes away once draw.io has loaded and been styled
+    await expect(page.locator('[data-testid="canvas-loading"]')).toHaveCount(
+        0,
+        {
+            timeout: 30000,
+        },
+    )
+}
+
+const TWO_PAGE_FILE = `<mxfile>${["Old A", "Old B"]
+    .map(
+        (label, i) =>
+            `<diagram name="P${i}" id="p${i}"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="c${i}" value="${label}" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="40" y="40" width="120" height="60" as="geometry"/></mxCell></root></mxGraphModel></diagram>`,
+    )
+    .join("")}</mxfile>`
+
+/** When each saved chat was last saved, by title */
+function sessionTimes(page: Page) {
+    return page.evaluate(async () => {
+        const db: IDBDatabase = await new Promise((resolve) => {
+            const request = indexedDB.open("next-ai-drawio")
+            request.onsuccess = () => resolve(request.result)
+        })
+        const sessions: any[] = await new Promise((resolve) => {
+            const request = db
+                .transaction("sessions")
+                .objectStore("sessions")
+                .getAll()
+            request.onsuccess = () => resolve(request.result)
+        })
+        db.close()
+        return Object.fromEntries(sessions.map((s) => [s.title, s.updatedAt]))
+    })
+}
+
+/** Where an element is laid out (fails the test when it is not) */
+async function boxOf(locator: Locator) {
+    const box = await locator.boundingBox()
+    if (!box) throw new Error("element is not laid out")
+    return box
+}
+
+async function drawAndEdit(page: Page) {
+    await sendMessage(page, "Create a flowchart")
+    await waitForComplete(page)
+    await sendMessage(page, "Add a review step")
+    await waitForCompleteCount(page, 2)
+}
+
+test.describe("Workspace", () => {
+    test("start screen shows on an empty canvas and examples fill the input", async ({
+        page,
+    }) => {
+        await openApp(page)
+        await expect(page.locator('[data-testid="lobby-hero"]')).toBeVisible()
+        await page.locator('[data-testid="example-cat"]').click()
+        await expect(getChatInput(page)).toHaveValue("Draw a cat for me")
+    })
+
+    test("each AI change becomes a version card; the latest undoes and redoes it", async ({
+        page,
+    }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await drawAndEdit(page)
+
+        const cards = page.locator('[data-testid="version-card"]')
+        await expect(cards).toHaveCount(2)
+        await expect(cards.nth(1)).toContainText("v2")
+        await expect(page.locator('[data-testid="version-thumb"]')).toHaveCount(
+            2,
+        )
+        const canvas = getIframeContent(page)
+        await expect(canvas.getByText("Review Step")).toBeVisible()
+        await page.locator('[data-testid="version-undo"]').click()
+        await expect(canvas.getByText("Review Step")).toHaveCount(0)
+        await expect(page.getByText("Change undone")).toBeVisible()
+
+        await page.locator('[data-testid="version-undo"]').click()
+        await expect(canvas.getByText("Review Step")).toBeVisible()
+    })
+
+    test("a renamed diagram keeps its name after reload", async ({ page }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await sendMessage(page, "Create a flowchart")
+        await waitForComplete(page)
+
+        await page.locator('[data-testid="session-title"]').click()
+        await page.locator('[data-testid="rename-session"]').click()
+        const input = page.getByRole("textbox", { name: "Rename" })
+        await input.fill("Order flow")
+        await input.press("Enter")
+        await page.keyboard.press("Escape")
+        await expect(
+            page.locator('[data-testid="session-title"]'),
+        ).toContainText("Order flow")
+
+        await expect(page).toHaveURL(/session=/)
+        await page.waitForTimeout(1500)
+        await page.reload({ waitUntil: "networkidle" })
+        await expect(
+            page.locator('[data-testid="session-title"]'),
+        ).toContainText("Order flow", { timeout: 15000 })
+        await expect(page.locator('[data-testid="version-card"]')).toHaveCount(
+            1,
+        )
+    })
+
+    test("opening a .drawio file loads it into a new diagram", async ({
+        page,
+    }) => {
+        await openApp(page)
+        const file = `<mxfile><diagram name="P" id="p"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="a" value="From File" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="40" y="40" width="120" height="60" as="geometry"/></mxCell></root></mxGraphModel></diagram></mxfile>`
+        const [chooser] = await Promise.all([
+            page.waitForEvent("filechooser"),
+            page
+                .getByRole("button", { name: "Open .drawio file" })
+                .first()
+                .click(),
+        ])
+        await chooser.setFiles({
+            name: "order-flow.drawio",
+            mimeType: "application/xml",
+            buffer: Buffer.from(file),
+        })
+        await expect(
+            getIframeContent(page).getByText("From File"),
+        ).toBeVisible()
+        await expect(
+            page.locator('[data-testid="session-title"]'),
+        ).toContainText("order-flow")
+    })
+
+    test("attachments do not go through the file opener", async ({ page }) => {
+        await openApp(page)
+        await getAttachmentInput(page).setInputFiles({
+            name: "notes.txt",
+            mimeType: "text/plain",
+            buffer: Buffer.from("hello"),
+        })
+        await expect(page.getByText("notes.txt")).toBeVisible()
+        await expect(page.locator('[data-testid="lobby-hero"]')).toBeVisible()
+    })
+
+    test("an error shows its text and can be retried", async ({ page }) => {
+        let calls = 0
+        await page.route("**/api/chat", async (route) => {
+            calls++
+            if (calls === 1) {
+                await route.fulfill({
+                    status: 500,
+                    contentType: "application/json",
+                    body: JSON.stringify({ error: "Model is overloaded" }),
+                })
+                return
+            }
+            await route.fulfill({
+                status: 200,
+                contentType: "text/event-stream",
+                body: createMockSSEResponse(FLOWCHART_XML, "Here it is."),
+            })
+        })
+        await openApp(page)
+        await sendMessage(page, "Create a flowchart")
+
+        const alert = page
+            .getByRole("alert")
+            .filter({ hasText: "Model is overloaded" })
+        await expect(alert).toBeVisible({ timeout: 10000 })
+        await expect(alert).not.toContainText("{")
+        await page.locator('[data-testid="retry-button"]').click()
+        await waitForComplete(page)
+        expect(calls).toBe(2)
+    })
+
+    test("a file opened inside a saved diagram stays on the canvas", async ({
+        page,
+    }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await sendMessage(page, "Create a flowchart")
+        await waitForComplete(page)
+        // The auto-save gives the chat a session first
+        await expect(page).toHaveURL(/session=/, { timeout: 10000 })
+        const file = `<mxfile><diagram name="P" id="p"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="a" value="From File" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="40" y="40" width="120" height="60" as="geometry"/></mxCell></root></mxGraphModel></diagram></mxfile>`
+        await openDrawioFile(page, "mine.drawio", file)
+        await page.waitForTimeout(1500)
+        await expect(
+            getIframeContent(page).getByText("From File"),
+        ).toBeVisible()
+    })
+
+    test("Ctrl+B in the canvas stays with draw.io", async ({ page }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await sendMessage(page, "Create a flowchart")
+        await waitForComplete(page)
+        await getIframeContent(page)
+            .getByText("Process", { exact: true })
+            .click()
+        await page.keyboard.press("ControlOrMeta+b")
+        await page.waitForTimeout(500)
+        await expect(page.locator('[data-testid="chat-panel"]')).toBeVisible()
+        // ⌘⇧B outside the canvas stays with the browser too
+        await page.locator('[data-testid="session-title"]').focus()
+        await page.keyboard.press("ControlOrMeta+Shift+B")
+        await page.waitForTimeout(500)
+        await expect(page.locator('[data-testid="chat-panel"]')).toBeVisible()
+    })
+
+    test("selected shapes are shown, sent, and attached again when picked again", async ({
+        page,
+    }) => {
+        const bodies: any[] = []
+        await page.route(
+            "**/api/chat",
+            drawThenEdit((body) => bodies.push(body)),
+        )
+        await openApp(page)
+        await sendMessage(page, "Create a flowchart")
+        await waitForComplete(page)
+        const shape = getIframeContent(page).getByText("Process", {
+            exact: true,
+        })
+        await shape.click()
+        await expect(
+            page.locator('[data-testid="selection-chip"]'),
+        ).toContainText("Process")
+        await expect(
+            page.locator('[data-testid="selection-ask"]'),
+        ).toBeVisible()
+        await sendMessage(page, "Make this red")
+        await waitForCompleteCount(page, 2)
+        expect(bodies[1].selectedCells).toEqual([
+            { id: "process", label: "Process" },
+        ])
+        // Click away, then pick the same shape
+        await page.keyboard.press("Escape")
+        await shape.click()
+        await expect(
+            page.locator('[data-testid="selection-chip"]'),
+        ).toContainText("Process")
+        await sendMessage(page, "Make it bigger")
+        // (Its edit repeats the earlier one, so the retries that follow
+        // are requests too)
+        await expect.poll(() => bodies.length).toBeGreaterThanOrEqual(3)
+        expect(bodies[2].selectedCells).toEqual([
+            { id: "process", label: "Process" },
+        ])
+    })
+
+    test("restoring a version keeps the zoom", async ({ page }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await drawAndEdit(page)
+        // The percentage shown in the toolbar
+        const zoom = () =>
+            page.getByRole("button", { name: "Zoom", exact: true }).innerText()
+        const initial = await zoom()
+        await page.getByRole("button", { name: "Zoom out" }).click()
+        await expect.poll(zoom).not.toBe(initial)
+        const before = await zoom()
+        await page.locator('[data-testid="version-restore"]').first().click()
+        await page.waitForTimeout(800)
+        expect(await zoom()).toBe(before)
+        await expect(page.getByText("Restored v1")).toBeVisible()
+    })
+
+    test("other diagrams can't be opened while an answer streams", async ({
+        page,
+    }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await sendMessage(page, "Create a flowchart")
+        await waitForComplete(page)
+        await page.waitForTimeout(1500)
+        await page.locator('[data-testid="new-chat-button"]').click()
+        await expect(page.locator('[data-testid="lobby-hero"]')).toBeVisible()
+        // An answer that takes a while
+        await page.unroute("**/api/chat")
+        await page.route("**/api/chat", async (route) => {
+            await new Promise((r) => setTimeout(r, 4000))
+            await route.fulfill({
+                status: 200,
+                contentType: "text/event-stream",
+                body: createMockSSEResponse(FLOWCHART_XML, "Second one."),
+            })
+        })
+        await sendMessage(page, "Create another flowchart")
+        await page.locator('[data-testid="session-title"]').click()
+        const other = page.getByRole("button", { name: /Create a flowchart/ })
+        await expect(other).toHaveAttribute("aria-disabled", "true")
+        await other.click({ force: true })
+        await waitForComplete(page)
+        await expect(page.getByText("Second one.")).toBeVisible()
+    })
+
+    test("the Shapes button and its shortcut open the shape library", async ({
+        page,
+    }) => {
+        await openApp(page)
+        await page.locator('[data-testid="draw-yourself"]').click()
+        const library = getIframeContent(page).locator(
+            ".geSidebarContainer:not(.geFormatContainer)",
+        )
+        await expect(library).toBeHidden()
+        await page.locator('[data-testid="toolbar-shapes"]').click()
+        await expect(library).toBeVisible()
+        await page.locator('[data-testid="toolbar-shapes"]').click()
+        await expect(library).toBeHidden()
+        await page.keyboard.press("ControlOrMeta+Shift+K")
+        await expect(library).toBeVisible()
+        // Also with the focus in the canvas
+        await getIframeContent(page)
+            .locator(".geDiagramContainer")
+            .click({ position: { x: 300, y: 300 } })
+        await page.keyboard.press("ControlOrMeta+Shift+K")
+        await expect(library).toBeHidden()
+    })
+
+    test("resizing the window leaves draw.io's style panel closed", async ({
+        page,
+    }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await sendMessage(page, "Create a flowchart")
+        await waitForComplete(page)
+        const formatWidth = () =>
+            getIframeContent(page)
+                .locator(".geFormatContainer")
+                .evaluate((el) => (el as HTMLElement).offsetWidth)
+        expect(await formatWidth()).toBe(0)
+        // draw.io's own rule opens it when its window gets wide again
+        await page.setViewportSize({ width: 1000, height: 800 })
+        await page.waitForTimeout(600)
+        await page.setViewportSize({ width: 1440, height: 900 })
+        await page.waitForTimeout(1500)
+        expect(await formatWidth()).toBe(0)
+    })
+
+    test("crossing the phone width keeps draw.io and its undo history", async ({
+        page,
+    }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await sendMessage(page, "Create a flowchart")
+        await waitForComplete(page)
+        // A mark on draw.io's window: a reload would make a new window
+        const mark = (set: boolean) =>
+            getIframe(page).evaluate((el, set) => {
+                const w = (el as HTMLIFrameElement).contentWindow as any
+                if (set) w.__naiMark = 1
+                return w.__naiMark
+            }, set)
+        await mark(true)
+        await page.setViewportSize({ width: 700, height: 800 })
+        await page.waitForTimeout(800)
+        await page.setViewportSize({ width: 1280, height: 800 })
+        await page.waitForTimeout(800)
+        expect(await mark(false)).toBe(1)
+        await expect(page.locator('[data-testid="toolbar-undo"]')).toBeEnabled()
+    })
+
+    test("Ctrl+Z in the canvas undoes the AI change in one step; the version can be restored", async ({
+        page,
+    }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await drawAndEdit(page)
+        await expect(
+            page.locator('[data-testid="version-card"] img'),
+        ).toHaveCount(2)
+        await expect(page).toHaveURL(/session=/)
+        await page.waitForTimeout(1500)
+        const canvas = getIframeContent(page)
+        await canvas
+            .locator(".geDiagramContainer")
+            .click({ position: { x: 10, y: 10 } })
+        await page.keyboard.press("ControlOrMeta+z")
+        await expect(canvas.getByText("Review Step")).toHaveCount(0)
+        await expect(
+            canvas.getByText("Process", { exact: true }).first(),
+        ).toBeVisible()
+        // The card no longer says v2 is on the canvas
+        const restore = page
+            .locator('[data-testid="version-card"]')
+            .nth(1)
+            .locator('[data-testid="version-restore"]')
+        await expect(restore).toBeEnabled()
+        await restore.click()
+        await expect(canvas.getByText("Review Step")).toBeVisible()
+    })
+
+    test("settings put their sections on top in a narrow window", async ({
+        page,
+    }) => {
+        await page.setViewportSize({ width: 800, height: 800 })
+        await openApp(page)
+        await page.locator('[data-testid="settings-button"]').first().click()
+        const models = page.locator('[data-testid="settings-tab-models"]')
+        const appearance = page.locator(
+            '[data-testid="settings-tab-appearance"]',
+        )
+        await expect(models).toBeVisible()
+        const a = await boxOf(models)
+        const b = await boxOf(appearance)
+        expect(Math.abs(a.y - b.y)).toBeLessThan(2)
+    })
+
+    test("New chat brings the start screen back", async ({ page }) => {
+        await openApp(page)
+        await page.locator('[data-testid="draw-yourself"]').click()
+        await expect(page.locator('[data-testid="lobby-hero"]')).toHaveCount(0)
+        await page.locator('[data-testid="new-chat-button"]').click()
+        await expect(page.locator('[data-testid="lobby-hero"]')).toBeVisible()
+    })
+
+    test("Enter that picks an IME candidate does not end a rename", async ({
+        page,
+    }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await sendMessage(page, "Create a flowchart")
+        await waitForComplete(page)
+        await page.locator('[data-testid="session-title"]').click()
+        await page.locator('[data-testid="rename-session"]').click()
+        const input = page.getByRole("textbox", { name: "Rename" })
+        await input.fill("流程")
+        await input.dispatchEvent("keydown", {
+            key: "Enter",
+            isComposing: true,
+        })
+        await expect(input).toBeVisible()
+        // Safari ends the composition first, then sends keyCode 229
+        await input.dispatchEvent("keydown", { key: "Enter", keyCode: 229 })
+        await expect(input).toBeVisible()
+        await input.fill("流程图")
+        await input.press("Enter")
+        await expect(input).toHaveCount(0)
+        await page.keyboard.press("Escape")
+        await expect(
+            page.locator('[data-testid="session-title"]'),
+        ).toContainText("流程图")
+    })
+
+    test("the restore message's Undo goes away with the chat", async ({
+        page,
+    }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await drawAndEdit(page)
+        await page.locator('[data-testid="version-thumb"]').first().click()
+        await page.locator('[data-testid="compare-restore"]').click()
+        const toast = page.getByText("Restored v1")
+        await expect(toast).toBeVisible()
+        await page.locator('[data-testid="new-chat-button"]').click()
+        await expect(toast).toHaveCount(0)
+    })
+
+    test("a multi-page diagram's AI change can be undone from its card", async ({
+        page,
+    }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await openDrawioFile(page, "two.drawio", TWO_PAGE_FILE)
+        const canvas = getIframeContent(page)
+        await expect(canvas.getByText("Old A")).toBeVisible()
+        await sendMessage(page, "Create a flowchart")
+        await waitForComplete(page)
+        // Multi-page documents are loaded in full: the card is the way back
+        await page.waitForTimeout(2000)
+        await page.locator('[data-testid="version-undo"]').click()
+        await expect(canvas.getByText("Old A")).toBeVisible()
+        await expect(page.getByText("Change undone")).toBeVisible()
+    })
+
+    test("reopening a chat keeps its card's undo and does not save it again", async ({
+        page,
+    }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await sendMessage(page, "Create a flowchart")
+        await waitForComplete(page)
+        await expect(page).toHaveURL(/session=/)
+        await page.waitForTimeout(2000)
+        const updatedAt = () => sessionTimes(page)
+        // Leaving the page saves the chat; opening it must not save again
+        await page.reload({ waitUntil: "networkidle" })
+        await expect(page.locator('[data-testid="version-undo"]')).toBeVisible({
+            timeout: 15000,
+        })
+        const opened = await updatedAt()
+        await page.waitForTimeout(3000)
+        await expect(page.locator('[data-testid="version-undo"]')).toBeVisible()
+        expect(await updatedAt()).toEqual(opened)
+    })
+
+    test("restoring from the compare dialog; a new answer takes its Undo away", async ({
+        page,
+    }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await drawAndEdit(page)
+        await page.locator('[data-testid="version-thumb"]').first().click()
+        await expect(page.getByRole("dialog")).toContainText("Version 1")
+        await page.locator('[data-testid="compare-restore"]').click()
+        await expect(
+            getIframeContent(page).getByText("Review Step"),
+        ).toHaveCount(0)
+        const toast = page.getByText("Restored v1")
+        await expect(toast).toBeVisible()
+        await sendMessage(page, "Add a review step")
+        await expect(toast).toHaveCount(0)
+    })
+
+    test("a broken file leaves the chat on screen", async ({ page }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await sendMessage(page, "Create a flowchart")
+        await waitForComplete(page)
+        await openDrawioFile(
+            page,
+            "cut.drawio",
+            '<mxfile><diagram name="P" id="p"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="a" value="Half" vertex="1" parent="1"><mxGeometry as="geometry"/></mxCell>',
+        )
+        await expect(
+            page.getByText("cut.drawio isn't a draw.io diagram."),
+        ).toBeVisible()
+        // A page that is neither a model nor draw.io's compressed form
+        await openDrawioFile(
+            page,
+            "packed.drawio",
+            '<mxfile><diagram id="p1" name="Broken">not-base64!</diagram></mxfile>',
+        )
+        await expect(
+            page.getByText("packed.drawio isn't a draw.io diagram."),
+        ).toBeVisible()
+        await expect(page.getByText("Create a flowchart").first()).toBeVisible()
+        await expect(page.locator('[data-testid="version-card"]')).toHaveCount(
+            1,
+        )
+    })
+
+    test("a file that is not a diagram leaves the start screen", async ({
+        page,
+    }) => {
+        await openApp(page)
+        const [chooser] = await Promise.all([
+            page.waitForEvent("filechooser"),
+            page
+                .getByRole("button", { name: "Open .drawio file" })
+                .first()
+                .click(),
+        ])
+        await chooser.setFiles({
+            name: "notes.xml",
+            mimeType: "application/xml",
+            buffer: Buffer.from("<notes><note>hi</note></notes>"),
+        })
+        await expect(
+            page.getByText("notes.xml isn't a draw.io diagram."),
+        ).toBeVisible()
+        await expect(page.locator('[data-testid="lobby-hero"]')).toBeVisible()
+    })
+
+    test("draw.io loads once when the saved language is another", async ({
+        page,
+    }) => {
+        await page.addInitScript(() => {
+            localStorage.setItem("next-ai-draw-io-locale", "ja")
+        })
+        // Requests for draw.io's page, also one dropped for a newer frame
+        let loads = 0
+        page.on("request", (request) => {
+            if (new URL(request.url()).pathname.endsWith("/drawio/index.html"))
+                loads++
+        })
+        await page.goto("/en", { waitUntil: "networkidle" })
+        await expect(page).toHaveURL(/\/ja/)
+        await expect(
+            page.locator('[data-testid="canvas-loading"]'),
+        ).toHaveCount(0, { timeout: 30000 })
+        await page.waitForTimeout(1000)
+        expect(loads).toBe(1)
+    })
+
+    test("in a small window the chat panel leaves the canvas room and the toolbar fits", async ({
+        page,
+    }) => {
+        await page.addInitScript(() => {
+            localStorage.setItem("next-ai-draw-io-panel-width", "560")
+        })
+        await page.setViewportSize({ width: 800, height: 800 })
+        await openApp(page)
+        await page.locator('[data-testid="draw-yourself"]').click()
+        const toolbar = page.getByRole("toolbar")
+        await expect(toolbar).toBeVisible()
+        await page.waitForTimeout(600)
+        const panel = await boxOf(page.locator('[data-testid="chat-panel"]'))
+        const stage = await boxOf(page.locator('[data-testid="canvas-stage"]'))
+        expect(panel.width).toBeLessThanOrEqual(400)
+        expect(stage.width).toBeGreaterThanOrEqual(370)
+        // The short toolbar fits the canvas, export included
+        const bar = await boxOf(toolbar)
+        expect(bar.x).toBeGreaterThanOrEqual(stage.x)
+        expect(bar.x + bar.width).toBeLessThanOrEqual(stage.x + stage.width)
+        await expect(
+            page.locator('[data-testid="toolbar-export"]'),
+        ).toBeVisible()
+    })
+
+    test("the latest card keeps its undo when the AI writes default values", async ({
+        page,
+    }) => {
+        // x="0" and a 0,0 label offset: draw.io leaves these out when it
+        // saves the diagram again
+        const xml = `<mxCell id="a" value="Origin" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="0" y="0" width="120" height="60" as="geometry"/></mxCell><mxCell id="b" value="Next" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="200" y="0" width="120" height="60" as="geometry"/></mxCell><mxCell id="e" value="go" edge="1" parent="1" source="a" target="b"><mxGeometry relative="1" as="geometry"><mxPoint x="0" y="0" as="offset"/></mxGeometry></mxCell>`
+        await page.route("**/api/chat", (route) =>
+            route.fulfill({
+                status: 200,
+                contentType: "text/event-stream",
+                body: createMockSSEResponse(xml, "Here it is."),
+            }),
+        )
+        await openApp(page)
+        await sendMessage(page, "Draw two boxes")
+        await waitForComplete(page)
+        await expect(page).toHaveURL(/session=/)
+        await page.waitForTimeout(2000)
+        await expect(page.locator('[data-testid="version-undo"]')).toBeVisible()
+    })
+
+    test("a hand edit after a restore takes the restore message's Undo away", async ({
+        page,
+    }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await drawAndEdit(page)
+        await page.locator('[data-testid="version-thumb"]').first().click()
+        await page.locator('[data-testid="compare-restore"]').click()
+        const toast = page.getByText("Restored v1")
+        await expect(toast).toBeVisible()
+        const canvas = getIframeContent(page)
+        await canvas.getByText("Process", { exact: true }).click()
+        await page.keyboard.press("Delete")
+        await expect(canvas.getByText("Process", { exact: true })).toHaveCount(
+            0,
+        )
+        await expect(toast).toHaveCount(0)
+    })
+
+    test("changing the language saves the chat and keeps it open", async ({
+        page,
+    }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await sendMessage(page, "Create a flowchart")
+        await waitForComplete(page)
+        // Right after the answer: its auto-save may not have run yet
+        await openSettingsTab(page, "appearance")
+        await page.locator("#language-select").click()
+        await page.getByRole("option", { name: "日本語", exact: true }).click()
+        await expect(page).toHaveURL(/\/ja\?session=/, { timeout: 15000 })
+        await expect(page.getByText("Create a flowchart").first()).toBeVisible({
+            timeout: 15000,
+        })
+        await expect(page.locator('[data-testid="version-card"]')).toHaveCount(
+            1,
+        )
+    })
+
+    test("the language can't change while an answer runs", async ({ page }) => {
+        await page.route("**/api/chat", async (route) => {
+            await new Promise((resolve) => setTimeout(resolve, 5000))
+            await route
+                .fulfill({
+                    status: 200,
+                    contentType: "text/event-stream",
+                    body: createMockSSEResponse(FLOWCHART_XML, "Slow one."),
+                })
+                .catch(() => {})
+        })
+        await openApp(page)
+        await sendMessage(page, "Create a flowchart")
+        await openSettingsTab(page, "appearance")
+        await expect(page.locator("#language-select")).toBeDisabled()
+    })
+
+    test("keys reach the canvas after the app's toolbar was used", async ({
+        page,
+    }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await sendMessage(page, "Create a flowchart")
+        await waitForComplete(page)
+        const canvas = getIframeContent(page)
+        await canvas.getByText("Process", { exact: true }).click()
+        await page.getByRole("button", { name: "Zoom in" }).click()
+        await page.keyboard.press("Delete")
+        await expect(canvas.getByText("Process", { exact: true })).toHaveCount(
+            0,
+        )
+    })
+
+    test("page menu: rename takes typing, duplicate names the copy", async ({
+        page,
+    }) => {
+        await openApp(page)
+        await page.locator('[data-testid="draw-yourself"]').click()
+        const tabs = page.locator('[data-testid="page-tabs"]')
+        await tabs.getByRole("button", { name: "Page-1" }).click()
+        await page.getByRole("button", { name: "Duplicate" }).click()
+        await expect(tabs).toContainText("Copy of Page-1")
+        // The copy is the current page now: rename it
+        await tabs.getByRole("button", { name: "Copy of Page-1" }).click()
+        await page.getByRole("button", { name: "Rename" }).click()
+        await page.waitForTimeout(300)
+        await page.keyboard.press("ControlOrMeta+a")
+        await page.keyboard.type("Second")
+        await page.keyboard.press("Enter")
+        await expect(tabs).toContainText("Second")
+    })
+
+    test("the layers window lists the layers", async ({ page }) => {
+        await openApp(page)
+        await page.locator('[data-testid="draw-yourself"]').click()
+        await page.locator('[data-testid="toolbar-more"]').click()
+        await page.getByRole("button", { name: "Layers" }).click()
+        await expect(
+            getIframeContent(page)
+                .locator(".mxWindowPane .geToolbarContainer")
+                .first(),
+        ).toBeVisible()
+    })
+
+    test("the toolbar follows freehand drawing started in the canvas", async ({
+        page,
+    }) => {
+        await openApp(page)
+        await page.locator('[data-testid="draw-yourself"]').click()
+        const freehand = page.getByRole("button", { name: "Freehand" })
+        await getIframeContent(page)
+            .locator(".geDiagramContainer")
+            .click({ position: { x: 300, y: 300 } })
+        await page.keyboard.press("x")
+        await expect(freehand).toHaveAttribute("aria-pressed", "true")
+        // The Select button stops it, and draw.io's freehand window goes
+        await page.getByRole("button", { name: "Select" }).click()
+        await expect(freehand).not.toHaveAttribute("aria-pressed", "true")
+        await expect(
+            getIframeContent(page).locator(".mxWindow:visible"),
+        ).toHaveCount(0)
+    })
+
+    test("the zoom menu shows draw.io's own shortcuts", async ({ page }) => {
+        await openApp(page)
+        await page.locator('[data-testid="draw-yourself"]').click()
+        await page.getByRole("button", { name: "Zoom", exact: true }).click()
+        await expect(page.getByRole("button", { name: /Home/ })).toBeVisible()
+    })
+
+    test("opening a chat from the list does not save it again", async ({
+        page,
+    }) => {
+        let n = 0
+        await page.route("**/api/chat", (route) => {
+            n++
+            return route.fulfill({
+                status: 200,
+                contentType: "text/event-stream",
+                body: createMockSSEResponse(FLOWCHART_XML, `Answer ${n}.`),
+            })
+        })
+        await openApp(page)
+        await sendMessage(page, "First chat")
+        await waitForComplete(page)
+        await expect(page).toHaveURL(/session=/)
+        await page.waitForTimeout(1500)
+        await page.locator('[data-testid="new-chat-button"]').click()
+        await sendMessage(page, "Second chat")
+        await waitForComplete(page)
+        await page.waitForTimeout(2500)
+        await page.locator('[data-testid="session-title"]').click()
+        await page.getByRole("button", { name: /First chat/ }).click()
+        await expect(page.getByText("Answer 1.")).toBeVisible()
+        await page.waitForTimeout(500)
+        const opened = await sessionTimes(page)
+        await page.waitForTimeout(3000)
+        expect(await sessionTimes(page)).toEqual(opened)
+    })
+
+    test("retrying the first message does not flash the start screen", async ({
+        page,
+    }) => {
+        let calls = 0
+        await page.route("**/api/chat", async (route) => {
+            calls++
+            if (calls === 1) {
+                await route.fulfill({
+                    status: 500,
+                    contentType: "application/json",
+                    body: JSON.stringify({ error: "Model is overloaded" }),
+                })
+                return
+            }
+            await new Promise((resolve) => setTimeout(resolve, 800))
+            await route.fulfill({
+                status: 200,
+                contentType: "text/event-stream",
+                body: createMockSSEResponse(FLOWCHART_XML, "Here it is."),
+            })
+        })
+        await openApp(page)
+        await sendMessage(page, "Create a flowchart")
+        await expect(page.getByText("Model is overloaded").first()).toBeVisible(
+            {
+                timeout: 10000,
+            },
+        )
+        // Counts every moment the start screen is in the page
+        await page.evaluate(() => {
+            const w = window as any
+            w.__heroSeen = 0
+            new MutationObserver(() => {
+                if (document.querySelector('[data-testid="lobby-hero"]')) {
+                    w.__heroSeen++
+                }
+            }).observe(document.body, { childList: true, subtree: true })
+        })
+        await page.locator('[data-testid="retry-button"]').click()
+        await waitForComplete(page)
+        expect(await page.evaluate(() => (window as any).__heroSeen)).toBe(0)
+    })
+
+    test("page settings draw.io keeps in place follow the AI's diagram", async ({
+        page,
+    }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        // A page shadow, which replacing the page in place would keep
+        await openDrawioFile(
+            page,
+            "shadow.drawio",
+            `<mxfile><diagram name="P" id="p"><mxGraphModel shadow="1"><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="a" value="Shady" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="40" y="40" width="120" height="60" as="geometry"/></mxCell></root></mxGraphModel></diagram></mxfile>`,
+        )
+        const canvas = getIframeContent(page)
+        await expect(canvas.getByText("Shady")).toBeVisible()
+        const shadowed = () =>
+            canvas
+                .locator(".geDiagramContainer svg g")
+                .evaluateAll((els) =>
+                    els.some((el) =>
+                        (el as SVGElement).style.filter.includes("drop-shadow"),
+                    ),
+                )
+        expect(await shadowed()).toBe(true)
+        await sendMessage(page, "Create a flowchart")
+        await waitForComplete(page)
+        await expect(canvas.getByText("Process", { exact: true })).toBeVisible()
+        await expect.poll(shadowed).toBe(false)
+    })
+
+    test("an opened file without shapes is shown, page settings included", async ({
+        page,
+    }) => {
+        await openApp(page)
+        const [chooser] = await Promise.all([
+            page.waitForEvent("filechooser"),
+            page
+                .getByRole("button", { name: "Open .drawio file" })
+                .first()
+                .click(),
+        ])
+        await chooser.setFiles({
+            name: "blank.drawio",
+            mimeType: "application/xml",
+            buffer: Buffer.from(
+                '<mxfile><diagram name="Sheet" id="s"><mxGraphModel background="#ffeecc"><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel></diagram></mxfile>',
+            ),
+        })
+        await expect(page.locator('[data-testid="lobby-hero"]')).toHaveCount(0)
+        await expect(page.locator('[data-testid="page-tabs"]')).toContainText(
+            "Sheet",
+        )
+        await expect
+            .poll(() =>
+                getIframeContent(page)
+                    .locator(".geBackgroundPage")
+                    .evaluate((el) => getComputedStyle(el).backgroundColor),
+            )
+            .toBe("rgb(255, 238, 204)")
+    })
+
+    test("the canvas edge follows a panel narrowed by the window at once", async ({
+        page,
+    }) => {
+        await page.addInitScript(() => {
+            localStorage.setItem("next-ai-draw-io-panel-width", "560")
+        })
+        await page.setViewportSize({ width: 1280, height: 800 })
+        await openApp(page)
+        await page.locator('[data-testid="draw-yourself"]').click()
+        await page.waitForTimeout(800)
+        // 900 px leaves the panel 500 px: the canvas edge moves with it
+        await page.setViewportSize({ width: 900, height: 800 })
+        await page.waitForTimeout(50)
+        const panel = await boxOf(page.locator('[data-testid="chat-panel"]'))
+        const stage = await boxOf(page.locator('[data-testid="canvas-stage"]'))
+        expect(Math.abs(stage.x + stage.width - (panel.x - 12))).toBeLessThan(3)
+    })
+
+    test("closing the panel after dragging its edge keeps the view's middle", async ({
+        page,
+    }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await sendMessage(page, "Create a flowchart")
+        await waitForComplete(page)
+        // Past the time a resize fits the new diagram again; a zoom by
+        // the user keeps the view from then on
+        await page.waitForTimeout(4500)
+        await page.getByRole("button", { name: "Zoom out" }).click()
+        await page.waitForTimeout(500)
+        const handle = await boxOf(page.getByRole("separator"))
+        await page.mouse.move(handle.x + handle.width / 2, handle.y + 100)
+        await page.mouse.down()
+        await page.mouse.move(handle.x - 150, handle.y + 100, { steps: 8 })
+        await page.mouse.up()
+        await page.waitForTimeout(600)
+        const offset = async () => {
+            const stage = await boxOf(
+                page.locator('[data-testid="canvas-stage"]'),
+            )
+            const shape = await boxOf(
+                getIframeContent(page).getByText("Process", { exact: true }),
+            )
+            return shape.x + shape.width / 2 - (stage.x + stage.width / 2)
+        }
+        const before = await offset()
+        await page.getByRole("button", { name: "Hide chat panel" }).click()
+        await page.waitForTimeout(900)
+        expect(Math.abs((await offset()) - before)).toBeLessThan(6)
+    })
+
+    test("compare explains a change in the order of shapes", async ({
+        page,
+    }) => {
+        await page.route("**/api/chat", drawThenEdit())
+        await openApp(page)
+        await sendMessage(page, "Create a flowchart")
+        await waitForComplete(page)
+        await page.waitForTimeout(1500)
+        // Bring the first shape to the front: only the order changes
+        await getIframeContent(page).getByText("Start", { exact: true }).click()
+        await page.keyboard.press("ControlOrMeta+Shift+F")
+        await page.waitForTimeout(1000)
+        await page
+            .locator('[data-testid="version-card"]')
+            .getByRole("button", { name: "Compare" })
+            .click()
+        await expect(page.getByRole("dialog")).toContainText("their order")
+        await expect(
+            page.locator('[data-testid="compare-restore"]'),
+        ).toBeEnabled()
+    })
+
+    test("a file name typed in the export dialog stays when the title comes", async ({
+        page,
+    }) => {
+        await page.route("**/api/chat", async (route) => {
+            await new Promise((resolve) => setTimeout(resolve, 2500))
+            await route
+                .fulfill({
+                    status: 200,
+                    contentType: "text/event-stream",
+                    body: createMockSSEResponse(FLOWCHART_XML, "Here it is."),
+                })
+                .catch(() => {})
+        })
+        await openApp(page)
+        await sendMessage(page, "Create a flowchart")
+        await page.locator('[data-testid="toolbar-export"]').click()
+        const name = page.getByRole("dialog").getByRole("textbox")
+        await name.fill("my-arch")
+        // The answer ends and the chat is saved: it gets its title now
+        await waitForComplete(page)
+        await expect(page).toHaveURL(/session=/, { timeout: 10000 })
+        await page.waitForTimeout(1000)
+        await expect(name).toHaveValue("my-arch")
+    })
+})
diff --git a/tests/unit/diagram-context.test.tsx b/tests/unit/diagram-context.test.tsx
index 3b69cd27..a251b507 100644
--- a/tests/unit/diagram-context.test.tsx
+++ b/tests/unit/diagram-context.test.tsx
@@ -62,7 +62,7 @@ describe("exports in flight at the same time", () => {
         let tag = ""
         const got: string[] = []
         act(() => {
-            tag = result.current.handleExportWithoutHistory()
+            tag = result.current.handleExport()
             result.current.exportResolversRef.current[tag] = (xml) =>
                 got.push(xml)
         })
diff --git a/tests/unit/diagram-diff.test.ts b/tests/unit/diagram-diff.test.ts
new file mode 100644
index 00000000..9636ced3
--- /dev/null
+++ b/tests/unit/diagram-diff.test.ts
@@ -0,0 +1,229 @@
+import pako from "pako"
+import { describe, expect, it } from "vitest"
+import { diffDiagrams, EMPTY_SUMMARY, isSameDocument } from "@/lib/diagram-diff"
+
+const doc = (cells: string) =>
+    `<mxfile><diagram name="Page-1" id="p1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/>${cells}</root></mxGraphModel></diagram></mxfile>`
+
+const box = (id: string, value = id) =>
+    `<mxCell id="${id}" value="${value}" vertex="1" parent="1"><mxGeometry x="0" y="0" width="80" height="40" as="geometry"/></mxCell>`
+const edge = (id: string, source: string, target: string) =>
+    `<mxCell id="${id}" edge="1" parent="1" source="${source}" target="${target}"><mxGeometry relative="1" as="geometry"/></mxCell>`
+
+const pageOf = (name: string, cells: string, attrs = "") =>
+    `<diagram name="${name}" id="${name}"><mxGraphModel${attrs}><root><mxCell id="0"/><mxCell id="1" parent="0"/>${cells}</root></mxGraphModel></diagram>`
+const file = (...pages: string[]) => `<mxfile>${pages.join("")}</mxfile>`
+const packedPage = (name: string, cells: string) => {
+    const model = `<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/>${cells}</root></mxGraphModel>`
+    const packed = Buffer.from(
+        pako.deflateRaw(encodeURIComponent(model)),
+    ).toString("base64")
+    return `<diagram name="${name}" id="${name}">${packed}</diagram>`
+}
+
+describe("diffDiagrams", () => {
+    it("counts added shapes and connectors on an empty canvas", () => {
+        const { summary, touchedIds } = diffDiagrams(
+            "",
+            doc(box("a") + box("b") + edge("e", "a", "b")),
+        )
+        expect(summary.shapesAdded).toBe(2)
+        expect(summary.edgesAdded).toBe(1)
+        expect(touchedIds.sort()).toEqual(["a", "b", "e"])
+    })
+
+    it("separates added, changed and removed cells", () => {
+        const before = doc(box("a") + box("b") + edge("e", "a", "b"))
+        const after = doc(box("a", "renamed") + box("c") + edge("e", "a", "c"))
+        const { summary, touchedIds } = diffDiagrams(before, after)
+        expect(summary).toEqual({
+            shapesAdded: 1,
+            shapesRemoved: 1,
+            shapesChanged: 1,
+            edgesAdded: 0,
+            edgesRemoved: 0,
+            edgesChanged: 1,
+        })
+        expect(touchedIds.sort()).toEqual(["a", "c", "e"])
+    })
+
+    it("ignores how the same cell is written", () => {
+        // As the model writes it, and as draw.io saves it
+        const model = `<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="a" value="A" style="rounded=1;html=1;" vertex="1" parent="1"><mxGeometry x="10" y="20" width="80" height="40" as="geometry"/></mxCell></root></mxGraphModel>`
+        const saved = `<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="a" parent="1" style="html=1;rounded=1" value="A" vertex="1"><mxGeometry as="geometry" height="40" width="80" x="10" y="20"/></mxCell></root></mxGraphModel>`
+        expect(diffDiagrams(model, saved).summary).toEqual(EMPTY_SUMMARY)
+    })
+
+    it("reports nothing for identical diagrams", () => {
+        const xml = doc(box("a"))
+        const { summary, touchedIds } = diffDiagrams(xml, xml)
+        expect(summary).toEqual(EMPTY_SUMMARY)
+        expect(touchedIds).toEqual([])
+    })
+
+    it("ignores values draw.io drops when it saves", () => {
+        // The model writes defaults and long numbers; draw.io leaves them out
+        const model = doc(
+            `<mxCell id="a" value="A" style="" vertex="1" connectable="1" parent="1"><mxGeometry x="0" y="0.0" width="80.0" height="40" relative="0" as="geometry"/></mxCell><mxCell id="e" edge="1" parent="1" source="a" target="a"><mxGeometry relative="1" as="geometry"><mxPoint x="0" y="0" as="offset"/></mxGeometry></mxCell>`,
+        )
+        const saved = doc(
+            `<mxCell id="a" value="A" vertex="1" parent="1"><mxGeometry width="80" height="40" as="geometry"/></mxCell><mxCell id="e" edge="1" parent="1" source="a" target="a"><mxGeometry relative="1" as="geometry"><mxPoint as="offset"/></mxGeometry></mxCell>`,
+        )
+        expect(diffDiagrams(model, saved).summary).toEqual(EMPTY_SUMMARY)
+        expect(isSameDocument(model, saved)).toBe(true)
+    })
+
+    it("reads styles as draw.io does: a later key wins", () => {
+        const styled = (style: string) =>
+            doc(
+                `<mxCell id="a" style="${style}" vertex="1" parent="1"><mxGeometry width="80" height="40" as="geometry"/></mxCell>`,
+            )
+        const blueThenRed = styled("fillColor=#00f;fillColor=#f00")
+        expect(
+            isSameDocument(
+                styled("fillColor=#f00;fillColor=#00f"),
+                blueThenRed,
+            ),
+        ).toBe(false)
+        expect(
+            isSameDocument(
+                styled("fillColor=#f00;rounded=1"),
+                blueThenRed.replace(
+                    "fillColor=#00f;fillColor=#f00",
+                    "rounded=1;fillColor=#f00",
+                ),
+            ),
+        ).toBe(true)
+    })
+
+    it("reads the id from <UserObject> wrappers", () => {
+        const wrapped = `<UserObject label="Linked" link="https://example.com" id="u1"><mxCell vertex="1" parent="1"><mxGeometry width="80" height="40" as="geometry"/></mxCell></UserObject>`
+        const { summary, touchedIds } = diffDiagrams(doc(""), doc(wrapped))
+        expect(summary.shapesAdded).toBe(1)
+        expect(touchedIds).toEqual(["u1"])
+    })
+
+    it("only looks at the first page", () => {
+        const twoPages = file(pageOf("p1", box("a")), pageOf("p2", box("z")))
+        expect(diffDiagrams("", twoPages).summary.shapesAdded).toBe(1)
+    })
+
+    it("reads compressed pages", () => {
+        const xml = file(packedPage("p1", box("a") + box("b")))
+        expect(diffDiagrams("", xml).summary.shapesAdded).toBe(2)
+        expect(diffDiagrams(xml, xml).fromScratch).toBe(false)
+    })
+
+    it("treats unparsable XML as empty", () => {
+        expect(
+            diffDiagrams("<mxfile><diagram>", doc(box("a"))).fromScratch,
+        ).toBe(true)
+    })
+})
+
+describe("isSameDocument", () => {
+    const a = file(pageOf("One", box("a")), pageOf("Two", box("b")))
+
+    it("is true for the same pages written differently", () => {
+        const b = file(
+            pageOf("One", box("a"), ' dx="300" dy="120" grid="1"'),
+            packedPage("Two", box("b")),
+        )
+        expect(isSameDocument(a, b)).toBe(true)
+    })
+
+    it("sees a change on the second page", () => {
+        const b = file(pageOf("One", box("a")), pageOf("Two", box("b", "x")))
+        expect(diffDiagrams(a, b).summary).toEqual(diffDiagrams(a, a).summary)
+        expect(isSameDocument(a, b)).toBe(false)
+    })
+
+    it("sees added pages, renamed pages and changed page settings", () => {
+        expect(isSameDocument(a, file(pageOf("One", box("a"))))).toBe(false)
+        expect(
+            isSameDocument(
+                a,
+                file(pageOf("One", box("a")), pageOf("Renamed", box("b"))),
+            ),
+        ).toBe(false)
+        expect(
+            isSameDocument(
+                file(pageOf("One", box("a"), ' background="#ffffff"')),
+                file(pageOf("One", box("a"), ' background="#000000"')),
+            ),
+        ).toBe(false)
+    })
+
+    it("compares a setting written on one side with draw.io's default", () => {
+        const withAttrs = (attrs: string) =>
+            file(pageOf("One", box("a"), attrs))
+        const plain = withAttrs("")
+        // Defaults, as draw.io fills them in (paper: Letter or A4)
+        expect(
+            isSameDocument(
+                plain,
+                withAttrs(' math="0" pageWidth="827" pageHeight="1169"'),
+            ),
+        ).toBe(true)
+        expect(
+            isSameDocument(
+                plain,
+                withAttrs(' pageWidth="850" pageHeight="1100"'),
+            ),
+        ).toBe(true)
+        // Real changes
+        expect(isSameDocument(plain, withAttrs(' math="1"'))).toBe(false)
+        expect(isSameDocument(plain, withAttrs(' shadow="1"'))).toBe(false)
+        expect(isSameDocument(plain, withAttrs(' pageWidth="1654"'))).toBe(
+            false,
+        )
+        expect(
+            isSameDocument(
+                plain,
+                withAttrs(
+                    ' backgroundImage="{&quot;src&quot;:&quot;x.png&quot;}"',
+                ),
+            ),
+        ).toBe(false)
+    })
+
+    it("sees a background set on one side", () => {
+        expect(
+            isSameDocument(
+                file(pageOf("One", box("a"))),
+                file(pageOf("One", box("a"), ' background="#000000"')),
+            ),
+        ).toBe(false)
+    })
+
+    it("sees shapes brought to front or sent back", () => {
+        expect(
+            isSameDocument(
+                file(pageOf("One", box("a") + box("b"))),
+                file(pageOf("One", box("b") + box("a"))),
+            ),
+        ).toBe(false)
+    })
+
+    it("sees a hidden layer", () => {
+        const hidden = file(pageOf("One", box("a"))).replace(
+            '<mxCell id="1" parent="0"/>',
+            '<mxCell id="1" parent="0" visible="0"/>',
+        )
+        expect(isSameDocument(file(pageOf("One", box("a"))), hidden)).toBe(
+            false,
+        )
+    })
+
+    it("does not care where children of other parents are written", () => {
+        const group = (inner: string) =>
+            `<mxCell id="g" vertex="1" parent="1"><mxGeometry as="geometry"/></mxCell>${inner}`
+        const child = `<mxCell id="c" vertex="1" parent="g"><mxGeometry as="geometry"/></mxCell>`
+        expect(
+            isSameDocument(
+                file(pageOf("One", group(child) + box("a"))),
+                file(pageOf("One", group("") + box("a") + child)),
+            ),
+        ).toBe(true)
+    })
+})
diff --git a/tests/unit/redesign-helpers.test.ts b/tests/unit/redesign-helpers.test.ts
new file mode 100644
index 00000000..bd29e3fe
--- /dev/null
+++ b/tests/unit/redesign-helpers.test.ts
@@ -0,0 +1,168 @@
+import { beforeEach, describe, expect, it } from "vitest"
+import { formatSelectionContext } from "@/lib/chat-helpers"
+import { EMPTY_SUMMARY } from "@/lib/diagram-diff"
+import { withPageDefaults } from "@/lib/drawio/drawio-config"
+import { describeChanges } from "@/lib/version-text"
+import {
+    MAX_VERSIONS,
+    useVersionsStore,
+    versionsFromLegacyHistory,
+} from "@/stores/versions-store"
+
+describe("withPageDefaults", () => {
+    it("adds page and grid when the model has none", () => {
+        expect(withPageDefaults("<mxGraphModel><root/></mxGraphModel>")).toBe(
+            '<mxGraphModel page="1" grid="1" gridSize="10"><root/></mxGraphModel>',
+        )
+    })
+
+    it("keeps values the diagram already sets", () => {
+        const xml = '<mxGraphModel dx="10" page="0" grid="0" gridSize="5">'
+        expect(withPageDefaults(xml)).toBe(xml)
+    })
+
+    it("reads attributes written with spaces around =", () => {
+        const xml = '<mxGraphModel page = "0" grid ="0" gridSize= "5">'
+        expect(withPageDefaults(xml)).toBe(xml)
+    })
+
+    it("handles self-closing models and several pages", () => {
+        const xml =
+            '<mxfile><diagram><mxGraphModel/></diagram><diagram><mxGraphModel page="0"></mxGraphModel></diagram></mxfile>'
+        expect(withPageDefaults(xml)).toBe(
+            '<mxfile><diagram><mxGraphModel page="1" grid="1" gridSize="10"/></diagram><diagram><mxGraphModel page="0" grid="1" gridSize="10"></mxGraphModel></diagram></mxfile>',
+        )
+    })
+})
+
+describe("describeChanges", () => {
+    const en = {
+        shapesAddedOne: "added 1 shape",
+        shapesAddedOther: "added {count} shapes",
+        edgesChangedOne: "changed 1 connector",
+        edgesChangedOther: "changed {count} connectors",
+        noChanges: "No visible changes",
+        listSeparator: ", ",
+    }
+
+    it("uses singular and plural forms and sentence case", () => {
+        expect(
+            describeChanges(
+                { ...EMPTY_SUMMARY, shapesAdded: 2, edgesChanged: 1 },
+                en,
+            ),
+        ).toBe("Added 2 shapes, changed 1 connector")
+    })
+
+    it("says so when nothing changed", () => {
+        expect(describeChanges({ ...EMPTY_SUMMARY }, en)).toBe(
+            "No visible changes",
+        )
+    })
+
+    it("uses the language's list separator", () => {
+        const zh = {
+            shapesAddedOther: "新增 {count} 个图形",
+            edgesChangedOne: "改了 1 条连线",
+            listSeparator: "，",
+        }
+        expect(
+            describeChanges(
+                { ...EMPTY_SUMMARY, shapesAdded: 3, edgesChanged: 1 },
+                zh,
+            ),
+        ).toBe("新增 3 个图形，改了 1 条连线")
+    })
+})
+
+describe("formatSelectionContext", () => {
+    it("lists selected ids with their labels", () => {
+        const text = formatSelectionContext([
+            { id: "4", label: "EC2" },
+            { id: "cf", label: "" },
+        ])
+        expect(text).toContain('- id="4" (EC2)')
+        expect(text).toContain('- id="cf"')
+        expect(text).not.toContain('id="cf" (')
+    })
+
+    it("returns nothing for missing or malformed input", () => {
+        expect(formatSelectionContext(undefined)).toBe("")
+        expect(formatSelectionContext("4")).toBe("")
+        expect(formatSelectionContext([{ label: "no id" }])).toBe("")
+    })
+
+    it("strips quotes and newlines and limits length and count", () => {
+        const many = Array.from({ length: 80 }, (_, i) => ({
+            id: `c${i}`,
+            label: `line\n"quoted"${"x".repeat(200)}`,
+        }))
+        const text = formatSelectionContext(many)
+        const lines = text.split("\n").filter((l) => l.startsWith("- id="))
+        expect(lines).toHaveLength(50)
+        // The model is told the list is cut short
+        expect(text).toContain("- and 30 more selected shapes not listed")
+        expect(text).not.toContain('"quoted"')
+        expect(lines[0].length).toBeLessThan(130)
+    })
+})
+
+describe("versions store", () => {
+    beforeEach(() => useVersionsStore.getState().clear())
+
+    const add = (n: number) =>
+        useVersionsStore.getState().addVersion({
+            xml: `<x n="${n}"/>`,
+            beforeXml: `<before n="${n}"/>`,
+            turnIndex: n,
+            summary: { ...EMPTY_SUMMARY },
+        })
+
+    it("keeps the before-XML only on the newest version", () => {
+        add(0)
+        add(2)
+        const [first, second] = useVersionsStore.getState().versions
+        expect(first.beforeXml).toBeUndefined()
+        expect(second.beforeXml).toBe('<before n="2"/>')
+    })
+
+    it("keeps at most MAX_VERSIONS versions", () => {
+        for (let i = 0; i < MAX_VERSIONS + 5; i++) add(i)
+        const { versions } = useVersionsStore.getState()
+        expect(versions).toHaveLength(MAX_VERSIONS)
+        expect(versions[0].turnIndex).toBe(5)
+    })
+
+    it("drops versions from a turn that is re-run, none left on the canvas", () => {
+        add(0)
+        add(2)
+        add(4)
+        useVersionsStore.getState().removeFromTurn(2)
+        const state = useVersionsStore.getState()
+        expect(state.versions.map((v) => v.turnIndex)).toEqual([0])
+        expect(state.onCanvasVersionId).toBeNull()
+    })
+
+    it("hand edits clear both version flags", () => {
+        const id = add(0)
+        expect(useVersionsStore.getState().onCanvasVersionId).toBe(id)
+        useVersionsStore.getState().clearCanvasFlags()
+        let state = useVersionsStore.getState()
+        expect(state.onCanvasVersionId).toBeNull()
+        expect(state.versions[0].onCanvas).toBeUndefined()
+        useVersionsStore.getState().setUndone(id)
+        useVersionsStore.getState().clearCanvasFlags()
+        state = useVersionsStore.getState()
+        expect(state.undoneVersionId).toBeNull()
+        expect(state.versions[0].undone).toBeUndefined()
+    })
+
+    it("converts the old history list", () => {
+        const versions = versionsFromLegacyHistory([
+            { svg: "data:image/svg+xml;base64,AA", xml: "<a/>" },
+        ])
+        expect(versions).toHaveLength(1)
+        expect(versions[0]).toMatchObject({ xml: "<a/>", turnIndex: -1 })
+        expect(versionsFromLegacyHistory(undefined)).toEqual([])
+    })
+})
diff --git a/tests/unit/short-model-name.test.ts b/tests/unit/short-model-name.test.ts
new file mode 100644
index 00000000..49018609
--- /dev/null
+++ b/tests/unit/short-model-name.test.ts
@@ -0,0 +1,37 @@
+import { describe, expect, it } from "vitest"
+import { shortModelName } from "@/components/model-selector"
+
+describe("shortModelName", () => {
+    it("drops the provider or region prefix the logo already shows", () => {
+        expect(shortModelName("nvidia/nemotron-3-ultra-550b-a55b:free")).toBe(
+            "nemotron-3-ultra-550b-a55b:free",
+        )
+        expect(shortModelName("global.anthropic.claude-opus-5-5")).toBe(
+            "claude-opus-5-5",
+        )
+        expect(shortModelName("us.amazon.nova-2-lite-v1:0")).toBe(
+            "nova-2-lite-v1:0",
+        )
+        expect(shortModelName("openai.gpt-6-luna")).toBe("gpt-6-luna")
+        expect(shortModelName("@tx/deepseek-ai/deepseek-v32")).toBe(
+            "deepseek-v32",
+        )
+    })
+
+    it("keeps the vendor when the rest does not name it", () => {
+        expect(shortModelName("deepseek.r1-v1:0")).toBe("deepseek.r1-v1:0")
+        expect(shortModelName("us.deepseek.r1-v1:0")).toBe("deepseek.r1-v1:0")
+        expect(shortModelName("deepseek.v3-v1:0")).toBe("deepseek.v3-v1:0")
+    })
+
+    it("keeps version numbers with dots", () => {
+        for (const id of [
+            "gpt-5.5",
+            "glm-4.7",
+            "gemini-2.5-flash",
+            "kimi-k2.6",
+        ]) {
+            expect(shortModelName(id)).toBe(id)
+        }
+    })
+})
diff --git a/tests/unit/tool-call-card.test.tsx b/tests/unit/tool-activity.test.tsx
similarity index 61%
rename from tests/unit/tool-call-card.test.tsx
rename to tests/unit/tool-activity.test.tsx
index 4225f533..7356acc3 100644
--- a/tests/unit/tool-call-card.test.tsx
+++ b/tests/unit/tool-activity.test.tsx
@@ -1,15 +1,10 @@
 import { cleanup, render } from "@testing-library/react"
 import { afterEach, describe, expect, it } from "vitest"
-import { ToolCallCard } from "@/components/chat/ToolCallCard"
+import { ToolInputDetails } from "@/components/chat/tool-activity"
 
 afterEach(cleanup)
 
-const dict = {
-    tools: { complete: "Complete" },
-    chat: { copied: "Copied", failedToCopy: "Failed", copyResponse: "Copy" },
-}
-
-describe("ToolCallCard", () => {
+describe("ToolInputDetails", () => {
     it("shows streamed operations without crashing on broken entries", () => {
         // A partly streamed or invalid edit_diagram input
         const operations = [
@@ -22,7 +17,7 @@ describe("ToolCallCard", () => {
             { operation: "update", cell_id: "3", new_xml: '<mxCell id="3"/>' },
         ]
         const { container } = render(
-            <ToolCallCard
+            <ToolInputDetails
                 part={
                     {
                         type: "tool-edit_diagram",
@@ -31,15 +26,25 @@ describe("ToolCallCard", () => {
                         input: { operations },
                     } as any
                 }
-                expandedTools={{ t1: true }}
-                setExpandedTools={() => {}}
-                onCopy={() => {}}
-                copiedToolCallId={null}
-                copyFailedToolCallId={null}
-                dict={dict}
             />,
         )
-        expect(container.textContent).toContain("cell_id: 3")
+        expect(container.textContent).toContain("update3")
         expect(container.textContent).toContain('<mxCell id="3"/>')
     })
+
+    it("ignores an xml input that is not text", () => {
+        const { container } = render(
+            <ToolInputDetails
+                part={
+                    {
+                        type: "tool-display_diagram",
+                        toolCallId: "t2",
+                        state: "input-streaming",
+                        input: { xml: { broken: true } },
+                    } as any
+                }
+            />,
+        )
+        expect(container.textContent).toContain("broken")
+    })
 })
diff --git a/tests/unit/chat-message-display-preview.test.tsx b/tests/unit/use-diagram-streaming.test.tsx
similarity index 74%
rename from tests/unit/chat-message-display-preview.test.tsx
rename to tests/unit/use-diagram-streaming.test.tsx
index a837ef6f..e551a242 100644
--- a/tests/unit/chat-message-display-preview.test.tsx
+++ b/tests/unit/use-diagram-streaming.test.tsx
@@ -1,6 +1,5 @@
-import { render } from "@testing-library/react"
+import { renderHook } from "@testing-library/react"
 import { describe, expect, it, vi } from "vitest"
-import en from "@/lib/i18n/dictionaries/en.json"
 
 const page = (cells: string) =>
     `<mxfile><diagram id="p" name="Page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/>${cells}</root></mxGraphModel></diagram></mxfile>`
@@ -19,12 +18,8 @@ vi.mock("@/contexts/diagram-context", () => ({
         loadDiagram: vi.fn(() => null),
     }),
 }))
-vi.mock("@/hooks/use-dictionary", () => ({ useDictionary: () => en }))
 
-import { ChatMessageDisplay } from "@/components/chat-message-display"
-
-// jsdom has no layout
-Element.prototype.scrollIntoView = () => {}
+import { useDiagramStreaming } from "@/components/chat/use-diagram-streaming"
 
 describe("the streaming preview of a second edit", () => {
     it("starts from the first edit's result", () => {
@@ -51,15 +46,13 @@ describe("the streaming preview of a second edit", () => {
                 ],
             },
         ] as any
-        render(
-            <ChatMessageDisplay
-                messages={messages}
-                setInput={() => {}}
-                setFiles={() => {}}
-                processedToolCallsRef={{ current: new Set() }}
-                editDiagramOriginalXmlRef={editDiagramOriginalXmlRef}
-                status="streaming"
-            />,
+        renderHook(() =>
+            useDiagramStreaming({
+                messages,
+                processedToolCallsRef: { current: new Set() },
+                editDiagramOriginalXmlRef,
+                loadedMessageIdsRef: { current: new Set() },
+            }),
         )
         expect(editDiagramOriginalXmlRef.current.get("edit-2")).toBe(
             AFTER_FIRST_EDIT,
diff --git a/tests/unit/use-diagram-tool-handlers.test.tsx b/tests/unit/use-diagram-tool-handlers.test.tsx
index 56e64a45..2c26b836 100644
--- a/tests/unit/use-diagram-tool-handlers.test.tsx
+++ b/tests/unit/use-diagram-tool-handlers.test.tsx
@@ -10,6 +10,7 @@ const box = (id: string) =>
 function setup(partialXml: string) {
     const refs = {
         partialXmlRef: { current: partialXml },
+        continuationOriginalRef: { current: null },
         // A failed edit's preview is still on the canvas, its original kept
         editDiagramOriginalXmlRef: {
             current: new Map([["edit-1", "<mxfile>original</mxfile>"]]),
@@ -19,30 +20,28 @@ function setup(partialXml: string) {
         chartXMLRef: { current: "" },
     }
     const onDisplayChart = vi.fn(
-        (_xml: string, _skipValidation?: boolean): string | null => null,
+        (
+            _xml: string,
+            _skipValidation?: boolean,
+            _mode?: string,
+        ): string | null => null,
     )
     const { result } = renderHook(() =>
         useDiagramToolHandlers({
             ...refs,
             onDisplayChart,
             onFetchChart: async () => "",
-            onExport: () => {},
             enableVlmValidation: false,
         }),
     )
     const addToolOutput = vi.fn()
-    const append = (xml: string) =>
+    const call = (toolName: string, input: object, toolCallId = "call-1") =>
         result.current.handleToolCall(
-            {
-                toolCall: {
-                    toolCallId: "append-1",
-                    toolName: "append_diagram",
-                    input: { xml },
-                },
-            },
+            { toolCall: { toolCallId, toolName, input } },
             addToolOutput,
         )
-    return { refs, onDisplayChart, addToolOutput, append }
+    const append = (xml: string) => call("append_diagram", { xml }, "append-1")
+    return { refs, onDisplayChart, addToolOutput, append, call }
 }
 
 describe("the screenshot check and Stop", () => {
@@ -57,13 +56,13 @@ describe("the screenshot check and Stop", () => {
         const { result } = renderHook(() =>
             useDiagramToolHandlers({
                 partialXmlRef: { current: "" },
+                continuationOriginalRef: { current: null },
                 editDiagramOriginalXmlRef: { current: new Map() },
                 processedToolCallsRef: { current: new Set() },
                 validationRetryCountRef: opts.retryCount ?? { current: 0 },
                 chartXMLRef: { current: "" },
                 onDisplayChart: () => null,
                 onFetchChart: async () => "",
-                onExport: () => {},
                 enableVlmValidation: true,
                 captureValidationPng:
                     opts.captureValidationPng ??
@@ -202,3 +201,39 @@ describe("append_diagram and the stored previews", () => {
         expect(refs.editDiagramOriginalXmlRef.current.size).toBe(1)
     })
 })
+
+describe("display_diagram and undo", () => {
+    it("commits the diagram as one undo step before any check", async () => {
+        const { onDisplayChart, call } = setup("")
+        await call("display_diagram", { xml: box("2") })
+        expect(onDisplayChart.mock.calls.map((c) => c[2])).toEqual(["commit"])
+    })
+})
+
+describe("a cut off drawing", () => {
+    it("is replaced starting from the diagram before it", async () => {
+        const { refs, onDisplayChart, call } = setup("")
+        // Cut off: its preview stays, the diagram before it is kept
+        await call(
+            "display_diagram",
+            { xml: `${box("2")}<mxCell id="3"` },
+            "d1",
+        )
+        expect(refs.continuationOriginalRef.current).toBe(
+            "<mxfile>original</mxfile>",
+        )
+        // A later drawing (after failed calls undone to the cut off one)
+        // first goes back to it, so its undo step starts there
+        await call("display_diagram", { xml: box("4") }, "d2")
+        expect(
+            onDisplayChart.mock.calls.map(([xml, , mode]) => [
+                xml === "<mxfile>original</mxfile>" ? "original" : "new",
+                mode,
+            ]),
+        ).toEqual([
+            ["original", "revert"],
+            ["new", "commit"],
+        ])
+        expect(refs.continuationOriginalRef.current).toBeNull()
+    })
+})