chore: bump version to 0.4.7 (#416)

* chore: bump version to 0.4.7

* style: auto-format with Biome

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.github/workflows/ci.yml

@@ -0,0 +1,44 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Type check
+        run: npx tsc --noEmit
+
+      - name: Lint check
+        run: npm run check
+
+      - name: Build
+        run: npm run build
+
+      - name: Security audit
+        run: npm audit --audit-level=high --omit=dev

app/[lang]/page.tsx

@@ -1,4 +1,5 @@
 "use client"
+import { usePathname, useRouter } from "next/navigation"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { DrawIoEmbed } from "react-drawio"
 import type { ImperativePanelHandle } from "react-resizable-panels"
@@ -10,6 +11,7 @@ import {
     ResizablePanelGroup,
 } from "@/components/ui/resizable"
 import { useDiagram } from "@/contexts/diagram-context"
+import { i18n, type Locale } from "@/lib/i18n/config"
 
 const drawioBaseUrl =
     process.env.NEXT_PUBLIC_DRAWIO_BASE_URL || "https://embed.diagrams.net"
@@ -24,6 +26,8 @@ export default function Home() {
         showSaveDialog,
         setShowSaveDialog,
     } = useDiagram()
+    const router = useRouter()
+    const pathname = usePathname()
     const [isMobile, setIsMobile] = useState(false)
     const [isChatVisible, setIsChatVisible] = useState(true)
     const [drawioUi, setDrawioUi] = useState<"min" | "sketch">("min")
@@ -58,6 +62,18 @@ export default function Home() {
 
     // Load preferences from localStorage after mount
     useEffect(() => {
+        // Restore saved locale and redirect if needed
+        const savedLocale = localStorage.getItem("next-ai-draw-io-locale")
+        if (savedLocale && i18n.locales.includes(savedLocale as Locale)) {
+            const pathParts = pathname.split("/").filter(Boolean)
+            const currentLocale = pathParts[0]
+            if (currentLocale !== savedLocale) {
+                pathParts[0] = savedLocale
+                router.replace(`/${pathParts.join("/")}`)
+                return // Wait for redirect
+            }
+        }
+
         const savedUi = localStorage.getItem("drawio-theme")
         if (savedUi === "min" || savedUi === "sketch") {
             setDrawioUi(savedUi)
@@ -84,7 +100,7 @@ export default function Home() {
         }
 
         setIsLoaded(true)
-    }, [])
+    }, [pathname, router])
 
     const handleDarkModeChange = async () => {
         await saveDiagramToStorage()

app/api/chat/route.ts

@@ -26,6 +26,7 @@ import {
     wrapWithObserve,
 } from "@/lib/langfuse"
 import { getSystemPrompt } from "@/lib/system-prompts"
+import { getUserIdFromRequest } from "@/lib/user-id"
 
 export const maxDuration = 120
 
@@ -167,13 +168,8 @@ async function handleChatRequest(req: Request): Promise<Response> {
 
     const { messages, xml, previousXml, sessionId } = await req.json()
 
-    // Get user IP for Langfuse tracking (hashed for privacy)
-    const forwardedFor = req.headers.get("x-forwarded-for")
-    const rawIp = forwardedFor?.split(",")[0]?.trim() || "anonymous"
-    const userId =
-        rawIp === "anonymous"
-            ? rawIp
-            : `user-${Buffer.from(rawIp).toString("base64url").slice(0, 8)}`
+    // Get user ID for Langfuse tracking and quota
+    const userId = getUserIdFromRequest(req)
 
     // Validate sessionId for Langfuse (must be string, max 200 chars)
     const validSessionId =
@@ -613,14 +609,22 @@ Operations:
 
 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 new_xml MUST be escaped as \\". Example: id=\\"5\\" value=\\"Label\\"
+
+Example - Add a rectangle:
+{"operations": [{"operation": "add", "cell_id": "rect-1", "new_xml": "<mxCell id=\\"rect-1\\" value=\\"Hello\\" style=\\"rounded=0;\\" vertex=\\"1\\" parent=\\"1\\"><mxGeometry x=\\"100\\" y=\\"100\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/></mxCell>"}]}
+
+Example - Delete a cell:
+{"operations": [{"operation": "delete", "cell_id": "rect-1"}]}`,
                 inputSchema: z.object({
                     operations: z
                         .array(
                             z.object({
-                                type: z
+                                operation: z
                                     .enum(["update", "add", "delete"])
-                                    .describe("Operation type"),
+                                    .describe(
+                                        "Operation to perform: add, update, or delete",
+                                    ),
                                 cell_id: z
                                     .string()
                                     .describe(

app/api/log-feedback/route.ts

@@ -1,6 +1,7 @@
 import { randomUUID } from "crypto"
 import { z } from "zod"
 import { getLangfuseClient } from "@/lib/langfuse"
+import { getUserIdFromRequest } from "@/lib/user-id"
 
 const feedbackSchema = z.object({
     messageId: z.string().min(1).max(200),
@@ -32,13 +33,8 @@ export async function POST(req: Request) {
         return Response.json({ success: true, logged: false })
     }
 
-    // Get user IP for tracking (hashed for privacy)
-    const forwardedFor = req.headers.get("x-forwarded-for")
-    const rawIp = forwardedFor?.split(",")[0]?.trim() || "anonymous"
-    const userId =
-        rawIp === "anonymous"
-            ? rawIp
-            : `user-${Buffer.from(rawIp).toString("base64url").slice(0, 8)}`
+    // Get user ID for tracking
+    const userId = getUserIdFromRequest(req)
 
     try {
         // Find the most recent chat trace for this session to attach the score to

components/ai-elements/model-selector.tsx

@@ -66,8 +66,22 @@ export const ModelSelectorInput = ({
 
 export type ModelSelectorListProps = ComponentProps<typeof CommandList>
 
-export const ModelSelectorList = (props: ModelSelectorListProps) => (
-    <CommandList {...props} />
+export const ModelSelectorList = ({
+    className,
+    ...props
+}: ModelSelectorListProps) => (
+    <div className="relative">
+        <CommandList
+            className={cn(
+                // Hide scrollbar on all platforms
+                "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
+                className,
+            )}
+            {...props}
+        />
+        {/* Bottom shadow indicator for scrollable content */}
+        <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-muted/80 via-muted/40 to-transparent" />
+    </div>
 )
 
 export type ModelSelectorEmptyProps = ComponentProps<typeof CommandEmpty>

components/chat-message-display.tsx

@@ -40,7 +40,7 @@ import ExamplePanel from "./chat-example-panel"
 import { CodeBlock } from "./code-block"
 
 interface DiagramOperation {
-    type: "update" | "add" | "delete"
+    operation: "update" | "add" | "delete"
     cell_id: string
     new_xml?: string
 }
@@ -53,12 +53,12 @@ function getCompleteOperations(
     return operations.filter(
         (op) =>
             op &&
-            typeof op.type === "string" &&
-            ["update", "add", "delete"].includes(op.type) &&
+            typeof op.operation === "string" &&
+            ["update", "add", "delete"].includes(op.operation) &&
             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"),
+            (op.operation === "delete" || typeof op.new_xml === "string"),
     )
 }
 
@@ -79,20 +79,20 @@ function OperationsDisplay({ operations }: { operations: DiagramOperation[] }) {
         <div className="space-y-3">
             {operations.map((op, index) => (
                 <div
-                    key={`${op.type}-${op.cell_id}-${index}`}
+                    key={`${op.operation}-${op.cell_id}-${index}`}
                     className="rounded-lg border border-border/50 overflow-hidden bg-background/50"
                 >
                     <div className="px-3 py-1.5 bg-muted/40 border-b border-border/30 flex items-center gap-2">
                         <span
                             className={`text-[10px] font-medium uppercase tracking-wide ${
-                                op.type === "delete"
+                                op.operation === "delete"
                                     ? "text-red-600"
-                                    : op.type === "add"
+                                    : op.operation === "add"
                                       ? "text-green-600"
                                       : "text-blue-600"
                             }`}
                         >
-                            {op.type}
+                            {op.operation}
                         </span>
                         <span className="text-xs text-muted-foreground">
                             cell_id: {op.cell_id}

components/chat-panel.tsx

@@ -27,6 +27,7 @@ import {
     TooltipTrigger,
 } from "@/components/ui/tooltip"
 import { useDiagram } from "@/contexts/diagram-context"
+import { useDiagramToolHandlers } from "@/hooks/use-diagram-tool-handlers"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { getSelectedAIConfig, useModelConfig } from "@/hooks/use-model-config"
 import { getApiEndpoint } from "@/lib/base-path"
@@ -34,7 +35,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 } from "@/lib/utils"
 import { ChatMessageDisplay } from "./chat-message-display"
 import { DevXmlSimulator } from "./dev-xml-simulator"
 
@@ -214,9 +215,6 @@ export default function ChatPanel({
         chartXMLRef.current = chartXML
     }, [chartXML])
 
-    // Ref to hold stop function for use in onToolCall (avoids stale closure)
-    const stopRef = useRef<(() => void) | null>(null)
-
     // Ref to track consecutive auto-retry count (reset on user action)
     const autoRetryCountRef = useRef(0)
     // Ref to track continuation retry count (for truncation handling)
@@ -239,6 +237,16 @@ export default function ChatPanel({
     > | null>(null)
     const LOCAL_STORAGE_DEBOUNCE_MS = 1000 // Save at most once per second
 
+    // Diagram tool handlers (display_diagram, edit_diagram, append_diagram)
+    const { handleToolCall } = useDiagramToolHandlers({
+        partialXmlRef,
+        editDiagramOriginalXmlRef,
+        chartXMLRef,
+        onDisplayChart,
+        onFetchChart,
+        onExport,
+    })
+
     const {
         messages,
         sendMessage,
@@ -251,311 +259,8 @@ export default function ChatPanel({
         transport: new DefaultChatTransport({
             api: getApiEndpoint("/api/chat"),
         }),
-        async onToolCall({ toolCall }) {
-            if (DEBUG) {
-                console.log(
-                    `[onToolCall] Tool: ${toolCall.toolName}, CallId: ${toolCall.toolCallId}`,
-                )
-            }
-
-            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
-                }
-
-                // 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)
-
-                // loadDiagram validates and returns error if invalid
-                const validationError = onDisplayChart(fullXml)
-
-                if (validationError) {
-                    console.warn(
-                        "[display_diagram] Validation error:",
-                        validationError,
-                    )
-                    // Return error to model - sendAutomaticallyWhen will trigger retry
-                    if (DEBUG) {
-                        console.log(
-                            "[display_diagram] Adding tool output with state: output-error",
-                        )
-                    }
-                    addToolOutput({
-                        tool: "display_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        state: "output-error",
-                        errorText: `${validationError}
-
-Please fix the XML issues and call display_diagram again with corrected XML.
-
-Your failed XML:
-\`\`\`xml
-${finalXml}
-\`\`\``,
-                    })
-                } else {
-                    // Success - diagram will be rendered by chat-message-display
-                    if (DEBUG) {
-                        console.log(
-                            "[display_diagram] Success! Adding tool output with state: output-available",
-                        )
-                    }
-                    addToolOutput({
-                        tool: "display_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        output: "Successfully displayed the diagram.",
-                    })
-                    if (DEBUG) {
-                        console.log(
-                            "[display_diagram] Tool output added. Diagram should be visible now.",
-                        )
-                    }
-                }
-            } else if (toolCall.toolName === "edit_diagram") {
-                const { operations } = toolCall.input as {
-                    operations: Array<{
-                        type: "update" | "add" | "delete"
-                        cell_id: string
-                        new_xml?: 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,
-                        )
-                        return
-                    }
-
-                    // loadDiagram validates and returns error if invalid
-                    const validationError = onDisplayChart(editedXml)
-                    if (validationError) {
-                        console.warn(
-                            "[edit_diagram] Validation error:",
-                            validationError,
-                        )
-                        addToolOutput({
-                            tool: "edit_diagram",
-                            toolCallId: toolCall.toolCallId,
-                            state: "output-error",
-                            errorText: `Edit produced invalid XML: ${validationError}
-
-Current diagram XML:
-\`\`\`xml
-${currentXml}
-\`\`\`
-
-Please fix the operations to avoid structural issues.`,
-                        })
-                        // 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.`,
-                    })
-                    // Clean up the shared original XML ref
-                    editDiagramOriginalXmlRef.current.delete(
-                        toolCall.toolCallId,
-                    )
-                } catch (error) {
-                    console.error("[edit_diagram] Failed:", error)
-
-                    const errorMessage =
-                        error instanceof Error ? error.message : String(error)
-
-                    addToolOutput({
-                        tool: "edit_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        state: "output-error",
-                        errorText: `Edit failed: ${errorMessage}
-
-Current diagram XML:
-\`\`\`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.`,
-                    })
-                }
-            }
+        onToolCall: async ({ toolCall }) => {
+            await handleToolCall({ toolCall }, addToolOutput)
         },
         onError: (error) => {
             // Handle server-side quota limit (429 response)
@@ -719,9 +424,6 @@ Continue from EXACTLY where you stopped.`,
         },
     })
 
-    // Update stopRef so onToolCall can access it
-    stopRef.current = stop
-
     // Ref to track latest messages for unload persistence
     const messagesRef = useRef(messages)
     useEffect(() => {

components/model-config-dialog.tsx

@@ -412,11 +412,7 @@ export function ModelConfigDialog({
                                                 setSelectedProviderId(
                                                     provider.id,
                                                 )
-                                                setValidationStatus(
-                                                    provider.validated
-                                                        ? "success"
-                                                        : "idle",
-                                                )
+                                                setValidationStatus("idle")
                                                 setShowApiKey(false)
                                             }}
                                             className={cn(
@@ -504,7 +500,7 @@ export function ModelConfigDialog({
                     </div>
 
                     {/* Provider Details (Right Panel) */}
-                    <div className="flex-1 min-w-0 flex flex-col overflow-hidden">
+                    <div className="flex-1 min-w-0 flex flex-col overflow-auto [&::-webkit-scrollbar]:hidden ">
                         {selectedProvider ? (
                             <>
                                 <ScrollArea className="flex-1" ref={scrollRef}>
@@ -555,6 +551,20 @@ export function ModelConfigDialog({
                                                     </span>
                                                 </div>
                                             )}
+                                            <Button
+                                                variant="ghost"
+                                                size="sm"
+                                                onClick={() =>
+                                                    setDeleteConfirmOpen(true)
+                                                }
+                                                className="text-destructive hover:text-destructive hover:bg-destructive/10"
+                                            >
+                                                <Trash2 className="h-4 w-4 mr-1.5" />
+                                                {
+                                                    dict.modelConfig
+                                                        .deleteProvider
+                                                }
+                                            </Button>
                                         </div>
 
                                         {/* Configuration Section */}
@@ -1416,24 +1426,6 @@ export function ModelConfigDialog({
                                                 )}
                                             </div>
                                         </ConfigSection>
-
-                                        {/* Danger Zone */}
-                                        <div className="pt-4">
-                                            <Button
-                                                variant="ghost"
-                                                size="sm"
-                                                onClick={() =>
-                                                    setDeleteConfirmOpen(true)
-                                                }
-                                                className="text-muted-foreground hover:text-destructive hover:bg-destructive/5 rounded-xl"
-                                            >
-                                                <Trash2 className="h-4 w-4 mr-2" />
-                                                {
-                                                    dict.modelConfig
-                                                        .deleteProvider
-                                                }
-                                            </Button>
-                                        </div>
                                     </div>
                                 </ScrollArea>
                             </>

components/model-selector.tsx

@@ -124,7 +124,7 @@ export function ModelSelector({
                 <ModelSelectorInput
                     placeholder={dict.modelConfig.searchModels}
                 />
-                <ModelSelectorList>
+                <ModelSelectorList className="[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
                     <ModelSelectorEmpty>
                         {validatedModels.length === 0 && models.length > 0
                             ? dict.modelConfig.noVerifiedModels

components/settings-dialog.tsx

@@ -151,6 +151,9 @@ function SettingsContent({
     }, [open])
 
     const changeLanguage = (lang: string) => {
+        // Save locale to localStorage for persistence across restarts
+        localStorage.setItem("next-ai-draw-io-locale", lang)
+
         const parts = pathname.split("/")
         if (parts.length > 1 && i18n.locales.includes(parts[1] as Locale)) {
             parts[1] = lang

electron/main/port-manager.ts

@@ -3,16 +3,16 @@ import { app } from "electron"
 
 /**
  * Port configuration
+ * Using fixed ports to preserve localStorage across restarts
+ * (localStorage is origin-specific, so changing ports loses all saved data)
  */
 const PORT_CONFIG = {
     // Development mode uses fixed port for hot reload compatibility
     development: 6002,
-    // Production mode port range (will find first available)
-    production: {
-        min: 10000,
-        max: 65535,
-    },
-    // Maximum attempts to find an available port
+    // Production mode uses fixed port (61337) to preserve localStorage
+    // Falls back to sequential ports if unavailable
+    production: 61337,
+    // Maximum attempts to find an available port (fallback)
     maxAttempts: 100,
 }
 
@@ -36,19 +36,11 @@ export function isPortAvailable(port: number): Promise<boolean> {
     })
 }
 
-/**
- * Generate a random port within the production range
- */
-function getRandomPort(): number {
-    const { min, max } = PORT_CONFIG.production
-    return Math.floor(Math.random() * (max - min + 1)) + min
-}
-
 /**
  * Find an available port
  * - In development: uses fixed port (6002)
- * - In production: finds a random available port
- * - If a port was previously allocated, verifies it's still available
+ * - In production: uses fixed port (61337) to preserve localStorage
+ * - Falls back to sequential ports if preferred port is unavailable
  *
  * @param reuseExisting If true, try to reuse the previously allocated port
  * @returns Promise<number> The available port
@@ -56,6 +48,9 @@ function getRandomPort(): number {
  */
 export async function findAvailablePort(reuseExisting = true): Promise<number> {
     const isDev = !app.isPackaged
+    const preferredPort = isDev
+        ? PORT_CONFIG.development
+        : PORT_CONFIG.production
 
     // Try to reuse cached port if requested and available
     if (reuseExisting && allocatedPort !== null) {
@@ -69,29 +64,22 @@ export async function findAvailablePort(reuseExisting = true): Promise<number> {
         allocatedPort = null
     }
 
-    if (isDev) {
-        // Development mode: use fixed port
-        const port = PORT_CONFIG.development
-        const available = await isPortAvailable(port)
-        if (available) {
-            allocatedPort = port
-            return port
-        }
-        console.warn(
-            `Development port ${port} is in use, finding alternative...`,
-        )
+    // Try preferred port first
+    if (await isPortAvailable(preferredPort)) {
+        allocatedPort = preferredPort
+        return preferredPort
     }
 
-    // Production mode or dev port unavailable: find random available port
-    for (let attempt = 0; attempt < PORT_CONFIG.maxAttempts; attempt++) {
-        const port = isDev
-            ? PORT_CONFIG.development + attempt + 1
-            : getRandomPort()
+    console.warn(
+        `Preferred port ${preferredPort} is in use, finding alternative...`,
+    )
 
-        const available = await isPortAvailable(port)
-        if (available) {
+    // Fallback: try sequential ports starting from preferred + 1
+    for (let attempt = 1; attempt <= PORT_CONFIG.maxAttempts; attempt++) {
+        const port = preferredPort + attempt
+        if (await isPortAvailable(port)) {
             allocatedPort = port
-            console.log(`Allocated port: ${port}`)
+            console.log(`Allocated fallback port: ${port}`)
             return port
         }
     }

electron/settings/index.html

@@ -9,6 +9,12 @@
 </head>
 <body>
     <div class="container">
+        <div class="deprecation-notice">
+            <strong>⚠️ Deprecation Notice</strong>
+            <p>This settings panel will be removed in a future update.</p>
+            <p>Please use the <strong>AI Model Configuration</strong> button (left of the Send button in the chat panel) to configure your AI providers. Your settings there will persist across updates.</p>
+        </div>
+
         <h1>Configuration Presets</h1>
 
         <div class="section">

electron/settings/settings.css

@@ -24,6 +24,39 @@
     }
 }
 
+.deprecation-notice {
+    background-color: #fff3cd;
+    border: 1px solid #ffc107;
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 20px;
+}
+
+.deprecation-notice strong {
+    color: #856404;
+    display: block;
+    margin-bottom: 8px;
+    font-size: 14px;
+}
+
+.deprecation-notice p {
+    color: #856404;
+    font-size: 13px;
+    margin: 4px 0;
+}
+
+@media (prefers-color-scheme: dark) {
+    .deprecation-notice {
+        background-color: #332701;
+        border-color: #665200;
+    }
+
+    .deprecation-notice strong,
+    .deprecation-notice p {
+        color: #ffc107;
+    }
+}
+
 * {
     margin: 0;
     padding: 0;

hooks/use-diagram-tool-handlers.ts

@@ -0,0 +1,383 @@
+import type { MutableRefObject } from "react"
+import { isMxCellXmlComplete, wrapWithMxFile } from "@/lib/utils"
+
+const DEBUG = process.env.NODE_ENV === "development"
+
+interface ToolCall {
+    toolCallId: string
+    toolName: string
+    input: unknown
+}
+
+type AddToolOutputSuccess = {
+    tool: string
+    toolCallId: string
+    state?: "output-available"
+    output: string
+    errorText?: undefined
+}
+
+type AddToolOutputError = {
+    tool: string
+    toolCallId: string
+    state: "output-error"
+    output?: undefined
+    errorText: string
+}
+
+type AddToolOutputParams = AddToolOutputSuccess | AddToolOutputError
+
+type AddToolOutputFn = (params: AddToolOutputParams) => void
+
+interface DiagramOperation {
+    operation: "update" | "add" | "delete"
+    cell_id: string
+    new_xml?: string
+}
+
+interface UseDiagramToolHandlersParams {
+    partialXmlRef: MutableRefObject<string>
+    editDiagramOriginalXmlRef: MutableRefObject<Map<string, string>>
+    chartXMLRef: MutableRefObject<string>
+    onDisplayChart: (xml: string, skipValidation?: boolean) => string | null
+    onFetchChart: (saveToHistory?: boolean) => Promise<string>
+    onExport: () => void
+}
+
+/**
+ * Hook that creates the onToolCall handler for diagram-related tools.
+ * Handles display_diagram, edit_diagram, and append_diagram tools.
+ *
+ * Note: addToolOutput is passed at call time (not hook init) because
+ * it comes from useChat which creates a circular dependency.
+ */
+export function useDiagramToolHandlers({
+    partialXmlRef,
+    editDiagramOriginalXmlRef,
+    chartXMLRef,
+    onDisplayChart,
+    onFetchChart,
+    onExport,
+}: UseDiagramToolHandlersParams) {
+    const handleToolCall = async (
+        { toolCall }: { toolCall: ToolCall },
+        addToolOutput: AddToolOutputFn,
+    ) => {
+        if (DEBUG) {
+            console.log(
+                `[onToolCall] Tool: ${toolCall.toolName}, CallId: ${toolCall.toolCallId}`,
+            )
+        }
+
+        if (toolCall.toolName === "display_diagram") {
+            await handleDisplayDiagram(toolCall, addToolOutput)
+        } else if (toolCall.toolName === "edit_diagram") {
+            await handleEditDiagram(toolCall, addToolOutput)
+        } else if (toolCall.toolName === "append_diagram") {
+            handleAppendDiagram(toolCall, addToolOutput)
+        }
+    }
+
+    const handleDisplayDiagram = async (
+        toolCall: ToolCall,
+        addToolOutput: AddToolOutputFn,
+    ) => {
+        const { xml } = toolCall.input as { xml: string }
+
+        // DEBUG: Log raw input to diagnose false truncation detection
+        if (DEBUG) {
+            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)
+        if (DEBUG) {
+            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
+        }
+
+        // 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)
+
+        // loadDiagram validates and returns error if invalid
+        const validationError = onDisplayChart(fullXml)
+
+        if (validationError) {
+            console.warn("[display_diagram] Validation error:", validationError)
+            // Return error to model - sendAutomaticallyWhen will trigger retry
+            if (DEBUG) {
+                console.log(
+                    "[display_diagram] Adding tool output with state: output-error",
+                )
+            }
+            addToolOutput({
+                tool: "display_diagram",
+                toolCallId: toolCall.toolCallId,
+                state: "output-error",
+                errorText: `${validationError}
+
+Please fix the XML issues and call display_diagram again with corrected XML.
+
+Your failed XML:
+\`\`\`xml
+${finalXml}
+\`\`\``,
+            })
+        } else {
+            // Success - diagram will be rendered by chat-message-display
+            if (DEBUG) {
+                console.log(
+                    "[display_diagram] Success! Adding tool output with state: output-available",
+                )
+            }
+            addToolOutput({
+                tool: "display_diagram",
+                toolCallId: toolCall.toolCallId,
+                output: "Successfully displayed the diagram.",
+            })
+            if (DEBUG) {
+                console.log(
+                    "[display_diagram] Tool output added. Diagram should be visible now.",
+                )
+            }
+        }
+    }
+
+    const handleEditDiagram = async (
+        toolCall: ToolCall,
+        addToolOutput: AddToolOutputFn,
+    ) => {
+        const { operations } = toolCall.input as {
+            operations: DiagramOperation[]
+        }
+
+        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)
+                return
+            }
+
+            // loadDiagram validates and returns error if invalid
+            const validationError = onDisplayChart(editedXml)
+            if (validationError) {
+                console.warn(
+                    "[edit_diagram] Validation error:",
+                    validationError,
+                )
+                addToolOutput({
+                    tool: "edit_diagram",
+                    toolCallId: toolCall.toolCallId,
+                    state: "output-error",
+                    errorText: `Edit produced invalid XML: ${validationError}
+
+Current diagram XML:
+\`\`\`xml
+${currentXml}
+\`\`\`
+
+Please fix the operations to avoid structural issues.`,
+                })
+                // 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.`,
+            })
+            // Clean up the shared original XML ref
+            editDiagramOriginalXmlRef.current.delete(toolCall.toolCallId)
+        } catch (error) {
+            console.error("[edit_diagram] Failed:", error)
+
+            const errorMessage =
+                error instanceof Error ? error.message : String(error)
+
+            addToolOutput({
+                tool: "edit_diagram",
+                toolCallId: toolCall.toolCallId,
+                state: "output-error",
+                errorText: `Edit failed: ${errorMessage}
+
+Current diagram XML:
+\`\`\`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)
+        }
+    }
+
+    const handleAppendDiagram = (
+        toolCall: ToolCall,
+        addToolOutput: AddToolOutputFn,
+    ) => {
+        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.`,
+            })
+        }
+    }
+
+    return { handleToolCall }
+}

