Remove Electron settings panel (breaking change)

- Remove electron/settings/ folder
- Remove config-manager.ts and settings-window.ts
- Remove Configuration menu from app menu
- Remove config-presets IPC handlers
- Update README.md
- Clean up electron.d.ts

Note: This is a breaking change - users will lose existing presets

README.md

@@ -147,14 +147,13 @@ Download the native desktop app for your platform from the [Releases page](https
 | Linux | `.AppImage` or `.deb` (x64 & ARM64) |
 
 **Features:**
-- **Secure API key storage**: Credentials encrypted using OS keychain
-- **Configuration presets**: Save and switch between AI providers via menu
 - **Native file dialogs**: Open/save `.drawio` files directly
 - **Offline capable**: Works without internet after first launch
+- **Built-in settings**: Configure AI providers directly in the app
 
 **Quick Setup:**
 1. Download and install for your platform
-2. Open the app → **Menu → Configuration → Manage Presets**
+2. Click the settings icon in the chat panel
 3. Add your AI provider credentials
 4. Start creating diagrams!
 

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,8 +35,9 @@ 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"
 
 // localStorage keys for persistence
 const STORAGE_MESSAGES_KEY = "next-ai-draw-io-messages"
@@ -76,6 +78,7 @@ interface ChatPanelProps {
 const TOOL_ERROR_STATE = "output-error" as const
 const DEBUG = process.env.NODE_ENV === "development"
 const MAX_AUTO_RETRY_COUNT = 1
+
 const MAX_CONTINUATION_RETRY_COUNT = 2 // Limit for truncation continuation retries
 
 /**
@@ -212,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)
@@ -237,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,
@@ -249,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)
@@ -717,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(() => {
@@ -1337,6 +1041,14 @@ Continue from EXACTLY where you stopped.`,
                 />
             </main>
 
+            {/* Dev XML Streaming Simulator - only in development */}
+            {DEBUG && (
+                <DevXmlSimulator
+                    setMessages={setMessages}
+                    onDisplayChart={onDisplayChart}
+                />
+            )}
+
             {/* Input */}
             <footer
                 className={`${isMobile ? "p-2" : "p-4"} border-t border-border/50 bg-card/50`}

components/dev-xml-simulator.tsx

@@ -0,0 +1,350 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { wrapWithMxFile } from "@/lib/utils"
+
+// Dev XML presets for streaming simulator
+const DEV_XML_PRESETS: Record<string, string> = {
+    "Simple Box": `<mxCell id="2" value="Hello World" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+  <mxGeometry x="120" y="100" width="120" height="60" as="geometry"/>
+</mxCell>`,
+    "Two Boxes with Arrow": `<mxCell id="2" value="Start" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+  <mxGeometry x="100" y="100" width="100" height="50" as="geometry"/>
+</mxCell>
+<mxCell id="3" value="End" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+  <mxGeometry x="300" y="100" width="100" height="50" as="geometry"/>
+</mxCell>
+<mxCell id="4" value="" style="endArrow=classic;html=1;" edge="1" parent="1" source="2" target="3">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>`,
+    Flowchart: `<mxCell id="2" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+  <mxGeometry x="160" y="40" width="80" height="40" as="geometry"/>
+</mxCell>
+<mxCell id="3" value="Process A" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+  <mxGeometry x="140" y="120" width="120" height="60" as="geometry"/>
+</mxCell>
+<mxCell id="4" value="Decision" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+  <mxGeometry x="150" y="220" width="100" height="80" as="geometry"/>
+</mxCell>
+<mxCell id="5" value="Process B" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+  <mxGeometry x="300" y="230" width="120" height="60" as="geometry"/>
+</mxCell>
+<mxCell id="6" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+  <mxGeometry x="160" y="340" width="80" height="40" as="geometry"/>
+</mxCell>
+<mxCell id="7" style="endArrow=classic;html=1;" edge="1" parent="1" source="2" target="3">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="8" style="endArrow=classic;html=1;" edge="1" parent="1" source="3" target="4">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="9" value="Yes" style="endArrow=classic;html=1;" edge="1" parent="1" source="4" target="6">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="10" value="No" style="endArrow=classic;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="4" target="5">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>`,
+    "Truncated (Error Test)": `<mxCell id="2" value="This cell is truncated" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+  <mxGeometry x="120" y="100" width="120" height="60" as="geometry"/>
+</mxCell>
+<mxCell id="3" value="Incomplete" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor`,
+    "HTML Escape + Cell Truncate": `<mxCell id="2" value="<b>Chain-of-Thought Prompting</b><br/><font size='12'>Eliciting Reasoning in Large Language Models</font>" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=16;fontStyle=1;" vertex="1" parent="1">
+  <mxGeometry x="40" y="40" width="720" height="60" as="geometry"/>
+</mxCell>
+<mxCell id="3" value="<b>Problem: LLM Reasoning Limitations</b><br/>• Scaling parameters alone insufficient for logical tasks<br/>• Arithmetic, commonsense, symbolic reasoning challenges<br/>• Standard prompting fails on multi-step problems" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
+  <mxGeometry x="40" y="120" width="340" height="120" as="geometry"/>
+</mxCell>
+<mxCell id="4" value="<b>Traditional Approaches</b><br/>1. <b>Finetuning:</b> Expensive, task-specific<br/>2. <b>Standard Few-Shot:</b> Input→Output pairs<br/>   (No explanation of reasoning)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+  <mxGeometry x="420" y="120" width="340" height="120" as="geometry"/>
+</mxCell>
+<mxCell id="5" value="<b>CoT Methodology</b><br/>• Add reasoning steps to few-shot examples<br/>• Natural language intermediate steps<br/>• No parameter updates needed<br/>• Model learns to generate own thought process" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+  <mxGeometry x="40" y="260" width="340" height="100" as="geometry"/>
+</mxCell>
+<mxCell id="6" value="<b>Example Comparison</b><br/><b>Standard:</b><br/>Q: Roger has 5 balls. He buys 2 cans of 3 balls. How many?<br/>A: 11.<br/><br/><b>CoT:</b><br/>Q: Roger has 5 balls. He buys 2 cans of 3 balls. How many?<br/>A: Roger started with 5 balls. 2 cans of 3 tennis balls each is 6 tennis balls. 5 + 6 = 11. The answer is 11." style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="1">
+  <mxGeometry x="420" y="260" width="340" height="140" as="geometry"/>
+</mxCell>
+<mxCell id="7" value="<b>Experimental Models</b><br/>• GPT-3 (175B)<br/>• LaMDA (137B)<br/>• PaLM (540B)<br/>• UL2 (20B)<br/>• Codex" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+  <mxGeometry x="40" y="380" width="340" height="100" as="geometry"/>
+</mxCell>
+<mxCell id="8" value="<b>Reasoning Domains Tested</b><br/>1. <b>Arithmetic:</b> GSM8K, SVAMP, ASDiv, AQuA, MAWPS<br/>2. <b>Commonsense:</b> CSQA, StrategyQA, Date Understanding, Sports Understanding<br/>3. <b>Symbolic:</b> Last Letter Concatenation, Coin Flip" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="1">
+  <mxGeometry x="420" y="420" width="340" height="100" as="geometry"/>
+</mxCell>
+<mxCell id="9" value="<b>Key Results: Arithmetic</b><br/>• PaLM 540B + CoT: <b>56.9%</b> on GSM8K<br/>   (vs 17.9% standard)<br/>• Surpassed finetuned GPT-3 (55%)<br/>• With calculator: <b>58.6%</b>" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+  <mxGeometry x="40" y="500" width="220" height="100" as="geometry"/>
+</mxCell>
+<mxCell id="10" value="<b>Key Results: Commonsense</b><br/>• StrategyQA: <b>75.6%</b><br/>   (vs 69.4% SOTA)<br/>• Sports Understanding: <b>95.4%</b><br/>   (vs 84% human)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+  <mxGeometry x="280" y="500" width="220" height="100" as="geometry"/>
+</mxCell>
+<mxCell id="11" value="<b>Key Results: Symbolic</b><br/>• OOD Generalization<br/>• Coin Flip: Trained on 2 flips<br/>   Works on 3-4 flips with CoT<br/>• Standard prompting fails" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+  <mxGeometry x="540" y="500" width="220" height="100" as="geometry"/>
+</mxCell>
+<mxCell id="12" value="<b>Emergent Ability of Scale</b><br/>• Small models (&lt;10B): No benefit, often harmful<br/>• Large models (100B+): Reasoning emerges<br/>• CoT gains increase dramatically with scale" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
+  <mxGeometry x="40" y="620" width="340" height="80" as="geometry"/>
+</mxCell>
+<mxCell id="13" value="<b>Ablation Studies</b><br/>1. Equation only: Worse than CoT<br/>2. Variable compute (...): No improvement<br/>3. Answer first, then reasoning: Same as baseline<br/>→ Content matters, not just extra tokens" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+  <mxGeometry x="420" y="620" width="340" height="80" as="geometry"/>
+</mxCell>
+<mxCell id="14" value="<b>Error Analysis</b><br/>• Semantic understanding errors<br/>• One-step missing errors<br/>• Calculation errors<br/>• Larger models reduce semantic/missing-step errors" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+  <mxGeometry x="40" y="720" width="340" height="80" as="geometry"/>
+</mxCell>
+<mxCell id="15" value="<b>Conclusion</b><br/>• CoT unlocks reasoning potential<br/>• Simple paradigm: &quot;show your work&quot;<br/>• Emergent capability of large models<br/>• No specialized architecture needed" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+  <mxGeometry x="420" y="720" width="340" height="80" as="geometry"/>
+</mxCell>
+<mxCell id="16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="3" target="5">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="4" target="6">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="5" target="7">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="6" target="8">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.25;entryY=0;" edge="1" parent="1" source="7" target="9">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="7" target="10">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.75;entryY=0;" edge="1" parent="1" source="7" target="11">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="9" target="12">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="10" target="13">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="25" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="11" target="14">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="26" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="12" target="15">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="27" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="13" target="15">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="28" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="14" target="15">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>`,
+}
+
+interface DevXmlSimulatorProps {
+    setMessages: React.Dispatch<React.SetStateAction<any[]>>
+    onDisplayChart: (xml: string) => void
+}
+
+export function DevXmlSimulator({
+    setMessages,
+    onDisplayChart,
+}: DevXmlSimulatorProps) {
+    const [devXml, setDevXml] = useState("")
+    const [isSimulating, setIsSimulating] = useState(false)
+    const [devIntervalMs, setDevIntervalMs] = useState(1)
+    const [devChunkSize, setDevChunkSize] = useState(10)
+    const devStopRef = useRef(false)
+    const devXmlInitializedRef = useRef(false)
+
+    // Restore dev XML from localStorage on mount (after hydration)
+    useEffect(() => {
+        const saved = localStorage.getItem("dev-xml-simulator")
+        if (saved) setDevXml(saved)
+        devXmlInitializedRef.current = true
+    }, [])
+
+    // Save dev XML to localStorage (only after initial load)
+    useEffect(() => {
+        if (devXmlInitializedRef.current) {
+            localStorage.setItem("dev-xml-simulator", devXml)
+        }
+    }, [devXml])
+
+    const handleDevSimulate = async () => {
+        if (!devXml.trim() || isSimulating) return
+
+        setIsSimulating(true)
+        devStopRef.current = false
+        const toolCallId = `dev-sim-${Date.now()}`
+        const xml = devXml.trim()
+
+        // Add user message and initial assistant message with empty XML
+        const userMsg = {
+            id: `user-${Date.now()}`,
+            role: "user" as const,
+            parts: [
+                {
+                    type: "text" as const,
+                    text: "[Dev] Simulating XML streaming",
+                },
+            ],
+        }
+        const assistantMsg = {
+            id: `assistant-${Date.now()}`,
+            role: "assistant" as const,
+            parts: [
+                {
+                    type: "tool-display_diagram" as const,
+                    toolCallId,
+                    state: "input-streaming" as const,
+                    input: { xml: "" },
+                },
+            ],
+        }
+        setMessages((prev) => [...prev, userMsg, assistantMsg] as any)
+
+        // Stream characters progressively
+        for (let i = 0; i < xml.length; i += devChunkSize) {
+            if (devStopRef.current) {
+                setIsSimulating(false)
+                return
+            }
+
+            const chunk = xml.slice(0, i + devChunkSize)
+
+            setMessages((prev) => {
+                const updated = [...prev]
+                const lastMsg = updated[updated.length - 1] as any
+                if (lastMsg?.role === "assistant" && lastMsg.parts?.[0]) {
+                    lastMsg.parts[0].input = { xml: chunk }
+                }
+                return updated
+            })
+
+            await new Promise((r) => setTimeout(r, devIntervalMs))
+        }
+
+        if (devStopRef.current) {
+            setIsSimulating(false)
+            return
+        }
+
+        // Finalize: set state to output-available
+        setMessages((prev) => {
+            const updated = [...prev]
+            const lastMsg = updated[updated.length - 1] as any
+            if (lastMsg?.role === "assistant" && lastMsg.parts?.[0]) {
+                lastMsg.parts[0].state = "output-available"
+                lastMsg.parts[0].output = "Successfully displayed the diagram."
+                lastMsg.parts[0].input = { xml }
+            }
+            return updated
+        })
+
+        // Display the final diagram
+        const fullXml = wrapWithMxFile(xml)
+        onDisplayChart(fullXml)
+
+        setIsSimulating(false)
+    }
+
+    return (
+        <div className="border-t border-dashed border-orange-500/50 px-4 py-2 bg-orange-50/50 dark:bg-orange-950/30">
+            <details>
+                <summary className="text-xs text-orange-600 dark:text-orange-400 cursor-pointer font-medium">
+                    Dev: XML Streaming Simulator
+                </summary>
+                <div className="mt-2 space-y-2">
+                    <div className="flex items-center gap-2">
+                        <label className="text-xs text-muted-foreground whitespace-nowrap">
+                            Preset:
+                        </label>
+                        <select
+                            onChange={(e) => {
+                                if (e.target.value) {
+                                    setDevXml(DEV_XML_PRESETS[e.target.value])
+                                }
+                            }}
+                            className="flex-1 text-xs p-1 border rounded bg-background"
+                            defaultValue=""
+                        >
+                            <option value="" disabled>
+                                Select a preset...
+                            </option>
+                            {Object.keys(DEV_XML_PRESETS).map((name) => (
+                                <option key={name} value={name}>
+                                    {name}
+                                </option>
+                            ))}
+                        </select>
+                        <button
+                            type="button"
+                            onClick={() => setDevXml("")}
+                            className="px-2 py-1 text-xs text-muted-foreground hover:text-foreground border rounded"
+                        >
+                            Clear
+                        </button>
+                    </div>
+                    <textarea
+                        value={devXml}
+                        onChange={(e) => setDevXml(e.target.value)}
+                        placeholder="Paste mxCell XML here or select a preset..."
+                        className="w-full h-24 text-xs font-mono p-2 border rounded bg-background"
+                    />
+                    <div className="flex items-center gap-4">
+                        <div className="flex items-center gap-2 flex-1">
+                            <label className="text-xs text-muted-foreground whitespace-nowrap">
+                                Interval:
+                            </label>
+                            <input
+                                type="range"
+                                min="1"
+                                max="200"
+                                step="1"
+                                value={devIntervalMs}
+                                onChange={(e) =>
+                                    setDevIntervalMs(Number(e.target.value))
+                                }
+                                className="flex-1 h-1 accent-orange-500"
+                            />
+                            <span className="text-xs text-muted-foreground w-12">
+                                {devIntervalMs}ms
+                            </span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <label className="text-xs text-muted-foreground whitespace-nowrap">
+                                Chars:
+                            </label>
+                            <input
+                                type="number"
+                                min="1"
+                                max="100"
+                                value={devChunkSize}
+                                onChange={(e) =>
+                                    setDevChunkSize(
+                                        Math.max(1, Number(e.target.value)),
+                                    )
+                                }
+                                className="w-14 text-xs p-1 border rounded bg-background"
+                            />
+                        </div>
+                    </div>
+                    <div className="flex gap-2">
+                        <button
+                            type="button"
+                            onClick={handleDevSimulate}
+                            disabled={isSimulating || !devXml.trim()}
+                            className="px-3 py-1 text-xs bg-orange-500 text-white rounded hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            {isSimulating
+                                ? "Streaming..."
+                                : `Simulate (${devChunkSize} chars/${devIntervalMs}ms)`}
+                        </button>
+                        {isSimulating && (
+                            <button
+                                type="button"
+                                onClick={() => {
+                                    devStopRef.current = true
+                                }}
+                                className="px-3 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600"
+                            >
+                                Stop
+                            </button>
+                        )}
+                    </div>
+                </div>
+            </details>
+        </div>
+    )
+}

