fix: shorten toast notification duration to 2 seconds

.github/workflows/auto-format.yml

@@ -1,47 +0,0 @@
-name: Auto Format
-
-on:
-  pull_request:
-    types: [opened, synchronize]
-
-permissions:
-  contents: write
-
-jobs:
-  format:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ github.head_ref }}
-          token: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-
-      - name: Install Biome
-        run: npm install --save-dev @biomejs/biome
-
-      - name: Run Biome format
-        run: npx @biomejs/biome check --write --no-errors-on-unmatched .
-
-      - name: Check for changes
-        id: changes
-        run: |
-          if git diff --quiet; then
-            echo "has_changes=false" >> $GITHUB_OUTPUT
-          else
-            echo "has_changes=true" >> $GITHUB_OUTPUT
-          fi
-
-      - name: Commit changes
-        if: steps.changes.outputs.has_changes == 'true'
-        run: |
-          git config --global user.name "github-actions[bot]"
-          git config --global user.email "github-actions[bot]@users.noreply.github.com"
-          git add .
-          git commit -m "style: auto-format with Biome"
-          git push

.github/workflows/docker-build.yml

@@ -64,27 +64,3 @@ jobs:
           cache-to: type=gha,mode=max
           platforms: linux/amd64,linux/arm64
 
-      # Push to AWS ECR for App Runner auto-deploy
-      - name: Configure AWS credentials
-        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
-        uses: aws-actions/configure-aws-credentials@v4
-        with:
-          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          aws-region: ap-northeast-1
-
-      - name: Login to Amazon ECR
-        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
-        id: login-ecr
-        uses: aws-actions/amazon-ecr-login@v2
-
-      - name: Push to ECR (triggers App Runner auto-deploy)
-        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
-        env:
-          REPO_LOWER: ${{ github.repository }}
-        run: |
-          REPO_LOWER=$(echo "$REPO_LOWER" | tr '[:upper:]' '[:lower:]')
-          docker pull ghcr.io/${REPO_LOWER}:latest
-          docker tag ghcr.io/${REPO_LOWER}:latest ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.ap-northeast-1.amazonaws.com/next-ai-draw-io:latest
-          docker push ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.ap-northeast-1.amazonaws.com/next-ai-draw-io:latest
-

.gitignore

@@ -2,8 +2,6 @@
 
 # dependencies
 /node_modules
-packages/*/node_modules
-packages/*/dist
 /.pnp
 .pnp.*
 .yarn/*
@@ -48,5 +46,3 @@ push-via-ec2.sh
 .dev.vars
 .open-next/
 .wrangler/
-.env*.local
-

Dockerfile

@@ -54,6 +54,6 @@ EXPOSE 3000
 ENV PORT=3000
 ENV HOSTNAME="0.0.0.0"
 
-# Start the application (HOSTNAME override needed for AWS App Runner)
-CMD ["sh", "-c", "HOSTNAME=0.0.0.0 exec node server.js"]
+# Start the application
+CMD ["node", "server.js"]
 

README.md

@@ -30,7 +30,6 @@ https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
   - [Table of Contents](#table-of-contents)
   - [Examples](#examples)
   - [Features](#features)
-  - [MCP Server (Preview)](#mcp-server-preview)
   - [Getting Started](#getting-started)
     - [Try it Online](#try-it-online)
     - [Run with Docker (Recommended)](#run-with-docker-recommended)
@@ -93,36 +92,6 @@ Here are some example prompts and their generated diagrams:
 -   **Cloud Architecture Diagram Support**: Specialized support for generating cloud architecture diagrams (AWS, GCP, Azure)
 -   **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization
 
-## MCP Server (Preview)
-
-> **Preview Feature**: This feature is experimental and may not stable.
-
-Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol).
-
-```json
-{
-  "mcpServers": {
-    "drawio": {
-      "command": "npx",
-      "args": ["@next-ai-drawio/mcp-server@latest"]
-    }
-  }
-}
-```
-
-### Claude Code CLI
-
-```bash
-claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
-```
-
-Then ask Claude to create diagrams:
-> "Create a flowchart showing user authentication with login, MFA, and session management"
-
-The diagram appears in your browser in real-time!
-
-See the [MCP Server README](./packages/mcp-server/README.md) for VS Code, Cursor, and other client configurations.
-
 ## Getting Started
 
 ### Try it Online
@@ -238,7 +207,7 @@ All providers except AWS Bedrock and OpenRouter support custom endpoints.
 
 **Model Requirements**: This task requires strong model capabilities for generating long-form text with strict formatting constraints (draw.io XML). Recommended models include Claude Sonnet 4.5, GPT-5.1, Gemini 3 Pro, and DeepSeek V3.2/R1.
 
-Note that `claude` series has trained on draw.io diagrams with cloud architecture logos like AWS, Azure, GCP. So if you want to create cloud architecture diagrams, this is the best choice.
+Note that `claude` series has trained on draw.io diagrams with cloud architecture logos like AWS, Azue, GCP. So if you want to create cloud architecture diagrams, this is the best choice.
 
 
 ## How It Works

app/api/chat/route.ts

@@ -3,12 +3,10 @@ import {
     convertToModelMessages,
     createUIMessageStream,
     createUIMessageStreamResponse,
-    InvalidToolInputError,
     LoadAPIKeyError,
     stepCountIs,
     streamText,
 } from "ai"
-import { jsonrepair } from "jsonrepair"
 import { z } from "zod"
 import { getAIModel, supportsPromptCaching } from "@/lib/ai-providers"
 import { findCachedResponse } from "@/lib/cached-responses"
@@ -70,41 +68,29 @@ function isMinimalDiagram(xml: string): boolean {
 
 // Helper function to replace historical tool call XML with placeholders
 // This reduces token usage and forces LLM to rely on the current diagram XML (source of truth)
-// Also fixes invalid/undefined inputs from interrupted streaming
 function replaceHistoricalToolInputs(messages: any[]): any[] {
     return messages.map((msg) => {
         if (msg.role !== "assistant" || !Array.isArray(msg.content)) {
             return msg
         }
-        const replacedContent = msg.content
-            .map((part: any) => {
-                if (part.type === "tool-call") {
-                    const toolName = part.toolName
-                    // Fix invalid/undefined inputs from interrupted streaming
-                    if (
-                        !part.input ||
-                        typeof part.input !== "object" ||
-                        Object.keys(part.input).length === 0
-                    ) {
-                        // Skip tool calls with invalid inputs entirely
-                        return null
-                    }
-                    if (
-                        toolName === "display_diagram" ||
-                        toolName === "edit_diagram"
-                    ) {
-                        return {
-                            ...part,
-                            input: {
-                                placeholder:
-                                    "[XML content replaced - see current diagram XML in system context]",
-                            },
-                        }
+        const replacedContent = msg.content.map((part: any) => {
+            if (part.type === "tool-call") {
+                const toolName = part.toolName
+                if (
+                    toolName === "display_diagram" ||
+                    toolName === "edit_diagram"
+                ) {
+                    return {
+                        ...part,
+                        input: {
+                            placeholder:
+                                "[XML content replaced - see current diagram XML in system context]",
+                        },
                     }
                 }
-                return part
-            })
-            .filter(Boolean) // Remove null entries (invalid tool calls)
+            }
+            return part
+        })
         return { ...msg, content: replacedContent }
     })
 }
@@ -214,9 +200,6 @@ async function handleChatRequest(req: Request): Promise<Response> {
         modelId: req.headers.get("x-ai-model"),
     }
 
-    // Read minimal style preference from header
-    const minimalStyle = req.headers.get("x-minimal-style") === "true"
-
     // Get AI model with optional client overrides
     const { model, providerOptions, headers, modelId } =
         getAIModel(clientOverrides)
@@ -228,7 +211,7 @@ async function handleChatRequest(req: Request): Promise<Response> {
     )
 
     // Get the appropriate system prompt based on model (extended for Opus/Haiku 4.5)
-    const systemMessage = getSystemPrompt(modelId, minimalStyle)
+    const systemMessage = getSystemPrompt(modelId)
 
     // Extract file parts (images) from the last message
     const fileParts =
@@ -243,36 +226,6 @@ ${userInputText}
     // Convert UIMessages to ModelMessages and add system message
     const modelMessages = convertToModelMessages(messages)
 
-    // DEBUG: Log incoming messages structure
-    console.log("[route.ts] Incoming messages count:", messages.length)
-    messages.forEach((msg: any, idx: number) => {
-        console.log(
-            `[route.ts] Message ${idx} role:`,
-            msg.role,
-            "parts count:",
-            msg.parts?.length,
-        )
-        if (msg.parts) {
-            msg.parts.forEach((part: any, partIdx: number) => {
-                if (
-                    part.type === "tool-invocation" ||
-                    part.type === "tool-result"
-                ) {
-                    console.log(`[route.ts]   Part ${partIdx}:`, {
-                        type: part.type,
-                        toolName: part.toolName,
-                        hasInput: !!part.input,
-                        inputType: typeof part.input,
-                        inputKeys:
-                            part.input && typeof part.input === "object"
-                                ? Object.keys(part.input)
-                                : null,
-                    })
-                }
-            })
-        }
-    })
-
     // Replace historical tool call XML with placeholders to reduce tokens
     // Disabled by default - some models (e.g. minimax) copy placeholders instead of generating XML
     const enableHistoryReplace =
@@ -288,63 +241,6 @@ ${userInputText}
             msg.content && Array.isArray(msg.content) && msg.content.length > 0,
     )
 
-    // Filter out tool-calls with invalid inputs (from failed repair or interrupted streaming)
-    // Bedrock API rejects messages where toolUse.input is not a valid JSON object
-    enhancedMessages = enhancedMessages
-        .map((msg: any) => {
-            if (msg.role !== "assistant" || !Array.isArray(msg.content)) {
-                return msg
-            }
-            const filteredContent = msg.content.filter((part: any) => {
-                if (part.type === "tool-call") {
-                    // Check if input is a valid object (not null, undefined, or empty)
-                    if (
-                        !part.input ||
-                        typeof part.input !== "object" ||
-                        Object.keys(part.input).length === 0
-                    ) {
-                        console.warn(
-                            `[route.ts] Filtering out tool-call with invalid input:`,
-                            { toolName: part.toolName, input: part.input },
-                        )
-                        return false
-                    }
-                }
-                return true
-            })
-            return { ...msg, content: filteredContent }
-        })
-        .filter((msg: any) => msg.content && msg.content.length > 0)
-
-    // DEBUG: Log modelMessages structure (what's being sent to AI)
-    console.log("[route.ts] Model messages count:", enhancedMessages.length)
-    enhancedMessages.forEach((msg: any, idx: number) => {
-        console.log(
-            `[route.ts] ModelMsg ${idx} role:`,
-            msg.role,
-            "content count:",
-            msg.content?.length,
-        )
-        if (msg.content) {
-            msg.content.forEach((part: any, partIdx: number) => {
-                if (part.type === "tool-call" || part.type === "tool-result") {
-                    console.log(`[route.ts]   Content ${partIdx}:`, {
-                        type: part.type,
-                        toolName: part.toolName,
-                        hasInput: !!part.input,
-                        inputType: typeof part.input,
-                        inputValue:
-                            part.input === undefined
-                                ? "undefined"
-                                : part.input === null
-                                  ? "null"
-                                  : "object",
-                    })
-                }
-            })
-        }
-    })
-
     // Update the last message with user input only (XML moved to separate cached system message)
     if (enhancedMessages.length >= 1) {
         const lastModelMessage = enhancedMessages[enhancedMessages.length - 1]
@@ -424,67 +320,6 @@ ${userInputText}
             maxOutputTokens: parseInt(process.env.MAX_OUTPUT_TOKENS, 10),
         }),
         stopWhen: stepCountIs(5),
-        // Repair truncated tool calls when maxOutputTokens is reached mid-JSON
-        experimental_repairToolCall: async ({ toolCall, error }) => {
-            // DEBUG: Log what we're trying to repair
-            console.log(`[repairToolCall] Tool: ${toolCall.toolName}`)
-            console.log(
-                `[repairToolCall] Error: ${error.name} - ${error.message}`,
-            )
-            console.log(`[repairToolCall] Input type: ${typeof toolCall.input}`)
-            console.log(`[repairToolCall] Input value:`, toolCall.input)
-
-            // Only attempt repair for invalid tool input (broken JSON from truncation)
-            if (
-                error instanceof InvalidToolInputError ||
-                error.name === "AI_InvalidToolInputError"
-            ) {
-                try {
-                    // Pre-process to fix common LLM JSON errors that jsonrepair can't handle
-                    let inputToRepair = toolCall.input
-                    if (typeof inputToRepair === "string") {
-                        // Fix `:=` instead of `: ` (LLM sometimes generates this)
-                        inputToRepair = inputToRepair.replace(/:=/g, ": ")
-                        // Fix `= "` instead of `: "`
-                        inputToRepair = inputToRepair.replace(/=\s*"/g, ': "')
-                    }
-                    // Use jsonrepair to fix truncated JSON
-                    const repairedInput = jsonrepair(inputToRepair)
-                    console.log(
-                        `[repairToolCall] Repaired truncated JSON for tool: ${toolCall.toolName}`,
-                    )
-                    return { ...toolCall, input: repairedInput }
-                } catch (repairError) {
-                    console.warn(
-                        `[repairToolCall] Failed to repair JSON for tool: ${toolCall.toolName}`,
-                        repairError,
-                    )
-                    // Return a placeholder input to avoid API errors in multi-step
-                    // The tool will fail gracefully on client side
-                    if (toolCall.toolName === "edit_diagram") {
-                        return {
-                            ...toolCall,
-                            input: {
-                                operations: [],
-                                _error: "JSON repair failed - no operations to apply",
-                            },
-                        }
-                    }
-                    if (toolCall.toolName === "display_diagram") {
-                        return {
-                            ...toolCall,
-                            input: {
-                                xml: "",
-                                _error: "JSON repair failed - empty diagram",
-                            },
-                        }
-                    }
-                    return null
-                }
-            }
-            // Don't attempt to repair other errors (like NoSuchToolError)
-            return null
-        },
         messages: allMessages,
         ...(providerOptions && { providerOptions }), // This now includes all reasoning configs
         ...(headers && { headers }),
@@ -505,32 +340,36 @@ ${userInputText}
         tools: {
             // Client-side tool that will be executed on the client
             display_diagram: {
-                description: `Display a diagram on draw.io. Pass ONLY the mxCell elements - wrapper tags and root cells are added automatically.
+                description: `Display a diagram on draw.io. Pass the XML content inside <root> tags.
 
 VALIDATION RULES (XML will be rejected if violated):
-1. Generate ONLY mxCell elements - NO wrapper tags (<mxfile>, <mxGraphModel>, <root>)
-2. Do NOT include root cells (id="0" or id="1") - they are added automatically
-3. All mxCell elements must be siblings - never nested
-4. Every mxCell needs a unique id (start from "2")
-5. Every mxCell needs a valid parent attribute (use "1" for top-level)
-6. Escape special chars in values: &lt; &gt; &amp; &quot;
+1. All mxCell elements must be DIRECT children of <root> - never nested
+2. Every mxCell needs a unique id
+3. Every mxCell (except id="0") needs a valid parent attribute
+4. Edge source/target must reference existing cell IDs
+5. Escape special chars in values: &lt; &gt; &amp; &quot;
+6. Always start with: <mxCell id="0"/><mxCell id="1" parent="0"/>
 
-Example (generate ONLY this - no wrapper tags):
-<mxCell id="lane1" value="Frontend" style="swimlane;" vertex="1" parent="1">
-  <mxGeometry x="40" y="40" width="200" height="200" as="geometry"/>
-</mxCell>
-<mxCell id="step1" value="Step 1" style="rounded=1;" vertex="1" parent="lane1">
-  <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
-</mxCell>
-<mxCell id="lane2" value="Backend" style="swimlane;" vertex="1" parent="1">
-  <mxGeometry x="280" y="40" width="200" height="200" as="geometry"/>
-</mxCell>
-<mxCell id="step2" value="Step 2" style="rounded=1;" vertex="1" parent="lane2">
-  <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
-</mxCell>
-<mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;" edge="1" parent="1" source="step1" target="step2">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>
+Example with swimlanes and edges (note: all mxCells are siblings):
+<root>
+  <mxCell id="0"/>
+  <mxCell id="1" parent="0"/>
+  <mxCell id="lane1" value="Frontend" style="swimlane;" vertex="1" parent="1">
+    <mxGeometry x="40" y="40" width="200" height="200" as="geometry"/>
+  </mxCell>
+  <mxCell id="step1" value="Step 1" style="rounded=1;" vertex="1" parent="lane1">
+    <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
+  </mxCell>
+  <mxCell id="lane2" value="Backend" style="swimlane;" vertex="1" parent="1">
+    <mxGeometry x="280" y="40" width="200" height="200" as="geometry"/>
+  </mxCell>
+  <mxCell id="step2" value="Step 2" style="rounded=1;" vertex="1" parent="lane2">
+    <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
+  </mxCell>
+  <mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;" edge="1" parent="1" source="step1" target="step2">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+</root>
 
 Notes:
 - For AWS diagrams, use **AWS 2025 icons**.
@@ -543,56 +382,32 @@ Notes:
                 }),
             },
             edit_diagram: {
-                description: `Edit the current diagram by ID-based operations (update/add/delete cells).
+                description: `Edit specific parts of the current diagram by replacing exact line matches. Use this tool to make targeted fixes without regenerating the entire XML.
+CRITICAL: Copy-paste the EXACT search pattern from the "Current diagram XML" in system context. Do NOT reorder attributes or reformat - the attribute order in draw.io XML varies and you MUST match it exactly.
+IMPORTANT: Keep edits concise:
+- COPY the exact mxCell line from the current XML (attribute order matters!)
+- 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
 
-Operations:
-- update: Replace an existing cell by its id. Provide cell_id and complete new_xml.
-- add: Add a new cell. Provide cell_id (new unique id) and new_xml.
-- delete: Remove a cell by its id. Only cell_id is needed.
-
-For update/add, new_xml must be a complete mxCell element including mxGeometry.
-
-⚠️ JSON ESCAPING: Every " inside new_xml MUST be escaped as \\". Example: id=\\"5\\" value=\\"Label\\"`,
+⚠️ JSON ESCAPING: Every " inside string values MUST be escaped as \\". Example: x=\\"100\\" y=\\"200\\" - BOTH quotes need backslashes!`,
                 inputSchema: z.object({
-                    operations: z
+                    edits: z
                         .array(
                             z.object({
-                                type: z
-                                    .enum(["update", "add", "delete"])
-                                    .describe("Operation type"),
-                                cell_id: z
+                                search: z
                                     .string()
                                     .describe(
-                                        "The id of the mxCell. Must match the id attribute in new_xml.",
+                                        "EXACT lines copied from current XML (preserve attribute order!)",
                                     ),
-                                new_xml: z
+                                replace: z
                                     .string()
-                                    .optional()
-                                    .describe(
-                                        "Complete mxCell XML element (required for update/add)",
-                                    ),
+                                    .describe("Replacement lines"),
                             }),
                         )
-                        .describe("Array of operations to apply"),
-                }),
-            },
-            append_diagram: {
-                description: `Continue generating diagram XML when previous display_diagram output was truncated due to length limits.
-
-WHEN TO USE: Only call this tool after display_diagram was truncated (you'll see an error message about truncation).
-
-CRITICAL INSTRUCTIONS:
-1. Do NOT include any wrapper tags - just continue the mxCell elements
-2. Continue from EXACTLY where your previous output stopped
-3. Complete the remaining mxCell elements
-4. If still truncated, call append_diagram again with the next fragment
-
-Example: If previous output ended with '<mxCell id="x" style="rounded=1', continue with ';" vertex="1">...' and complete the remaining elements.`,
-                inputSchema: z.object({
-                    xml: z
-                        .string()
                         .describe(
-                            "Continuation XML fragment to append (NO wrapper tags)",
+                            "Array of search/replace pairs to apply sequentially",
                         ),
                 }),
             },
@@ -620,7 +435,6 @@ Example: If previous output ended with '<mxCell id="x" style="rounded=1', contin
                 return {
                     inputTokens: totalInputTokens,
                     outputTokens: usage.outputTokens ?? 0,
-                    finishReason: (part as any).finishReason,
                 }
             }
             return undefined

app/api/chat/xml_guide.md

@@ -81,15 +81,16 @@ Contains the actual diagram data.
 
 ## Root Cell Container: `<root>`
 
-Contains all the cells in the diagram. **Note:** When generating diagrams, you only need to provide the mxCell elements - the root container and root cells (id="0", id="1") are added automatically.
+Contains all the cells in the diagram.
 
-**Internal structure (auto-generated):**
+**Example:**
 
 ```xml
 <root>
-  <mxCell id="0"/>           <!-- Auto-added -->
-  <mxCell id="1" parent="0"/> <!-- Auto-added -->
-  <!-- Your mxCell elements go here (start from id="2") -->
+<mxCell id="0"/>
+<mxCell id="1" parent="0"/>
+
+  <!-- Other cells go here -->
 </root>
 ```
 
@@ -202,15 +203,15 @@ Draw.io files contain two special cells that are always present:
 1.  **Root Cell** (id = "0"): The parent of all cells
 2.  **Default Parent Cell** (id = "1", parent = "0"): The default layer and parent for most cells
 
-## Tips for Creating Draw.io XML
+## Tips for Manually Creating Draw.io XML
 
-1.  **Generate ONLY mxCell elements** - wrapper tags and root cells (id="0", id="1") are added automatically
-2.  Start IDs from "2" (id="0" and id="1" are reserved for root cells)
+1.  Start with the basic structure (`mxfile`, `diagram`, `mxGraphModel`, `root`)
+2.  Always include the two special cells (id = "0" and id = "1")
 3.  Assign unique and sequential IDs to all cells
-4.  Define parent relationships correctly (use parent="1" for top-level shapes)
+4.  Define parent relationships correctly
 5.  Use `mxGeometry` elements to position shapes
 6.  For connectors, specify `source` and `target` attributes
-7.  **CRITICAL: All mxCell elements must be siblings. NEVER nest mxCell inside another mxCell.**
+7.  **CRITICAL: All mxCell elements must be DIRECT children of `<root>`. NEVER nest mxCell inside another mxCell.**
 
 ## Common Patterns
 

app/manifest.ts

@@ -1,28 +0,0 @@
-import type { MetadataRoute } from "next"
-
-export default function manifest(): MetadataRoute.Manifest {
-    return {
-        name: "Next AI Draw.io",
-        short_name: "AIDraw.io",
-        description:
-            "Create AWS architecture diagrams, flowcharts, and technical diagrams using AI. Free online tool integrating draw.io with AI assistance for professional diagram creation.",
-        start_url: "/",
-        display: "standalone",
-        background_color: "#f9fafb",
-        theme_color: "#171d26",
-        icons: [
-            {
-                src: "/favicon-192x192.png",
-                sizes: "192x192",
-                type: "image/png",
-                purpose: "any",
-            },
-            {
-                src: "/favicon-512x512.png",
-                sizes: "512x512",
-                type: "image/png",
-                purpose: "any",
-            },
-        ],
-    }
-}

app/page.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { useCallback, 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"
@@ -15,15 +15,8 @@ const drawioBaseUrl =
     process.env.NEXT_PUBLIC_DRAWIO_BASE_URL || "https://embed.diagrams.net"
 
 export default function Home() {
-    const {
-        drawioRef,
-        handleDiagramExport,
-        onDrawioLoad,
-        resetDrawioReady,
-        saveDiagramToStorage,
-        showSaveDialog,
-        setShowSaveDialog,
-    } = useDiagram()
+    const { drawioRef, handleDiagramExport, onDrawioLoad, resetDrawioReady } =
+        useDiagram()
     const [isMobile, setIsMobile] = useState(false)
     const [isChatVisible, setIsChatVisible] = useState(true)
     const [drawioUi, setDrawioUi] = useState<"min" | "sketch">("min")
@@ -32,29 +25,6 @@ export default function Home() {
     const [closeProtection, setCloseProtection] = useState(false)
 
     const chatPanelRef = useRef<ImperativePanelHandle>(null)
-    const isSavingRef = useRef(false)
-    const mouseOverDrawioRef = useRef(false)
-    const isMobileRef = useRef(false)
-
-    // Reset saving flag when dialog closes (with delay to ignore lingering save events from draw.io)
-    useEffect(() => {
-        if (!showSaveDialog) {
-            const timeout = setTimeout(() => {
-                isSavingRef.current = false
-            }, 1000)
-            return () => clearTimeout(timeout)
-        }
-    }, [showSaveDialog])
-
-    // Handle save from draw.io's built-in save button
-    // Note: draw.io sends save events for various reasons (focus changes, etc.)
-    // We use mouse position to determine if the user is interacting with draw.io
-    const handleDrawioSave = useCallback(() => {
-        if (!mouseOverDrawioRef.current) return
-        if (isSavingRef.current) return
-        isSavingRef.current = true
-        setShowSaveDialog(true)
-    }, [setShowSaveDialog])
 
     // Load preferences from localStorage after mount
     useEffect(() => {
@@ -65,10 +35,12 @@ export default function Home() {
 
         const savedDarkMode = localStorage.getItem("next-ai-draw-io-dark-mode")
         if (savedDarkMode !== null) {
+            // Use saved preference
             const isDark = savedDarkMode === "true"
             setDarkMode(isDark)
             document.documentElement.classList.toggle("dark", isDark)
         } else {
+            // First visit: match browser preference
             const prefersDark = window.matchMedia(
                 "(prefers-color-scheme: dark)",
             ).matches
@@ -86,49 +58,25 @@ export default function Home() {
         setIsLoaded(true)
     }, [])
 
-    const handleDarkModeChange = async () => {
-        await saveDiagramToStorage()
+    const toggleDarkMode = () => {
         const newValue = !darkMode
         setDarkMode(newValue)
         localStorage.setItem("next-ai-draw-io-dark-mode", String(newValue))
         document.documentElement.classList.toggle("dark", newValue)
+        // Reset so onDrawioLoad fires again after remount
         resetDrawioReady()
     }
 
-    const handleDrawioUiChange = async () => {
-        await saveDiagramToStorage()
-        const newUi = drawioUi === "min" ? "sketch" : "min"
-        localStorage.setItem("drawio-theme", newUi)
-        setDrawioUi(newUi)
-        resetDrawioReady()
-    }
-
-    // Check mobile - save diagram and reset draw.io before crossing breakpoint
-    const isInitialRenderRef = useRef(true)
+    // Check mobile
     useEffect(() => {
         const checkMobile = () => {
-            const newIsMobile = window.innerWidth < 768
-            // If crossing the breakpoint (not initial render), save diagram and reset draw.io
-            if (
-                !isInitialRenderRef.current &&
-                newIsMobile !== isMobileRef.current
-            ) {
-                // Save diagram before remounting (fire and forget)
-                saveDiagramToStorage().catch(() => {
-                    // Ignore timeout errors during resize
-                })
-                // Reset draw.io ready state so onLoad triggers again after remount
-                resetDrawioReady()
-            }
-            isMobileRef.current = newIsMobile
-            isInitialRenderRef.current = false
-            setIsMobile(newIsMobile)
+            setIsMobile(window.innerWidth < 768)
         }
 
         checkMobile()
         window.addEventListener("resize", checkMobile)
         return () => window.removeEventListener("resize", checkMobile)
-    }, [saveDiagramToStorage, resetDrawioReady])
+    }, [])
 
     const toggleChatPanel = () => {
         const panel = chatPanelRef.current
@@ -174,6 +122,7 @@ export default function Home() {
         <div className="h-screen bg-background relative overflow-hidden">
             <ResizablePanelGroup
                 id="main-panel-group"
+                key={isMobile ? "mobile" : "desktop"}
                 direction={isMobile ? "vertical" : "horizontal"}
                 className="h-full"
             >
@@ -187,12 +136,6 @@ export default function Home() {
                         className={`h-full relative ${
                             isMobile ? "p-1" : "p-2"
                         }`}
-                        onMouseEnter={() => {
-                            mouseOverDrawioRef.current = true
-                        }}
-                        onMouseLeave={() => {
-                            mouseOverDrawioRef.current = false
-                        }}
                     >
                         <div className="h-full rounded-xl overflow-hidden shadow-soft-lg border border-border/30">
                             {isLoaded ? (
@@ -201,7 +144,6 @@ export default function Home() {
                                     ref={drawioRef}
                                     onExport={handleDiagramExport}
                                     onLoad={onDrawioLoad}
-                                    onSave={handleDrawioSave}
                                     baseUrl={drawioBaseUrl}
                                     urlParameters={{
                                         ui: drawioUi,
@@ -225,7 +167,6 @@ export default function Home() {
 
                 {/* Chat Panel */}
                 <ResizablePanel
