fix: use totalUsage with all token types for accurate quota tracking

The onFinish callback's 'usage' only contains the final step's tokens,
which underreports usage for multi-step tool calls (like diagram generation).
Changed to 'totalUsage' which provides cumulative counts across all steps.

Include all 4 token types for accurate counting:
1. inputTokens - non-cached input tokens
2. outputTokens - generated output tokens
3. cachedInputTokens - tokens read from prompt cache
4. inputTokenDetails.cacheWriteTokens - tokens written to cache

Tested locally:
- Request 1 (cache write): 334 + 62 + 0 + 6671 = 7,067 tokens
- Request 2 (cache read): 334 + 184 + 6551 + 120 = 7,189 tokens
- DynamoDB total: 14,256 ✓

.github/workflows/ci.yml

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

app/api/chat/route.ts

@@ -26,7 +26,6 @@ import {
     wrapWithObserve,
 } from "@/lib/langfuse"
 import { getSystemPrompt } from "@/lib/system-prompts"
-import { getUserIdFromRequest } from "@/lib/user-id"
 
 export const maxDuration = 120
 
@@ -168,8 +167,13 @@ async function handleChatRequest(req: Request): Promise<Response> {
 
     const { messages, xml, previousXml, sessionId } = await req.json()
 
-    // Get user ID for Langfuse tracking and quota
+    // Get user IP for Langfuse tracking (hashed for privacy)
-    const userId = getUserIdFromRequest(req)
+    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)}`
 
     // Validate sessionId for Langfuse (must be string, max 200 chars)
     const validSessionId =
@@ -609,22 +613,14 @@ 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({
-                                operation: z
+                                type: z
                                     .enum(["update", "add", "delete"])
-                                    .describe(
+                                    .describe("Operation type"),
-                                        "Operation to perform: add, update, or delete",
-                                    ),
                                 cell_id: z
                                     .string()
                                     .describe(

app/api/log-feedback/route.ts

@@ -1,7 +1,6 @@
 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),
@@ -33,8 +32,13 @@ export async function POST(req: Request) {
         return Response.json({ success: true, logged: false })
     }
 
-    // Get user ID for tracking
+    // Get user IP for tracking (hashed for privacy)
-    const userId = getUserIdFromRequest(req)
+    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)}`
 
     try {
         // Find the most recent chat trace for this session to attach the score to

app/globals.css

@@ -144,68 +144,6 @@
     --sidebar-ring: oklch(0.7 0.16 265);
 }
 