lib/system-prompts.ts

@@ -99,9 +99,9 @@ When using edit_diagram tool:
 - 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>"}]}
+- Example update: {"operations": [{"operation": "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": [{"operation": "delete", "cell_id": "5"}]}
+- Example add: {"operations": [{"operation": "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>"}]}
 
 ⚠️ JSON ESCAPING: Every " inside new_xml MUST be escaped as \\". Example: id=\\"5\\" value=\\"Label\\"
 
@@ -282,9 +282,9 @@ edit_diagram uses ID-based operations to modify cells directly by their id attri
 \`\`\`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"}
+    {"operation": "update", "cell_id": "3", "new_xml": "<mxCell ...complete element...>"},
+    {"operation": "add", "cell_id": "new1", "new_xml": "<mxCell ...new element...>"},
+    {"operation": "delete", "cell_id": "5"}
   ]
 }
 \`\`\`
@@ -293,17 +293,17 @@ edit_diagram uses ID-based operations to modify cells directly by their id attri
 
 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>"}]}
+{"operations": [{"operation": "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>"}]}
+{"operations": [{"operation": "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"}]}
+{"operations": [{"operation": "delete", "cell_id": "5"}]}
 \`\`\`
 
 **Error Recovery:**

lib/types/model-config.ts

@@ -83,22 +83,24 @@ export const PROVIDER_INFO: Record<
 // Suggested models per provider for quick add
 export const SUGGESTED_MODELS: Record<ProviderName, string[]> = {
     openai: [
-        // GPT-4o series (latest)
+        "gpt-5.2-pro",
+        "gpt-5.2-chat-latest",
+        "gpt-5.2",
+        "gpt-5.1-codex-mini",
+        "gpt-5.1-codex",
+        "gpt-5.1-chat-latest",
+        "gpt-5.1",
+        "gpt-5-pro",
+        "gpt-5",
+        "gpt-5-mini",
+        "gpt-5-nano",
+        "gpt-5-codex",
+        "gpt-5-chat-latest",
+        "gpt-4.1",
+        "gpt-4.1-mini",
+        "gpt-4.1-nano",
         "gpt-4o",
         "gpt-4o-mini",
-        "gpt-4o-2024-11-20",
-        // GPT-4 Turbo
-        "gpt-4-turbo",
-        "gpt-4-turbo-preview",
-        // o1/o3 reasoning models
-        "o1",
-        "o1-mini",
-        "o1-preview",
-        "o3-mini",
-        // GPT-4
-        "gpt-4",
-        // GPT-3.5
-        "gpt-3.5-turbo",
     ],
     anthropic: [
         // Claude 4.5 series (latest)

lib/user-id.ts

@@ -0,0 +1,12 @@
+/**
+ * Generate a userId from request for tracking purposes.
+ * Uses base64url encoding of IP for URL-safe identifier.
+ * Note: base64 is reversible - this is NOT privacy protection.
+ */
+export function getUserIdFromRequest(req: Request): string {
+    const forwardedFor = req.headers.get("x-forwarded-for")
+    const rawIp = forwardedFor?.split(",")[0]?.trim() || "anonymous"
+    return rawIp === "anonymous"
+        ? rawIp
+        : `user-${Buffer.from(rawIp).toString("base64url")}`
+}

lib/utils.ts

@@ -455,7 +455,7 @@ export function replaceNodes(currentXML: string, nodes: string): string {
 // ============================================================================
 
 export interface DiagramOperation {
-    type: "update" | "add" | "delete"
+    operation: "update" | "add" | "delete"
     cell_id: string
     new_xml?: string
 }
@@ -528,7 +528,7 @@ export function applyDiagramOperations(
 
     // Process each operation
     for (const op of operations) {
-        if (op.type === "update") {
+        if (op.operation === "update") {
             const existingCell = cellMap.get(op.cell_id)
             if (!existingCell) {
                 errors.push({
@@ -580,7 +580,7 @@ export function applyDiagramOperations(
 
             // Update the map with the new element
             cellMap.set(op.cell_id, importedNode)
-        } else if (op.type === "add") {
+        } else if (op.operation === "add") {
             // Check if ID already exists
             if (cellMap.has(op.cell_id)) {
                 errors.push({
@@ -632,7 +632,7 @@ export function applyDiagramOperations(
 
             // Add to map
             cellMap.set(op.cell_id, importedNode)
-        } else if (op.type === "delete") {
+        } else if (op.operation === "delete") {
             const existingCell = cellMap.get(op.cell_id)
             if (!existingCell) {
                 errors.push({

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.4.6",
+    "version": "0.4.7",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "next-ai-draw-io",
-            "version": "0.4.6",
+            "version": "0.4.7",
             "license": "Apache-2.0",
             "dependencies": {
                 "@ai-sdk/amazon-bedrock": "^4.0.1",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.4.6",
+    "version": "0.4.7",
     "license": "Apache-2.0",
     "private": true,
     "main": "dist-electron/main/index.js",

packages/mcp-server/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@next-ai-drawio/mcp-server",
-    "version": "0.1.5",
+    "version": "0.1.6",
     "description": "MCP server for Next AI Draw.io - AI-powered diagram generation with real-time browser preview",
     "type": "module",
     "main": "dist/index.js",

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

@@ -4,7 +4,7 @@
  */
 
 export interface DiagramOperation {
-    type: "update" | "add" | "delete"
+    operation: "update" | "add" | "delete"
     cell_id: string
     new_xml?: string
 }
@@ -77,7 +77,7 @@ export function applyDiagramOperations(
 
     // Process each operation
     for (const op of operations) {
-        if (op.type === "update") {
+        if (op.operation === "update") {
             const existingCell = cellMap.get(op.cell_id)
             if (!existingCell) {
                 errors.push({
@@ -129,7 +129,7 @@ export function applyDiagramOperations(
 
             // Update the map with the new element
             cellMap.set(op.cell_id, importedNode)
-        } else if (op.type === "add") {
+        } else if (op.operation === "add") {
             // Check if ID already exists
             if (cellMap.has(op.cell_id)) {
                 errors.push({
@@ -181,7 +181,7 @@ export function applyDiagramOperations(
 
             // Add to map
             cellMap.set(op.cell_id, importedNode)
-        } else if (op.type === "delete") {
+        } else if (op.operation === "delete") {
             const existingCell = cellMap.get(op.cell_id)
             if (!existingCell) {
                 errors.push({

packages/mcp-server/src/index.ts

@@ -265,14 +265,22 @@ server.registerTool(
             "- 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.",
+            "For add/update, new_xml must be a complete mxCell element including mxGeometry.\n\n" +
+            "Example - Add a rectangle:\n" +
+            '{"operations": [{"operation": "add", "cell_id": "rect-1", "new_xml": "<mxCell id=\\"rect-1\\" value=\\"Hello\\" style=\\"rounded=0;\\" vertex=\\"1\\" parent=\\"1\\"><mxGeometry x=\\"100\\" y=\\"100\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/></mxCell>"}]}\n\n' +
+            "Example - Update a cell:\n" +
+            '{"operations": [{"operation": "update", "cell_id": "3", "new_xml": "<mxCell id=\\"3\\" value=\\"New Label\\" style=\\"rounded=1;\\" vertex=\\"1\\" parent=\\"1\\"><mxGeometry x=\\"100\\" y=\\"100\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/></mxCell>"}]}\n\n' +
+            "Example - Delete a cell:\n" +
+            '{"operations": [{"operation": "delete", "cell_id": "rect-1"}]}',
         inputSchema: {
             operations: z
                 .array(
                     z.object({
-                        type: z
+                        operation: z
                             .enum(["update", "add", "delete"])
-                            .describe("Operation type"),
+                            .describe(
+                                "Operation to perform: add, update, or delete",
+                            ),
                         cell_id: z.string().describe("The id of the mxCell"),
                         new_xml: z
                             .string()
@@ -356,13 +364,13 @@ server.registerTool(
                     )
                     if (fixed) {
                         log.info(
-                            `Operation ${op.type} ${op.cell_id}: XML auto-fixed: ${fixes.join(", ")}`,
+                            `Operation ${op.operation} ${op.cell_id}: XML auto-fixed: ${fixes.join(", ")}`,
                         )
                         return { ...op, new_xml: fixed }
                     }
                     if (!valid && error) {
                         log.warn(
-                            `Operation ${op.type} ${op.cell_id}: XML validation failed: ${error}`,
+                            `Operation ${op.operation} ${op.cell_id}: XML validation failed: ${error}`,
                         )
                     }
                 }

renovate.json

@@ -0,0 +1,40 @@
+{
+    "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+    "extends": ["config:recommended"],
+    "schedule": ["after 10am on saturday"],
+    "timezone": "Asia/Tokyo",
+    "packageRules": [
+        {
+            "matchUpdateTypes": ["minor", "patch"],
+            "matchPackagePatterns": ["*"],
+            "groupName": "minor and patch dependencies",
+            "automerge": true
+        },
+        {
+            "matchUpdateTypes": ["major"],
+            "matchPackagePatterns": ["*"],
+            "automerge": false
+        },
+        {
+            "matchPackagePatterns": ["@ai-sdk/*"],
+            "groupName": "AI SDK packages"
+        },
+        {
+            "matchPackagePatterns": ["@radix-ui/*"],
+            "groupName": "Radix UI packages"
+        },
+        {
+            "matchPackagePatterns": ["electron", "electron-builder"],
+            "groupName": "Electron packages",
+            "automerge": false
+        },
+        {
+            "matchPackagePatterns": ["@ai-sdk/*", "ai", "next"],
+            "groupName": "Core framework packages",
+            "automerge": false
+        }
+    ],
+    "vulnerabilityAlerts": {
+        "enabled": true
+    }
+}

scripts/test-diagram-operations.mjs

@@ -22,7 +22,7 @@ function applyDiagramOperations(xmlContent, operations) {
             result: xmlContent,
             errors: [
                 {
-                    type: "update",
+                    operation: "update",
                     cellId: "",
                     message: `XML parse error: ${parseError.textContent}`,
                 },
@@ -36,7 +36,7 @@ function applyDiagramOperations(xmlContent, operations) {
             result: xmlContent,
             errors: [
                 {
-                    type: "update",
+                    operation: "update",
                     cellId: "",
                     message: "Could not find <root> element in XML",
                 },
@@ -51,11 +51,11 @@ function applyDiagramOperations(xmlContent, operations) {
     })
 
     for (const op of operations) {
-        if (op.type === "update") {
+        if (op.operation === "update") {
             const existingCell = cellMap.get(op.cell_id)
             if (!existingCell) {
                 errors.push({
-                    type: "update",
+                    operation: "update",
                     cellId: op.cell_id,
                     message: `Cell with id="${op.cell_id}" not found`,
                 })
@@ -63,7 +63,7 @@ function applyDiagramOperations(xmlContent, operations) {
             }
             if (!op.new_xml) {
                 errors.push({
-                    type: "update",
+                    operation: "update",
                     cellId: op.cell_id,
                     message: "new_xml is required for update operation",
                 })
@@ -76,7 +76,7 @@ function applyDiagramOperations(xmlContent, operations) {
             const newCell = newDoc.querySelector("mxCell")
             if (!newCell) {
                 errors.push({
-                    type: "update",
+                    operation: "update",
                     cellId: op.cell_id,
                     message: "new_xml must contain an mxCell element",
                 })
@@ -85,7 +85,7 @@ function applyDiagramOperations(xmlContent, operations) {
             const newCellId = newCell.getAttribute("id")
             if (newCellId !== op.cell_id) {
                 errors.push({
-                    type: "update",
+                    operation: "update",
                     cellId: op.cell_id,
                     message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"`,
                 })