components/model-config-dialog.tsx

@@ -504,7 +504,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}>

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

electron.d.ts

@@ -2,29 +2,6 @@
  * Type declarations for Electron API exposed via preload script
  */
 
-/** Configuration preset interface */
-interface ConfigPreset {
-    id: string
-    name: string
-    createdAt: number
-    updatedAt: number
-    config: {
-        AI_PROVIDER?: string
-        AI_MODEL?: string
-        AI_API_KEY?: string
-        AI_BASE_URL?: string
-        TEMPERATURE?: string
-        [key: string]: string | undefined
-    }
-}
-
-/** Result of applying a preset */
-interface ApplyPresetResult {
-    success: boolean
-    error?: string
-    env?: Record<string, string>
-}
-
 declare global {
     interface Window {
         /** Main window Electron API */
@@ -46,29 +23,7 @@ declare global {
             /** Save data to file via save dialog */
             saveFile: (data: string) => Promise<boolean>
         }
-
-        /** Settings window Electron API */
-        settingsAPI?: {
-            /** Get all configuration presets */
-            getPresets: () => Promise<ConfigPreset[]>
-            /** Get current preset ID */
-            getCurrentPresetId: () => Promise<string | null>
-            /** Get current preset */
-            getCurrentPreset: () => Promise<ConfigPreset | null>
-            /** Save (create or update) a preset */
-            savePreset: (preset: {
-                id?: string
-                name: string
-                config: Record<string, string | undefined>
-            }) => Promise<ConfigPreset>
-            /** Delete a preset */
-            deletePreset: (id: string) => Promise<boolean>
-            /** Apply a preset (sets environment variables and restarts server) */
-            applyPreset: (id: string) => Promise<ApplyPresetResult>
-            /** Close settings window */
-            close: () => void
-        }
     }
 }
 
-export { ConfigPreset, ApplyPresetResult }
+export {}

electron/main/app-menu.ts

@@ -1,19 +1,4 @@
-import {
-    app,
-    BrowserWindow,
-    dialog,
-    Menu,
-    type MenuItemConstructorOptions,
-    shell,
-} from "electron"
-import {
-    applyPresetToEnv,
-    getAllPresets,
-    getCurrentPresetId,
-    setCurrentPreset,
-} from "./config-manager"
-import { restartNextServer } from "./next-server"
-import { showSettingsWindow } from "./settings-window"
+import { app, Menu, type MenuItemConstructorOptions, shell } from "electron"
 
 /**
  * Build and set the application menu
@@ -24,13 +9,6 @@ export function buildAppMenu(): void {
     Menu.setApplicationMenu(menu)
 }
 
-/**
- * Rebuild the menu (call this when presets change)
- */
-export function rebuildAppMenu(): void {
-    buildAppMenu()
-}
-
 /**
  * Get the menu template
  */