-/* ============================================
-   REFINED MINIMAL DESIGN SYSTEM
-   ============================================ */
-
-:root {
-    /* Surface layers for depth */
-    --surface-0: oklch(1 0 0);
-    --surface-1: oklch(0.985 0.002 240);
-    --surface-2: oklch(0.97 0.004 240);
-    --surface-elevated: oklch(1 0 0);
-
-    /* Subtle borders */
-    --border-subtle: oklch(0.94 0.008 260);
-    --border-default: oklch(0.91 0.012 260);
-
-    /* Interactive states */
-    --interactive-hover: oklch(0.96 0.015 260);
-    --interactive-active: oklch(0.93 0.02 265);
-
-    /* Success state */
-    --success: oklch(0.65 0.18 145);
-    --success-muted: oklch(0.95 0.03 145);
-
-    /* Animation timing */
-    --duration-fast: 120ms;
-    --duration-normal: 200ms;
-    --duration-slow: 300ms;
-    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
-    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
-    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-.dark {
-    --surface-0: oklch(0.15 0.015 260);
-    --surface-1: oklch(0.18 0.015 260);
-    --surface-2: oklch(0.22 0.015 260);
-    --surface-elevated: oklch(0.25 0.015 260);
-
-    --border-subtle: oklch(0.25 0.012 260);
-    --border-default: oklch(0.3 0.015 260);
-
-    --interactive-hover: oklch(0.25 0.02 265);
-    --interactive-active: oklch(0.3 0.025 270);
-
-    --success: oklch(0.7 0.16 145);
-    --success-muted: oklch(0.25 0.04 145);
-}
-
-/* Expose surface colors to Tailwind */
-@theme inline {
-    --color-surface-0: var(--surface-0);
-    --color-surface-1: var(--surface-1);
-    --color-surface-2: var(--surface-2);
-    --color-surface-elevated: var(--surface-elevated);
-    --color-border-subtle: var(--border-subtle);
-    --color-border-default: var(--border-default);
-    --color-interactive-hover: var(--interactive-hover);
-    --color-interactive-active: var(--interactive-active);
-    --color-success: var(--success);
-    --color-success-muted: var(--success-muted);
-}
-
 @layer base {
     * {
         @apply border-border outline-ring/50;
@@ -319,83 +257,3 @@
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }
-
-/* ============================================
-   REFINED DIALOG STYLES
-   ============================================ */
-
-/* Refined dialog shadow - multi-layer soft shadow */
-.shadow-dialog {
-    box-shadow:
-        0 0 0 1px oklch(0 0 0 / 0.03),
-        0 2px 4px oklch(0 0 0 / 0.02),
-        0 12px 24px oklch(0 0 0 / 0.06),
-        0 24px 48px oklch(0 0 0 / 0.04);
-}
-
-.dark .shadow-dialog {
-    box-shadow:
-        0 0 0 1px oklch(1 0 0 / 0.05),
-        0 2px 4px oklch(0 0 0 / 0.2),
-        0 12px 24px oklch(0 0 0 / 0.3),
-        0 24px 48px oklch(0 0 0 / 0.2);
-}
-
-/* Dialog animations */
-@keyframes dialog-in {
-    from {
-        opacity: 0;
-        transform: translate(-50%, -48%) scale(0.96);
-    }
-    to {
-        opacity: 1;
-        transform: translate(-50%, -50%) scale(1);
-    }
-}
-
-@keyframes dialog-out {
-    from {
-        opacity: 1;
-        transform: translate(-50%, -50%) scale(1);
-    }
-    to {
-        opacity: 0;
-        transform: translate(-50%, -48%) scale(0.96);
-    }
-}
-
-.animate-dialog-in {
-    animation: dialog-in var(--duration-normal) var(--ease-out) forwards;
-}
-
-.animate-dialog-out {
-    animation: dialog-out 150ms var(--ease-out) forwards;
-}
-
-/* Check pop animation for validation success */
-@keyframes check-pop {
-    0% {
-        transform: scale(0.8);
-        opacity: 0;
-    }
-    50% {
-        transform: scale(1.1);
-    }
-    100% {
-        transform: scale(1);
-        opacity: 1;
-    }
-}
-
-.animate-check-pop {
-    animation: check-pop 0.25s var(--ease-spring) forwards;
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-    .animate-dialog-in,
-    .animate-dialog-out,
-    .animate-check-pop {
-        animation: none;
-    }
-}

components/ai-elements/model-selector.tsx

@@ -66,22 +66,8 @@ export const ModelSelectorInput = ({
 
 export type ModelSelectorListProps = ComponentProps<typeof CommandList>
 
-export const ModelSelectorList = ({
+export const ModelSelectorList = (props: ModelSelectorListProps) => (
-    className,
+    <CommandList {...props} />
-    ...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 {
-    operation: "update" | "add" | "delete"
+    type: "update" | "add" | "delete"
     cell_id: string
     new_xml?: string
 }
@@ -53,12 +53,12 @@ function getCompleteOperations(
     return operations.filter(
         (op) =>
             op &&
-            typeof op.operation === "string" &&
+            typeof op.type === "string" &&
-            ["update", "add", "delete"].includes(op.operation) &&
+            ["update", "add", "delete"].includes(op.type) &&
             typeof op.cell_id === "string" &&
             op.cell_id.length > 0 &&
             // delete doesn't need new_xml, update/add do
-            (op.operation === "delete" || typeof op.new_xml === "string"),
+            (op.type === "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.operation}-${op.cell_id}-${index}`}
+                    key={`${op.type}-${op.cell_id}-${index}`}
                     className="rounded-lg border border-border/50 overflow-hidden bg-background/50"
                 >
                     <div className="px-3 py-1.5 bg-muted/40 border-b border-border/30 flex items-center gap-2">
                         <span
                             className={`text-[10px] font-medium uppercase tracking-wide ${
-                                op.operation === "delete"
+                                op.type === "delete"
                                     ? "text-red-600"
-                                    : op.operation === "add"
+                                    : op.type === "add"
                                       ? "text-green-600"
                                       : "text-blue-600"
                             }`}
                         >
-                            {op.operation}
+                            {op.type}
                         </span>
                         <span className="text-xs text-muted-foreground">
                             cell_id: {op.cell_id}

components/chat-panel.tsx

@@ -27,7 +27,6 @@ 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"
@@ -35,9 +34,8 @@ 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 } from "@/lib/utils"
+import { formatXML, isMxCellXmlComplete, wrapWithMxFile } 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"
@@ -78,7 +76,6 @@ 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
 
 /**
@@ -215,6 +212,9 @@ 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,16 +237,6 @@ 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,
@@ -259,37 +249,320 @@ export default function ChatPanel({
         transport: new DefaultChatTransport({
             api: getApiEndpoint("/api/chat"),
         }),
-        onToolCall: async ({ toolCall }) => {
+        async onToolCall({ toolCall }) {
-            await handleToolCall({ toolCall }, addToolOutput)
+            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.`,
+                    })
+                }
+            }
         },
         onError: (error) => {
             // Handle server-side quota limit (429 response)
-            // AI SDK puts the full response body in error.message for non-OK responses
-            try {
-                const data = JSON.parse(error.message)
-                if (data.type === "request") {
-                    quotaManager.showQuotaLimitToast(data.used, data.limit)
-                    return
-                }
-                if (data.type === "token") {
-                    quotaManager.showTokenLimitToast(data.used, data.limit)
-                    return
-                }
-                if (data.type === "tpm") {
-                    quotaManager.showTPMLimitToast(data.limit)
-                    return
-                }
-            } catch {
-                // Not JSON, fall through to string matching for backwards compatibility
-            }
-
-            // Fallback to string matching
             if (error.message.includes("Daily request limit")) {
                 quotaManager.showQuotaLimitToast()
                 return
             }
             if (error.message.includes("Daily token limit")) {
-                quotaManager.showTokenLimitToast()
+                quotaManager.showTokenLimitToast(dailyTokenLimit)
                 return
             }
             if (
@@ -424,6 +697,9 @@ export default function ChatPanel({
         },
     })
 
+    // Update stopRef so onToolCall can access it
+    stopRef.current = stop
+
     // Ref to track latest messages for unload persistence
     const messagesRef = useRef(messages)
     useEffect(() => {
@@ -1041,14 +1317,6 @@ export default function ChatPanel({
                 />
             </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

@@ -1,350 +0,0 @@
-"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

@@ -103,40 +103,41 @@ function ProviderLogo({
     )
 }
 
-// Configuration section with title and optional action
+// Reusable validation button component
-function ConfigSection({
+function ValidationButton({
-    title,
+    status,
-    icon: Icon,
+    onClick,
-    action,
+    disabled,
-    children,
+    dict,
 }: {
-    title: string
+    status: ValidationStatus
-    icon: React.ComponentType<{ className?: string }>
+    onClick: () => void
-    action?: React.ReactNode
+    disabled: boolean
-    children: React.ReactNode
+    dict: ReturnType<typeof useDictionary>
 }) {
     return (
-        <div className="space-y-4">
+        <Button
-            <div className="flex items-center justify-between">
+            variant={status === "success" ? "outline" : "default"}
-                <div className="flex items-center gap-2">
+            size="sm"
-                    <Icon className="h-4 w-4 text-muted-foreground" />
+            onClick={onClick}
-                    <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+            disabled={disabled}
-                        {title}
+            className={cn(
-                    </span>
+                "h-9 px-4 min-w-[80px]",
-                </div>
+                status === "success" &&
-                {action}
+                    "text-emerald-600 border-emerald-200 dark:border-emerald-800",
-            </div>
+            )}
-            {children}
+        >
-        </div>
+            {status === "validating" ? (
-    )
+                <Loader2 className="h-4 w-4 animate-spin" />
-}
+            ) : status === "success" ? (
-
+                <>
-// Card wrapper with subtle depth
+                    <Check className="h-4 w-4 mr-1.5" />
-function ConfigCard({ children }: { children: React.ReactNode }) {
+                    {dict.modelConfig.verified}
-    return (
+                </>
-        <div className="rounded-2xl border border-border-subtle bg-surface-2/50 p-5 space-y-5">
+            ) : (
-            {children}
+                dict.modelConfig.test
-        </div>
+            )}
+        </Button>
     )
 }
 
@@ -153,6 +154,7 @@ export function ModelConfigDialog({
     const [validationStatus, setValidationStatus] =
         useState<ValidationStatus>("idle")
     const [validationError, setValidationError] = useState<string>("")
+    const [scrollState, setScrollState] = useState({ top: false, bottom: true })
     const [customModelInput, setCustomModelInput] = useState("")
     const scrollRef = useRef<HTMLDivElement>(null)
     const validationResetTimeoutRef = useRef<ReturnType<
@@ -184,6 +186,26 @@ export function ModelConfigDialog({
         (p) => p.id === selectedProviderId,
     )
 
+    // Track scroll position for gradient shadows
+    useEffect(() => {
+        const scrollEl = scrollRef.current?.querySelector(
+            "[data-radix-scroll-area-viewport]",
+        ) as HTMLElement | null
+        if (!scrollEl) return
+
+        const handleScroll = () => {
+            const { scrollTop, scrollHeight, clientHeight } = scrollEl
+            setScrollState({
+                top: scrollTop > 10,
+                bottom: scrollTop < scrollHeight - clientHeight - 10,
+            })
+        }
+
+        handleScroll() // Initial check
+        scrollEl.addEventListener("scroll", handleScroll)
+        return () => scrollEl.removeEventListener("scroll", handleScroll)
+    }, [selectedProvider])
+
     // Cleanup validation reset timeout on unmount
     useEffect(() => {
         return () => {
@@ -368,35 +390,34 @@ export function ModelConfigDialog({
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-4xl h-[80vh] max-h-[800px] overflow-hidden flex flex-col gap-0 p-0">
+            <DialogContent className="sm:max-w-3xl h-[75vh] max-h-[700px] overflow-hidden flex flex-col gap-0 p-0">
-                {/* Header */}
+                <DialogHeader className="px-6 pt-6 pb-4 border-b bg-gradient-to-r from-primary/5 via-primary/3 to-transparent">
-                <DialogHeader className="px-6 pt-6 pb-4 shrink-0">
+                    <DialogTitle className="flex items-center gap-2.5 text-xl font-semibold">
-                    <DialogTitle className="flex items-center gap-3">
+                        <div className="p-1.5 rounded-lg bg-primary/10">
-                        <div className="p-2 rounded-xl bg-surface-2">
                             <Server className="h-5 w-5 text-primary" />
                         </div>
                         {dict.modelConfig?.title || "AI Model Configuration"}
                     </DialogTitle>
-                    <DialogDescription className="mt-1">
+                    <DialogDescription className="text-sm">
                         {dict.modelConfig?.description ||
                             "Configure multiple AI providers and models for your workspace"}
                     </DialogDescription>
                 </DialogHeader>
 
-                <div className="flex flex-1 min-h-0 overflow-hidden border-t border-border-subtle">
+                <div className="flex flex-1 min-h-0 overflow-hidden">
                     {/* Provider List (Left Sidebar) */}
-                    <div className="w-60 shrink-0 flex flex-col bg-surface-1/50 border-r border-border-subtle">
+                    <div className="w-56 flex-shrink-0 flex flex-col border-r bg-muted/20">
-                        <div className="px-4 py-3">
+                        <div className="px-4 py-3 border-b">
                             <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
                                 {dict.modelConfig.providers}
                             </span>
                         </div>
 
-                        <ScrollArea className="flex-1 px-2">
+                        <ScrollArea className="flex-1">
-                            <div className="space-y-1 pb-2">
+                            <div className="p-2">
                                 {config.providers.length === 0 ? (
                                     <div className="px-3 py-8 text-center">
-                                        <div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-surface-2 mb-3">
+                                        <div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-muted mb-3">
                                             <Plus className="h-5 w-5 text-muted-foreground" />
                                         </div>
                                         <p className="text-xs text-muted-foreground">
@@ -404,74 +425,67 @@ export function ModelConfigDialog({
                                         </p>
                                     </div>
                                 ) : (
-                                    config.providers.map((provider) => (
+                                    <div className="flex flex-col gap-1">
-                                        <button
+                                        {config.providers.map((provider) => (
-                                            key={provider.id}
+                                            <button
-                                            type="button"
+                                                key={provider.id}
-                                            onClick={() => {
+                                                type="button"
-                                                setSelectedProviderId(
+                                                onClick={() => {
-                                                    provider.id,
+                                                    setSelectedProviderId(
-                                                )
+                                                        provider.id,
-                                                setValidationStatus("idle")
+                                                    )
-                                                setShowApiKey(false)
+                                                    setValidationStatus(
-                                            }}
+                                                        provider.validated
-                                            className={cn(
+                                                            ? "success"
-                                                "group flex items-center gap-3 px-3 py-2.5 rounded-xl w-full",
+                                                            : "idle",
-                                                "text-left text-sm transition-all duration-150",
+                                                    )
-                                                "hover:bg-interactive-hover",
+                                                    setShowApiKey(false)
-                                                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                                                }}
-                                                selectedProviderId ===
-                                                    provider.id &&
-                                                    "bg-surface-0 shadow-sm ring-1 ring-border-subtle",
-                                            )}
-                                        >
-                                            <div
                                                 className={cn(
-                                                    "w-8 h-8 rounded-lg flex items-center justify-center",
+                                                    "group flex items-center gap-3 px-3 py-2.5 rounded-lg text-left text-sm transition-all duration-150 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                                                    "bg-surface-2 transition-colors duration-150",
                                                     selectedProviderId ===
                                                         provider.id &&
-                                                        "bg-primary/10",
+                                                        "bg-background shadow-sm ring-1 ring-border",
                                                 )}
                                             >
                                                 <ProviderLogo
                                                     provider={provider.provider}
                                                     className="flex-shrink-0"
                                                 />
-                                            </div>
+                                                <span className="flex-1 truncate font-medium">
-                                            <span className="flex-1 truncate font-medium">
+                                                    {getProviderDisplayName(
-                                                {getProviderDisplayName(
+                                                        provider,
-                                                    provider,
-                                                )}
-                                            </span>
-                                            {provider.validated ? (
-                                                <div className="flex-shrink-0 flex items-center justify-center w-5 h-5 rounded-full bg-success-muted">
-                                                    <Check className="h-3 w-3 text-success" />
-                                                </div>
-                                            ) : (
-                                                <ChevronRight
-                                                    className={cn(
-                                                        "h-4 w-4 text-muted-foreground/50 transition-transform duration-150",
-                                                        selectedProviderId ===
-                                                            provider.id &&
-                                                            "translate-x-0.5",
                                                     )}
-                                                />
+                                                </span>
-                                            )}
+                                                {provider.validated ? (
-                                        </button>
+                                                    <div className="flex-shrink-0 flex items-center justify-center w-5 h-5 rounded-full bg-emerald-500/10">
-                                    ))
+                                                        <Check className="h-3 w-3 text-emerald-500" />
+                                                    </div>
+                                                ) : (
+                                                    <ChevronRight
+                                                        className={cn(
+                                                            "h-4 w-4 text-muted-foreground/50 transition-transform",
+                                                            selectedProviderId ===
+                                                                provider.id &&
+                                                                "translate-x-0.5",
+                                                        )}
+                                                    />
+                                                )}
+                                            </button>
+                                        ))}
+                                    </div>
                                 )}
                             </div>
                         </ScrollArea>
 
                         {/* Add Provider */}
-                        <div className="p-3 border-t border-border-subtle">
+                        <div className="p-2 border-t">
                             <Select
                                 onValueChange={(v) =>
                                     handleAddProvider(v as ProviderName)
                                 }
                             >
-                                <SelectTrigger className="w-full h-9 rounded-xl bg-surface-0 border-border-subtle hover:bg-interactive-hover">
+                                <SelectTrigger className="h-9 bg-background hover:bg-accent">
                                     <Plus className="h-4 w-4 mr-2 text-muted-foreground" />
                                     <SelectValue
                                         placeholder={
@@ -500,23 +514,41 @@ export function ModelConfigDialog({
                     </div>
 
                     {/* Provider Details (Right Panel) */}
-                    <div className="flex-1 min-w-0 flex flex-col overflow-auto [&::-webkit-scrollbar]:hidden ">
+                    <div className="flex-1 min-w-0 overflow-hidden relative">
                         {selectedProvider ? (
                             <>
-                                <ScrollArea className="flex-1" ref={scrollRef}>
+                                {/* Top gradient shadow */}
-                                    <div className="p-6 space-y-8">
+                                <div
+                                    className={cn(
+                                        "absolute top-0 left-0 right-0 h-8 bg-gradient-to-b from-background to-transparent z-10 pointer-events-none transition-opacity duration-200",
+                                        scrollState.top
+                                            ? "opacity-100"
+                                            : "opacity-0",
+                                    )}
+                                />
+                                {/* Bottom gradient shadow */}
+                                <div
+                                    className={cn(
+                                        "absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-background to-transparent z-10 pointer-events-none transition-opacity duration-200",
+                                        scrollState.bottom
+                                            ? "opacity-100"
+                                            : "opacity-0",
+                                    )}
+                                />
+                                <ScrollArea className="h-full" ref={scrollRef}>
+                                    <div className="p-6 space-y-6">
                                         {/* Provider Header */}
                                         <div className="flex items-center gap-3">
-                                            <div className="flex items-center justify-center w-12 h-12 rounded-xl bg-surface-2">
+                                            <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-muted">
                                                 <ProviderLogo
                                                     provider={
                                                         selectedProvider.provider
                                                     }
-                                                    className="h-6 w-6"
+                                                    className="h-5 w-5"
                                                 />
                                             </div>
                                             <div className="flex-1 min-w-0">
-                                                <h3 className="font-semibold text-lg tracking-tight">
+                                                <h3 className="font-semibold text-base">
                                                     {
                                                         PROVIDER_INFO[
                                                             selectedProvider
@@ -524,7 +556,7 @@ export function ModelConfigDialog({
                                                         ].label
                                                     }
                                                 </h3>
-                                                <p className="text-sm text-muted-foreground">
+                                                <p className="text-xs text-muted-foreground">
                                                     {selectedProvider.models
                                                         .length === 0
                                                         ? dict.modelConfig
@@ -541,8 +573,8 @@ export function ModelConfigDialog({
                                                 </p>
                                             </div>
                                             {selectedProvider.validated && (
-                                                <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-success-muted text-success">
+                                                <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
-                                                    <Check className="h-3.5 w-3.5 animate-check-pop" />
+                                                    <Check className="h-3.5 w-3.5" />
                                                     <span className="text-xs font-medium">
                                                         {
                                                             dict.modelConfig
@@ -551,30 +583,21 @@ export function ModelConfigDialog({
                                                     </span>
                                                 </div>
                                             )}
-                                            <Button
-                                                variant="ghost"
-                                                size="sm"
-                                                onClick={() =>
-                                                    setDeleteConfirmOpen(true)
-                                                }
-                                                className="text-destructive hover:text-destructive hover:bg-destructive/10"
-                                            >
-                                                <Trash2 className="h-4 w-4 mr-1.5" />
-                                                {
-                                                    dict.modelConfig
-                                                        .deleteProvider
-                                                }
-                                            </Button>
                                         </div>
 
                                         {/* Configuration Section */}
-                                        <ConfigSection
+                                        <div className="space-y-4">
-                                            title={
+                                            <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
-                                                dict.modelConfig.configuration
+                                                <Settings2 className="h-4 w-4" />
-                                            }
+                                                <span>
-                                            icon={Settings2}
+                                                    {
-                                        >
+                                                        dict.modelConfig
-                                            <ConfigCard>
+                                                            .configuration
+                                                    }
+                                                </span>
+                                            </div>
+
+                                            <div className="rounded-xl border bg-card p-4 space-y-4">
                                                 {/* Display Name */}
                                                 <div className="space-y-2">
                                                     <Label
@@ -833,7 +856,7 @@ export function ModelConfigDialog({
                                                                     "h-9 px-4",
                                                                     validationStatus ===
                                                                         "success" &&
-                                                                        "text-success border-success/30 bg-success-muted hover:bg-success-muted",
+                                                                        "text-emerald-600 border-emerald-200 dark:border-emerald-800",
                                                                 )}
                                                             >
                                                                 {validationStatus ===
@@ -842,7 +865,7 @@ export function ModelConfigDialog({
                                                                 ) : validationStatus ===
                                                                   "success" ? (
                                                                     <>
-                                                                        <Check className="h-4 w-4 mr-1.5 animate-check-pop" />
+                                                                        <Check className="h-4 w-4 mr-1.5" />
                                                                         {
                                                                             dict
                                                                                 .modelConfig
@@ -952,7 +975,7 @@ export function ModelConfigDialog({
                                                                         "h-9 px-4",
                                                                         validationStatus ===
                                                                             "success" &&
-                                                                            "text-success border-success/30 bg-success-muted hover:bg-success-muted",
+                                                                            "text-emerald-600 border-emerald-200 dark:border-emerald-800",
                                                                     )}
                                                                 >
                                                                     {validationStatus ===
@@ -961,7 +984,7 @@ export function ModelConfigDialog({
                                                                     ) : validationStatus ===
                                                                       "success" ? (
                                                                         <>
-                                                                            <Check className="h-4 w-4 mr-1.5 animate-check-pop" />
+                                                                            <Check className="h-4 w-4 mr-1.5" />
                                                                             {
                                                                                 dict
                                                                                     .modelConfig
@@ -1030,19 +1053,26 @@ export function ModelConfigDialog({
                                                                         .modelConfig
                                                                         .customEndpoint
                                                                 }
-                                                                className="h-9 rounded-xl font-mono text-xs"
+                                                                className="h-9 font-mono text-xs"
                                                             />
                                                         </div>
                                                     </>
                                                 )}
-                                            </ConfigCard>
+                                            </div>
-                                        </ConfigSection>
+                                        </div>
 
                                         {/* Models Section */}
-                                        <ConfigSection
+                                        <div className="space-y-4">
-                                            title={dict.modelConfig.models}
+                                            <div className="flex items-center justify-between">
-                                            icon={Sparkles}
+                                                <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
-                                            action={
+                                                    <Sparkles className="h-4 w-4" />
+                                                    <span>
+                                                        {
+                                                            dict.modelConfig
+                                                                .models
+                                                        }
+                                                    </span>
+                                                </div>
                                                 <div className="flex items-center gap-2">
                                                     <div className="relative">
                                                         <Input
@@ -1058,6 +1088,7 @@ export function ModelConfigDialog({
                                                                     e.target
                                                                         .value,
                                                                 )
+                                                                // Clear duplicate error when typing
                                                                 if (
                                                                     duplicateError
                                                                 ) {
@@ -1086,11 +1117,12 @@ export function ModelConfigDialog({
                                                                 }
                                                             }}
                                                             className={cn(
-                                                                "h-8 w-44 rounded-lg font-mono text-xs",
+                                                                "h-8 w-48 font-mono text-xs",
                                                                 duplicateError &&
                                                                     "border-destructive focus-visible:ring-destructive",
                                                             )}
                                                         />
+                                                        {/* Show duplicate error for custom model input */}
                                                         {duplicateError && (
                                                             <p className="absolute top-full left-0 mt-1 text-[11px] text-destructive">
                                                                 {duplicateError}
@@ -1100,7 +1132,7 @@ export function ModelConfigDialog({
                                                     <Button
                                                         variant="outline"
                                                         size="sm"
-                                                        className="h-8 rounded-lg"
+                                                        className="h-8"
                                                         onClick={() => {
                                                             if (
                                                                 customModelInput.trim()
@@ -1137,7 +1169,7 @@ export function ModelConfigDialog({
                                                             0
                                                         }
                                                     >
-                                                        <SelectTrigger className="w-28 h-8 rounded-lg hover:bg-interactive-hover">
+                                                        <SelectTrigger className="w-32 h-8 hover:bg-accent">
                                                             <span className="text-xs">
                                                                 {availableSuggestions.length ===
                                                                 0
@@ -1170,14 +1202,14 @@ export function ModelConfigDialog({
                                                         </SelectContent>
                                                     </Select>
                                                 </div>
-                                            }
+                                            </div>
-                                        >
+
                                             {/* Model List */}
-                                            <div className="rounded-2xl border border-border-subtle bg-surface-2/30 overflow-hidden min-h-[120px]">
+                                            <div className="rounded-xl border bg-card overflow-hidden min-h-[120px]">
                                                 {selectedProvider.models
                                                     .length === 0 ? (
-                                                    <div className="p-6 text-center h-full flex flex-col items-center justify-center">
+                                                    <div className="p-4 text-center h-full flex flex-col items-center justify-center">
-                                                        <div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-surface-2 mb-3">
+                                                        <div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-muted mb-2">
                                                             <Sparkles className="h-5 w-5 text-muted-foreground" />
                                                         </div>
                                                         <p className="text-sm text-muted-foreground">
@@ -1188,7 +1220,7 @@ export function ModelConfigDialog({
                                                         </p>
                                                     </div>
                                                 ) : (
-                                                    <div className="divide-y divide-border-subtle">
+                                                    <div className="divide-y">
                                                         {selectedProvider.models.map(
                                                             (model, index) => (
                                                                 <div
@@ -1196,7 +1228,16 @@ export function ModelConfigDialog({
                                                                         model.id
                                                                     }
                                                                     className={cn(
-                                                                        "transition-colors duration-150 hover:bg-interactive-hover/50",
+                                                                        "transition-colors hover:bg-muted/30",
+                                                                        index ===
+                                                                            0 &&
+                                                                            "rounded-t-xl",
+                                                                        index ===
+                                                                            selectedProvider
+                                                                                .models
+                                                                                .length -
+                                                                                1 &&
+                                                                            "rounded-b-xl",
                                                                     )}
                                                                 >
                                                                     <div className="flex items-center gap-3 p-3 min-w-0">
@@ -1223,8 +1264,8 @@ export function ModelConfigDialog({
                                                                             ) : model.validated ===
                                                                               true ? (
                                                                                 // Valid
-                                                                                <div className="w-full h-full rounded-lg bg-success-muted flex items-center justify-center">
+                                                                                <div className="w-full h-full rounded-lg bg-emerald-500/10 flex items-center justify-center">
-                                                                                    <Check className="h-4 w-4 text-success" />
+                                                                                    <Check className="h-4 w-4 text-emerald-500" />
                                                                                 </div>
                                                                             ) : model.validated ===
                                                                               false ? (
@@ -1425,16 +1466,34 @@ export function ModelConfigDialog({
                                                     </div>
                                                 )}
                                             </div>
-                                        </ConfigSection>
+                                        </div>
+
+                                        {/* Danger Zone */}
+                                        <div className="pt-4">
+                                            <Button
+                                                variant="ghost"
+                                                size="sm"
+                                                onClick={() =>
+                                                    setDeleteConfirmOpen(true)
+                                                }
+                                                className="text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+                                            >
+                                                <Trash2 className="h-4 w-4 mr-2" />
+                                                {
+                                                    dict.modelConfig
+                                                        .deleteProvider
+                                                }
+                                            </Button>
+                                        </div>
                                     </div>
                                 </ScrollArea>
                             </>
                         ) : (
                             <div className="h-full flex flex-col items-center justify-center p-8 text-center">
-                                <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-surface-2 mb-4">
+                                <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-primary/10 to-primary/5 mb-4">
-                                    <Server className="h-8 w-8 text-muted-foreground" />
+                                    <Server className="h-8 w-8 text-primary/60" />
                                 </div>
-                                <h3 className="font-semibold text-lg tracking-tight mb-1">
+                                <h3 className="font-semibold mb-1">
                                     {dict.modelConfig.configureProviders}
                                 </h3>
                                 <p className="text-sm text-muted-foreground max-w-xs">
@@ -1446,7 +1505,7 @@ export function ModelConfigDialog({
                 </div>
 
                 {/* Footer */}
-                <div className="px-6 py-3 border-t border-border-subtle bg-surface-1/30 shrink-0">
+                <div className="px-6 py-3 border-t bg-muted/20">
                     <p className="text-xs text-muted-foreground text-center flex items-center justify-center gap-1.5">
                         <Key className="h-3 w-3" />
                         {dict.modelConfig.apiKeyStored}

components/model-selector.tsx

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

components/settings-dialog.tsx

@@ -24,32 +24,6 @@ import { Switch } from "@/components/ui/switch"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { getApiEndpoint } from "@/lib/base-path"
 import { i18n, type Locale } from "@/lib/i18n/config"
-import { cn } from "@/lib/utils"
-
-// Reusable setting item component for consistent layout
-function SettingItem({
-    label,
-    description,
-    children,
-}: {
-    label: string
-    description?: string
-    children: React.ReactNode
-}) {
-    return (
-        <div className="flex items-center justify-between py-4 first:pt-0 last:pb-0">
-            <div className="space-y-0.5 pr-4">
-                <Label className="text-sm font-medium">{label}</Label>
-                {description && (
-                    <p className="text-xs text-muted-foreground max-w-[260px]">
-                        {description}
-                    </p>
-                )}
-            </div>
-            <div className="shrink-0">{children}</div>
-        </div>
-    )
-}
 
 const LANGUAGE_LABELS: Record<Locale, string> = {
     en: "English",
@@ -203,154 +177,145 @@ function SettingsContent({
     }
 
     return (
-        <DialogContent className="sm:max-w-lg p-0 gap-0">
+        <DialogContent className="sm:max-w-md">
-            {/* Header */}
+            <DialogHeader>
-            <DialogHeader className="px-6 pt-6 pb-4">
                 <DialogTitle>{dict.settings.title}</DialogTitle>
-                <DialogDescription className="mt-1">
+                <DialogDescription>
                     {dict.settings.description}
                 </DialogDescription>
             </DialogHeader>
-
+            <div className="space-y-4 py-2">
-            {/* Content */}
+                {accessCodeRequired && (
-            <div className="px-6 pb-6">
+                    <div className="space-y-2">
-                <div className="divide-y divide-border-subtle">
+                        <Label htmlFor="access-code">
-                    {/* Access Code (conditional) */}
+                            {dict.settings.accessCode}
-                    {accessCodeRequired && (
+                        </Label>
-                        <div className="py-4 first:pt-0 space-y-3">
+                        <div className="flex gap-2">
-                            <div className="space-y-0.5">
+                            <Input
-                                <Label
+                                id="access-code"
-                                    htmlFor="access-code"
+                                type="password"
-                                    className="text-sm font-medium"
+                                value={accessCode}
-                                >
+                                onChange={(e) => setAccessCode(e.target.value)}
-                                    {dict.settings.accessCode}
+                                onKeyDown={handleKeyDown}
-                                </Label>
+                                placeholder={
-                                <p className="text-xs text-muted-foreground">
+                                    dict.settings.accessCodePlaceholder
-                                    {dict.settings.accessCodeDescription}
+                                }
-                                </p>
+                                autoComplete="off"
-                            </div>
+                            />
-                            <div className="flex gap-2">
+                            <Button
-                                <Input
+                                onClick={handleSave}
-                                    id="access-code"
+                                disabled={isVerifying || !accessCode.trim()}
-                                    type="password"
-                                    value={accessCode}
-                                    onChange={(e) =>
-                                        setAccessCode(e.target.value)
-                                    }
-                                    onKeyDown={handleKeyDown}
-                                    placeholder={
-                                        dict.settings.accessCodePlaceholder
-                                    }
-                                    autoComplete="off"
-                                    className="h-9"
-                                />
-                                <Button
-                                    onClick={handleSave}
-                                    disabled={isVerifying || !accessCode.trim()}
-                                    className="h-9 px-4 rounded-xl"
-                                >
-                                    {isVerifying ? "..." : dict.common.save}
-                                </Button>
-                            </div>
-                            {error && (
-                                <p className="text-xs text-destructive">
-                                    {error}
-                                </p>
-                            )}
-                        </div>
-                    )}
-
-                    {/* Language */}
-                    <SettingItem
-                        label={dict.settings.language}
-                        description={dict.settings.languageDescription}
-                    >
-                        <Select
-                            value={currentLang}
-                            onValueChange={changeLanguage}
-                        >
-                            <SelectTrigger
-                                id="language-select"
-                                className="w-[120px] h-9 rounded-xl"
                             >
-                                <SelectValue />
+                                {isVerifying ? "..." : dict.common.save}
-                            </SelectTrigger>
+                            </Button>
-                            <SelectContent>
+                        </div>
-                                {i18n.locales.map((locale) => (
+                        <p className="text-[0.8rem] text-muted-foreground">
-                                    <SelectItem key={locale} value={locale}>
+                            {dict.settings.accessCodeDescription}
-                                        {LANGUAGE_LABELS[locale]}
+                        </p>
-                                    </SelectItem>
+                        {error && (
-                                ))}
+                            <p className="text-[0.8rem] text-destructive">
-                            </SelectContent>
+                                {error}
-                        </Select>
+                            </p>
-                    </SettingItem>
+                        )}
+                    </div>
+                )}
 
-                    {/* Theme */}
+                <div className="flex items-center justify-between">
-                    <SettingItem
+                    <div className="space-y-0.5">
-                        label={dict.settings.theme}
+                        <Label htmlFor="language-select">
-                        description={dict.settings.themeDescription}
+                            {dict.settings.language}
-                    >
+                        </Label>
-                        <Button
+                        <p className="text-[0.8rem] text-muted-foreground">
-                            id="theme-toggle"
+                            {dict.settings.languageDescription}
-                            variant="outline"
+                        </p>
-                            size="icon"
+                    </div>
-                            onClick={onToggleDarkMode}
+                    <Select value={currentLang} onValueChange={changeLanguage}>
-                            className="h-9 w-9 rounded-xl border-border-subtle hover:bg-interactive-hover"
+                        <SelectTrigger id="language-select" className="w-32">
-                        >
+                            <SelectValue />
-                            {darkMode ? (
+                        </SelectTrigger>
-                                <Sun className="h-4 w-4" />
+                        <SelectContent>
-                            ) : (
+                            {i18n.locales.map((locale) => (
-                                <Moon className="h-4 w-4" />
+                                <SelectItem key={locale} value={locale}>
-                            )}
+                                    {LANGUAGE_LABELS[locale]}
-                        </Button>
+                                </SelectItem>
-                    </SettingItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
 
-                    {/* Draw.io Style */}
+                <div className="flex items-center justify-between">
-                    <SettingItem
+                    <div className="space-y-0.5">
-                        label={dict.settings.drawioStyle}
+                        <Label htmlFor="theme-toggle">
-                        description={`${dict.settings.drawioStyleDescription} ${
+                            {dict.settings.theme}
-                            drawioUi === "min"
+                        </Label>
-                                ? dict.settings.minimal
+                        <p className="text-[0.8rem] text-muted-foreground">
-                                : dict.settings.sketch
+                            {dict.settings.themeDescription}
-                        }`}
+                        </p>
+                    </div>
+                    <Button
+                        id="theme-toggle"
+                        variant="outline"
+                        size="icon"
+                        onClick={onToggleDarkMode}
                     >
-                        <Button
+                        {darkMode ? (
-                            id="drawio-ui"
+                            <Sun className="h-4 w-4" />
-                            variant="outline"
+                        ) : (
-                            onClick={onToggleDrawioUi}
+                            <Moon className="h-4 w-4" />
-                            className="h-9 w-[120px] rounded-xl border-border-subtle hover:bg-interactive-hover font-normal"
+                        )}
-                        >
+                    </Button>
-                            {dict.settings.switchTo}{" "}
+                </div>
+
+                <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                        <Label htmlFor="drawio-ui">
+                            {dict.settings.drawioStyle}
+                        </Label>
+                        <p className="text-[0.8rem] text-muted-foreground">
+                            {dict.settings.drawioStyleDescription}{" "}
                             {drawioUi === "min"
-                                ? dict.settings.sketch
+                                ? dict.settings.minimal
-                                : dict.settings.minimal}
+                                : dict.settings.sketch}
-                        </Button>
+                        </p>
-                    </SettingItem>
+                    </div>
-
+                    <Button
-                    {/* Close Protection */}
+                        id="drawio-ui"
-                    <SettingItem
+                        variant="outline"
-                        label={dict.settings.closeProtection}
+                        size="sm"
-                        description={dict.settings.closeProtectionDescription}
+                        onClick={onToggleDrawioUi}
                     >
-                        <Switch
+                        {dict.settings.switchTo}{" "}
-                            id="close-protection"
+                        {drawioUi === "min"
-                            checked={closeProtection}
+                            ? dict.settings.sketch
-                            onCheckedChange={(checked) => {
+                            : dict.settings.minimal}
-                                setCloseProtection(checked)
+                    </Button>
-                                localStorage.setItem(
+                </div>
-                                    STORAGE_CLOSE_PROTECTION_KEY,
+
-                                    checked.toString(),
+                <div className="flex items-center justify-between">
-                                )
+                    <div className="space-y-0.5">
-                                onCloseProtectionChange?.(checked)
+                        <Label htmlFor="close-protection">
-                            }}
+                            {dict.settings.closeProtection}
-                        />
+                        </Label>
-                    </SettingItem>
+                        <p className="text-[0.8rem] text-muted-foreground">
+                            {dict.settings.closeProtectionDescription}
+                        </p>
+                    </div>
+                    <Switch
+                        id="close-protection"
+                        checked={closeProtection}
+                        onCheckedChange={(checked) => {
+                            setCloseProtection(checked)
+                            localStorage.setItem(
+                                STORAGE_CLOSE_PROTECTION_KEY,
+                                checked.toString(),
+                            )
+                            onCloseProtectionChange?.(checked)
+                        }}
+                    />
                 </div>
             </div>
-
+            <div className="pt-4 border-t border-border/50">
-            {/* Footer */}
+                <p className="text-[0.75rem] text-muted-foreground text-center">
-            <div className="px-6 py-4 border-t border-border-subtle bg-surface-1/50 rounded-b-2xl">
-                <p className="text-xs text-muted-foreground text-center">
                     Version {process.env.APP_VERSION}
                 </p>
             </div>
@@ -363,9 +328,9 @@ export function SettingsDialog(props: SettingsDialogProps) {
         <Dialog open={props.open} onOpenChange={props.onOpenChange}>
             <Suspense
                 fallback={
-                    <DialogContent className="sm:max-w-lg p-0">
+                    <DialogContent className="sm:max-w-md">
-                        <div className="h-80 flex items-center justify-center">
+                        <div className="h-64 flex items-center justify-center">
-                            <div className="animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full" />
+                            <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
                         </div>
                     </DialogContent>
                 }

components/ui/dialog.tsx

@@ -38,10 +38,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "fixed inset-0 z-50 bg-black/40 backdrop-blur-[2px]",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out",
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        "duration-200",
         className
       )}
       {...props}
@@ -60,32 +57,13 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          // Base styles
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          "fixed top-[50%] left-[50%] z-50 w-full",
-          "max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%]",
-          "grid gap-4 p-6",
-          // Refined visual treatment
-          "bg-surface-0 rounded-2xl border border-border-subtle shadow-dialog",
-          // Entry/exit animations
-          "data-[state=open]:animate-in data-[state=closed]:animate-out",
-          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-          "data-[state=closed]:zoom-out-[0.98] data-[state=open]:zoom-in-[0.98]",
-          "data-[state=closed]:slide-out-to-top-[2%] data-[state=open]:slide-in-from-top-[2%]",
-          "duration-200 sm:max-w-lg",
           className
         )}
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className={cn(
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
-          "absolute top-4 right-4 rounded-xl p-1.5",
-          "text-muted-foreground/60 hover:text-foreground",
-          "hover:bg-interactive-hover",
-          "transition-all duration-150",
-          "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-          "disabled:pointer-events-none",
-          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4"
-        )}>
           <XIcon />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
@@ -124,10 +102,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn(
+      className={cn("text-lg leading-none font-semibold", className)}
-        "text-xl font-semibold tracking-tight leading-tight",
-        className
-      )}
       {...props}
     />
   )
@@ -140,10 +115,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn(
+      className={cn("text-muted-foreground text-sm", className)}
-        "text-sm text-muted-foreground leading-relaxed",
-        className
-      )}
       {...props}
     />
   )

components/ui/input.tsx

@@ -8,30 +8,9 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        // Base styles
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "flex h-10 w-full min-w-0 rounded-xl px-3.5 py-2",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "border border-border-subtle bg-surface-1",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        "text-sm text-foreground",
-        // Placeholder
-        "placeholder:text-muted-foreground/60",
-        // Selection
-        "selection:bg-primary selection:text-primary-foreground",
-        // Transitions
-        "transition-all duration-150 ease-out",
-        // Hover state
-        "hover:border-border-default",
-        // Focus state - refined ring
-        "focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/10",
-        // File input
-        "file:text-foreground file:inline-flex file:h-7 file:border-0",
-        "file:bg-transparent file:text-sm file:font-medium",
-        // Disabled
-        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
-        // Invalid state
-        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
-        "dark:aria-invalid:ring-destructive/40",
-        // Dark mode background
-        "dark:bg-surface-1",
         className
       )}
       {...props}

electron/settings/index.html

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

electron/settings/settings.css

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

hooks/use-diagram-tool-handlers.ts

@@ -1,383 +0,0 @@
-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,14 +14,22 @@ export function register() {
         publicKey: process.env.LANGFUSE_PUBLIC_KEY,
         secretKey: process.env.LANGFUSE_SECRET_KEY,
         baseUrl: process.env.LANGFUSE_BASEURL,
-        // Whitelist approach: only export AI-related spans
+        // Filter out Next.js HTTP request spans so AI SDK spans become root traces
         shouldExportSpan: ({ otelSpan }) => {
             const spanName = otelSpan.name
-            // Only export AI SDK spans (ai.*) and our explicit "chat" wrapper
+            // Skip Next.js HTTP infrastructure spans
-            if (spanName === "chat" || spanName.startsWith("ai.")) {
+            if (
-                return true
+                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
             }
-            return false
+            return true
         },
     })
 

lib/ai-providers.ts

@@ -588,15 +588,13 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
         case "openai": {
             const apiKey = overrides?.apiKey || process.env.OPENAI_API_KEY
             const baseURL = overrides?.baseUrl || process.env.OPENAI_BASE_URL
-            if (baseURL) {
+            if (baseURL || overrides?.apiKey) {
-                // Custom base URL = third-party proxy, use Chat Completions API
+                const customOpenAI = createOpenAI({
-                // for compatibility (most proxies don't support /responses endpoint)
+                    apiKey,
-                const customOpenAI = createOpenAI({ apiKey, baseURL })
+                    ...(baseURL && { baseURL }),
-                model = customOpenAI.chat(modelId)
+                })
-            } else if (overrides?.apiKey) {
+                // Use Responses API (default) instead of .chat() to support reasoning
-                // Custom API key but official OpenAI endpoint, use Responses API
+                // for gpt-5, o1, o3, o4 models. Chat Completions API does not emit reasoning events.
-                // to support reasoning for gpt-5, o1, o3, o4 models
-                const customOpenAI = createOpenAI({ apiKey })
                 model = customOpenAI(modelId)
             } else {
                 model = openai(modelId)

lib/dynamo-quota-manager.ts

@@ -9,30 +9,6 @@ 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
@@ -73,67 +49,32 @@ export async function checkAndIncrementRequest(
         return { allowed: true }
     }
 
-    const today = getTodayInTimezone()
+    const today = new Date().toISOString().split("T")[0]
     const currentMinute = Math.floor(Date.now() / 60000).toString()
     const ttl = Math.floor(Date.now() / 1000) + 7 * 24 * 60 * 60
 
     try {
-        // First, try to reset counts if it's a new day (atomic day reset)
+        // Atomic check-and-increment with ConditionExpression
-        // This will succeed only if lastResetDate < today or doesn't exist
+        // This prevents race conditions by failing if limits are exceeded
-        try {
-            await client.send(
-                new UpdateItemCommand({
-                    TableName: TABLE,
-                    Key: { PK: { S: `IP#${ip}` } },
-                    // Reset all counts to 1/0 for the new day
-                    UpdateExpression: `
-                        SET lastResetDate = :today,
-                            dailyReqCount = :one,
-                            dailyTokenCount = :zero,
-                            lastMinute = :minute,
-                            tpmCount = :zero,
-                            #ttl = :ttl
-                    `,
-                    // Only succeed if it's a new day (or new item)
-                    ConditionExpression: `
-                        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
+                // Reset counts if new day/minute, then increment request count
                 UpdateExpression: `
-                    SET lastMinute = :minute,
+                    SET lastResetDate = :today,
+                        dailyReqCount = if_not_exists(dailyReqCount, :zero) + :one,
+                        dailyTokenCount = if_not_exists(dailyTokenCount, :zero),
+                        lastMinute = :minute,
                         tpmCount = if_not_exists(tpmCount, :zero),
                         #ttl = :ttl
-                    ADD dailyReqCount :one
                 `,
-                // Check all limits before allowing increment
+                // Atomic condition: only succeed if ALL limits pass
+                // Uses attribute_not_exists for new items, then checks limits for existing items
                 ConditionExpression: `
-                    lastResetDate = :today AND
+                    (attribute_not_exists(lastResetDate) OR lastResetDate < :today OR
-                    (attribute_not_exists(dailyReqCount) OR dailyReqCount < :reqLimit) AND
+                     ((attribute_not_exists(dailyReqCount) OR dailyReqCount < :reqLimit) AND
-                    (attribute_not_exists(dailyTokenCount) OR dailyTokenCount < :tokenLimit) 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": [{"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 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": [{"operation": "delete", "cell_id": "5"}]}
+- Example delete: {"operations": [{"type": "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>"}]}
+- 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>"}]}
 
 ⚠️ 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": [
-    {"operation": "update", "cell_id": "3", "new_xml": "<mxCell ...complete element...>"},
+    {"type": "update", "cell_id": "3", "new_xml": "<mxCell ...complete element...>"},
-    {"operation": "add", "cell_id": "new1", "new_xml": "<mxCell ...new element...>"},
+    {"type": "add", "cell_id": "new1", "new_xml": "<mxCell ...new element...>"},
-    {"operation": "delete", "cell_id": "5"}
+    {"type": "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": [{"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>"}]}
+{"operations": [{"type": "update", "cell_id": "3", "new_xml": "<mxCell id=\\"3\\" value=\\"New Label\\" style=\\"rounded=1;\\" vertex=\\"1\\" parent=\\"1\\">\\n  <mxGeometry x=\\"100\\" y=\\"100\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>"}]}
 \`\`\`
 
 Add new shape:
 \`\`\`json
-{"operations": [{"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>"}]}
+{"operations": [{"type": "add", "cell_id": "new1", "new_xml": "<mxCell id=\\"new1\\" value=\\"New Box\\" style=\\"rounded=1;fillColor=#dae8fc;\\" vertex=\\"1\\" parent=\\"1\\">\\n  <mxGeometry x=\\"400\\" y=\\"200\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>"}]}
 \`\`\`
 
 Delete cell:
 \`\`\`json
-{"operations": [{"operation": "delete", "cell_id": "5"}]}
+{"operations": [{"type": "delete", "cell_id": "5"}]}
 \`\`\`
 
 **Error Recovery:**

lib/types/model-config.ts

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

lib/use-quota-manager.tsx

@@ -18,39 +18,36 @@ export interface QuotaConfig {
  * This hook only provides UI feedback when limits are exceeded.
  */
 export function useQuotaManager(config: QuotaConfig): {
-    showQuotaLimitToast: (used?: number, limit?: number) => void
+    showQuotaLimitToast: () => void
-    showTokenLimitToast: (used?: number, limit?: number) => void
+    showTokenLimitToast: (used: number) => void
-    showTPMLimitToast: (limit?: number) => void
+    showTPMLimitToast: () => void
 } {
     const { dailyRequestLimit, dailyTokenLimit, tpmLimit } = config
     const dict = useDictionary()
 
     // Show quota limit toast (request-based)
-    const showQuotaLimitToast = useCallback(
+    const showQuotaLimitToast = useCallback(() => {
-        (used?: number, limit?: number) => {
+        toast.custom(
-            toast.custom(
+            (t) => (
-                (t) => (
+                <QuotaLimitToast
-                    <QuotaLimitToast
+                    used={dailyRequestLimit}
-                        used={used ?? dailyRequestLimit}
+                    limit={dailyRequestLimit}
-                        limit={limit ?? dailyRequestLimit}
+                    onDismiss={() => toast.dismiss(t)}
-                        onDismiss={() => toast.dismiss(t)}
+                />
-                    />
+            ),
-                ),
+            { duration: 15000 },
-                { duration: 15000 },
+        )
-            )
+    }, [dailyRequestLimit])
-        },
-        [dailyRequestLimit],
-    )
 
     // Show token limit toast
     const showTokenLimitToast = useCallback(
-        (used?: number, limit?: number) => {
+        (used: number) => {
             toast.custom(
                 (t) => (
                     <QuotaLimitToast
                         type="token"
-                        used={used ?? dailyTokenLimit}
+                        used={used}
-                        limit={limit ?? dailyTokenLimit}
+                        limit={dailyTokenLimit}
                         onDismiss={() => toast.dismiss(t)}
                     />
                 ),
@@ -61,21 +58,15 @@ export function useQuotaManager(config: QuotaConfig): {
     )
 
     // Show TPM limit toast
-    const showTPMLimitToast = useCallback(
+    const showTPMLimitToast = useCallback(() => {
-        (limit?: number) => {
+        const limitDisplay =
-            const effectiveLimit = limit ?? tpmLimit
+            tpmLimit >= 1000 ? `${tpmLimit / 1000}k` : String(tpmLimit)
-            const limitDisplay =
+        const message = formatMessage(dict.quota.tpmMessageDetailed, {
-                effectiveLimit >= 1000
+            limit: limitDisplay,
-                    ? `${effectiveLimit / 1000}k`
+            seconds: 60,
-                    : String(effectiveLimit)
+        })
-            const message = formatMessage(dict.quota.tpmMessageDetailed, {
+        toast.error(message, { duration: 8000 })
-                limit: limitDisplay,
+    }, [tpmLimit, dict])
-                seconds: 60,
-            })
-            toast.error(message, { duration: 8000 })
-        },
-        [tpmLimit, dict],
-    )
 
     return {
         showQuotaLimitToast,

lib/user-id.ts

@@ -1,12 +0,0 @@
-/**
- * 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,32 +36,29 @@ 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.
- * Uses a robust approach that handles any LLM provider's wrapper tags
+ * Also handles function-calling wrapper tags that may be incorrectly included.
- * 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 {
-    const trimmed = xml?.trim() || ""
+    let trimmed = xml?.trim() || ""
     if (!trimmed) return false
 
-    // Find position of last complete mxCell ending (either /> or </mxCell>)
+    // Strip Anthropic function-calling wrapper tags if present
-    const lastSelfClose = trimmed.lastIndexOf("/>")
+    // These can leak into tool input due to AI SDK parsing issues
-    const lastMxCellClose = trimmed.lastIndexOf("</mxCell>")
+    // 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()
+    }
 
-    const lastValidEnd = Math.max(lastSelfClose, lastMxCellClose)
+    return trimmed.endsWith("/>") || trimmed.endsWith("</mxCell>")
-
-    // 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)
 }
 
 /**
@@ -265,21 +262,6 @@ 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")
@@ -324,20 +306,6 @@ 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
@@ -455,7 +423,7 @@ export function replaceNodes(currentXML: string, nodes: string): string {
 // ============================================================================
 
 export interface DiagramOperation {
-    operation: "update" | "add" | "delete"
+    type: "update" | "add" | "delete"
     cell_id: string
     new_xml?: string
 }
@@ -528,7 +496,7 @@ export function applyDiagramOperations(
 
     // Process each operation
     for (const op of operations) {
-        if (op.operation === "update") {
+        if (op.type === "update") {
             const existingCell = cellMap.get(op.cell_id)
             if (!existingCell) {
                 errors.push({
@@ -580,7 +548,7 @@ export function applyDiagramOperations(
 
             // Update the map with the new element
             cellMap.set(op.cell_id, importedNode)
-        } else if (op.operation === "add") {
+        } else if (op.type === "add") {
             // Check if ID already exists
             if (cellMap.has(op.cell_id)) {
                 errors.push({
@@ -632,7 +600,7 @@ export function applyDiagramOperations(
 
             // Add to map
             cellMap.set(op.cell_id, importedNode)
-        } else if (op.operation === "delete") {
+        } else if (op.type === "delete") {
             const existingCell = cellMap.get(op.cell_id)
             if (!existingCell) {
                 errors.push({
@@ -942,21 +910,6 @@ 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())) {
@@ -1062,8 +1015,8 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
         fixes.push("Removed quotes around color values in style")
     }
 
-    // 4. Fix unescaped < and > in attribute values
+    // 4. Fix unescaped < in attribute values
-    // < is required to be escaped, > is not strictly required but we escape for consistency
+    // This is tricky - we need to find < inside quoted attribute values
     const attrPattern = /(=\s*")([^"]*?)(<)([^"]*?)(")/g
     let attrMatch
     let hasUnescapedLt = false
@@ -1074,12 +1027,12 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
         }
     }
     if (hasUnescapedLt) {
-        // Replace < and > with &lt; and &gt; inside attribute values
+        // Replace < with &lt; inside attribute values
         fixed = fixed.replace(/=\s*"([^"]*)"/g, (_match, value) => {
-            const escaped = value.replace(/</g, "&lt;").replace(/>/g, "&gt;")
+            const escaped = value.replace(/</g, "&lt;")
             return `="${escaped}"`
         })
-        fixes.push("Escaped <> characters in attribute values")
+        fixes.push("Escaped < characters in attribute values")
     }
 
     // 5. Fix invalid character references (remove malformed ones)
@@ -1167,8 +1120,7 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
     }
 
     // 8c. Remove non-draw.io tags (after typo fixes so lowercase variants are fixed first)
-    // IMPORTANT: Only remove tags at the element level, NOT inside quoted attribute values
+    // Valid draw.io tags: mxfile, diagram, mxGraphModel, root, mxCell, mxGeometry, mxPoint, Array, Object
-    // Tags like <b>, <br> inside value="<b>text</b>" should be preserved (they're HTML content)
     const validDrawioTags = new Set([
         "mxfile",
         "diagram",
@@ -1181,59 +1133,25 @@ 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]
-        // Skip if this is a valid draw.io tag
+        if (!validDrawioTags.has(tagName)) {
-        if (validDrawioTags.has(tagName)) continue
+            foreignTags.add(tagName)
-        // 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) {
-    if (foreignTagPositions.length > 0) {
+        console.log(
-        // Remove tags from end to start to preserve indices
+            "[autoFixXml] Step 8c: Found foreign tags:",
-        foreignTagPositions.sort((a, b) => b.start - a.start)
+            Array.from(foreignTags),
-        for (const { start, end } of foreignTagPositions) {
+        )
-            fixed = fixed.slice(0, start) + fixed.slice(end)
+        for (const tag of foreignTags) {
+            // Remove opening tags (with or without attributes)
+            fixed = fixed.replace(new RegExp(`<${tag}[^>]*>`, "gi"), "")
+            // Remove closing tags
+            fixed = fixed.replace(new RegExp(`</${tag}>`, "gi"), "")
         }
         fixes.push(
             `Removed foreign tags: ${Array.from(foreignTags).join(", ")}`,
@@ -1284,7 +1202,6 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
 
     // 10b. Remove extra closing tags (more closes than opens)
     // Need to properly count self-closing tags (they don't need closing tags)
-    // IMPORTANT: Only count tags at element level, NOT inside quoted attribute values
     const tagCounts = new Map<
         string,
         { opens: number; closes: number; selfClosing: number }
@@ -1293,18 +1210,12 @@ 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 }

packages/mcp-server/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@next-ai-drawio/mcp-server",
-    "version": "0.1.6",
+    "version": "0.1.5",
     "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 {
-    operation: "update" | "add" | "delete"
+    type: "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.operation === "update") {
+        if (op.type === "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.operation === "add") {
+        } else if (op.type === "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.operation === "delete") {
+        } else if (op.type === "delete") {
             const existingCell = cellMap.get(op.cell_id)
             if (!existingCell) {
                 errors.push({

packages/mcp-server/src/index.ts

@@ -265,22 +265,14 @@ 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.\n\n" +
+            "For add/update, new_xml must be a complete mxCell element including mxGeometry.",
-            "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({
-                        operation: z
+                        type: z
                             .enum(["update", "add", "delete"])
-                            .describe(
+                            .describe("Operation type"),
-                                "Operation to perform: add, update, or delete",
-                            ),
                         cell_id: z.string().describe("The id of the mxCell"),
                         new_xml: z
                             .string()
@@ -364,13 +356,13 @@ server.registerTool(
                     )
                     if (fixed) {
                         log.info(
-                            `Operation ${op.operation} ${op.cell_id}: XML auto-fixed: ${fixes.join(", ")}`,
+                            `Operation ${op.type} ${op.cell_id}: XML auto-fixed: ${fixes.join(", ")}`,
                         )
                         return { ...op, new_xml: fixed }
                     }
                     if (!valid && error) {
                         log.warn(
-                            `Operation ${op.operation} ${op.cell_id}: XML validation failed: ${error}`,
+                            `Operation ${op.type} ${op.cell_id}: XML validation failed: ${error}`,
                         )
                     }
                 }

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

@@ -459,8 +459,7 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
         fixes.push("Removed quotes around color values in style")
     }
 
-    // 10. Fix unescaped < and > in attribute values
+    // 10. Fix unescaped < 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
@@ -472,10 +471,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;").replace(/>/g, "&gt;")
+            const escaped = value.replace(/</g, "&lt;")
             return `="${escaped}"`
         })
-        fixes.push("Escaped <> characters in attribute values")
+        fixes.push("Escaped < characters in attribute values")
     }
 
     // 11. Fix invalid hex character references
@@ -904,30 +903,24 @@ 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 {
-    const trimmed = xml?.trim() || ""
+    let trimmed = xml?.trim() || ""
     if (!trimmed) return false
 
-    // Find position of last complete mxCell ending (either /> or </mxCell>)
+    // Strip wrapper tags if present
-    const lastSelfClose = trimmed.lastIndexOf("/>")
+    let prev = ""
-    const lastMxCellClose = trimmed.lastIndexOf("</mxCell>")
+    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()
+    }
 
-    const lastValidEnd = Math.max(lastSelfClose, lastMxCellClose)
+    return trimmed.endsWith("/>") || trimmed.endsWith("</mxCell>")
-
-    // 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)
 }

renovate.json

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

scripts/test-diagram-operations.mjs

@@ -22,7 +22,7 @@ function applyDiagramOperations(xmlContent, operations) {
             result: xmlContent,
             errors: [
                 {
-                    operation: "update",
+                    type: "update",
                     cellId: "",
                     message: `XML parse error: ${parseError.textContent}`,
                 },
@@ -36,7 +36,7 @@ function applyDiagramOperations(xmlContent, operations) {
             result: xmlContent,
             errors: [
                 {
-                    operation: "update",
+                    type: "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.operation === "update") {
+        if (op.type === "update") {
             const existingCell = cellMap.get(op.cell_id)
             if (!existingCell) {
                 errors.push({
-                    operation: "update",
+                    type: "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({
-                    operation: "update",
+                    type: "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({
-                    operation: "update",
+                    type: "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({
-                    operation: "update",
+                    type: "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.operation === "add") {
+        } else if (op.type === "add") {
             if (cellMap.has(op.cell_id)) {
                 errors.push({
-                    operation: "add",
+                    type: "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({
-                    operation: "add",
+                    type: "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({
-                    operation: "add",
+                    type: "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({
-                    operation: "add",
+                    type: "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.operation === "delete") {
+        } else if (op.type === "delete") {
             const existingCell = cellMap.get(op.cell_id)
             if (!existingCell) {
                 errors.push({
-                    operation: "delete",
+                    type: "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, [
         {
-            operation: "update",
+            type: "update",
             cell_id: "2",
             new_xml:
                 '<mxCell id="2" value="Updated Box A" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="120" height="60" as="geometry"/></mxCell>',
@@ -224,7 +224,7 @@ test("Update operation changes cell value", () => {
 test("Update operation fails for non-existent cell", () => {
     const { errors } = applyDiagramOperations(sampleXml, [
         {
-            operation: "update",
+            type: "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, [
         {
-            operation: "update",
+            type: "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, [
         {
-            operation: "add",
+            type: "add",
             cell_id: "new1",
             new_xml:
                 '<mxCell id="new1" value="New Box" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="500" y="100" width="120" height="60" as="geometry"/></mxCell>',
@@ -274,7 +274,7 @@ test("Add operation creates new cell", () => {
 test("Add operation fails for duplicate ID", () => {
     const { errors } = applyDiagramOperations(sampleXml, [
         {
-            operation: "add",
+            type: "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, [
         {
-            operation: "add",
+            type: "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, [
-        { operation: "delete", cell_id: "3" },
+        { type: "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, [
-        { operation: "delete", cell_id: "999" },
+        { type: "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, [
         {
-            operation: "update",
+            type: "update",
             cell_id: "2",
             new_xml:
                 '<mxCell id="2" value="Updated" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="120" height="60" as="geometry"/></mxCell>',
         },
         {
-            operation: "add",
+            type: "add",
             cell_id: "new1",
             new_xml:
                 '<mxCell id="new1" value="Added" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="500" y="100" width="120" height="60" as="geometry"/></mxCell>',
         },
-        { operation: "delete", cell_id: "3" },
+        { type: "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", [
-        { operation: "delete", cell_id: "1" },
+        { type: "delete", cell_id: "1" },
     ])
     assert(errors.length === 1, "Should have one error")
 })
 
 test("Missing root element returns error", () => {
     const { errors } = applyDiagramOperations("<mxfile></mxfile>", [
-        { operation: "delete", cell_id: "1" },
+        { type: "delete", cell_id: "1" },
     ])
     assert(errors.length === 1, "Should have one error")
     assert(