@@ -94,10 +94,10 @@ function applyDiagramOperations(xmlContent, operations) {
             const importedNode = doc.importNode(newCell, true)
             existingCell.parentNode?.replaceChild(importedNode, existingCell)
             cellMap.set(op.cell_id, importedNode)
-        } else if (op.type === "add") {
+        } else if (op.operation === "add") {
             if (cellMap.has(op.cell_id)) {
                 errors.push({
-                    type: "add",
+                    operation: "add",
                     cellId: op.cell_id,
                     message: `Cell with id="${op.cell_id}" already exists`,
                 })
@@ -105,7 +105,7 @@ function applyDiagramOperations(xmlContent, operations) {
             }
             if (!op.new_xml) {
                 errors.push({
-                    type: "add",
+                    operation: "add",
                     cellId: op.cell_id,
                     message: "new_xml is required for add operation",
                 })
@@ -118,7 +118,7 @@ function applyDiagramOperations(xmlContent, operations) {
             const newCell = newDoc.querySelector("mxCell")
             if (!newCell) {
                 errors.push({
-                    type: "add",
+                    operation: "add",
                     cellId: op.cell_id,
                     message: "new_xml must contain an mxCell element",
                 })
@@ -127,7 +127,7 @@ function applyDiagramOperations(xmlContent, operations) {
             const newCellId = newCell.getAttribute("id")
             if (newCellId !== op.cell_id) {
                 errors.push({
-                    type: "add",
+                    operation: "add",
                     cellId: op.cell_id,
                     message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"`,
                 })
@@ -136,11 +136,11 @@ function applyDiagramOperations(xmlContent, operations) {
             const importedNode = doc.importNode(newCell, true)
             root.appendChild(importedNode)
             cellMap.set(op.cell_id, importedNode)
-        } else if (op.type === "delete") {
+        } else if (op.operation === "delete") {
             const existingCell = cellMap.get(op.cell_id)
             if (!existingCell) {
                 errors.push({
-                    type: "delete",
+                    operation: "delete",
                     cellId: op.cell_id,
                     message: `Cell with id="${op.cell_id}" not found`,
                 })
@@ -201,7 +201,7 @@ function assert(condition, message) {
 test("Update operation changes cell value", () => {
     const { result, errors } = applyDiagramOperations(sampleXml, [
         {
-            type: "update",
+            operation: "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>',
@@ -224,7 +224,7 @@ test("Update operation changes cell value", () => {
 test("Update operation fails for non-existent cell", () => {
     const { errors } = applyDiagramOperations(sampleXml, [
         {
-            type: "update",
+            operation: "update",
             cell_id: "999",
             new_xml: '<mxCell id="999" value="Test"/>',
         },
@@ -239,7 +239,7 @@ test("Update operation fails for non-existent cell", () => {
 test("Update operation fails on ID mismatch", () => {
     const { errors } = applyDiagramOperations(sampleXml, [
         {
-            type: "update",
+            operation: "update",
             cell_id: "2",
             new_xml: '<mxCell id="WRONG" value="Test"/>',
         },
@@ -254,7 +254,7 @@ test("Update operation fails on ID mismatch", () => {
 test("Add operation creates new cell", () => {
     const { result, errors } = applyDiagramOperations(sampleXml, [
         {
-            type: "add",
+            operation: "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>',
@@ -274,7 +274,7 @@ test("Add operation creates new cell", () => {
 test("Add operation fails for duplicate ID", () => {
     const { errors } = applyDiagramOperations(sampleXml, [
         {
-            type: "add",
+            operation: "add",
             cell_id: "2",
             new_xml: '<mxCell id="2" value="Duplicate"/>',
         },
@@ -289,7 +289,7 @@ test("Add operation fails for duplicate ID", () => {
 test("Add operation fails on ID mismatch", () => {
     const { errors } = applyDiagramOperations(sampleXml, [
         {
-            type: "add",
+            operation: "add",
             cell_id: "new1",
             new_xml: '<mxCell id="WRONG" value="Test"/>',
         },
@@ -303,7 +303,7 @@ test("Add operation fails on ID mismatch", () => {
 
 test("Delete operation removes cell", () => {
     const { result, errors } = applyDiagramOperations(sampleXml, [
-        { type: "delete", cell_id: "3" },
+        { operation: "delete", cell_id: "3" },
     ])
     assert(
         errors.length === 0,
@@ -315,7 +315,7 @@ test("Delete operation removes cell", () => {
 
 test("Delete operation fails for non-existent cell", () => {
     const { errors } = applyDiagramOperations(sampleXml, [
-        { type: "delete", cell_id: "999" },
+        { operation: "delete", cell_id: "999" },
     ])
     assert(errors.length === 1, "Should have one error")
     assert(
@@ -327,18 +327,18 @@ test("Delete operation fails for non-existent cell", () => {
 test("Multiple operations in sequence", () => {
     const { result, errors } = applyDiagramOperations(sampleXml, [
         {
-            type: "update",
+            operation: "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",
+            operation: "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" },
+        { operation: "delete", cell_id: "3" },
     ])
     assert(
         errors.length === 0,
@@ -354,14 +354,14 @@ test("Multiple operations in sequence", () => {
 
 test("Invalid XML returns parse error", () => {
     const { errors } = applyDiagramOperations("<not valid xml", [
-        { type: "delete", cell_id: "1" },
+        { operation: "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" },
+        { operation: "delete", cell_id: "1" },
     ])
     assert(errors.length === 1, "Should have one error")
     assert(