@@ -46,15 +24,6 @@ function getMenuTemplate(): MenuItemConstructorOptions[] {
             submenu: [
                 { role: "about" },
                 { type: "separator" },
-                {
-                    label: "Settings...",
-                    accelerator: "CmdOrCtrl+,",
-                    click: () => {
-                        const win = BrowserWindow.getFocusedWindow()
-                        showSettingsWindow(win || undefined)
-                    },
-                },
-                { type: "separator" },
                 { role: "services" },
                 { type: "separator" },
                 { role: "hide" },
@@ -69,22 +38,7 @@ function getMenuTemplate(): MenuItemConstructorOptions[] {
     // File menu
     template.push({
         label: "File",
-        submenu: [
-            ...(isMac
-                ? []
-                : [
-                      {
-                          label: "Settings",
-                          accelerator: "CmdOrCtrl+,",
-                          click: () => {
-                              const win = BrowserWindow.getFocusedWindow()
-                              showSettingsWindow(win || undefined)
-                          },
-                      },
-                      { type: "separator" } as MenuItemConstructorOptions,
-                  ]),
-            isMac ? { role: "close" } : { role: "quit" },
-        ],
+        submenu: [isMac ? { role: "close" } : { role: "quit" }],
     })
 
     // Edit menu
@@ -129,9 +83,6 @@ function getMenuTemplate(): MenuItemConstructorOptions[] {
         ],
     })
 
-    // Configuration menu with presets
-    template.push(buildConfigMenu())
-
     // Window menu
     template.push({
         label: "Window",
@@ -172,70 +123,3 @@ function getMenuTemplate(): MenuItemConstructorOptions[] {
 
     return template
 }
-
-/**
- * Build the Configuration menu with presets
- */
-function buildConfigMenu(): MenuItemConstructorOptions {
-    const presets = getAllPresets()
-    const currentPresetId = getCurrentPresetId()
-
-    const presetItems: MenuItemConstructorOptions[] = presets.map((preset) => ({
-        label: preset.name,
-        type: "radio",
-        checked: preset.id === currentPresetId,
-        click: async () => {
-            const previousPresetId = getCurrentPresetId()
-            const env = applyPresetToEnv(preset.id)
-
-            if (env) {
-                try {
-                    await restartNextServer()
-                    rebuildAppMenu() // Rebuild menu to update checkmarks
-                } catch (error) {
-                    console.error("Failed to restart server:", error)
-
-                    // Revert to previous preset on failure
-                    if (previousPresetId) {
-                        applyPresetToEnv(previousPresetId)
-                    } else {
-                        setCurrentPreset(null)
-                    }
-
-                    // Rebuild menu to restore previous checkmark state
-                    rebuildAppMenu()
-
-                    // Show error dialog to notify user
-                    dialog.showErrorBox(
-                        "Configuration Error",
-                        `Failed to apply preset "${preset.name}". The server could not be restarted.\n\nThe previous configuration has been restored.\n\nError: ${error instanceof Error ? error.message : String(error)}`,
-                    )
-                }
-            }
-        },
-    }))
-
-    return {
-        label: "Configuration",
-        submenu: [
-            ...(presetItems.length > 0
-                ? [
-                      { label: "Switch Preset", enabled: false },
-                      { type: "separator" } as MenuItemConstructorOptions,
-                      ...presetItems,
-                      { type: "separator" } as MenuItemConstructorOptions,
-                  ]
-                : []),
-            {
-                label:
-                    presetItems.length > 0
-                        ? "Manage Presets..."
-                        : "Add Configuration Preset...",
-                click: () => {
-                    const win = BrowserWindow.getFocusedWindow()
-                    showSettingsWindow(win || undefined)
-                },
-            },
-        ],
-    }
-}

electron/main/config-manager.ts

@@ -1,460 +0,0 @@
-import { randomUUID } from "node:crypto"
-import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs"
-import path from "node:path"
-import { app, safeStorage } from "electron"
-
-/**
- * Fields that contain sensitive data and should be encrypted
- */
-const SENSITIVE_FIELDS = ["AI_API_KEY"] as const
-
-/**
- * Prefix to identify encrypted values
- */
-const ENCRYPTED_PREFIX = "encrypted:"
-
-/**
- * Check if safeStorage encryption is available
- */
-function isEncryptionAvailable(): boolean {
-    return safeStorage.isEncryptionAvailable()
-}
-
-/**
- * Track if we've already warned about plaintext storage
- */
-let hasWarnedAboutPlaintext = false
-
-/**
- * Encrypt a sensitive value using safeStorage
- * Warns if encryption is not available (API key stored in plaintext)
- */
-function encryptValue(value: string): string {
-    if (!value) {
-        return value
-    }
-
-    if (!isEncryptionAvailable()) {
-        if (!hasWarnedAboutPlaintext) {
-            console.warn(
-                "⚠️ SECURITY WARNING: safeStorage not available. " +
-                    "API keys will be stored in PLAINTEXT. " +
-                    "On Linux, install gnome-keyring or similar for secure storage.",
-            )
-            hasWarnedAboutPlaintext = true
-        }
-        return value
-    }
-
-    try {
-        const encrypted = safeStorage.encryptString(value)
-        return ENCRYPTED_PREFIX + encrypted.toString("base64")
-    } catch (error) {
-        console.error("Encryption failed:", error)
-        // Fail secure: don't store if encryption fails
-        throw new Error(
-            "Failed to encrypt API key. Cannot securely store credentials.",
-        )
-    }
-}
-
-/**
- * Decrypt a sensitive value using safeStorage
- * Returns the original value if it's not encrypted or decryption fails
- */
-function decryptValue(value: string): string {
-    if (!value || !value.startsWith(ENCRYPTED_PREFIX)) {
-        return value
-    }
-    if (!isEncryptionAvailable()) {
-        console.warn(
-            "Cannot decrypt value: safeStorage encryption is not available",
-        )
-        return value
-    }
-    try {
-        const base64Data = value.slice(ENCRYPTED_PREFIX.length)
-        const buffer = Buffer.from(base64Data, "base64")
-        return safeStorage.decryptString(buffer)
-    } catch (error) {
-        console.error("Failed to decrypt value:", error)
-        return value
-    }
-}
-
-/**
- * Encrypt sensitive fields in a config object
- */
-function encryptConfig(
-    config: Record<string, string | undefined>,
-): Record<string, string | undefined> {
-    const encrypted = { ...config }
-    for (const field of SENSITIVE_FIELDS) {
-        if (encrypted[field]) {
-            encrypted[field] = encryptValue(encrypted[field] as string)
-        }
-    }
-    return encrypted
-}
-
-/**
- * Decrypt sensitive fields in a config object
- */
-function decryptConfig(
-    config: Record<string, string | undefined>,
-): Record<string, string | undefined> {
-    const decrypted = { ...config }
-    for (const field of SENSITIVE_FIELDS) {
-        if (decrypted[field]) {
-            decrypted[field] = decryptValue(decrypted[field] as string)
-        }
-    }
-    return decrypted
-}
-
-/**
- * Configuration preset interface
- */
-export interface ConfigPreset {
-    id: string
-    name: string
-    createdAt: number
-    updatedAt: number
-    config: {
-        AI_PROVIDER?: string
-        AI_MODEL?: string
-        AI_API_KEY?: string
-        AI_BASE_URL?: string
-        TEMPERATURE?: string
-        [key: string]: string | undefined
-    }
-}
-
-/**
- * Configuration file structure
- */
-interface ConfigPresetsFile {
-    version: 1
-    currentPresetId: string | null
-    presets: ConfigPreset[]
-}
-
-const CONFIG_FILE_NAME = "config-presets.json"
-
-/**
- * Get the path to the config file
- */
-function getConfigFilePath(): string {
-    const userDataPath = app.getPath("userData")
-    return path.join(userDataPath, CONFIG_FILE_NAME)
-}
-
-/**
- * Load presets from the config file
- * Decrypts sensitive fields automatically
- */
-export function loadPresets(): ConfigPresetsFile {
-    const configPath = getConfigFilePath()
-
-    if (!existsSync(configPath)) {
-        return {
-            version: 1,
-            currentPresetId: null,
-            presets: [],
-        }
-    }
-
-    try {
-        const content = readFileSync(configPath, "utf-8")
-        const data = JSON.parse(content) as ConfigPresetsFile
-
-        // Decrypt sensitive fields in each preset
-        data.presets = data.presets.map((preset) => ({
-            ...preset,
-            config: decryptConfig(preset.config) as ConfigPreset["config"],
-        }))
-
-        return data
-    } catch (error) {
-        console.error("Failed to load config presets:", error)
-        return {
-            version: 1,
-            currentPresetId: null,
-            presets: [],
-        }
-    }
-}
-
-/**
- * Save presets to the config file
- * Encrypts sensitive fields automatically
- */
-export function savePresets(data: ConfigPresetsFile): void {
-    const configPath = getConfigFilePath()
-    const userDataPath = app.getPath("userData")
-
-    // Ensure the directory exists
-    if (!existsSync(userDataPath)) {
-        mkdirSync(userDataPath, { recursive: true })
-    }
-
-    // Encrypt sensitive fields before saving
-    const dataToSave: ConfigPresetsFile = {
-        ...data,
-        presets: data.presets.map((preset) => ({
-            ...preset,
-            config: encryptConfig(preset.config) as ConfigPreset["config"],
-        })),
-    }
-
-    try {
-        writeFileSync(configPath, JSON.stringify(dataToSave, null, 2), "utf-8")
-    } catch (error) {
-        console.error("Failed to save config presets:", error)
-        throw error
-    }
-}
-
-/**
- * Get all presets
- */
-export function getAllPresets(): ConfigPreset[] {
-    const data = loadPresets()
-    return data.presets
-}
-
-/**
- * Get current preset ID
- */
-export function getCurrentPresetId(): string | null {
-    const data = loadPresets()
-    return data.currentPresetId
-}
-
-/**
- * Get current preset
- */
-export function getCurrentPreset(): ConfigPreset | null {
-    const data = loadPresets()
-    if (!data.currentPresetId) {
-        return null
-    }
-    return data.presets.find((p) => p.id === data.currentPresetId) || null
-}
-
-/**
- * Create a new preset
- */
-export function createPreset(
-    preset: Omit<ConfigPreset, "id" | "createdAt" | "updatedAt">,
-): ConfigPreset {
-    const data = loadPresets()
-    const now = Date.now()
-
-    const newPreset: ConfigPreset = {
-        id: randomUUID(),
-        name: preset.name,
-        config: preset.config,
-        createdAt: now,
-        updatedAt: now,
-    }
-
-    data.presets.push(newPreset)
-    savePresets(data)
-
-    return newPreset
-}
-
-/**
- * Update an existing preset
- */
-export function updatePreset(
-    id: string,
-    updates: Partial<Omit<ConfigPreset, "id" | "createdAt">>,
-): ConfigPreset | null {
-    const data = loadPresets()
-    const index = data.presets.findIndex((p) => p.id === id)
-
-    if (index === -1) {
-        return null
-    }
-
-    const updatedPreset: ConfigPreset = {
-        ...data.presets[index],
-        ...updates,
-        updatedAt: Date.now(),
-    }
-
-    data.presets[index] = updatedPreset
-    savePresets(data)
-
-    return updatedPreset
-}
-
-/**
- * Delete a preset
- */
-export function deletePreset(id: string): boolean {
-    const data = loadPresets()
-    const index = data.presets.findIndex((p) => p.id === id)
-
-    if (index === -1) {
-        return false
-    }
-
-    data.presets.splice(index, 1)
-
-    // Clear current preset if it was deleted
-    if (data.currentPresetId === id) {
-        data.currentPresetId = null
-    }
-
-    savePresets(data)
-    return true
-}
-
-/**
- * Set the current preset
- */
-export function setCurrentPreset(id: string | null): boolean {
-    const data = loadPresets()
-
-    if (id !== null) {
-        const preset = data.presets.find((p) => p.id === id)
-        if (!preset) {
-            return false
-        }
-    }
-
-    data.currentPresetId = id
-    savePresets(data)
-    return true
-}
-
-/**
- * Map generic AI_API_KEY and AI_BASE_URL to provider-specific environment variables
- */
-const PROVIDER_ENV_MAP: Record<string, { apiKey: string; baseUrl: string }> = {
-    openai: { apiKey: "OPENAI_API_KEY", baseUrl: "OPENAI_BASE_URL" },
-    anthropic: { apiKey: "ANTHROPIC_API_KEY", baseUrl: "ANTHROPIC_BASE_URL" },
-    google: {
-        apiKey: "GOOGLE_GENERATIVE_AI_API_KEY",
-        baseUrl: "GOOGLE_BASE_URL",
-    },
-    azure: { apiKey: "AZURE_API_KEY", baseUrl: "AZURE_BASE_URL" },
-    openrouter: {
-        apiKey: "OPENROUTER_API_KEY",
-        baseUrl: "OPENROUTER_BASE_URL",
-    },
-    deepseek: { apiKey: "DEEPSEEK_API_KEY", baseUrl: "DEEPSEEK_BASE_URL" },
-    siliconflow: {
-        apiKey: "SILICONFLOW_API_KEY",
-        baseUrl: "SILICONFLOW_BASE_URL",
-    },
-    gateway: { apiKey: "AI_GATEWAY_API_KEY", baseUrl: "AI_GATEWAY_BASE_URL" },
-    // bedrock and ollama don't use API keys in the same way
-    bedrock: { apiKey: "", baseUrl: "" },
-    ollama: { apiKey: "", baseUrl: "OLLAMA_BASE_URL" },
-}
-
-/**
- * Apply preset environment variables to the current process
- * Returns the environment variables that were applied
- */
-export function applyPresetToEnv(id: string): Record<string, string> | null {
-    const data = loadPresets()
-    const preset = data.presets.find((p) => p.id === id)
-
-    if (!preset) {
-        return null
-    }
-
-    const appliedEnv: Record<string, string> = {}
-    const provider = preset.config.AI_PROVIDER?.toLowerCase()
-
-    for (const [key, value] of Object.entries(preset.config)) {
-        if (value !== undefined && value !== "") {
-            // Map generic AI_API_KEY to provider-specific key
-            if (
-                key === "AI_API_KEY" &&
-                provider &&
-                PROVIDER_ENV_MAP[provider]
-            ) {
-                const providerApiKey = PROVIDER_ENV_MAP[provider].apiKey
-                if (providerApiKey) {
-                    process.env[providerApiKey] = value
-                    appliedEnv[providerApiKey] = value
-                }
-            }
-            // Map generic AI_BASE_URL to provider-specific key
-            else if (
-                key === "AI_BASE_URL" &&
-                provider &&
-                PROVIDER_ENV_MAP[provider]
-            ) {
-                const providerBaseUrl = PROVIDER_ENV_MAP[provider].baseUrl
-                if (providerBaseUrl) {
-                    process.env[providerBaseUrl] = value
-                    appliedEnv[providerBaseUrl] = value
-                }
-            }
-            // Apply other env vars directly
-            else {
-                process.env[key] = value
-                appliedEnv[key] = value
-            }
-        }
-    }
-
-    // Set as current preset
-    data.currentPresetId = id
-    savePresets(data)
-
-    return appliedEnv
-}
-
-/**
- * Get environment variables from current preset
- * Maps generic AI_API_KEY/AI_BASE_URL to provider-specific keys
- */
-export function getCurrentPresetEnv(): Record<string, string> {
-    const preset = getCurrentPreset()
-    if (!preset) {
-        return {}
-    }
-
-    const env: Record<string, string> = {}
-    const provider = preset.config.AI_PROVIDER?.toLowerCase()
-
-    for (const [key, value] of Object.entries(preset.config)) {
-        if (value !== undefined && value !== "") {
-            // Map generic AI_API_KEY to provider-specific key
-            if (
-                key === "AI_API_KEY" &&
-                provider &&
-                PROVIDER_ENV_MAP[provider]
-            ) {
-                const providerApiKey = PROVIDER_ENV_MAP[provider].apiKey
-                if (providerApiKey) {
-                    env[providerApiKey] = value
-                }
-            }
-            // Map generic AI_BASE_URL to provider-specific key
-            else if (
-                key === "AI_BASE_URL" &&
-                provider &&
-                PROVIDER_ENV_MAP[provider]
-            ) {
-                const providerBaseUrl = PROVIDER_ENV_MAP[provider].baseUrl
-                if (providerBaseUrl) {
-                    env[providerBaseUrl] = value
-                }
-            }
-            // Apply other env vars directly
-            else {
-                env[key] = value
-            }
-        }
-    }
-    return env
-}

electron/main/index.ts

@@ -1,10 +1,8 @@
 import { app, BrowserWindow, dialog, shell } from "electron"
 import { buildAppMenu } from "./app-menu"
-import { getCurrentPresetEnv } from "./config-manager"
 import { loadEnvFile } from "./env-loader"
 import { registerIpcHandlers } from "./ipc-handlers"
 import { startNextServer, stopNextServer } from "./next-server"
-import { registerSettingsWindowHandlers } from "./settings-window"
 import { createWindow, getMainWindow } from "./window-manager"
 
 // Single instance lock
@@ -24,19 +22,12 @@ if (!gotTheLock) {
     // Load environment variables from .env files
     loadEnvFile()
 
-    // Apply saved preset environment variables (overrides .env)
-    const presetEnv = getCurrentPresetEnv()
-    for (const [key, value] of Object.entries(presetEnv)) {
-        process.env[key] = value
-    }
-
     const isDev = process.env.NODE_ENV === "development"
     let serverUrl: string | null = null
 
     app.whenReady().then(async () => {
         // Register IPC handlers
         registerIpcHandlers()
-        registerSettingsWindowHandlers()
 
         // Build application menu
         buildAppMenu()

electron/main/ipc-handlers.ts

@@ -1,43 +1,4 @@
 import { app, BrowserWindow, dialog, ipcMain } from "electron"
-import {
-    applyPresetToEnv,
-    type ConfigPreset,
-    createPreset,
-    deletePreset,
-    getAllPresets,
-    getCurrentPreset,
-    getCurrentPresetId,
-    setCurrentPreset,
-    updatePreset,
-} from "./config-manager"
-import { restartNextServer } from "./next-server"
-
-/**
- * Allowed configuration keys for presets
- * This whitelist prevents arbitrary environment variable injection
- */
-const ALLOWED_CONFIG_KEYS = new Set([
-    "AI_PROVIDER",
-    "AI_MODEL",
-    "AI_API_KEY",
-    "AI_BASE_URL",
-    "TEMPERATURE",
-])
-
-/**
- * Sanitize preset config to only include allowed keys
- */
-function sanitizePresetConfig(
-    config: Record<string, string | undefined>,
-): Record<string, string | undefined> {
-    const sanitized: Record<string, string | undefined> = {}
-    for (const key of ALLOWED_CONFIG_KEYS) {
-        if (key in config && typeof config[key] === "string") {
-            sanitized[key] = config[key]
-        }
-    }
-    return sanitized
-}
 
 /**
  * Register all IPC handlers
@@ -123,90 +84,4 @@ export function registerIpcHandlers(): void {
             return false
         }
     })
-
-    // ==================== Config Presets ====================
-
-    ipcMain.handle("config-presets:get-all", () => {
-        return getAllPresets()
-    })
-
-    ipcMain.handle("config-presets:get-current", () => {
-        return getCurrentPreset()
-    })
-
-    ipcMain.handle("config-presets:get-current-id", () => {
-        return getCurrentPresetId()
-    })
-
-    ipcMain.handle(
-        "config-presets:save",
-        (
-            _event,
-            preset: Omit<ConfigPreset, "id" | "createdAt" | "updatedAt"> & {
-                id?: string
-            },
-        ) => {
-            // Validate preset name
-            if (typeof preset.name !== "string" || !preset.name.trim()) {
-                throw new Error("Invalid preset name")
-            }
-
-            // Sanitize config to only allow whitelisted keys
-            const sanitizedConfig = sanitizePresetConfig(preset.config ?? {})
-
-            if (preset.id) {
-                // Update existing preset
-                return updatePreset(preset.id, {
-                    name: preset.name.trim(),
-                    config: sanitizedConfig,
-                })
-            }
-            // Create new preset
-            return createPreset({
-                name: preset.name.trim(),
-                config: sanitizedConfig,
-            })
-        },
-    )
-
-    ipcMain.handle("config-presets:delete", (_event, id: string) => {
-        return deletePreset(id)
-    })
-
-    ipcMain.handle("config-presets:apply", async (_event, id: string) => {
-        const env = applyPresetToEnv(id)
-        if (!env) {
-            return { success: false, error: "Preset not found" }
-        }
-
-        const isDev = process.env.NODE_ENV === "development"
-
-        if (isDev) {
-            // In development mode, the config file change will trigger
-            // the file watcher in electron-dev.mjs to restart Next.js
-            // We just need to save the preset (already done in applyPresetToEnv)
-            return { success: true, env, devMode: true }
-        }
-
-        // Production mode: restart the Next.js server to apply new environment variables
-        try {
-            await restartNextServer()
-            return { success: true, env }
-        } catch (error) {
-            return {
-                success: false,
-                error:
-                    error instanceof Error
-                        ? error.message
-                        : "Failed to restart server",
-            }
-        }
-    })
-
-    ipcMain.handle(
-        "config-presets:set-current",
-        (_event, id: string | null) => {
-            return setCurrentPreset(id)
-        },
-    )
 }

electron/main/settings-window.ts

@@ -1,78 +0,0 @@
-import path from "node:path"
-import { app, BrowserWindow, ipcMain } from "electron"
-
-let settingsWindow: BrowserWindow | null = null
-
-/**
- * Create and show the settings window
- */
-export function showSettingsWindow(parentWindow?: BrowserWindow): void {
-    // If settings window already exists, focus it
-    if (settingsWindow && !settingsWindow.isDestroyed()) {
-        settingsWindow.focus()
-        return
-    }
-
-    // Determine path to settings preload script
-    // In compiled output: dist-electron/preload/settings.js
-    const preloadPath = path.join(__dirname, "..", "preload", "settings.js")
-
-    // Determine path to settings HTML
-    // In packaged app: app.asar/dist-electron/settings/index.html
-    // In development: electron/settings/index.html
-    const settingsHtmlPath = app.isPackaged
-        ? path.join(__dirname, "..", "settings", "index.html")
-        : path.join(__dirname, "..", "..", "electron", "settings", "index.html")
-
-    settingsWindow = new BrowserWindow({
-        width: 600,
-        height: 700,
-        minWidth: 500,
-        minHeight: 500,
-        parent: parentWindow,
-        modal: false,
-        show: false,
-        title: "Settings - Next AI Draw.io",
-        webPreferences: {
-            preload: preloadPath,
-            contextIsolation: true,
-            nodeIntegration: false,
-            sandbox: true,
-        },
-    })
-    settingsWindow.loadFile(settingsHtmlPath)
-
-    settingsWindow.once("ready-to-show", () => {
-        settingsWindow?.show()
-    })
-
-    settingsWindow.on("closed", () => {
-        settingsWindow = null
-    })
-}
-
-/**
- * Close the settings window if it exists
- */
-export function closeSettingsWindow(): void {
-    if (settingsWindow && !settingsWindow.isDestroyed()) {
-        settingsWindow.close()
-        settingsWindow = null
-    }
-}
-
-/**
- * Check if settings window is open
- */
-export function isSettingsWindowOpen(): boolean {
-    return settingsWindow !== null && !settingsWindow.isDestroyed()
-}
-
-/**
- * Register settings window IPC handlers
- */
-export function registerSettingsWindowHandlers(): void {
-    ipcMain.on("settings:close", () => {
-        closeSettingsWindow()
-    })
-}

electron/preload/settings.ts

@@ -1,35 +0,0 @@
-/**
- * Preload script for settings window
- * Exposes APIs for managing configuration presets
- */
-import { contextBridge, ipcRenderer } from "electron"
-
-// Expose settings API to the renderer process
-contextBridge.exposeInMainWorld("settingsAPI", {
-    // Get all presets
-    getPresets: () => ipcRenderer.invoke("config-presets:get-all"),
-
-    // Get current preset ID
-    getCurrentPresetId: () =>
-        ipcRenderer.invoke("config-presets:get-current-id"),
-
-    // Get current preset
-    getCurrentPreset: () => ipcRenderer.invoke("config-presets:get-current"),
-
-    // Save (create or update) a preset
-    savePreset: (preset: {
-        id?: string
-        name: string
-        config: Record<string, string | undefined>
-    }) => ipcRenderer.invoke("config-presets:save", preset),
-
-    // Delete a preset
-    deletePreset: (id: string) =>
-        ipcRenderer.invoke("config-presets:delete", id),
-
-    // Apply a preset (sets environment variables and restarts server)
-    applyPreset: (id: string) => ipcRenderer.invoke("config-presets:apply", id),
-
-    // Close settings window
-    close: () => ipcRenderer.send("settings:close"),
-})

electron/settings/index.html

@@ -1,110 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self';">
-    <title>Settings - Next AI Draw.io</title>
-    <link rel="stylesheet" href="./settings.css">
-</head>
-<body>
-    <div class="container">
-        <h1>Configuration Presets</h1>
-
-        <div class="section">
-            <h2>Presets</h2>
-            <div id="preset-list" class="preset-list">
-                <!-- Presets will be loaded here -->
-            </div>
-            <button id="add-preset-btn" class="btn btn-primary">
-                + Add New Preset
-            </button>
-        </div>
-    </div>
-
-    <!-- Add/Edit Preset Modal -->
-    <div id="preset-modal" class="modal-overlay">
-        <div class="modal">
-            <div class="modal-header">
-                <h3 id="modal-title">Add Preset</h3>
-            </div>
-            <div class="modal-body">
-                <form id="preset-form">
-                    <input type="hidden" id="preset-id">
-
-                    <div class="form-group">
-                        <label for="preset-name">Preset Name *</label>
-                        <input type="text" id="preset-name" required placeholder="e.g., Work, Personal, Testing">
-                    </div>
-
-                    <div class="form-group">
-                        <label for="ai-provider">AI Provider</label>
-                        <select id="ai-provider">
-                            <option value="">-- Select Provider --</option>
-                            <option value="openai">OpenAI</option>
-                            <option value="anthropic">Anthropic (Claude)</option>
-                            <option value="google">Google AI (Gemini)</option>
-                            <option value="azure">Azure OpenAI</option>
-                            <option value="bedrock">AWS Bedrock</option>
-                            <option value="openrouter">OpenRouter</option>
-                            <option value="deepseek">DeepSeek</option>
-                            <option value="siliconflow">SiliconFlow</option>
-                            <option value="ollama">Ollama (Local)</option>
-                        </select>
-                    </div>
-
-                    <div class="form-group">
-                        <label for="ai-model">Model ID</label>
-                        <input type="text" id="ai-model" placeholder="e.g., gpt-4o, claude-sonnet-4-5">
-                        <div class="hint">The model identifier to use with the selected provider</div>
-                    </div>
-
-                    <div class="form-group">
-                        <label for="ai-api-key">API Key</label>
-                        <input type="password" id="ai-api-key" placeholder="Your API key">
-                        <div class="hint">This will be stored locally on your device</div>
-                    </div>
-
-                    <div class="form-group">
-                        <label for="ai-base-url">Base URL (Optional)</label>
-                        <input type="text" id="ai-base-url" placeholder="https://api.example.com/v1">
-                        <div class="hint">Custom API endpoint URL</div>
-                    </div>
-
-                    <div class="form-group">
-                        <label for="temperature">Temperature (Optional)</label>
-                        <input type="text" id="temperature" placeholder="0.7">
-                        <div class="hint">Controls randomness (0.0 - 2.0)</div>
-                    </div>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <button type="button" id="cancel-btn" class="btn btn-secondary">Cancel</button>
-                <button type="button" id="save-btn" class="btn btn-primary">Save</button>
-            </div>
-        </div>
-    </div>
-
-    <!-- Delete Confirmation Modal -->
-    <div id="delete-modal" class="modal-overlay">
-        <div class="modal">
-            <div class="modal-header">
-                <h3>Delete Preset</h3>
-            </div>
-            <div class="modal-body">
-                <p>Are you sure you want to delete "<span id="delete-preset-name"></span>"?</p>
-                <p class="delete-warning">This action cannot be undone.</p>
-            </div>
-            <div class="modal-footer">
-                <button type="button" id="delete-cancel-btn" class="btn btn-secondary">Cancel</button>
-                <button type="button" id="delete-confirm-btn" class="btn btn-danger">Delete</button>
-            </div>
-        </div>
-    </div>
-
-    <!-- Toast notification -->
-    <div id="toast" class="toast"></div>
-
-    <script src="./settings.js"></script>
-</body>
-</html>

electron/settings/settings.css

@@ -1,311 +0,0 @@
-:root {
-    --bg-primary: #ffffff;
-    --bg-secondary: #f5f5f5;
-    --bg-hover: #e8e8e8;
-    --text-primary: #1a1a1a;
-    --text-secondary: #666666;
-    --border-color: #e0e0e0;
-    --accent-color: #0066cc;
-    --accent-hover: #0052a3;
-    --danger-color: #dc3545;
-    --success-color: #28a745;
-}
-
-@media (prefers-color-scheme: dark) {
-    :root {
-        --bg-primary: #1a1a1a;
-        --bg-secondary: #2d2d2d;
-        --bg-hover: #3d3d3d;
-        --text-primary: #ffffff;
-        --text-secondary: #a0a0a0;
-        --border-color: #404040;
-        --accent-color: #4da6ff;
-        --accent-hover: #66b3ff;
-    }
-}
-
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family:
-        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
-        sans-serif;
-    background-color: var(--bg-primary);
-    color: var(--text-primary);
-    line-height: 1.5;
-}
-
-.container {
-    max-width: 560px;
-    margin: 0 auto;
-    padding: 24px;
-}
-
-h1 {
-    font-size: 24px;
-    font-weight: 600;
-    margin-bottom: 24px;
-    padding-bottom: 16px;
-    border-bottom: 1px solid var(--border-color);
-}
-
-h2 {
-    font-size: 16px;
-    font-weight: 600;
-    margin-bottom: 16px;
-    color: var(--text-secondary);
-}
-
-.section {
-    margin-bottom: 32px;
-}
-
-.preset-list {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    margin-bottom: 16px;
-}
-
-.preset-card {
-    background: var(--bg-secondary);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 16px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.preset-card:hover {
-    background: var(--bg-hover);
-}
-
-.preset-card.active {
-    border-color: var(--accent-color);
-    box-shadow: 0 0 0 1px var(--accent-color);
-}
-
-.preset-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 8px;
-}
-
-.preset-name {
-    font-weight: 600;
-    font-size: 15px;
-}
-
-.preset-badge {
-    background: var(--accent-color);
-    color: white;
-    font-size: 11px;
-    padding: 2px 8px;
-    border-radius: 10px;
-}
-
-.preset-info {
-    font-size: 13px;
-    color: var(--text-secondary);
-}
-
-.preset-actions {
-    display: flex;
-    gap: 8px;
-    margin-top: 12px;
-}
-
-.btn {
-    padding: 8px 16px;
-    border: none;
-    border-radius: 6px;
-    font-size: 14px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    font-weight: 500;
-}
-
-.btn-primary {
-    background: var(--accent-color);
-    color: white;
-}
-
-.btn-primary:hover {
-    background: var(--accent-hover);
-}
-
-.btn-secondary {
-    background: var(--bg-secondary);
-    color: var(--text-primary);
-    border: 1px solid var(--border-color);
-}
-
-.btn-secondary:hover {
-    background: var(--bg-hover);
-}
-
-.btn-danger {
-    background: var(--danger-color);
-    color: white;
-}
-
-.btn-danger:hover {
-    opacity: 0.9;
-}
-
-.btn-sm {
-    padding: 6px 12px;
-    font-size: 13px;
-}
-
-.empty-state {
-    text-align: center;
-    padding: 40px 20px;
-    color: var(--text-secondary);
-}
-
-.empty-state p {
-    margin-bottom: 16px;
-}
-
-/* Modal */
-.modal-overlay {
-    display: none;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 100;
-    align-items: center;
-    justify-content: center;
-}
-
-.modal-overlay.show {
-    display: flex;
-}
-
-.modal {
-    background: var(--bg-primary);
-    border-radius: 12px;
-    width: 90%;
-    max-width: 480px;
-    max-height: 90vh;
-    overflow-y: auto;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-}
-
-.modal-header {
-    padding: 20px 24px;
-    border-bottom: 1px solid var(--border-color);
-}
-
-.modal-header h3 {
-    font-size: 18px;
-    font-weight: 600;
-}
-
-.modal-body {
-    padding: 24px;
-}
-
-.modal-footer {
-    padding: 16px 24px;
-    border-top: 1px solid var(--border-color);
-    display: flex;
-    justify-content: flex-end;
-    gap: 12px;
-}
-
-.form-group {
-    margin-bottom: 20px;
-}
-
-.form-group label {
-    display: block;
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 6px;
-}
-
-.form-group input,
-.form-group select {
-    width: 100%;
-    padding: 10px 12px;
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    font-size: 14px;
-    background: var(--bg-primary);
-    color: var(--text-primary);
-}
-
-.form-group input:focus,
-.form-group select:focus {
-    outline: none;
-    border-color: var(--accent-color);
-    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
-}
-
-.form-group .hint {
-    font-size: 12px;
-    color: var(--text-secondary);
-    margin-top: 4px;
-}
-
-.loading {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    border: 2px solid var(--border-color);
-    border-top-color: var(--accent-color);
-    border-radius: 50%;
-    animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.toast {
-    position: fixed;
-    bottom: 24px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: var(--text-primary);
-    color: var(--bg-primary);
-    padding: 12px 24px;
-    border-radius: 8px;
-    font-size: 14px;
-    z-index: 200;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
-
-.toast.show {
-    opacity: 1;
-}
-
-.toast.success {
-    background: var(--success-color);
-    color: white;
-}
-
-.toast.error {
-    background: var(--danger-color);
-    color: white;
-}
-
-/* Inline style replacements */
-.delete-warning {
-    color: var(--text-secondary);
-    margin-top: 8px;
-    font-size: 14px;
-}

electron/settings/settings.js

@@ -1,311 +0,0 @@
-// Settings page JavaScript
-// This file handles the UI interactions for the settings window
-
-let presets = []
-let currentPresetId = null
-let editingPresetId = null
-let deletingPresetId = null
-
-// DOM Elements
-const presetList = document.getElementById("preset-list")
-const addPresetBtn = document.getElementById("add-preset-btn")
-const presetModal = document.getElementById("preset-modal")
-const deleteModal = document.getElementById("delete-modal")
-const presetForm = document.getElementById("preset-form")
-const modalTitle = document.getElementById("modal-title")
-const toast = document.getElementById("toast")
-
-// Form fields
-const presetIdField = document.getElementById("preset-id")
-const presetNameField = document.getElementById("preset-name")
-const aiProviderField = document.getElementById("ai-provider")
-const aiModelField = document.getElementById("ai-model")
-const aiApiKeyField = document.getElementById("ai-api-key")
-const aiBaseUrlField = document.getElementById("ai-base-url")
-const temperatureField = document.getElementById("temperature")
-
-// Buttons
-const cancelBtn = document.getElementById("cancel-btn")
-const saveBtn = document.getElementById("save-btn")
-const deleteCancelBtn = document.getElementById("delete-cancel-btn")
-const deleteConfirmBtn = document.getElementById("delete-confirm-btn")
-
-// Initialize
-document.addEventListener("DOMContentLoaded", async () => {
-    await loadPresets()
-    setupEventListeners()
-})
-
-// Load presets from main process
-async function loadPresets() {
-    try {
-        presets = await window.settingsAPI.getPresets()
-        currentPresetId = await window.settingsAPI.getCurrentPresetId()
-        renderPresets()
-    } catch (error) {
-        console.error("Failed to load presets:", error)
-        showToast("Failed to load presets", "error")
-    }
-}
-
-// Render presets list
-function renderPresets() {
-    if (presets.length === 0) {
-        presetList.innerHTML = `
-            <div class="empty-state">
-                <p>No presets configured yet.</p>
-                <p>Add a preset to quickly switch between different AI configurations.</p>
-            </div>
-        `
-        return
-    }
-
-    presetList.innerHTML = presets
-        .map((preset) => {
-            const isActive = preset.id === currentPresetId
-            const providerLabel = getProviderLabel(preset.config.AI_PROVIDER)
-
-            return `
-            <div class="preset-card ${isActive ? "active" : ""}" data-id="${preset.id}">
-                <div class="preset-header">
-                    <span class="preset-name">${escapeHtml(preset.name)}</span>
-                    ${isActive ? '<span class="preset-badge">Active</span>' : ""}
-                </div>
-                <div class="preset-info">
-                    ${providerLabel ? `Provider: ${providerLabel}` : "No provider configured"}
-                    ${preset.config.AI_MODEL ? ` • Model: ${escapeHtml(preset.config.AI_MODEL)}` : ""}
-                </div>
-                <div class="preset-actions">
-                    ${!isActive ? `<button class="btn btn-primary btn-sm apply-btn" data-id="${preset.id}">Apply</button>` : ""}
-                    <button class="btn btn-secondary btn-sm edit-btn" data-id="${preset.id}">Edit</button>
-                    <button class="btn btn-secondary btn-sm delete-btn" data-id="${preset.id}">Delete</button>
-                </div>
-            </div>
-        `
-        })
-        .join("")
-
-    // Add event listeners to buttons
-    presetList.querySelectorAll(".apply-btn").forEach((btn) => {
-        btn.addEventListener("click", (e) => {
-            e.stopPropagation()
-            applyPreset(btn.dataset.id)
-        })
-    })
-
-    presetList.querySelectorAll(".edit-btn").forEach((btn) => {
-        btn.addEventListener("click", (e) => {
-            e.stopPropagation()
-            openEditModal(btn.dataset.id)
-        })
-    })
-
-    presetList.querySelectorAll(".delete-btn").forEach((btn) => {
-        btn.addEventListener("click", (e) => {
-            e.stopPropagation()
-            openDeleteModal(btn.dataset.id)
-        })
-    })
-}
-
-// Setup event listeners
-function setupEventListeners() {
-    addPresetBtn.addEventListener("click", () => openAddModal())
-    cancelBtn.addEventListener("click", () => closeModal())
-    saveBtn.addEventListener("click", () => savePreset())
-    deleteCancelBtn.addEventListener("click", () => closeDeleteModal())
-    deleteConfirmBtn.addEventListener("click", () => confirmDelete())
-
-    // Close modal on overlay click
-    presetModal.addEventListener("click", (e) => {
-        if (e.target === presetModal) closeModal()
-    })
-    deleteModal.addEventListener("click", (e) => {
-        if (e.target === deleteModal) closeDeleteModal()
-    })
-
-    // Handle Enter key in form
-    presetForm.addEventListener("keydown", (e) => {
-        if (e.key === "Enter") {
-            e.preventDefault()
-            savePreset()
-        }
-    })
-}
-
-// Open add modal
-function openAddModal() {
-    editingPresetId = null
-    modalTitle.textContent = "Add Preset"
-    presetForm.reset()
-    presetIdField.value = ""
-    presetModal.classList.add("show")
-    presetNameField.focus()
-}
-
-// Open edit modal
-function openEditModal(id) {
-    const preset = presets.find((p) => p.id === id)
-    if (!preset) return
-
-    editingPresetId = id
-    modalTitle.textContent = "Edit Preset"
-
-    presetIdField.value = preset.id
-    presetNameField.value = preset.name
-    aiProviderField.value = preset.config.AI_PROVIDER || ""
-    aiModelField.value = preset.config.AI_MODEL || ""
-    aiApiKeyField.value = preset.config.AI_API_KEY || ""
-    aiBaseUrlField.value = preset.config.AI_BASE_URL || ""
-    temperatureField.value = preset.config.TEMPERATURE || ""
-
-    presetModal.classList.add("show")
-    presetNameField.focus()
-}
-
-// Close modal
-function closeModal() {
-    presetModal.classList.remove("show")
-    editingPresetId = null
-}
-
-// Open delete modal
-function openDeleteModal(id) {
-    const preset = presets.find((p) => p.id === id)
-    if (!preset) return
-
-    deletingPresetId = id
-    document.getElementById("delete-preset-name").textContent = preset.name
-    deleteModal.classList.add("show")
-}
-
-// Close delete modal
-function closeDeleteModal() {
-    deleteModal.classList.remove("show")
-    deletingPresetId = null
-}
-
-// Save preset
-async function savePreset() {
-    const name = presetNameField.value.trim()
-    if (!name) {
-        showToast("Please enter a preset name", "error")
-        presetNameField.focus()
-        return
-    }
-
-    const preset = {
-        id: editingPresetId || undefined,
-        name: name,
-        config: {
-            AI_PROVIDER: aiProviderField.value || undefined,
-            AI_MODEL: aiModelField.value.trim() || undefined,
-            AI_API_KEY: aiApiKeyField.value.trim() || undefined,
-            AI_BASE_URL: aiBaseUrlField.value.trim() || undefined,
-            TEMPERATURE: temperatureField.value.trim() || undefined,
-        },
-    }
-
-    // Remove undefined values
-    Object.keys(preset.config).forEach((key) => {
-        if (preset.config[key] === undefined) {
-            delete preset.config[key]
-        }
-    })
-
-    try {
-        saveBtn.disabled = true
-        saveBtn.innerHTML = '<span class="loading"></span>'
-
-        await window.settingsAPI.savePreset(preset)
-        await loadPresets()
-        closeModal()
-        showToast(
-            editingPresetId ? "Preset updated" : "Preset created",
-            "success",
-        )
-    } catch (error) {
-        console.error("Failed to save preset:", error)
-        showToast("Failed to save preset", "error")
-    } finally {
-        saveBtn.disabled = false
-        saveBtn.textContent = "Save"
-    }
-}
-
-// Confirm delete
-async function confirmDelete() {
-    if (!deletingPresetId) return
-
-    try {
-        deleteConfirmBtn.disabled = true
-        deleteConfirmBtn.innerHTML = '<span class="loading"></span>'
-
-        await window.settingsAPI.deletePreset(deletingPresetId)
-        await loadPresets()
-        closeDeleteModal()
-        showToast("Preset deleted", "success")
-    } catch (error) {
-        console.error("Failed to delete preset:", error)
-        showToast("Failed to delete preset", "error")
-    } finally {
-        deleteConfirmBtn.disabled = false
-        deleteConfirmBtn.textContent = "Delete"
-    }
-}
-
-// Apply preset
-async function applyPreset(id) {
-    try {
-        const btn = presetList.querySelector(`.apply-btn[data-id="${id}"]`)
-        if (btn) {
-            btn.disabled = true
-            btn.innerHTML = '<span class="loading"></span>'
-        }
-
-        const result = await window.settingsAPI.applyPreset(id)
-        if (result.success) {
-            currentPresetId = id
-            renderPresets()
-            showToast("Preset applied, server restarting...", "success")
-        } else {
-            showToast(result.error || "Failed to apply preset", "error")
-        }
-    } catch (error) {
-        console.error("Failed to apply preset:", error)
-        showToast("Failed to apply preset", "error")
-    }
-}
-
-// Get provider display label
-function getProviderLabel(provider) {
-    const labels = {
-        openai: "OpenAI",
-        anthropic: "Anthropic",
-        google: "Google AI",
-        azure: "Azure OpenAI",
-        bedrock: "AWS Bedrock",
-        openrouter: "OpenRouter",
-        deepseek: "DeepSeek",
-        siliconflow: "SiliconFlow",
-        ollama: "Ollama",
-    }
-    return labels[provider] || provider
-}
-
-// Show toast notification
-function showToast(message, type = "") {
-    toast.textContent = message
-    toast.className = "toast show" + (type ? ` ${type}` : "")
-
-    setTimeout(() => {
-        toast.classList.remove("show")
-    }, 3000)
-}
-
-// Escape HTML to prevent XSS
-function escapeHtml(text) {
-    const div = document.createElement("div")
-    div.textContent = text
-    return div.innerHTML
-}

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 }
+}

instrumentation.ts

@@ -14,22 +14,14 @@ export function register() {
         publicKey: process.env.LANGFUSE_PUBLIC_KEY,
         secretKey: process.env.LANGFUSE_SECRET_KEY,
         baseUrl: process.env.LANGFUSE_BASEURL,
-        // Filter out Next.js HTTP request spans so AI SDK spans become root traces
+        // Whitelist approach: only export AI-related spans
         shouldExportSpan: ({ otelSpan }) => {
             const spanName = otelSpan.name
-            // Skip Next.js HTTP infrastructure spans
-            if (
-                spanName.startsWith("POST") ||
-                spanName.startsWith("GET") ||
-                spanName.startsWith("RSC") ||
-                spanName.includes("BaseServer") ||
-                spanName.includes("handleRequest") ||
-                spanName.includes("resolve page") ||
-                spanName.includes("start response")
-            ) {
-                return false
-            }
+            // Only export AI SDK spans (ai.*) and our explicit "chat" wrapper
+            if (spanName === "chat" || spanName.startsWith("ai.")) {
                 return true
+            }
+            return false
         },
     })
 

lib/dynamo-quota-manager.ts

@@ -9,6 +9,30 @@ import {
 // OSS users who don't need quota tracking can simply not set this env var
 const TABLE = process.env.DYNAMODB_QUOTA_TABLE
 const DYNAMODB_REGION = process.env.DYNAMODB_REGION || "ap-northeast-1"
+// Timezone for daily quota reset (e.g., "Asia/Tokyo" for JST midnight reset)
+// Defaults to UTC if not set
+let QUOTA_TIMEZONE = process.env.QUOTA_TIMEZONE || "UTC"
+
+// Validate timezone at module load
+try {
+    new Intl.DateTimeFormat("en-CA", { timeZone: QUOTA_TIMEZONE }).format(
+        new Date(),
+    )
+} catch {
+    console.warn(
+        `[quota] Invalid QUOTA_TIMEZONE "${QUOTA_TIMEZONE}", using UTC`,
+    )
+    QUOTA_TIMEZONE = "UTC"
+}
+
+/**
+ * Get today's date string in the configured timezone (YYYY-MM-DD format)
+ */
+function getTodayInTimezone(): string {
+    return new Intl.DateTimeFormat("en-CA", {
+        timeZone: QUOTA_TIMEZONE,
+    }).format(new Date())
+}
 
 // Only create client if quota is enabled
 const client = TABLE ? new DynamoDBClient({ region: DYNAMODB_REGION }) : null
@@ -49,32 +73,67 @@ export async function checkAndIncrementRequest(
         return { allowed: true }
     }
 
-    const today = new Date().toISOString().split("T")[0]
+    const today = getTodayInTimezone()
     const currentMinute = Math.floor(Date.now() / 60000).toString()
     const ttl = Math.floor(Date.now() / 1000) + 7 * 24 * 60 * 60
 
     try {
-        // Atomic check-and-increment with ConditionExpression
-        // This prevents race conditions by failing if limits are exceeded
+        // First, try to reset counts if it's a new day (atomic day reset)
+        // This will succeed only if lastResetDate < today or doesn't exist
+        try {
             await client.send(
                 new UpdateItemCommand({
                     TableName: TABLE,
                     Key: { PK: { S: `IP#${ip}` } },
-                // Reset counts if new day/minute, then increment request count
+                    // Reset all counts to 1/0 for the new day
                     UpdateExpression: `
                         SET lastResetDate = :today,
-                        dailyReqCount = if_not_exists(dailyReqCount, :zero) + :one,
-                        dailyTokenCount = if_not_exists(dailyTokenCount, :zero),
+                            dailyReqCount = :one,
+                            dailyTokenCount = :zero,
                             lastMinute = :minute,
-                        tpmCount = if_not_exists(tpmCount, :zero),
+                            tpmCount = :zero,
                             #ttl = :ttl
                     `,
-                // Atomic condition: only succeed if ALL limits pass
-                // Uses attribute_not_exists for new items, then checks limits for existing items
+                    // Only succeed if it's a new day (or new item)
                     ConditionExpression: `
-                    (attribute_not_exists(lastResetDate) OR lastResetDate < :today OR
-                     ((attribute_not_exists(dailyReqCount) OR dailyReqCount < :reqLimit) AND
-                      (attribute_not_exists(dailyTokenCount) OR dailyTokenCount < :tokenLimit))) AND
+                        attribute_not_exists(lastResetDate) OR lastResetDate < :today
+                    `,
+                    ExpressionAttributeNames: { "#ttl": "ttl" },
+                    ExpressionAttributeValues: {
+                        ":today": { S: today },
+                        ":zero": { N: "0" },
+                        ":one": { N: "1" },
+                        ":minute": { S: currentMinute },
+                        ":ttl": { N: String(ttl) },
+                    },
+                }),
+            )
+            // New day reset successful
+            return { allowed: true }
+        } catch (resetError: any) {
+            // If condition failed, it's the same day - continue to increment logic
+            if (!(resetError instanceof ConditionalCheckFailedException)) {
+                throw resetError // Re-throw unexpected errors
+            }
+        }
+
+        // Same day - increment request count with limit checks
+        await client.send(
+            new UpdateItemCommand({
+                TableName: TABLE,
+                Key: { PK: { S: `IP#${ip}` } },
+                // Increment request count, handle minute boundary for TPM
+                UpdateExpression: `
+                    SET lastMinute = :minute,
+                        tpmCount = if_not_exists(tpmCount, :zero),
+                        #ttl = :ttl
+                    ADD dailyReqCount :one
+                `,
+                // Check all limits before allowing increment
+                ConditionExpression: `
+                    lastResetDate = :today AND
+                    (attribute_not_exists(dailyReqCount) OR dailyReqCount < :reqLimit) AND
+                    (attribute_not_exists(dailyTokenCount) OR dailyTokenCount < :tokenLimit) AND
                     (attribute_not_exists(lastMinute) OR lastMinute <> :minute OR
                      attribute_not_exists(tpmCount) OR tpmCount < :tpmLimit)
                 `,

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/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

@@ -36,29 +36,32 @@ const VALID_ENTITIES = new Set(["lt", "gt", "amp", "quot", "apos"])
 /**
  * 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.
+ * Uses a robust approach that handles any LLM provider's wrapper tags
+ * by finding the last valid mxCell ending and checking if suffix is just closing tags.
  * @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() || ""
+    const 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()
-    }
+    // Find position of last complete mxCell ending (either /> or </mxCell>)
+    const lastSelfClose = trimmed.lastIndexOf("/>")
+    const lastMxCellClose = trimmed.lastIndexOf("</mxCell>")
 
-    return trimmed.endsWith("/>") || trimmed.endsWith("</mxCell>")
+    const lastValidEnd = Math.max(lastSelfClose, lastMxCellClose)
+
+    // No valid ending found at all
+    if (lastValidEnd === -1) return false
+
+    // Check what comes after the last valid ending
+    // For />: add 2 chars, for </mxCell>: add 9 chars
+    const endOffset = lastMxCellClose > lastSelfClose ? 9 : 2
+    const suffix = trimmed.slice(lastValidEnd + endOffset)
+
+    // If suffix is empty or only contains closing tags (any provider's wrapper) or whitespace, it's complete
+    // This regex matches any sequence of closing XML tags like </foo>, </bar>, </｜DSML｜xyz>
+    return /^(\s*<\/[^>]+>)*\s*$/.test(suffix)
 }
 
 /**
@@ -262,6 +265,21 @@ export function convertToLegalXml(xmlString: string): string {
             "&amp;",
         )
 
+        // Fix unescaped < and > in attribute values for XML parsing
+        // HTML content in value attributes (e.g., <b>Title</b>) needs to be escaped
+        // This is critical because DOMParser will fail on unescaped < > in attributes
+        if (/=\s*"[^"]*<[^"]*"/.test(cellContent)) {
+            cellContent = cellContent.replace(
+                /=\s*"([^"]*)"/g,
+                (_match, value) => {
+                    const escaped = value
+                        .replace(/</g, "&lt;")
+                        .replace(/>/g, "&gt;")
+                    return `="${escaped}"`
+                },
+            )
+        }
+
         // Indent each line of the matched block for readability.
         const formatted = cellContent
             .split("\n")
@@ -306,6 +324,20 @@ export function wrapWithMxFile(xml: string): string {
         content = xml.replace(/<\/?root>/g, "").trim()
     }
 
+    // Strip trailing LLM wrapper tags (from any provider: Anthropic, DeepSeek, etc.)
+    // Find the last valid mxCell ending and remove everything after it
+    const lastSelfClose = content.lastIndexOf("/>")
+    const lastMxCellClose = content.lastIndexOf("</mxCell>")
+    const lastValidEnd = Math.max(lastSelfClose, lastMxCellClose)
+    if (lastValidEnd !== -1) {
+        const endOffset = lastMxCellClose > lastSelfClose ? 9 : 2
+        const suffix = content.slice(lastValidEnd + endOffset)
+        // If suffix is only closing tags (wrapper tags), strip it
+        if (/^(\s*<\/[^>]+>)*\s*$/.test(suffix)) {
+            content = content.slice(0, lastValidEnd + endOffset)
+        }
+    }
+
     // 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
@@ -423,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
 }
@@ -496,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({
@@ -548,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({
@@ -600,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({
@@ -910,6 +942,21 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
         fixes.push("Removed CDATA wrapper")
     }
 
+    // 1b. Strip trailing LLM wrapper tags (DeepSeek, Anthropic, etc.)
+    // These are closing tags after the last valid mxCell that break XML parsing
+    const lastSelfClose = fixed.lastIndexOf("/>")
+    const lastMxCellClose = fixed.lastIndexOf("</mxCell>")
+    const lastValidEnd = Math.max(lastSelfClose, lastMxCellClose)
+    if (lastValidEnd !== -1) {
+        const endOffset = lastMxCellClose > lastSelfClose ? 9 : 2
+        const suffix = fixed.slice(lastValidEnd + endOffset)
+        // If suffix contains only closing tags (wrapper tags) or whitespace, strip it
+        if (/^(\s*<\/[^>]+>)+\s*$/.test(suffix)) {
+            fixed = fixed.slice(0, lastValidEnd + endOffset)
+            fixes.push("Stripped trailing LLM wrapper tags")
+        }
+    }
+
     // 2. Remove text before XML declaration or root element (only if it's garbage text, not valid XML)
     const xmlStart = fixed.search(/<(\?xml|mxGraphModel|mxfile)/i)
     if (xmlStart > 0 && !/^<[a-zA-Z]/.test(fixed.trim())) {
@@ -1015,8 +1062,8 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
         fixes.push("Removed quotes around color values in style")
     }
 
-    // 4. Fix unescaped < in attribute values
-    // This is tricky - we need to find < inside quoted attribute values
+    // 4. Fix unescaped < and > in attribute values
+    // < is required to be escaped, > is not strictly required but we escape for consistency
     const attrPattern = /(=\s*")([^"]*?)(<)([^"]*?)(")/g
     let attrMatch
     let hasUnescapedLt = false
@@ -1027,12 +1074,12 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
         }
     }
     if (hasUnescapedLt) {
-        // Replace < with &lt; inside attribute values
+        // Replace < and > with &lt; and &gt; inside attribute values
         fixed = fixed.replace(/=\s*"([^"]*)"/g, (_match, value) => {
-            const escaped = value.replace(/</g, "&lt;")
+            const escaped = value.replace(/</g, "&lt;").replace(/>/g, "&gt;")
             return `="${escaped}"`
         })
-        fixes.push("Escaped < characters in attribute values")
+        fixes.push("Escaped <> characters in attribute values")
     }
 
     // 5. Fix invalid character references (remove malformed ones)
@@ -1120,7 +1167,8 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
     }
 
     // 8c. Remove non-draw.io tags (after typo fixes so lowercase variants are fixed first)
-    // Valid draw.io tags: mxfile, diagram, mxGraphModel, root, mxCell, mxGeometry, mxPoint, Array, Object
+    // IMPORTANT: Only remove tags at the element level, NOT inside quoted attribute values
+    // Tags like <b>, <br> inside value="<b>text</b>" should be preserved (they're HTML content)
     const validDrawioTags = new Set([
         "mxfile",
         "diagram",
@@ -1133,25 +1181,59 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
         "Object",
         "mxRectangle",
     ])
+
+    // Helper: Check if a position is inside a quoted attribute value
+    // by counting unescaped quotes before that position
+    const isInsideQuotes = (str: string, pos: number): boolean => {
+        let inQuote = false
+        let quoteChar = ""
+        for (let i = 0; i < pos && i < str.length; i++) {
+            const c = str[i]
+            if (inQuote) {
+                if (c === quoteChar) inQuote = false
+            } else if (c === '"' || c === "'") {
+                // Check if this quote is part of an attribute (preceded by =)
+                // Look back for = sign
+                let j = i - 1
+                while (j >= 0 && /\s/.test(str[j])) j--
+                if (j >= 0 && str[j] === "=") {
+                    inQuote = true
+                    quoteChar = c
+                }
+            }
+        }
+        return inQuote
+    }
+
     const foreignTagPattern = /<\/?([a-zA-Z][a-zA-Z0-9_]*)[^>]*>/g
     let foreignMatch
     const foreignTags = new Set<string>()
+    const foreignTagPositions: Array<{
+        tag: string
+        start: number
+        end: number
+    }> = []
+
     while ((foreignMatch = foreignTagPattern.exec(fixed)) !== null) {
         const tagName = foreignMatch[1]
-        if (!validDrawioTags.has(tagName)) {
+        // Skip if this is a valid draw.io tag
+        if (validDrawioTags.has(tagName)) continue
+        // Skip if this tag is inside a quoted attribute value
+        if (isInsideQuotes(fixed, foreignMatch.index)) continue
+
         foreignTags.add(tagName)
+        foreignTagPositions.push({
+            tag: tagName,
+            start: foreignMatch.index,
+            end: foreignMatch.index + foreignMatch[0].length,
+        })
     }
-    }
-    if (foreignTags.size > 0) {
-        console.log(
-            "[autoFixXml] Step 8c: 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"), "")
+
+    if (foreignTagPositions.length > 0) {
+        // Remove tags from end to start to preserve indices
+        foreignTagPositions.sort((a, b) => b.start - a.start)
+        for (const { start, end } of foreignTagPositions) {
+            fixed = fixed.slice(0, start) + fixed.slice(end)
         }
         fixes.push(
             `Removed foreign tags: ${Array.from(foreignTags).join(", ")}`,
@@ -1202,6 +1284,7 @@ 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)
+    // IMPORTANT: Only count tags at element level, NOT inside quoted attribute values
     const tagCounts = new Map<
         string,
         { opens: number; closes: number; selfClosing: number }
@@ -1210,12 +1293,18 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
     const fullTagPattern = /<(\/?[a-zA-Z][a-zA-Z0-9]*)[^>]*>/g
     let tagCountMatch
     while ((tagCountMatch = fullTagPattern.exec(fixed)) !== null) {
+        // Skip tags inside quoted attribute values (e.g., value="<b>Title</b>")
+        if (isInsideQuotes(fixed, tagCountMatch.index)) continue
+
         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
 
+        // Only count valid draw.io tags - skip partial/invalid tags like "mx" from streaming
+        if (!validDrawioTags.has(tagName)) continue
+
         let counts = tagCounts.get(tagName)
         if (!counts) {
             counts = { opens: 0, closes: 0, selfClosing: 0 }

package.json

@@ -14,7 +14,7 @@
         "prepare": "husky",
         "electron:dev": "node scripts/electron-dev.mjs",
         "electron:build": "npm run build && npm run electron:compile",
-        "electron:compile": "npx esbuild electron/main/index.ts electron/preload/index.ts electron/preload/settings.ts --bundle --platform=node --outdir=dist-electron --external:electron --sourcemap --packages=external && npx shx cp -r electron/settings dist-electron/",
+        "electron:compile": "npx esbuild electron/main/index.ts electron/preload/index.ts --bundle --platform=node --outdir=dist-electron --external:electron --sourcemap --packages=external",
         "electron:start": "npx cross-env NODE_ENV=development npx electron .",
         "electron:prepare": "node scripts/prepare-electron-build.mjs",
         "dist": "npm run electron:build && npm run electron:prepare && npx electron-builder",

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}`,
                         )
                     }
                 }

packages/mcp-server/src/xml-validation.ts

@@ -459,7 +459,8 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
         fixes.push("Removed quotes around color values in style")
     }
 
-    // 10. Fix unescaped < in attribute values
+    // 10. Fix unescaped < and > in attribute values
+    // < is required to be escaped, > is not strictly required but we escape for consistency
     const attrPattern = /(=\s*")([^"]*?)(<)([^"]*?)(")/g
     let attrMatch
     let hasUnescapedLt = false
@@ -471,10 +472,10 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
     }
     if (hasUnescapedLt) {
         fixed = fixed.replace(/=\s*"([^"]*)"/g, (_match, value) => {
-            const escaped = value.replace(/</g, "&lt;")
+            const escaped = value.replace(/</g, "&lt;").replace(/>/g, "&gt;")
             return `="${escaped}"`
         })
-        fixes.push("Escaped < characters in attribute values")
+        fixes.push("Escaped <> characters in attribute values")
     }
 
     // 11. Fix invalid hex character references
@@ -903,24 +904,30 @@ export function validateAndFixXml(xml: string): {
 
 /**
  * Check if mxCell XML output is complete (not truncated).
+ * Uses a robust approach that handles any LLM provider's wrapper tags
+ * by finding the last valid mxCell ending and checking if suffix is just closing tags.
  * @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() || ""
+    const trimmed = xml?.trim() || ""
     if (!trimmed) return false
 
-    // Strip wrapper tags if present
-    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()
-    }
+    // Find position of last complete mxCell ending (either /> or </mxCell>)
+    const lastSelfClose = trimmed.lastIndexOf("/>")
+    const lastMxCellClose = trimmed.lastIndexOf("</mxCell>")
 
-    return trimmed.endsWith("/>") || trimmed.endsWith("</mxCell>")
+    const lastValidEnd = Math.max(lastSelfClose, lastMxCellClose)
+
+    // No valid ending found at all
+    if (lastValidEnd === -1) return false
+
+    // Check what comes after the last valid ending
+    // For />: add 2 chars, for </mxCell>: add 9 chars
+    const endOffset = lastMxCellClose > lastSelfClose ? 9 : 2
+    const suffix = trimmed.slice(lastValidEnd + endOffset)
+
+    // If suffix is empty or only contains closing tags (any provider's wrapper) or whitespace, it's complete
+    // This regex matches any sequence of closing XML tags like </foo>, </bar>, </｜DSML｜xyz>
+    return /^(\s*<\/[^>]+>)*\s*$/.test(suffix)
 }

scripts/electron-dev.mjs

@@ -2,17 +2,13 @@
 
 /**
  * Development script for running Electron with Next.js
- * 1. Reads preset configuration (if exists)
- * 2. Starts Next.js dev server with preset env vars
- * 3. Waits for it to be ready
- * 4. Compiles Electron TypeScript
- * 5. Launches Electron
- * 6. Watches for preset changes and restarts Next.js
+ * 1. Starts Next.js dev server
+ * 2. Waits for it to be ready
+ * 3. Compiles Electron TypeScript
+ * 4. Launches Electron
  */
 
 import { spawn } from "node:child_process"
-import { existsSync, readFileSync, watch } from "node:fs"
-import os from "node:os"
 import path from "node:path"
 import { fileURLToPath } from "node:url"
 
@@ -22,64 +18,6 @@ const rootDir = path.join(__dirname, "..")
 const NEXT_PORT = 6002
 const NEXT_URL = `http://localhost:${NEXT_PORT}`
 
-/**
- * Get the user data path (same as Electron's app.getPath("userData"))
- */
-function getUserDataPath() {
-    const appName = "next-ai-draw-io"
-    switch (process.platform) {
-        case "darwin":
-            return path.join(
-                os.homedir(),
-                "Library",
-                "Application Support",
-                appName,
-            )
-        case "win32":
-            return path.join(
-                process.env.APPDATA ||
-                    path.join(os.homedir(), "AppData", "Roaming"),
-                appName,
-            )
-        default:
-            return path.join(os.homedir(), ".config", appName)
-    }
-}
-
-/**
- * Load preset configuration from config file
- */
-function loadPresetConfig() {
-    const configPath = path.join(getUserDataPath(), "config-presets.json")
-
-    if (!existsSync(configPath)) {
-        console.log("📋 No preset configuration found, using .env.local")
-        return null
-    }
-
-    try {
-        const content = readFileSync(configPath, "utf-8")
-        const data = JSON.parse(content)
-
-        if (!data.currentPresetId) {
-            console.log("📋 No active preset, using .env.local")
-            return null
-        }
-
-        const preset = data.presets.find((p) => p.id === data.currentPresetId)
-        if (!preset) {
-            console.log("📋 Active preset not found, using .env.local")
-            return null
-        }
-
-        console.log(`📋 Using preset: "${preset.name}"`)
-        return preset.config
-    } catch (error) {
-        console.error("Failed to load preset config:", error.message)
-        return null
-    }
-}
-
 /**
  * Wait for the Next.js server to be ready
  */
@@ -129,25 +67,14 @@ function runCommand(command, args, options = {}) {
 }
 
 /**
- * Start Next.js dev server with preset environment
+ * Start Next.js dev server
  */
-function startNextServer(presetEnv) {
-    const env = { ...process.env }
-
-    // Apply preset environment variables
-    if (presetEnv) {
-        for (const [key, value] of Object.entries(presetEnv)) {
-            if (value !== undefined && value !== "") {
-                env[key] = value
-            }
-        }
-    }
-
+function startNextServer() {
     const nextProcess = spawn("npm", ["run", "dev"], {
         cwd: rootDir,
         stdio: "inherit",
         shell: true,
-        env,
+        env: process.env,
     })
 
     nextProcess.on("error", (err) => {
@@ -163,12 +90,9 @@ function startNextServer(presetEnv) {
 async function main() {
     console.log("🚀 Starting Electron development environment...\n")
 
-    // Load preset configuration
-    const presetEnv = loadPresetConfig()
-
-    // Start Next.js dev server with preset env
+    // Start Next.js dev server
     console.log("1. Starting Next.js development server...")
-    let nextProcess = startNextServer(presetEnv)
+    const nextProcess = startNextServer()
 
     // Wait for Next.js to be ready
     try {
@@ -203,75 +127,14 @@ async function main() {
         },
     })
 
-    // Watch for preset config changes
-    const configPath = path.join(getUserDataPath(), "config-presets.json")
-    let configWatcher = null
-    let restartPending = false
-
-    function setupConfigWatcher() {
-        if (!existsSync(path.dirname(configPath))) {
-            // Directory doesn't exist yet, check again later
-            setTimeout(setupConfigWatcher, 5000)
-            return
-        }
-
-        try {
-            configWatcher = watch(
-                configPath,
-                { persistent: false },
-                async (eventType) => {
-                    if (eventType === "change" && !restartPending) {
-                        restartPending = true
-                        console.log(
-                            "\n🔄 Preset configuration changed, restarting Next.js server...",
-                        )
-
-                        // Kill current Next.js process
-                        nextProcess.kill()
-
-                        // Wait a bit for process to die
-                        await new Promise((r) => setTimeout(r, 1000))
-
-                        // Reload preset and restart
-                        const newPresetEnv = loadPresetConfig()
-                        nextProcess = startNextServer(newPresetEnv)
-
-                        try {
-                            await waitForServer(NEXT_URL)
-                            console.log(
-                                "✅ Next.js server restarted with new configuration\n",
-                            )
-                        } catch (err) {
-                            console.error(
-                                "❌ Failed to restart Next.js:",
-                                err.message,
-                            )
-                        }
-
-                        restartPending = false
-                    }
-                },
-            )
-            console.log("👀 Watching for preset configuration changes...")
-        } catch (err) {
-            // File might not exist yet, that's ok
-            setTimeout(setupConfigWatcher, 5000)
-        }
-    }
-
-    // Start watching after a delay (config file might not exist yet)
-    setTimeout(setupConfigWatcher, 2000)
-
     electronProcess.on("close", (code) => {
         console.log(`\nElectron exited with code ${code}`)
-        if (configWatcher) configWatcher.close()
         nextProcess.kill()
         process.exit(code || 0)
     })
 
     electronProcess.on("error", (err) => {
         console.error("Electron error:", err)
-        if (configWatcher) configWatcher.close()
         nextProcess.kill()
         process.exit(1)
     })
@@ -279,7 +142,6 @@ async function main() {
     // Handle termination signals
     const cleanup = () => {
         console.log("\n🛑 Shutting down...")
-        if (configWatcher) configWatcher.close()
         electronProcess.kill()
         nextProcess.kill()
         process.exit(0)

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(