chore: add tone and style guidelines to system prompts

- Fix bug where text after tool calls was merged with initial text
- Group consecutive text/file parts into bubbles while keeping tools in order
- Parts now display as: plan -> tool_result -> additional text
- Remove debug logs from fixToolCallInputs function

Co-authored-by: dayuan.jiang <jiangdy@amazon.co.jp>

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,35 @@
+---
+name: Bug Report
+about: Report a bug to help us improve
+title: '[Bug] '
+labels: bug
+assignees: ''
+---
+
+> **Note**: This template is just a guide. Feel free to ignore the format entirely - any feedback is welcome! Don't let the template stop you from sharing your thoughts.
+
+## Bug Description
+A brief description of the issue.
+
+## Steps to Reproduce
+1. Go to '...'
+2. Click on '...'
+3. Scroll to '...'
+4. See error
+
+## Expected Behavior
+What you expected to happen.
+
+## Actual Behavior
+What actually happened.
+
+## Screenshots
+If applicable, add screenshots to help explain the problem.
+
+## Environment
+- OS: [e.g. Windows 11, macOS 14]
+- Browser: [e.g. Chrome 120, Safari 17]
+- Version: [e.g. 1.0.0]
+
+## Additional Context
+Any other information about the problem.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: Discussions
+    url: https://github.com/DayuanJiang/next-ai-draw-io/discussions
+    about: Have questions or ideas? Feel free to start a discussion

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,25 @@
+---
+name: Feature Request
+about: Suggest a new feature for this project
+title: '[Feature] '
+labels: enhancement
+assignees: ''
+---
+
+> **Note**: This template is just a guide. Feel free to ignore the format entirely - any feedback is welcome! Don't let the template stop you from sharing your ideas.
+
+## Feature Description
+A brief description of the feature you'd like.
+
+## Problem Context
+Is this related to a problem? Please describe.
+e.g. I'm always frustrated when [...]
+
+## Proposed Solution
+How you'd like this feature to work.
+
+## Alternatives Considered
+Any alternative solutions or features you've considered.
+
+## Additional Context
+Any other information or screenshots about the feature request.

CONTRIBUTING.md