-                    key={isMobile ? "mobile" : "desktop"}
                     id="chat-panel"
                     ref={chatPanelRef}
                     defaultSize={isMobile ? 50 : 33}
@@ -241,9 +182,15 @@ export default function Home() {
                             isVisible={isChatVisible}
                             onToggleVisibility={toggleChatPanel}
                             drawioUi={drawioUi}
-                            onToggleDrawioUi={handleDrawioUiChange}
+                            onToggleDrawioUi={() => {
+                                const newUi =
+                                    drawioUi === "min" ? "sketch" : "min"
+                                localStorage.setItem("drawio-theme", newUi)
+                                setDrawioUi(newUi)
+                                resetDrawioReady()
+                            }}
                             darkMode={darkMode}
-                            onToggleDarkMode={handleDarkModeChange}
+                            onToggleDarkMode={toggleDarkMode}
                             isMobile={isMobile}
                             onCloseProtectionChange={setCloseProtection}
                         />

components/chat-example-panel.tsx

@@ -1,13 +1,6 @@
 "use client"
 
-import {
-    Cloud,
-    FileText,
-    GitBranch,
-    Palette,
-    Terminal,
-    Zap,
-} from "lucide-react"
+import { Cloud, FileText, GitBranch, Palette, Zap } from "lucide-react"
 
 interface ExampleCardProps {
     icon: React.ReactNode
@@ -115,33 +108,6 @@ export default function ExamplePanel({
 
     return (
         <div className="py-6 px-2 animate-fade-in">
-            {/* MCP Server Notice */}
-            <a
-                href="https://github.com/DayuanJiang/next-ai-draw-io/tree/main/packages/mcp-server"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="block mb-4 p-3 rounded-xl bg-gradient-to-r from-purple-500/10 to-blue-500/10 border border-purple-500/20 hover:border-purple-500/40 transition-colors group"
-            >
-                <div className="flex items-center gap-3">
-                    <div className="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center shrink-0">
-                        <Terminal className="w-4 h-4 text-purple-500" />
-                    </div>
-                    <div className="min-w-0">
-                        <div className="flex items-center gap-2">
-                            <span className="text-sm font-medium text-foreground group-hover:text-purple-500 transition-colors">
-                                MCP Server
-                            </span>
-                            <span className="px-1.5 py-0.5 text-[10px] font-semibold bg-purple-500 text-white rounded">
-                                PREVIEW
-                            </span>
-                        </div>
-                        <p className="text-xs text-muted-foreground">
-                            Use in Claude Desktop, VS Code & Cursor
-                        </p>
-                    </div>
-                </div>
-            </a>
-
             {/* Welcome section */}
             <div className="text-center mb-6">
                 <h2 className="text-lg font-semibold text-foreground mb-2">

components/chat-input.tsx

@@ -17,13 +17,7 @@ import { HistoryDialog } from "@/components/history-dialog"
 import { ResetWarningModal } from "@/components/reset-warning-modal"
 import { SaveDialog } from "@/components/save-dialog"
 import { Button } from "@/components/ui/button"
-import { Switch } from "@/components/ui/switch"
 import { Textarea } from "@/components/ui/textarea"
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipTrigger,
-} from "@/components/ui/tooltip"
 import { useDiagram } from "@/contexts/diagram-context"
 import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
 import { FilePreviewList } from "./file-preview-list"
@@ -135,8 +129,6 @@ interface ChatInputProps {
     onToggleHistory?: (show: boolean) => void
     sessionId?: string
     error?: Error | null
-    minimalStyle?: boolean
-    onMinimalStyleChange?: (value: boolean) => void
 }
 
 export function ChatInput({
@@ -152,19 +144,13 @@ export function ChatInput({
     onToggleHistory = () => {},
     sessionId,
     error = null,
-    minimalStyle = false,
-    onMinimalStyleChange = () => {},
 }: ChatInputProps) {
-    const {
-        diagramHistory,
-        saveDiagramToFile,
-        showSaveDialog,
-        setShowSaveDialog,
-    } = useDiagram()
+    const { diagramHistory, saveDiagramToFile } = useDiagram()
     const textareaRef = useRef<HTMLTextAreaElement>(null)
     const fileInputRef = useRef<HTMLInputElement>(null)
     const [isDragging, setIsDragging] = useState(false)
     const [showClearDialog, setShowClearDialog] = useState(false)
+    const [showSaveDialog, setShowSaveDialog] = useState(false)
 
     // Allow retry when there's an error (even if status is still "streaming" or "submitted")
     const isDisabled =
@@ -335,7 +321,7 @@ export function ChatInput({
                 {/* Action bar */}
                 <div className="flex items-center justify-between px-3 py-2 border-t border-border/50">
                     {/* Left actions */}
-                    <div className="flex items-center gap-1 overflow-x-hidden">
+                    <div className="flex items-center gap-1">
                         <ButtonWithTooltip
                             type="button"
                             variant="ghost"
@@ -357,36 +343,10 @@ export function ChatInput({
                             showHistory={showHistory}
                             onToggleHistory={onToggleHistory}
                         />
-
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <div className="flex items-center gap-1.5">
-                                    <Switch
-                                        id="minimal-style"
-                                        checked={minimalStyle}
-                                        onCheckedChange={onMinimalStyleChange}
-                                        className="scale-75"
-                                    />
-                                    <label
-                                        htmlFor="minimal-style"
-                                        className={`text-xs cursor-pointer select-none ${
-                                            minimalStyle
-                                                ? "text-primary font-medium"
-                                                : "text-muted-foreground"
-                                        }`}
-                                    >
-                                        {minimalStyle ? "Minimal" : "Styled"}
-                                    </label>
-                                </div>
-                            </TooltipTrigger>
-                            <TooltipContent side="top">
-                                Use minimal for faster generation (no colors)
-                            </TooltipContent>
-                        </Tooltip>
                     </div>
 
                     {/* Right actions */}
-                    <div className="flex items-center gap-1 overflow-hidden justify-end">
+                    <div className="flex items-center gap-1">
                         <ButtonWithTooltip
                             type="button"
                             variant="ghost"

components/chat-message-display.tsx

@@ -10,7 +10,9 @@ import {
     Cpu,
     FileCode,
     FileText,
+    Minus,
     Pencil,
+    Plus,
     RotateCcw,
     ThumbsDown,
     ThumbsUp,
@@ -27,37 +29,13 @@ import {
     ReasoningTrigger,
 } from "@/components/ai-elements/reasoning"
 import { ScrollArea } from "@/components/ui/scroll-area"
-import {
-    applyDiagramOperations,
-    convertToLegalXml,
-    isMxCellXmlComplete,
-    replaceNodes,
-    validateAndFixXml,
-} from "@/lib/utils"
+import { convertToLegalXml, replaceNodes, validateAndFixXml } from "@/lib/utils"
 import ExamplePanel from "./chat-example-panel"
 import { CodeBlock } from "./code-block"
 
-interface DiagramOperation {
-    type: "update" | "add" | "delete"
-    cell_id: string
-    new_xml?: string
-}
-
-// Helper to extract complete operations from streaming input
-function getCompleteOperations(
-    operations: DiagramOperation[] | undefined,
-): DiagramOperation[] {
-    if (!operations || !Array.isArray(operations)) return []
-    return operations.filter(
-        (op) =>
-            op &&
-            typeof op.type === "string" &&
-            ["update", "add", "delete"].includes(op.type) &&
-            typeof op.cell_id === "string" &&
-            op.cell_id.length > 0 &&
-            // delete doesn't need new_xml, update/add do
-            (op.type === "delete" || typeof op.new_xml === "string"),
-    )
+interface EditPair {
+    search: string
+    replace: string
 }
 
 // Tool part interface for type safety
@@ -65,44 +43,49 @@ interface ToolPartLike {
     type: string
     toolCallId: string
     state?: string
-    input?: {
-        xml?: string
-        operations?: DiagramOperation[]
-    } & Record<string, unknown>
+    input?: { xml?: string; edits?: EditPair[] } & Record<string, unknown>
     output?: string
 }
 
-function OperationsDisplay({ operations }: { operations: DiagramOperation[] }) {
+function EditDiffDisplay({ edits }: { edits: EditPair[] }) {
     return (
         <div className="space-y-3">
-            {operations.map((op, index) => (
+            {edits.map((edit, index) => (
                 <div
-                    key={`${op.type}-${op.cell_id}-${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">
-                        <span
-                            className={`text-[10px] font-medium uppercase tracking-wide ${
-                                op.type === "delete"
-                                    ? "text-red-600"
-                                    : op.type === "add"
-                                      ? "text-green-600"
-                                      : "text-blue-600"
-                            }`}
-                        >
-                            {op.type}
-                        </span>
-                        <span className="text-xs text-muted-foreground">
-                            cell_id: {op.cell_id}
+                        <span className="text-xs font-medium text-muted-foreground">
+                            Change {index + 1}
                         </span>
                     </div>
-                    {op.new_xml && (
+                    <div className="divide-y divide-border/30">
+                        {/* Search (old) */}
                         <div className="px-3 py-2">
-                            <pre className="text-[11px] font-mono text-foreground/80 bg-muted/30 rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all">
-                                {op.new_xml}
+                            <div className="flex items-center gap-1.5 mb-1.5">
+                                <Minus className="w-3 h-3 text-red-500" />
+                                <span className="text-[10px] font-medium text-red-600 uppercase tracking-wide">
+                                    Remove
+                                </span>
+                            </div>
+                            <pre className="text-[11px] font-mono text-red-700 bg-red-50 rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all">
+                                {edit.search}
                             </pre>
                         </div>
-                    )}
+                        {/* Replace (new) */}
+                        <div className="px-3 py-2">
+                            <div className="flex items-center gap-1.5 mb-1.5">
+                                <Plus className="w-3 h-3 text-green-500" />
+                                <span className="text-[10px] font-medium text-green-600 uppercase tracking-wide">
+                                    Add
+                                </span>
+                            </div>
+                            <pre className="text-[11px] font-mono text-green-700 bg-green-50 rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all">
+                                {edit.replace}
+                            </pre>
+                        </div>
+                    </div>
                 </div>
             ))}
         </div>
@@ -185,7 +168,6 @@ interface ChatMessageDisplayProps {
     setInput: (input: string) => void
     setFiles: (files: File[]) => void
     processedToolCallsRef: MutableRefObject<Set<string>>
-    editDiagramOriginalXmlRef: MutableRefObject<Map<string, string>>
     sessionId?: string
     onRegenerate?: (messageIndex: number) => void
     onEditMessage?: (messageIndex: number, newText: string) => void
@@ -197,7 +179,6 @@ export function ChatMessageDisplay({
     setInput,
     setFiles,
     processedToolCallsRef,
-    editDiagramOriginalXmlRef,
     sessionId,
     onRegenerate,
     onEditMessage,
@@ -207,22 +188,6 @@ export function ChatMessageDisplay({
     const messagesEndRef = useRef<HTMLDivElement>(null)
     const previousXML = useRef<string>("")
     const processedToolCalls = processedToolCallsRef
-    // Track the last processed XML per toolCallId to skip redundant processing during streaming
-    const lastProcessedXmlRef = useRef<Map<string, string>>(new Map())
-    // Debounce streaming diagram updates - store pending XML and timeout
-    const pendingXmlRef = useRef<string | null>(null)
-    const debounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
-        null,
-    )
-    const STREAMING_DEBOUNCE_MS = 150 // Only update diagram every 150ms during streaming
-    // Refs for edit_diagram streaming
-    const pendingEditRef = useRef<{
-        operations: DiagramOperation[]
-        toolCallId: string
-    } | null>(null)
-    const editDebounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
-        null,
-    )
     const [expandedTools, setExpandedTools] = useState<Record<string, boolean>>(
         {},
     )
@@ -323,14 +288,11 @@ export function ChatMessageDisplay({
                 const parseError = testDoc.querySelector("parsererror")
 
                 if (parseError) {
-                    // Use console.warn instead of console.error to avoid triggering
-                    // Next.js dev mode error overlay for expected streaming states
-                    // (partial XML during streaming is normal and will be fixed by subsequent updates)
+                    console.error(
+                        "[ChatMessageDisplay] Malformed XML detected - skipping update",
+                    )
+                    // Only show toast if this is the final XML (not during streaming)
                     if (showToast) {
-                        // Only log as error and show toast if this is the final XML
-                        console.error(
-                            "[ChatMessageDisplay] Malformed XML detected in final output",
-                        )
                         toast.error(
                             "AI generated invalid diagram XML. Please try regenerating.",
                         )
@@ -402,12 +364,7 @@ export function ChatMessageDisplay({
     }, [editingMessageId])
 
     useEffect(() => {
-        // Only process the last message for streaming performance
-        // Previous messages are already processed and won't change
-        const messagesToProcess =
-            messages.length > 0 ? [messages[messages.length - 1]] : []
-
-        messagesToProcess.forEach((message) => {
+        messages.forEach((message) => {
             if (message.parts) {
                 message.parts.forEach((part) => {
                     if (part.type?.startsWith("tool-")) {
@@ -426,194 +383,26 @@ export function ChatMessageDisplay({
                             input?.xml
                         ) {
                             const xml = input.xml as string
-
-                            // Skip if XML hasn't changed since last processing
-                            const lastXml =
-                                lastProcessedXmlRef.current.get(toolCallId)
-                            if (lastXml === xml) {
-                                return // Skip redundant processing
-                            }
-
                             if (
                                 state === "input-streaming" ||
                                 state === "input-available"
                             ) {
-                                // Debounce streaming updates - queue the XML and process after delay
-                                pendingXmlRef.current = xml
-
-                                if (!debounceTimeoutRef.current) {
-                                    // No pending timeout - set one up
-                                    debounceTimeoutRef.current = setTimeout(
-                                        () => {
-                                            const pendingXml =
-                                                pendingXmlRef.current
-                                            debounceTimeoutRef.current = null
-                                            pendingXmlRef.current = null
-                                            if (pendingXml) {
-                                                handleDisplayChart(
-                                                    pendingXml,
-                                                    false,
-                                                )
-                                                lastProcessedXmlRef.current.set(
-                                                    toolCallId,
-                                                    pendingXml,
-                                                )
-                                            }
-                                        },
-                                        STREAMING_DEBOUNCE_MS,
-                                    )
-                                }
+                                // During streaming, don't show toast (XML may be incomplete)
+                                handleDisplayChart(xml, false)
                             } else if (
                                 state === "output-available" &&
                                 !processedToolCalls.current.has(toolCallId)
                             ) {
-                                // Final output - process immediately (clear any pending debounce)
-                                if (debounceTimeoutRef.current) {
-                                    clearTimeout(debounceTimeoutRef.current)
-                                    debounceTimeoutRef.current = null
-                                    pendingXmlRef.current = null
-                                }
                                 // Show toast only if final XML is malformed
                                 handleDisplayChart(xml, true)
                                 processedToolCalls.current.add(toolCallId)
-                                // Clean up the ref entry - tool is complete, no longer needed
-                                lastProcessedXmlRef.current.delete(toolCallId)
-                            }
-                        }
-
-                        // Handle edit_diagram streaming - apply operations incrementally for preview
-                        // Uses shared editDiagramOriginalXmlRef to coordinate with tool handler
-                        if (
-                            part.type === "tool-edit_diagram" &&
-                            input?.operations
-                        ) {
-                            const completeOps = getCompleteOperations(
-                                input.operations as DiagramOperation[],
-                            )
-
-                            if (completeOps.length === 0) return
-
-                            // Capture original XML when streaming starts (store in shared ref)
-                            if (
-                                !editDiagramOriginalXmlRef.current.has(
-                                    toolCallId,
-                                )
-                            ) {
-                                if (!chartXML) {
-                                    console.warn(
-                                        "[edit_diagram streaming] No chart XML available",
-                                    )
-                                    return
-                                }
-                                editDiagramOriginalXmlRef.current.set(
-                                    toolCallId,
-                                    chartXML,
-                                )
-                            }
-
-                            const originalXml =
-                                editDiagramOriginalXmlRef.current.get(
-                                    toolCallId,
-                                )
-                            if (!originalXml) return
-
-                            // Skip if no change from last processed state
-                            const lastCount = lastProcessedXmlRef.current.get(
-                                toolCallId + "-opCount",
-                            )
-                            if (lastCount === String(completeOps.length)) return
-
-                            if (
-                                state === "input-streaming" ||
-                                state === "input-available"
-                            ) {
-                                // Queue the operations for debounced processing
-                                pendingEditRef.current = {
-                                    operations: completeOps,
-                                    toolCallId,
-                                }
-
-                                if (!editDebounceTimeoutRef.current) {
-                                    editDebounceTimeoutRef.current = setTimeout(
-                                        () => {
-                                            const pending =
-                                                pendingEditRef.current
-                                            editDebounceTimeoutRef.current =
-                                                null
-                                            pendingEditRef.current = null
-
-                                            if (pending) {
-                                                const origXml =
-                                                    editDiagramOriginalXmlRef.current.get(
-                                                        pending.toolCallId,
-                                                    )
-                                                if (!origXml) return
-
-                                                try {
-                                                    const {
-                                                        result: editedXml,
-                                                    } = applyDiagramOperations(
-                                                        origXml,
-                                                        pending.operations,
-                                                    )
-                                                    handleDisplayChart(
-                                                        editedXml,
-                                                        false,
-                                                    )
-                                                    lastProcessedXmlRef.current.set(
-                                                        pending.toolCallId +
-                                                            "-opCount",
-                                                        String(
-                                                            pending.operations
-                                                                .length,
-                                                        ),
-                                                    )
-                                                } catch (e) {
-                                                    console.warn(
-                                                        `[edit_diagram streaming] Operation failed:`,
-                                                        e instanceof Error
-                                                            ? e.message
-                                                            : e,
-                                                    )
-                                                }
-                                            }
-                                        },
-                                        STREAMING_DEBOUNCE_MS,
-                                    )
-                                }
-                            } else if (
-                                state === "output-available" &&
-                                !processedToolCalls.current.has(toolCallId)
-                            ) {
-                                // Final state - cleanup streaming refs (tool handler does final application)
-                                if (editDebounceTimeoutRef.current) {
-                                    clearTimeout(editDebounceTimeoutRef.current)
-                                    editDebounceTimeoutRef.current = null
-                                }
-                                lastProcessedXmlRef.current.delete(
-                                    toolCallId + "-opCount",
-                                )
-                                processedToolCalls.current.add(toolCallId)
-                                // Note: Don't delete editDiagramOriginalXmlRef here - tool handler needs it
                             }
                         }
                     }
                 })
             }
         })
-
-        // Cleanup: clear any pending debounce timeout on unmount
-        return () => {
-            if (debounceTimeoutRef.current) {
-                clearTimeout(debounceTimeoutRef.current)
-                debounceTimeoutRef.current = null
-            }
-            if (editDebounceTimeoutRef.current) {
-                clearTimeout(editDebounceTimeoutRef.current)
-                editDebounceTimeoutRef.current = null
-            }
-        }
-    }, [messages, handleDisplayChart, chartXML])
+    }, [messages, handleDisplayChart])
 
     const renderToolPart = (part: ToolPartLike) => {
         const callId = part.toolCallId
@@ -662,23 +451,11 @@ export function ChatMessageDisplay({
                                 Complete
                             </span>
                         )}
-                        {state === "output-error" &&
-                            (() => {
-                                // Check if this is a truncation (incomplete XML) vs real error
-                                const isTruncated =
-                                    (toolName === "display_diagram" ||
-                                        toolName === "append_diagram") &&
-                                    !isMxCellXmlComplete(input?.xml)
-                                return isTruncated ? (
-                                    <span className="text-xs font-medium text-yellow-600 bg-yellow-50 px-2 py-0.5 rounded-full">
-                                        Truncated
-                                    </span>
-                                ) : (
-                                    <span className="text-xs font-medium text-red-600 bg-red-50 px-2 py-0.5 rounded-full">
-                                        Error
-                                    </span>
-                                )
-                            })()}
+                        {state === "output-error" && (
+                            <span className="text-xs font-medium text-red-600 bg-red-50 px-2 py-0.5 rounded-full">
+                                Error
+                            </span>
+                        )}
                         {input && Object.keys(input).length > 0 && (
                             <button
                                 type="button"
@@ -699,9 +476,9 @@ export function ChatMessageDisplay({
                         {typeof input === "object" && input.xml ? (
                             <CodeBlock code={input.xml} language="xml" />
                         ) : typeof input === "object" &&
-                          input.operations &&
-                          Array.isArray(input.operations) ? (
-                            <OperationsDisplay operations={input.operations} />
+                          input.edits &&
+                          Array.isArray(input.edits) ? (
+                            <EditDiffDisplay edits={input.edits} />
                         ) : typeof input === "object" &&
                           Object.keys(input).length > 0 ? (
                             <CodeBlock
@@ -711,23 +488,11 @@ export function ChatMessageDisplay({
                         ) : null}
                     </div>
                 )}
-                {output &&
-                    state === "output-error" &&
-                    (() => {
-                        const isTruncated =
-                            (toolName === "display_diagram" ||
-                                toolName === "append_diagram") &&
-                            !isMxCellXmlComplete(input?.xml)
-                        return (
-                            <div
-                                className={`px-4 py-3 border-t border-border/40 text-sm ${isTruncated ? "text-yellow-600" : "text-red-600"}`}
-                            >
-                                {isTruncated
-                                    ? "Output truncated due to length limits. Try a simpler request or increase the maxOutputLength."
-                                    : output}
-                            </div>
-                        )
-                    })()}
+                {output && state === "output-error" && (
+                    <div className="px-4 py-3 border-t border-border/40 text-sm text-red-600">
+                        {output}
+                    </div>
+                )}
             </div>
         )
     }

components/chat-panel.tsx

@@ -26,7 +26,7 @@ import { findCachedResponse } from "@/lib/cached-responses"
 import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
 import { type FileData, useFileProcessor } from "@/lib/use-file-processor"
 import { useQuotaManager } from "@/lib/use-quota-manager"
-import { formatXML, isMxCellXmlComplete, wrapWithMxFile } from "@/lib/utils"
+import { formatXML, wrapWithMxFile } from "@/lib/utils"
 import { ChatMessageDisplay } from "./chat-message-display"
 
 // localStorage keys for persistence
@@ -35,15 +35,11 @@ const STORAGE_XML_SNAPSHOTS_KEY = "next-ai-draw-io-xml-snapshots"
 const STORAGE_SESSION_ID_KEY = "next-ai-draw-io-session-id"
 export const STORAGE_DIAGRAM_XML_KEY = "next-ai-draw-io-diagram-xml"
 
-// sessionStorage keys
-const SESSION_STORAGE_INPUT_KEY = "next-ai-draw-io-input"
-
 // Type for message parts (tool calls and their states)
 interface MessagePart {
     type: string
     state?: string
     toolName?: string
-    input?: { xml?: string; [key: string]: unknown }
     [key: string]: unknown
 }
 
@@ -71,7 +67,7 @@ const MAX_AUTO_RETRY_COUNT = 1
 
 /**
  * Check if auto-resubmit should happen based on tool errors.
- * Only checks the LAST tool part (most recent tool call), not all tool parts.
+ * Does NOT handle retry count or quota - those are handled by the caller.
  */
 function hasToolErrors(messages: ChatMessage[]): boolean {
     const lastMessage = messages[messages.length - 1]
@@ -88,8 +84,7 @@ function hasToolErrors(messages: ChatMessage[]): boolean {
         return false
     }
 
-    const lastToolPart = toolParts[toolParts.length - 1]
-    return lastToolPart?.state === TOOL_ERROR_STATE
+    return toolParts.some((part) => part.state === TOOL_ERROR_STATE)
 }
 
 export default function ChatPanel({
@@ -109,6 +104,7 @@ export default function ChatPanel({
         resolverRef,
         chartXML,
         clearDiagram,
+        isDrawioReady,
     } = useDiagram()
 
     const onFetchChart = (saveToHistory = true) => {
@@ -148,15 +144,6 @@ export default function ChatPanel({
     const [dailyTokenLimit, setDailyTokenLimit] = useState(0)
     const [tpmLimit, setTpmLimit] = useState(0)
     const [showNewChatDialog, setShowNewChatDialog] = useState(false)
-    const [minimalStyle, setMinimalStyle] = useState(false)
-
-    // Restore input from sessionStorage on mount (when ChatPanel remounts due to key change)
-    useEffect(() => {
-        const savedInput = sessionStorage.getItem(SESSION_STORAGE_INPUT_KEY)
-        if (savedInput) {
-            setInput(savedInput)
-        }
-    }, [])
 
     // Check config on mount
     useEffect(() => {
@@ -205,23 +192,9 @@ export default function ChatPanel({
     // Ref to track consecutive auto-retry count (reset on user action)
     const autoRetryCountRef = useRef(0)
 
-    // Ref to accumulate partial XML when output is truncated due to maxOutputTokens
-    // When partialXmlRef.current.length > 0, we're in continuation mode
-    const partialXmlRef = useRef<string>("")
-
     // Persist processed tool call IDs so collapsing the chat doesn't replay old tool outputs
     const processedToolCallsRef = useRef<Set<string>>(new Set())
 
-    // Store original XML for edit_diagram streaming - shared between streaming preview and tool handler
-    // Key: toolCallId, Value: original XML before any operations applied
-    const editDiagramOriginalXmlRef = useRef<Map<string, string>>(new Map())
-
-    // Debounce timeout for localStorage writes (prevents blocking during streaming)
-    const localStorageDebounceRef = useRef<ReturnType<
-        typeof setTimeout
-    > | null>(null)
-    const LOCAL_STORAGE_DEBOUNCE_MS = 1000 // Save at most once per second
-
     const {
         messages,
         sendMessage,
@@ -243,50 +216,14 @@ export default function ChatPanel({
 
             if (toolCall.toolName === "display_diagram") {
                 const { xml } = toolCall.input as { xml: string }
-
-                // DEBUG: Log raw input to diagnose false truncation detection
-                console.log(
-                    "[display_diagram] XML ending (last 100 chars):",
-                    xml.slice(-100),
-                )
-                console.log("[display_diagram] XML length:", xml.length)
-
-                // Check if XML is truncated (incomplete mxCell indicates truncated output)
-                const isTruncated = !isMxCellXmlComplete(xml)
-                console.log("[display_diagram] isTruncated:", isTruncated)
-
-                if (isTruncated) {
-                    // Store the partial XML for continuation via append_diagram
-                    partialXmlRef.current = xml
-
-                    // Tell LLM to use append_diagram to continue
-                    const partialEnding = partialXmlRef.current.slice(-500)
-                    addToolOutput({
-                        tool: "display_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        state: "output-error",
-                        errorText: `Output was truncated due to length limits. Use the append_diagram tool to continue.
-
-Your output ended with:
-\`\`\`
-${partialEnding}
-\`\`\`
-
-NEXT STEP: Call append_diagram with the continuation XML.
-- Do NOT include wrapper tags or root cells (id="0", id="1")
-- Start from EXACTLY where you stopped
-- Complete all remaining mxCell elements`,
-                    })
-                    return
+                if (DEBUG) {
+                    console.log(
+                        `[display_diagram] Received XML length: ${xml.length}`,
+                    )
                 }
 
-                // Complete XML received - use it directly
-                // (continuation is now handled via append_diagram tool)
-                const finalXml = xml
-                partialXmlRef.current = "" // Reset any partial from previous truncation
-
                 // Wrap raw XML with full mxfile structure for draw.io
-                const fullXml = wrapWithMxFile(finalXml)
+                const fullXml = wrapWithMxFile(xml)
 
                 // loadDiagram validates and returns error if invalid
                 const validationError = onDisplayChart(fullXml)
@@ -312,7 +249,7 @@ Please fix the XML issues and call display_diagram again with corrected XML.
 
 Your failed XML:
 \`\`\`xml
-${finalXml}
+${xml}
 \`\`\``,
                     })
                 } else {
@@ -334,69 +271,38 @@ ${finalXml}
                     }
                 }
             } else if (toolCall.toolName === "edit_diagram") {
-                const { operations } = toolCall.input as {
-                    operations: Array<{
-                        type: "update" | "add" | "delete"
-                        cell_id: string
-                        new_xml?: string
-                    }>
+                const { edits } = toolCall.input as {
+                    edits: Array<{ search: string; replace: string }>
                 }
 
                 let currentXml = ""
                 try {
-                    // Use the original XML captured during streaming (shared with chat-message-display)
-                    // This ensures we apply operations to the same base XML that streaming used
-                    const originalXml = editDiagramOriginalXmlRef.current.get(
-                        toolCall.toolCallId,
-                    )
-                    if (originalXml) {
-                        currentXml = originalXml
-                    } else {
-                        // Fallback: use chartXML from ref if streaming didn't capture original
-                        const cachedXML = chartXMLRef.current
-                        if (cachedXML) {
-                            currentXml = cachedXML
-                        } else {
-                            // Last resort: export from iframe
-                            currentXml = await onFetchChart(false)
-                        }
-                    }
-
-                    const { applyDiagramOperations } = await import(
-                        "@/lib/utils"
-                    )
-                    const { result: editedXml, errors } =
-                        applyDiagramOperations(currentXml, operations)
-
-                    // Check for operation errors
-                    if (errors.length > 0) {
-                        const errorMessages = errors
-                            .map(
-                                (e) =>
-                                    `- ${e.type} on cell_id="${e.cellId}": ${e.message}`,
-                            )
-                            .join("\n")
-
-                        addToolOutput({
-                            tool: "edit_diagram",
-                            toolCallId: toolCall.toolCallId,
-                            state: "output-error",
-                            errorText: `Some operations failed:\n${errorMessages}
-
-Current diagram XML:
-\`\`\`xml
-${currentXml}
-\`\`\`
-
-Please check the cell IDs and retry.`,
-                        })
-                        // Clean up the shared original XML ref
-                        editDiagramOriginalXmlRef.current.delete(
-                            toolCall.toolCallId,
+                    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,
                         )
-                        return
                     }
 
+                    const { replaceXMLParts } = await import("@/lib/utils")
+                    const editedXml = replaceXMLParts(currentXml, edits)
+
                     // loadDiagram validates and returns error if invalid
                     const validationError = onDisplayChart(editedXml)
                     if (validationError) {
@@ -415,30 +321,24 @@ Current diagram XML:
 ${currentXml}
 \`\`\`
 
-Please fix the operations to avoid structural issues.`,
+Please fix the edit to avoid structural issues (e.g., duplicate IDs, invalid references).`,
                         })
-                        // Clean up the shared original XML ref
-                        editDiagramOriginalXmlRef.current.delete(
-                            toolCall.toolCallId,
-                        )
                         return
                     }
                     onExport()
                     addToolOutput({
                         tool: "edit_diagram",
                         toolCallId: toolCall.toolCallId,
-                        output: `Successfully applied ${operations.length} operation(s) to the diagram.`,
+                        output: `Successfully applied ${edits.length} edit(s) to the diagram.`,
                     })
-                    // Clean up the shared original XML ref
-                    editDiagramOriginalXmlRef.current.delete(
-                        toolCall.toolCallId,
-                    )
+                    console.log("[edit_diagram] Success")
                 } catch (error) {
                     console.error("[edit_diagram] Failed:", error)
 
                     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,
@@ -450,92 +350,7 @@ Current diagram XML:
 ${currentXml || "No XML available"}
 \`\`\`
 
-Please check cell IDs and retry, or use display_diagram to regenerate.`,
-                    })
-                    // Clean up the shared original XML ref even on error
-                    editDiagramOriginalXmlRef.current.delete(
-                        toolCall.toolCallId,
-                    )
-                }
-            } else if (toolCall.toolName === "append_diagram") {
-                const { xml } = toolCall.input as { xml: string }
-
-                // Detect if LLM incorrectly started fresh instead of continuing
-                // LLM should only output bare mxCells now, so wrapper tags indicate error
-                const trimmed = xml.trim()
-                const isFreshStart =
-                    trimmed.startsWith("<mxGraphModel") ||
-                    trimmed.startsWith("<root") ||
-                    trimmed.startsWith("<mxfile") ||
-                    trimmed.startsWith('<mxCell id="0"') ||
-                    trimmed.startsWith('<mxCell id="1"')
-
-                if (isFreshStart) {
-                    addToolOutput({
-                        tool: "append_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        state: "output-error",
-                        errorText: `ERROR: You started fresh with wrapper tags. Do NOT include wrapper tags or root cells (id="0", id="1").
-
-Continue from EXACTLY where the partial ended:
-\`\`\`
-${partialXmlRef.current.slice(-500)}
-\`\`\`
-
-Start your continuation with the NEXT character after where it stopped.`,
-                    })
-                    return
-                }
-
-                // Append to accumulated XML
-                partialXmlRef.current += xml
-
-                // Check if XML is now complete (last mxCell is complete)
-                const isComplete = isMxCellXmlComplete(partialXmlRef.current)
-
-                if (isComplete) {
-                    // Wrap and display the complete diagram
-                    const finalXml = partialXmlRef.current
-                    partialXmlRef.current = "" // Reset
-
-                    const fullXml = wrapWithMxFile(finalXml)
-                    const validationError = onDisplayChart(fullXml)
-
-                    if (validationError) {
-                        addToolOutput({
-                            tool: "append_diagram",
-                            toolCallId: toolCall.toolCallId,
-                            state: "output-error",
-                            errorText: `Validation error after assembly: ${validationError}
-
-Assembled XML:
-\`\`\`xml
-${finalXml.substring(0, 2000)}...
-\`\`\`
-
-Please use display_diagram with corrected XML.`,
-                        })
-                    } else {
-                        addToolOutput({
-                            tool: "append_diagram",
-                            toolCallId: toolCall.toolCallId,
-                            output: "Diagram assembly complete and displayed successfully.",
-                        })
-                    }
-                } else {
-                    // Still incomplete - signal to continue
-                    addToolOutput({
-                        tool: "append_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        state: "output-error",
-                        errorText: `XML still incomplete (mxCell not closed). Call append_diagram again to continue.
-
-Current ending:
-\`\`\`
-${partialXmlRef.current.slice(-500)}
-\`\`\`
-
-Continue from EXACTLY where you stopped.`,
+Please retry with an adjusted search pattern or use display_diagram if retries are exhausted.`,
                     })
                 }
             }
@@ -544,32 +359,6 @@ Continue from EXACTLY where you stopped.`,
             // 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)
-                // Debug: Log messages structure when error occurs
-                console.log("[onError] messages count:", messages.length)
-                messages.forEach((msg, idx) => {
-                    console.log(`[onError] Message ${idx}:`, {
-                        role: msg.role,
-                        partsCount: msg.parts?.length,
-                    })
-                    if (msg.parts) {
-                        msg.parts.forEach((part: any, partIdx: number) => {
-                            console.log(
-                                `[onError]   Part ${partIdx}:`,
-                                JSON.stringify({
-                                    type: part.type,
-                                    toolName: part.toolName,
-                                    hasInput: !!part.input,
-                                    inputType: typeof part.input,
-                                    inputKeys:
-                                        part.input &&
-                                        typeof part.input === "object"
-                                            ? Object.keys(part.input)
-                                            : null,
-                                }),
-                            )
-                        })
-                    }
-                })
             }
 
             // Translate technical errors into user-friendly messages
@@ -582,12 +371,6 @@ Continue from EXACTLY where you stopped.`,
                 friendlyMessage = "Network error. Please check your connection."
             }
 
-            // Truncated tool input error (model output limit too low)
-            if (friendlyMessage.includes("toolUse.input is invalid")) {
-                friendlyMessage =
-                    "Output was truncated before the diagram could be generated. Try a simpler request or increase the maxOutputLength."
-            }
-
             // Translate image not supported error
             if (friendlyMessage.includes("image content block")) {
                 friendlyMessage = "This model doesn't support image input."
@@ -615,11 +398,6 @@ Continue from EXACTLY where you stopped.`,
             const metadata = message?.metadata as
                 | Record<string, unknown>
                 | undefined
-
-            // DEBUG: Log finish reason to diagnose truncation
-            console.log("[onFinish] finishReason:", metadata?.finishReason)
-            console.log("[onFinish] metadata:", metadata)
-
             if (metadata) {
                 // Use Number.isFinite to guard against NaN (typeof NaN === 'number' is true)
                 const inputTokens = Number.isFinite(metadata.inputTokens)
@@ -636,55 +414,65 @@ Continue from EXACTLY where you stopped.`,
             }
         },
         sendAutomaticallyWhen: ({ messages }) => {
-            const isInContinuationMode = partialXmlRef.current.length > 0
-
             const shouldRetry = hasToolErrors(
                 messages as unknown as ChatMessage[],
             )
 
             if (!shouldRetry) {
-                // No error, reset retry count and clear state
+                // No error, reset retry count
                 autoRetryCountRef.current = 0
-                partialXmlRef.current = ""
+                if (DEBUG) {
+                    console.log("[sendAutomaticallyWhen] No errors, stopping")
+                }
                 return false
             }
 
-            // Continuation mode: unlimited retries (truncation continuation, not real errors)
-            // Server limits to 5 steps via stepCountIs(5)
-            if (isInContinuationMode) {
-                // Don't count against retry limit for continuation
-                // Quota checks still apply below
-            } else {
-                // Regular error: check retry count limit
-                if (autoRetryCountRef.current >= MAX_AUTO_RETRY_COUNT) {
-                    toast.error(
-                        `Auto-retry limit reached (${MAX_AUTO_RETRY_COUNT}). Please try again manually.`,
+            // Check retry count limit
+            if (autoRetryCountRef.current >= MAX_AUTO_RETRY_COUNT) {
+                if (DEBUG) {
+                    console.log(
+                        `[sendAutomaticallyWhen] Max retry count (${MAX_AUTO_RETRY_COUNT}) reached, stopping`,
                     )
-                    autoRetryCountRef.current = 0
-                    partialXmlRef.current = ""
-                    return false
                 }
-                // Increment retry count for actual errors
-                autoRetryCountRef.current++
+                toast.error(
+                    `Auto-retry limit reached (${MAX_AUTO_RETRY_COUNT}). Please try again manually.`,
+                )
+                autoRetryCountRef.current = 0
+                return false
             }
 
             // Check quota limits before auto-retry
             const tokenLimitCheck = quotaManager.checkTokenLimit()
             if (!tokenLimitCheck.allowed) {
+                if (DEBUG) {
+                    console.log(
+                        "[sendAutomaticallyWhen] Token limit exceeded, stopping",
+                    )
+                }
                 quotaManager.showTokenLimitToast(tokenLimitCheck.used)
                 autoRetryCountRef.current = 0
-                partialXmlRef.current = ""
                 return false
             }
 
             const tpmCheck = quotaManager.checkTPMLimit()
             if (!tpmCheck.allowed) {
+                if (DEBUG) {
+                    console.log(
+                        "[sendAutomaticallyWhen] TPM limit exceeded, stopping",
+                    )
+                }
                 quotaManager.showTPMLimitToast()
                 autoRetryCountRef.current = 0
-                partialXmlRef.current = ""
                 return false
             }
 
+            // Increment retry count and allow retry
+            autoRetryCountRef.current++
+            if (DEBUG) {
+                console.log(
+                    `[sendAutomaticallyWhen] Retrying (${autoRetryCountRef.current}/${MAX_AUTO_RETRY_COUNT})`,
+                )
+            }
             return true
         },
     })
@@ -725,42 +513,68 @@ Continue from EXACTLY where you stopped.`,
             }
         } catch (error) {
             console.error("Failed to restore from localStorage:", error)
-            // On complete failure, clear storage to allow recovery
-            localStorage.removeItem(STORAGE_MESSAGES_KEY)
-            localStorage.removeItem(STORAGE_XML_SNAPSHOTS_KEY)
-            toast.error("Session data was corrupted. Starting fresh.")
         }
     }, [setMessages])
 
-    // Save messages to localStorage whenever they change (debounced to prevent blocking during streaming)
+    // Restore diagram XML when DrawIO becomes ready
+    const hasDiagramRestoredRef = useRef(false)
+    const [canSaveDiagram, setCanSaveDiagram] = useState(false)
+    useEffect(() => {
+        // Reset restore flag when DrawIO is not ready (e.g., theme/UI change remounts it)
+        if (!isDrawioReady) {
+            hasDiagramRestoredRef.current = false
+            setCanSaveDiagram(false)
+            return
+        }
+        if (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
-
-        // Clear any pending save
-        if (localStorageDebounceRef.current) {
-            clearTimeout(localStorageDebounceRef.current)
-        }
-
-        // Debounce: save after 1 second of no changes
-        localStorageDebounceRef.current = setTimeout(() => {
-            try {
-                localStorage.setItem(
-                    STORAGE_MESSAGES_KEY,
-                    JSON.stringify(messages),
-                )
-            } catch (error) {
-                console.error("Failed to save messages to localStorage:", error)
-            }
-        }, LOCAL_STORAGE_DEBOUNCE_MS)
-
-        // Cleanup on unmount
-        return () => {
-            if (localStorageDebounceRef.current) {
-                clearTimeout(localStorageDebounceRef.current)
-            }
+        try {
+            localStorage.setItem(STORAGE_MESSAGES_KEY, JSON.stringify(messages))
+        } catch (error) {
+            console.error("Failed to save messages to localStorage:", error)
         }
     }, [messages])
 
+    // Save diagram XML to localStorage whenever it changes
+    useEffect(() => {
+        if (!canSaveDiagram) return
+        if (chartXML && chartXML.length > 300) {
+            localStorage.setItem(STORAGE_DIAGRAM_XML_KEY, chartXML)
+        }
+    }, [chartXML, canSaveDiagram])
+
     // Save XML snapshots to localStorage whenever they change
     const saveXmlSnapshots = useCallback(() => {
         try {
@@ -860,7 +674,6 @@ Continue from EXACTLY where you stopped.`,
                         },
                     ] as any)
                     setInput("")
-                    sessionStorage.removeItem(SESSION_STORAGE_INPUT_KEY)
                     setFiles([])
                     return
                 }
@@ -908,7 +721,6 @@ Continue from EXACTLY where you stopped.`,
 
                 // Token count is tracked in onFinish with actual server usage
                 setInput("")
-                sessionStorage.removeItem(SESSION_STORAGE_INPUT_KEY)
                 setFiles([])
             } catch (error) {
                 console.error("Error fetching chart data:", error)
@@ -931,7 +743,6 @@ Continue from EXACTLY where you stopped.`,
             localStorage.removeItem(STORAGE_XML_SNAPSHOTS_KEY)
             localStorage.removeItem(STORAGE_DIAGRAM_XML_KEY)
             localStorage.setItem(STORAGE_SESSION_ID_KEY, newSessionId)
-            sessionStorage.removeItem(SESSION_STORAGE_INPUT_KEY)
             toast.success("Started a fresh chat")
         } catch (error) {
             console.error("Failed to clear localStorage:", error)
@@ -946,14 +757,9 @@ Continue from EXACTLY where you stopped.`,
     const handleInputChange = (
         e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
     ) => {
-        saveInputToSessionStorage(e.target.value)
         setInput(e.target.value)
     }
 
-    const saveInputToSessionStorage = (input: string) => {
-        sessionStorage.setItem(SESSION_STORAGE_INPUT_KEY, input)
-    }
-
     // Helper functions for message actions (regenerate/edit)
     // Extract previous XML snapshot before a given message index
     const getPreviousXml = (beforeIndex: number): string => {
@@ -1011,9 +817,8 @@ Continue from EXACTLY where you stopped.`,
         previousXml: string,
         sessionId: string,
     ) => {
-        // Reset all retry/continuation state on user-initiated message
+        // Reset auto-retry count on user-initiated message
         autoRetryCountRef.current = 0
-        partialXmlRef.current = ""
 
         const config = getAIConfig()
 
@@ -1033,9 +838,6 @@ Continue from EXACTLY where you stopped.`,
                         }),
                         ...(config.aiModel && { "x-ai-model": config.aiModel }),
                     }),
-                    ...(minimalStyle && {
-                        "x-minimal-style": "true",
-                    }),
                 },
             },
         )
@@ -1229,14 +1031,14 @@ Continue from EXACTLY where you stopped.`,
                 className={`${isMobile ? "px-3 py-2" : "px-5 py-4"} border-b border-border/50`}
             >
                 <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2 overflow-x-hidden">
+                    <div className="flex items-center gap-2">
                         <div className="flex items-center gap-2">
                             <Image
                                 src="/favicon.ico"
                                 alt="Next AI Drawio"
                                 width={isMobile ? 24 : 28}
                                 height={isMobile ? 24 : 28}
-                                className="rounded flex-shrink-0"
+                                className="rounded"
                             />
                             <h1
                                 className={`${isMobile ? "text-sm" : "text-base"} font-semibold tracking-tight whitespace-nowrap`}
@@ -1271,7 +1073,7 @@ Continue from EXACTLY where you stopped.`,
                             </Link>
                         )}
                     </div>
-                    <div className="flex items-center gap-1 justify-end overflow-x-hidden">
+                    <div className="flex items-center gap-1">
                         <ButtonWithTooltip
                             tooltipContent="Start fresh chat"
                             variant="ghost"
@@ -1327,7 +1129,6 @@ Continue from EXACTLY where you stopped.`,
                     setInput={setInput}
                     setFiles={handleFileChange}
                     processedToolCallsRef={processedToolCallsRef}
-                    editDiagramOriginalXmlRef={editDiagramOriginalXmlRef}
                     sessionId={sessionId}
                     onRegenerate={handleRegenerate}
                     status={status}
@@ -1352,8 +1153,6 @@ Continue from EXACTLY where you stopped.`,
                     onToggleHistory={setShowHistory}
                     sessionId={sessionId}
                     error={error}
-                    minimalStyle={minimalStyle}
-                    onMinimalStyleChange={setMinimalStyle}
                 />
             </footer>
 

components/save-dialog.tsx

@@ -5,7 +5,6 @@ import { Button } from "@/components/ui/button"
 import {
     Dialog,
     DialogContent,
-    DialogDescription,
     DialogFooter,
     DialogHeader,
     DialogTitle,
@@ -73,9 +72,6 @@ export function SaveDialog({
             <DialogContent className="sm:max-w-md">
                 <DialogHeader>
                     <DialogTitle>Save Diagram</DialogTitle>
-                    <DialogDescription>
-                        Choose a format and filename to save your diagram.
-                    </DialogDescription>
                 </DialogHeader>
                 <div className="space-y-4">
                     <div className="space-y-2">

contexts/diagram-context.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import type React from "react"
-import { createContext, useContext, useEffect, useRef, useState } from "react"
+import { createContext, useContext, useRef, useState } from "react"
 import type { DrawIoEmbedRef } from "react-drawio"
 import { STORAGE_DIAGRAM_XML_KEY } from "@/components/chat-panel"
 import type { ExportFormat } from "@/components/save-dialog"
@@ -23,12 +23,9 @@ interface DiagramContextType {
         format: ExportFormat,
         sessionId?: string,
     ) => void
-    saveDiagramToStorage: () => Promise<void>
     isDrawioReady: boolean
     onDrawioLoad: () => void
     resetDrawioReady: () => void
-    showSaveDialog: boolean
-    setShowSaveDialog: (show: boolean) => void
 }
 
 const DiagramContext = createContext<DiagramContextType | undefined>(undefined)
@@ -40,15 +37,11 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         { svg: string; xml: string }[]
     >([])
     const [isDrawioReady, setIsDrawioReady] = useState(false)
-    const [canSaveDiagram, setCanSaveDiagram] = useState(false)
-    const [showSaveDialog, setShowSaveDialog] = 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)
-    // Track if diagram has been restored from localStorage
-    const hasDiagramRestoredRef = useRef<boolean>(false)
 
     const onDrawioLoad = () => {
         // Only set ready state once to prevent infinite loops
@@ -64,48 +57,6 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         setIsDrawioReady(false)
     }
 
-    // Restore diagram XML when DrawIO becomes ready
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- loadDiagram uses refs internally and is stable
-    useEffect(() => {
-        // Reset restore flag when DrawIO is not ready (e.g., theme/UI change remounts it)
-        if (!isDrawioReady) {
-            hasDiagramRestoredRef.current = false
-            setCanSaveDiagram(false)
-            return
-        }
-        if (hasDiagramRestoredRef.current) return
-        hasDiagramRestoredRef.current = true
-
-        try {
-            const savedDiagramXml = localStorage.getItem(
-                STORAGE_DIAGRAM_XML_KEY,
-            )
-            if (savedDiagramXml) {
-                // Skip validation for trusted saved diagrams
-                loadDiagram(savedDiagramXml, true)
-            }
-        } catch (error) {
-            console.error("Failed to restore diagram from localStorage:", error)
-        }
-
-        // Allow saving after restore is complete
-        setTimeout(() => {
-            setCanSaveDiagram(true)
-        }, 500)
-    }, [isDrawioReady])
-
-    // Save diagram XML to localStorage whenever it changes (debounced)
-    useEffect(() => {
-        if (!canSaveDiagram) return
-        if (!chartXML || chartXML.length <= 300) return
-
-        const timeoutId = setTimeout(() => {
-            localStorage.setItem(STORAGE_DIAGRAM_XML_KEY, chartXML)
-        }, 1000)
-
-        return () => clearTimeout(timeoutId)
-    }, [chartXML, canSaveDiagram])
-
     // Track if we're expecting an export for file save (stores raw export data)
     const saveResolverRef = useRef<{
         resolver: ((data: string) => void) | null
@@ -131,30 +82,6 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         }
     }
 
-    // Save current diagram to localStorage (used before theme/UI changes)
-    const saveDiagramToStorage = async (): Promise<void> => {
-        if (!drawioRef.current) return
-
-        try {
-            const currentXml = await Promise.race([
-                new Promise<string>((resolve) => {
-                    resolverRef.current = resolve
-                    drawioRef.current?.exportDiagram({ format: "xmlsvg" })
-                }),
-                new Promise<string>((_, reject) =>
-                    setTimeout(() => reject(new Error("Export timeout")), 2000),
-                ),
-            ])
-
-            // Only save if diagram has meaningful content (not empty template)
-            if (currentXml && currentXml.length > 300) {
-                localStorage.setItem(STORAGE_DIAGRAM_XML_KEY, currentXml)
-            }
-        } catch (error) {
-            console.error("Failed to save diagram to storage:", error)
-        }
-    }
-
     const loadDiagram = (
         chart: string,
         skipValidation?: boolean,
@@ -211,20 +138,14 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         setLatestSvg(data.data)
 
         // Only add to history if this was a user-initiated export
-        // Limit to 20 entries to prevent memory leaks during long sessions
-        const MAX_HISTORY_SIZE = 20
         if (expectHistoryExportRef.current) {
-            setDiagramHistory((prev) => {
-                const newHistory = [
-                    ...prev,
-                    {
-                        svg: data.data,
-                        xml: extractedXML,
-                    },
-                ]
-                // Keep only the last MAX_HISTORY_SIZE entries (circular buffer)
-                return newHistory.slice(-MAX_HISTORY_SIZE)
-            })
+            setDiagramHistory((prev) => [
+                ...prev,
+                {
+                    svg: data.data,
+                    xml: extractedXML,
+                },
+            ])
             expectHistoryExportRef.current = false
         }
 
@@ -353,12 +274,9 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
                 handleDiagramExport,
                 clearDiagram,
                 saveDiagramToFile,
-                saveDiagramToStorage,
                 isDrawioReady,
                 onDrawioLoad,
                 resetDrawioReady,
-                showSaveDialog,
-                setShowSaveDialog,
             }}
         >
             {children}

docs/README_CN.md

@@ -26,7 +26,6 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
   - [目录](#目录)
   - [示例](#示例)
   - [功能特性](#功能特性)
-  - [MCP服务器（预览）](#mcp服务器预览)
   - [快速开始](#快速开始)
     - [在线试用](#在线试用)
     - [使用Docker运行（推荐）](#使用docker运行推荐)
@@ -89,36 +88,6 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   **云架构图支持**：专门支持生成云架构图（AWS、GCP、Azure）
 -   **动画连接器**：在图表元素之间创建动态动画连接器，实现更好的可视化效果
 
-## MCP服务器（预览）
-
-> **预览功能**：此功能为实验性功能，可能会有变化。
-
-通过MCP（模型上下文协议）在Claude Desktop、Cursor和VS Code等AI代理中使用Next AI Draw.io。
-
-```json
-{
-  "mcpServers": {
-    "drawio": {
-      "command": "npx",
-      "args": ["@next-ai-drawio/mcp-server@latest"]
-    }
-  }
-}
-```
-
-### Claude Code CLI
-
-```bash
-claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
-```
-
-然后让Claude创建图表：
-> "创建一个展示用户认证流程的流程图，包含登录、MFA和会话管理"
-
-图表会实时显示在浏览器中！
-
-详情请参阅[MCP服务器README](../packages/mcp-server/README.md)，了解VS Code、Cursor等客户端配置。
-
 ## 快速开始
 
 ### 在线试用

docs/README_JA.md

@@ -26,7 +26,6 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
   - [目次](#目次)
   - [例](#例)
   - [機能](#機能)
-  - [MCPサーバー（プレビュー）](#mcpサーバープレビュー)
   - [はじめに](#はじめに)
     - [オンラインで試す](#オンラインで試す)
     - [Dockerで実行（推奨）](#dockerで実行推奨)
@@ -89,36 +88,6 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   **クラウドアーキテクチャダイアグラムサポート**：クラウドアーキテクチャダイアグラムの生成を専門的にサポート（AWS、GCP、Azure）
 -   **アニメーションコネクタ**：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成
 
-## MCPサーバー（プレビュー）
-
-> **プレビュー機能**：この機能は実験的であり、変更される可能性があります。
-
-MCP（Model Context Protocol）を介して、Claude Desktop、Cursor、VS CodeなどのAIエージェントでNext AI Draw.ioを使用できます。
-
-```json
-{
-  "mcpServers": {
-    "drawio": {
-      "command": "npx",
-      "args": ["@next-ai-drawio/mcp-server@latest"]
-    }
-  }
-}
-```
-
-### Claude Code CLI
-
-```bash
-claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
-```
-
-Claudeにダイアグラムの作成を依頼：
-> 「ログイン、MFA、セッション管理を含むユーザー認証のフローチャートを作成してください」
-
-ダイアグラムがリアルタイムでブラウザに表示されます！
-
-詳細は[MCPサーバーREADME](../packages/mcp-server/README.md)をご覧ください（VS Code、Cursorなどのクライアント設定も含む）。
-
 ## はじめに
 
 ### オンラインで試す

docs/ai-providers.md

@@ -136,42 +136,6 @@ Optional custom URL:
 OLLAMA_BASE_URL=http://localhost:11434
 ```
 
-### Vercel AI Gateway
-
-Vercel AI Gateway provides unified access to multiple AI providers through a single API key. This simplifies authentication and allows you to switch between providers without managing multiple API keys.
-
-**Basic Usage (Vercel-hosted Gateway):**
-
-```bash
-AI_GATEWAY_API_KEY=your_gateway_api_key
-AI_MODEL=openai/gpt-4o
-```
-
-**Custom Gateway URL (for local development or self-hosted Gateway):**
-
-```bash
-AI_GATEWAY_API_KEY=your_custom_api_key
-AI_GATEWAY_BASE_URL=https://your-custom-gateway.com/v1/ai
-AI_MODEL=openai/gpt-4o
-```
-
-Model format uses `provider/model` syntax:
-
--   `openai/gpt-4o` - OpenAI GPT-4o
--   `anthropic/claude-sonnet-4-5` - Anthropic Claude Sonnet 4.5
--   `google/gemini-2.0-flash` - Google Gemini 2.0 Flash
-
-**Configuration notes:**
-
--   If `AI_GATEWAY_BASE_URL` is not set, the default Vercel Gateway URL (`https://ai-gateway.vercel.sh/v1/ai`) is used
--   Custom base URL is useful for:
-    -   Local development with a custom Gateway instance
-    -   Self-hosted AI Gateway deployments
-    -   Enterprise proxy configurations
--   When using a custom base URL, you must also provide `AI_GATEWAY_API_KEY`
-
-Get your API key from the [Vercel AI Gateway dashboard](https://vercel.com/ai-gateway).
-
 ## Auto-Detection
 
 If you only configure **one** provider's API key, the system will automatically detect and use that provider. No need to set `AI_PROVIDER`.
@@ -179,7 +143,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, siliconflow, azure, bedrock, openrouter, ollama, gateway
+AI_PROVIDER=google  # or: openai, anthropic, deepseek, siliconflow, azure, bedrock, openrouter, ollama
 ```
 
 ## Model Capability Requirements

env.example

@@ -1,6 +1,6 @@
 # AI Provider Configuration
 # AI_PROVIDER: Which provider to use
-# Options: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, gateway
+# Options: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow
 # Default: bedrock
 AI_PROVIDER=bedrock
 
@@ -68,13 +68,6 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 # SILICONFLOW_API_KEY=sk-...
 # SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1  # Optional: switch to https://api.siliconflow.cn/v1 if needed
 
-# Vercel AI Gateway Configuration
-# Get your API key from: https://vercel.com/ai-gateway
-# Model format: "provider/model" e.g., "openai/gpt-4o", "anthropic/claude-sonnet-4-5"
-# AI_GATEWAY_API_KEY=...
-# AI_GATEWAY_BASE_URL=https://your-custom-gateway.com/v1/ai  # Optional: Custom Gateway URL (for local dev or self-hosted Gateway)
-#                                                              # If not set, uses Vercel default: https://ai-gateway.vercel.sh/v1/ai
-
 # Langfuse Observability (Optional)
 # Enable LLM tracing and analytics - https://langfuse.com
 # LANGFUSE_PUBLIC_KEY=pk-lf-...

lib/ai-providers.ts

@@ -2,7 +2,6 @@ import { createAmazonBedrock } from "@ai-sdk/amazon-bedrock"
 import { createAnthropic } from "@ai-sdk/anthropic"
 import { azure, createAzure } from "@ai-sdk/azure"
 import { createDeepSeek, deepseek } from "@ai-sdk/deepseek"
-import { createGateway, gateway } from "@ai-sdk/gateway"
 import { createGoogleGenerativeAI, google } from "@ai-sdk/google"
 import { createOpenAI, openai } from "@ai-sdk/openai"
 import { fromNodeProviderChain } from "@aws-sdk/credential-providers"
@@ -19,7 +18,6 @@ export type ProviderName =
     | "openrouter"
     | "deepseek"
     | "siliconflow"
-    | "gateway"
 
 interface ModelConfig {
     model: any
@@ -44,7 +42,6 @@ const ALLOWED_CLIENT_PROVIDERS: ProviderName[] = [
     "openrouter",
     "deepseek",
     "siliconflow",
-    "gateway",
 ]
 
 // Bedrock provider options for Anthropic beta features
@@ -336,10 +333,8 @@ function buildProviderOptions(
 
         case "deepseek":
         case "openrouter":
-        case "siliconflow":
-        case "gateway": {
+        case "siliconflow": {
             // These providers don't have reasoning configs in AI SDK yet
-            // Gateway passes through to underlying providers which handle their own configs
             break
         }
 
@@ -361,7 +356,6 @@ const PROVIDER_ENV_VARS: Record<ProviderName, string | null> = {
     openrouter: "OPENROUTER_API_KEY",
     deepseek: "DEEPSEEK_API_KEY",
     siliconflow: "SILICONFLOW_API_KEY",
-    gateway: "AI_GATEWAY_API_KEY",
 }
 
 /**
@@ -444,16 +438,6 @@ function validateProviderCredentials(provider: ProviderName): void {
  * - SILICONFLOW_BASE_URL: SiliconFlow endpoint (optional, defaults to https://api.siliconflow.com/v1)
  */
 export function getAIModel(overrides?: ClientOverrides): ModelConfig {
-    // SECURITY: Prevent SSRF attacks (GHSA-9qf7-mprq-9qgm)
-    // If a custom baseUrl is provided, an API key MUST also be provided.
-    // This prevents attackers from redirecting server API keys to malicious endpoints.
-    if (overrides?.baseUrl && !overrides?.apiKey) {
-        throw new Error(
-            `API key is required when using a custom base URL. ` +
-                `Please provide your own API key in Settings.`,
-        )
-    }
-
     // Check if client is providing their own provider override
     const isClientOverride = !!(overrides?.provider && overrides?.apiKey)
 
@@ -501,7 +485,6 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
             if (configured.length === 0) {
                 throw new Error(
                     `No AI provider configured. Please set one of the following API keys in your .env.local file:\n` +
-                        `- AI_GATEWAY_API_KEY for Vercel AI Gateway\n` +
                         `- DEEPSEEK_API_KEY for DeepSeek\n` +
                         `- OPENAI_API_KEY for OpenAI\n` +
                         `- ANTHROPIC_API_KEY for Anthropic\n` +
@@ -679,30 +662,9 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
             break
         }
 
-        case "gateway": {
-            // Vercel AI Gateway - unified access to multiple AI providers
-            // Model format: "provider/model" e.g., "openai/gpt-4o", "anthropic/claude-sonnet-4-5"
-            // See: https://vercel.com/ai-gateway
-            const apiKey = overrides?.apiKey || process.env.AI_GATEWAY_API_KEY
-            const baseURL =
-                overrides?.baseUrl || process.env.AI_GATEWAY_BASE_URL
-            // Only use custom configuration if explicitly set (local dev or custom Gateway)
-            // Otherwise undefined → AI SDK uses Vercel default (https://ai-gateway.vercel.sh/v1/ai) + OIDC
-            if (baseURL || overrides?.apiKey) {
-                const customGateway = createGateway({
-                    apiKey,
-                    ...(baseURL && { baseURL }),
-                })
-                model = customGateway(modelId)
-            } else {
-                model = gateway(modelId)
-            }
-            break
-        }
-
         default:
             throw new Error(
-                `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, gateway`,
+                `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow`,
             )
     }
 

lib/cached-responses.ts

@@ -9,7 +9,12 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
         promptText:
             "Give me a **animated connector** diagram of transformer's architecture",
         hasImage: false,
-        xml: `<mxCell id="title" value="Transformer Architecture" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontStyle=1;" vertex="1" parent="1">
+        xml: `<root>
+  <mxCell id="0"/>
+  <mxCell id="1" parent="0"/>
+
+
+  <mxCell id="title" value="Transformer Architecture" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=20;fontStyle=1;" vertex="1" parent="1">
     <mxGeometry x="300" y="20" width="250" height="30" as="geometry"/>
   </mxCell>
 
@@ -249,12 +254,18 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
 
   <mxCell id="output_label" value="Outputs&#xa;(shifted right)" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=12;fontStyle=1;" vertex="1" parent="1">
     <mxGeometry x="660" y="530" width="100" height="30" as="geometry"/>
-  </mxCell>`,
+  </mxCell>
+</root>`,
     },
     {
         promptText: "Replicate this in aws style",
         hasImage: true,
-        xml: `<mxCell id="2" value="AWS" style="sketch=0;outlineConnect=0;gradientColor=none;html=1;whiteSpace=wrap;fontSize=12;fontStyle=0;container=1;pointerEvents=0;collapsible=0;recursiveResize=0;shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_aws_cloud;strokeColor=#232F3E;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;fontColor=#232F3E;dashed=0;rounded=1;arcSize=5;" vertex="1" parent="1">
+        xml: `<root>
+  <mxCell id="0"/>
+  <mxCell id="1" parent="0"/>
+
+
+  <mxCell id="2" value="AWS" style="sketch=0;outlineConnect=0;gradientColor=none;html=1;whiteSpace=wrap;fontSize=12;fontStyle=0;container=1;pointerEvents=0;collapsible=0;recursiveResize=0;shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.group_aws_cloud;strokeColor=#232F3E;fillColor=none;verticalAlign=top;align=left;spacingLeft=30;fontColor=#232F3E;dashed=0;rounded=1;arcSize=5;" vertex="1" parent="1">
     <mxGeometry x="340" y="40" width="880" height="520" as="geometry"/>
   </mxCell>
 
@@ -313,12 +324,18 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
       <mxPoint x="700" y="350" as="sourcePoint"/>
       <mxPoint x="750" y="300" as="targetPoint"/>
     </mxGeometry>
-  </mxCell>`,
+  </mxCell>
+</root>`,
     },
     {
         promptText: "Replicate this flowchart.",
         hasImage: true,
-        xml: `<mxCell id="2" value="Lamp doesn't work" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffcccc;strokeColor=#000000;strokeWidth=2;fontSize=18;fontStyle=0;" vertex="1" parent="1">
+        xml: `<root>
+  <mxCell id="0"/>
+  <mxCell id="1" parent="0"/>
+
+
+  <mxCell id="2" value="Lamp doesn't work" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffcccc;strokeColor=#000000;strokeWidth=2;fontSize=18;fontStyle=0;" vertex="1" parent="1">
     <mxGeometry x="140" y="40" width="180" height="60" as="geometry"/>
   </mxCell>
 
@@ -374,12 +391,16 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
 
   <mxCell id="12" value="Repair lamp" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#99ff99;strokeColor=#000000;strokeWidth=2;fontSize=18;fontStyle=0;" vertex="1" parent="1">
     <mxGeometry x="130" y="650" width="200" height="60" as="geometry"/>
-  </mxCell>`,
+  </mxCell>
+</root>`,
     },
     {
         promptText: "Summarize this paper as a diagram",
         hasImage: true,
-        xml: `<mxCell id="title_bg" parent="1"
+        xml: `            <root>
+                <mxCell id="0" />
+                <mxCell id="1" parent="0" />
+                <mxCell id="title_bg" parent="1"
                     style="rounded=1;whiteSpace=wrap;html=1;fillColor=#1a237e;strokeColor=none;arcSize=8;"
                     value="" vertex="1">
                     <mxGeometry height="80" width="720" x="40" y="20" as="geometry" />
@@ -730,12 +751,18 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
                     value="Foundational technique for modern LLM reasoning - inspired many follow-up works including Self-Consistency, Tree-of-Thought, etc."
                     vertex="1">
                     <mxGeometry height="55" width="230" x="530" y="600" as="geometry" />
-                </mxCell>`,
+                </mxCell>
+            </root>`,
     },
     {
         promptText: "Draw a cat for me",
         hasImage: false,
-        xml: `<mxCell id="2" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#FFE6CC;strokeColor=#000000;strokeWidth=2;" vertex="1" parent="1">
+        xml: `<root>
+  <mxCell id="0"/>
+  <mxCell id="1" parent="0"/>
+
+
+  <mxCell id="2" value="" style="ellipse;whiteSpace=wrap;html=1;aspect=fixed;fillColor=#FFE6CC;strokeColor=#000000;strokeWidth=2;" vertex="1" parent="1">
     <mxGeometry x="300" y="150" width="120" height="120" as="geometry"/>
   </mxCell>
 
@@ -875,7 +902,9 @@ export const CACHED_EXAMPLE_RESPONSES: CachedResponse[] = [
         <mxPoint x="235" y="290"/>
       </Array>
     </mxGeometry>
-  </mxCell>`,
+  </mxCell>
+
+</root>`,
     },
 ]
 

lib/system-prompts.ts

@@ -42,18 +42,11 @@ description: Edit specific parts of the EXISTING diagram. Use this when making s
 parameters: {
   edits: Array<{search: string, replace: string}>
 }
----Tool3---
-tool name: append_diagram
-description: Continue generating diagram XML when display_diagram was truncated due to output length limits. Only use this after display_diagram truncation.
-parameters: {
-  xml: string  // Continuation fragment (NO wrapper tags like <mxGraphModel> or <root>)
-}
 ---End of tools---
 
 IMPORTANT: Choose the right tool:
 - Use display_diagram for: Creating new diagrams, major restructuring, or when the current diagram XML is empty
 - Use edit_diagram for: Small modifications, adding/removing elements, changing text/colors, repositioning items
-- Use append_diagram for: ONLY when display_diagram was truncated due to output length - continue generating from where you stopped
 
 Core capabilities:
 - Generate valid, well-formed XML strings for draw.io diagrams
@@ -88,33 +81,38 @@ Note that:
 - NEVER include XML comments (<!-- ... -->) in your generated XML. Draw.io strips comments, which breaks edit_diagram patterns.
 
 When using edit_diagram tool:
-- Use operations: update (modify cell by id), add (new cell), delete (remove cell by id)
-- For update/add: provide cell_id and complete new_xml (full mxCell element including mxGeometry)
-- For delete: only cell_id is needed
-- Find the cell_id from "Current diagram XML" in system context
-- Example update: {"operations": [{"type": "update", "cell_id": "3", "new_xml": "<mxCell id=\\"3\\" value=\\"New Label\\" style=\\"rounded=1;\\" vertex=\\"1\\" parent=\\"1\\">\\n  <mxGeometry x=\\"100\\" y=\\"100\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>"}]}
-- Example delete: {"operations": [{"type": "delete", "cell_id": "5"}]}
-- Example add: {"operations": [{"type": "add", "cell_id": "new1", "new_xml": "<mxCell id=\\"new1\\" value=\\"New Box\\" style=\\"rounded=1;\\" vertex=\\"1\\" parent=\\"1\\">\\n  <mxGeometry x=\\"400\\" y=\\"200\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>"}]}
+- CRITICAL: Copy search patterns EXACTLY from the "Current diagram XML" in system context - attribute order matters!
+- Always include the element's id attribute for unique targeting: {"search": "<mxCell id=\\"5\\"", ...}
+- Include complete elements (mxCell + mxGeometry) for reliable matching
+- Preserve exact whitespace, indentation, and line breaks
+- BAD: {"search": "value=\\"Label\\"", ...} - too vague, matches multiple elements
+- GOOD: {"search": "<mxCell id=\\"3\\" value=\\"Old\\" style=\\"...\\">", "replace": "<mxCell id=\\"3\\" value=\\"New\\" style=\\"...\\">"}
+- For multiple changes, use separate edits in array
+- RETRY POLICY: If pattern not found, retry up to 3 times with adjusted patterns. After 3 failures, use display_diagram instead.
 
-⚠️ JSON ESCAPING: Every " inside new_xml MUST be escaped as \\". Example: id=\\"5\\" value=\\"Label\\"
+⚠️ CRITICAL JSON ESCAPING: When outputting edit_diagram tool calls, you MUST escape ALL double quotes inside string values:
+- CORRECT: "y=\\"119\\""  (both quotes escaped)
+- WRONG: "y="119\\""  (missing backslash before first quote - causes JSON parse error!)
+- Every " inside a JSON string value needs \\" - no exceptions!
 
 ## Draw.io XML Structure Reference
 
-**IMPORTANT:** You only generate the mxCell elements. The wrapper structure and root cells (id="0", id="1") are added automatically.
-
-Example - generate ONLY this:
+Basic structure:
 \`\`\`xml
-<mxCell id="2" value="Label" style="rounded=1;" vertex="1" parent="1">
-  <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
-</mxCell>
+<mxGraphModel>
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+  </root>
+</mxGraphModel>
 \`\`\`
+Note: All other mxCell elements go as siblings after id="1".
 
 CRITICAL RULES:
-1. Generate ONLY mxCell elements - NO wrapper tags (<mxfile>, <mxGraphModel>, <root>)
-2. Do NOT include root cells (id="0" or id="1") - they are added automatically
-3. ALL mxCell elements must be siblings - NEVER nest mxCell inside another mxCell
-4. Use unique sequential IDs starting from "2"
-5. Set parent="1" for top-level shapes, or parent="<container-id>" for grouped elements
+1. Always include the two root cells: <mxCell id="0"/> and <mxCell id="1" parent="0"/>
+2. ALL mxCell elements must be DIRECT children of <root> - NEVER nest mxCell inside another mxCell
+3. Use unique sequential IDs for all cells (start from "2" for user content)
+4. Set parent="1" for top-level shapes, or parent="<container-id>" for grouped elements
 
 Shape (vertex) example:
 \`\`\`xml
@@ -128,6 +126,122 @@ Connector (edge) example:
 <mxCell id="3" style="endArrow=classic;html=1;" edge="1" parent="1" source="2" target="4">
   <mxGeometry relative="1" as="geometry"/>
 </mxCell>
+\`\`\`
+
+Common styles:
+- Shapes: rounded=1 (rounded corners), fillColor=#hex, strokeColor=#hex
+- Edges: endArrow=classic/block/open/none, startArrow=none/classic, curved=1, edgeStyle=orthogonalEdgeStyle
+- Text: fontSize=14, fontStyle=1 (bold), align=center/left/right
+
+`
+
+// Extended additions (~2600 tokens) - appended for models with 4000 token cache minimum
+// Total EXTENDED_SYSTEM_PROMPT = ~4400 tokens
+const EXTENDED_ADDITIONS = `
+
+## Extended Tool Reference
+
+### display_diagram Details
+
+**VALIDATION RULES** (XML will be rejected if violated):
+1. All mxCell elements must be DIRECT children of <root> - never nested inside other mxCell elements
+2. Every mxCell needs a unique id attribute
+3. Every mxCell (except id="0") needs a valid parent attribute referencing an existing cell
+4. Edge source/target attributes must reference existing cell IDs
+5. Escape special characters in values: &lt; for <, &gt; for >, &amp; for &, &quot; for "
+6. Always start with the two root cells: <mxCell id="0"/><mxCell id="1" parent="0"/>
+
+**Example with swimlanes and edges** (note: all mxCells are siblings under <root>):
+\`\`\`xml
+<root>
+  <mxCell id="0"/>
+  <mxCell id="1" parent="0"/>
+  <mxCell id="lane1" value="Frontend" style="swimlane;" vertex="1" parent="1">
+    <mxGeometry x="40" y="40" width="200" height="200" as="geometry"/>
+  </mxCell>
+  <mxCell id="step1" value="Step 1" style="rounded=1;" vertex="1" parent="lane1">
+    <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
+  </mxCell>
+  <mxCell id="lane2" value="Backend" style="swimlane;" vertex="1" parent="1">
+    <mxGeometry x="280" y="40" width="200" height="200" as="geometry"/>
+  </mxCell>
+  <mxCell id="step2" value="Step 2" style="rounded=1;" vertex="1" parent="lane2">
+    <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
+  </mxCell>
+  <mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;" edge="1" parent="1" source="step1" target="step2">
+    <mxGeometry relative="1" as="geometry"/>
+  </mxCell>
+</root>
+\`\`\`
+
+### edit_diagram Details
+
+**CRITICAL RULES:**
+- Copy-paste the EXACT search pattern from the "Current diagram XML" in system context
+- Do NOT reorder attributes or reformat - the attribute order in draw.io XML varies and you MUST match it exactly
+- 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
+
+**Input Format:**
+\`\`\`json
+{
+  "edits": [
+    {
+      "search": "EXACT lines copied from current XML (preserve attribute order!)",
+      "replace": "Replacement lines"
+    }
+  ]
+}
+\`\`\`
+
+## edit_diagram Best Practices
+
+### Core Principle: Unique & Precise Patterns
+Your search pattern MUST uniquely identify exactly ONE location in the XML. Before writing a search pattern:
+1. Review the "Current diagram XML" in the system context
+2. Identify the exact element(s) to modify by their unique id attribute
+3. Include enough context to ensure uniqueness
+
+### Pattern Construction Rules
+
+**Rule 1: Always include the element's id attribute**
+\`\`\`json
+{"search": "<mxCell id=\\"node5\\"", "replace": "<mxCell id=\\"node5\\" value=\\"New Label\\""}
+\`\`\`
+
+**Rule 2: Include complete XML elements when possible**
+\`\`\`json
+{
+  "search": "<mxCell id=\\"3\\" value=\\"Old\\" style=\\"rounded=1;\\" vertex=\\"1\\" parent=\\"1\\">\\n  <mxGeometry x=\\"100\\" y=\\"100\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>",
+  "replace": "<mxCell id=\\"3\\" value=\\"New\\" style=\\"rounded=1;\\" vertex=\\"1\\" parent=\\"1\\">\\n  <mxGeometry x=\\"100\\" y=\\"100\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>"
+}
+\`\`\`
+
+**Rule 3: Preserve exact whitespace and formatting**
+Copy the search pattern EXACTLY from the current XML, including leading spaces, line breaks (\\n), and attribute order.
+
+### Good vs Bad Patterns
+
+**BAD:** \`{"search": "value=\\"Label\\""}\` - Too vague, matches multiple elements
+**BAD:** \`{"search": "<mxCell value=\\"X\\" id=\\"5\\""}\` - Reordered attributes won't match
+**GOOD:** \`{"search": "<mxCell id=\\"5\\" parent=\\"1\\" style=\\"...\\" value=\\"Old\\" vertex=\\"1\\">"}\` - Uses unique id with full context
+
+### ⚠️ JSON Escaping (CRITICAL)
+Every double quote inside JSON string values MUST be escaped with backslash:
+- **CORRECT:** \`"x=\\"100\\" y=\\"200\\""\` - both quotes escaped
+- **WRONG:** \`"x=\\"100\\" y="200\\""\` - missing backslash causes JSON parse error!
+
+### Error Recovery
+If edit_diagram fails with "pattern not found":
+1. **First retry**: Check attribute order - copy EXACTLY from current XML
+2. **Second retry**: Expand context - include more surrounding lines
+3. **Third retry**: Try matching on just \`<mxCell id="X"\` prefix + full replacement
+4. **After 3 failures**: Fall back to display_diagram to regenerate entire diagram
+
+
+
 
 ### Edge Routing Rules:
 When creating edges/connectors, you MUST follow these rules to avoid overlapping lines:
@@ -177,135 +291,6 @@ When creating edges/connectors, you MUST follow these rules to avoid overlapping
 3. "Are any connection points at corners (both X and Y are 0 or 1)?" → If yes, use edge centers instead
 4. "Could I rearrange shapes to reduce edge crossings?" → If yes, revise layout
 
-
-\`\`\`
-
-`
-
-// Style instructions - only included when minimalStyle is false
-const STYLE_INSTRUCTIONS = `
-Common styles:
-- Shapes: rounded=1 (rounded corners), fillColor=#hex, strokeColor=#hex
-- Edges: endArrow=classic/block/open/none, startArrow=none/classic, curved=1, edgeStyle=orthogonalEdgeStyle
-- Text: fontSize=14, fontStyle=1 (bold), align=center/left/right
-`
-
-// Minimal style instruction - skip styling and focus on layout (prepended to prompt for emphasis)
-const MINIMAL_STYLE_INSTRUCTION = `
-## ⚠️ MINIMAL STYLE MODE ACTIVE ⚠️
-
-### No Styling - Plain Black/White Only
-- NO fillColor, NO strokeColor, NO rounded, NO fontSize, NO fontStyle
-- NO color attributes (no hex colors like #ff69b4)
-- Style: "whiteSpace=wrap;html=1;" for shapes, "html=1;endArrow=classic;" for edges
-- IGNORE all color/style examples below
-
-### Container/Group Shapes - MUST be Transparent
-- For container shapes (boxes that contain other shapes): use "fillColor=none;" to make background transparent
-- This prevents containers from covering child elements
-- Example: style="whiteSpace=wrap;html=1;fillColor=none;" for container rectangles
-
-### Focus on Layout Quality
-Since we skip styling, STRICTLY follow the "Edge Routing Rules" section below:
-- SPACING: Minimum 50px gap between all elements
-- NO OVERLAPS: Elements and edges must never overlap
-- Follow ALL 7 Edge Routing Rules for arrow positioning
-- Use waypoints to route edges AROUND obstacles
-- Use different exitY/entryY values for multiple edges between same nodes
-
-`
-
-// Extended additions (~2600 tokens) - appended for models with 4000 token cache minimum
-// Total EXTENDED_SYSTEM_PROMPT = ~4400 tokens
-const EXTENDED_ADDITIONS = `
-
-## Extended Tool Reference
-
-### display_diagram Details
-
-**VALIDATION RULES** (XML will be rejected if violated):
-1. Generate ONLY mxCell elements - wrapper tags and root cells are added automatically
-2. All mxCell elements must be siblings - never nested inside other mxCell elements
-3. Every mxCell needs a unique id attribute (start from "2")
-4. Every mxCell needs a valid parent attribute (use "1" for top-level, or container-id for grouped)
-5. Edge source/target attributes must reference existing cell IDs
-6. Escape special characters in values: &lt; for <, &gt; for >, &amp; for &, &quot; for "
-
-**Example with swimlanes and edges** (generate ONLY this - no wrapper tags):
-\`\`\`xml
-<mxCell id="lane1" value="Frontend" style="swimlane;" vertex="1" parent="1">
-  <mxGeometry x="40" y="40" width="200" height="200" as="geometry"/>
-</mxCell>
-<mxCell id="step1" value="Step 1" style="rounded=1;" vertex="1" parent="lane1">
-  <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
-</mxCell>
-<mxCell id="lane2" value="Backend" style="swimlane;" vertex="1" parent="1">
-  <mxGeometry x="280" y="40" width="200" height="200" as="geometry"/>
-</mxCell>
-<mxCell id="step2" value="Step 2" style="rounded=1;" vertex="1" parent="lane2">
-  <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
-</mxCell>
-<mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;" edge="1" parent="1" source="step1" target="step2">
-  <mxGeometry relative="1" as="geometry"/>
-</mxCell>
-\`\`\`
-
-### append_diagram Details
-
-**WHEN TO USE:** Only call this tool when display_diagram output was truncated (you'll see an error message about truncation).
-
-**CRITICAL RULES:**
-1. Do NOT include any wrapper tags - just continue the mxCell elements
-2. Continue from EXACTLY where your previous output stopped
-3. Complete the remaining mxCell elements
-4. If still truncated, call append_diagram again with the next fragment
-
-**Example:** If previous output ended with \`<mxCell id="x" style="rounded=1\`, continue with \`;" vertex="1">...\` and complete the remaining elements.
-
-### edit_diagram Details
-
-edit_diagram uses ID-based operations to modify cells directly by their id attribute.
-
-**Operations:**
-- **update**: Replace an existing cell. Provide cell_id and new_xml.
-- **add**: Add a new cell. Provide cell_id (new unique id) and new_xml.
-- **delete**: Remove a cell. Only cell_id is needed.
-
-**Input Format:**
-\`\`\`json
-{
-  "operations": [
-    {"type": "update", "cell_id": "3", "new_xml": "<mxCell ...complete element...>"},
-    {"type": "add", "cell_id": "new1", "new_xml": "<mxCell ...new element...>"},
-    {"type": "delete", "cell_id": "5"}
-  ]
-}
-\`\`\`
-
-**Examples:**
-
-Change label:
-\`\`\`json
-{"operations": [{"type": "update", "cell_id": "3", "new_xml": "<mxCell id=\\"3\\" value=\\"New Label\\" style=\\"rounded=1;\\" vertex=\\"1\\" parent=\\"1\\">\\n  <mxGeometry x=\\"100\\" y=\\"100\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>"}]}
-\`\`\`
-
-Add new shape:
-\`\`\`json
-{"operations": [{"type": "add", "cell_id": "new1", "new_xml": "<mxCell id=\\"new1\\" value=\\"New Box\\" style=\\"rounded=1;fillColor=#dae8fc;\\" vertex=\\"1\\" parent=\\"1\\">\\n  <mxGeometry x=\\"400\\" y=\\"200\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>"}]}
-\`\`\`
-
-Delete cell:
-\`\`\`json
-{"operations": [{"type": "delete", "cell_id": "5"}]}
-\`\`\`
-
-**Error Recovery:**
-If cell_id not found, check "Current diagram XML" for correct IDs. Use display_diagram if major restructuring is needed
-
-
-
-
-
 ## Edge Examples
 
 ### Two edges between same nodes (CORRECT - no overlap):
@@ -358,16 +343,12 @@ const EXTENDED_PROMPT_MODEL_PATTERNS = [
 ]
 
 /**
- * Get the appropriate system prompt based on the model ID and style preference
+ * Get the appropriate system prompt based on the model ID
  * Uses extended prompt for Opus 4.5 and Haiku 4.5 which have 4000 token cache minimum
  * @param modelId - The AI model ID from environment
- * @param minimalStyle - If true, removes style instructions to save tokens
  * @returns The system prompt string
  */
-export function getSystemPrompt(
-    modelId?: string,
-    minimalStyle?: boolean,
-): string {
+export function getSystemPrompt(modelId?: string): string {
     const modelName = modelId || "AI"
 
     let prompt: string
@@ -388,15 +369,5 @@ export function getSystemPrompt(
         prompt = DEFAULT_SYSTEM_PROMPT
     }
 
-    // Add style instructions based on preference
-    // Minimal style: prepend instruction at START (more prominent)
-    // Normal style: append at end
-    if (minimalStyle) {
-        console.log(`[System Prompt] Minimal style mode ENABLED`)
-        prompt = MINIMAL_STYLE_INSTRUCTION + prompt
-    } else {
-        prompt += STYLE_INSTRUCTIONS
-    }
-
     return prompt.replace("{{MODEL_NAME}}", modelName)
 }

lib/utils.ts

@@ -29,38 +29,6 @@ const STRUCTURAL_ATTRS = [
 /** Valid XML entity names */
 const VALID_ENTITIES = new Set(["lt", "gt", "amp", "quot", "apos"])
 
-// ============================================================================
-// mxCell XML Helpers
-// ============================================================================
-
-/**
- * Check if mxCell XML output is complete (not truncated).
- * Complete XML ends with a self-closing tag (/>) or closing mxCell tag.
- * Also handles function-calling wrapper tags that may be incorrectly included.
- * @param xml - The XML string to check (can be undefined/null)
- * @returns true if XML appears complete, false if truncated or empty
- */
-export function isMxCellXmlComplete(xml: string | undefined | null): boolean {
-    let trimmed = xml?.trim() || ""
-    if (!trimmed) return false
-
-    // Strip Anthropic function-calling wrapper tags if present
-    // These can leak into tool input due to AI SDK parsing issues
-    // Use loop because tags are nested: </mxCell></mxParameter></invoke>
-    let prev = ""
-    while (prev !== trimmed) {
-        prev = trimmed
-        trimmed = trimmed
-            .replace(/<\/mxParameter>\s*$/i, "")
-            .replace(/<\/invoke>\s*$/i, "")
-            .replace(/<\/antml:parameter>\s*$/i, "")
-            .replace(/<\/antml:invoke>\s*$/i, "")
-            .trim()
-    }
-
-    return trimmed.endsWith("/>") || trimmed.endsWith("</mxCell>")
-}
-
 // ============================================================================
 // XML Parsing Helpers
 // ============================================================================
@@ -214,13 +182,6 @@ export function convertToLegalXml(xmlString: string): string {
             )
         }
 
-        // Fix unescaped & characters in attribute values (but not valid entities)
-        // This prevents DOMParser from failing on content like "semantic & missing-step"
-        cellContent = cellContent.replace(
-            /&(?!(?:lt|gt|amp|quot|apos|#[0-9]+|#x[0-9a-fA-F]+);)/g,
-            "&amp;",
-        )
-
         // Indent each line of the matched block for readability.
         const formatted = cellContent
             .split("\n")
@@ -236,17 +197,13 @@ export function convertToLegalXml(xmlString: string): string {
 
 /**
  * Wrap XML content with the full mxfile structure required by draw.io.
- * Always adds root cells (id="0" and id="1") automatically.
- * If input already contains root cells, they are removed to avoid duplication.
- * LLM should only generate mxCell elements starting from id="2".
- * @param xml - The XML string (bare mxCells, <root>, <mxGraphModel>, or full <mxfile>)
- * @returns Full mxfile-wrapped XML string with root cells included
+ * Handles cases where XML is just <root>, <mxGraphModel>, or already has <mxfile>.
+ * @param xml - The XML string (may be partial or complete)
+ * @returns Full mxfile-wrapped XML string
  */
 export function wrapWithMxFile(xml: string): string {
-    const ROOT_CELLS = '<mxCell id="0"/><mxCell id="1" parent="0"/>'
-
-    if (!xml || !xml.trim()) {
-        return `<mxfile><diagram name="Page-1" id="page-1"><mxGraphModel><root>${ROOT_CELLS}</root></mxGraphModel></diagram></mxfile>`
+    if (!xml) {
+        return `<mxfile><diagram name="Page-1" id="page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel></diagram></mxfile>`
     }
 
     // Already has full structure
@@ -259,20 +216,9 @@ export function wrapWithMxFile(xml: string): string {
         return `<mxfile><diagram name="Page-1" id="page-1">${xml}</diagram></mxfile>`
     }
 
-    // Has <root> wrapper - extract inner content
-    let content = xml
-    if (xml.includes("<root>")) {
-        content = xml.replace(/<\/?root>/g, "").trim()
-    }
-
-    // Remove any existing root cells from content (LLM shouldn't include them, but handle it gracefully)
-    // Use flexible patterns that match both self-closing (/>) and non-self-closing (></mxCell>) formats
-    content = content
-        .replace(/<mxCell[^>]*\bid=["']0["'][^>]*(?:\/>|><\/mxCell>)/g, "")
-        .replace(/<mxCell[^>]*\bid=["']1["'][^>]*(?:\/>|><\/mxCell>)/g, "")
-        .trim()
-
-    return `<mxfile><diagram name="Page-1" id="page-1"><mxGraphModel><root>${ROOT_CELLS}${content}</root></mxGraphModel></diagram></mxfile>`
+    // Just <root> content - extract inner content and wrap fully
+    const rootContent = xml.replace(/<\/?root>/g, "").trim()
+    return `<mxfile><diagram name="Page-1" id="page-1"><mxGraphModel><root>${rootContent}</root></mxGraphModel></diagram></mxfile>`
 }
 
 /**
@@ -377,223 +323,303 @@ export function replaceNodes(currentXML: string, nodes: string): string {
     }
 }
 
-// ============================================================================
-// ID-based Diagram Operations
-// ============================================================================
-
-export interface DiagramOperation {
-    type: "update" | "add" | "delete"
-    cell_id: string
-    new_xml?: string
-}
-
-export interface OperationError {
-    type: "update" | "add" | "delete"
-    cellId: string
-    message: string
-}
-
-export interface ApplyOperationsResult {
-    result: string
-    errors: OperationError[]
+/**
+ * Create a character count dictionary from a string
+ * Used for attribute-order agnostic comparison
+ */
+function charCountDict(str: string): Map<string, number> {
+    const dict = new Map<string, number>()
+    for (const char of str) {
+        dict.set(char, (dict.get(char) || 0) + 1)
+    }
+    return dict
 }
 
 /**
- * Apply diagram operations (update/add/delete) using ID-based lookup.
- * This replaces the text-matching approach with direct DOM manipulation.
- *
- * @param xmlContent - The full mxfile XML content
- * @param operations - Array of operations to apply
- * @returns Object with result XML and any errors
+ * Compare two strings by character frequency (order-agnostic)
  */
-export function applyDiagramOperations(
+function sameCharFrequency(a: string, b: string): boolean {
+    const trimmedA = a.trim()
+    const trimmedB = b.trim()
+    if (trimmedA.length !== trimmedB.length) return false
+
+    const dictA = charCountDict(trimmedA)
+    const dictB = charCountDict(trimmedB)
+
+    if (dictA.size !== dictB.size) return false
+
+    for (const [char, count] of dictA) {
+        if (dictB.get(char) !== count) return false
+    }
+    return true
+}
+
+/**
+ * Replace specific parts of XML content using search and replace pairs
+ * @param xmlContent - The original XML string
+ * @param searchReplacePairs - Array of {search: string, replace: string} objects
+ * @returns The updated XML string with replacements applied
+ */
+export function replaceXMLParts(
     xmlContent: string,
-    operations: DiagramOperation[],
-): ApplyOperationsResult {
-    const errors: OperationError[] = []
+    searchReplacePairs: Array<{ search: string; replace: string }>,
+): string {
+    // Format the XML first to ensure consistent line breaks
+    let result = formatXML(xmlContent)
 
-    // Parse the XML
-    const parser = new DOMParser()
-    const doc = parser.parseFromString(xmlContent, "text/xml")
+    for (const { search, replace } of searchReplacePairs) {
+        // Also format the search content for consistency
+        const formattedSearch = formatXML(search)
+        const searchLines = formattedSearch.split("\n")
 
-    // Check for parse errors
-    const parseError = doc.querySelector("parsererror")
-    if (parseError) {
-        return {
-            result: xmlContent,
-            errors: [
-                {
-                    type: "update",
-                    cellId: "",
-                    message: `XML parse error: ${parseError.textContent}`,
-                },
-            ],
+        // Split into lines for exact line matching
+        const resultLines = result.split("\n")
+
+        // Remove trailing empty line if exists (from the trailing \n in search content)
+        if (searchLines[searchLines.length - 1] === "") {
+            searchLines.pop()
         }
-    }
 
-    // Find the root element (inside mxGraphModel)
-    const root = doc.querySelector("root")
-    if (!root) {
-        return {
-            result: xmlContent,
-            errors: [
-                {
-                    type: "update",
-                    cellId: "",
-                    message: "Could not find <root> element in XML",
-                },
-            ],
+        // Always search from the beginning - pairs may not be in document order
+        const startLineNum = 0
+
+        // Try to find match using multiple strategies
+        let matchFound = false
+        let matchStartLine = -1
+        let matchEndLine = -1
+
+        // First try: exact match
+        for (
+            let i = startLineNum;
+            i <= resultLines.length - searchLines.length;
+            i++
+        ) {
+            let matches = true
+
+            for (let j = 0; j < searchLines.length; j++) {
+                if (resultLines[i + j] !== searchLines[j]) {
+                    matches = false
+                    break
+                }
+            }
+
+            if (matches) {
+                matchStartLine = i
+                matchEndLine = i + searchLines.length
+                matchFound = true
+                break
+            }
         }
-    }
 
-    // Build a map of cell IDs to elements
-    const cellMap = new Map<string, Element>()
-    root.querySelectorAll("mxCell").forEach((cell) => {
-        const id = cell.getAttribute("id")
-        if (id) cellMap.set(id, cell)
-    })
+        // Second try: line-trimmed match (fallback)
+        if (!matchFound) {
+            for (
+                let i = startLineNum;
+                i <= resultLines.length - searchLines.length;
+                i++
+            ) {
+                let matches = true
 
-    // Process each operation
-    for (const op of operations) {
-        if (op.type === "update") {
-            const existingCell = cellMap.get(op.cell_id)
-            if (!existingCell) {
-                errors.push({
-                    type: "update",
-                    cellId: op.cell_id,
-                    message: `Cell with id="${op.cell_id}" not found`,
-                })
-                continue
+                for (let j = 0; j < searchLines.length; j++) {
+                    const originalTrimmed = resultLines[i + j].trim()
+                    const searchTrimmed = searchLines[j].trim()
+
+                    if (originalTrimmed !== searchTrimmed) {
+                        matches = false
+                        break
+                    }
+                }
+
+                if (matches) {
+                    matchStartLine = i
+                    matchEndLine = i + searchLines.length
+                    matchFound = true
+                    break
+                }
             }
+        }
 
-            if (!op.new_xml) {
-                errors.push({
-                    type: "update",
-                    cellId: op.cell_id,
-                    message: "new_xml is required for update operation",
-                })
-                continue
+        // Third try: substring match as last resort (for single-line XML)
+        if (!matchFound) {
+            // Try to find as a substring in the entire content
+            const searchStr = search.trim()
+            const resultStr = result
+            const index = resultStr.indexOf(searchStr)
+
+            if (index !== -1) {
+                // Found as substring - replace it
+                result =
+                    resultStr.substring(0, index) +
+                    replace.trim() +
+                    resultStr.substring(index + searchStr.length)
+                // Re-format after substring replacement
+                result = formatXML(result)
+                continue // Skip the line-based replacement below
             }
+        }
 
-            // Parse the new XML
-            const newDoc = parser.parseFromString(
-                `<wrapper>${op.new_xml}</wrapper>`,
-                "text/xml",
-            )
-            const newCell = newDoc.querySelector("mxCell")
-            if (!newCell) {
-                errors.push({
-                    type: "update",
-                    cellId: op.cell_id,
-                    message: "new_xml must contain an mxCell element",
-                })
-                continue
+        // Fourth try: character frequency match (attribute-order agnostic)
+        // This handles cases where the model generates XML with different attribute order
+        if (!matchFound) {
+            for (
+                let i = startLineNum;
+                i <= resultLines.length - searchLines.length;
+                i++
+            ) {
+                let matches = true
+
+                for (let j = 0; j < searchLines.length; j++) {
+                    if (
+                        !sameCharFrequency(resultLines[i + j], searchLines[j])
+                    ) {
+                        matches = false
+                        break
+                    }
+                }
+
+                if (matches) {
+                    matchStartLine = i
+                    matchEndLine = i + searchLines.length
+                    matchFound = true
+                    break
+                }
             }
+        }
 
-            // Validate ID matches
-            const newCellId = newCell.getAttribute("id")
-            if (newCellId !== op.cell_id) {
-                errors.push({
-                    type: "update",
-                    cellId: op.cell_id,
-                    message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"`,
-                })
-                continue
+        // Fifth try: Match by mxCell id attribute
+        // Extract id from search pattern and find the element with that id
+        if (!matchFound) {
+            const idMatch = search.match(/id="([^"]+)"/)
+            if (idMatch) {
+                const searchId = idMatch[1]
+                // Find lines that contain this id
+                for (let i = startLineNum; i < resultLines.length; i++) {
+                    if (resultLines[i].includes(`id="${searchId}"`)) {
+                        // Found the element with matching id
+                        // Now find the extent of this element (it might span multiple lines)
+                        let endLine = i + 1
+                        const line = resultLines[i].trim()
+
+                        // Check if it's a self-closing tag or has children
+                        if (!line.endsWith("/>")) {
+                            // Find the closing tag or the end of the mxCell block
+                            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
+                    }
+                }
             }
+        }
 
-            // Import and replace the node
-            const importedNode = doc.importNode(newCell, true)
-            existingCell.parentNode?.replaceChild(importedNode, existingCell)
+        // 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()
 
-            // Update the map with the new element
-            cellMap.set(op.cell_id, importedNode)
-        } else if (op.type === "add") {
-            // Check if ID already exists
-            if (cellMap.has(op.cell_id)) {
-                errors.push({
-                    type: "add",
-                    cellId: op.cell_id,
-                    message: `Cell with id="${op.cell_id}" already exists`,
-                })
-                continue
+                        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
+                    }
+                }
             }
+        }
 
-            if (!op.new_xml) {
-                errors.push({
-                    type: "add",
-                    cellId: op.cell_id,
-                    message: "new_xml is required for add operation",
-                })
-                continue
-            }
+        // 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)
 
-            // Parse the new XML
-            const newDoc = parser.parseFromString(
-                `<wrapper>${op.new_xml}</wrapper>`,
-                "text/xml",
-            )
-            const newCell = newDoc.querySelector("mxCell")
-            if (!newCell) {
-                errors.push({
-                    type: "add",
-                    cellId: op.cell_id,
-                    message: "new_xml must contain an mxCell element",
-                })
-                continue
-            }
-
-            // Validate ID matches
-            const newCellId = newCell.getAttribute("id")
-            if (newCellId !== op.cell_id) {
-                errors.push({
-                    type: "add",
-                    cellId: op.cell_id,
-                    message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"`,
-                })
-                continue
-            }
-
-            // Import and append the node
-            const importedNode = doc.importNode(newCell, true)
-            root.appendChild(importedNode)
-
-            // Add to map
-            cellMap.set(op.cell_id, importedNode)
-        } else if (op.type === "delete") {
-            const existingCell = cellMap.get(op.cell_id)
-            if (!existingCell) {
-                errors.push({
-                    type: "delete",
-                    cellId: op.cell_id,
-                    message: `Cell with id="${op.cell_id}" not found`,
-                })
-                continue
-            }
-
-            // Check for edges referencing this cell (warning only, still delete)
-            const referencingEdges = root.querySelectorAll(
-                `mxCell[source="${op.cell_id}"], mxCell[target="${op.cell_id}"]`,
-            )
-            if (referencingEdges.length > 0) {
-                const edgeIds = Array.from(referencingEdges)
-                    .map((e) => e.getAttribute("id"))
-                    .join(", ")
-                console.warn(
-                    `[applyDiagramOperations] Deleting cell "${op.cell_id}" which is referenced by edges: ${edgeIds}`,
+            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(" "),
                 )
-            }
 
-            // Remove the node
-            existingCell.parentNode?.removeChild(existingCell)
-            cellMap.delete(op.cell_id)
+                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.`,
+            )
+        }
+
+        // Replace the matched lines
+        const replaceLines = replace.split("\n")
+
+        // Remove trailing empty line if exists
+        if (replaceLines[replaceLines.length - 1] === "") {
+            replaceLines.pop()
+        }
+
+        // Perform the replacement
+        const newResultLines = [
+            ...resultLines.slice(0, matchStartLine),
+            ...replaceLines,
+            ...resultLines.slice(matchEndLine),
+        ]
+
+        result = newResultLines.join("\n")
     }
 
-    // Serialize back to string
-    const serializer = new XMLSerializer()
-    const result = serializer.serializeToString(doc)
-
-    return { result, errors }
+    return result
 }
 
 // ============================================================================
@@ -782,9 +808,7 @@ export function validateMxCellStructure(xml: string): string | null {
 
     // 2. Check for duplicate structural attributes
     const dupAttrError = checkDuplicateAttributes(xml)
-    if (dupAttrError) {
-        return dupAttrError
-    }
+    if (dupAttrError) return dupAttrError
 
     // 3. Check for unescaped < in attribute values
     const attrValuePattern = /=\s*"([^"]*)"/g
@@ -798,21 +822,15 @@ export function validateMxCellStructure(xml: string): string | null {
 
     // 4. Check for duplicate IDs
     const dupIdError = checkDuplicateIds(xml)
-    if (dupIdError) {
-        return dupIdError
-    }
+    if (dupIdError) return dupIdError
 
     // 5. Check for tag mismatches
     const tagMismatchError = checkTagMismatches(xml)
-    if (tagMismatchError) {
-        return tagMismatchError
-    }
+    if (tagMismatchError) return tagMismatchError
 
     // 6. Check invalid character references
     const charRefError = checkCharacterReferences(xml)
-    if (charRefError) {
-        return charRefError
-    }
+    if (charRefError) return charRefError
 
     // 7. Check for invalid comment syntax (-- inside comments)
     const commentPattern = /<!--([\s\S]*?)-->/g
@@ -825,9 +843,7 @@ export function validateMxCellStructure(xml: string): string | null {
 
     // 8. Check for unescaped entity references and invalid entity names
     const entityError = checkEntityReferences(xml)
-    if (entityError) {
-        return entityError
-    }
+    if (entityError) return entityError
 
     // 9. Check for empty id attributes on mxCell
     if (/<mxCell[^>]*\sid\s*=\s*["']\s*["'][^>]*>/g.test(xml)) {
@@ -836,9 +852,7 @@ export function validateMxCellStructure(xml: string): string | null {
 
     // 10. Check for nested mxCell tags
     const nestedCellError = checkNestedMxCells(xml)
-    if (nestedCellError) {
-        return nestedCellError
-    }
+    if (nestedCellError) return nestedCellError
 
     return null
 }
@@ -1043,56 +1057,12 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
     // This handles both opening and closing tags
     const hasCellTags = /<\/?Cell[\s>]/i.test(fixed)
     if (hasCellTags) {
-        console.log("[autoFixXml] Step 8: Found <Cell> tags to fix")
-        const beforeFix = fixed
         fixed = fixed.replace(/<Cell(\s)/gi, "<mxCell$1")
         fixed = fixed.replace(/<Cell>/gi, "<mxCell>")
         fixed = fixed.replace(/<\/Cell>/gi, "</mxCell>")
-        if (beforeFix !== fixed) {
-            console.log("[autoFixXml] Step 8: Fixed <Cell> tags")
-        }
         fixes.push("Fixed <Cell> tags to <mxCell>")
     }
 
-    // 8b. Remove non-draw.io tags (LLM sometimes includes Claude's function calling XML)
-    // Valid draw.io tags: mxfile, diagram, mxGraphModel, root, mxCell, mxGeometry, mxPoint, Array, Object
-    const validDrawioTags = new Set([
-        "mxfile",
-        "diagram",
-        "mxGraphModel",
-        "root",
-        "mxCell",
-        "mxGeometry",
-        "mxPoint",
-        "Array",
-        "Object",
-        "mxRectangle",
-    ])
-    const foreignTagPattern = /<\/?([a-zA-Z][a-zA-Z0-9_]*)[^>]*>/g
-    let foreignMatch
-    const foreignTags = new Set<string>()
-    while ((foreignMatch = foreignTagPattern.exec(fixed)) !== null) {
-        const tagName = foreignMatch[1]
-        if (!validDrawioTags.has(tagName)) {
-            foreignTags.add(tagName)
-        }
-    }
-    if (foreignTags.size > 0) {
-        console.log(
-            "[autoFixXml] Step 8b: Found foreign tags:",
-            Array.from(foreignTags),
-        )
-        for (const tag of foreignTags) {
-            // Remove opening tags (with or without attributes)
-            fixed = fixed.replace(new RegExp(`<${tag}[^>]*>`, "gi"), "")
-            // Remove closing tags
-            fixed = fixed.replace(new RegExp(`</${tag}>`, "gi"), "")
-        }
-        fixes.push(
-            `Removed foreign tags: ${Array.from(foreignTags).join(", ")}`,
-        )
-    }
-
     // 9. Fix common closing tag typos
     const tagTypos = [
         { wrong: /<\/mxElement>/gi, right: "</mxCell>", name: "</mxElement>" },
@@ -1158,98 +1128,6 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
         }
     }
 
-    // 10b. Remove extra closing tags (more closes than opens)
-    // Need to properly count self-closing tags (they don't need closing tags)
-    const tagCounts = new Map<
-        string,
-        { opens: number; closes: number; selfClosing: number }
-    >()
-    // Match full tags to detect self-closing by checking if ends with />
-    const fullTagPattern = /<(\/?[a-zA-Z][a-zA-Z0-9]*)[^>]*>/g
-    let tagCountMatch
-    while ((tagCountMatch = fullTagPattern.exec(fixed)) !== null) {
-        const fullMatch = tagCountMatch[0] // e.g., "<mxCell .../>" or "</mxCell>"
-        const tagPart = tagCountMatch[1] // e.g., "mxCell" or "/mxCell"
-        const isClosing = tagPart.startsWith("/")
-        const isSelfClosing = fullMatch.endsWith("/>")
-        const tagName = isClosing ? tagPart.slice(1) : tagPart
-
-        let counts = tagCounts.get(tagName)
-        if (!counts) {
-            counts = { opens: 0, closes: 0, selfClosing: 0 }
-            tagCounts.set(tagName, counts)
-        }
-        if (isClosing) {
-            counts.closes++
-        } else if (isSelfClosing) {
-            counts.selfClosing++
-        } else {
-            counts.opens++
-        }
-    }
-
-    // Log tag counts for debugging
-    for (const [tagName, counts] of tagCounts) {
-        if (
-            tagName === "mxCell" ||
-            tagName === "mxGeometry" ||
-            counts.opens !== counts.closes
-        ) {
-            console.log(
-                `[autoFixXml] Step 10b: ${tagName} - opens: ${counts.opens}, closes: ${counts.closes}, selfClosing: ${counts.selfClosing}`,
-            )
-        }
-    }
-
-    // Find tags with extra closing tags (self-closing tags are balanced, don't need closing)
-    for (const [tagName, counts] of tagCounts) {
-        const extraCloses = counts.closes - counts.opens // Only compare opens vs closes (self-closing are balanced)
-        if (extraCloses > 0) {
-            console.log(
-                `[autoFixXml] Step 10b: ${tagName} has ${counts.opens} opens, ${counts.closes} closes, removing ${extraCloses} extra`,
-            )
-            // Remove extra closing tags from the end
-            let removed = 0
-            const closeTagPattern = new RegExp(`</${tagName}>`, "g")
-            const matches = [...fixed.matchAll(closeTagPattern)]
-            // Remove from the end (last occurrences are likely the extras)
-            for (
-                let i = matches.length - 1;
-                i >= 0 && removed < extraCloses;
-                i--
-            ) {
-                const match = matches[i]
-                const idx = match.index ?? 0
-                fixed = fixed.slice(0, idx) + fixed.slice(idx + match[0].length)
-                removed++
-            }
-            if (removed > 0) {
-                console.log(
-                    `[autoFixXml] Step 10b: Removed ${removed} extra </${tagName}>`,
-                )
-                fixes.push(
-                    `Removed ${removed} extra </${tagName}> closing tag(s)`,
-                )
-            }
-        }
-    }
-
-    // 10c. Remove trailing garbage after last XML tag (e.g., stray backslashes, text)
-    // Find the last valid closing tag or self-closing tag
-    const closingTagPattern = /<\/[a-zA-Z][a-zA-Z0-9]*>|\/>/g
-    let lastValidTagEnd = -1
-    let closingMatch
-    while ((closingMatch = closingTagPattern.exec(fixed)) !== null) {
-        lastValidTagEnd = closingMatch.index + closingMatch[0].length
-    }
-    if (lastValidTagEnd > 0 && lastValidTagEnd < fixed.length) {
-        const trailing = fixed.slice(lastValidTagEnd).trim()
-        if (trailing) {
-            fixed = fixed.slice(0, lastValidTagEnd)
-            fixes.push("Removed trailing garbage after last XML tag")
-        }
-    }
-
     // 11. Fix nested mxCell by flattening
     // Pattern A: <mxCell id="X">...<mxCell id="X">...</mxCell></mxCell> (duplicate ID)
     // Pattern B: <mxCell id="X">...<mxCell id="Y">...</mxCell></mxCell> (different ID - true nesting)
@@ -1459,26 +1337,16 @@ export function validateAndFixXml(xml: string): {
 
     // Try to fix
     const { fixed, fixes } = autoFixXml(xml)
-    console.log("[validateAndFixXml] Fixes applied:", fixes)
 
     // Validate the fixed version
     error = validateMxCellStructure(fixed)
-    if (error) {
-        console.log("[validateAndFixXml] Still invalid after fix:", error)
-    }
 
     if (!error) {
         return { valid: true, error: null, fixed, fixes }
     }
 
-    // Still invalid after fixes - but return the partially fixed XML
-    // so we can see what was fixed and what error remains
-    return {
-        valid: false,
-        error,
-        fixed: fixes.length > 0 ? fixed : null,
-        fixes,
-    }
+    // Still invalid after fixes
+    return { valid: false, error, fixed: null, fixes }
 }
 
 export function extractDiagramXML(xml_svg_string: string): string {

package-lock.json

@@ -1,19 +1,18 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.4.3",
+    "version": "0.4.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "next-ai-draw-io",
-            "version": "0.4.3",
+            "version": "0.4.0",
             "license": "Apache-2.0",
             "dependencies": {
                 "@ai-sdk/amazon-bedrock": "^3.0.70",
                 "@ai-sdk/anthropic": "^2.0.44",
                 "@ai-sdk/azure": "^2.0.69",
                 "@ai-sdk/deepseek": "^1.0.30",
-                "@ai-sdk/gateway": "^2.0.21",
                 "@ai-sdk/google": "^2.0.0",
                 "@ai-sdk/openai": "^2.0.19",
                 "@ai-sdk/react": "^2.0.107",
@@ -41,7 +40,6 @@
                 "clsx": "^2.1.1",
                 "js-tiktoken": "^1.0.21",
                 "jsdom": "^26.0.0",
-                "jsonrepair": "^3.13.1",
                 "lucide-react": "^0.483.0",
                 "motion": "^12.23.25",
                 "next": "^16.0.7",
@@ -63,7 +61,7 @@
             },
             "devDependencies": {
                 "@anthropic-ai/tokenizer": "^0.0.4",
-                "@biomejs/biome": "^2.3.8",
+                "@biomejs/biome": "2.3.8",
                 "@tailwindcss/postcss": "^4",
                 "@tailwindcss/typography": "^0.5.19",
                 "@types/node": "^20",
@@ -200,13 +198,13 @@
             }
         },
         "node_modules/@ai-sdk/gateway": {
-            "version": "2.0.21",
-            "resolved": "https://registry.npmjs.org/@ai-sdk/gateway/-/gateway-2.0.21.tgz",
-            "integrity": "sha512-BwV7DU/lAm3Xn6iyyvZdWgVxgLu3SNXzl5y57gMvkW4nGhAOV5269IrJzQwGt03bb107sa6H6uJwWxc77zXoGA==",
+            "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.19",
+                "@ai-sdk/provider-utils": "3.0.18",
                 "@vercel/oidc": "3.0.5"
             },
             "engines": {
@@ -216,23 +214,6 @@
                 "zod": "^3.25.76 || ^4.1.8"
             }
         },
-        "node_modules/@ai-sdk/gateway/node_modules/@ai-sdk/provider-utils": {
-            "version": "3.0.19",
-            "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-3.0.19.tgz",
-            "integrity": "sha512-W41Wc9/jbUVXVwCN/7bWa4IKe8MtxO3EyA0Hfhx6grnmiYlCvpI8neSYWFE0zScXJkgA/YK3BRybzgyiXuu6JA==",
-            "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/google": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/@ai-sdk/google/-/google-2.0.0.tgz",
@@ -6148,23 +6129,6 @@
                 "zod": "^3.25.76 || ^4.1.8"
             }
         },
-        "node_modules/ai/node_modules/@ai-sdk/gateway": {
-            "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.18",
-                "@vercel/oidc": "3.0.5"
-            },
-            "engines": {
-                "node": ">=18"
-            },
-            "peerDependencies": {
-                "zod": "^3.25.76 || ^4.1.8"
-            }
-        },
         "node_modules/ajv": {
             "version": "6.12.6",
             "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -9235,15 +9199,6 @@
                 "node": ">=6"
             }
         },
-        "node_modules/jsonrepair": {
-            "version": "3.13.1",
-            "resolved": "https://registry.npmjs.org/jsonrepair/-/jsonrepair-3.13.1.tgz",
-            "integrity": "sha512-WJeiE0jGfxYmtLwBTEk8+y/mYcaleyLXWaqp5bJu0/ZTSeG0KQq/wWQ8pmnkKenEdN6pdnn6QtcoSUkbqDHWNw==",
-            "license": "ISC",
-            "bin": {
-                "jsonrepair": "bin/cli.js"
-            }
-        },
         "node_modules/jsx-ast-utils": {
             "version": "3.3.5",
             "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.4.3",
+    "version": "0.4.0",
     "license": "Apache-2.0",
     "private": true,
     "scripts": {
@@ -17,7 +17,6 @@
         "@ai-sdk/anthropic": "^2.0.44",
         "@ai-sdk/azure": "^2.0.69",
         "@ai-sdk/deepseek": "^1.0.30",
-        "@ai-sdk/gateway": "^2.0.21",
         "@ai-sdk/google": "^2.0.0",
         "@ai-sdk/openai": "^2.0.19",
         "@ai-sdk/react": "^2.0.107",
@@ -45,7 +44,6 @@
         "clsx": "^2.1.1",
         "js-tiktoken": "^1.0.21",
         "jsdom": "^26.0.0",
-        "jsonrepair": "^3.13.1",
         "lucide-react": "^0.483.0",
         "motion": "^12.23.25",
         "next": "^16.0.7",
@@ -73,7 +71,7 @@
     },
     "devDependencies": {
         "@anthropic-ai/tokenizer": "^0.0.4",
-        "@biomejs/biome": "^2.3.8",
+        "@biomejs/biome": "2.3.8",
         "@tailwindcss/postcss": "^4",
         "@tailwindcss/typography": "^0.5.19",
         "@types/node": "^20",

packages/mcp-server/README.md

@@ -1,162 +0,0 @@
-# Next AI Draw.io MCP Server
-
-MCP (Model Context Protocol) server that enables AI agents like Claude Desktop and Cursor to generate and edit draw.io diagrams with **real-time browser preview**.
-
-**Self-contained** - includes an embedded HTTP server, no external dependencies required.
-
-## Quick Start
-
-```json
-{
-  "mcpServers": {
-    "drawio": {
-      "command": "npx",
-      "args": ["@next-ai-drawio/mcp-server@latest"]
-    }
-  }
-}
-```
-
-## Installation
-
-### Claude Desktop
-
-Add to your Claude Desktop config (`~/Library/Application Support/Claude/claude_desktop_config.json` on macOS):
-
-```json
-{
-  "mcpServers": {
-    "drawio": {
-      "command": "npx",
-      "args": ["@next-ai-drawio/mcp-server@latest"]
-    }
-  }
-}
-```
-
-### VS Code
-
-Add to your VS Code settings (`.vscode/mcp.json` in workspace or user settings):
-
-```json
-{
-  "mcpServers": {
-    "drawio": {
-      "command": "npx",
-      "args": ["@next-ai-drawio/mcp-server@latest"]
-    }
-  }
-}
-```
-
-### Cursor
-
-Add to Cursor MCP config (`~/.cursor/mcp.json`):
-
-```json
-{
-  "mcpServers": {
-    "drawio": {
-      "command": "npx",
-      "args": ["@next-ai-drawio/mcp-server@latest"]
-    }
-  }
-}
-```
-
-### Claude Code CLI
-
-```bash
-claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
-```
-
-### Other MCP Clients
-
-Use the standard MCP configuration with:
-- **Command**: `npx`
-- **Args**: `["@next-ai-drawio/mcp-server@latest"]`
-
-## Usage
-
-1. Restart your MCP client after updating config
-2. Ask the AI to create a diagram:
-   > "Create a flowchart showing user authentication with login, MFA, and session management"
-3. The diagram appears in your browser in real-time!
-
-## Features
-
-- **Real-time Preview**: Diagrams appear and update in your browser as the AI creates them
-- **Natural Language**: Describe diagrams in plain text - flowcharts, architecture diagrams, etc.
-- **Edit Support**: Modify existing diagrams with natural language instructions
-- **Export**: Save diagrams as `.drawio` files
-- **Self-contained**: Embedded server, works offline (except draw.io UI which loads from embed.diagrams.net)
-
-## Available Tools
-
-| Tool | Description |
-|------|-------------|
-| `start_session` | Opens browser with real-time diagram preview |
-| `display_diagram` | Create a new diagram from XML |
-| `edit_diagram` | Edit diagram by ID-based operations (update/add/delete cells) |
-| `get_diagram` | Get the current diagram XML |
-| `export_diagram` | Save diagram to a `.drawio` file |
-
-## How It Works
-
-```
-┌─────────────────┐     stdio      ┌─────────────────┐
-│  Claude Desktop │ <───────────> │   MCP Server    │
-│    (AI Agent)   │               │  (this package) │
-└─────────────────┘               └────────┬────────┘
-                                          │
-                                 ┌────────▼────────┐
-                                 │ Embedded HTTP   │
-                                 │ Server (:6002)  │
-                                 └────────┬────────┘
-                                          │
-                                 ┌────────▼────────┐
-                                 │  User's Browser │
-                                 │ (draw.io embed) │
-                                 └─────────────────┘
-```
-
-1. **MCP Server** receives tool calls from Claude via stdio
-2. **Embedded HTTP Server** serves the draw.io UI and handles state
-3. **Browser** shows real-time diagram updates via polling
-
-## Configuration
-
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `PORT` | `6002` | Port for the embedded HTTP server |
-
-## Troubleshooting
-
-### Port already in use
-
-If port 6002 is in use, the server will automatically try the next available port (up to 6020).
-
-Or set a custom port:
-```json
-{
-  "mcpServers": {
-    "drawio": {
-      "command": "npx",
-      "args": ["@next-ai-drawio/mcp-server@latest"],
-      "env": { "PORT": "6003" }
-    }
-  }
-}
-```
-
-### "No active session"
-
-Call `start_session` first to open the browser window.
-
-### Browser not updating
-
-Check that the browser URL has the `?mcp=` query parameter. The MCP session ID connects the browser to the server.
-
-## License
-
-Apache-2.0

packages/mcp-server/package.json

@@ -1,55 +0,0 @@
-{
-    "name": "@next-ai-drawio/mcp-server",
-    "version": "0.1.2",
-    "description": "MCP server for Next AI Draw.io - AI-powered diagram generation with real-time browser preview",
-    "type": "module",
-    "main": "dist/index.js",
-    "bin": {
-        "next-ai-drawio-mcp": "./dist/index.js"
-    },
-    "scripts": {
-        "build": "tsc",
-        "dev": "tsx watch src/index.ts",
-        "start": "node dist/index.js",
-        "prepublishOnly": "npm run build"
-    },
-    "keywords": [
-        "mcp",
-        "drawio",
-        "diagram",
-        "ai",
-        "claude",
-        "model-context-protocol"
-    ],
-    "author": "Biki-dev",
-    "license": "Apache-2.0",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/Biki-dev/next-ai-draw-io",
-        "directory": "packages/mcp-server"
-    },
-    "homepage": "https://next-ai-drawio.jiang.jp",
-    "bugs": {
-        "url": "https://github.com/Biki-dev/next-ai-draw-io/issues"
-    },
-    "publishConfig": {
-        "access": "public"
-    },
-    "dependencies": {
-        "@modelcontextprotocol/sdk": "^1.0.4",
-        "linkedom": "^0.18.0",
-        "open": "^10.1.0",
-        "zod": "^3.24.0"
-    },
-    "devDependencies": {
-        "@types/node": "^20",
-        "tsx": "^4.19.0",
-        "typescript": "^5"
-    },
-    "engines": {
-        "node": ">=18"
-    },
-    "files": [
-        "dist"
-    ]
-}

packages/mcp-server/src/diagram-operations.ts

@@ -1,219 +0,0 @@
-/**
- * ID-based diagram operations
- * Copied from lib/utils.ts to avoid cross-package imports
- */
-
-export interface DiagramOperation {
-    type: "update" | "add" | "delete"
-    cell_id: string
-    new_xml?: string
-}
-
-export interface OperationError {
-    type: "update" | "add" | "delete"
-    cellId: string
-    message: string
-}
-
-export interface ApplyOperationsResult {
-    result: string
-    errors: OperationError[]
-}
-
-/**
- * Apply diagram operations (update/add/delete) using ID-based lookup.
- * This replaces the text-matching approach with direct DOM manipulation.
- *
- * @param xmlContent - The full mxfile XML content
- * @param operations - Array of operations to apply
- * @returns Object with result XML and any errors
- */
-export function applyDiagramOperations(
-    xmlContent: string,
-    operations: DiagramOperation[],
-): ApplyOperationsResult {
-    const errors: OperationError[] = []
-
-    // Parse the XML
-    const parser = new DOMParser()
-    const doc = parser.parseFromString(xmlContent, "text/xml")
-
-    // Check for parse errors
-    const parseError = doc.querySelector("parsererror")
-    if (parseError) {
-        return {
-            result: xmlContent,
-            errors: [
-                {
-                    type: "update",
-                    cellId: "",
-                    message: `XML parse error: ${parseError.textContent}`,
-                },
-            ],
-        }
-    }
-
-    // Find the root element (inside mxGraphModel)
-    const root = doc.querySelector("root")
-    if (!root) {
-        return {
-            result: xmlContent,
-            errors: [
-                {
-                    type: "update",
-                    cellId: "",
-                    message: "Could not find <root> element in XML",
-                },
-            ],
-        }
-    }
-
-    // Build a map of cell IDs to elements
-    const cellMap = new Map<string, Element>()
-    root.querySelectorAll("mxCell").forEach((cell) => {
-        const id = cell.getAttribute("id")
-        if (id) cellMap.set(id, cell)
-    })
-
-    // Process each operation
-    for (const op of operations) {
-        if (op.type === "update") {
-            const existingCell = cellMap.get(op.cell_id)
-            if (!existingCell) {
-                errors.push({
-                    type: "update",
-                    cellId: op.cell_id,
-                    message: `Cell with id="${op.cell_id}" not found`,
-                })
-                continue
-            }
-
-            if (!op.new_xml) {
-                errors.push({
-                    type: "update",
-                    cellId: op.cell_id,
-                    message: "new_xml is required for update operation",
-                })
-                continue
-            }
-
-            // Parse the new XML
-            const newDoc = parser.parseFromString(
-                `<wrapper>${op.new_xml}</wrapper>`,
-                "text/xml",
-            )
-            const newCell = newDoc.querySelector("mxCell")
-            if (!newCell) {
-                errors.push({
-                    type: "update",
-                    cellId: op.cell_id,
-                    message: "new_xml must contain an mxCell element",
-                })
-                continue
-            }
-
-            // Validate ID matches
-            const newCellId = newCell.getAttribute("id")
-            if (newCellId !== op.cell_id) {
-                errors.push({
-                    type: "update",
-                    cellId: op.cell_id,
-                    message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"`,
-                })
-                continue
-            }
-
-            // Import and replace the node
-            const importedNode = doc.importNode(newCell, true)
-            existingCell.parentNode?.replaceChild(importedNode, existingCell)
-
-            // Update the map with the new element
-            cellMap.set(op.cell_id, importedNode)
-        } else if (op.type === "add") {
-            // Check if ID already exists
-            if (cellMap.has(op.cell_id)) {
-                errors.push({
-                    type: "add",
-                    cellId: op.cell_id,
-                    message: `Cell with id="${op.cell_id}" already exists`,
-                })
-                continue
-            }
-
-            if (!op.new_xml) {
-                errors.push({
-                    type: "add",
-                    cellId: op.cell_id,
-                    message: "new_xml is required for add operation",
-                })
-                continue
-            }
-
-            // Parse the new XML
-            const newDoc = parser.parseFromString(
-                `<wrapper>${op.new_xml}</wrapper>`,
-                "text/xml",
-            )
-            const newCell = newDoc.querySelector("mxCell")
-            if (!newCell) {
-                errors.push({
-                    type: "add",
-                    cellId: op.cell_id,
-                    message: "new_xml must contain an mxCell element",
-                })
-                continue
-            }
-
-            // Validate ID matches
-            const newCellId = newCell.getAttribute("id")
-            if (newCellId !== op.cell_id) {
-                errors.push({
-                    type: "add",
-                    cellId: op.cell_id,
-                    message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"`,
-                })
-                continue
-            }
-
-            // Import and append the node
-            const importedNode = doc.importNode(newCell, true)
-            root.appendChild(importedNode)
-
-            // Add to map
-            cellMap.set(op.cell_id, importedNode)
-        } else if (op.type === "delete") {
-            const existingCell = cellMap.get(op.cell_id)
-            if (!existingCell) {
-                errors.push({
-                    type: "delete",
-                    cellId: op.cell_id,
-                    message: `Cell with id="${op.cell_id}" not found`,
-                })
-                continue
-            }
-
-            // Check for edges referencing this cell (warning only, still delete)
-            const referencingEdges = root.querySelectorAll(
-                `mxCell[source="${op.cell_id}"], mxCell[target="${op.cell_id}"]`,
-            )
-            if (referencingEdges.length > 0) {
-                const edgeIds = Array.from(referencingEdges)
-                    .map((e) => e.getAttribute("id"))
-                    .join(", ")
-                console.warn(
-                    `[applyDiagramOperations] Deleting cell "${op.cell_id}" which is referenced by edges: ${edgeIds}`,
-                )
-            }
-
-            // Remove the node
-            existingCell.parentNode?.removeChild(existingCell)
-            cellMap.delete(op.cell_id)
-        }
-    }
-
-    // Serialize back to string
-    const serializer = new XMLSerializer()
-    const result = serializer.serializeToString(doc)
-
-    return { result, errors }
-}

packages/mcp-server/src/http-server.ts

@@ -1,384 +0,0 @@
-/**
- * Embedded HTTP Server for MCP
- *
- * Serves a static HTML page with draw.io embed and handles state sync.
- * This eliminates the need for an external Next.js app.
- */
-
-import http from "node:http"
-import { log } from "./logger.js"
-
-interface SessionState {
-    xml: string
-    version: number
-    lastUpdated: Date
-}
-
-// In-memory state store (shared with MCP server in same process)
-export const stateStore = new Map<string, SessionState>()
-
-let server: http.Server | null = null
-let serverPort: number = 6002
-const MAX_PORT = 6020 // Don't retry beyond this port
-const SESSION_TTL = 60 * 60 * 1000 // 1 hour
-
-/**
- * Get state for a session
- */
-export function getState(sessionId: string): SessionState | undefined {
-    return stateStore.get(sessionId)
-}
-
-/**
- * Set state for a session
- */
-export function setState(sessionId: string, xml: string): number {
-    const existing = stateStore.get(sessionId)
-    const newVersion = (existing?.version || 0) + 1
-
-    stateStore.set(sessionId, {
-        xml,
-        version: newVersion,
-        lastUpdated: new Date(),
-    })
-
-    log.debug(`State updated: session=${sessionId}, version=${newVersion}`)
-    return newVersion
-}
-
-/**
- * Start the embedded HTTP server
- */
-export function startHttpServer(port: number = 6002): Promise<number> {
-    return new Promise((resolve, reject) => {
-        if (server) {
-            resolve(serverPort)
-            return
-        }
-
-        serverPort = port
-        server = http.createServer(handleRequest)
-
-        server.on("error", (err: NodeJS.ErrnoException) => {
-            if (err.code === "EADDRINUSE") {
-                if (port >= MAX_PORT) {
-                    reject(
-                        new Error(
-                            `No available ports in range 6002-${MAX_PORT}`,
-                        ),
-                    )
-                    return
-                }
-                log.info(`Port ${port} in use, trying ${port + 1}`)
-                server = null
-                startHttpServer(port + 1)
-                    .then(resolve)
-                    .catch(reject)
-            } else {
-                reject(err)
-            }
-        })
-
-        server.listen(port, () => {
-            serverPort = port
-            log.info(`Embedded HTTP server running on http://localhost:${port}`)
-            resolve(port)
-        })
-    })
-}
-
-/**
- * Stop the HTTP server
- */
-export function stopHttpServer(): void {
-    if (server) {
-        server.close()
-        server = null
-    }
-}
-
-/**
- * Clean up expired sessions
- */
-function cleanupExpiredSessions(): void {
-    const now = Date.now()
-    for (const [sessionId, state] of stateStore) {
-        if (now - state.lastUpdated.getTime() > SESSION_TTL) {
-            stateStore.delete(sessionId)
-            log.info(`Cleaned up expired session: ${sessionId}`)
-        }
-    }
-}
-
-// Run cleanup every 5 minutes
-setInterval(cleanupExpiredSessions, 5 * 60 * 1000)
-
-/**
- * Get the current server port
- */
-export function getServerPort(): number {
-    return serverPort
-}
-
-/**
- * Handle HTTP requests
- */
-function handleRequest(
-    req: http.IncomingMessage,
-    res: http.ServerResponse,
-): void {
-    const url = new URL(req.url || "/", `http://localhost:${serverPort}`)
-
-    // CORS headers for local development
-    res.setHeader("Access-Control-Allow-Origin", "*")
-    res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
-    res.setHeader("Access-Control-Allow-Headers", "Content-Type")
-
-    if (req.method === "OPTIONS") {
-        res.writeHead(204)
-        res.end()
-        return
-    }
-
-    // Route handling
-    if (url.pathname === "/" || url.pathname === "/index.html") {
-        serveHtml(req, res, url)
-    } else if (
-        url.pathname === "/api/state" ||
-        url.pathname === "/api/mcp/state"
-    ) {
-        handleStateApi(req, res, url)
-    } else if (
-        url.pathname === "/api/health" ||
-        url.pathname === "/api/mcp/health"
-    ) {
-        res.writeHead(200, { "Content-Type": "application/json" })
-        res.end(JSON.stringify({ status: "ok", mcp: true }))
-    } else {
-        res.writeHead(404)
-        res.end("Not Found")
-    }
-}
-
-/**
- * Serve the HTML page with draw.io embed
- */
-function serveHtml(
-    req: http.IncomingMessage,
-    res: http.ServerResponse,
-    url: URL,
-): void {
-    const sessionId = url.searchParams.get("mcp") || ""
-
-    res.writeHead(200, { "Content-Type": "text/html" })
-    res.end(getHtmlPage(sessionId))
-}
-
-/**
- * Handle state API requests
- */
-function handleStateApi(
-    req: http.IncomingMessage,
-    res: http.ServerResponse,
-    url: URL,
-): void {
-    if (req.method === "GET") {
-        const sessionId = url.searchParams.get("sessionId")
-        if (!sessionId) {
-            res.writeHead(400, { "Content-Type": "application/json" })
-            res.end(JSON.stringify({ error: "sessionId required" }))
-            return
-        }
-
-        const state = stateStore.get(sessionId)
-        res.writeHead(200, { "Content-Type": "application/json" })
-        res.end(
-            JSON.stringify({
-                xml: state?.xml || null,
-                version: state?.version || 0,
-                lastUpdated: state?.lastUpdated?.toISOString() || null,
-            }),
-        )
-    } else if (req.method === "POST") {
-        let body = ""
-        req.on("data", (chunk) => {
-            body += chunk
-        })
-        req.on("end", () => {
-            try {
-                const { sessionId, xml } = JSON.parse(body)
-                if (!sessionId) {
-                    res.writeHead(400, { "Content-Type": "application/json" })
-                    res.end(JSON.stringify({ error: "sessionId required" }))
-                    return
-                }
-
-                const version = setState(sessionId, xml)
-                res.writeHead(200, { "Content-Type": "application/json" })
-                res.end(JSON.stringify({ success: true, version }))
-            } catch {
-                res.writeHead(400, { "Content-Type": "application/json" })
-                res.end(JSON.stringify({ error: "Invalid JSON" }))
-            }
-        })
-    } else {
-        res.writeHead(405)
-        res.end("Method Not Allowed")
-    }
-}
-
-/**
- * Generate the HTML page with draw.io embed
- */
-function getHtmlPage(sessionId: string): string {
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Draw.io MCP - ${sessionId || "No Session"}</title>
-    <style>
-        * { margin: 0; padding: 0; box-sizing: border-box; }
-        html, body { width: 100%; height: 100%; overflow: hidden; }
-        #container { width: 100%; height: 100%; display: flex; flex-direction: column; }
-        #header {
-            padding: 8px 16px;
-            background: #1a1a2e;
-            color: #eee;
-            font-family: system-ui, sans-serif;
-            font-size: 14px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        #header .session { color: #888; font-size: 12px; }
-        #header .status { font-size: 12px; }
-        #header .status.connected { color: #4ade80; }
-        #header .status.disconnected { color: #f87171; }
-        #drawio { flex: 1; border: none; }
-    </style>
-</head>
-<body>
-    <div id="container">
-        <div id="header">
-            <div>
-                <strong>Draw.io MCP</strong>
-                <span class="session">${sessionId ? `Session: ${sessionId}` : "No MCP session"}</span>
-            </div>
-            <div id="status" class="status disconnected">Connecting...</div>
-        </div>
-        <iframe id="drawio" src="https://embed.diagrams.net/?embed=1&proto=json&spin=1&libraries=1"></iframe>
-    </div>
-
-    <script>
-        const sessionId = "${sessionId}";
-        const iframe = document.getElementById('drawio');
-        const statusEl = document.getElementById('status');
-
-        let currentVersion = 0;
-        let isDrawioReady = false;
-        let pendingXml = null;
-        let lastLoadedXml = null;
-
-        // Listen for messages from draw.io
-        window.addEventListener('message', (event) => {
-            if (event.origin !== 'https://embed.diagrams.net') return;
-
-            try {
-                const msg = JSON.parse(event.data);
-                handleDrawioMessage(msg);
-            } catch (e) {
-                // Ignore non-JSON messages
-            }
-        });
-
-        function handleDrawioMessage(msg) {
-            if (msg.event === 'init') {
-                isDrawioReady = true;
-                statusEl.textContent = 'Ready';
-                statusEl.className = 'status connected';
-
-                // Load pending XML if any
-                if (pendingXml) {
-                    loadDiagram(pendingXml);
-                    pendingXml = null;
-                }
-            } else if (msg.event === 'save') {
-                // User saved - push to state
-                if (msg.xml && msg.xml !== lastLoadedXml) {
-                    pushState(msg.xml);
-                }
-            } else if (msg.event === 'export') {
-                // Export completed
-                if (msg.data) {
-                    pushState(msg.data);
-                }
-            } else if (msg.event === 'autosave') {
-                // Autosave - push to state
-                if (msg.xml && msg.xml !== lastLoadedXml) {
-                    pushState(msg.xml);
-                }
-            }
-        }
-
-        function loadDiagram(xml) {
-            if (!isDrawioReady) {
-                pendingXml = xml;
-                return;
-            }
-
-            lastLoadedXml = xml;
-            iframe.contentWindow.postMessage(JSON.stringify({
-                action: 'load',
-                xml: xml,
-                autosave: 1
-            }), '*');
-        }
-
-        async function pushState(xml) {
-            if (!sessionId) return;
-
-            try {
-                const response = await fetch('/api/state', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ sessionId, xml })
-                });
-
-                if (response.ok) {
-                    const result = await response.json();
-                    currentVersion = result.version;
-                    lastLoadedXml = xml;
-                }
-            } catch (e) {
-                console.error('Failed to push state:', e);
-            }
-        }
-
-        async function pollState() {
-            if (!sessionId) return;
-
-            try {
-                const response = await fetch('/api/state?sessionId=' + encodeURIComponent(sessionId));
-                if (!response.ok) return;
-
-                const state = await response.json();
-
-                if (state.version && state.version > currentVersion && state.xml) {
-                    currentVersion = state.version;
-                    loadDiagram(state.xml);
-                }
-            } catch (e) {
-                console.error('Failed to poll state:', e);
-            }
-        }
-
-        // Start polling if we have a session
-        if (sessionId) {
-            pollState();
-            setInterval(pollState, 2000);
-        }
-    </script>
-</body>
-</html>`
-}

packages/mcp-server/src/index.ts

@@ -1,476 +0,0 @@
-#!/usr/bin/env node
-/**
- * MCP Server for Next AI Draw.io
- *
- * Enables AI agents (Claude Desktop, Cursor, etc.) to generate and edit
- * draw.io diagrams with real-time browser preview.
- *
- * Uses an embedded HTTP server - no external dependencies required.
- */
-
-// Setup DOM polyfill for Node.js (required for XML operations)
-import { DOMParser } from "linkedom"
-;(globalThis as any).DOMParser = DOMParser
-
-// Create XMLSerializer polyfill using outerHTML
-class XMLSerializerPolyfill {
-    serializeToString(node: any): string {
-        if (node.outerHTML !== undefined) {
-            return node.outerHTML
-        }
-        if (node.documentElement) {
-            return node.documentElement.outerHTML
-        }
-        return ""
-    }
-}
-;(globalThis as any).XMLSerializer = XMLSerializerPolyfill
-
-import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js"
-import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"
-import open from "open"
-import { z } from "zod"
-import {
-    applyDiagramOperations,
-    type DiagramOperation,
-} from "./diagram-operations.js"
-import {
-    getServerPort,
-    getState,
-    setState,
-    startHttpServer,
-} from "./http-server.js"
-import { log } from "./logger.js"
-
-// Server configuration
-const config = {
-    port: parseInt(process.env.PORT || "6002"),
-}
-
-// Session state (single session for simplicity)
-let currentSession: {
-    id: string
-    xml: string
-    version: number
-} | null = null
-
-// Create MCP server
-const server = new McpServer({
-    name: "next-ai-drawio",
-    version: "0.1.2",
-})
-
-// Register prompt with workflow guidance
-server.prompt(
-    "diagram-workflow",
-    "Guidelines for creating and editing draw.io diagrams",
-    () => ({
-        messages: [
-            {
-                role: "user",
-                content: {
-                    type: "text",
-                    text: `# Draw.io Diagram Workflow Guidelines
-
-## Creating a New Diagram
-1. Call start_session to open the browser preview
-2. Use display_diagram with complete mxGraphModel XML to create a new diagram
-
-## Adding Elements to Existing Diagram
-1. Use edit_diagram with "add" operation
-2. Provide a unique cell_id and complete mxCell XML
-3. No need to call get_diagram first - the server fetches latest state automatically
-
-## Modifying or Deleting Existing Elements
-1. FIRST call get_diagram to see current cell IDs and structure
-2. THEN call edit_diagram with "update" or "delete" operations
-3. For update, provide the cell_id and complete new mxCell XML
-
-## Important Notes
-- display_diagram REPLACES the entire diagram - only use for new diagrams
-- edit_diagram PRESERVES user's manual changes (fetches browser state first)
-- Always use unique cell_ids when adding elements (e.g., "shape-1", "arrow-2")`,
-                },
-            },
-        ],
-    }),
-)
-
-// Tool: start_session
-server.registerTool(
-    "start_session",
-    {
-        description:
-            "Start a new diagram session and open the browser for real-time preview. " +
-            "Starts an embedded server and opens a browser window with draw.io. " +
-            "The browser will show diagram updates as they happen.",
-        inputSchema: {},
-    },
-    async () => {
-        try {
-            // Start embedded HTTP server
-            const port = await startHttpServer(config.port)
-
-            // Create session
-            const sessionId = `mcp-${Date.now().toString(36)}-${Math.random().toString(36).substring(2, 8)}`
-            currentSession = {
-                id: sessionId,
-                xml: "",
-                version: 0,
-            }
-
-            // Open browser
-            const browserUrl = `http://localhost:${port}?mcp=${sessionId}`
-            await open(browserUrl)
-
-            log.info(`Started session ${sessionId}, browser at ${browserUrl}`)
-
-            return {
-                content: [
-                    {
-                        type: "text",
-                        text: `Session started successfully!\n\nSession ID: ${sessionId}\nBrowser URL: ${browserUrl}\n\nThe browser will now show real-time diagram updates.`,
-                    },
-                ],
-            }
-        } catch (error) {
-            const message =
-                error instanceof Error ? error.message : String(error)
-            log.error("start_session failed:", message)
-            return {
-                content: [{ type: "text", text: `Error: ${message}` }],
-                isError: true,
-            }
-        }
-    },
-)
-
-// Tool: display_diagram
-server.registerTool(
-    "display_diagram",
-    {
-        description:
-            "Display a NEW draw.io diagram from XML. REPLACES the entire diagram. " +
-            "Use this for creating new diagrams from scratch. " +
-            "To ADD elements to an existing diagram, use edit_diagram with 'add' operation instead. " +
-            "You should generate valid draw.io/mxGraph XML format.",
-        inputSchema: {
-            xml: z
-                .string()
-                .describe("The draw.io XML to display (mxGraphModel format)"),
-        },
-    },
-    async ({ xml }) => {
-        try {
-            if (!currentSession) {
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: "Error: No active session. Please call start_session first.",
-                        },
-                    ],
-                    isError: true,
-                }
-            }
-
-            log.info(`Displaying diagram, ${xml.length} chars`)
-
-            // Update session state
-            currentSession.xml = xml
-            currentSession.version++
-
-            // Push to embedded server state
-            setState(currentSession.id, xml)
-
-            log.info(`Diagram displayed successfully`)
-
-            return {
-                content: [
-                    {
-                        type: "text",
-                        text: `Diagram displayed successfully!\n\nThe diagram is now visible in your browser.\n\nXML length: ${xml.length} characters`,
-                    },
-                ],
-            }
-        } catch (error) {
-            const message =
-                error instanceof Error ? error.message : String(error)
-            log.error("display_diagram failed:", message)
-            return {
-                content: [{ type: "text", text: `Error: ${message}` }],
-                isError: true,
-            }
-        }
-    },
-)
-
-// Tool: edit_diagram
-server.registerTool(
-    "edit_diagram",
-    {
-        description:
-            "Edit the current diagram by ID-based operations (update/add/delete cells). " +
-            "ALWAYS fetches the latest state from browser first, so user's manual changes are preserved.\n\n" +
-            "IMPORTANT workflow:\n" +
-            "- For ADD operations: Can use directly - just provide new unique cell_id and new_xml.\n" +
-            "- For UPDATE/DELETE: Call get_diagram FIRST to see current cell IDs, then edit.\n\n" +
-            "Operations:\n" +
-            "- add: Add a new cell. Provide cell_id (new unique id) and new_xml.\n" +
-            "- update: Replace an existing cell by its id. Provide cell_id and complete new_xml.\n" +
-            "- delete: Remove a cell by its id. Only cell_id is needed.\n\n" +
-            "For add/update, new_xml must be a complete mxCell element including mxGeometry.",
-        inputSchema: {
-            operations: z
-                .array(
-                    z.object({
-                        type: z
-                            .enum(["update", "add", "delete"])
-                            .describe("Operation type"),
-                        cell_id: z.string().describe("The id of the mxCell"),
-                        new_xml: z
-                            .string()
-                            .optional()
-                            .describe(
-                                "Complete mxCell XML element (required for update/add)",
-                            ),
-                    }),
-                )
-                .describe("Array of operations to apply"),
-        },
-    },
-    async ({ operations }) => {
-        try {
-            if (!currentSession) {
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: "Error: No active session. Please call start_session first.",
-                        },
-                    ],
-                    isError: true,
-                }
-            }
-
-            // Fetch latest state from browser
-            const browserState = getState(currentSession.id)
-            if (browserState?.xml) {
-                currentSession.xml = browserState.xml
-                log.info("Fetched latest diagram state from browser")
-            }
-
-            if (!currentSession.xml) {
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: "Error: No diagram to edit. Please create a diagram first with display_diagram.",
-                        },
-                    ],
-                    isError: true,
-                }
-            }
-
-            log.info(`Editing diagram with ${operations.length} operation(s)`)
-
-            // Apply operations
-            const { result, errors } = applyDiagramOperations(
-                currentSession.xml,
-                operations as DiagramOperation[],
-            )
-
-            if (errors.length > 0) {
-                const errorMessages = errors
-                    .map((e) => `${e.type} ${e.cellId}: ${e.message}`)
-                    .join("\n")
-                log.warn(`Edit had ${errors.length} error(s): ${errorMessages}`)
-            }
-
-            // Update state
-            currentSession.xml = result
-            currentSession.version++
-
-            // Push to embedded server
-            setState(currentSession.id, result)
-
-            log.info(`Diagram edited successfully`)
-
-            const successMsg = `Diagram edited successfully!\n\nApplied ${operations.length} operation(s).`
-            const errorMsg =
-                errors.length > 0
-                    ? `\n\nWarnings:\n${errors.map((e) => `- ${e.type} ${e.cellId}: ${e.message}`).join("\n")}`
-                    : ""
-
-            return {
-                content: [
-                    {
-                        type: "text",
-                        text: successMsg + errorMsg,
-                    },
-                ],
-            }
-        } catch (error) {
-            const message =
-                error instanceof Error ? error.message : String(error)
-            log.error("edit_diagram failed:", message)
-            return {
-                content: [{ type: "text", text: `Error: ${message}` }],
-                isError: true,
-            }
-        }
-    },
-)
-
-// Tool: get_diagram
-server.registerTool(
-    "get_diagram",
-    {
-        description:
-            "Get the current diagram XML (fetches latest from browser, including user's manual edits). " +
-            "Call this BEFORE edit_diagram if you need to update or delete existing elements, " +
-            "so you can see the current cell IDs and structure.",
-    },
-    async () => {
-        try {
-            if (!currentSession) {
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: "Error: No active session. Please call start_session first.",
-                        },
-                    ],
-                    isError: true,
-                }
-            }
-
-            // Fetch latest state from browser
-            const browserState = getState(currentSession.id)
-            if (browserState?.xml) {
-                currentSession.xml = browserState.xml
-            }
-
-            if (!currentSession.xml) {
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: "No diagram exists yet. Use display_diagram to create one.",
-                        },
-                    ],
-                }
-            }
-
-            return {
-                content: [
-                    {
-                        type: "text",
-                        text: `Current diagram XML:\n\n${currentSession.xml}`,
-                    },
-                ],
-            }
-        } catch (error) {
-            const message =
-                error instanceof Error ? error.message : String(error)
-            log.error("get_diagram failed:", message)
-            return {
-                content: [{ type: "text", text: `Error: ${message}` }],
-                isError: true,
-            }
-        }
-    },
-)
-
-// Tool: export_diagram
-server.registerTool(
-    "export_diagram",
-    {
-        description: "Export the current diagram to a .drawio file.",
-        inputSchema: {
-            path: z
-                .string()
-                .describe(
-                    "File path to save the diagram (e.g., ./diagram.drawio)",
-                ),
-        },
-    },
-    async ({ path }) => {
-        try {
-            if (!currentSession) {
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: "Error: No active session. Please call start_session first.",
-                        },
-                    ],
-                    isError: true,
-                }
-            }
-
-            // Fetch latest state
-            const browserState = getState(currentSession.id)
-            if (browserState?.xml) {
-                currentSession.xml = browserState.xml
-            }
-
-            if (!currentSession.xml) {
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: "Error: No diagram to export. Please create a diagram first.",
-                        },
-                    ],
-                    isError: true,
-                }
-            }
-
-            const fs = await import("node:fs/promises")
-            const nodePath = await import("node:path")
-
-            let filePath = path
-            if (!filePath.endsWith(".drawio")) {
-                filePath = `${filePath}.drawio`
-            }
-
-            const absolutePath = nodePath.resolve(filePath)
-            await fs.writeFile(absolutePath, currentSession.xml, "utf-8")
-
-            log.info(`Diagram exported to ${absolutePath}`)
-
-            return {
-                content: [
-                    {
-                        type: "text",
-                        text: `Diagram exported successfully!\n\nFile: ${absolutePath}\nSize: ${currentSession.xml.length} characters`,
-                    },
-                ],
-            }
-        } catch (error) {
-            const message =
-                error instanceof Error ? error.message : String(error)
-            log.error("export_diagram failed:", message)
-            return {
-                content: [{ type: "text", text: `Error: ${message}` }],
-                isError: true,
-            }
-        }
-    },
-)
-
-// Start the MCP server
-async function main() {
-    log.info("Starting MCP server for Next AI Draw.io (embedded mode)...")
-
-    const transport = new StdioServerTransport()
-    await server.connect(transport)
-
-    log.info("MCP server running on stdio")
-}
-
-main().catch((error) => {
-    log.error("Fatal error:", error)
-    process.exit(1)
-})

packages/mcp-server/src/logger.ts

@@ -1,24 +0,0 @@
-/**
- * Logger for MCP server
- *
- * CRITICAL: MCP servers communicate via STDIO (stdin/stdout).
- * Using console.log() will corrupt the JSON-RPC protocol messages.
- * ALL logging MUST use console.error() which writes to stderr.
- */
-
-export const log = {
-    info: (msg: string, ...args: unknown[]) => {
-        console.error(`[MCP-DrawIO] [INFO] ${msg}`, ...args)
-    },
-    error: (msg: string, ...args: unknown[]) => {
-        console.error(`[MCP-DrawIO] [ERROR] ${msg}`, ...args)
-    },
-    debug: (msg: string, ...args: unknown[]) => {
-        if (process.env.DEBUG === "true") {
-            console.error(`[MCP-DrawIO] [DEBUG] ${msg}`, ...args)
-        }
-    },
-    warn: (msg: string, ...args: unknown[]) => {
-        console.error(`[MCP-DrawIO] [WARN] ${msg}`, ...args)
-    },
-}

packages/mcp-server/tsconfig.json

@@ -1,19 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "ES2022",
-        "module": "Node16",
-        "moduleResolution": "Node16",
-        "outDir": "./dist",
-        "rootDir": "./src",
-        "strict": true,
-        "esModuleInterop": true,
-        "skipLibCheck": true,
-        "forceConsistentCasingInFileNames": true,
-        "declaration": true,
-        "declarationMap": true,
-        "sourceMap": true,
-        "resolveJsonModule": true
-    },
-    "include": ["src/**/*"],
-    "exclude": ["node_modules", "dist"]
-}

scripts/test-diagram-operations.mjs

@@ -1,375 +0,0 @@
-/**
- * Simple test script for applyDiagramOperations function
- * Run with: node scripts/test-diagram-operations.mjs
- */
-
-import { JSDOM } from "jsdom"
-
-// Set up DOMParser for Node.js environment
-const dom = new JSDOM()
-globalThis.DOMParser = dom.window.DOMParser
-globalThis.XMLSerializer = dom.window.XMLSerializer
-
-// Import the function (we'll inline it since it's not ESM exported)
-function applyDiagramOperations(xmlContent, operations) {
-    const errors = []
-    const parser = new DOMParser()
-    const doc = parser.parseFromString(xmlContent, "text/xml")
-
-    const parseError = doc.querySelector("parsererror")
-    if (parseError) {
-        return {
-            result: xmlContent,
-            errors: [
-                {
-                    type: "update",
-                    cellId: "",
-                    message: `XML parse error: ${parseError.textContent}`,
-                },
-            ],
-        }
-    }
-
-    const root = doc.querySelector("root")
-    if (!root) {
-        return {
-            result: xmlContent,
-            errors: [
-                {
-                    type: "update",
-                    cellId: "",
-                    message: "Could not find <root> element in XML",
-                },
-            ],
-        }
-    }
-
-    const cellMap = new Map()
-    root.querySelectorAll("mxCell").forEach((cell) => {
-        const id = cell.getAttribute("id")
-        if (id) cellMap.set(id, cell)
-    })
-
-    for (const op of operations) {
-        if (op.type === "update") {
-            const existingCell = cellMap.get(op.cell_id)
-            if (!existingCell) {
-                errors.push({
-                    type: "update",
-                    cellId: op.cell_id,
-                    message: `Cell with id="${op.cell_id}" not found`,
-                })
-                continue
-            }
-            if (!op.new_xml) {
-                errors.push({
-                    type: "update",
-                    cellId: op.cell_id,
-                    message: "new_xml is required for update operation",
-                })
-                continue
-            }
-            const newDoc = parser.parseFromString(
-                `<wrapper>${op.new_xml}</wrapper>`,
-                "text/xml",
-            )
-            const newCell = newDoc.querySelector("mxCell")
-            if (!newCell) {
-                errors.push({
-                    type: "update",
-                    cellId: op.cell_id,
-                    message: "new_xml must contain an mxCell element",
-                })
-                continue
-            }
-            const newCellId = newCell.getAttribute("id")
-            if (newCellId !== op.cell_id) {
-                errors.push({
-                    type: "update",
-                    cellId: op.cell_id,
-                    message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"`,
-                })
-                continue
-            }
-            const importedNode = doc.importNode(newCell, true)
-            existingCell.parentNode?.replaceChild(importedNode, existingCell)
-            cellMap.set(op.cell_id, importedNode)
-        } else if (op.type === "add") {
-            if (cellMap.has(op.cell_id)) {
-                errors.push({
-                    type: "add",
-                    cellId: op.cell_id,
-                    message: `Cell with id="${op.cell_id}" already exists`,
-                })
-                continue
-            }
-            if (!op.new_xml) {
-                errors.push({
-                    type: "add",
-                    cellId: op.cell_id,
-                    message: "new_xml is required for add operation",
-                })
-                continue
-            }
-            const newDoc = parser.parseFromString(
-                `<wrapper>${op.new_xml}</wrapper>`,
-                "text/xml",
-            )
-            const newCell = newDoc.querySelector("mxCell")
-            if (!newCell) {
-                errors.push({
-                    type: "add",
-                    cellId: op.cell_id,
-                    message: "new_xml must contain an mxCell element",
-                })
-                continue
-            }
-            const newCellId = newCell.getAttribute("id")
-            if (newCellId !== op.cell_id) {
-                errors.push({
-                    type: "add",
-                    cellId: op.cell_id,
-                    message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"`,
-                })
-                continue
-            }
-            const importedNode = doc.importNode(newCell, true)
-            root.appendChild(importedNode)
-            cellMap.set(op.cell_id, importedNode)
-        } else if (op.type === "delete") {
-            const existingCell = cellMap.get(op.cell_id)
-            if (!existingCell) {
-                errors.push({
-                    type: "delete",
-                    cellId: op.cell_id,
-                    message: `Cell with id="${op.cell_id}" not found`,
-                })
-                continue
-            }
-            existingCell.parentNode?.removeChild(existingCell)
-            cellMap.delete(op.cell_id)
-        }
-    }
-
-    const serializer = new XMLSerializer()
-    const result = serializer.serializeToString(doc)
-    return { result, errors }
-}
-
-// Test data
-const sampleXml = `<?xml version="1.0" encoding="UTF-8"?>
-<mxfile>
-  <diagram>
-    <mxGraphModel>
-      <root>
-        <mxCell id="0"/>
-        <mxCell id="1" parent="0"/>
-        <mxCell id="2" value="Box A" style="rounded=1;" vertex="1" parent="1">
-          <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
-        </mxCell>
-        <mxCell id="3" value="Box B" style="rounded=1;" vertex="1" parent="1">
-          <mxGeometry x="300" y="100" width="120" height="60" as="geometry"/>
-        </mxCell>
-        <mxCell id="4" value="" style="edgeStyle=orthogonalEdgeStyle;" edge="1" parent="1" source="2" target="3">
-          <mxGeometry relative="1" as="geometry"/>
-        </mxCell>
-      </root>
-    </mxGraphModel>
-  </diagram>
-</mxfile>`
-
-let passed = 0
-let failed = 0
-
-function test(name, fn) {
-    try {
-        fn()
-        console.log(`✓ ${name}`)
-        passed++
-    } catch (e) {
-        console.log(`✗ ${name}`)
-        console.log(`  Error: ${e.message}`)
-        failed++
-    }
-}
-
-function assert(condition, message) {
-    if (!condition) throw new Error(message || "Assertion failed")
-}
-
-// Tests
-test("Update operation changes cell value", () => {
-    const { result, errors } = applyDiagramOperations(sampleXml, [
-        {
-            type: "update",
-            cell_id: "2",
-            new_xml:
-                '<mxCell id="2" value="Updated Box A" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="120" height="60" as="geometry"/></mxCell>',
-        },
-    ])
-    assert(
-        errors.length === 0,
-        `Expected no errors, got: ${JSON.stringify(errors)}`,
-    )
-    assert(
-        result.includes('value="Updated Box A"'),
-        "Updated value should be in result",
-    )
-    assert(
-        !result.includes('value="Box A"'),
-        "Old value should not be in result",
-    )
-})
-
-test("Update operation fails for non-existent cell", () => {
-    const { errors } = applyDiagramOperations(sampleXml, [
-        {
-            type: "update",
-            cell_id: "999",
-            new_xml: '<mxCell id="999" value="Test"/>',
-        },
-    ])
-    assert(errors.length === 1, "Should have one error")
-    assert(
-        errors[0].message.includes("not found"),
-        "Error should mention not found",
-    )
-})
-
-test("Update operation fails on ID mismatch", () => {
-    const { errors } = applyDiagramOperations(sampleXml, [
-        {
-            type: "update",
-            cell_id: "2",
-            new_xml: '<mxCell id="WRONG" value="Test"/>',
-        },
-    ])
-    assert(errors.length === 1, "Should have one error")
-    assert(
-        errors[0].message.includes("ID mismatch"),
-        "Error should mention ID mismatch",
-    )
-})
-
-test("Add operation creates new cell", () => {
-    const { result, errors } = applyDiagramOperations(sampleXml, [
-        {
-            type: "add",
-            cell_id: "new1",
-            new_xml:
-                '<mxCell id="new1" value="New Box" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="500" y="100" width="120" height="60" as="geometry"/></mxCell>',
-        },
-    ])
-    assert(
-        errors.length === 0,
-        `Expected no errors, got: ${JSON.stringify(errors)}`,
-    )
-    assert(result.includes('id="new1"'), "New cell should be in result")
-    assert(
-        result.includes('value="New Box"'),
-        "New cell value should be in result",
-    )
-})
-
-test("Add operation fails for duplicate ID", () => {
-    const { errors } = applyDiagramOperations(sampleXml, [
-        {
-            type: "add",
-            cell_id: "2",
-            new_xml: '<mxCell id="2" value="Duplicate"/>',
-        },
-    ])
-    assert(errors.length === 1, "Should have one error")
-    assert(
-        errors[0].message.includes("already exists"),
-        "Error should mention already exists",
-    )
-})
-
-test("Add operation fails on ID mismatch", () => {
-    const { errors } = applyDiagramOperations(sampleXml, [
-        {
-            type: "add",
-            cell_id: "new1",
-            new_xml: '<mxCell id="WRONG" value="Test"/>',
-        },
-    ])
-    assert(errors.length === 1, "Should have one error")
-    assert(
-        errors[0].message.includes("ID mismatch"),
-        "Error should mention ID mismatch",
-    )
-})
-
-test("Delete operation removes cell", () => {
-    const { result, errors } = applyDiagramOperations(sampleXml, [
-        { type: "delete", cell_id: "3" },
-    ])
-    assert(
-        errors.length === 0,
-        `Expected no errors, got: ${JSON.stringify(errors)}`,
-    )
-    assert(!result.includes('id="3"'), "Deleted cell should not be in result")
-    assert(result.includes('id="2"'), "Other cells should remain")
-})
-
-test("Delete operation fails for non-existent cell", () => {
-    const { errors } = applyDiagramOperations(sampleXml, [
-        { type: "delete", cell_id: "999" },
-    ])
-    assert(errors.length === 1, "Should have one error")
-    assert(
-        errors[0].message.includes("not found"),
-        "Error should mention not found",
-    )
-})
-
-test("Multiple operations in sequence", () => {
-    const { result, errors } = applyDiagramOperations(sampleXml, [
-        {
-            type: "update",
-            cell_id: "2",
-            new_xml:
-                '<mxCell id="2" value="Updated" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="120" height="60" as="geometry"/></mxCell>',
-        },
-        {
-            type: "add",
-            cell_id: "new1",
-            new_xml:
-                '<mxCell id="new1" value="Added" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="500" y="100" width="120" height="60" as="geometry"/></mxCell>',
-        },
-        { type: "delete", cell_id: "3" },
-    ])
-    assert(
-        errors.length === 0,
-        `Expected no errors, got: ${JSON.stringify(errors)}`,
-    )
-    assert(
-        result.includes('value="Updated"'),
-        "Updated value should be present",
-    )
-    assert(result.includes('id="new1"'), "Added cell should be present")
-    assert(!result.includes('id="3"'), "Deleted cell should not be present")
-})
-
-test("Invalid XML returns parse error", () => {
-    const { errors } = applyDiagramOperations("<not valid xml", [
-        { type: "delete", cell_id: "1" },
-    ])
-    assert(errors.length === 1, "Should have one error")
-})
-
-test("Missing root element returns error", () => {
-    const { errors } = applyDiagramOperations("<mxfile></mxfile>", [
-        { type: "delete", cell_id: "1" },
-    ])
-    assert(errors.length === 1, "Should have one error")
-    assert(
-        errors[0].message.includes("root"),
-        "Error should mention root element",
-    )
-})
-
-// Summary
-console.log(`\n${passed} passed, ${failed} failed`)
-process.exit(failed > 0 ? 1 : 0)

tsconfig.json

@@ -29,5 +29,5 @@
         ".next/types/**/*.ts",
         ".next/dev/types/**/*.ts"
     ],
-    "exclude": ["node_modules", "packages"]
+    "exclude": ["node_modules"]
 }