style: auto-format with Biome

- Add GitHub Action to auto-format PRs with Biome
- Fix formatting in app/manifest.ts and scripts/test-diagram-operations.mjs

.github/workflows/auto-format.yml

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

app/manifest.ts

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

app/page.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { DrawIoEmbed } from "react-drawio"
 import type { ImperativePanelHandle } from "react-resizable-panels"
 import ChatPanel from "@/components/chat-panel"
@@ -21,6 +21,8 @@ export default function Home() {
         onDrawioLoad,
         resetDrawioReady,
         saveDiagramToStorage,
+        showSaveDialog,
+        setShowSaveDialog,
     } = useDiagram()
     const [isMobile, setIsMobile] = useState(false)
     const [isChatVisible, setIsChatVisible] = useState(true)
@@ -30,6 +32,29 @@ export default function Home() {
     const [closeProtection, setCloseProtection] = useState(false)
 
     const chatPanelRef = useRef<ImperativePanelHandle>(null)
+    const isSavingRef = useRef(false)
+    const mouseOverDrawioRef = useRef(false)
+    const isMobileRef = useRef(false)
+
+    // Reset saving flag when dialog closes (with delay to ignore lingering save events from draw.io)
+    useEffect(() => {
+        if (!showSaveDialog) {
+            const timeout = setTimeout(() => {
+                isSavingRef.current = false
+            }, 1000)
+            return () => clearTimeout(timeout)
+        }
+    }, [showSaveDialog])
+
+    // Handle save from draw.io's built-in save button
+    // Note: draw.io sends save events for various reasons (focus changes, etc.)
+    // We use mouse position to determine if the user is interacting with draw.io
+    const handleDrawioSave = useCallback(() => {
+        if (!mouseOverDrawioRef.current) return
+        if (isSavingRef.current) return
+        isSavingRef.current = true
+        setShowSaveDialog(true)
+    }, [setShowSaveDialog])
 
     // Load preferences from localStorage after mount
     useEffect(() => {
@@ -78,16 +103,32 @@ export default function Home() {
         resetDrawioReady()
     }
 
-    // Check mobile
+    // Check mobile - save diagram and reset draw.io before crossing breakpoint
+    const isInitialRenderRef = useRef(true)
     useEffect(() => {
         const checkMobile = () => {
-            setIsMobile(window.innerWidth < 768)
+            const newIsMobile = window.innerWidth < 768
+            // If crossing the breakpoint (not initial render), save diagram and reset draw.io
+            if (
+                !isInitialRenderRef.current &&
+                newIsMobile !== isMobileRef.current
+            ) {
+                // Save diagram before remounting (fire and forget)
+                saveDiagramToStorage().catch(() => {
+                    // Ignore timeout errors during resize
+                })
+                // Reset draw.io ready state so onLoad triggers again after remount
+                resetDrawioReady()
+            }
+            isMobileRef.current = newIsMobile
+            isInitialRenderRef.current = false
+            setIsMobile(newIsMobile)
         }
 
         checkMobile()
         window.addEventListener("resize", checkMobile)
         return () => window.removeEventListener("resize", checkMobile)
-    }, [])
+    }, [saveDiagramToStorage, resetDrawioReady])
 
     const toggleChatPanel = () => {
         const panel = chatPanelRef.current
@@ -133,7 +174,6 @@ export default function Home() {
         <div className="h-screen bg-background relative overflow-hidden">
             <ResizablePanelGroup
                 id="main-panel-group"
-                key={isMobile ? "mobile" : "desktop"}
                 direction={isMobile ? "vertical" : "horizontal"}
                 className="h-full"
             >
@@ -147,6 +187,12 @@ export default function Home() {
                         className={`h-full relative ${
                             isMobile ? "p-1" : "p-2"
                         }`}
+                        onMouseEnter={() => {
+                            mouseOverDrawioRef.current = true
+                        }}
+                        onMouseLeave={() => {
+                            mouseOverDrawioRef.current = false
+                        }}
                     >
                         <div className="h-full rounded-xl overflow-hidden shadow-soft-lg border border-border/30">
                             {isLoaded ? (
@@ -155,6 +201,7 @@ export default function Home() {
                                     ref={drawioRef}
                                     onExport={handleDiagramExport}
                                     onLoad={onDrawioLoad}
+                                    onSave={handleDrawioSave}
                                     baseUrl={drawioBaseUrl}
                                     urlParameters={{
                                         ui: drawioUi,
@@ -178,6 +225,7 @@ export default function Home() {
 
                 {/* Chat Panel */}
                 <ResizablePanel
+                    key={isMobile ? "mobile" : "desktop"}
                     id="chat-panel"
                     ref={chatPanelRef}
                     defaultSize={isMobile ? 50 : 33}

components/chat-input.tsx

@@ -155,12 +155,16 @@ export function ChatInput({
     minimalStyle = false,
     onMinimalStyleChange = () => {},
 }: ChatInputProps) {
-    const { diagramHistory, saveDiagramToFile } = useDiagram()
+    const {
+        diagramHistory,
+        saveDiagramToFile,
+        showSaveDialog,
+        setShowSaveDialog,
+    } = useDiagram()
     const textareaRef = useRef<HTMLTextAreaElement>(null)
     const fileInputRef = useRef<HTMLInputElement>(null)
     const [isDragging, setIsDragging] = useState(false)
     const [showClearDialog, setShowClearDialog] = useState(false)
-    const [showSaveDialog, setShowSaveDialog] = useState(false)
 
     // Allow retry when there's an error (even if status is still "streaming" or "submitted")
     const isDisabled =
@@ -331,7 +335,7 @@ export function ChatInput({
                 {/* Action bar */}
                 <div className="flex items-center justify-between px-3 py-2 border-t border-border/50">
                     {/* Left actions */}
-                    <div className="flex items-center gap-1">
+                    <div className="flex items-center gap-1 overflow-x-hidden">
                         <ButtonWithTooltip
                             type="button"
                             variant="ghost"
@@ -382,7 +386,7 @@ export function ChatInput({
                     </div>
 
                     {/* Right actions */}
-                    <div className="flex items-center gap-1">
+                    <div className="flex items-center gap-1 overflow-hidden justify-end">
                         <ButtonWithTooltip
                             type="button"
                             variant="ghost"

components/chat-panel.tsx

@@ -35,6 +35,9 @@ const STORAGE_XML_SNAPSHOTS_KEY = "next-ai-draw-io-xml-snapshots"
 const STORAGE_SESSION_ID_KEY = "next-ai-draw-io-session-id"
 export const STORAGE_DIAGRAM_XML_KEY = "next-ai-draw-io-diagram-xml"
 
+// sessionStorage keys
+const SESSION_STORAGE_INPUT_KEY = "next-ai-draw-io-input"
+
 // Type for message parts (tool calls and their states)
 interface MessagePart {
     type: string
@@ -106,7 +109,6 @@ export default function ChatPanel({
         resolverRef,
         chartXML,
         clearDiagram,
-        isDrawioReady,
     } = useDiagram()
 
     const onFetchChart = (saveToHistory = true) => {
@@ -148,6 +150,14 @@ export default function ChatPanel({
     const [showNewChatDialog, setShowNewChatDialog] = useState(false)
     const [minimalStyle, setMinimalStyle] = useState(false)
 
+    // Restore input from sessionStorage on mount (when ChatPanel remounts due to key change)
+    useEffect(() => {
+        const savedInput = sessionStorage.getItem(SESSION_STORAGE_INPUT_KEY)
+        if (savedInput) {
+            setInput(savedInput)
+        }
+    }, [])
+
     // Check config on mount
     useEffect(() => {
         fetch("/api/config")
@@ -210,9 +220,6 @@ export default function ChatPanel({
     const localStorageDebounceRef = useRef<ReturnType<
         typeof setTimeout
     > | null>(null)
-    const xmlStorageDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(
-        null,
-    )
     const LOCAL_STORAGE_DEBOUNCE_MS = 1000 // Save at most once per second
 
     const {
@@ -725,47 +732,6 @@ Continue from EXACTLY where you stopped.`,
         }
     }, [setMessages])
 
-    // Restore diagram XML when DrawIO becomes ready
-    const hasDiagramRestoredRef = useRef(false)
-    const [canSaveDiagram, setCanSaveDiagram] = useState(false)
-    useEffect(() => {
-        // Reset restore flag when DrawIO is not ready (e.g., theme/UI change remounts it)
-        if (!isDrawioReady) {
-            hasDiagramRestoredRef.current = false
-            setCanSaveDiagram(false)
-            return
-        }
-        if (hasDiagramRestoredRef.current) return
-        hasDiagramRestoredRef.current = true
-
-        try {
-            const savedDiagramXml = localStorage.getItem(
-                STORAGE_DIAGRAM_XML_KEY,
-            )
-            console.log(
-                "[ChatPanel] Restoring diagram, has saved XML:",
-                !!savedDiagramXml,
-            )
-            if (savedDiagramXml) {
-                console.log(
-                    "[ChatPanel] Loading saved diagram XML, length:",
-                    savedDiagramXml.length,
-                )
-                // Skip validation for trusted saved diagrams
-                onDisplayChart(savedDiagramXml, true)
-                chartXMLRef.current = savedDiagramXml
-            }
-        } catch (error) {
-            console.error("Failed to restore diagram from localStorage:", error)
-        }
-
-        // Allow saving after restore is complete
-        setTimeout(() => {
-            console.log("[ChatPanel] Enabling diagram save")
-            setCanSaveDiagram(true)
-        }, 500)
-    }, [isDrawioReady, onDisplayChart])
-
     // Save messages to localStorage whenever they change (debounced to prevent blocking during streaming)
     useEffect(() => {
         if (!hasRestoredRef.current) return
@@ -795,28 +761,6 @@ Continue from EXACTLY where you stopped.`,
         }
     }, [messages])
 
-    // Save diagram XML to localStorage whenever it changes (debounced)
-    useEffect(() => {
-        if (!canSaveDiagram) return
-        if (!chartXML || chartXML.length <= 300) return
-
-        // Clear any pending save
-        if (xmlStorageDebounceRef.current) {
-            clearTimeout(xmlStorageDebounceRef.current)
-        }
-
-        // Debounce: save after 1 second of no changes
-        xmlStorageDebounceRef.current = setTimeout(() => {
-            localStorage.setItem(STORAGE_DIAGRAM_XML_KEY, chartXML)
-        }, LOCAL_STORAGE_DEBOUNCE_MS)
-
-        return () => {
-            if (xmlStorageDebounceRef.current) {
-                clearTimeout(xmlStorageDebounceRef.current)
-            }
-        }
-    }, [chartXML, canSaveDiagram])
-
     // Save XML snapshots to localStorage whenever they change
     const saveXmlSnapshots = useCallback(() => {
         try {
@@ -916,6 +860,7 @@ Continue from EXACTLY where you stopped.`,
                         },
                     ] as any)
                     setInput("")
+                    sessionStorage.removeItem(SESSION_STORAGE_INPUT_KEY)
                     setFiles([])
                     return
                 }
@@ -963,6 +908,7 @@ Continue from EXACTLY where you stopped.`,
 
                 // Token count is tracked in onFinish with actual server usage
                 setInput("")
+                sessionStorage.removeItem(SESSION_STORAGE_INPUT_KEY)
                 setFiles([])
             } catch (error) {
                 console.error("Error fetching chart data:", error)
@@ -985,6 +931,7 @@ Continue from EXACTLY where you stopped.`,
             localStorage.removeItem(STORAGE_XML_SNAPSHOTS_KEY)
             localStorage.removeItem(STORAGE_DIAGRAM_XML_KEY)
             localStorage.setItem(STORAGE_SESSION_ID_KEY, newSessionId)
+            sessionStorage.removeItem(SESSION_STORAGE_INPUT_KEY)
             toast.success("Started a fresh chat")
         } catch (error) {
             console.error("Failed to clear localStorage:", error)
@@ -999,9 +946,14 @@ Continue from EXACTLY where you stopped.`,
     const handleInputChange = (
         e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
     ) => {
+        saveInputToSessionStorage(e.target.value)
         setInput(e.target.value)
     }
 
+    const saveInputToSessionStorage = (input: string) => {
+        sessionStorage.setItem(SESSION_STORAGE_INPUT_KEY, input)
+    }
+
     // Helper functions for message actions (regenerate/edit)
     // Extract previous XML snapshot before a given message index
     const getPreviousXml = (beforeIndex: number): string => {
@@ -1277,14 +1229,14 @@ Continue from EXACTLY where you stopped.`,
                 className={`${isMobile ? "px-3 py-2" : "px-5 py-4"} border-b border-border/50`}
             >
                 <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 overflow-x-hidden">
                         <div className="flex items-center gap-2">
                             <Image
                                 src="/favicon.ico"
                                 alt="Next AI Drawio"
                                 width={isMobile ? 24 : 28}
                                 height={isMobile ? 24 : 28}
-                                className="rounded"
+                                className="rounded flex-shrink-0"
                             />
                             <h1
                                 className={`${isMobile ? "text-sm" : "text-base"} font-semibold tracking-tight whitespace-nowrap`}
@@ -1319,7 +1271,7 @@ Continue from EXACTLY where you stopped.`,
                             </Link>
                         )}
                     </div>
-                    <div className="flex items-center gap-1">
+                    <div className="flex items-center gap-1 justify-end overflow-x-hidden">
                         <ButtonWithTooltip
                             tooltipContent="Start fresh chat"
                             variant="ghost"

components/save-dialog.tsx

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

contexts/diagram-context.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import type React from "react"
-import { createContext, useContext, useRef, useState } from "react"
+import { createContext, useContext, useEffect, useRef, useState } from "react"
 import type { DrawIoEmbedRef } from "react-drawio"
 import { STORAGE_DIAGRAM_XML_KEY } from "@/components/chat-panel"
 import type { ExportFormat } from "@/components/save-dialog"
@@ -27,6 +27,8 @@ interface DiagramContextType {
     isDrawioReady: boolean
     onDrawioLoad: () => void
     resetDrawioReady: () => void
+    showSaveDialog: boolean
+    setShowSaveDialog: (show: boolean) => void
 }
 
 const DiagramContext = createContext<DiagramContextType | undefined>(undefined)
@@ -38,11 +40,15 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         { svg: string; xml: string }[]
     >([])
     const [isDrawioReady, setIsDrawioReady] = useState(false)
+    const [canSaveDiagram, setCanSaveDiagram] = useState(false)
+    const [showSaveDialog, setShowSaveDialog] = useState(false)
     const hasCalledOnLoadRef = useRef(false)
     const drawioRef = useRef<DrawIoEmbedRef | null>(null)
     const resolverRef = useRef<((value: string) => void) | null>(null)
     // Track if we're expecting an export for history (user-initiated)
     const expectHistoryExportRef = useRef<boolean>(false)
+    // Track if diagram has been restored from localStorage
+    const hasDiagramRestoredRef = useRef<boolean>(false)
 
     const onDrawioLoad = () => {
         // Only set ready state once to prevent infinite loops
@@ -58,6 +64,48 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         setIsDrawioReady(false)
     }
 
+    // Restore diagram XML when DrawIO becomes ready
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- loadDiagram uses refs internally and is stable
+    useEffect(() => {
+        // Reset restore flag when DrawIO is not ready (e.g., theme/UI change remounts it)
+        if (!isDrawioReady) {
+            hasDiagramRestoredRef.current = false
+            setCanSaveDiagram(false)
+            return
+        }
+        if (hasDiagramRestoredRef.current) return
+        hasDiagramRestoredRef.current = true
+
+        try {
+            const savedDiagramXml = localStorage.getItem(
+                STORAGE_DIAGRAM_XML_KEY,
+            )
+            if (savedDiagramXml) {
+                // Skip validation for trusted saved diagrams
+                loadDiagram(savedDiagramXml, true)
+            }
+        } catch (error) {
+            console.error("Failed to restore diagram from localStorage:", error)
+        }
+
+        // Allow saving after restore is complete
+        setTimeout(() => {
+            setCanSaveDiagram(true)
+        }, 500)
+    }, [isDrawioReady])
+
+    // Save diagram XML to localStorage whenever it changes (debounced)
+    useEffect(() => {
+        if (!canSaveDiagram) return
+        if (!chartXML || chartXML.length <= 300) return
+
+        const timeoutId = setTimeout(() => {
+            localStorage.setItem(STORAGE_DIAGRAM_XML_KEY, chartXML)
+        }, 1000)
+
+        return () => clearTimeout(timeoutId)
+    }, [chartXML, canSaveDiagram])
+
     // Track if we're expecting an export for file save (stores raw export data)
     const saveResolverRef = useRef<{
         resolver: ((data: string) => void) | null
@@ -309,6 +357,8 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
                 isDrawioReady,
                 onDrawioLoad,
                 resetDrawioReady,
+                showSaveDialog,
+                setShowSaveDialog,
             }}
         >
             {children}

docs/ai-providers.md

@@ -140,17 +140,36 @@ OLLAMA_BASE_URL=http://localhost:11434
 
 Vercel AI Gateway provides unified access to multiple AI providers through a single API key. This simplifies authentication and allows you to switch between providers without managing multiple API keys.
 
+**Basic Usage (Vercel-hosted Gateway):**
+
 ```bash
 AI_GATEWAY_API_KEY=your_gateway_api_key
 AI_MODEL=openai/gpt-4o
 ```
 
+**Custom Gateway URL (for local development or self-hosted Gateway):**
+
+```bash
+AI_GATEWAY_API_KEY=your_custom_api_key
+AI_GATEWAY_BASE_URL=https://your-custom-gateway.com/v1/ai
+AI_MODEL=openai/gpt-4o
+```
+
 Model format uses `provider/model` syntax:
 
 -   `openai/gpt-4o` - OpenAI GPT-4o
 -   `anthropic/claude-sonnet-4-5` - Anthropic Claude Sonnet 4.5
 -   `google/gemini-2.0-flash` - Google Gemini 2.0 Flash
 
+**Configuration notes:**
+
+-   If `AI_GATEWAY_BASE_URL` is not set, the default Vercel Gateway URL (`https://ai-gateway.vercel.sh/v1/ai`) is used
+-   Custom base URL is useful for:
+    -   Local development with a custom Gateway instance
+    -   Self-hosted AI Gateway deployments
+    -   Enterprise proxy configurations
+-   When using a custom base URL, you must also provide `AI_GATEWAY_API_KEY`
+
 Get your API key from the [Vercel AI Gateway dashboard](https://vercel.com/ai-gateway).
 
 ## Auto-Detection

env.example

@@ -72,6 +72,8 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 # Get your API key from: https://vercel.com/ai-gateway
 # Model format: "provider/model" e.g., "openai/gpt-4o", "anthropic/claude-sonnet-4-5"
 # AI_GATEWAY_API_KEY=...
+# AI_GATEWAY_BASE_URL=https://your-custom-gateway.com/v1/ai  # Optional: Custom Gateway URL (for local dev or self-hosted Gateway)
+#                                                              # If not set, uses Vercel default: https://ai-gateway.vercel.sh/v1/ai
 
 # Langfuse Observability (Optional)
 # Enable LLM tracing and analytics - https://langfuse.com

lib/ai-providers.ts

@@ -2,7 +2,7 @@ import { createAmazonBedrock } from "@ai-sdk/amazon-bedrock"
 import { createAnthropic } from "@ai-sdk/anthropic"
 import { azure, createAzure } from "@ai-sdk/azure"
 import { createDeepSeek, deepseek } from "@ai-sdk/deepseek"
-import { gateway } from "@ai-sdk/gateway"
+import { createGateway, gateway } from "@ai-sdk/gateway"
 import { createGoogleGenerativeAI, google } from "@ai-sdk/google"
 import { createOpenAI, openai } from "@ai-sdk/openai"
 import { fromNodeProviderChain } from "@aws-sdk/credential-providers"
@@ -683,7 +683,20 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
             // Vercel AI Gateway - unified access to multiple AI providers
             // Model format: "provider/model" e.g., "openai/gpt-4o", "anthropic/claude-sonnet-4-5"
             // See: https://vercel.com/ai-gateway
-            model = gateway(modelId)
+            const apiKey = overrides?.apiKey || process.env.AI_GATEWAY_API_KEY
+            const baseURL =
+                overrides?.baseUrl || process.env.AI_GATEWAY_BASE_URL
+            // Only use custom configuration if explicitly set (local dev or custom Gateway)
+            // Otherwise undefined → AI SDK uses Vercel default (https://ai-gateway.vercel.sh/v1/ai) + OIDC
+            if (baseURL || overrides?.apiKey) {
+                const customGateway = createGateway({
+                    apiKey,
+                    ...(baseURL && { baseURL }),
+                })
+                model = customGateway(modelId)
+            } else {
+                model = gateway(modelId)
+            }
             break
         }
 

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.4.2",
+    "version": "0.4.3",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "next-ai-draw-io",
-            "version": "0.4.2",
+            "version": "0.4.3",
             "license": "Apache-2.0",
             "dependencies": {
                 "@ai-sdk/amazon-bedrock": "^3.0.70",
@@ -63,7 +63,7 @@
             },
             "devDependencies": {
                 "@anthropic-ai/tokenizer": "^0.0.4",
-                "@biomejs/biome": "2.3.8",
+                "@biomejs/biome": "^2.3.8",
                 "@tailwindcss/postcss": "^4",
                 "@tailwindcss/typography": "^0.5.19",
                 "@types/node": "^20",

package.json

@@ -73,7 +73,7 @@
     },
     "devDependencies": {
         "@anthropic-ai/tokenizer": "^0.0.4",
-        "@biomejs/biome": "2.3.8",
+        "@biomejs/biome": "^2.3.8",
         "@tailwindcss/postcss": "^4",
         "@tailwindcss/typography": "^0.5.19",
         "@types/node": "^20",

scripts/test-diagram-operations.mjs

@@ -20,7 +20,13 @@ function applyDiagramOperations(xmlContent, operations) {
     if (parseError) {
         return {
             result: xmlContent,
-            errors: [{ type: "update", cellId: "", message: `XML parse error: ${parseError.textContent}` }],
+            errors: [
+                {
+                    type: "update",
+                    cellId: "",
+                    message: `XML parse error: ${parseError.textContent}`,
+                },
+            ],
         }
     }
 
@@ -28,7 +34,13 @@ function applyDiagramOperations(xmlContent, operations) {
     if (!root) {
         return {
             result: xmlContent,
-            errors: [{ type: "update", cellId: "", message: "Could not find <root> element in XML" }],
+            errors: [
+                {
+                    type: "update",
+                    cellId: "",
+                    message: "Could not find <root> element in XML",
+                },
+            ],
         }
     }
 
@@ -42,22 +54,41 @@ function applyDiagramOperations(xmlContent, operations) {
         if (op.type === "update") {
             const existingCell = cellMap.get(op.cell_id)
             if (!existingCell) {
-                errors.push({ type: "update", cellId: op.cell_id, message: `Cell with id="${op.cell_id}" not found` })
+                errors.push({
+                    type: "update",
+                    cellId: op.cell_id,
+                    message: `Cell with id="${op.cell_id}" not found`,
+                })
                 continue
             }
             if (!op.new_xml) {
-                errors.push({ type: "update", cellId: op.cell_id, message: "new_xml is required for update operation" })
+                errors.push({
+                    type: "update",
+                    cellId: op.cell_id,
+                    message: "new_xml is required for update operation",
+                })
                 continue
             }
-            const newDoc = parser.parseFromString(`<wrapper>${op.new_xml}</wrapper>`, "text/xml")
+            const newDoc = parser.parseFromString(
+                `<wrapper>${op.new_xml}</wrapper>`,
+                "text/xml",
+            )
             const newCell = newDoc.querySelector("mxCell")
             if (!newCell) {
-                errors.push({ type: "update", cellId: op.cell_id, message: "new_xml must contain an mxCell element" })
+                errors.push({
+                    type: "update",
+                    cellId: op.cell_id,
+                    message: "new_xml must contain an mxCell element",
+                })
                 continue
             }
             const newCellId = newCell.getAttribute("id")
             if (newCellId !== op.cell_id) {
-                errors.push({ type: "update", cellId: op.cell_id, message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"` })
+                errors.push({
+                    type: "update",
+                    cellId: op.cell_id,
+                    message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"`,
+                })
                 continue
             }
             const importedNode = doc.importNode(newCell, true)
@@ -65,22 +96,41 @@ function applyDiagramOperations(xmlContent, operations) {
             cellMap.set(op.cell_id, importedNode)
         } else if (op.type === "add") {
             if (cellMap.has(op.cell_id)) {
-                errors.push({ type: "add", cellId: op.cell_id, message: `Cell with id="${op.cell_id}" already exists` })
+                errors.push({
+                    type: "add",
+                    cellId: op.cell_id,
+                    message: `Cell with id="${op.cell_id}" already exists`,
+                })
                 continue
             }
             if (!op.new_xml) {
-                errors.push({ type: "add", cellId: op.cell_id, message: "new_xml is required for add operation" })
+                errors.push({
+                    type: "add",
+                    cellId: op.cell_id,
+                    message: "new_xml is required for add operation",
+                })
                 continue
             }
-            const newDoc = parser.parseFromString(`<wrapper>${op.new_xml}</wrapper>`, "text/xml")
+            const newDoc = parser.parseFromString(
+                `<wrapper>${op.new_xml}</wrapper>`,
+                "text/xml",
+            )
             const newCell = newDoc.querySelector("mxCell")
             if (!newCell) {
-                errors.push({ type: "add", cellId: op.cell_id, message: "new_xml must contain an mxCell element" })
+                errors.push({
+                    type: "add",
+                    cellId: op.cell_id,
+                    message: "new_xml must contain an mxCell element",
+                })
                 continue
             }
             const newCellId = newCell.getAttribute("id")
             if (newCellId !== op.cell_id) {
-                errors.push({ type: "add", cellId: op.cell_id, message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"` })
+                errors.push({
+                    type: "add",
+                    cellId: op.cell_id,
+                    message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"`,
+                })
                 continue
             }
             const importedNode = doc.importNode(newCell, true)
@@ -89,7 +139,11 @@ function applyDiagramOperations(xmlContent, operations) {
         } else if (op.type === "delete") {
             const existingCell = cellMap.get(op.cell_id)
             if (!existingCell) {
-                errors.push({ type: "delete", cellId: op.cell_id, message: `Cell with id="${op.cell_id}" not found` })
+                errors.push({
+                    type: "delete",
+                    cellId: op.cell_id,
+                    message: `Cell with id="${op.cell_id}" not found`,
+                })
                 continue
             }
             existingCell.parentNode?.removeChild(existingCell)
@@ -149,28 +203,52 @@ test("Update operation changes cell value", () => {
         {
             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>',
+            new_xml:
+                '<mxCell id="2" value="Updated Box A" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="120" height="60" as="geometry"/></mxCell>',
         },
     ])
-    assert(errors.length === 0, `Expected no errors, got: ${JSON.stringify(errors)}`)
-    assert(result.includes('value="Updated Box A"'), "Updated value should be in result")
-    assert(!result.includes('value="Box A"'), "Old value should not be in result")
+    assert(
+        errors.length === 0,
+        `Expected no errors, got: ${JSON.stringify(errors)}`,
+    )
+    assert(
+        result.includes('value="Updated Box A"'),
+        "Updated value should be in result",
+    )
+    assert(
+        !result.includes('value="Box A"'),
+        "Old value should not be in result",
+    )
 })
 
 test("Update operation fails for non-existent cell", () => {
     const { errors } = applyDiagramOperations(sampleXml, [
-        { type: "update", cell_id: "999", new_xml: '<mxCell id="999" value="Test"/>' },
+        {
+            type: "update",
+            cell_id: "999",
+            new_xml: '<mxCell id="999" value="Test"/>',
+        },
     ])
     assert(errors.length === 1, "Should have one error")
-    assert(errors[0].message.includes("not found"), "Error should mention not found")
+    assert(
+        errors[0].message.includes("not found"),
+        "Error should mention not found",
+    )
 })
 
 test("Update operation fails on ID mismatch", () => {
     const { errors } = applyDiagramOperations(sampleXml, [
-        { type: "update", cell_id: "2", new_xml: '<mxCell id="WRONG" value="Test"/>' },
+        {
+            type: "update",
+            cell_id: "2",
+            new_xml: '<mxCell id="WRONG" value="Test"/>',
+        },
     ])
     assert(errors.length === 1, "Should have one error")
-    assert(errors[0].message.includes("ID mismatch"), "Error should mention ID mismatch")
+    assert(
+        errors[0].message.includes("ID mismatch"),
+        "Error should mention ID mismatch",
+    )
 })
 
 test("Add operation creates new cell", () => {
@@ -178,41 +256,72 @@ test("Add operation creates new cell", () => {
         {
             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>',
+            new_xml:
+                '<mxCell id="new1" value="New Box" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="500" y="100" width="120" height="60" as="geometry"/></mxCell>',
         },
     ])
-    assert(errors.length === 0, `Expected no errors, got: ${JSON.stringify(errors)}`)
+    assert(
+        errors.length === 0,
+        `Expected no errors, got: ${JSON.stringify(errors)}`,
+    )
     assert(result.includes('id="new1"'), "New cell should be in result")
-    assert(result.includes('value="New Box"'), "New cell value should be in result")
+    assert(
+        result.includes('value="New Box"'),
+        "New cell value should be in result",
+    )
 })
 
 test("Add operation fails for duplicate ID", () => {
     const { errors } = applyDiagramOperations(sampleXml, [
-        { type: "add", cell_id: "2", new_xml: '<mxCell id="2" value="Duplicate"/>' },
+        {
+            type: "add",
+            cell_id: "2",
+            new_xml: '<mxCell id="2" value="Duplicate"/>',
+        },
     ])
     assert(errors.length === 1, "Should have one error")
-    assert(errors[0].message.includes("already exists"), "Error should mention already exists")
+    assert(
+        errors[0].message.includes("already exists"),
+        "Error should mention already exists",
+    )
 })
 
 test("Add operation fails on ID mismatch", () => {
     const { errors } = applyDiagramOperations(sampleXml, [
-        { type: "add", cell_id: "new1", new_xml: '<mxCell id="WRONG" value="Test"/>' },
+        {
+            type: "add",
+            cell_id: "new1",
+            new_xml: '<mxCell id="WRONG" value="Test"/>',
+        },
     ])
     assert(errors.length === 1, "Should have one error")
-    assert(errors[0].message.includes("ID mismatch"), "Error should mention ID mismatch")
+    assert(
+        errors[0].message.includes("ID mismatch"),
+        "Error should mention ID mismatch",
+    )
 })
 
 test("Delete operation removes cell", () => {
-    const { result, errors } = applyDiagramOperations(sampleXml, [{ type: "delete", cell_id: "3" }])
-    assert(errors.length === 0, `Expected no errors, got: ${JSON.stringify(errors)}`)
+    const { result, errors } = applyDiagramOperations(sampleXml, [
+        { type: "delete", cell_id: "3" },
+    ])
+    assert(
+        errors.length === 0,
+        `Expected no errors, got: ${JSON.stringify(errors)}`,
+    )
     assert(!result.includes('id="3"'), "Deleted cell should not be in result")
     assert(result.includes('id="2"'), "Other cells should remain")
 })
 
 test("Delete operation fails for non-existent cell", () => {
-    const { errors } = applyDiagramOperations(sampleXml, [{ type: "delete", cell_id: "999" }])
+    const { errors } = applyDiagramOperations(sampleXml, [
+        { type: "delete", cell_id: "999" },
+    ])
     assert(errors.length === 1, "Should have one error")
-    assert(errors[0].message.includes("not found"), "Error should mention not found")
+    assert(
+        errors[0].message.includes("not found"),
+        "Error should mention not found",
+    )
 })
 
 test("Multiple operations in sequence", () => {
@@ -220,30 +329,45 @@ test("Multiple operations in sequence", () => {
         {
             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>',
+            new_xml:
+                '<mxCell id="2" value="Updated" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="120" height="60" as="geometry"/></mxCell>',
         },
         {
             type: "add",
             cell_id: "new1",
-            new_xml: '<mxCell id="new1" value="Added" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="500" y="100" width="120" height="60" as="geometry"/></mxCell>',
+            new_xml:
+                '<mxCell id="new1" value="Added" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="500" y="100" width="120" height="60" as="geometry"/></mxCell>',
         },
         { type: "delete", cell_id: "3" },
     ])
-    assert(errors.length === 0, `Expected no errors, got: ${JSON.stringify(errors)}`)
-    assert(result.includes('value="Updated"'), "Updated value should be present")
+    assert(
+        errors.length === 0,
+        `Expected no errors, got: ${JSON.stringify(errors)}`,
+    )
+    assert(
+        result.includes('value="Updated"'),
+        "Updated value should be present",
+    )
     assert(result.includes('id="new1"'), "Added cell should be present")
     assert(!result.includes('id="3"'), "Deleted cell should not be present")
 })
 
 test("Invalid XML returns parse error", () => {
-    const { errors } = applyDiagramOperations("<not valid xml", [{ type: "delete", cell_id: "1" }])
+    const { errors } = applyDiagramOperations("<not valid xml", [
+        { type: "delete", cell_id: "1" },
+    ])
     assert(errors.length === 1, "Should have one error")
 })
 
 test("Missing root element returns error", () => {
-    const { errors } = applyDiagramOperations("<mxfile></mxfile>", [{ type: "delete", cell_id: "1" }])
+    const { errors } = applyDiagramOperations("<mxfile></mxfile>", [
+        { type: "delete", cell_id: "1" },
+    ])
     assert(errors.length === 1, "Should have one error")
-    assert(errors[0].message.includes("root"), "Error should mention root element")
+    assert(
+        errors[0].message.includes("root"),
+        "Error should mention root element",
+    )
 })
 
 // Summary