@@ -0,0 +1,35 @@
+# Contributing
+
+## Setup
+
+```bash
+git clone https://github.com/YOUR_USERNAME/next-ai-draw-io.git
+cd next-ai-draw-io
+npm install
+cp env.example .env.local
+npm run dev
+```
+
+## Code Style
+
+We use [Biome](https://biomejs.dev/) for linting and formatting:
+
+```bash
+npm run format   # Format code
+npm run lint     # Check lint errors
+npm run check    # Run all checks (CI)
+```
+
+Pre-commit hooks via Husky will run Biome automatically on staged files.
+
+For a better experience, install the [Biome VS Code extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome) for real-time linting and format-on-save.
+
+## Pull Requests
+
+1. Create a feature branch
+2. Make changes and ensure `npm run check` passes
+3. Submit PR against `main` with a clear description
+
+## Issues
+
+Include steps to reproduce, expected vs actual behavior, and AI provider used.

README.md

@@ -88,6 +88,7 @@ Diagrams are represented as XML that can be rendered in draw.io. The AI processe
 -   Ollama
 -   OpenRouter
 -   DeepSeek
+-   SiliconFlow
 
 All providers except AWS Bedrock and OpenRouter support custom endpoints.
 
@@ -115,6 +116,14 @@ docker run -d -p 3000:3000 \
   ghcr.io/dayuanjiang/next-ai-draw-io:latest
 ```
 
+Or use an env file (create one from `env.example`):
+
+```bash
+cp env.example .env
+# Edit .env with your configuration
+docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest
+```
+
 Open [http://localhost:3000](http://localhost:3000) in your browser.
 
 Replace the environment variables with your preferred AI provider configuration. See [Multi-Provider Support](#multi-provider-support) for available options.
@@ -132,8 +141,6 @@ cd next-ai-draw-io
 
 ```bash
 npm install
-# or
-yarn install
 ```
 
 3. Configure your AI provider:
@@ -146,9 +153,10 @@ cp env.example .env.local
 
 Edit `.env.local` and configure your chosen provider:
 
--   Set `AI_PROVIDER` to your chosen provider (bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek)
+-   Set `AI_PROVIDER` to your chosen provider (bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow)
 -   Set `AI_MODEL` to the specific model you want to use
 -   Add the required API keys for your provider
+-   `TEMPERATURE`: Optional temperature setting (e.g., `0` for deterministic output). Leave unset for models that don't support it (e.g., reasoning models).
 -   `ACCESS_CODE_LIST`: Optional access password(s), can be comma-separated for multiple passwords.
 
 > Warning: If you do not set `ACCESS_CODE_LIST`, anyone can access your deployed site directly, which may lead to rapid depletion of your token. It is recommended to set this option.

README_CN.md

@@ -88,6 +88,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   Ollama
 -   OpenRouter
 -   DeepSeek
+-   SiliconFlow
 
 除AWS Bedrock和OpenRouter外，所有提供商都支持自定义端点。
 
@@ -146,9 +147,10 @@ cp env.example .env.local
 
 编辑 `.env.local` 并配置您选择的提供商：
 
--   将 `AI_PROVIDER` 设置为您选择的提供商（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek）
+-   将 `AI_PROVIDER` 设置为您选择的提供商（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow）
 -   将 `AI_MODEL` 设置为您要使用的特定模型
 -   添加您的提供商所需的API密钥
+-   `TEMPERATURE`：可选的温度设置（例如 `0` 表示确定性输出）。对于不支持此参数的模型（如推理模型），请不要设置。
 -   `ACCESS_CODE_LIST` 访问密码，可选，可以使用逗号隔开多个密码。
 
 > 警告：如果不填写 `ACCESS_CODE_LIST`，则任何人都可以直接使用你部署后的网站，可能会导致你的 token 被急速消耗完毕，建议填写此选项。

README_JA.md

@@ -88,6 +88,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   Ollama
 -   OpenRouter
 -   DeepSeek
+-   SiliconFlow
 
 AWS BedrockとOpenRouter以外のすべてのプロバイダーはカスタムエンドポイントをサポートしています。
 
@@ -146,9 +147,10 @@ cp env.example .env.local
 
 `.env.local`を編集して選択したプロバイダーを設定：
 
--   `AI_PROVIDER`を選択したプロバイダーに設定（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek）
+-   `AI_PROVIDER`を選択したプロバイダーに設定（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow）
 -   `AI_MODEL`を使用する特定のモデルに設定
 -   プロバイダーに必要なAPIキーを追加
+-   `TEMPERATURE`：オプションの温度設定（例：`0`で決定論的な出力）。温度をサポートしないモデル（推論モデルなど）では設定しないでください。
 -   `ACCESS_CODE_LIST` アクセスパスワード（オプション）。カンマ区切りで複数のパスワードを指定できます。
 
 > 警告：`ACCESS_CODE_LIST`を設定しない場合、誰でもデプロイされたサイトに直接アクセスできるため、トークンが急速に消費される可能性があります。このオプションを設定することをお勧めします。

app/api/chat/route.ts

@@ -2,6 +2,7 @@ import {
     convertToModelMessages,
     createUIMessageStream,
     createUIMessageStreamResponse,
+    stepCountIs,
     streamText,
 } from "ai"
 import { z } from "zod"
@@ -15,7 +16,7 @@ import {
 } from "@/lib/langfuse"
 import { getSystemPrompt } from "@/lib/system-prompts"
 
-export const maxDuration = 300
+export const maxDuration = 60
 
 // File upload limits (must match client-side)
 const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2MB
@@ -40,7 +41,7 @@ function validateFileParts(messages: any[]): {
     for (const filePart of fileParts) {
         // Data URLs format: data:image/png;base64,<data>
         // Base64 increases size by ~33%, so we check the decoded size
-        if (filePart.url && filePart.url.startsWith("data:")) {
+        if (filePart.url?.startsWith("data:")) {
             const base64Data = filePart.url.split(",")[1]
             if (base64Data) {
                 const sizeInBytes = Math.ceil((base64Data.length * 3) / 4)
@@ -63,6 +64,35 @@ function isMinimalDiagram(xml: string): boolean {
     return !stripped.includes('id="2"')
 }
 
+// Helper function to fix tool call inputs for Bedrock API
+// Bedrock requires toolUse.input to be a JSON object, not a string
+function fixToolCallInputs(messages: any[]): any[] {
+    return messages.map((msg) => {
+        if (msg.role !== "assistant" || !Array.isArray(msg.content)) {
+            return msg
+        }
+        const fixedContent = msg.content.map((part: any) => {
+            if (part.type === "tool-call") {
+                if (typeof part.input === "string") {
+                    try {
+                        const parsed = JSON.parse(part.input)
+                        return { ...part, input: parsed }
+                    } catch {
+                        // If parsing fails, wrap the string in an object
+                        return { ...part, input: { rawInput: part.input } }
+                    }
+                }
+                // Input is already an object, but verify it's not null/undefined
+                if (part.input === null || part.input === undefined) {
+                    return { ...part, input: {} }
+                }
+            }
+            return part
+        })
+        return { ...msg, content: fixedContent }
+    })
+}
+
 // Helper function to create cached stream response
 function createCachedStreamResponse(xml: string): Response {
     const toolCallId = `cached-${Date.now()}`
@@ -147,20 +177,44 @@ async function handleChatRequest(req: Request): Promise<Response> {
     const isFirstMessage = messages.length === 1
     const isEmptyDiagram = !xml || xml.trim() === "" || isMinimalDiagram(xml)
 
+    // DEBUG: Log cache check conditions
+    console.log("[Cache DEBUG] messages.length:", messages.length)
+    console.log("[Cache DEBUG] isFirstMessage:", isFirstMessage)
+    console.log("[Cache DEBUG] xml length:", xml?.length || 0)
+    console.log("[Cache DEBUG] xml preview:", xml?.substring(0, 200))
+    console.log("[Cache DEBUG] isEmptyDiagram:", isEmptyDiagram)
+
     if (isFirstMessage && isEmptyDiagram) {
         const lastMessage = messages[0]
         const textPart = lastMessage.parts?.find((p: any) => p.type === "text")
         const filePart = lastMessage.parts?.find((p: any) => p.type === "file")
 
+        console.log("[Cache DEBUG] textPart?.text:", textPart?.text)
+        console.log("[Cache DEBUG] hasFilePart:", !!filePart)
+
         const cached = findCachedResponse(textPart?.text || "", !!filePart)
 
+        console.log("[Cache DEBUG] cached found:", !!cached)
+
         if (cached) {
             console.log(
                 "[Cache] Returning cached response for:",
                 textPart?.text,
             )
             return createCachedStreamResponse(cached.xml)
+        } else {
+            console.log("[Cache DEBUG] No cache match - checking why...")
+            console.log(
+                "[Cache DEBUG] Exact promptText:",
+                JSON.stringify(textPart?.text),
+            )
         }
+    } else {
+        console.log("[Cache DEBUG] Skipping cache check - conditions not met")
+        if (!isFirstMessage)
+            console.log("[Cache DEBUG] Reason: not first message")
+        if (!isEmptyDiagram)
+            console.log("[Cache DEBUG] Reason: diagram not empty")
     }
     // === CACHE CHECK END ===
 
@@ -189,9 +243,34 @@ ${lastMessageText}
     // Convert UIMessages to ModelMessages and add system message
     const modelMessages = convertToModelMessages(messages)
 
+    // Debug: log raw messages to see what's coming in
+    console.log(
+        "[DEBUG] Raw UI messages:",
+        JSON.stringify(
+            messages.map((m: any, i: number) => ({
+                index: i,
+                role: m.role,
+                partsCount: m.parts?.length,
+                parts: m.parts?.map((p: any) => ({
+                    type: p.type,
+                    toolName: p.toolName,
+                    toolCallId: p.toolCallId,
+                    state: p.state,
+                    inputType: p.input ? typeof p.input : undefined,
+                    input: p.input,
+                })),
+            })),
+            null,
+            2,
+        ),
+    )
+
+    // Fix tool call inputs for Bedrock API (requires JSON objects, not strings)
+    const fixedMessages = fixToolCallInputs(modelMessages)
+
     // Filter out messages with empty content arrays (Bedrock API rejects these)
     // This is a safety measure - ideally convertToModelMessages should handle all cases
-    let enhancedMessages = modelMessages.filter(
+    let enhancedMessages = fixedMessages.filter(
         (msg: any) =>
             msg.content && Array.isArray(msg.content) && msg.content.length > 0,
     )
@@ -267,6 +346,7 @@ ${lastMessageText}
 
     const result = streamText({
         model,
+        stopWhen: stepCountIs(5),
         messages: allMessages,
         ...(providerOptions && { providerOptions }),
         ...(headers && { headers }),
@@ -277,6 +357,32 @@ ${lastMessageText}
                 userId,
             }),
         }),
+        // Repair malformed tool calls (model sometimes generates invalid JSON with unescaped quotes)
+        experimental_repairToolCall: async ({ toolCall }) => {
+            // The toolCall.input contains the raw JSON string that failed to parse
+            const rawJson =
+                typeof toolCall.input === "string" ? toolCall.input : null
+
+            if (rawJson) {
+                try {
+                    // Fix unescaped quotes: x="520" should be x=\"520\"
+                    const fixed = rawJson.replace(
+                        /([a-zA-Z])="(\d+)"/g,
+                        '$1=\\"$2\\"',
+                    )
+                    const parsed = JSON.parse(fixed)
+                    return {
+                        type: "tool-call" as const,
+                        toolCallId: toolCall.toolCallId,
+                        toolName: toolCall.toolName,
+                        input: JSON.stringify(parsed),
+                    }
+                } catch {
+                    // Repair failed, return null
+                }
+            }
+            return null
+        },
         onFinish: ({ text, usage, providerMetadata }) => {
             console.log(
                 "[Cache] Full providerMetadata:",
@@ -342,7 +448,9 @@ IMPORTANT: Keep edits concise:
 - Only include the lines that are changing, plus 1-2 surrounding lines for context if needed
 - Break large changes into multiple smaller edits
 - Each search must contain complete lines (never truncate mid-line)
-- First match only - be specific enough to target the right element`,
+- First match only - be specific enough to target the right element
+
+⚠️ JSON ESCAPING: Every " inside string values MUST be escaped as \\". Example: x=\\"100\\" y=\\"200\\" - BOTH quotes need backslashes!`,
                 inputSchema: z.object({
                     edits: z
                         .array(
@@ -363,7 +471,9 @@ IMPORTANT: Keep edits concise:
                 }),
             },
         },
-        temperature: 0,
+        ...(process.env.TEMPERATURE !== undefined && {
+            temperature: parseFloat(process.env.TEMPERATURE),
+        }),
     })
 
     return result.toUIMessageStreamResponse()

app/api/verify-access-code/route.ts

@@ -0,0 +1,32 @@
+export async function POST(req: Request) {
+    const accessCodes =
+        process.env.ACCESS_CODE_LIST?.split(",")
+            .map((code) => code.trim())
+            .filter(Boolean) || []
+
+    // If no access codes configured, verification always passes
+    if (accessCodes.length === 0) {
+        return Response.json({
+            valid: true,
+            message: "No access code required",
+        })
+    }
+
+    const accessCodeHeader = req.headers.get("x-access-code")
+
+    if (!accessCodeHeader) {
+        return Response.json(
+            { valid: false, message: "Access code is required" },
+            { status: 401 },
+        )
+    }
+
+    if (!accessCodes.includes(accessCodeHeader)) {
+        return Response.json(
+            { valid: false, message: "Invalid access code" },
+            { status: 401 },
+        )
+    }
+
+    return Response.json({ valid: true, message: "Access code is valid" })
+}

app/page.tsx

@@ -1,8 +1,9 @@
 "use client"
-import React, { useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { DrawIoEmbed } from "react-drawio"
 import type { ImperativePanelHandle } from "react-resizable-panels"
 import ChatPanel from "@/components/chat-panel"
+import { STORAGE_CLOSE_PROTECTION_KEY } from "@/components/settings-dialog"
 import {
     ResizableHandle,
     ResizablePanel,
@@ -11,7 +12,7 @@ import {
 import { useDiagram } from "@/contexts/diagram-context"
 
 export default function Home() {
-    const { drawioRef, handleDiagramExport } = useDiagram()
+    const { drawioRef, handleDiagramExport, onDrawioLoad } = useDiagram()
     const [isMobile, setIsMobile] = useState(false)
     const [isChatVisible, setIsChatVisible] = useState(true)
     const [drawioUi, setDrawioUi] = useState<"min" | "sketch">("min")
@@ -25,6 +26,16 @@ export default function Home() {
         }
         setIsThemeLoaded(true)
     }, [])
+    const [closeProtection, setCloseProtection] = useState(false)
+
+    // Load close protection setting from localStorage after mount
+    useEffect(() => {
+        const saved = localStorage.getItem(STORAGE_CLOSE_PROTECTION_KEY)
+        // Default to false since auto-save handles persistence
+        if (saved === "true") {
+            setCloseProtection(true)
+        }
+    }, [])
     const chatPanelRef = useRef<ImperativePanelHandle>(null)
 
     useEffect(() => {
@@ -65,6 +76,8 @@ export default function Home() {
     // Show confirmation dialog when user tries to leave the page
     // This helps prevent accidental navigation from browser back gestures
     useEffect(() => {
+        if (!closeProtection) return
+
         const handleBeforeUnload = (event: BeforeUnloadEvent) => {
             event.preventDefault()
             return ""
@@ -73,7 +86,7 @@ export default function Home() {
         window.addEventListener("beforeunload", handleBeforeUnload)
         return () =>
             window.removeEventListener("beforeunload", handleBeforeUnload)
-    }, [])
+    }, [closeProtection])
 
     return (
         <div className="h-screen bg-background relative overflow-hidden">
@@ -95,6 +108,7 @@ export default function Home() {
                                     key={drawioUi}
                                     ref={drawioRef}
                                     onExport={handleDiagramExport}
+                                    onLoad={onDrawioLoad}
                                     urlParameters={{
                                         ui: drawioUi,
                                         spin: true,
@@ -137,6 +151,7 @@ export default function Home() {
                                 setDrawioUi(newTheme)
                             }}
                             isMobile={isMobile}
+                            onCloseProtectionChange={setCloseProtection}
                         />
                     </div>
                 </ResizablePanel>

biome.json

@@ -19,6 +19,30 @@
             "recommended": true,
             "complexity": {
                 "noImportantStyles": "off"
+            },
+            "suspicious": {
+                "noExplicitAny": "off",
+                "noArrayIndexKey": "off",
+                "noImplicitAnyLet": "off",
+                "noAssignInExpressions": "off"
+            },
+            "a11y": {
+                "useButtonType": "off",
+                "noAutofocus": "off",
+                "noStaticElementInteractions": "off",
+                "useKeyWithClickEvents": "off",
+                "noLabelWithoutControl": "off",
+                "noNoninteractiveTabindex": "off"
+            },
+            "correctness": {
+                "useExhaustiveDependencies": "off"
+            },
+            "style": {
+                "useNodejsImportProtocol": "off",
+                "useTemplate": "off"
+            },
+            "security": {
+                "noDangerouslySetInnerHtml": "off"
             }
         }
     },

components/chat-input.tsx

@@ -99,8 +99,8 @@ function showValidationErrors(errors: string[]) {
                     {errors.length} files rejected:
                 </span>
                 <ul className="text-muted-foreground text-xs list-disc list-inside">
-                    {errors.slice(0, 3).map((err, i) => (
-                        <li key={i}>{err}</li>
+                    {errors.slice(0, 3).map((err) => (
+                        <li key={err}>{err}</li>
                     ))}
                     {errors.length > 3 && (
                         <li>...and {errors.length - 3} more</li>
@@ -162,10 +162,16 @@ export function ChatInput({
         }
     }, [])
 
+    // Handle programmatic input changes (e.g., setInput("") after form submission)
     useEffect(() => {
         adjustTextareaHeight()
     }, [input, adjustTextareaHeight])
 
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        onChange(e)
+        adjustTextareaHeight()
+    }
+
     const handleKeyDown = (e: React.KeyboardEvent) => {
         if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
             e.preventDefault()
@@ -297,7 +303,7 @@ export function ChatInput({
                 <Textarea
                     ref={textareaRef}
                     value={input}
-                    onChange={onChange}
+                    onChange={handleChange}
                     onKeyDown={handleKeyDown}
                     onPaste={handlePaste}
                     placeholder="Describe your diagram or paste an image..."

components/chat-message-display.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import type { UIMessage } from "ai"
+
 import {
     Check,
     ChevronDown,
@@ -32,12 +33,21 @@ interface EditPair {
     replace: string
 }
 
+// Tool part interface for type safety
+interface ToolPartLike {
+    type: string
+    toolCallId: string
+    state?: string
+    input?: { xml?: string; edits?: EditPair[] } & Record<string, unknown>
+    output?: string
+}
+
 function EditDiffDisplay({ edits }: { edits: EditPair[] }) {
     return (
         <div className="space-y-3">
             {edits.map((edit, index) => (
                 <div
-                    key={index}
+                    key={`${(edit.search || "").slice(0, 50)}-${(edit.replace || "").slice(0, 50)}-${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">
@@ -82,8 +92,8 @@ import { useDiagram } from "@/contexts/diagram-context"
 const getMessageTextContent = (message: UIMessage): string => {
     if (!message.parts) return ""
     return message.parts
-        .filter((part: any) => part.type === "text")
-        .map((part: any) => part.text)
+        .filter((part) => part.type === "text")
+        .map((part) => (part as { text: string }).text)
         .join("\n")
 }
 
@@ -119,6 +129,7 @@ export function ChatMessageDisplay({
     const [editingMessageId, setEditingMessageId] = useState<string | null>(
         null,
     )
+    const editTextareaRef = useRef<HTMLTextAreaElement>(null)
     const [editText, setEditText] = useState<string>("")
 
     const copyMessageToClipboard = async (messageId: string, text: string) => {
@@ -166,12 +177,16 @@ export function ChatMessageDisplay({
             const currentXml = xml || ""
             const convertedXml = convertToLegalXml(currentXml)
             if (convertedXml !== previousXML.current) {
-                const replacedXML = replaceNodes(chartXML, convertedXml)
+                // If chartXML is empty, use the converted XML directly
+                const replacedXML = chartXML
+                    ? replaceNodes(chartXML, convertedXml)
+                    : convertedXml
 
                 const validationError = validateMxCellStructure(replacedXML)
                 if (!validationError) {
                     previousXML.current = convertedXml
-                    onDisplayChart(replacedXML)
+                    // Skip validation in loadDiagram since we already validated above
+                    onDisplayChart(replacedXML, true)
                 } else {
                     console.log(
                         "[ChatMessageDisplay] XML validation failed:",
@@ -189,12 +204,19 @@ export function ChatMessageDisplay({
         }
     }, [messages])
 
+    useEffect(() => {
+        if (editingMessageId && editTextareaRef.current) {
+            editTextareaRef.current.focus()
+        }
+    }, [editingMessageId])
+
     useEffect(() => {
         messages.forEach((message) => {
             if (message.parts) {
-                message.parts.forEach((part: any) => {
+                message.parts.forEach((part) => {
                     if (part.type?.startsWith("tool-")) {
-                        const { toolCallId, state } = part
+                        const toolPart = part as ToolPartLike
+                        const { toolCallId, state, input } = toolPart
 
                         if (state === "output-available") {
                             setExpandedTools((prev) => ({
@@ -205,18 +227,19 @@ export function ChatMessageDisplay({
 
                         if (
                             part.type === "tool-display_diagram" &&
-                            part.input?.xml
+                            input?.xml
                         ) {
+                            const xml = input.xml as string
                             if (
                                 state === "input-streaming" ||
                                 state === "input-available"
                             ) {
-                                handleDisplayChart(part.input.xml)
+                                handleDisplayChart(xml)
                             } else if (
                                 state === "output-available" &&
                                 !processedToolCalls.current.has(toolCallId)
                             ) {
-                                handleDisplayChart(part.input.xml)
+                                handleDisplayChart(xml)
                                 processedToolCalls.current.add(toolCallId)
                             }
                         }
@@ -226,7 +249,7 @@ export function ChatMessageDisplay({
         })
     }, [messages, handleDisplayChart])
 
-    const renderToolPart = (part: any) => {
+    const renderToolPart = (part: ToolPartLike) => {
         const callId = part.toolCallId
         const { state, input, output } = part
         const isExpanded = expandedTools[callId] ?? true
@@ -280,6 +303,7 @@ export function ChatMessageDisplay({
                         )}
                         {input && Object.keys(input).length > 0 && (
                             <button
+                                type="button"
                                 onClick={toggleExpanded}
                                 className="p-1 rounded hover:bg-muted transition-colors"
                             >
@@ -358,6 +382,7 @@ export function ChatMessageDisplay({
                                             {onEditMessage &&
                                                 isLastUserMessage && (
                                                     <button
+                                                        type="button"
                                                         onClick={() => {
                                                             setEditingMessageId(
                                                                 message.id,
@@ -373,6 +398,7 @@ export function ChatMessageDisplay({
                                                     </button>
                                                 )}
                                             <button
+                                                type="button"
                                                 onClick={() =>
                                                     copyMessageToClipboard(
                                                         message.id,
@@ -407,6 +433,7 @@ export function ChatMessageDisplay({
                                     {isEditing && message.role === "user" ? (
                                         <div className="flex flex-col gap-2">
                                             <textarea
+                                                ref={editTextareaRef}
                                                 value={editText}
                                                 onChange={(e) =>
                                                     setEditText(e.target.value)
@@ -417,7 +444,6 @@ export function ChatMessageDisplay({
                                                         .length + 1,
                                                     6,
                                                 )}
-                                                autoFocus
                                                 onKeyDown={(e) => {
                                                     if (e.key === "Escape") {
                                                         setEditingMessageId(
@@ -447,6 +473,7 @@ export function ChatMessageDisplay({
                                             />
                                             <div className="flex justify-end gap-2">
                                                 <button
+                                                    type="button"
                                                     onClick={() => {
                                                         setEditingMessageId(
                                                             null,
@@ -458,6 +485,7 @@ export function ChatMessageDisplay({
                                                     Cancel
                                                 </button>
                                                 <button
+                                                    type="button"
                                                     onClick={() => {
                                                         if (
                                                             editText.trim() &&
@@ -481,117 +509,215 @@ export function ChatMessageDisplay({
                                             </div>
                                         </div>
                                     ) : (
-                                        /* Text content in bubble */
-                                        message.parts?.some(
-                                            (part: any) =>
-                                                part.type === "text" ||
-                                                part.type === "file",
-                                        ) && (
-                                            <div
-                                                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" : ""}`}
-                                                onClick={() => {
+                                        /* 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-",
+                                                    )
+                                                const isContentPart =
+                                                    part.type === "text" ||
+                                                    part.type === "file"
+
+                                                if (isToolPart) {
+                                                    groups.push({
+                                                        type: "tool",
+                                                        parts: [part],
+                                                        startIndex: index,
+                                                    })
+                                                } else if (isContentPart) {
+                                                    const lastGroup =
+                                                        groups[
+                                                            groups.length - 1
+                                                        ]
                                                     if (
-                                                        message.role ===
-                                                            "user" &&
-                                                        isLastUserMessage &&
-                                                        onEditMessage
+                                                        lastGroup?.type ===
+                                                        "content"
                                                     ) {
-                                                        setEditingMessageId(
-                                                            message.id,
+                                                        lastGroup.parts.push(
+                                                            part,
                                                         )
-                                                        setEditText(
-                                                            userMessageText,
+                                                    } else {
+                                                        groups.push({
+                                                            type: "content",
+                                                            parts: [part],
+                                                            startIndex: index,
+                                                        })
+                                                    }
+                                                }
+                                            })
+
+                                            return groups.map(
+                                                (group, groupIndex) => {
+                                                    if (group.type === "tool") {
+                                                        return renderToolPart(
+                                                            group
+                                                                .parts[0] as ToolPartLike,
                                                         )
                                                     }
-                                                }}
-                                                title={
-                                                    message.role === "user" &&
-                                                    isLastUserMessage &&
-                                                    onEditMessage
-                                                        ? "Click to edit"
-                                                        : undefined
-                                                }
-                                            >
-                                                {message.parts?.map(
-                                                    (
-                                                        part: any,
-                                                        index: number,
-                                                    ) => {
-                                                        switch (part.type) {
-                                                            case "text":
-                                                                return (
-                                                                    <div
-                                                                        key={
-                                                                            index
-                                                                        }
-                                                                        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>
-                                                                            {
-                                                                                part.text
-                                                                            }
-                                                                        </ReactMarkdown>
-                                                                    </div>
-                                                                )
-                                                            case "file":
-                                                                return (
-                                                                    <div
-                                                                        key={
-                                                                            index
-                                                                        }
-                                                                        className="mt-2"
-                                                                    >
-                                                                        <Image
-                                                                            src={
-                                                                                part.url
-                                                                            }
-                                                                            width={
-                                                                                200
-                                                                            }
-                                                                            height={
-                                                                                200
-                                                                            }
-                                                                            alt={`Uploaded diagram or image for AI analysis`}
-                                                                            className="rounded-lg border border-white/20"
-                                                                            style={{
-                                                                                objectFit:
-                                                                                    "contain",
-                                                                            }}
-                                                                        />
-                                                                    </div>
-                                                                )
-                                                            default:
-                                                                return null
-                                                        }
-                                                    },
-                                                )}
-                                            </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(
+                                                                        userMessageText,
+                                                                    )
+                                                                }
+                                                            }}
+                                                            onKeyDown={(e) => {
+                                                                if (
+                                                                    (e.key ===
+                                                                        "Enter" ||
+                                                                        e.key ===
+                                                                            " ") &&
+                                                                    message.role ===
+                                                                        "user" &&
+                                                                    isLastUserMessage &&
+                                                                    onEditMessage
+                                                                ) {
+                                                                    e.preventDefault()
+                                                                    setEditingMessageId(
+                                                                        message.id,
+                                                                    )
+                                                                    setEditText(
+                                                                        userMessageText,
+                                                                    )
+                                                                }
+                                                            }}
+                                                            title={
+                                                                message.role ===
+                                                                    "user" &&
+                                                                isLastUserMessage &&
+                                                                onEditMessage
+                                                                    ? "Click to edit"
+                                                                    : undefined
+                                                            }
+                                                        >
+                                                            {group.parts.map(
+                                                                (
+                                                                    part,
+                                                                    partIndex,
+                                                                ) => {
+                                                                    if (
+                                                                        part.type ===
+                                                                        "text"
+                                                                    ) {
+                                                                        return (
+                                                                            <div
+                                                                                key={`${message.id}-text-${group.startIndex}-${partIndex}`}
+                                                                                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>
+                                                                                    {
+                                                                                        (
+                                                                                            part as {
+                                                                                                text: string
+                                                                                            }
+                                                                                        )
+                                                                                            .text
+                                                                                    }
+                                                                                </ReactMarkdown>
+                                                                            </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
+                                                                },
+                                                            )}
+                                                        </div>
+                                                    )
+                                                },
+                                            )
+                                        })()
                                     )}
-                                    {/* Tool calls outside bubble */}
-                                    {message.parts?.map((part: any) => {
-                                        if (part.type?.startsWith("tool-")) {
-                                            return renderToolPart(part)
-                                        }
-                                        return null
-                                    })}
                                     {/* 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,
@@ -620,10 +746,16 @@ export function ChatMessageDisplay({
                                                     <Copy className="h-3.5 w-3.5" />
                                                 )}
                                             </button>
-                                            {/* Regenerate button - only on last assistant message */}
+                                            {/* Regenerate button - only on last assistant message, not for cached examples */}
                                             {onRegenerate &&
-                                                isLastAssistantMessage && (
+                                                isLastAssistantMessage &&
+                                                !message.parts?.some((p: any) =>
+                                                    p.toolCallId?.startsWith(
+                                                        "cached-",
+                                                    ),
+                                                ) && (
                                                     <button
+                                                        type="button"
                                                         onClick={() =>
                                                             onRegenerate(
                                                                 messageIndex,
@@ -639,6 +771,7 @@ export function ChatMessageDisplay({
                                             <div className="w-px h-4 bg-border mx-1" />
                                             {/* Thumbs up */}
                                             <button
+                                                type="button"
                                                 onClick={() =>
                                                     submitFeedback(
                                                         message.id,
@@ -657,6 +790,7 @@ export function ChatMessageDisplay({
                                             </button>
                                             {/* Thumbs down */}
                                             <button
+                                                type="button"
                                                 onClick={() =>
                                                     submitFeedback(
                                                         message.id,

components/chat-panel.tsx

@@ -1,7 +1,10 @@
 "use client"
 
 import { useChat } from "@ai-sdk/react"
-import { DefaultChatTransport } from "ai"
+import {
+    DefaultChatTransport,
+    lastAssistantMessageIsCompleteWithToolCalls,
+} from "ai"
 import {
     CheckCircle,
     PanelRightClose,
@@ -11,7 +14,7 @@ import {
 import Image from "next/image"
 import Link from "next/link"
 import type React from "react"
-import { useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { flushSync } from "react-dom"
 import { FaGithub } from "react-icons/fa"
 import { Toaster } from "sonner"
@@ -21,8 +24,16 @@ import {
     SettingsDialog,
     STORAGE_ACCESS_CODE_KEY,
 } from "@/components/settings-dialog"
+
+// localStorage keys for persistence
+const STORAGE_MESSAGES_KEY = "next-ai-draw-io-messages"
+const STORAGE_XML_SNAPSHOTS_KEY = "next-ai-draw-io-xml-snapshots"
+const STORAGE_SESSION_ID_KEY = "next-ai-draw-io-session-id"
+const STORAGE_DIAGRAM_XML_KEY = "next-ai-draw-io-diagram-xml"
+
 import { useDiagram } from "@/contexts/diagram-context"
-import { formatXML, replaceNodes, validateMxCellStructure } from "@/lib/utils"
+import { findCachedResponse } from "@/lib/cached-responses"
+import { formatXML } from "@/lib/utils"
 import { ChatMessageDisplay } from "./chat-message-display"
 
 interface ChatPanelProps {
@@ -31,6 +42,7 @@ interface ChatPanelProps {
     drawioUi: "min" | "sketch"
     onToggleDrawioUi: () => void
     isMobile?: boolean
+    onCloseProtectionChange?: (enabled: boolean) => void
 }
 
 export default function ChatPanel({
@@ -39,6 +51,7 @@ export default function ChatPanel({
     drawioUi,
     onToggleDrawioUi,
     isMobile = false,
+    onCloseProtectionChange,
 }: ChatPanelProps) {
     const {
         loadDiagram: onDisplayChart,
@@ -47,6 +60,7 @@ export default function ChatPanel({
         resolverRef,
         chartXML,
         clearDiagram,
+        isDrawioReady,
     } = useDiagram()
 
     const onFetchChart = (saveToHistory = true) => {
@@ -78,7 +92,7 @@ export default function ChatPanel({
     const [files, setFiles] = useState<File[]>([])
     const [showHistory, setShowHistory] = useState(false)
     const [showSettingsDialog, setShowSettingsDialog] = useState(false)
-    const [accessCodeRequired, setAccessCodeRequired] = useState(false)
+    const [, setAccessCodeRequired] = useState(false)
     const [input, setInput] = useState("")
 
     // Check if access code is required on mount
@@ -89,97 +103,151 @@ export default function ChatPanel({
             .catch(() => setAccessCodeRequired(false))
     }, [])
 
-    // Generate a unique session ID for Langfuse tracing
-    const [sessionId, setSessionId] = useState(
-        () => `session-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
-    )
+    // 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)
+
     // Ref to track latest chartXML for use in callbacks (avoids stale closure)
     const chartXMLRef = useRef(chartXML)
     useEffect(() => {
         chartXMLRef.current = chartXML
     }, [chartXML])
 
-    const { messages, sendMessage, addToolResult, status, error, setMessages } =
-        useChat({
-            transport: new DefaultChatTransport({
-                api: "/api/chat",
-            }),
-            async onToolCall({ toolCall }) {
-                if (toolCall.toolName === "display_diagram") {
-                    const { xml } = toolCall.input as { xml: string }
+    // Ref to hold stop function for use in onToolCall (avoids stale closure)
+    const stopRef = useRef<(() => void) | null>(null)
 
-                    const validationError = validateMxCellStructure(xml)
+    const {
+        messages,
+        sendMessage,
+        addToolOutput,
+        stop,
+        status,
+        error,
+        setMessages,
+    } = useChat({
+        transport: new DefaultChatTransport({
+            api: "/api/chat",
+        }),
+        async onToolCall({ toolCall }) {
+            if (toolCall.toolName === "display_diagram") {
+                const { xml } = toolCall.input as { xml: string }
 
-                    if (validationError) {
-                        addToolResult({
-                            tool: "display_diagram",
-                            toolCallId: toolCall.toolCallId,
-                            output: validationError,
-                        })
+                // loadDiagram validates and returns error if invalid
+                const validationError = onDisplayChart(xml)
+
+                if (validationError) {
+                    console.warn(
+                        "[display_diagram] Validation error:",
+                        validationError,
+                    )
+                    // Return error to model - sendAutomaticallyWhen will trigger retry
+                    const errorMessage = `${validationError}
+
+Please fix the XML issues and call display_diagram again with corrected XML.
+
+Your failed XML:
+\`\`\`xml
+${xml}
+\`\`\``
+                    addToolOutput({
+                        tool: "display_diagram",
+                        toolCallId: toolCall.toolCallId,
+                        state: "output-error",
+                        errorText: errorMessage,
+                    })
+                } else {
+                    // Success - diagram will be rendered by chat-message-display
+                    addToolOutput({
+                        tool: "display_diagram",
+                        toolCallId: toolCall.toolCallId,
+                        output: "Successfully displayed the diagram.",
+                    })
+                }
+            } else if (toolCall.toolName === "edit_diagram") {
+                const { edits } = toolCall.input as {
+                    edits: Array<{ search: string; replace: string }>
+                }
+
+                let currentXml = ""
+                try {
+                    console.log("[edit_diagram] Starting...")
+                    // Use chartXML from ref directly - more reliable than export
+                    // especially on Vercel where DrawIO iframe may have latency issues
+                    // Using ref to avoid stale closure in callback
+                    const cachedXML = chartXMLRef.current
+                    if (cachedXML) {
+                        currentXml = cachedXML
+                        console.log(
+                            "[edit_diagram] Using cached chartXML, length:",
+                            currentXml.length,
+                        )
                     } else {
-                        addToolResult({
-                            tool: "display_diagram",
-                            toolCallId: toolCall.toolCallId,
-                            output: "Successfully displayed the diagram.",
-                        })
-                    }
-                } else if (toolCall.toolName === "edit_diagram") {
-                    const { edits } = toolCall.input as {
-                        edits: Array<{ search: string; replace: string }>
+                        // Fallback to export only if no cached XML
+                        console.log(
+                            "[edit_diagram] No cached XML, fetching from DrawIO...",
+                        )
+                        currentXml = await onFetchChart(false)
+                        console.log(
+                            "[edit_diagram] Got XML from export, length:",
+                            currentXml.length,
+                        )
                     }
 
-                    let currentXml = ""
-                    try {
-                        console.log("[edit_diagram] Starting...")
-                        // Use chartXML from ref directly - more reliable than export
-                        // especially on Vercel where DrawIO iframe may have latency issues
-                        // Using ref to avoid stale closure in callback
-                        const cachedXML = chartXMLRef.current
-                        if (cachedXML) {
-                            currentXml = cachedXML
-                            console.log(
-                                "[edit_diagram] Using cached chartXML, length:",
-                                currentXml.length,
-                            )
-                        } else {
-                            // Fallback to export only if no cached XML
-                            console.log(
-                                "[edit_diagram] No cached XML, fetching from DrawIO...",
-                            )
-                            currentXml = await onFetchChart(false)
-                            console.log(
-                                "[edit_diagram] Got XML from export, length:",
-                                currentXml.length,
-                            )
-                        }
+                    const { replaceXMLParts } = await import("@/lib/utils")
+                    const editedXml = replaceXMLParts(currentXml, edits)
 
-                        const { replaceXMLParts } = await import("@/lib/utils")
-                        const editedXml = replaceXMLParts(currentXml, edits)
-
-                        onDisplayChart(editedXml)
-
-                        addToolResult({
+                    // loadDiagram validates and returns error if invalid
+                    const validationError = onDisplayChart(editedXml)
+                    if (validationError) {
+                        console.warn(
+                            "[edit_diagram] Validation error:",
+                            validationError,
+                        )
+                        addToolOutput({
                             tool: "edit_diagram",
                             toolCallId: toolCall.toolCallId,
-                            output: `Successfully applied ${edits.length} edit(s) to the diagram.`,
+                            state: "output-error",
+                            errorText: `Edit produced invalid XML: ${validationError}
+
+Current diagram XML:
+\`\`\`xml
+${currentXml}
+\`\`\`
+
+Please fix the edit to avoid structural issues (e.g., duplicate IDs, invalid references).`,
                         })
-                        console.log("[edit_diagram] Success")
-                    } catch (error) {
-                        console.error("[edit_diagram] Failed:", error)
+                        return
+                    }
 
-                        const errorMessage =
-                            error instanceof Error
-                                ? error.message
-                                : String(error)
+                    addToolOutput({
+                        tool: "edit_diagram",
+                        toolCallId: toolCall.toolCallId,
+                        output: `Successfully applied ${edits.length} edit(s) to the diagram.`,
+                    })
+                    console.log("[edit_diagram] Success")
+                } catch (error) {
+                    console.error("[edit_diagram] Failed:", error)
 
-                        addToolResult({
-                            tool: "edit_diagram",
-                            toolCallId: toolCall.toolCallId,
-                            output: `Edit failed: ${errorMessage}
+                    const errorMessage =
+                        error instanceof Error ? error.message : String(error)
+
+                    // Use addToolOutput with state: 'output-error' for proper error signaling
+                    addToolOutput({
+                        tool: "edit_diagram",
+                        toolCallId: toolCall.toolCallId,
+                        state: "output-error",
+                        errorText: `Edit failed: ${errorMessage}
 
 Current diagram XML:
 \`\`\`xml
@@ -187,47 +255,238 @@ ${currentXml || "No XML available"}
 \`\`\`
 
 Please retry with an adjusted search pattern or use display_diagram if retries are exhausted.`,
-                        })
-                    }
-                }
-            },
-            onError: (error) => {
-                // Silence access code error in console since it's handled by UI
-                if (!error.message.includes("Invalid or missing access code")) {
-                    console.error("Chat error:", error)
+                    })
                 }
+            }
+        },
+        onError: (error) => {
+            // Silence access code error in console since it's handled by UI
+            if (!error.message.includes("Invalid or missing access code")) {
+                console.error("Chat error:", error)
+            }
 
-                // Add system message for error so it can be cleared
-                setMessages((currentMessages) => {
-                    const errorMessage = {
-                        id: `error-${Date.now()}`,
-                        role: "system" as const,
-                        content: error.message,
-                        parts: [{ type: "text" as const, text: error.message }],
-                    }
-                    return [...currentMessages, errorMessage]
-                })
-
-                if (error.message.includes("Invalid or missing access code")) {
-                    // Show settings button and open dialog to help user fix it
-                    setAccessCodeRequired(true)
-                    setShowSettingsDialog(true)
+            // Add system message for error so it can be cleared
+            setMessages((currentMessages) => {
+                const errorMessage = {
+                    id: `error-${Date.now()}`,
+                    role: "system" as const,
+                    content: error.message,
+                    parts: [{ type: "text" as const, text: error.message }],
                 }
-            },
-        })
+                return [...currentMessages, errorMessage]
+            })
+
+            if (error.message.includes("Invalid or missing access code")) {
+                // Show settings button and open dialog to help user fix it
+                setAccessCodeRequired(true)
+                setShowSettingsDialog(true)
+            }
+        },
+        // Auto-resubmit when all tool results are available (including errors)
+        // This enables the model to retry when a tool returns an error
+        sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
+    })
+
+    // Update stopRef so onToolCall can access it
+    stopRef.current = stop
+
+    // Ref to track latest messages for unload persistence
+    const messagesRef = useRef(messages)
+    useEffect(() => {
+        messagesRef.current = messages
+    }, [messages])
 
     const messagesEndRef = useRef<HTMLDivElement>(null)
 
+    // Restore messages and XML snapshots from localStorage on mount
+    useEffect(() => {
+        if (hasRestoredRef.current) return
+        hasRestoredRef.current = true
+
+        try {
+            // Restore messages
+            const savedMessages = localStorage.getItem(STORAGE_MESSAGES_KEY)
+            if (savedMessages) {
+                const parsed = JSON.parse(savedMessages)
+                if (Array.isArray(parsed) && parsed.length > 0) {
+                    setMessages(parsed)
+                }
+            }
+
+            // Restore XML snapshots
+            const savedSnapshots = localStorage.getItem(
+                STORAGE_XML_SNAPSHOTS_KEY,
+            )
+            if (savedSnapshots) {
+                const parsed = JSON.parse(savedSnapshots)
+                xmlSnapshotsRef.current = new Map(parsed)
+            }
+        } catch (error) {
+            console.error("Failed to restore from localStorage:", error)
+        }
+    }, [setMessages])
+
+    // Restore diagram XML when DrawIO becomes ready
+    const hasDiagramRestoredRef = useRef(false)
+    const [canSaveDiagram, setCanSaveDiagram] = useState(false)
+    useEffect(() => {
+        console.log(
+            "[ChatPanel] isDrawioReady:",
+            isDrawioReady,
+            "hasDiagramRestored:",
+            hasDiagramRestoredRef.current,
+        )
+        if (!isDrawioReady || hasDiagramRestoredRef.current) return
+        hasDiagramRestoredRef.current = true
+
+        try {
+            const savedDiagramXml = localStorage.getItem(
+                STORAGE_DIAGRAM_XML_KEY,
+            )
+            console.log(
+                "[ChatPanel] Restoring diagram, has saved XML:",
+                !!savedDiagramXml,
+            )
+            if (savedDiagramXml) {
+                console.log(
+                    "[ChatPanel] Loading saved diagram XML, length:",
+                    savedDiagramXml.length,
+                )
+                // Skip validation for trusted saved diagrams
+                onDisplayChart(savedDiagramXml, true)
+                chartXMLRef.current = savedDiagramXml
+            }
+        } catch (error) {
+            console.error("Failed to restore diagram from localStorage:", error)
+        }
+
+        // Allow saving after restore is complete
+        setTimeout(() => {
+            console.log("[ChatPanel] Enabling diagram save")
+            setCanSaveDiagram(true)
+        }, 500)
+    }, [isDrawioReady, onDisplayChart])
+
+    // Save messages to localStorage whenever they change
+    useEffect(() => {
+        if (!hasRestoredRef.current) return
+        try {
+            localStorage.setItem(STORAGE_MESSAGES_KEY, JSON.stringify(messages))
+        } catch (error) {
+            console.error("Failed to save messages to localStorage:", error)
+        }
+    }, [messages])
+
+    // Save XML snapshots to localStorage whenever they change
+    const saveXmlSnapshots = useCallback(() => {
+        try {
+            const snapshotsArray = Array.from(xmlSnapshotsRef.current.entries())
+            localStorage.setItem(
+                STORAGE_XML_SNAPSHOTS_KEY,
+                JSON.stringify(snapshotsArray),
+            )
+        } catch (error) {
+            console.error(
+                "Failed to save XML snapshots to localStorage:",
+                error,
+            )
+        }
+    }, [])
+
+    // Save session ID to localStorage
+    useEffect(() => {
+        localStorage.setItem(STORAGE_SESSION_ID_KEY, sessionId)
+    }, [sessionId])
+
+    // Save current diagram XML to localStorage whenever it changes
+    // Only save after initial restore is complete and if it's not an empty diagram
+    useEffect(() => {
+        if (!canSaveDiagram) return
+        // Don't save empty diagrams (check for minimal content)
+        if (chartXML && chartXML.length > 300) {
+            console.log(
+                "[ChatPanel] Saving diagram to localStorage, length:",
+                chartXML.length,
+            )
+            localStorage.setItem(STORAGE_DIAGRAM_XML_KEY, chartXML)
+        }
+    }, [chartXML, canSaveDiagram])
+
     useEffect(() => {
         if (messagesEndRef.current) {
             messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
         }
     }, [messages])
 
+    // Save state right before page unload (refresh/close)
+    useEffect(() => {
+        const handleBeforeUnload = () => {
+            try {
+                localStorage.setItem(
+                    STORAGE_MESSAGES_KEY,
+                    JSON.stringify(messagesRef.current),
+                )
+                localStorage.setItem(
+                    STORAGE_XML_SNAPSHOTS_KEY,
+                    JSON.stringify(
+                        Array.from(xmlSnapshotsRef.current.entries()),
+                    ),
+                )
+                const xml = chartXMLRef.current
+                if (xml && xml.length > 300) {
+                    localStorage.setItem(STORAGE_DIAGRAM_XML_KEY, xml)
+                }
+                localStorage.setItem(STORAGE_SESSION_ID_KEY, sessionId)
+            } catch (error) {
+                console.error("Failed to persist state before unload:", error)
+            }
+        }
+
+        window.addEventListener("beforeunload", handleBeforeUnload)
+        return () =>
+            window.removeEventListener("beforeunload", handleBeforeUnload)
+    }, [sessionId])
+
     const onFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault()
         const isProcessing = status === "streaming" || status === "submitted"
         if (input.trim() && !isProcessing) {
+            // Check if input matches a cached example (only when no messages yet)
+            if (messages.length === 0) {
+                const cached = findCachedResponse(
+                    input.trim(),
+                    files.length > 0,
+                )
+                if (cached) {
+                    // Add user message and fake assistant response to messages
+                    // The chat-message-display useEffect will handle displaying the diagram
+                    const toolCallId = `cached-${Date.now()}`
+                    setMessages([
+                        {
+                            id: `user-${Date.now()}`,
+                            role: "user" as const,
+                            parts: [{ type: "text" as const, text: input }],
+                        },
+                        {
+                            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)
+                    setInput("")
+                    setFiles([])
+                    return
+                }
+            }
+
             try {
                 let chartXml = await onFetchChart()
                 chartXml = formatXML(chartXml)
@@ -258,6 +517,7 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                 // Save XML snapshot for this message (will be at index = current messages.length)
                 const messageIndex = messages.length
                 xmlSnapshotsRef.current.set(messageIndex, chartXml)
+                saveXmlSnapshots()
 
                 const accessCode =
                     localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || ""
@@ -324,8 +584,8 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
             return
         }
 
-        // Restore the diagram to the saved state
-        onDisplayChart(savedXml)
+        // Restore the diagram to the saved state (skip validation for trusted snapshots)
+        onDisplayChart(savedXml, true)
 
         // Update ref directly to ensure edit_diagram has the correct XML
         chartXMLRef.current = savedXml
@@ -336,6 +596,7 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                 xmlSnapshotsRef.current.delete(key)
             }
         }
+        saveXmlSnapshots()
 
         // 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
@@ -345,6 +606,7 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
         })
 
         // Now send the message after state is guaranteed to be updated
+        const accessCode = localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || ""
         sendMessage(
             { parts: userParts },
             {
@@ -352,6 +614,9 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                     xml: savedXml,
                     sessionId,
                 },
+                headers: {
+                    "x-access-code": accessCode,
+                },
             },
         )
     }
@@ -373,8 +638,8 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
             return
         }
 
-        // Restore the diagram to the saved state
-        onDisplayChart(savedXml)
+        // Restore the diagram to the saved state (skip validation for trusted snapshots)
+        onDisplayChart(savedXml, true)
 
         // Update ref directly to ensure edit_diagram has the correct XML
         chartXMLRef.current = savedXml
@@ -385,6 +650,7 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                 xmlSnapshotsRef.current.delete(key)
             }
         }
+        saveXmlSnapshots()
 
         // Create new parts with updated text
         const newParts = message.parts?.map((part: any) => {
@@ -402,6 +668,7 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
         })
 
         // Now send the edited message after state is guaranteed to be updated
+        const accessCode = localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || ""
         sendMessage(
             { parts: newParts },
             {
@@ -409,6 +676,9 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                     xml: savedXml,
                     sessionId,
                 },
+                headers: {
+                    "x-access-code": accessCode,
+                },
             },
         )
     }
@@ -497,19 +767,17 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                                 className={`${isMobile ? "w-4 h-4" : "w-5 h-5"}`}
                             />
                         </a>
-                        {accessCodeRequired && (
-                            <ButtonWithTooltip
-                                tooltipContent="Settings"
-                                variant="ghost"
-                                size="icon"
-                                onClick={() => setShowSettingsDialog(true)}
-                                className="hover:bg-accent"
-                            >
-                                <Settings
-                                    className={`${isMobile ? "h-4 w-4" : "h-5 w-5"} text-muted-foreground`}
-                                />
-                            </ButtonWithTooltip>
-                        )}
+                        <ButtonWithTooltip
+                            tooltipContent="Settings"
+                            variant="ghost"
+                            size="icon"
+                            onClick={() => setShowSettingsDialog(true)}
+                            className="hover:bg-accent"
+                        >
+                            <Settings
+                                className={`${isMobile ? "h-4 w-4" : "h-5 w-5"} text-muted-foreground`}
+                            />
+                        </ButtonWithTooltip>
                         {!isMobile && (
                             <ButtonWithTooltip
                                 tooltipContent="Hide chat panel (Ctrl+B)"
@@ -549,12 +817,19 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
                     onClearChat={() => {
                         setMessages([])
                         clearDiagram()
-                        setSessionId(
-                            `session-${Date.now()}-${Math.random()
-                                .toString(36)
-                                .slice(2, 9)}`,
-                        )
+                        const newSessionId = `session-${Date.now()}-${Math.random()
+                            .toString(36)
+                            .slice(2, 9)}`
+                        setSessionId(newSessionId)
                         xmlSnapshotsRef.current.clear()
+                        // Clear localStorage
+                        localStorage.removeItem(STORAGE_MESSAGES_KEY)
+                        localStorage.removeItem(STORAGE_XML_SNAPSHOTS_KEY)
+                        localStorage.removeItem(STORAGE_DIAGRAM_XML_KEY)
+                        localStorage.setItem(
+                            STORAGE_SESSION_ID_KEY,
+                            newSessionId,
+                        )
                     }}
                     files={files}
                     onFileChange={handleFileChange}
@@ -570,6 +845,7 @@ Please retry with an adjusted search pattern or use display_diagram if retries a
             <SettingsDialog
                 open={showSettingsDialog}
                 onOpenChange={setShowSettingsDialog}
+                onCloseProtectionChange={onCloseProtectionChange}
             />
         </div>
     )

components/code-block.tsx

@@ -12,7 +12,7 @@ export function CodeBlock({ code, language = "xml" }: CodeBlockProps) {
         <div className="overflow-hidden w-full">
             <Highlight theme={themes.github} code={code} language={language}>
                 {({
-                    className,
+                    className: _className,
                     style,
                     tokens,
                     getLineProps,

components/file-preview-list.tsx

@@ -2,7 +2,7 @@
 
 import { X } from "lucide-react"
 import Image from "next/image"
-import React, { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 
 interface FilePreviewListProps {
     files: File[]
@@ -11,27 +11,63 @@ interface FilePreviewListProps {
 
 export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
     const [selectedImage, setSelectedImage] = useState<string | null>(null)
+    const [imageUrls, setImageUrls] = useState<Map<File, string>>(new Map())
+    const imageUrlsRef = useRef<Map<File, string>>(new Map())
 
-    // Cleanup object URLs on unmount
+    // Create and cleanup object URLs when files change
     useEffect(() => {
-        const objectUrls = files
-            .filter((file) => file.type.startsWith("image/"))
-            .map((file) => URL.createObjectURL(file))
+        const currentUrls = imageUrlsRef.current
+        const newUrls = new Map<File, string>()
 
-        return () => {
-            objectUrls.forEach(URL.revokeObjectURL)
-        }
+        files.forEach((file) => {
+            if (file.type.startsWith("image/")) {
+                // Reuse existing URL if file is already tracked
+                const existingUrl = currentUrls.get(file)
+                if (existingUrl) {
+                    newUrls.set(file, existingUrl)
+                } else {
+                    newUrls.set(file, URL.createObjectURL(file))
+                }
+            }
+        })
+
+        // Revoke URLs for files that are no longer in the list
+        currentUrls.forEach((url, file) => {
+            if (!newUrls.has(file)) {
+                URL.revokeObjectURL(url)
+            }
+        })
+
+        imageUrlsRef.current = newUrls
+        setImageUrls(newUrls)
     }, [files])
 
+    // Cleanup all URLs on unmount only
+    useEffect(() => {
+        return () => {
+            imageUrlsRef.current.forEach((url) => {
+                URL.revokeObjectURL(url)
+            })
+        }
+    }, [])
+
+    // Clear selected image if its URL was revoked
+    useEffect(() => {
+        if (
+            selectedImage &&
+            !Array.from(imageUrls.values()).includes(selectedImage)
+        ) {
+            setSelectedImage(null)
+        }
+    }, [imageUrls, selectedImage])
+
     if (files.length === 0) return null
 
     return (
         <>
             <div className="flex flex-wrap gap-2 mt-2 p-2 bg-muted/50 rounded-md">
                 {files.map((file, index) => {
-                    const imageUrl = file.type.startsWith("image/")
-                        ? URL.createObjectURL(file)
-                        : null
+                    const imageUrl = imageUrls.get(file) || null
                     return (
                         <div key={file.name + index} className="relative group">
                             <div
@@ -40,9 +76,9 @@ export function FilePreviewList({ files, onRemoveFile }: FilePreviewListProps) {
                                     imageUrl && setSelectedImage(imageUrl)
                                 }
                             >
-                                {file.type.startsWith("image/") ? (
+                                {file.type.startsWith("image/") && imageUrl ? (
                                     <Image
-                                        src={imageUrl!}
+                                        src={imageUrl}
                                         alt={file.name}
                                         width={80}
                                         height={80}

components/history-dialog.tsx

@@ -32,7 +32,8 @@ export function HistoryDialog({
 
     const handleConfirmRestore = () => {
         if (selectedIndex !== null) {
-            onDisplayChart(diagramHistory[selectedIndex].xml)
+            // Skip validation for trusted history snapshots
+            onDisplayChart(diagramHistory[selectedIndex].xml, true)
             handleClose()
         }
     }

components/settings-dialog.tsx

@@ -11,28 +11,77 @@ import {
     DialogTitle,
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
 
 interface SettingsDialogProps {
     open: boolean
     onOpenChange: (open: boolean) => void
+    onCloseProtectionChange?: (enabled: boolean) => void
 }
 
 export const STORAGE_ACCESS_CODE_KEY = "next-ai-draw-io-access-code"
+export const STORAGE_CLOSE_PROTECTION_KEY = "next-ai-draw-io-close-protection"
 
-export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
+export function SettingsDialog({
+    open,
+    onOpenChange,
+    onCloseProtectionChange,
+}: SettingsDialogProps) {
     const [accessCode, setAccessCode] = useState("")
+    const [closeProtection, setCloseProtection] = useState(true)
+    const [isVerifying, setIsVerifying] = useState(false)
+    const [error, setError] = useState("")
 
     useEffect(() => {
         if (open) {
             const storedCode =
                 localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || ""
             setAccessCode(storedCode)
+
+            const storedCloseProtection = localStorage.getItem(
+                STORAGE_CLOSE_PROTECTION_KEY,
+            )
+            // Default to true if not set
+            setCloseProtection(storedCloseProtection !== "false")
+            setError("")
         }
     }, [open])
 
-    const handleSave = () => {
-        localStorage.setItem(STORAGE_ACCESS_CODE_KEY, accessCode.trim())
-        onOpenChange(false)
+    const handleSave = async () => {
+        setError("")
+        setIsVerifying(true)
+
+        try {
+            // Verify access code with server
+            const response = await fetch("/api/verify-access-code", {
+                method: "POST",
+                headers: {
+                    "x-access-code": accessCode.trim(),
+                },
+            })
+
+            const data = await response.json()
+
+            if (!data.valid) {
+                setError(data.message || "Invalid access code")
+                setIsVerifying(false)
+                return
+            }
+
+            // Save settings only if verification passes
+            localStorage.setItem(STORAGE_ACCESS_CODE_KEY, accessCode.trim())
+            localStorage.setItem(
+                STORAGE_CLOSE_PROTECTION_KEY,
+                closeProtection.toString(),
+            )
+            onCloseProtectionChange?.(closeProtection)
+            onOpenChange(false)
+        } catch {
+            setError("Failed to verify access code")
+        } finally {
+            setIsVerifying(false)
+        }
     }
 
     const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -67,6 +116,26 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
                         <p className="text-[0.8rem] text-muted-foreground">
                             Required if the server has enabled access control.
                         </p>
+                        {error && (
+                            <p className="text-[0.8rem] text-destructive">
+                                {error}
+                            </p>
+                        )}
+                    </div>
+                    <div className="flex items-center justify-between">
+                        <div className="space-y-0.5">
+                            <Label htmlFor="close-protection">
+                                Close Protection
+                            </Label>
+                            <p className="text-[0.8rem] text-muted-foreground">
+                                Show confirmation when leaving the page.
+                            </p>
+                        </div>
+                        <Switch
+                            id="close-protection"
+                            checked={closeProtection}
+                            onCheckedChange={setCloseProtection}
+                        />
                     </div>
                 </div>
                 <DialogFooter>
@@ -76,7 +145,9 @@ export function SettingsDialog({ open, onOpenChange }: SettingsDialogProps) {
                     >
                         Cancel
                     </Button>
-                    <Button onClick={handleSave}>Save</Button>
+                    <Button onClick={handleSave} disabled={isVerifying}>
+                        {isVerifying ? "Verifying..." : "Save"}
+                    </Button>
                 </DialogFooter>
             </DialogContent>
         </Dialog>

components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

components/ui/switch.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

contexts/diagram-context.tsx

@@ -4,13 +4,13 @@ import type React from "react"
 import { createContext, useContext, useRef, useState } from "react"
 import type { DrawIoEmbedRef } from "react-drawio"
 import type { ExportFormat } from "@/components/save-dialog"
-import { extractDiagramXML } from "../lib/utils"
+import { extractDiagramXML, validateMxCellStructure } from "../lib/utils"
 
 interface DiagramContextType {
     chartXML: string
     latestSvg: string
     diagramHistory: { svg: string; xml: string }[]
-    loadDiagram: (chart: string) => void
+    loadDiagram: (chart: string, skipValidation?: boolean) => string | null
     handleExport: () => void
     handleExportWithoutHistory: () => void
     resolverRef: React.Ref<((value: string) => void) | null>
@@ -22,6 +22,8 @@ interface DiagramContextType {
         format: ExportFormat,
         sessionId?: string,
     ) => void
+    isDrawioReady: boolean
+    onDrawioLoad: () => void
 }
 
 const DiagramContext = createContext<DiagramContextType | undefined>(undefined)
@@ -32,10 +34,20 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
     const [diagramHistory, setDiagramHistory] = useState<
         { svg: string; xml: string }[]
     >([])
+    const [isDrawioReady, setIsDrawioReady] = useState(false)
+    const hasCalledOnLoadRef = useRef(false)
     const drawioRef = useRef<DrawIoEmbedRef | null>(null)
     const resolverRef = useRef<((value: string) => void) | null>(null)
     // Track if we're expecting an export for history (user-initiated)
     const expectHistoryExportRef = useRef<boolean>(false)
+
+    const onDrawioLoad = () => {
+        // Only set ready state once to prevent infinite loops
+        if (hasCalledOnLoadRef.current) return
+        hasCalledOnLoadRef.current = true
+        console.log("[DiagramContext] DrawIO loaded, setting ready state")
+        setIsDrawioReady(true)
+    }
     // Track if we're expecting an export for file save (stores raw export data)
     const saveResolverRef = useRef<{
         resolver: ((data: string) => void) | null
@@ -61,12 +73,29 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         }
     }
 
-    const loadDiagram = (chart: string) => {
+    const loadDiagram = (
+        chart: string,
+        skipValidation?: boolean,
+    ): string | null => {
+        // Validate XML structure before loading (unless skipped for internal use)
+        if (!skipValidation) {
+            const validationError = validateMxCellStructure(chart)
+            if (validationError) {
+                console.warn("[loadDiagram] Validation error:", validationError)
+                return validationError
+            }
+        }
+
+        // Keep chartXML in sync even when diagrams are injected (e.g., display_diagram tool)
+        setChartXML(chart)
+
         if (drawioRef.current) {
             drawioRef.current.load({
                 xml: chart,
             })
         }
+
+        return null
     }
 
     const handleDiagramExport = (data: any) => {
@@ -106,8 +135,8 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
 
     const clearDiagram = () => {
         const emptyDiagram = `<mxfile><diagram name="Page-1" id="page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel></diagram></mxfile>`
-        loadDiagram(emptyDiagram)
-        setChartXML(emptyDiagram)
+        // Skip validation for trusted internal template (loadDiagram also sets chartXML)
+        loadDiagram(emptyDiagram, true)
         setLatestSvg("")
         setDiagramHistory([])
     }
@@ -220,6 +249,8 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
                 handleDiagramExport,
                 clearDiagram,
                 saveDiagramToFile,
+                isDrawioReady,
+                onDrawioLoad,
             }}
         >
             {children}

docs/ai-providers.md

@@ -63,6 +63,19 @@ Optional custom endpoint:
 DEEPSEEK_BASE_URL=https://your-custom-endpoint
 ```
 
+### SiliconFlow (OpenAI-compatible)
+
+```bash
+SILICONFLOW_API_KEY=your_api_key
+AI_MODEL=deepseek-ai/DeepSeek-V3  # example; use any SiliconFlow model id
+```
+
+Optional custom endpoint (defaults to the recommended domain):
+
+```bash
+SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1  # or https://api.siliconflow.cn/v1
+```
+
 ### Azure OpenAI
 
 ```bash
@@ -120,7 +133,7 @@ If you only configure **one** provider's API key, the system will automatically
 If you configure **multiple** API keys, you must explicitly set `AI_PROVIDER`:
 
 ```bash
-AI_PROVIDER=google  # or: openai, anthropic, deepseek, azure, bedrock, openrouter, ollama
+AI_PROVIDER=google  # or: openai, anthropic, deepseek, siliconflow, azure, bedrock, openrouter, ollama
 ```
 
 ## Model Capability Requirements
@@ -133,6 +146,20 @@ This task requires exceptionally strong model capabilities, as it involves gener
 
 **Note on Ollama**: While Ollama is supported as a provider, it's generally not practical for this use case unless you're running high-capability models like DeepSeek R1 or Qwen3-235B locally.
 
+## Temperature Setting
+
+You can optionally configure the temperature via environment variable:
+
+```bash
+TEMPERATURE=0  # More deterministic output (recommended for diagrams)
+```
+
+**Important**: Leave `TEMPERATURE` unset for models that don't support temperature settings, such as:
+- GPT-5.1 and other reasoning models
+- Some specialized models
+
+When unset, the model uses its default behavior.
+
 ## Recommendations
 
 -   **Best experience**: Use models with vision support (GPT-4o, Claude, Gemini) for image-to-diagram features

env.example

@@ -1,6 +1,6 @@
 # AI Provider Configuration
 # AI_PROVIDER: Which provider to use
-# Options: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek
+# Options: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow
 # Default: bedrock
 AI_PROVIDER=bedrock
 
@@ -42,11 +42,21 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 # DEEPSEEK_API_KEY=sk-...
 # DEEPSEEK_BASE_URL=https://api.deepseek.com/v1  # Optional: Custom endpoint
 
+# SiliconFlow Configuration (OpenAI-compatible)
+# Base domain can be .com or .cn, defaults to https://api.siliconflow.com/v1
+# SILICONFLOW_API_KEY=sk-...
+# SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1  # Optional: switch to https://api.siliconflow.cn/v1 if needed
+
 # Langfuse Observability (Optional)
 # Enable LLM tracing and analytics - https://langfuse.com
 # LANGFUSE_PUBLIC_KEY=pk-lf-...
 # LANGFUSE_SECRET_KEY=sk-lf-...
 # LANGFUSE_BASEURL=https://cloud.langfuse.com  # EU region, use https://us.cloud.langfuse.com for US
 
+# Temperature (Optional)
+# Controls randomness in AI responses. Lower = more deterministic.
+# Leave unset for models that don't support temperature (e.g., GPT-5.1 reasoning models)
+# TEMPERATURE=0
+
 # Access Control (Optional)
 # ACCESS_CODE_LIST=your-secret-code,another-code

lib/ai-providers.ts

@@ -17,6 +17,7 @@ export type ProviderName =
     | "ollama"
     | "openrouter"
     | "deepseek"
+    | "siliconflow"
 
 interface ModelConfig {
     model: any
@@ -47,6 +48,7 @@ const PROVIDER_ENV_VARS: Record<ProviderName, string | null> = {
     ollama: null, // No credentials needed for local Ollama
     openrouter: "OPENROUTER_API_KEY",
     deepseek: "DEEPSEEK_API_KEY",
+    siliconflow: "SILICONFLOW_API_KEY",
 }
 
 /**
@@ -90,7 +92,7 @@ function validateProviderCredentials(provider: ProviderName): void {
  * Get the AI model based on environment variables
  *
  * Environment variables:
- * - AI_PROVIDER: The provider to use (bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek)
+ * - AI_PROVIDER: The provider to use (bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow)
  * - AI_MODEL: The model ID/name for the selected provider
  *
  * Provider-specific env vars:
@@ -104,6 +106,8 @@ function validateProviderCredentials(provider: ProviderName): void {
  * - OPENROUTER_API_KEY: OpenRouter API key
  * - DEEPSEEK_API_KEY: DeepSeek API key
  * - DEEPSEEK_BASE_URL: DeepSeek endpoint (optional)
+ * - SILICONFLOW_API_KEY: SiliconFlow API key
+ * - SILICONFLOW_BASE_URL: SiliconFlow endpoint (optional, defaults to https://api.siliconflow.com/v1)
  */
 export function getAIModel(): ModelConfig {
     const modelId = process.env.AI_MODEL
@@ -139,6 +143,7 @@ export function getAIModel(): ModelConfig {
                         `- AWS_ACCESS_KEY_ID for Bedrock\n` +
                         `- OPENROUTER_API_KEY for OpenRouter\n` +
                         `- AZURE_API_KEY for Azure\n` +
+                        `- SILICONFLOW_API_KEY for SiliconFlow\n` +
                         `Or set AI_PROVIDER=ollama for local Ollama.`,
                 )
             } else {
@@ -259,9 +264,20 @@ export function getAIModel(): ModelConfig {
             }
             break
 
+        case "siliconflow": {
+            const siliconflowProvider = createOpenAI({
+                apiKey: process.env.SILICONFLOW_API_KEY,
+                baseURL:
+                    process.env.SILICONFLOW_BASE_URL ||
+                    "https://api.siliconflow.com/v1",
+            })
+            model = siliconflowProvider.chat(modelId)
+            break
+        }
+
         default:
             throw new Error(
-                `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek`,
+                `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow`,
             )
     }
 

lib/system-prompts.ts

@@ -12,6 +12,13 @@ You can see the image that user uploaded.
 When you are asked to create a diagram, you must first tell user you plan in text first. Plan the layout and structure that can avoid object overlapping or edge cross the objects.
 Then use display_diagram tool to generate the full draw.io XML for the entire diagram.
 
+## Tone and style
+- Only use emojis if the user explicitly requests it. Avoid using emojis in all communication unless asked.
+- Be concise and to the point. Only use bullet points when needed for clarity.
+- Your output will be displayed on a command line interface. Your responses should be short and concise. You can use Github-flavored markdown for formatting,.
+- Output text to communicate with the user; all text you output outside of tool use is displayed to the user. Only use tools to complete tasks. Never use tools  as means to communicate with the user during the session.
+
+
 ## App Context
 You are an AI agent (powered by {{MODEL_NAME}}) inside a web app. The interface has:
 - **Left panel**: Draw.io diagram editor where diagrams are rendered

lib/utils.ts

@@ -57,6 +57,7 @@ export function formatXML(xml: string, indent: string = "  "): string {
  * Efficiently converts a potentially incomplete XML string to a legal XML string by closing any open tags properly.
  * Additionally, if an <mxCell> tag does not have an mxGeometry child (e.g. <mxCell id="3">),
  * it removes that tag from the output.
+ * Also removes orphaned <mxPoint> elements that aren't inside <Array> or don't have proper 'as' attribute.
  * @param xmlString The potentially incomplete XML string
  * @returns A legal XML string with properly closed tags and removed incomplete mxCell elements.
  */
@@ -69,10 +70,34 @@ export function convertToLegalXml(xmlString: string): string {
 
     while ((match = regex.exec(xmlString)) !== null) {
         // match[0] contains the entire matched mxCell block
+        let cellContent = match[0]
+
+        // Remove orphaned <mxPoint> elements that are directly inside <mxGeometry>
+        // without an 'as' attribute (like as="sourcePoint", as="targetPoint")
+        // and not inside <Array as="points">
+        // These cause "Could not add object mxPoint" errors in draw.io
+        // First check if there's an <Array as="points"> - if so, keep all mxPoints inside it
+        const hasArrayPoints = /<Array\s+as="points">/.test(cellContent)
+        if (!hasArrayPoints) {
+            // Remove mxPoint elements without 'as' attribute
+            cellContent = cellContent.replace(
+                /<mxPoint\b[^>]*\/>/g,
+                (pointMatch) => {
+                    // Keep if it has an 'as' attribute
+                    if (/\sas=/.test(pointMatch)) {
+                        return pointMatch
+                    }
+                    // Remove orphaned mxPoint
+                    return ""
+                },
+            )
+        }
+
         // Indent each line of the matched block for readability.
-        const formatted = match[0]
+        const formatted = cellContent
             .split("\n")
             .map((line) => "    " + line.trim())
+            .filter((line) => line.trim()) // Remove empty lines from removed mxPoints
             .join("\n")
         result += formatted + "\n"
     }
@@ -168,7 +193,7 @@ export function replaceNodes(currentXML: string, nodes: string): string {
 
             // Insert after cell0 if possible
             const cell0 = currentRoot.querySelector('mxCell[id="0"]')
-            if (cell0 && cell0.nextSibling) {
+            if (cell0?.nextSibling) {
                 currentRoot.insertBefore(cell1, cell0.nextSibling)
             } else {
                 currentRoot.appendChild(cell1)
@@ -226,7 +251,6 @@ export function replaceXMLParts(
 ): string {
     // Format the XML first to ensure consistent line breaks
     let result = formatXML(xmlContent)
-    let lastProcessedIndex = 0
 
     for (const { search, replace } of searchReplacePairs) {
         // Also format the search content for consistency
@@ -241,18 +265,10 @@ export function replaceXMLParts(
             searchLines.pop()
         }
 
-        // Find the line number where lastProcessedIndex falls
-        let startLineNum = 0
-        let currentIndex = 0
-        while (
-            currentIndex < lastProcessedIndex &&
-            startLineNum < resultLines.length
-        ) {
-            currentIndex += resultLines[startLineNum].length + 1 // +1 for \n
-            startLineNum++
-        }
+        // Always search from the beginning - pairs may not be in document order
+        const startLineNum = 0
 
-        // Try to find exact match starting from lastProcessedIndex
+        // Try to find match using multiple strategies
         let matchFound = false
         let matchStartLine = -1
         let matchEndLine = -1
@@ -397,6 +413,73 @@ export function replaceXMLParts(
             }
         }
 
+        // Sixth try: Match by value attribute (label text)
+        // Extract value from search pattern and find elements with that value
+        if (!matchFound) {
+            const valueMatch = search.match(/value="([^"]*)"/)
+            if (valueMatch) {
+                const searchValue = valueMatch[0] // Use full match like value="text"
+                for (let i = startLineNum; i < resultLines.length; i++) {
+                    if (resultLines[i].includes(searchValue)) {
+                        // Found element with matching value
+                        let endLine = i + 1
+                        const line = resultLines[i].trim()
+
+                        if (!line.endsWith("/>")) {
+                            let depth = 1
+                            while (endLine < resultLines.length && depth > 0) {
+                                const currentLine = resultLines[endLine].trim()
+                                if (
+                                    currentLine.startsWith("<") &&
+                                    !currentLine.startsWith("</") &&
+                                    !currentLine.endsWith("/>")
+                                ) {
+                                    depth++
+                                } else if (currentLine.startsWith("</")) {
+                                    depth--
+                                }
+                                endLine++
+                            }
+                        }
+
+                        matchStartLine = i
+                        matchEndLine = endLine
+                        matchFound = true
+                        break
+                    }
+                }
+            }
+        }
+
+        // Seventh try: Normalized whitespace match
+        // Collapse all whitespace and compare
+        if (!matchFound) {
+            const normalizeWs = (s: string) => s.replace(/\s+/g, " ").trim()
+            const normalizedSearch = normalizeWs(search)
+
+            for (
+                let i = startLineNum;
+                i <= resultLines.length - searchLines.length;
+                i++
+            ) {
+                // Build a normalized version of the candidate lines
+                const candidateLines = resultLines.slice(
+                    i,
+                    i + searchLines.length,
+                )
+                const normalizedCandidate = normalizeWs(
+                    candidateLines.join(" "),
+                )
+
+                if (normalizedCandidate === normalizedSearch) {
+                    matchStartLine = i
+                    matchEndLine = i + searchLines.length
+                    matchFound = true
+                    break
+                }
+            }
+        }
+
         if (!matchFound) {
             throw new Error(
                 `Search pattern not found in the diagram. The pattern may not exist in the current structure.`,
@@ -419,12 +502,6 @@ export function replaceXMLParts(
         ]
 
         result = newResultLines.join("\n")
-
-        // Update lastProcessedIndex to the position after the replacement
-        lastProcessedIndex = 0
-        for (let i = 0; i < matchStartLine + replaceLines.length; i++) {
-            lastProcessedIndex += newResultLines[i].length + 1
-        }
     }
 
     return result
@@ -537,6 +614,33 @@ export function validateMxCellStructure(xml: string): string | null {
         return `Invalid XML: Found edges with invalid source/target references (${invalidConnections.slice(0, 3).join(", ")}). Edge source and target must reference existing cell IDs. Please regenerate the diagram with valid edge connections.`
     }
 
+    // Check for orphaned mxPoint elements (not inside <Array as="points"> and without 'as' attribute)
+    // These cause "Could not add object mxPoint" errors in draw.io
+    const allMxPoints = doc.querySelectorAll("mxPoint")
+    const orphanedMxPoints: string[] = []
+    allMxPoints.forEach((point) => {
+        const hasAsAttr = point.hasAttribute("as")
+        const parentIsArray =
+            point.parentElement?.tagName === "Array" &&
+            point.parentElement?.getAttribute("as") === "points"
+
+        if (!hasAsAttr && !parentIsArray) {
+            // Find the parent mxCell to report which edge has the problem
+            let parent = point.parentElement
+            while (parent && parent.tagName !== "mxCell") {
+                parent = parent.parentElement
+            }
+            const cellId = parent?.getAttribute("id") || "unknown"
+            if (!orphanedMxPoints.includes(cellId)) {
+                orphanedMxPoints.push(cellId)
+            }
+        }
+    })
+
+    if (orphanedMxPoints.length > 0) {
+        return `Invalid XML: Found orphaned mxPoint elements in cells (${orphanedMxPoints.slice(0, 3).join(", ")}). mxPoint elements must either have an 'as' attribute (e.g., as="sourcePoint") or be inside <Array as="points">. For edge waypoints, use: <Array as="points"><mxPoint x="..." y="..."/></Array>. Please fix the mxPoint structure.`
+    }
+
     return null
 }
 

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "next-ai-draw-io",
-            "version": "0.2.0",
+            "version": "0.3.0",
             "license": "Apache-2.0",
             "dependencies": {
                 "@ai-sdk/amazon-bedrock": "^3.0.62",
@@ -15,7 +15,7 @@
                 "@ai-sdk/deepseek": "^1.0.30",
                 "@ai-sdk/google": "^2.0.0",
                 "@ai-sdk/openai": "^2.0.19",
-                "@ai-sdk/react": "^2.0.22",
+                "@ai-sdk/react": "^2.0.107",
                 "@aws-sdk/credential-providers": "^3.943.0",
                 "@langfuse/client": "^4.4.9",
                 "@langfuse/otel": "^4.4.4",
@@ -24,9 +24,11 @@
                 "@openrouter/ai-sdk-provider": "^1.2.3",
                 "@opentelemetry/sdk-trace-node": "^2.2.0",
                 "@radix-ui/react-dialog": "^1.1.6",
+                "@radix-ui/react-label": "^2.1.8",
                 "@radix-ui/react-scroll-area": "^1.2.3",
                 "@radix-ui/react-select": "^2.2.6",
                 "@radix-ui/react-slot": "^1.1.2",
+                "@radix-ui/react-switch": "^1.2.6",
                 "@radix-ui/react-tooltip": "^1.1.8",
                 "@vercel/analytics": "^1.5.0",
                 "@xmldom/xmldom": "^0.9.8",
@@ -88,23 +90,6 @@
                 "zod": "^3.25.76 || ^4.1.8"
             }
         },
-        "node_modules/@ai-sdk/amazon-bedrock/node_modules/@ai-sdk/provider-utils": {
-            "version": "3.0.18",
-            "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-3.0.18.tgz",
-            "integrity": "sha512-ypv1xXMsgGcNKUP+hglKqtdDuMg68nWHucPPAhIENrbFAI+xCHiqPVN8Zllxyv1TNZwGWUghPxJXU+Mqps0YRQ==",
-            "license": "Apache-2.0",
-            "dependencies": {
-                "@ai-sdk/provider": "2.0.0",
-                "@standard-schema/spec": "^1.0.0",
-                "eventsource-parser": "^3.0.6"
-            },
-            "engines": {
-                "node": ">=18"
-            },
-            "peerDependencies": {
-                "zod": "^3.25.76 || ^4.1.8"
-            }
-        },
         "node_modules/@ai-sdk/anthropic": {
             "version": "2.0.50",
             "resolved": "https://registry.npmjs.org/@ai-sdk/anthropic/-/anthropic-2.0.50.tgz",
@@ -121,23 +106,6 @@
                 "zod": "^3.25.76 || ^4.1.8"
             }
         },
-        "node_modules/@ai-sdk/anthropic/node_modules/@ai-sdk/provider-utils": {
-            "version": "3.0.18",
-            "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-3.0.18.tgz",
-            "integrity": "sha512-ypv1xXMsgGcNKUP+hglKqtdDuMg68nWHucPPAhIENrbFAI+xCHiqPVN8Zllxyv1TNZwGWUghPxJXU+Mqps0YRQ==",
-            "license": "Apache-2.0",
-            "dependencies": {
-                "@ai-sdk/provider": "2.0.0",
-                "@standard-schema/spec": "^1.0.0",
-                "eventsource-parser": "^3.0.6"
-            },
-            "engines": {
-                "node": ">=18"
-            },
-            "peerDependencies": {
-                "zod": "^3.25.76 || ^4.1.8"
-            }
-        },
         "node_modules/@ai-sdk/azure": {
             "version": "2.0.69",
             "resolved": "https://registry.npmjs.org/@ai-sdk/azure/-/azure-2.0.69.tgz",
@@ -189,32 +157,15 @@
                 "zod": "^3.25.76 || ^4.1.8"
             }
         },
-        "node_modules/@ai-sdk/deepseek/node_modules/@ai-sdk/provider-utils": {
-            "version": "3.0.18",
-            "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-3.0.18.tgz",
-            "integrity": "sha512-ypv1xXMsgGcNKUP+hglKqtdDuMg68nWHucPPAhIENrbFAI+xCHiqPVN8Zllxyv1TNZwGWUghPxJXU+Mqps0YRQ==",
-            "license": "Apache-2.0",
-            "dependencies": {
-                "@ai-sdk/provider": "2.0.0",
-                "@standard-schema/spec": "^1.0.0",
-                "eventsource-parser": "^3.0.6"
-            },
-            "engines": {
-                "node": ">=18"
-            },
-            "peerDependencies": {
-                "zod": "^3.25.76 || ^4.1.8"
-            }
-        },
         "node_modules/@ai-sdk/gateway": {
-            "version": "2.0.7",
-            "resolved": "https://registry.npmjs.org/@ai-sdk/gateway/-/gateway-2.0.7.tgz",
-            "integrity": "sha512-/AI5AKi4vOK9SEb8Z1dfXkhsJ5NAfWsoJQc96B/mzn2KIrjw5occOjIwD06scuhV9xWlghCoXJT1sQD9QH/tyg==",
+            "version": "2.0.18",
+            "resolved": "https://registry.npmjs.org/@ai-sdk/gateway/-/gateway-2.0.18.tgz",
+            "integrity": "sha512-sDQcW+6ck2m0pTIHW6BPHD7S125WD3qNkx/B8sEzJp/hurocmJ5Cni0ybExg6sQMGo+fr/GWOwpHF1cmCdg5rQ==",
             "license": "Apache-2.0",
             "dependencies": {
                 "@ai-sdk/provider": "2.0.0",
-                "@ai-sdk/provider-utils": "3.0.16",
-                "@vercel/oidc": "3.0.3"
+                "@ai-sdk/provider-utils": "3.0.18",
+                "@vercel/oidc": "3.0.5"
             },
             "engines": {
                 "node": ">=18"
@@ -298,23 +249,6 @@
                 "zod": "^3.25.76 || ^4.1.8"
             }
         },
-        "node_modules/@ai-sdk/openai-compatible/node_modules/@ai-sdk/provider-utils": {
-            "version": "3.0.18",
-            "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-3.0.18.tgz",
-            "integrity": "sha512-ypv1xXMsgGcNKUP+hglKqtdDuMg68nWHucPPAhIENrbFAI+xCHiqPVN8Zllxyv1TNZwGWUghPxJXU+Mqps0YRQ==",
-            "license": "Apache-2.0",
-            "dependencies": {
-                "@ai-sdk/provider": "2.0.0",
-                "@standard-schema/spec": "^1.0.0",
-                "eventsource-parser": "^3.0.6"
-            },
-            "engines": {
-                "node": ">=18"
-            },
-            "peerDependencies": {
-                "zod": "^3.25.76 || ^4.1.8"
-            }
-        },
         "node_modules/@ai-sdk/openai/node_modules/@ai-sdk/provider-utils": {
             "version": "3.0.17",
             "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-3.0.17.tgz",
@@ -345,9 +279,9 @@
             }
         },
         "node_modules/@ai-sdk/provider-utils": {
-            "version": "3.0.16",
-            "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-3.0.16.tgz",
-            "integrity": "sha512-lsWQY9aDXHitw7C1QRYIbVGmgwyT98TF3MfM8alNIXKpdJdi+W782Rzd9f1RyOfgRmZ08gJ2EYNDhWNK7RqpEA==",
+            "version": "3.0.18",
+            "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-3.0.18.tgz",
+            "integrity": "sha512-ypv1xXMsgGcNKUP+hglKqtdDuMg68nWHucPPAhIENrbFAI+xCHiqPVN8Zllxyv1TNZwGWUghPxJXU+Mqps0YRQ==",
             "license": "Apache-2.0",
             "dependencies": {
                 "@ai-sdk/provider": "2.0.0",
@@ -362,13 +296,13 @@
             }
         },
         "node_modules/@ai-sdk/react": {
-            "version": "2.0.22",
-            "resolved": "https://registry.npmjs.org/@ai-sdk/react/-/react-2.0.22.tgz",
-            "integrity": "sha512-nJt2U0ZDjpdPEIHCEWlxOixUhQyA/teQ0y9gz66mYW40OhBjSsZjcEAYhbS05mvy+NMVqzlE3sVu54DqzjR68w==",
+            "version": "2.0.107",
+            "resolved": "https://registry.npmjs.org/@ai-sdk/react/-/react-2.0.107.tgz",
+            "integrity": "sha512-rv0u+tAi2r2zJu2uSLXcC3TBgGrkQIWXRM+i6us6qcGmYQ2kOu2VYg+lxviOSGPhL9PVebvTlN5x8mf3rDqX+w==",
             "license": "Apache-2.0",
             "dependencies": {
-                "@ai-sdk/provider-utils": "3.0.5",
-                "ai": "5.0.22",
+                "@ai-sdk/provider-utils": "3.0.18",
+                "ai": "5.0.107",
                 "swr": "^2.2.5",
                 "throttleit": "2.1.0"
             },
@@ -377,7 +311,7 @@
             },
             "peerDependencies": {
                 "react": "^18 || ^19 || ^19.0.0-rc",
-                "zod": "^3.25.76 || ^4"
+                "zod": "^3.25.76 || ^4.1.8"
             },
             "peerDependenciesMeta": {
                 "zod": {
@@ -385,67 +319,6 @@
                 }
             }
         },
-        "node_modules/@ai-sdk/react/node_modules/@ai-sdk/gateway": {
-            "version": "1.0.11",
-            "resolved": "https://registry.npmjs.org/@ai-sdk/gateway/-/gateway-1.0.11.tgz",
-            "integrity": "sha512-ErwWS3sPOuWy42eE3AVxlKkTa1XjjKBEtNCOylVKMO5KNyz5qie8QVlLYbULOG56dtxX4zTKX3rQNJudplhcmQ==",
-            "license": "Apache-2.0",
-            "dependencies": {
-                "@ai-sdk/provider": "2.0.0",
-                "@ai-sdk/provider-utils": "3.0.5"
-            },
-            "engines": {
-                "node": ">=18"
-            },
-            "peerDependencies": {
-                "zod": "^3.25.76 || ^4"
-            }
-        },
-        "node_modules/@ai-sdk/react/node_modules/@ai-sdk/provider-utils": {
-            "version": "3.0.5",
-            "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-3.0.5.tgz",
-            "integrity": "sha512-HliwB/yzufw3iwczbFVE2Fiwf1XqROB/I6ng8EKUsPM5+2wnIa8f4VbljZcDx+grhFrPV+PnRZH7zBqi8WZM7Q==",
-            "license": "Apache-2.0",
-            "dependencies": {
-                "@ai-sdk/provider": "2.0.0",
-                "@standard-schema/spec": "^1.0.0",
-                "eventsource-parser": "^3.0.3",
-                "zod-to-json-schema": "^3.24.1"
-            },
-            "engines": {
-                "node": ">=18"
-            },
-            "peerDependencies": {
-                "zod": "^3.25.76 || ^4"
-            }
-        },
-        "node_modules/@ai-sdk/react/node_modules/@ai-sdk/provider-utils/node_modules/zod-to-json-schema": {
-            "version": "3.24.6",
-            "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.24.6.tgz",
-            "integrity": "sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==",
-            "license": "ISC",
-            "peerDependencies": {
-                "zod": "^3.24.1"
-            }
-        },
-        "node_modules/@ai-sdk/react/node_modules/ai": {
-            "version": "5.0.22",
-            "resolved": "https://registry.npmjs.org/ai/-/ai-5.0.22.tgz",
-            "integrity": "sha512-RZiYhj7Ux7hrLtXkHPcxzdiSZt4NOiC69O5AkNfMCsz3twwz/KRkl9ASptosoOsg833s5yRcTSdIu5z53Sl6Pw==",
-            "license": "Apache-2.0",
-            "dependencies": {
-                "@ai-sdk/gateway": "1.0.11",
-                "@ai-sdk/provider": "2.0.0",
-                "@ai-sdk/provider-utils": "3.0.5",
-                "@opentelemetry/api": "1.9.0"
-            },
-            "engines": {
-                "node": ">=18"
-            },
-            "peerDependencies": {
-                "zod": "^3.25.76 || ^4"
-            }
-        },
         "node_modules/@alloc/quick-lru": {
             "version": "5.2.0",
             "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -3400,6 +3273,85 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-label": {
+            "version": "2.1.8",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.8.tgz",
+            "integrity": "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-primitive": "2.1.4"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-compose-refs": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+            "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-primitive": {
+            "version": "2.1.4",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz",
+            "integrity": "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-slot": "1.2.4"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-label/node_modules/@radix-ui/react-slot": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
+            "integrity": "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-popper": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.2.tgz",
@@ -3989,6 +3941,164 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-switch": {
+            "version": "1.2.6",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz",
+            "integrity": "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/primitive": "1.1.3",
+                "@radix-ui/react-compose-refs": "1.1.2",
+                "@radix-ui/react-context": "1.1.2",
+                "@radix-ui/react-primitive": "2.1.3",
+                "@radix-ui/react-use-controllable-state": "1.2.2",
+                "@radix-ui/react-use-previous": "1.1.1",
+                "@radix-ui/react-use-size": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/primitive": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+            "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
+            "license": "MIT"
+        },
+        "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-compose-refs": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+            "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-context": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+            "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-primitive": {
+            "version": "2.1.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+            "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-slot": "1.2.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+                "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-slot": {
+            "version": "1.2.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+            "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-compose-refs": "1.1.2"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-controllable-state": {
+            "version": "1.2.2",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+            "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-effect-event": "0.0.2",
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-layout-effect": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+            "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-switch/node_modules/@radix-ui/react-use-size": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+            "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+            "license": "MIT",
+            "dependencies": {
+                "@radix-ui/react-use-layout-effect": "1.1.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-tooltip": {
             "version": "1.1.8",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.8.tgz",
@@ -5760,9 +5870,9 @@
             }
         },
         "node_modules/@vercel/oidc": {
-            "version": "3.0.3",
-            "resolved": "https://registry.npmjs.org/@vercel/oidc/-/oidc-3.0.3.tgz",
-            "integrity": "sha512-yNEQvPcVrK9sIe637+I0jD6leluPxzwJKx/Haw6F4H77CdDsszUn5V3o96LPziXkSNE2B83+Z3mjqGKBK/R6Gg==",
+            "version": "3.0.5",
+            "resolved": "https://registry.npmjs.org/@vercel/oidc/-/oidc-3.0.5.tgz",
+            "integrity": "sha512-fnYhv671l+eTTp48gB4zEsTW/YtRgRPnkI2nT7x6qw5rkI1Lq2hTmQIpHPgyThI0znLK+vX2n9XxKdXZ7BUbbw==",
             "license": "Apache-2.0",
             "engines": {
                 "node": ">= 20"
@@ -5810,14 +5920,14 @@
             }
         },
         "node_modules/ai": {
-            "version": "5.0.90",
-            "resolved": "https://registry.npmjs.org/ai/-/ai-5.0.90.tgz",
-            "integrity": "sha512-bawNN10N2cXzFedbDdNUZo8KkcGp12VX1b+mCL5dfllh6WmLsIYYME7GVxsRJvHvPP7xRhuds5fn0jtLyxGnZw==",
+            "version": "5.0.107",
+            "resolved": "https://registry.npmjs.org/ai/-/ai-5.0.107.tgz",
+            "integrity": "sha512-laZlS9ZC/DZfSaxPgrBqI4mM+kxRvTPBBQfa74ceBFskkunZKEsaGVFNEs4cfyGa3nCCCl1WO/fjxixp4V8Zag==",
             "license": "Apache-2.0",
             "dependencies": {
-                "@ai-sdk/gateway": "2.0.7",
+                "@ai-sdk/gateway": "2.0.18",
                 "@ai-sdk/provider": "2.0.0",
-                "@ai-sdk/provider-utils": "3.0.16",
+                "@ai-sdk/provider-utils": "3.0.18",
                 "@opentelemetry/api": "1.9.0"
             },
             "engines": {
@@ -10504,23 +10614,6 @@
                 "zod": "^4.0.16"
             }
         },
-        "node_modules/ollama-ai-provider-v2/node_modules/@ai-sdk/provider-utils": {
-            "version": "3.0.17",
-            "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-3.0.17.tgz",
-            "integrity": "sha512-TR3Gs4I3Tym4Ll+EPdzRdvo/rc8Js6c4nVhFLuvGLX/Y4V9ZcQMa/HTiYsHEgmYrf1zVi6Q145UEZUfleOwOjw==",
-            "license": "Apache-2.0",
-            "dependencies": {
-                "@ai-sdk/provider": "2.0.0",
-                "@standard-schema/spec": "^1.0.0",
-                "eventsource-parser": "^3.0.6"
-            },
-            "engines": {
-                "node": ">=18"
-            },
-            "peerDependencies": {
-                "zod": "^3.25.76 || ^4.1.8"
-            }
-        },
         "node_modules/onetime": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "license": "Apache-2.0",
     "private": true,
     "scripts": {
@@ -19,18 +19,21 @@
         "@ai-sdk/deepseek": "^1.0.30",
         "@ai-sdk/google": "^2.0.0",
         "@ai-sdk/openai": "^2.0.19",
-        "@ai-sdk/react": "^2.0.22",
+        "@ai-sdk/react": "^2.0.107",
         "@aws-sdk/credential-providers": "^3.943.0",
         "@langfuse/client": "^4.4.9",
         "@langfuse/otel": "^4.4.4",
         "@langfuse/tracing": "^4.4.9",
         "@next/third-parties": "^16.0.6",
         "@openrouter/ai-sdk-provider": "^1.2.3",
+        "@opentelemetry/exporter-trace-otlp-http": "^0.208.0",
         "@opentelemetry/sdk-trace-node": "^2.2.0",
         "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-scroll-area": "^1.2.3",
         "@radix-ui/react-select": "^2.2.6",
         "@radix-ui/react-slot": "^1.1.2",
+        "@radix-ui/react-switch": "^1.2.6",
         "@radix-ui/react-tooltip": "^1.1.8",
         "@vercel/analytics": "^1.5.0",
         "@xmldom/xmldom": "^0.9.8",