fix: save session when diagram is modified via autosave

Add chartXML to dependency array of auto-save effect so that user
modifications in draw.io (captured via autosave) trigger session save.

.github/workflows/electron-release.yml

@@ -34,15 +34,6 @@ jobs:
           node-version: 24
           cache: "npm"
 
-      - name: Download draw.io static files for offline use
-        run: |
-          rm -rf public/drawio
-          git clone --depth 1 --branch v29.3.5 https://github.com/jgraph/drawio.git /tmp/drawio
-          mkdir -p public/drawio
-          cp -r /tmp/drawio/src/main/webapp/* public/drawio/
-          rm -rf public/drawio/WEB-INF
-          rm -rf public/drawio/META-INF
-
       - name: Install dependencies
         run: npm install
 
@@ -66,16 +57,6 @@ jobs:
           node-version: 24
           cache: "npm"
 
-      - name: Download draw.io static files for offline use
-        shell: bash
-        run: |
-          rm -rf public/drawio
-          git clone --depth 1 --branch v29.3.5 https://github.com/jgraph/drawio.git /tmp/drawio
-          mkdir -p public/drawio
-          cp -r /tmp/drawio/src/main/webapp/* public/drawio/
-          rm -rf public/drawio/WEB-INF
-          rm -rf public/drawio/META-INF
-
       - name: Install dependencies
         run: npm install
 
@@ -99,7 +80,7 @@ jobs:
           api-token: ${{ secrets.SIGNPATH_API_TOKEN }}
           organization-id: '880a211d-2cd3-4e7b-8d04-3d1f8eb39df5'
           project-slug: 'next-ai-draw-io'
-          signing-policy-slug: 'release-signing'
+          signing-policy-slug: 'test-signing'
           artifact-configuration-slug: 'windows-exe'
           github-artifact-id: ${{ steps.upload-unsigned.outputs.artifact-id }}
           wait-for-completion: true

.gitignore

@@ -56,8 +56,6 @@ push-via-ec2.sh
 /dist-electron/
 /release/
 /electron-standalone/
-# Draw.io static files (downloaded during CI build)
-public/drawio/
 *.dmg
 *.exe
 *.AppImage
@@ -70,5 +68,4 @@ CLAUDE.md
 
 # edgeone
 .edgeone
-opencode.json
+opencode.json
-ai-models.json

README.md

@@ -207,7 +207,6 @@ See the [Next.js deployment documentation](https://nextjs.org/docs/app/building-
 -   OpenAI
 -   Anthropic
 -   Google AI
--   Google Vertex AI
 -   Azure OpenAI
 -   Ollama
 -   OpenRouter
@@ -222,10 +221,6 @@ All providers except AWS Bedrock and OpenRouter support custom endpoints.
 
 📖 **[Detailed Provider Configuration Guide](./docs/en/ai-providers.md)** - See setup instructions for each provider.
 
-### Server-Side Multi-Model Configuration
-
-Administrators can configure multiple server-side models that are available to all users without requiring personal API keys. Configure via `AI_MODELS_CONFIG` environment variable (JSON string) or `ai-models.json` file.
-
 **Model Requirements**: This task requires strong model capabilities for generating long-form text with strict formatting constraints (draw.io XML). Recommended models include Claude Sonnet 4.5, GPT-5.1, Gemini 3 Pro, and DeepSeek V3.2/R1.
 
 Note that the `claude` series has been trained on draw.io diagrams with cloud architecture logos like AWS, Azure, GCP. So if you want to create cloud architecture diagrams, this is the best choice.

app/[lang]/about/cn/page.tsx

@@ -292,7 +292,6 @@ export default function AboutCN() {
                         </li>
                         <li>Anthropic</li>
                         <li>Google AI</li>
-                        <li>Google Vertex AI</li>
                         <li>Azure OpenAI</li>
                         <li>Ollama</li>
                         <li>OpenRouter</li>

app/[lang]/about/ja/page.tsx

@@ -307,7 +307,6 @@ export default function AboutJA() {
                         </li>
                         <li>Anthropic</li>
                         <li>Google AI</li>
-                        <li>Google Vertex AI</li>
                         <li>Azure OpenAI</li>
                         <li>Ollama</li>
                         <li>OpenRouter</li>

app/[lang]/about/page.tsx

@@ -326,7 +326,6 @@ export default function About() {
                         </li>
                         <li>Anthropic</li>
                         <li>Google AI</li>
-                        <li>Google Vertex AI</li>
                         <li>Azure OpenAI</li>
                         <li>Ollama</li>
                         <li>OpenRouter</li>

app/[lang]/page.tsx

@@ -11,13 +11,15 @@ import {
 } from "@/components/ui/resizable"
 import { useDiagram } from "@/contexts/diagram-context"
 import { i18n, type Locale } from "@/lib/i18n/config"
-import { isIndexedDBUsable } from "@/lib/session-storage"
+
+const drawioBaseUrl =
+    process.env.NEXT_PUBLIC_DRAWIO_BASE_URL || "https://embed.diagrams.net"
 
 export default function Home() {
     const {
         drawioRef,
         handleDiagramExport,
-        handleDiagramAutoSave,
+        handleAutoSave,
         onDrawioLoad,
         resetDrawioReady,
     } = useDiagram()
@@ -31,11 +33,6 @@ export default function Home() {
     const [darkMode, setDarkMode] = useState(false)
     const [isLoaded, setIsLoaded] = useState(false)
     const [isDrawioReady, setIsDrawioReady] = useState(false)
-    const [isElectron, setIsElectron] = useState(false)
-    const [canPersist, setCanPersist] = useState(false)
-    const [drawioBaseUrl, setDrawioBaseUrl] = useState(
-        process.env.NEXT_PUBLIC_DRAWIO_BASE_URL || "https://embed.diagrams.net",
-    )
 
     const chatPanelRef = useRef<ImperativePanelHandle>(null)
     const isMobileRef = useRef(false)
@@ -72,21 +69,6 @@ export default function Home() {
             document.documentElement.classList.toggle("dark", prefersDark)
         }
 
-        // Detect Electron and use bundled draw.io files for offline use
-        // Note: react-drawio uses `new URL(baseUrl)` so we need absolute URL
-        // Include /index.html because Next.js doesn't auto-serve index.html for directories
-        const electronDetected =
-            !process.env.NEXT_PUBLIC_DRAWIO_BASE_URL &&
-            !!(window as unknown as { electronAPI?: unknown }).electronAPI
-        if (electronDetected) {
-            setIsElectron(true)
-            setDrawioBaseUrl(`${window.location.origin}/drawio/index.html`)
-        }
-
-        void (async () => {
-            const usable = await isIndexedDBUsable()
-            setCanPersist(usable)
-        })()
         setIsLoaded(true)
     }, [pathname, router])
 
@@ -95,17 +77,6 @@ export default function Home() {
         onDrawioLoad()
     }, [onDrawioLoad])
 
-    const handleDrawioAutoSave = useCallback(
-        (data: { xml?: string }) => {
-            handleDiagramAutoSave(data)
-            // Only suppress modified state when persistence is available
-            if (canPersist) {
-                drawioRef.current?.status({ message: "", modified: false })
-            }
-        },
-        [canPersist, drawioRef, handleDiagramAutoSave],
-    )
-
     const handleDarkModeChange = () => {
         const newValue = !darkMode
         setDarkMode(newValue)
@@ -194,36 +165,23 @@ export default function Home() {
                                     className={`h-full w-full ${isDrawioReady ? "" : "invisible absolute inset-0"}`}
                                 >
                                     <DrawIoEmbed
-                                        key={`${drawioUi}-${darkMode}-${currentLang}-${isElectron}`}
+                                        key={`${drawioUi}-${darkMode}-${currentLang}`}
                                         ref={drawioRef}
-                                        autosave
-                                        onAutoSave={handleDrawioAutoSave}
                                         onExport={handleDiagramExport}
                                         onLoad={handleDrawioLoad}
+                                        onAutoSave={handleAutoSave}
+                                        autosave={true}
                                         baseUrl={drawioBaseUrl}
-                                        configuration={
-                                            canPersist
-                                                ? { confirmExit: false }
-                                                : undefined
-                                        }
                                         urlParameters={{
                                             ui: drawioUi,
                                             spin: false,
                                             libraries: false,
-                                            // Disable modified tracking only when persistence is available
-                                            ...(canPersist && {
-                                                modified: false,
-                                                keepmodified: false,
-                                            }),
                                             saveAndExit: false,
                                             noSaveBtn: true,
                                             noExitBtn: true,
+                                            modified: false,
                                             dark: darkMode,
                                             lang: currentLang,
-                                            // Enable offline mode in Electron to disable external service calls
-                                            ...(isElectron && {
-                                                offline: true,
-                                            }),
                                         }}
                                     />
                                 </div>

app/api/chat/route.ts

@@ -34,7 +34,6 @@ import {
     setTraceOutput,
     wrapWithObserve,
 } from "@/lib/langfuse"
-import { findServerModelById } from "@/lib/server-model-config"
 import { getSystemPrompt } from "@/lib/system-prompts"
 import { getUserIdFromRequest } from "@/lib/user-id"
 
@@ -118,10 +117,7 @@ async function handleChatRequest(req: Request): Promise<Response> {
     // === SERVER-SIDE QUOTA CHECK START ===
     // Quota is opt-in: only enabled when DYNAMODB_QUOTA_TABLE env var is set
     const hasOwnApiKey = !!(
-        req.headers.get("x-ai-provider") &&
+        req.headers.get("x-ai-provider") && req.headers.get("x-ai-api-key")
-        (req.headers.get("x-ai-api-key") ||
-            req.headers.get("x-aws-access-key-id") ||
-            req.headers.get("x-vertex-api-key"))
     )
 
     // Skip quota check if: quota disabled, user has own API key, or is anonymous
@@ -172,7 +168,6 @@ async function handleChatRequest(req: Request): Promise<Response> {
     // Read client AI provider overrides from headers
     const provider = req.headers.get("x-ai-provider")
     let baseUrl = req.headers.get("x-ai-base-url")
-    const selectedModelId = req.headers.get("x-selected-model-id")
 
     // For EdgeOne provider, construct full URL from request origin
     // because createOpenAI needs absolute URL, not relative path
@@ -184,30 +179,8 @@ async function handleChatRequest(req: Request): Promise<Response> {
     // Get cookie header for EdgeOne authentication (eo_token, eo_time)
     const cookieHeader = req.headers.get("cookie")
 
-    // Check if this is a server model with custom env var names
-    let serverModelConfig: {
-        apiKeyEnv?: string
-        baseUrlEnv?: string
-        provider?: string
-    } = {}
-    if (selectedModelId?.startsWith("server:")) {
-        const serverModel = await findServerModelById(selectedModelId)
-        console.log(
-            `[Server Model Lookup] ID: ${selectedModelId}, Found: ${!!serverModel}, Provider: ${serverModel?.provider}`,
-        )
-        if (serverModel) {
-            serverModelConfig = {
-                apiKeyEnv: serverModel.apiKeyEnv,
-                baseUrlEnv: serverModel.baseUrlEnv,
-                // Use actual provider from config (client header may have incorrect value due to ID format change)
-                provider: serverModel.provider,
-            }
-        }
-    }
-
     const clientOverrides = {
-        // Server model provider takes precedence over client header
+        provider,
-        provider: serverModelConfig.provider || provider,
         baseUrl,
         apiKey: req.headers.get("x-ai-api-key"),
         modelId: req.headers.get("x-ai-model"),
@@ -216,10 +189,6 @@ async function handleChatRequest(req: Request): Promise<Response> {
         awsSecretAccessKey: req.headers.get("x-aws-secret-access-key"),
         awsRegion: req.headers.get("x-aws-region"),
         awsSessionToken: req.headers.get("x-aws-session-token"),
-        // Server model custom env var names
-        ...serverModelConfig,
-        // Vertex AI credentials (Express Mode)
-        vertexApiKey: req.headers.get("x-vertex-api-key"),
         // Pass cookies for EdgeOne Pages authentication
         ...(provider === "edgeone" &&
             cookieHeader && {
@@ -230,10 +199,6 @@ async function handleChatRequest(req: Request): Promise<Response> {
     // Read minimal style preference from header
     const minimalStyle = req.headers.get("x-minimal-style") === "true"
 
-    console.log(
-        `[Client Overrides] provider: ${clientOverrides.provider}, modelId: ${clientOverrides.modelId}`,
-    )
-
     // Get AI model with optional client overrides
     const { model, providerOptions, headers, modelId } =
         getAIModel(clientOverrides)
@@ -476,13 +441,6 @@ ${userInputText}
                         inputToRepair = inputToRepair.replace(/:=/g, ": ")
                         // Fix `= "` instead of `: "`
                         inputToRepair = inputToRepair.replace(/=\s*"/g, ': "')
-                        // Fix inconsistent quote escaping in XML attributes within JSON strings
-                        // Pattern: attribute="value\" where opening quote is unescaped but closing is escaped
-                        // Example: y="-20\" should be y=\"-20\"
-                        inputToRepair = inputToRepair.replace(
-                            /(\w+)="([^"]*?)\\"/g,
-                            '$1=\\"$2\\"',
-                        )
                     }
                     // Use jsonrepair to fix truncated JSON
                     const repairedInput = jsonrepair(inputToRepair)

app/api/parse-url/route.ts

@@ -1,11 +1,61 @@
 import { extract } from "@extractus/article-extractor"
 import { NextResponse } from "next/server"
 import TurndownService from "turndown"
-import { allowPrivateUrls, isPrivateUrl } from "@/lib/ssrf-protection"
 
 const MAX_CONTENT_LENGTH = 150000 // Match PDF limit
 const EXTRACT_TIMEOUT_MS = 15000
 
+// SSRF protection - block private/internal addresses
+function isPrivateUrl(urlString: string): boolean {
+    try {
+        const url = new URL(urlString)
+        const hostname = url.hostname.toLowerCase()
+
+        // Block localhost
+        if (
+            hostname === "localhost" ||
+            hostname === "127.0.0.1" ||
+            hostname === "::1"
+        ) {
+            return true
+        }
+
+        // Block AWS/cloud metadata endpoints
+        if (
+            hostname === "169.254.169.254" ||
+            hostname === "metadata.google.internal"
+        ) {
+            return true
+        }
+
+        // Check for private IPv4 ranges
+        const ipv4Match = hostname.match(
+            /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/,
+        )
+        if (ipv4Match) {
+            const [, a, b] = ipv4Match.map(Number)
+            if (a === 10) return true // 10.0.0.0/8
+            if (a === 172 && b >= 16 && b <= 31) return true // 172.16.0.0/12
+            if (a === 192 && b === 168) return true // 192.168.0.0/16
+            if (a === 169 && b === 254) return true // 169.254.0.0/16 (link-local)
+            if (a === 127) return true // 127.0.0.0/8 (loopback)
+        }
+
+        // Block common internal hostnames
+        if (
+            hostname.endsWith(".local") ||
+            hostname.endsWith(".internal") ||
+            hostname.endsWith(".localhost")
+        ) {
+            return true
+        }
+
+        return false
+    } catch {
+        return true // Invalid URL - block it
+    }
+}
+
 export async function POST(req: Request) {
     try {
         const { url } = await req.json()
@@ -28,7 +78,7 @@ export async function POST(req: Request) {
         }
 
         // SSRF protection
-        if (!allowPrivateUrls && isPrivateUrl(url)) {
+        if (isPrivateUrl(url)) {
             return NextResponse.json(
                 { error: "Cannot access private/internal URLs" },
                 { status: 400 },

app/api/server-models/route.ts

@@ -1,14 +0,0 @@
-import { NextResponse } from "next/server"
-import { loadFlattenedServerModels } from "@/lib/server-model-config"
-
-// Use dynamic rendering to read AI_MODEL/AI_PROVIDER env vars at runtime
-// This ensures Docker users can set these values when starting containers
-export const dynamic = "force-dynamic"
-
-export async function GET() {
-    const models = await loadFlattenedServerModels()
-    return NextResponse.json({
-        models,
-        hasConfig: models.length > 0,
-    })
-}

app/api/validate-diagram/route.ts

@@ -1,136 +0,0 @@
-/**
- * API endpoint for VLM-based diagram validation.
- * Accepts a PNG image and streams validation results using useObject-compatible format.
- */
-
-import { streamObject } from "ai"
-import { getValidationModel } from "@/lib/ai-providers"
-import { VALIDATION_SYSTEM_PROMPT } from "@/lib/validation-prompts"
-import {
-    type ValidationResult,
-    ValidationResultSchema,
-} from "@/lib/validation-schema"
-
-export const maxDuration = 30
-
-interface ValidateDiagramRequest {
-    imageData: string // Base64 PNG data URL
-    sessionId?: string
-}
-
-// Default valid result for disabled/error cases
-const DEFAULT_VALID_RESULT: ValidationResult = {
-    valid: true,
-    issues: [],
-    suggestions: [],
-}
-
-/**
- * Create a streaming response for useObject compatibility.
- * useObject expects text stream format, not plain JSON.
- */
-function createStreamingResponse(result: ValidationResult): Response {
-    const encoder = new TextEncoder()
-    const stream = new ReadableStream({
-        start(controller) {
-            // Stream the JSON as text (useObject parses this)
-            controller.enqueue(encoder.encode(JSON.stringify(result)))
-            controller.close()
-        },
-    })
-    return new Response(stream, {
-        headers: { "Content-Type": "text/plain; charset=utf-8" },
-    })
-}
-
-export async function POST(req: Request): Promise<Response> {
-    try {
-        // Check if VLM validation is enabled (default: true)
-        const enableValidation = process.env.ENABLE_VLM_VALIDATION !== "false"
-        if (!enableValidation) {
-            return createStreamingResponse(DEFAULT_VALID_RESULT)
-        }
-
-        const body: ValidateDiagramRequest = await req.json()
-        const { imageData, sessionId } = body
-
-        if (!imageData) {
-            return Response.json(
-                { error: "Missing imageData" },
-                { status: 400 },
-            )
-        }
-
-        // Validate image data format
-        if (
-            !imageData.startsWith("data:image/png;base64,") &&
-            !imageData.startsWith("data:image/")
-        ) {
-            return Response.json(
-                { error: "Invalid image data format" },
-                { status: 400 },
-            )
-        }
-
-        // Get the validation model
-        let model
-        try {
-            model = getValidationModel()
-        } catch (error) {
-            console.warn(
-                "[validate-diagram] Validation model not available:",
-                error,
-            )
-            // Return valid if no vision model is configured
-            return createStreamingResponse(DEFAULT_VALID_RESULT)
-        }
-
-        // Parse timeout with validation (minimum 1000ms, default 10000ms)
-        const timeout =
-            Math.max(
-                1000,
-                parseInt(process.env.VALIDATION_TIMEOUT || "10000", 10),
-            ) || 10000
-
-        // Stream the VLM response for useObject consumption
-        const result = streamObject({
-            model,
-            schema: ValidationResultSchema,
-            system: VALIDATION_SYSTEM_PROMPT,
-            messages: [
-                {
-                    role: "user",
-                    content: [
-                        {
-                            type: "image",
-                            image: imageData,
-                        },
-                        {
-                            type: "text",
-                            text: "Please analyze this diagram for visual quality issues.",
-                        },
-                    ],
-                },
-            ],
-            maxOutputTokens: 1024,
-            abortSignal: AbortSignal.timeout(timeout),
-            onFinish: ({ object }) => {
-                if (sessionId && object) {
-                    console.log(
-                        `[validate-diagram] Session ${sessionId}: valid=${object.valid}, issues=${object.issues?.length ?? 0}`,
-                    )
-                }
-            },
-        })
-
-        return result.toTextStreamResponse()
-    } catch (error) {
-        // Log with session context if available
-        const errorMessage =
-            error instanceof Error ? error.message : String(error)
-        console.error("[validate-diagram] Error:", errorMessage)
-
-        // On error, return valid to not block the user
-        return createStreamingResponse(DEFAULT_VALID_RESULT)
-    }
-}

app/api/validate-model/route.ts

@@ -3,16 +3,74 @@ import { createAnthropic } from "@ai-sdk/anthropic"
 import { createDeepSeek, deepseek } from "@ai-sdk/deepseek"
 import { createGateway } from "@ai-sdk/gateway"
 import { createGoogleGenerativeAI } from "@ai-sdk/google"
-import { createVertex } from "@ai-sdk/google-vertex"
 import { createOpenAI } from "@ai-sdk/openai"
 import { createOpenRouter } from "@openrouter/ai-sdk-provider"
 import { generateText } from "ai"
 import { NextResponse } from "next/server"
 import { createOllama } from "ollama-ai-provider-v2"
-import { allowPrivateUrls, isPrivateUrl } from "@/lib/ssrf-protection"
 
 export const runtime = "nodejs"
 
+/**
+ * SECURITY: Check if URL points to private/internal network (SSRF protection)
+ * Blocks: localhost, private IPs, link-local, AWS metadata service
+ */
+function isPrivateUrl(urlString: string): boolean {
+    try {
+        const url = new URL(urlString)
+        const hostname = url.hostname.toLowerCase()
+
+        // Block localhost
+        if (
+            hostname === "localhost" ||
+            hostname === "127.0.0.1" ||
+            hostname === "::1"
+        ) {
+            return true
+        }
+
+        // Block AWS/cloud metadata endpoints
+        if (
+            hostname === "169.254.169.254" ||
+            hostname === "metadata.google.internal"
+        ) {
+            return true
+        }
+
+        // Check for private IPv4 ranges
+        const ipv4Match = hostname.match(
+            /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/,
+        )
+        if (ipv4Match) {
+            const [, a, b] = ipv4Match.map(Number)
+            // 10.0.0.0/8
+            if (a === 10) return true
+            // 172.16.0.0/12
+            if (a === 172 && b >= 16 && b <= 31) return true
+            // 192.168.0.0/16
+            if (a === 192 && b === 168) return true
+            // 169.254.0.0/16 (link-local)
+            if (a === 169 && b === 254) return true
+            // 127.0.0.0/8 (loopback)
+            if (a === 127) return true
+        }
+
+        // Block common internal hostnames
+        if (
+            hostname.endsWith(".local") ||
+            hostname.endsWith(".internal") ||
+            hostname.endsWith(".localhost")
+        ) {
+            return true
+        }
+
+        return false
+    } catch {
+        // Invalid URL - block it
+        return true
+    }
+}
+
 interface ValidateRequest {
     provider: string
     apiKey: string
@@ -22,8 +80,6 @@ interface ValidateRequest {
     awsAccessKeyId?: string
     awsSecretAccessKey?: string
     awsRegion?: string
-    // Vertex AI specific
-    vertexApiKey?: string // Express Mode API key
 }
 
 export async function POST(req: Request) {
@@ -37,8 +93,6 @@ export async function POST(req: Request) {
             awsAccessKeyId,
             awsSecretAccessKey,
             awsRegion,
-            // Note: Express Mode only needs vertexApiKey
-            vertexApiKey,
         } = body
 
         if (!provider || !modelId) {
@@ -49,7 +103,7 @@ export async function POST(req: Request) {
         }
 
         // SECURITY: Block SSRF attacks via custom baseUrl
-        if (baseUrl && !allowPrivateUrls && isPrivateUrl(baseUrl)) {
+        if (baseUrl && isPrivateUrl(baseUrl)) {
             return NextResponse.json(
                 { valid: false, error: "Invalid base URL" },
                 { status: 400 },
@@ -67,16 +121,6 @@ export async function POST(req: Request) {
                     { status: 400 },
                 )
             }
-        } else if (provider === "vertexai") {
-            if (!vertexApiKey) {
-                return NextResponse.json(
-                    {
-                        valid: false,
-                        error: "Vertex AI API key is required for Express Mode",
-                    },
-                    { status: 400 },
-                )
-            }
         } else if (provider !== "ollama" && provider !== "edgeone" && !apiKey) {
             return NextResponse.json(
                 { valid: false, error: "API key is required" },
@@ -114,15 +158,6 @@ export async function POST(req: Request) {
                 break
             }
 
-            case "vertexai": {
-                const vertex = createVertex({
-                    apiKey: vertexApiKey,
-                    ...(baseUrl && { baseURL: baseUrl }),
-                })
-                model = vertex(modelId)
-                break
-            }
-
             case "azure": {
                 const azure = createOpenAI({
                     apiKey,

components/ai-elements/model-selector.tsx

@@ -169,27 +169,3 @@ export const ModelSelectorName = ({
 }: ModelSelectorNameProps) => (
     <span className={cn("flex-1 truncate text-left", className)} {...props} />
 )
-
-export type ModelSelectorSectionHeaderProps = {
-    icon: ReactNode
-    label: string
-    className?: string
-}
-
-export const ModelSelectorSectionHeader = ({
-    icon,
-    label,
-    className,
-}: ModelSelectorSectionHeaderProps) => (
-    <div
-        className={cn(
-            "flex items-center gap-2 px-2 py-1.5 text-xs font-semibold text-muted-foreground bg-muted/40 rounded-sm mx-1 mt-1",
-            className,
-        )}
-    >
-        <span className="[&>svg]:size-3.5" aria-hidden="true">
-            {icon}
-        </span>
-        <span>{label}</span>
-    </div>
-)

components/chat-input.tsx

@@ -9,14 +9,7 @@ import {
     Send,
 } from "lucide-react"
 import type React from "react"
-import {
+import { useCallback, useEffect, useRef, useState } from "react"
-    forwardRef,
-    useCallback,
-    useEffect,
-    useImperativeHandle,
-    useRef,
-    useState,
-} from "react"
 import { toast } from "sonner"
 import { ButtonWithTooltip } from "@/components/button-with-tooltip"
 import { ErrorToast } from "@/components/error-toast"
@@ -34,7 +27,6 @@ import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
 import { STORAGE_KEYS } from "@/lib/storage"
 import type { FlattenedModel } from "@/lib/types/model-config"
 import { extractUrlContent, type UrlData } from "@/lib/url-utils"
-import { isRealDiagram } from "@/lib/utils"
 import { FilePreviewList } from "./file-preview-list"
 
 const MAX_IMAGE_SIZE = 2 * 1024 * 1024 // 2MB
@@ -145,10 +137,6 @@ function showValidationErrors(errors: string[], dict: any) {
     }
 }
 
-export interface ChatInputRef {
-    focus: () => void
-}
-
 interface ChatInputProps {
     input: string
     status: "submitted" | "streaming" | "ready" | "error"
@@ -171,438 +159,400 @@ interface ChatInputProps {
     onModelSelect?: (modelId: string | undefined) => void
     showUnvalidatedModels?: boolean
     onConfigureModels?: () => void
-    // Focus control props
-    shouldFocus?: boolean
-    onFocused?: () => void
 }
 
-export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
+export function ChatInput({
-    function ChatInput(
+    input,
-        {
+    status,
-            input,
+    onSubmit,
-            status,
+    onChange,
-            onSubmit,
+    files = [],
-            onChange,
+    onFileChange = () => {},
-            files = [],
+    pdfData = new Map(),
-            onFileChange = () => {},
+    urlData,
-            pdfData = new Map(),
+    onUrlChange,
-            urlData,
+    sessionId,
-            onUrlChange,
+    error = null,
-            sessionId,
+    models = [],
-            error = null,
+    selectedModelId,
-            models = [],
+    onModelSelect = () => {},
-            selectedModelId,
+    showUnvalidatedModels = false,
-            onModelSelect = () => {},
+    onConfigureModels = () => {},
-            showUnvalidatedModels = false,
+}: ChatInputProps) {
-            onConfigureModels = () => {},
+    const dict = useDictionary()
-            shouldFocus = false,
+    const {
-            onFocused,
+        diagramHistory,
-        },
+        saveDiagramToFile,
-        ref,
+        showSaveDialog,
-    ) {
+        setShowSaveDialog,
-        const dict = useDictionary()
+    } = useDiagram()
-        const {
-            chartXML,
-            diagramHistory,
-            saveDiagramToFile,
-            showSaveDialog,
-            setShowSaveDialog,
-        } = useDiagram()
 
-        const textareaRef = useRef<HTMLTextAreaElement>(null)
+    const textareaRef = useRef<HTMLTextAreaElement>(null)
-        const fileInputRef = useRef<HTMLInputElement>(null)
+    const fileInputRef = useRef<HTMLInputElement>(null)
-        const [isDragging, setIsDragging] = useState(false)
+    const [isDragging, setIsDragging] = useState(false)
+    const [showHistory, setShowHistory] = useState(false)
+    const [showUrlDialog, setShowUrlDialog] = useState(false)
+    const [isExtractingUrl, setIsExtractingUrl] = useState(false)
+    const [sendShortcut, setSendShortcut] = useState("ctrl-enter")
+    // Allow retry when there's an error (even if status is still "streaming" or "submitted")
+    const isDisabled =
+        (status === "streaming" || status === "submitted") && !error
 
-        // Expose focus method via ref
+    const adjustTextareaHeight = useCallback(() => {
-        useImperativeHandle(ref, () => ({
+        const textarea = textareaRef.current
-            focus: () => {
+        if (textarea) {
-                textareaRef.current?.focus()
+            textarea.style.height = "auto"
-            },
+            textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`
-        }))
+        }
+    }, [])
+    // Handle programmatic input changes (e.g., setInput("") after form submission)
+    useEffect(() => {
+        adjustTextareaHeight()
+    }, [input, adjustTextareaHeight])
 
-        // Focus the textarea when shouldFocus becomes true
+    // Load send shortcut preference from localStorage and listen for changes
-        // Use setTimeout to ensure focus happens after drawio iframe settles
+    useEffect(() => {
-        useEffect(() => {
+        const stored = localStorage.getItem(STORAGE_KEYS.sendShortcut)
-            if (shouldFocus) {
+        if (stored) setSendShortcut(stored)
-                const timer = setTimeout(() => {
-                    textareaRef.current?.focus()
-                    onFocused?.()
-                }, 150)
-                return () => clearTimeout(timer)
-            }
-        }, [shouldFocus, onFocused])
 
-        const [showHistory, setShowHistory] = useState(false)
+        const handleChange = (e: CustomEvent<string>) =>
-        const [showUrlDialog, setShowUrlDialog] = useState(false)
+            setSendShortcut(e.detail)
-        const [isExtractingUrl, setIsExtractingUrl] = useState(false)
+        window.addEventListener(
-        const [sendShortcut, setSendShortcut] = useState("ctrl-enter")
+            "sendShortcutChange",
-        // Allow retry when there's an error (even if status is still "streaming" or "submitted")
+            handleChange as EventListener,
-        const isDisabled =
+        )
-            (status === "streaming" || status === "submitted") && !error
+        return () =>
-
+            window.removeEventListener(
-        const adjustTextareaHeight = useCallback(() => {
-            const textarea = textareaRef.current
-            if (textarea) {
-                textarea.style.height = "auto"
-                textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`
-            }
-        }, [])
-        // Handle programmatic input changes (e.g., setInput("") after form submission)
-        useEffect(() => {
-            adjustTextareaHeight()
-        }, [input, adjustTextareaHeight])
-
-        // Load send shortcut preference from localStorage and listen for changes
-        useEffect(() => {
-            const stored = localStorage.getItem(STORAGE_KEYS.sendShortcut)
-            if (stored) setSendShortcut(stored)
-
-            const handleChange = (e: CustomEvent<string>) =>
-                setSendShortcut(e.detail)
-            window.addEventListener(
                 "sendShortcutChange",
                 handleChange as EventListener,
             )
-            return () =>
+    }, [])
-                window.removeEventListener(
-                    "sendShortcutChange",
-                    handleChange as EventListener,
-                )
-        }, [])
 
-        const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-            onChange(e)
+        onChange(e)
-            adjustTextareaHeight()
+        adjustTextareaHeight()
-        }
+    }
 
-        const handleKeyDown = (e: React.KeyboardEvent) => {
+    const handleKeyDown = (e: React.KeyboardEvent) => {
-            const shouldSend =
+        const shouldSend =
-                sendShortcut === "enter"
+            sendShortcut === "enter"
-                    ? e.key === "Enter" &&
+                ? e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey
-                      !e.shiftKey &&
+                : (e.metaKey || e.ctrlKey) && e.key === "Enter"
-                      !e.ctrlKey &&
-                      !e.metaKey
-                    : (e.metaKey || e.ctrlKey) && e.key === "Enter"
 
-            if (shouldSend) {
+        if (shouldSend) {
-                e.preventDefault()
-                const form = e.currentTarget.closest("form")
-                if (form && input.trim() && !isDisabled) {
-                    form.requestSubmit()
-                }
-            }
-        }
-
-        const handlePaste = async (e: React.ClipboardEvent) => {
-            if (isDisabled) return
-
-            const items = e.clipboardData.items
-            const imageItems = Array.from(items).filter((item) =>
-                item.type.startsWith("image/"),
-            )
-
-            if (imageItems.length > 0) {
-                const imageFiles = (
-                    await Promise.all(
-                        imageItems.map(async (item, index) => {
-                            const file = item.getAsFile()
-                            if (!file) return null
-                            return new File(
-                                [file],
-                                `pasted-image-${Date.now()}-${index}.${file.type.split("/")[1]}`,
-                                { type: file.type },
-                            )
-                        }),
-                    )
-                ).filter((f): f is File => f !== null)
-
-                const { validFiles, errors } = validateFiles(
-                    imageFiles,
-                    files.length,
-                    dict,
-                )
-                showValidationErrors(errors, dict)
-                if (validFiles.length > 0) {
-                    onFileChange([...files, ...validFiles])
-                }
-            }
-        }
-
-        const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-            const newFiles = Array.from(e.target.files || [])
-            const { validFiles, errors } = validateFiles(
-                newFiles,
-                files.length,
-                dict,
-            )
-            showValidationErrors(errors, dict)
-            if (validFiles.length > 0) {
-                onFileChange([...files, ...validFiles])
-            }
-
-            if (fileInputRef.current) {
-                fileInputRef.current.value = ""
-            }
-        }
-
-        const handleRemoveFile = (fileToRemove: File) => {
-            onFileChange(files.filter((file) => file !== fileToRemove))
-            if (fileInputRef.current) {
-                fileInputRef.current.value = ""
-            }
-        }
-
-        const triggerFileInput = () => {
-            fileInputRef.current?.click()
-        }
-
-        const handleDragOver = (e: React.DragEvent<HTMLFormElement>) => {
             e.preventDefault()
-            e.stopPropagation()
+            const form = e.currentTarget.closest("form")
-            setIsDragging(true)
+            if (form && input.trim() && !isDisabled) {
-        }
+                form.requestSubmit()
-
-        const handleDragLeave = (e: React.DragEvent<HTMLFormElement>) => {
-            e.preventDefault()
-            e.stopPropagation()
-            setIsDragging(false)
-        }
-
-        const handleDrop = (e: React.DragEvent<HTMLFormElement>) => {
-            e.preventDefault()
-            e.stopPropagation()
-            setIsDragging(false)
-
-            if (isDisabled) return
-
-            const droppedFiles = e.dataTransfer.files
-            const supportedFiles = Array.from(droppedFiles).filter((file) =>
-                isValidFileType(file),
-            )
-
-            const { validFiles, errors } = validateFiles(
-                supportedFiles,
-                files.length,
-                dict,
-            )
-            showValidationErrors(errors, dict)
-            if (validFiles.length > 0) {
-                onFileChange([...files, ...validFiles])
             }
         }
+    }
 
-        const handleUrlExtract = async (url: string) => {
+    const handlePaste = async (e: React.ClipboardEvent) => {
-            if (!onUrlChange) return
+        if (isDisabled) return
 
-            setIsExtractingUrl(true)
+        const items = e.clipboardData.items
-
+        const imageItems = Array.from(items).filter((item) =>
-            try {
+            item.type.startsWith("image/"),
-                const existing = urlData
-                    ? new Map(urlData)
-                    : new Map<string, UrlData>()
-                existing.set(url, {
-                    url,
-                    title: url,
-                    content: "",
-                    charCount: 0,
-                    isExtracting: true,
-                })
-                onUrlChange(existing)
-
-                const data = await extractUrlContent(url)
-
-                const newUrlData = new Map(existing)
-                newUrlData.set(url, data)
-                onUrlChange(newUrlData)
-
-                setShowUrlDialog(false)
-            } catch (error) {
-                // Remove the URL from the data map on error
-                const newUrlData = urlData
-                    ? new Map(urlData)
-                    : new Map<string, UrlData>()
-                newUrlData.delete(url)
-                onUrlChange(newUrlData)
-                showErrorToast(
-                    <span className="text-muted-foreground">
-                        {error instanceof Error
-                            ? error.message
-                            : "Failed to extract URL content"}
-                    </span>,
-                )
-            } finally {
-                setIsExtractingUrl(false)
-            }
-        }
-
-        return (
-            <form
-                onSubmit={onSubmit}
-                className={`w-full transition-all duration-200 ${
-                    isDragging
-                        ? "ring-2 ring-primary ring-offset-2 rounded-2xl"
-                        : ""
-                }`}
-                onDragOver={handleDragOver}
-                onDragLeave={handleDragLeave}
-                onDrop={handleDrop}
-            >
-                {/* File & URL previews */}
-                {(files.length > 0 || (urlData && urlData.size > 0)) && (
-                    <div className="mb-3">
-                        <FilePreviewList
-                            files={files}
-                            onRemoveFile={handleRemoveFile}
-                            pdfData={pdfData}
-                            urlData={urlData}
-                            onRemoveUrl={
-                                onUrlChange
-                                    ? (url) => {
-                                          const next = new Map(urlData)
-                                          next.delete(url)
-                                          onUrlChange(next)
-                                      }
-                                    : undefined
-                            }
-                        />
-                    </div>
-                )}
-                <div className="relative rounded-2xl border border-border bg-background shadow-sm focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary/50 transition-all duration-200">
-                    <Textarea
-                        ref={textareaRef}
-                        value={input}
-                        onChange={handleChange}
-                        onKeyDown={handleKeyDown}
-                        onPaste={handlePaste}
-                        placeholder={dict.chat.placeholder}
-                        disabled={isDisabled}
-                        aria-label="Chat input"
-                        className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent px-4 py-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60 scrollbar-thin"
-                    />
-
-                    <div className="flex items-center justify-end gap-1 px-3 py-2 border-t border-border/50">
-                        <div className="flex items-center gap-1 overflow-x-hidden">
-                            <ButtonWithTooltip
-                                type="button"
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => setShowHistory(true)}
-                                disabled={
-                                    isDisabled || diagramHistory.length === 0
-                                }
-                                tooltipContent={dict.chat.diagramHistory}
-                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                            >
-                                <History className="h-4 w-4" />
-                            </ButtonWithTooltip>
-
-                            <ButtonWithTooltip
-                                type="button"
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => setShowSaveDialog(true)}
-                                disabled={
-                                    isDisabled || !isRealDiagram(chartXML)
-                                }
-                                tooltipContent={dict.chat.saveDiagram}
-                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                            >
-                                <Download className="h-4 w-4" />
-                            </ButtonWithTooltip>
-
-                            <ButtonWithTooltip
-                                type="button"
-                                variant="ghost"
-                                size="sm"
-                                onClick={triggerFileInput}
-                                disabled={isDisabled}
-                                tooltipContent={dict.chat.uploadFile}
-                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                            >
-                                <ImageIcon className="h-4 w-4" />
-                            </ButtonWithTooltip>
-
-                            {onUrlChange && (
-                                <ButtonWithTooltip
-                                    type="button"
-                                    variant="ghost"
-                                    size="sm"
-                                    onClick={() => setShowUrlDialog(true)}
-                                    disabled={isDisabled}
-                                    tooltipContent={dict.chat.ExtractURL}
-                                    className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                                >
-                                    <Link className="h-4 w-4" />
-                                </ButtonWithTooltip>
-                            )}
-
-                            <input
-                                type="file"
-                                ref={fileInputRef}
-                                className="hidden"
-                                onChange={handleFileChange}
-                                accept="image/*,.pdf,application/pdf,text/*,.md,.markdown,.json,.csv,.xml,.yaml,.yml,.toml"
-                                multiple
-                                disabled={isDisabled}
-                            />
-                        </div>
-                        <ModelSelector
-                            models={models}
-                            selectedModelId={selectedModelId}
-                            onSelect={onModelSelect}
-                            onConfigure={onConfigureModels}
-                            disabled={isDisabled}
-                            showUnvalidatedModels={showUnvalidatedModels}
-                        />
-                        <div className="w-px h-5 bg-border mx-1" />
-                        <Button
-                            type="submit"
-                            disabled={isDisabled || !input.trim()}
-                            size="sm"
-                            className="h-8 px-4 rounded-xl font-medium shadow-sm"
-                            aria-label={
-                                isDisabled ? dict.chat.sending : dict.chat.send
-                            }
-                        >
-                            {isDisabled ? (
-                                <Loader2 className="h-4 w-4 animate-spin" />
-                            ) : (
-                                <>
-                                    <Send className="h-4 w-4 mr-1.5" />
-                                    {dict.chat.send}
-                                </>
-                            )}
-                        </Button>
-                    </div>
-                </div>
-                <HistoryDialog
-                    showHistory={showHistory}
-                    onToggleHistory={setShowHistory}
-                />
-                <SaveDialog
-                    open={showSaveDialog}
-                    onOpenChange={setShowSaveDialog}
-                    onSave={(filename, format) =>
-                        saveDiagramToFile(
-                            filename,
-                            format,
-                            sessionId,
-                            dict.save.savedSuccessfully,
-                        )
-                    }
-                    defaultFilename={`diagram-${new Date()
-                        .toISOString()
-                        .slice(0, 10)}`}
-                />
-                {onUrlChange && (
-                    <UrlInputDialog
-                        open={showUrlDialog}
-                        onOpenChange={setShowUrlDialog}
-                        onSubmit={handleUrlExtract}
-                        isExtracting={isExtractingUrl}
-                    />
-                )}
-            </form>
         )
-    },
+
-)
+        if (imageItems.length > 0) {
+            const imageFiles = (
+                await Promise.all(
+                    imageItems.map(async (item, index) => {
+                        const file = item.getAsFile()
+                        if (!file) return null
+                        return new File(
+                            [file],
+                            `pasted-image-${Date.now()}-${index}.${file.type.split("/")[1]}`,
+                            { type: file.type },
+                        )
+                    }),
+                )
+            ).filter((f): f is File => f !== null)
+
+            const { validFiles, errors } = validateFiles(
+                imageFiles,
+                files.length,
+                dict,
+            )
+            showValidationErrors(errors, dict)
+            if (validFiles.length > 0) {
+                onFileChange([...files, ...validFiles])
+            }
+        }
+    }
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newFiles = Array.from(e.target.files || [])
+        const { validFiles, errors } = validateFiles(
+            newFiles,
+            files.length,
+            dict,
+        )
+        showValidationErrors(errors, dict)
+        if (validFiles.length > 0) {
+            onFileChange([...files, ...validFiles])
+        }
+
+        if (fileInputRef.current) {
+            fileInputRef.current.value = ""
+        }
+    }
+
+    const handleRemoveFile = (fileToRemove: File) => {
+        onFileChange(files.filter((file) => file !== fileToRemove))
+        if (fileInputRef.current) {
+            fileInputRef.current.value = ""
+        }
+    }
+
+    const triggerFileInput = () => {
+        fileInputRef.current?.click()
+    }
+
+    const handleDragOver = (e: React.DragEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        e.stopPropagation()
+        setIsDragging(true)
+    }
+
+    const handleDragLeave = (e: React.DragEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        e.stopPropagation()
+        setIsDragging(false)
+    }
+
+    const handleDrop = (e: React.DragEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        e.stopPropagation()
+        setIsDragging(false)
+
+        if (isDisabled) return
+
+        const droppedFiles = e.dataTransfer.files
+        const supportedFiles = Array.from(droppedFiles).filter((file) =>
+            isValidFileType(file),
+        )
+
+        const { validFiles, errors } = validateFiles(
+            supportedFiles,
+            files.length,
+            dict,
+        )
+        showValidationErrors(errors, dict)
+        if (validFiles.length > 0) {
+            onFileChange([...files, ...validFiles])
+        }
+    }
+
+    const handleUrlExtract = async (url: string) => {
+        if (!onUrlChange) return
+
+        setIsExtractingUrl(true)
+
+        try {
+            const existing = urlData
+                ? new Map(urlData)
+                : new Map<string, UrlData>()
+            existing.set(url, {
+                url,
+                title: url,
+                content: "",
+                charCount: 0,
+                isExtracting: true,
+            })
+            onUrlChange(existing)
+
+            const data = await extractUrlContent(url)
+
+            const newUrlData = new Map(existing)
+            newUrlData.set(url, data)
+            onUrlChange(newUrlData)
+
+            setShowUrlDialog(false)
+        } catch (error) {
+            // Remove the URL from the data map on error
+            const newUrlData = urlData
+                ? new Map(urlData)
+                : new Map<string, UrlData>()
+            newUrlData.delete(url)
+            onUrlChange(newUrlData)
+            showErrorToast(
+                <span className="text-muted-foreground">
+                    {error instanceof Error
+                        ? error.message
+                        : "Failed to extract URL content"}
+                </span>,
+            )
+        } finally {
+            setIsExtractingUrl(false)
+        }
+    }
+
+    return (
+        <form
+            onSubmit={onSubmit}
+            className={`w-full transition-all duration-200 ${
+                isDragging
+                    ? "ring-2 ring-primary ring-offset-2 rounded-2xl"
+                    : ""
+            }`}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+        >
+            {/* File & URL previews */}
+            {(files.length > 0 || (urlData && urlData.size > 0)) && (
+                <div className="mb-3">
+                    <FilePreviewList
+                        files={files}
+                        onRemoveFile={handleRemoveFile}
+                        pdfData={pdfData}
+                        urlData={urlData}
+                        onRemoveUrl={
+                            onUrlChange
+                                ? (url) => {
+                                      const next = new Map(urlData)
+                                      next.delete(url)
+                                      onUrlChange(next)
+                                  }
+                                : undefined
+                        }
+                    />
+                </div>
+            )}
+            <div className="relative rounded-2xl border border-border bg-background shadow-sm focus-within:ring-2 focus-within:ring-primary/20 focus-within:border-primary/50 transition-all duration-200">
+                <Textarea
+                    ref={textareaRef}
+                    value={input}
+                    onChange={handleChange}
+                    onKeyDown={handleKeyDown}
+                    onPaste={handlePaste}
+                    placeholder={dict.chat.placeholder}
+                    disabled={isDisabled}
+                    aria-label="Chat input"
+                    className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent px-4 py-3 text-sm focus-visible:ring-0 focus-visible:ring-offset-0 placeholder:text-muted-foreground/60 scrollbar-thin"
+                />
+
+                <div className="flex items-center justify-end gap-1 px-3 py-2 border-t border-border/50">
+                    <div className="flex items-center gap-1 overflow-x-hidden">
+                        <ButtonWithTooltip
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setShowHistory(true)}
+                            disabled={isDisabled || diagramHistory.length === 0}
+                            tooltipContent={dict.chat.diagramHistory}
+                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                        >
+                            <History className="h-4 w-4" />
+                        </ButtonWithTooltip>
+
+                        <ButtonWithTooltip
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => setShowSaveDialog(true)}
+                            disabled={isDisabled}
+                            tooltipContent={dict.chat.saveDiagram}
+                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                        >
+                            <Download className="h-4 w-4" />
+                        </ButtonWithTooltip>
+
+                        <ButtonWithTooltip
+                            type="button"
+                            variant="ghost"
+                            size="sm"
+                            onClick={triggerFileInput}
+                            disabled={isDisabled}
+                            tooltipContent={dict.chat.uploadFile}
+                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                        >
+                            <ImageIcon className="h-4 w-4" />
+                        </ButtonWithTooltip>
+
+                        {onUrlChange && (
+                            <ButtonWithTooltip
+                                type="button"
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setShowUrlDialog(true)}
+                                disabled={isDisabled}
+                                tooltipContent={dict.chat.ExtractURL}
+                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                            >
+                                <Link className="h-4 w-4" />
+                            </ButtonWithTooltip>
+                        )}
+
+                        <input
+                            type="file"
+                            ref={fileInputRef}
+                            className="hidden"
+                            onChange={handleFileChange}
+                            accept="image/*,.pdf,application/pdf,text/*,.md,.markdown,.json,.csv,.xml,.yaml,.yml,.toml"
+                            multiple
+                            disabled={isDisabled}
+                        />
+                    </div>
+                    <ModelSelector
+                        models={models}
+                        selectedModelId={selectedModelId}
+                        onSelect={onModelSelect}
+                        onConfigure={onConfigureModels}
+                        disabled={isDisabled}
+                        showUnvalidatedModels={showUnvalidatedModels}
+                    />
+                    <div className="w-px h-5 bg-border mx-1" />
+                    <Button
+                        type="submit"
+                        disabled={isDisabled || !input.trim()}
+                        size="sm"
+                        className="h-8 px-4 rounded-xl font-medium shadow-sm"
+                        aria-label={
+                            isDisabled ? dict.chat.sending : dict.chat.send
+                        }
+                    >
+                        {isDisabled ? (
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                        ) : (
+                            <>
+                                <Send className="h-4 w-4 mr-1.5" />
+                                {dict.chat.send}
+                            </>
+                        )}
+                    </Button>
+                </div>
+            </div>
+            <HistoryDialog
+                showHistory={showHistory}
+                onToggleHistory={setShowHistory}
+            />
+            <SaveDialog
+                open={showSaveDialog}
+                onOpenChange={setShowSaveDialog}
+                onSave={(filename, format) =>
+                    saveDiagramToFile(
+                        filename,
+                        format,
+                        sessionId,
+                        dict.save.savedSuccessfully,
+                    )
+                }
+                defaultFilename={`diagram-${new Date()
+                    .toISOString()
+                    .slice(0, 10)}`}
+            />
+            {onUrlChange && (
+                <UrlInputDialog
+                    open={showUrlDialog}
+                    onOpenChange={setShowUrlDialog}
+                    onSubmit={handleUrlExtract}
+                    isExtracting={isExtractingUrl}
+                />
+            )}
+        </form>
+    )
+}

components/chat-message-display.tsx

@@ -9,7 +9,6 @@ import {
     Copy,
     FileCode,
     FileText,
-    Link,
     Pencil,
     RotateCcw,
     ThumbsDown,
@@ -29,8 +28,6 @@ import {
 import { ChatLobby } from "@/components/chat/ChatLobby"
 import { ToolCallCard } from "@/components/chat/ToolCallCard"
 import type { DiagramOperation, ToolPartLike } from "@/components/chat/types"
-import type { ValidationState } from "@/components/chat/ValidationCard"
-import { ValidationCard } from "@/components/chat/ValidationCard"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { getApiEndpoint } from "@/lib/base-path"
@@ -60,20 +57,20 @@ function getCompleteOperations(
 
 import { useDiagram } from "@/contexts/diagram-context"
 
-// Helper to split text content into regular text and file/URL sections (PDF, text files, or URLs)
+// Helper to split text content into regular text and file sections (PDF or text files)
 interface TextSection {
-    type: "text" | "file" | "url"
+    type: "text" | "file"
     content: string
     filename?: string
     charCount?: number
-    fileType?: "pdf" | "text" | "url"
+    fileType?: "pdf" | "text"
 }
 
 function splitTextIntoFileSections(text: string): TextSection[] {
     const sections: TextSection[] = []
-    // Match [PDF: filename], [File: filename], or [URL: url] patterns
+    // Match [PDF: filename] or [File: filename] patterns
     const filePattern =
-        /\[(PDF|File|URL):\s*([^\]]+)\]\n([\s\S]*?)(?=\n\n\[(PDF|File|URL):|$)/g
+        /\[(PDF|File):\s*([^\]]+)\]\n([\s\S]*?)(?=\n\n\[(PDF|File):|$)/g
     let lastIndex = 0
     let match
 
@@ -84,34 +81,28 @@ function splitTextIntoFileSections(text: string): TextSection[] {
             sections.push({ type: "text", content: beforeText })
         }
 
-        // Add file/url section
+        // Add file section
-        const sectionType = match[1].toLowerCase()
+        const fileType = match[1].toLowerCase() === "pdf" ? "pdf" : "text"
-        const fileType =
-            sectionType === "pdf"
-                ? "pdf"
-                : sectionType === "url"
-                  ? "url"
-                  : "text"
         const filename = match[2].trim()
-        const content = match[3].trim()
+        const fileContent = match[3].trim()
         sections.push({
-            type: sectionType === "url" ? "url" : "file",
+            type: "file",
-            content: content,
+            content: fileContent,
             filename,
-            charCount: content.length,
+            charCount: fileContent.length,
             fileType,
         })
 
         lastIndex = match.index + match[0].length
     }
 
-    // Add remaining text after last section
+    // Add remaining text after last file section
     const remainingText = text.slice(lastIndex).trim()
     if (remainingText) {
         sections.push({ type: "text", content: remainingText })
     }
 
-    // If no file/url sections found, return original text
+    // If no file sections found, return original text
     if (sections.length === 0) {
         sections.push({ type: "text", content: text })
     }
@@ -130,8 +121,8 @@ const getMessageTextContent = (message: UIMessage): string => {
 // Get only the user's original text, excluding appended file content
 const getUserOriginalText = (message: UIMessage): string => {
     const fullText = getMessageTextContent(message)
-    // Strip out [PDF: ...], [File: ...], and [URL: ...] sections that were appended
+    // Strip out [PDF: ...] and [File: ...] sections that were appended
-    const filePattern = /\n\n\[(PDF|File|URL):\s*[^\]]+\]\n[\s\S]*$/
+    const filePattern = /\n\n\[(PDF|File):\s*[^\]]+\]\n[\s\S]*$/
     return fullText.replace(filePattern, "").trim()
 }
 
@@ -157,8 +148,6 @@ interface ChatMessageDisplayProps {
     onSelectSession?: (id: string) => void
     onDeleteSession?: (id: string) => void
     loadedMessageIdsRef?: MutableRefObject<Set<string>>
-    validationStates?: Record<string, ValidationState>
-    onImproveWithSuggestions?: (feedback: string) => void
 }
 
 export function ChatMessageDisplay({
@@ -176,8 +165,6 @@ export function ChatMessageDisplay({
     onSelectSession,
     onDeleteSession,
     loadedMessageIdsRef,
-    validationStates = {},
-    onImproveWithSuggestions,
 }: ChatMessageDisplayProps) {
     const dict = useDictionary()
     const { chartXML, loadDiagram: onDisplayChart } = useDiagram()
@@ -442,15 +429,11 @@ export function ChatMessageDisplay({
                         const toolPart = part as ToolPartLike
                         const { toolCallId, state, input } = toolPart
 
-                        // Auto-collapse on completion, but only if user hasn't manually toggled
                         if (state === "output-available") {
-                            setExpandedTools((prev) => {
+                            setExpandedTools((prev) => ({
-                                // Only auto-collapse if not already set (user hasn't interacted)
+                                ...prev,
-                                if (prev[toolCallId] === undefined) {
+                                [toolCallId]: false,
-                                    return { ...prev, [toolCallId]: false }
+                            }))
-                                }
-                                return prev
-                            })
                         }
 
                         if (
@@ -928,56 +911,30 @@ export function ChatMessageDisplay({
                                             return groups.map(
                                                 (group, groupIndex) => {
                                                     if (group.type === "tool") {
-                                                        const toolPart = group
-                                                            .parts[0] as ToolPartLike
-                                                        const toolCallId =
-                                                            toolPart.toolCallId
-                                                        const isDisplayDiagram =
-                                                            toolPart.type ===
-                                                            "tool-display_diagram"
-                                                        const validationState =
-                                                            validationStates[
-                                                                toolCallId
-                                                            ]
-
                                                         return (
-                                                            <div
+                                                            <ToolCallCard
                                                                 key={`${message.id}-tool-${group.startIndex}`}
-                                                            >
+                                                                part={
-                                                                <ToolCallCard
+                                                                    group
-                                                                    part={
+                                                                        .parts[0] as ToolPartLike
-                                                                        toolPart
+                                                                }
-                                                                    }
+                                                                expandedTools={
-                                                                    expandedTools={
+                                                                    expandedTools
-                                                                        expandedTools
+                                                                }
-                                                                    }
+                                                                setExpandedTools={
-                                                                    setExpandedTools={
+                                                                    setExpandedTools
-                                                                        setExpandedTools
+                                                                }
-                                                                    }
+                                                                onCopy={
-                                                                    onCopy={
+                                                                    copyMessageToClipboard
-                                                                        copyMessageToClipboard
+                                                                }
-                                                                    }
+                                                                copiedToolCallId={
-                                                                    copiedToolCallId={
+                                                                    copiedToolCallId
-                                                                        copiedToolCallId
+                                                                }
-                                                                    }
+                                                                copyFailedToolCallId={
-                                                                    copyFailedToolCallId={
+                                                                    copyFailedToolCallId
-                                                                        copyFailedToolCallId
+                                                                }
-                                                                    }
+                                                                dict={dict}
-                                                                    dict={dict}
+                                                            />
-                                                                />
-                                                                {/* Show validation card for display_diagram tools */}
-                                                                {isDisplayDiagram &&
-                                                                    validationState && (
-                                                                        <ValidationCard
-                                                                            state={
-                                                                                validationState
-                                                                            }
-                                                                            onImproveWithSuggestions={
-                                                                                onImproveWithSuggestions
-                                                                            }
-                                                                        />
-                                                                    )}
-                                                            </div>
                                                         )
                                                     }
 
@@ -1091,14 +1048,12 @@ export function ChatMessageDisplay({
                                                                                     ) => {
                                                                                         if (
                                                                                             section.type ===
-                                                                                                "file" ||
+                                                                                            "file"
-                                                                                            section.type ===
-                                                                                                "url"
                                                                                         ) {
-                                                                                            const sectionKey = `${message.id}-${section.type}-${partIndex}-${sectionIndex}`
+                                                                                            const pdfKey = `${message.id}-file-${partIndex}-${sectionIndex}`
                                                                                             const isExpanded =
                                                                                                 expandedPdfSections[
-                                                                                                    sectionKey
+                                                                                                    pdfKey
                                                                                                 ] ??
                                                                                                 false
                                                                                             const charDisplay =
@@ -1107,27 +1062,10 @@ export function ChatMessageDisplay({
                                                                                                     1000
                                                                                                     ? `${(section.charCount / 1000).toFixed(1)}k`
                                                                                                     : section.charCount
-
-                                                                                            // Icon selector
-                                                                                            const Icon =
-                                                                                                section.fileType ===
-                                                                                                "pdf"
-                                                                                                    ? FileText
-                                                                                                    : section.fileType ===
-                                                                                                        "url"
-                                                                                                      ? Link
-                                                                                                      : FileCode
-
-                                                                                            const iconColor =
-                                                                                                section.fileType ===
-                                                                                                "pdf"
-                                                                                                    ? "text-red-500"
-                                                                                                    : "text-blue-700"
-
                                                                                             return (
                                                                                                 <div
                                                                                                     key={
-                                                                                                        sectionKey
+                                                                                                        pdfKey
                                                                                                     }
                                                                                                     className="rounded-lg border border-border/60 bg-muted/30 overflow-hidden"
                                                                                                 >
@@ -1142,7 +1080,7 @@ export function ChatMessageDisplay({
                                                                                                                     prev,
                                                                                                                 ) => ({
                                                                                                                     ...prev,
-                                                                                                                    [sectionKey]:
+                                                                                                                    [pdfKey]:
                                                                                                                         !isExpanded,
                                                                                                                 }),
                                                                                                             )
@@ -1150,10 +1088,13 @@ export function ChatMessageDisplay({
                                                                                                         className="w-full flex items-center justify-between px-3 py-2 hover:bg-muted/50 transition-colors"
                                                                                                     >
                                                                                                         <div className="flex items-center gap-2">
-                                                                                                            <Icon
+                                                                                                            {section.fileType ===
-                                                                                                                className={`h-4 w-4 ${iconColor}`}
+                                                                                                            "pdf" ? (
-                                                                                                            />
+                                                                                                                <FileText className="h-4 w-4 text-red-500" />
-                                                                                                            <span className="text-xs font-medium truncate max-w-[200px]">
+                                                                                                            ) : (
+                                                                                                                <FileCode className="h-4 w-4 text-blue-500" />
+                                                                                                            )}
+                                                                                                            <span className="text-xs font-medium">
                                                                                                                 {
                                                                                                                     section.filename
                                                                                                                 }

components/chat-panel.tsx

@@ -29,18 +29,15 @@ import { useDiagramToolHandlers } from "@/hooks/use-diagram-tool-handlers"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { getSelectedAIConfig, useModelConfig } from "@/hooks/use-model-config"
 import { useSessionManager } from "@/hooks/use-session-manager"
-import { useValidateDiagram } from "@/hooks/use-validate-diagram"
 import { getApiEndpoint } from "@/lib/base-path"
 import { findCachedResponse } from "@/lib/cached-responses"
 import { formatMessage } from "@/lib/i18n/utils"
 import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
 import { sanitizeMessages } from "@/lib/session-storage"
-import { STORAGE_KEYS } from "@/lib/storage"
 import type { UrlData } from "@/lib/url-utils"
 import { type FileData, useFileProcessor } from "@/lib/use-file-processor"
 import { useQuotaManager } from "@/lib/use-quota-manager"
 import { cn, formatXML, isRealDiagram } from "@/lib/utils"
-import type { ValidationState } from "./chat/ValidationCard"
 import { ChatMessageDisplay } from "./chat-message-display"
 import { DevXmlSimulator } from "./dev-xml-simulator"
 
@@ -78,8 +75,7 @@ interface ChatPanelProps {
 // Constants for tool states
 const TOOL_ERROR_STATE = "output-error" as const
 const DEBUG = process.env.NODE_ENV === "development"
-// Increased to 3 to support VLM validation retries (matches MAX_VALIDATION_RETRIES)
+const MAX_AUTO_RETRY_COUNT = 1
-const MAX_AUTO_RETRY_COUNT = 3
 
 const MAX_CONTINUATION_RETRY_COUNT = 2 // Limit for truncation continuation retries
 
@@ -124,7 +120,6 @@ export default function ChatPanel({
         latestSvg,
         clearDiagram,
         getThumbnailSvg,
-        captureValidationPng,
         diagramHistory,
         setDiagramHistory,
     } = useDiagram()
@@ -137,22 +132,26 @@ export default function ChatPanel({
     const onFetchChart = (saveToHistory = true) => {
         return Promise.race([
             new Promise<string>((resolve) => {
-                resolverRef.current = resolve
+                if (resolverRef && "current" in resolverRef) {
+                    resolverRef.current = resolve
+                }
                 if (saveToHistory) {
                     onExport()
                 } else {
                     handleExportWithoutHistory()
                 }
             }),
-            new Promise<string>((_, reject) => {
+            new Promise<string>((_, reject) =>
-                const currentResolver = resolverRef.current
+                setTimeout(
-                setTimeout(() => {
+                    () =>
-                    if (resolverRef.current === currentResolver) {
+                        reject(
-                        resolverRef.current = null
+                            new Error(
-                    }
+                                "Chart export timed out after 10 seconds",
-                    reject(new Error("Chart export timed out after 10 seconds"))
+                            ),
-                }, 10000)
+                        ),
-            }),
+                    10000,
+                ),
+            ),
         ])
     }
 
@@ -174,8 +173,6 @@ export default function ChatPanel({
     const [dailyTokenLimit, setDailyTokenLimit] = useState(0)
     const [tpmLimit, setTpmLimit] = useState(0)
     const [minimalStyle, setMinimalStyle] = useState(false)
-    const [vlmValidationEnabled, setVlmValidationEnabled] = useState(false)
-    const [shouldFocusInput, setShouldFocusInput] = useState(false)
 
     // Restore input from sessionStorage on mount (when ChatPanel remounts due to key change)
     useEffect(() => {
@@ -185,14 +182,6 @@ export default function ChatPanel({
         }
     }, [])
 
-    // Load VLM validation setting from localStorage on mount
-    useEffect(() => {
-        const stored = localStorage.getItem(STORAGE_KEYS.vlmValidationEnabled)
-        if (stored !== null) {
-            setVlmValidationEnabled(stored === "true")
-        }
-    }, [])
-
     // Check config on mount
     useEffect(() => {
         fetch(getApiEndpoint("/api/config"))
@@ -280,46 +269,6 @@ export default function ChatPanel({
     > | null>(null)
     const LOCAL_STORAGE_DEBOUNCE_MS = 1000 // Save at most once per second
 
-    // Validation state for displaying VLM validation progress
-    // Key: toolCallId, Value: ValidationState
-    const [validationStates, setValidationStates] = useState<
-        Record<string, ValidationState>
-    >({})
-
-    // Callback to update validation state from tool handler
-    const handleValidationStateChange = useCallback(
-        (toolCallId: string, state: ValidationState) => {
-            setValidationStates((prev) => ({
-                ...prev,
-                [toolCallId]: state,
-            }))
-        },
-        [],
-    )
-
-    // Handler for VLM validation setting change
-    const handleVlmValidationChange = useCallback((value: boolean) => {
-        setVlmValidationEnabled(value)
-        localStorage.setItem(STORAGE_KEYS.vlmValidationEnabled, String(value))
-    }, [])
-
-    // Ref to store the sendMessage function for use in callbacks
-    const sendMessageRef = useRef<typeof sendMessage | null>(null)
-
-    // Callback to improve diagram with validation suggestions
-    const handleImproveWithSuggestions = useCallback((feedback: string) => {
-        if (sendMessageRef.current) {
-            // Send the feedback as a new user message to trigger regeneration
-            sendMessageRef.current({
-                role: "user",
-                parts: [{ type: "text", text: feedback }],
-            })
-        }
-    }, [])
-
-    // VLM validation hook using AI SDK's useObject
-    const { validateWithFallback } = useValidateDiagram()
-
     // Diagram tool handlers (display_diagram, edit_diagram, append_diagram)
     const { handleToolCall } = useDiagramToolHandlers({
         partialXmlRef,
@@ -328,11 +277,6 @@ export default function ChatPanel({
         onDisplayChart,
         onFetchChart,
         onExport,
-        captureValidationPng,
-        validateDiagram: validateWithFallback,
-        enableVlmValidation: vlmValidationEnabled,
-        sessionId,
-        onValidationStateChange: handleValidationStateChange,
     })
 
     const { messages, sendMessage, addToolOutput, status, error, setMessages } =
@@ -481,11 +425,6 @@ export default function ChatPanel({
             },
         })
 
-    // Store sendMessage in ref for use in callbacks (like handleImproveWithSuggestions)
-    useEffect(() => {
-        sendMessageRef.current = sendMessage
-    }, [sendMessage])
-
     // Ref to track latest messages for unload persistence
     const messagesRef = useRef(messages)
     useEffect(() => {
@@ -673,7 +612,7 @@ export default function ChatPanel({
         // Debounce: save after 1 second of no changes
         localStorageDebounceRef.current = setTimeout(async () => {
             try {
-                if (messages.length > 0 || hasDiagramNow) {
+                if (messages.length > 0) {
                     const sessionData = await buildSessionData({
                         // Only capture thumbnail if there was a diagram AND this isn't a no-diagram session
                         withThumbnail: hasDiagramNow && !isNodiagramSession,
@@ -695,12 +634,12 @@ export default function ChatPanel({
             }
         }
     }, [
-        chartXML,
         messages,
         status,
         sessionIsAvailable,
         currentSessionId,
         buildSessionData,
+        chartXML,
     ])
 
     // Update URL when a new session is created (first message sent)
@@ -726,8 +665,7 @@ export default function ChatPanel({
         const handleVisibilityChange = async () => {
             if (
                 document.visibilityState === "hidden" &&
-                (messagesRef.current.length > 0 ||
+                messagesRef.current.length > 0
-                    isRealDiagram(chartXMLRef.current))
             ) {
                 try {
                     // Attempt to save session - browser may not wait for completion
@@ -882,7 +820,6 @@ export default function ChatPanel({
                 } else {
                     justLoadedSessionIdRef.current = null
                 }
-                setValidationStates({}) // Clear validation states when switching sessions
                 syncUIWithSession(sessionData)
                 router.replace(`?session=${sessionId}`, { scroll: false })
             }
@@ -920,10 +857,8 @@ export default function ChatPanel({
 
         // Clear UI state (can't use syncUIWithSession here because we also need to clear files)
         setMessages([])
-        setInput("")
         clearDiagram()
         setDiagramHistory([])
-        setValidationStates({}) // Clear validation states to prevent memory leak
         handleFileChange([]) // Use handleFileChange to also clear pdfData
         setUrlData(new Map())
         const newSessionId = `session-${Date.now()}-${Math.random()
@@ -936,9 +871,6 @@ export default function ChatPanel({
 
         // Clear URL param to show blank state
         router.replace(window.location.pathname, { scroll: false })
-
-        // After starting a fresh chat, move focus back to the chat input
-        setShouldFocusInput(true)
     }, [
         clearDiagram,
         handleFileChange,
@@ -1032,14 +964,6 @@ export default function ChatPanel({
                         ...(config.awsSessionToken && {
                             "x-aws-session-token": config.awsSessionToken,
                         }),
-                        // Vertex AI credentials (Express Mode)
-                        ...(config.vertexApiKey && {
-                            "x-vertex-api-key": config.vertexApiKey,
-                        }),
-                    }),
-                    // Send selected model ID for server model lookup (apiKeyEnv/baseUrlEnv)
-                    ...(config.selectedModelId && {
-                        "x-selected-model-id": config.selectedModelId,
                     }),
                     ...(minimalStyle && {
                         "x-minimal-style": "true",
@@ -1330,8 +1254,6 @@ export default function ChatPanel({
                     onSelectSession={handleSelectSession}
                     onDeleteSession={handleDeleteSession}
                     loadedMessageIdsRef={loadedMessageIdsRef}
-                    validationStates={validationStates}
-                    onImproveWithSuggestions={handleImproveWithSuggestions}
                 />
             </main>
 
@@ -1367,8 +1289,6 @@ export default function ChatPanel({
                     onModelSelect={modelConfig.setSelectedModelId}
                     showUnvalidatedModels={modelConfig.showUnvalidatedModels}
                     onConfigureModels={() => setShowModelConfigDialog(true)}
-                    shouldFocus={shouldFocusInput}
-                    onFocused={() => setShouldFocusInput(false)}
                 />
             </footer>
 
@@ -1381,8 +1301,6 @@ export default function ChatPanel({
                 onToggleDarkMode={onToggleDarkMode}
                 minimalStyle={minimalStyle}
                 onMinimalStyleChange={setMinimalStyle}
-                vlmValidationEnabled={vlmValidationEnabled}
-                onVlmValidationChange={handleVlmValidationChange}
             />
 
             <ModelConfigDialog

components/chat/ToolCallCard.tsx

@@ -67,8 +67,8 @@ export function ToolCallCard({
 }: ToolCallCardProps) {
     const callId = part.toolCallId
     const { state, input, output } = part
-    // Default to expanded for all states (user can manually collapse if needed)
+    // Default to collapsed if tool is complete, expanded if still streaming
-    const isExpanded = expandedTools[callId] ?? true
+    const isExpanded = expandedTools[callId] ?? state !== "output-available"
     const toolName = part.type?.replace("tool-", "")
     const isCopied = copiedToolCallId === callId
 

components/chat/ValidationCard.tsx

@@ -1,328 +0,0 @@
-"use client"
-
-import {
-    AlertTriangle,
-    Check,
-    ChevronDown,
-    ChevronUp,
-    Eye,
-    ImageIcon,
-    RefreshCw,
-    X,
-} from "lucide-react"
-import Image from "next/image"
-import { useState } from "react"
-import { useDictionary } from "@/hooks/use-dictionary"
-import type { ValidationResult } from "@/lib/diagram-validator"
-
-export type ValidationStatus =
-    | "idle"
-    | "capturing"
-    | "validating"
-    | "success"
-    | "success_with_warnings"
-    | "failed"
-    | "error"
-    | "skipped"
-
-export interface ValidationState {
-    status: ValidationStatus
-    attempt?: number
-    maxAttempts?: number
-    result?: ValidationResult
-    error?: string
-    imageData?: string // Base64 PNG data URL
-}
-
-interface ValidationCardProps {
-    state: ValidationState
-    onImproveWithSuggestions?: (feedback: string) => void
-}
-
-export function ValidationCard({
-    state,
-    onImproveWithSuggestions,
-}: ValidationCardProps) {
-    const dict = useDictionary()
-    const [isExpanded, setIsExpanded] = useState(
-        state.status === "validating" || state.status === "failed",
-    )
-    const [hasRequestedImprovement, setHasRequestedImprovement] =
-        useState(false)
-
-    // Generate improvement feedback from validation result
-    const generateImprovementFeedback = (): string => {
-        if (!state.result) return ""
-
-        const lines: string[] = []
-        lines.push(
-            "Please improve the diagram based on the following visual analysis feedback:",
-        )
-        lines.push("")
-
-        if (state.result.issues.length > 0) {
-            lines.push("Issues to address:")
-            for (const issue of state.result.issues) {
-                lines.push(
-                    `  - [${issue.severity}] ${issue.type}: ${issue.description}`,
-                )
-            }
-            lines.push("")
-        }
-
-        if (state.result.suggestions.length > 0) {
-            lines.push("Suggestions for improvement:")
-            for (const suggestion of state.result.suggestions) {
-                lines.push(`  - ${suggestion}`)
-            }
-            lines.push("")
-        }
-
-        lines.push("Regenerate the diagram with these improvements applied.")
-        return lines.join("\n")
-    }
-
-    const handleImproveClick = () => {
-        if (
-            !onImproveWithSuggestions ||
-            !state.result ||
-            hasRequestedImprovement
-        )
-            return
-        setHasRequestedImprovement(true)
-        const feedback = generateImprovementFeedback()
-        onImproveWithSuggestions(feedback)
-    }
-
-    // Check if we should show the improve button
-    const showImproveButton =
-        onImproveWithSuggestions &&
-        state.result &&
-        (state.status === "success" ||
-            state.status === "success_with_warnings" ||
-            state.status === "skipped") &&
-        (state.result.issues.length > 0 || state.result.suggestions.length > 0)
-
-    const getStatusDisplay = () => {
-        switch (state.status) {
-            case "capturing":
-                return {
-                    label: dict.validation.capturing,
-                    color: "text-blue-600 bg-blue-50",
-                    icon: (
-                        <div className="h-4 w-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
-                    ),
-                }
-            case "validating":
-                return {
-                    label: state.attempt
-                        ? dict.validation.validatingWithAttempt
-                              .replace("{attempt}", String(state.attempt))
-                              .replace("{max}", String(state.maxAttempts || 3))
-                        : dict.validation.validating,
-                    color: "text-blue-600 bg-blue-50",
-                    icon: (
-                        <div className="h-4 w-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
-                    ),
-                }
-            case "success":
-                return {
-                    label: dict.validation.valid,
-                    color: "text-green-600 bg-green-50",
-                    icon: <Check className="h-4 w-4" aria-hidden="true" />,
-                }
-            case "success_with_warnings":
-                return {
-                    label: dict.validation.validWithWarnings,
-                    color: "text-amber-600 bg-amber-50",
-                    icon: (
-                        <AlertTriangle className="h-4 w-4" aria-hidden="true" />
-                    ),
-                }
-            case "failed":
-                return {
-                    label: dict.validation.issuesFound,
-                    color: "text-yellow-600 bg-yellow-50",
-                    icon: (
-                        <AlertTriangle className="h-4 w-4" aria-hidden="true" />
-                    ),
-                }
-            case "error":
-                return {
-                    label: dict.validation.error,
-                    color: "text-red-600 bg-red-50",
-                    icon: <X className="h-4 w-4" aria-hidden="true" />,
-                }
-            case "skipped":
-                return {
-                    label: dict.validation.skipped,
-                    color: "text-gray-600 bg-gray-50",
-                    icon: <Check className="h-4 w-4" aria-hidden="true" />,
-                }
-            default:
-                return null
-        }
-    }
-
-    const statusDisplay = getStatusDisplay()
-    if (!statusDisplay || state.status === "idle") return null
-
-    return (
-        <div className="my-3 rounded-xl border border-border/60 bg-muted/30 overflow-hidden">
-            <div className="flex items-center justify-between px-4 py-3 bg-muted/50">
-                <div className="flex items-center gap-2">
-                    <div className="w-6 h-6 rounded-md bg-primary/10 flex items-center justify-center">
-                        <Eye
-                            className="w-3.5 h-3.5 text-primary"
-                            aria-hidden="true"
-                        />
-                    </div>
-                    <span className="text-sm font-medium text-foreground/80">
-                        {dict.validation.title}
-                    </span>
-                </div>
-                <div className="flex items-center gap-2">
-                    <span
-                        className={`text-xs font-medium px-2 py-0.5 rounded-full flex items-center gap-1 ${statusDisplay.color}`}
-                    >
-                        {statusDisplay.icon}
-                        <span className="ml-1">{statusDisplay.label}</span>
-                    </span>
-                    {(state.result || state.error) && (
-                        <button
-                            type="button"
-                            onClick={() => setIsExpanded(!isExpanded)}
-                            className="p-1 rounded hover:bg-muted transition-colors"
-                        >
-                            {isExpanded ? (
-                                <ChevronUp
-                                    className="w-4 h-4 text-muted-foreground"
-                                    aria-hidden="true"
-                                />
-                            ) : (
-                                <ChevronDown
-                                    className="w-4 h-4 text-muted-foreground"
-                                    aria-hidden="true"
-                                />
-                            )}
-                        </button>
-                    )}
-                </div>
-            </div>
-
-            {/* Validation details when expanded */}
-            {isExpanded && (state.result || state.imageData) && (
-                <div className="px-4 py-3 border-t border-border/40 bg-muted/20 space-y-3">
-                    {/* Captured image */}
-                    {state.imageData && (
-                        <div>
-                            <div className="text-xs font-medium text-foreground/70 mb-2 flex items-center gap-1">
-                                <ImageIcon
-                                    className="h-3 w-3"
-                                    aria-hidden="true"
-                                />
-                                {dict.validation.capturedScreenshot}
-                            </div>
-                            <div className="rounded-lg border border-border/50 overflow-hidden bg-white">
-                                <Image
-                                    src={state.imageData}
-                                    alt="Captured diagram for validation"
-                                    width={400}
-                                    height={300}
-                                    className="w-full h-auto max-h-48 object-contain"
-                                    unoptimized
-                                />
-                            </div>
-                        </div>
-                    )}
-
-                    {/* Issues */}
-                    {state.result && state.result.issues.length > 0 && (
-                        <div>
-                            <div className="text-xs font-medium text-foreground/70 mb-2">
-                                {dict.validation.issuesFoundLabel}
-                            </div>
-                            <div className="space-y-2">
-                                {state.result.issues.map((issue, index) => (
-                                    <div
-                                        key={index}
-                                        className={`text-xs px-3 py-2 rounded-lg border ${
-                                            issue.severity === "critical"
-                                                ? "bg-red-50 border-red-200 text-red-700 dark:bg-red-950 dark:border-red-800 dark:text-red-300"
-                                                : "bg-yellow-50 border-yellow-200 text-yellow-700 dark:bg-yellow-950 dark:border-yellow-800 dark:text-yellow-300"
-                                        }`}
-                                    >
-                                        <span className="font-medium uppercase text-[10px] mr-2">
-                                            [{issue.type}]
-                                        </span>
-                                        {issue.description}
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-                    )}
-
-                    {/* Suggestions */}
-                    {state.result && state.result.suggestions.length > 0 && (
-                        <div>
-                            <div className="text-xs font-medium text-foreground/70 mb-2">
-                                {dict.validation.suggestions}
-                            </div>
-                            <ul className="text-xs text-foreground/60 space-y-1 list-disc list-inside">
-                                {state.result.suggestions.map(
-                                    (suggestion, index) => (
-                                        <li key={index}>{suggestion}</li>
-                                    ),
-                                )}
-                            </ul>
-                        </div>
-                    )}
-
-                    {/* Valid result message */}
-                    {state.result?.valid &&
-                        state.result.issues.length === 0 && (
-                            <div className="text-xs text-green-600 dark:text-green-400">
-                                {dict.validation.passedValidation}
-                            </div>
-                        )}
-                </div>
-            )}
-
-            {/* Improve with Suggestions button - shown when validation passed but has suggestions */}
-            {showImproveButton && (
-                <div className="px-4 py-3 border-t border-border/40 bg-muted/10">
-                    {hasRequestedImprovement ? (
-                        <div className="flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-green-600 dark:text-green-400">
-                            <Check className="h-4 w-4" aria-hidden="true" />
-                            {dict.validation.improvementRequested}
-                        </div>
-                    ) : (
-                        <>
-                            <button
-                                type="button"
-                                onClick={handleImproveClick}
-                                className="w-full flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium text-primary bg-primary/10 hover:bg-primary/20 rounded-lg transition-colors"
-                            >
-                                <RefreshCw
-                                    className="h-4 w-4"
-                                    aria-hidden="true"
-                                />
-                                {dict.validation.improveWithSuggestions}
-                            </button>
-                            <p className="text-xs text-muted-foreground mt-2 text-center">
-                                {dict.validation.regenerateWithFeedback}
-                            </p>
-                        </>
-                    )}
-                </div>
-            )}
-
-            {/* Error details when expanded */}
-            {isExpanded && state.error && (
-                <div className="px-4 py-3 border-t border-border/40 bg-red-50/50">
-                    <div className="text-xs text-red-600">{state.error}</div>
-                </div>
-            )}
-        </div>
-    )
-}

components/model-config-dialog.tsx

@@ -78,7 +78,6 @@ const PROVIDER_LOGO_MAP: Record<string, string> = {
     sglang: "openai", // SGLang is OpenAI-compatible
     gateway: "vercel",
     edgeone: "tencent-cloud",
-    vertexai: "google",
     doubao: "bytedance",
     modelscope: "modelscope",
 }
@@ -238,7 +237,6 @@ export function ModelConfigDialog({
             "awsAccessKeyId",
             "awsSecretAccessKey",
             "awsRegion",
-            "vertexApiKey",
         ]
         if (credentialFields.includes(field)) {
             setValidationStatus("idle")
@@ -282,7 +280,6 @@ export function ModelConfigDialog({
         // Check credentials based on provider type
         const isBedrock = selectedProvider.provider === "bedrock"
         const isEdgeOne = selectedProvider.provider === "edgeone"
-        const isVertexAI = selectedProvider.provider === "vertexai"
         if (isBedrock) {
             if (
                 !selectedProvider.awsAccessKeyId ||
@@ -291,11 +288,6 @@ export function ModelConfigDialog({
             ) {
                 return
             }
-        } else if (isVertexAI) {
-            // Vertex AI requires vertexApiKey for Express Mode
-            if (!selectedProvider.vertexApiKey) {
-                return
-            }
         } else if (!isEdgeOne && !selectedProvider.apiKey) {
             return
         }
@@ -336,8 +328,6 @@ export function ModelConfigDialog({
                         awsAccessKeyId: selectedProvider.awsAccessKeyId,
                         awsSecretAccessKey: selectedProvider.awsSecretAccessKey,
                         awsRegion: selectedProvider.awsRegion,
-                        // Vertex AI credentials (Express Mode)
-                        vertexApiKey: selectedProvider.vertexApiKey,
                     }),
                 })
                 const data = await response.json()
@@ -443,12 +433,12 @@ export function ModelConfigDialog({
                                             }}
                                             className={cn(
                                                 "group flex items-center gap-3 px-3 py-2.5 rounded-xl w-full",
-                                                "text-left text-sm transition-all duration-150 border border-transparent",
+                                                "text-left text-sm transition-all duration-150",
                                                 "hover:bg-interactive-hover",
                                                 "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 border-border-subtle",
+                                                    "bg-surface-0 shadow-sm ring-1 ring-border-subtle",
                                             )}
                                         >
                                             <div
@@ -877,162 +867,7 @@ export function ModelConfigDialog({
                                                     </div>
                                                 </>
                                             ) : selectedProvider.provider ===
-                                              "vertexai" ? (
+                                              "edgeone" ? (
-                                                <>
-                                                    {/* Vertex AI API Key */}
-                                                    <div className="space-y-2">
-                                                        <Label
-                                                            htmlFor="vertex-api-key"
-                                                            className="text-xs font-medium flex items-center gap-1.5"
-                                                        >
-                                                            <Key className="h-3.5 w-3.5 text-muted-foreground" />
-                                                            API Key
-                                                        </Label>
-                                                        <div className="flex gap-2">
-                                                            <div className="relative flex-1">
-                                                                <Input
-                                                                    id="vertex-api-key"
-                                                                    type={
-                                                                        showApiKey
-                                                                            ? "text"
-                                                                            : "password"
-                                                                    }
-                                                                    value={
-                                                                        selectedProvider.vertexApiKey ||
-                                                                        ""
-                                                                    }
-                                                                    onChange={(
-                                                                        e,
-                                                                    ) =>
-                                                                        handleProviderUpdate(
-                                                                            "vertexApiKey",
-                                                                            e
-                                                                                .target
-                                                                                .value,
-                                                                        )
-                                                                    }
-                                                                    placeholder="Enter your Vertex AI API key"
-                                                                    className="h-9 pr-10 font-mono text-xs"
-                                                                />
-                                                                <button
-                                                                    type="button"
-                                                                    onClick={() =>
-                                                                        setShowApiKey(
-                                                                            !showApiKey,
-                                                                        )
-                                                                    }
-                                                                    aria-label={
-                                                                        showApiKey
-                                                                            ? "Hide API key"
-                                                                            : "Show API key"
-                                                                    }
-                                                                    className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded"
-                                                                >
-                                                                    {showApiKey ? (
-                                                                        <EyeOff className="h-4 w-4" />
-                                                                    ) : (
-                                                                        <Eye className="h-4 w-4" />
-                                                                    )}
-                                                                </button>
-                                                            </div>
-                                                            <Button
-                                                                variant={
-                                                                    validationStatus ===
-                                                                    "success"
-                                                                        ? "outline"
-                                                                        : "default"
-                                                                }
-                                                                size="sm"
-                                                                onClick={
-                                                                    handleValidate
-                                                                }
-                                                                disabled={
-                                                                    !selectedProvider.vertexApiKey ||
-                                                                    validationStatus ===
-                                                                        "validating"
-                                                                }
-                                                                className={cn(
-                                                                    "h-9 px-4",
-                                                                    validationStatus ===
-                                                                        "success" &&
-                                                                        "text-success border-success/30 bg-success-muted hover:bg-success-muted",
-                                                                )}
-                                                            >
-                                                                {validationStatus ===
-                                                                "validating" ? (
-                                                                    <Loader2 className="h-4 w-4 animate-spin" />
-                                                                ) : validationStatus ===
-                                                                  "success" ? (
-                                                                    <>
-                                                                        <Check className="h-4 w-4 mr-1.5 animate-check-pop" />
-                                                                        {
-                                                                            dict
-                                                                                .modelConfig
-                                                                                .verified
-                                                                        }
-                                                                    </>
-                                                                ) : (
-                                                                    dict
-                                                                        .modelConfig
-                                                                        .test
-                                                                )}
-                                                            </Button>
-                                                        </div>
-                                                        {validationStatus ===
-                                                            "error" &&
-                                                            validationError && (
-                                                                <p className="text-xs text-destructive flex items-center gap-1">
-                                                                    <X className="h-3 w-3" />
-                                                                    {
-                                                                        validationError
-                                                                    }
-                                                                </p>
-                                                            )}
-                                                    </div>
-
-                                                    {/* Base URL (optional) */}
-                                                    <div className="space-y-2">
-                                                        <Label
-                                                            htmlFor="vertex-base-url"
-                                                            className="text-xs font-medium flex items-center gap-1.5"
-                                                        >
-                                                            <Link2 className="h-3.5 w-3.5 text-muted-foreground" />
-                                                            {formatMessage(
-                                                                dict.modelConfig
-                                                                    .baseUrlWithExample,
-                                                                {
-                                                                    example:
-                                                                        PROVIDER_INFO[
-                                                                            selectedProvider
-                                                                                .provider
-                                                                        ]
-                                                                            .defaultBaseUrl ||
-                                                                        "https://api.example.com/v1",
-                                                                },
-                                                            )}
-                                                        </Label>
-                                                        <Input
-                                                            id="vertex-base-url"
-                                                            value={
-                                                                selectedProvider.baseUrl ||
-                                                                ""
-                                                            }
-                                                            onChange={(e) =>
-                                                                handleProviderUpdate(
-                                                                    "baseUrl",
-                                                                    e.target
-                                                                        .value,
-                                                                )
-                                                            }
-                                                            placeholder="Custom endpoint URL"
-                                                            className="h-9 font-mono text-xs"
-                                                        />
-                                                    </div>
-                                                </>
-                                            ) : selectedProvider.provider ===
-                                                  "ollama" ||
-                                              selectedProvider.provider ===
-                                                  "edgeone" ? (
                                                 <div className="space-y-3">
                                                     <div className="flex items-center gap-2">
                                                         <Button
@@ -1213,19 +1048,17 @@ export function ModelConfigDialog({
                                                             className="text-xs font-medium flex items-center gap-1.5"
                                                         >
                                                             <Link2 className="h-3.5 w-3.5 text-muted-foreground" />
-                                                            {formatMessage(
+                                                            {
                                                                 dict.modelConfig
-                                                                    .baseUrlWithExample,
+                                                                    .baseUrl
+                                                            }
+                                                            <span className="text-muted-foreground font-normal">
                                                                 {
-                                                                    example:
+                                                                    dict
-                                                                        PROVIDER_INFO[
+                                                                        .modelConfig
-                                                                            selectedProvider
+                                                                        .optional
-                                                                                .provider
+                                                                }
-                                                                        ]
+                                                            </span>
-                                                                            .defaultBaseUrl ||
-                                                                        "https://api.example.com/v1",
-                                                                },
-                                                            )}
                                                         </Label>
                                                         <Input
                                                             id="base-url"

components/model-selector.tsx

@@ -5,10 +5,8 @@ import {
     Bot,
     Check,
     ChevronDown,
-    Monitor,
     Server,
     Settings2,
-    User,
 } from "lucide-react"
 import { useEffect, useMemo, useRef, useState } from "react"
 import {
@@ -21,7 +19,6 @@ import {
     ModelSelectorLogo,
     ModelSelectorName,
     ModelSelector as ModelSelectorRoot,
-    ModelSelectorSectionHeader,
     ModelSelectorSeparator,
     ModelSelectorTrigger,
 } from "@/components/ai-elements/model-selector"
@@ -52,7 +49,6 @@ const PROVIDER_LOGO_MAP: Record<string, string> = {
     sglang: "openai", // SGLang is OpenAI-compatible, use OpenAI logo
     gateway: "vercel",
     edgeone: "tencent-cloud",
-    vertexai: "google",
     doubao: "bytedance",
     modelscope: "modelscope",
 }
@@ -66,11 +62,7 @@ function groupModelsByProvider(
         { provider: string; models: FlattenedModel[] }
     >()
     for (const model of models) {
-        // For server models, strip "Server · " prefix for cleaner grouping
+        const key = model.providerLabel
-        const key =
-            model.source === "server"
-                ? model.providerLabel.replace(/^Server · /, "")
-                : model.providerLabel
         const existing = groups.get(key)
         if (existing) {
             existing.models.push(model)
@@ -98,26 +90,10 @@ export function ModelSelector({
         }
         return models.filter((m) => m.validated === true)
     }, [models, showUnvalidatedModels])
-
+    const groupedModels = useMemo(
-    // Separate server and user models
+        () => groupModelsByProvider(displayModels),
-    const serverModels = useMemo(
-        () => displayModels.filter((m) => m.source === "server"),
         [displayModels],
     )
-    const userModels = useMemo(
-        () => displayModels.filter((m) => m.source !== "server"),
-        [displayModels],
-    )
-
-    // Group each category separately
-    const groupedServerModels = useMemo(
-        () => groupModelsByProvider(serverModels),
-        [serverModels],
-    )
-    const groupedUserModels = useMemo(
-        () => groupModelsByProvider(userModels),
-        [userModels],
-    )
 
     // Find selected model for display
     const selectedModel = useMemo(
@@ -184,7 +160,7 @@ export function ModelSelector({
                         size="sm"
                         disabled={disabled}
                         className={cn(
-                            "hover:bg-accent gap-1.5 h-8 px-2 transition-[padding,background-color] duration-150 ease-in-out",
+                            "hover:bg-accent gap-1.5 h-8 px-2 transition-all duration-150 ease-in-out",
                             !showLabel && "px-1.5 justify-center",
                         )}
                         // accessibility: expose label to screen readers
@@ -221,169 +197,83 @@ export function ModelSelector({
                                 : dict.modelConfig.noModelsFound}
                         </ModelSelectorEmpty>
 
-                        {/* Server Default Option - only show when no server models are configured */}
+                        {/* Server Default Option */}
-                        {serverModels.length === 0 && (
+                        <ModelSelectorGroup heading={dict.modelConfig.default}>
-                            <ModelSelectorGroup
+                            <ModelSelectorItem
-                                heading={dict.modelConfig.default}
+                                value="__server_default__"
+                                onSelect={handleSelect}
+                                className={cn(
+                                    "cursor-pointer",
+                                    !selectedModelId && "bg-accent",
+                                )}
                             >
-                                <ModelSelectorItem
+                                <Check
-                                    value="__server_default__"
-                                    onSelect={handleSelect}
                                     className={cn(
-                                        "cursor-pointer",
+                                        "mr-2 h-4 w-4",
-                                        !selectedModelId && "bg-accent",
+                                        !selectedModelId
+                                            ? "opacity-100"
+                                            : "opacity-0",
                                     )}
+                                />
+                                <Server className="mr-2 h-4 w-4 text-muted-foreground" />
+                                <ModelSelectorName>
+                                    {dict.modelConfig.serverDefault}
+                                </ModelSelectorName>
+                            </ModelSelectorItem>
+                        </ModelSelectorGroup>
+
+                        {/* Configured Models by Provider */}
+                        {Array.from(groupedModels.entries()).map(
+                            ([
+                                providerLabel,
+                                { provider, models: providerModels },
+                            ]) => (
+                                <ModelSelectorGroup
+                                    key={providerLabel}
+                                    heading={providerLabel}
                                 >
-                                    <Check
+                                    {providerModels.map((model) => (
-                                        className={cn(
+                                        <ModelSelectorItem
-                                            "mr-2 h-4 w-4",
+                                            key={model.id}
-                                            !selectedModelId
+                                            value={model.modelId}
-                                                ? "opacity-100"
+                                            onSelect={() =>
-                                                : "opacity-0",
+                                                handleSelect(model.id)
-                                        )}
+                                            }
-                                    />
+                                            className="cursor-pointer"
-                                    <Server className="mr-2 h-4 w-4 text-muted-foreground" />
-                                    <ModelSelectorName>
-                                        {dict.modelConfig.serverDefault}
-                                    </ModelSelectorName>
-                                </ModelSelectorItem>
-                            </ModelSelectorGroup>
-                        )}
-
-                        {/* Server Models Section */}
-                        {serverModels.length > 0 && (
-                            <>
-                                <ModelSelectorSectionHeader
-                                    icon={<Monitor />}
-                                    label={dict.modelConfig.serverModels}
-                                />
-                                {Array.from(groupedServerModels.entries()).map(
-                                    ([
-                                        providerLabel,
-                                        { provider, models: providerModels },
-                                    ]) => (
-                                        <ModelSelectorGroup
-                                            key={`server-${providerLabel}`}
-                                            heading={providerLabel}
-                                            className="[&>[cmdk-group-heading]]:pl-4"
                                         >
-                                            {providerModels.map((model) => (
+                                            <Check
-                                                <ModelSelectorItem
+                                                className={cn(
-                                                    key={model.id}
+                                                    "mr-2 h-4 w-4",
-                                                    value={model.modelId}
+                                                    selectedModelId === model.id
-                                                    onSelect={() =>
+                                                        ? "opacity-100"
-                                                        handleSelect(model.id)
+                                                        : "opacity-0",
+                                                )}
+                                            />
+                                            <ModelSelectorLogo
+                                                provider={
+                                                    PROVIDER_LOGO_MAP[
+                                                        provider
+                                                    ] || provider
+                                                }
+                                                className="mr-2"
+                                            />
+                                            <ModelSelectorName>
+                                                {model.modelId}
+                                            </ModelSelectorName>
+                                            {model.validated !== true && (
+                                                <span
+                                                    title={
+                                                        dict.modelConfig
+                                                            .unvalidatedModelWarning
                                                     }
-                                                    className="cursor-pointer"
                                                 >
-                                                    <Check
+                                                    <AlertTriangle className="ml-auto h-3 w-3 text-warning" />
-                                                        className={cn(
+                                                </span>
-                                                            "mr-2 h-4 w-4",
+                                            )}
-                                                            selectedModelId ===
+                                        </ModelSelectorItem>
-                                                                model.id
+                                    ))}
-                                                                ? "opacity-100"
+                                </ModelSelectorGroup>
-                                                                : "opacity-0",
+                            ),
-                                                        )}
-                                                    />
-                                                    <ModelSelectorLogo
-                                                        provider={
-                                                            PROVIDER_LOGO_MAP[
-                                                                provider
-                                                            ] || provider
-                                                        }
-                                                        className="mr-2"
-                                                    />
-                                                    <ModelSelectorName>
-                                                        {model.modelId}
-                                                    </ModelSelectorName>
-                                                    {model.isDefault && (
-                                                        <span
-                                                            title={
-                                                                dict.modelConfig
-                                                                    .serverDefaultModel
-                                                            }
-                                                            className="ml-auto text-xs text-muted-foreground"
-                                                        >
-                                                            {
-                                                                dict.modelConfig
-                                                                    .default
-                                                            }
-                                                        </span>
-                                                    )}
-                                                </ModelSelectorItem>
-                                            ))}
-                                        </ModelSelectorGroup>
-                                    ),
-                                )}
-                            </>
-                        )}
-
-                        {/* User Models Section */}
-                        {userModels.length > 0 && (
-                            <>
-                                {serverModels.length > 0 && (
-                                    <ModelSelectorSeparator />
-                                )}
-                                <ModelSelectorSectionHeader
-                                    icon={<User />}
-                                    label={dict.modelConfig.userModels}
-                                />
-                                {Array.from(groupedUserModels.entries()).map(
-                                    ([
-                                        providerLabel,
-                                        { provider, models: providerModels },
-                                    ]) => (
-                                        <ModelSelectorGroup
-                                            key={`user-${providerLabel}`}
-                                            heading={providerLabel}
-                                            className="[&>[cmdk-group-heading]]:pl-4"
-                                        >
-                                            {providerModels.map((model) => (
-                                                <ModelSelectorItem
-                                                    key={model.id}
-                                                    value={model.modelId}
-                                                    onSelect={() =>
-                                                        handleSelect(model.id)
-                                                    }
-                                                    className="cursor-pointer"
-                                                >
-                                                    <Check
-                                                        className={cn(
-                                                            "mr-2 h-4 w-4",
-                                                            selectedModelId ===
-                                                                model.id
-                                                                ? "opacity-100"
-                                                                : "opacity-0",
-                                                        )}
-                                                    />
-                                                    <ModelSelectorLogo
-                                                        provider={
-                                                            PROVIDER_LOGO_MAP[
-                                                                provider
-                                                            ] || provider
-                                                        }
-                                                        className="mr-2"
-                                                    />
-                                                    <ModelSelectorName>
-                                                        {model.modelId}
-                                                    </ModelSelectorName>
-                                                    {model.validated !==
-                                                        true && (
-                                                        <span
-                                                            title={
-                                                                dict.modelConfig
-                                                                    .unvalidatedModelWarning
-                                                            }
-                                                        >
-                                                            <AlertTriangle className="ml-auto h-3 w-3 text-warning" />
-                                                        </span>
-                                                    )}
-                                                </ModelSelectorItem>
-                                            ))}
-                                        </ModelSelectorGroup>
-                                    ),
-                                )}
-                            </>
                         )}
 
                         {/* Configure Option */}
@@ -392,7 +282,7 @@ export function ModelSelector({
                             <ModelSelectorItem
                                 value="__configure__"
                                 onSelect={handleSelect}
-                                className="cursor-pointer text-muted-foreground hover:text-foreground"
+                                className="cursor-pointer"
                             >
                                 <Settings2 className="mr-2 h-4 w-4" />
                                 <ModelSelectorName>

components/settings-dialog.tsx

@@ -67,8 +67,6 @@ interface SettingsDialogProps {
     onToggleDarkMode: () => void
     minimalStyle?: boolean
     onMinimalStyleChange?: (value: boolean) => void
-    vlmValidationEnabled?: boolean
-    onVlmValidationChange?: (value: boolean) => void
 }
 
 export const STORAGE_ACCESS_CODE_KEY = "next-ai-draw-io-access-code"
@@ -90,8 +88,6 @@ function SettingsContent({
     onToggleDarkMode,
     minimalStyle = false,
     onMinimalStyleChange = () => {},
-    vlmValidationEnabled = false,
-    onVlmValidationChange = () => {},
 }: SettingsDialogProps) {
     const dict = useDictionary()
     const router = useRouter()
@@ -172,13 +168,6 @@ function SettingsContent({
         // Save locale to localStorage for persistence across restarts
         localStorage.setItem("next-ai-draw-io-locale", lang)
 
-        // Notify Electron main process to update its menu language
-        if (window.electronAPI?.setUserLocale) {
-            window.electronAPI.setUserLocale(lang).catch((error) => {
-                console.error("Failed to sync locale with Electron:", error)
-            })
-        }
-
         const parts = pathname.split("/")
         if (parts.length > 1 && i18n.locales.includes(parts[1] as Locale)) {
             parts[1] = lang
@@ -414,25 +403,6 @@ function SettingsContent({
                         </div>
                     </SettingItem>
 
-                    {/* VLM Diagram Validation */}
-                    <SettingItem
-                        label={dict.settings.diagramValidation}
-                        description={dict.settings.diagramValidationDescription}
-                    >
-                        <div className="flex items-center gap-2">
-                            <Switch
-                                id="vlm-validation"
-                                checked={vlmValidationEnabled}
-                                onCheckedChange={onVlmValidationChange}
-                            />
-                            <span className="text-sm text-muted-foreground">
-                                {vlmValidationEnabled
-                                    ? dict.settings.enabled
-                                    : dict.settings.disabled}
-                            </span>
-                        </div>
-                    </SettingItem>
-
                     {/* Send Shortcut */}
                     <SettingItem
                         label={dict.settings.sendShortcut}
@@ -455,7 +425,7 @@ function SettingsContent({
                         >
                             <SelectTrigger
                                 id="send-shortcut-select"
-                                className="w-auto h-9 rounded-xl"
+                                className="w-[170px] h-9 rounded-xl"
                             >
                                 <SelectValue />
                             </SelectTrigger>

contexts/diagram-context.tsx

@@ -2,7 +2,7 @@
 
 import type React from "react"
 import { createContext, useContext, useEffect, useRef, useState } from "react"
-import type { DrawIoEmbedRef } from "react-drawio"
+import type { DrawIoEmbedRef, EventAutoSave } from "react-drawio"
 import { toast } from "sonner"
 import type { ExportFormat } from "@/components/save-dialog"
 import { getApiEndpoint } from "@/lib/base-path"
@@ -20,10 +20,10 @@ interface DiagramContextType {
     loadDiagram: (chart: string, skipValidation?: boolean) => string | null
     handleExport: () => void
     handleExportWithoutHistory: () => void
-    resolverRef: React.MutableRefObject<((value: string) => void) | null>
+    resolverRef: React.Ref<((value: string) => void) | null>
-    drawioRef: React.MutableRefObject<DrawIoEmbedRef | null>
+    drawioRef: React.Ref<DrawIoEmbedRef | null>
     handleDiagramExport: (data: any) => void
-    handleDiagramAutoSave: (data: { xml?: string }) => void
+    handleAutoSave: (data: EventAutoSave) => void
     clearDiagram: () => void
     saveDiagramToFile: (
         filename: string,
@@ -32,7 +32,6 @@ interface DiagramContextType {
         successMessage?: string,
     ) => void
     getThumbnailSvg: () => Promise<string | null>
-    captureValidationPng: () => Promise<string | null>
     isDrawioReady: boolean
     onDrawioLoad: () => void
     resetDrawioReady: () => void
@@ -53,8 +52,6 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
     const hasCalledOnLoadRef = useRef(false)
     const drawioRef = useRef<DrawIoEmbedRef | null>(null)
     const resolverRef = useRef<((value: string) => void) | null>(null)
-    // Resolver for PNG export (used for VLM validation)
-    const pngResolverRef = 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 after DrawIO remount (e.g., theme change)
@@ -151,37 +148,6 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         }
     }
 
-    // Capture current diagram as PNG for VLM validation
-    const captureValidationPng = async (): Promise<string | null> => {
-        if (!drawioRef.current) return null
-        // Don't export if diagram is empty
-        if (!isRealDiagram(chartXML)) return null
-
-        try {
-            const pngData = await Promise.race([
-                new Promise<string>((resolve) => {
-                    pngResolverRef.current = resolve
-                    drawioRef.current?.exportDiagram({ format: "png" })
-                }),
-                new Promise<string>((_, reject) =>
-                    setTimeout(
-                        () => reject(new Error("PNG export timeout")),
-                        5000,
-                    ),
-                ),
-            ])
-
-            // PNG data should be a base64 data URL
-            if (pngData?.startsWith("data:image/png")) {
-                return pngData
-            }
-            return null
-        } catch {
-            // Timeout is expected occasionally - don't log as error
-            return null
-        }
-    }
-
     const loadDiagram = (
         chart: string,
         skipValidation?: boolean,
@@ -221,13 +187,6 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
     }
 
     const handleDiagramExport = (data: any) => {
-        // Handle PNG export for VLM validation
-        if (pngResolverRef.current && data.data?.startsWith("data:image/png")) {
-            pngResolverRef.current(data.data)
-            pngResolverRef.current = null
-            return
-        }
-
         // Handle save to file if requested (process raw data before extraction)
         if (saveResolverRef.current.resolver) {
             const format = saveResolverRef.current.format
@@ -268,9 +227,11 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         }
     }
 
-    const handleDiagramAutoSave = (data: { xml?: string }) => {
+    // Handle autosave events from draw.io - keeps chartXML in sync with user modifications
-        if (!data?.xml) return
+    const handleAutoSave = (data: EventAutoSave) => {
-        setChartXML(data.xml)
+        if (data.xml) {
+            setChartXML(data.xml)
+        }
     }
 
     const clearDiagram = () => {
@@ -397,11 +358,10 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
                 resolverRef,
                 drawioRef,
                 handleDiagramExport,
-                handleDiagramAutoSave,
+                handleAutoSave,
                 clearDiagram,
                 saveDiagramToFile,
                 getThumbnailSvg,
-                captureValidationPng,
                 isDrawioReady,
                 onDrawioLoad,
                 resetDrawioReady,

docs/cn/README_CN.md

@@ -200,7 +200,6 @@ npm run dev
 -   OpenAI
 -   Anthropic
 -   Google AI
--   Google Vertex AI
 -   Azure OpenAI
 -   Ollama
 -   OpenRouter
@@ -214,10 +213,6 @@ npm run dev
 
 📖 **[详细的提供商配置指南](./ai-providers.md)** - 查看各提供商的设置说明。
 
-### 服务端多模型配置
-
-管理员可以配置多个服务端模型，让所有用户无需提供个人 API Key 即可使用。通过 `AI_MODELS_CONFIG` 环境变量（JSON 字符串）或 `ai-models.json` 文件配置。
-
 **模型要求**：此任务需要强大的模型能力，因为它涉及生成具有严格格式约束的长文本（draw.io XML）。推荐使用 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 和 DeepSeek V3.2/R1。
 
 注意：`claude` 系列已在带有 AWS、Azure、GCP 等云架构 Logo 的 draw.io 图表上进行训练，因此如果您想创建云架构图，这是最佳选择。

docs/cn/ai-providers.md

@@ -217,63 +217,6 @@ AI_MODEL=openai/gpt-4o
 AI_PROVIDER=google  # 或：openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway, sglang
 ```
 
-## 服务端多模型配置
-
-管理员可以配置多个服务端模型，让所有用户无需提供个人 API Key 即可使用。
-
-### 配置方式
-
-**方式一：环境变量**（推荐用于云部署）
-
-设置 `AI_MODELS_CONFIG` 为 JSON 字符串：
-
-```bash
-AI_MODELS_CONFIG='{"providers":[{"name":"OpenAI","provider":"openai","models":["gpt-4o"],"default":true}]}'
-```
-
-**方式二：配置文件**
-
-在项目根目录创建 `ai-models.json` 文件（或通过 `AI_MODELS_CONFIG_PATH` 指定路径）。
-
-### 配置示例
-
-```json
-{
-  "providers": [
-    {
-      "name": "OpenAI Production",
-      "provider": "openai",
-      "models": ["gpt-4o", "gpt-4o-mini"],
-      "default": true
-    },
-    {
-      "name": "Custom DeepSeek",
-      "provider": "deepseek",
-      "models": ["deepseek-chat"],
-      "apiKeyEnv": "MY_DEEPSEEK_KEY",
-      "baseUrlEnv": "MY_DEEPSEEK_URL"
-    }
-  ]
-}
-```
-
-### 字段说明
-
-| 字段 | 必填 | 说明 |
-|------|------|------|
-| `name` | 是 | 显示名称（支持同一提供商多个配置） |
-| `provider` | 是 | 提供商类型（`openai`, `anthropic`, `google`, `bedrock` 等） |
-| `models` | 是 | 模型 ID 列表 |
-| `default` | 否 | 设为 `true` 表示默认选中该提供商的第一个模型 |
-| `apiKeyEnv` | 否 | 自定义 API Key 环境变量名（默认使用提供商标准变量如 `OPENAI_API_KEY`） |
-| `baseUrlEnv` | 否 | 自定义 Base URL 环境变量名 |
-
-### 说明
-
-- API Key 和凭证通过环境变量提供。默认使用标准变量名（如 `OPENAI_API_KEY`），也可通过 `apiKeyEnv` 指定自定义变量名。
-- `name` 字段允许同一提供商多个配置（例如 "OpenAI Production" 和 "OpenAI Staging" 都使用 `provider: "openai"` 但 `apiKeyEnv` 不同）。
-- 如果配置不存在，应用会回退到 `AI_PROVIDER`/`AI_MODEL` 环境变量配置。
-
 ## 模型能力要求
 
 此任务对模型能力要求极高，因为它涉及生成具有严格格式约束（draw.io XML）的长文本。

docs/en/ai-providers.md

@@ -33,21 +33,6 @@ Optional custom endpoint:
 GOOGLE_BASE_URL=https://your-custom-endpoint
 ```
 
-### Google Vertex AI (Enterprise GCP)
-
-Google Vertex AI offers enterprise-grade features and data residency. **Express Mode** allows for simple API key authentication, making it compatible with edge runtimes like Vercel and Cloudflare.
-
-```bash
-GOOGLE_VERTEX_API_KEY=your_api_key
-AI_MODEL=gemini-2.0-flash
-```
-
-Optional custom endpoint:
-
-```bash
-GOOGLE_VERTEX_BASE_URL=https://your-custom-endpoint
-```
-
 ### OpenAI
 
 ```bash
@@ -232,63 +217,6 @@ If you configure **multiple** API keys, you must explicitly set `AI_PROVIDER`:
 AI_PROVIDER=google  # or: openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway, sglang, modelscope
 ```
 
-## Server-Side Multi-Model Configuration
-
-Administrators can configure multiple server-side models that are available to all users without requiring personal API keys.
-
-### Configuration Methods
-
-**Option 1: Environment Variable** (recommended for cloud deployments)
-
-Set `AI_MODELS_CONFIG` as a JSON string:
-
-```bash
-AI_MODELS_CONFIG='{"providers":[{"name":"OpenAI","provider":"openai","models":["gpt-4o"],"default":true}]}'
-```
-
-**Option 2: Config File**
-
-Create an `ai-models.json` file in the project root (or set `AI_MODELS_CONFIG_PATH` to a custom location).
-
-### Example Configuration
-
-```json
-{
-  "providers": [
-    {
-      "name": "OpenAI Production",
-      "provider": "openai",
-      "models": ["gpt-4o", "gpt-4o-mini"],
-      "default": true
-    },
-    {
-      "name": "Custom DeepSeek",
-      "provider": "deepseek",
-      "models": ["deepseek-chat"],
-      "apiKeyEnv": "MY_DEEPSEEK_KEY",
-      "baseUrlEnv": "MY_DEEPSEEK_URL"
-    }
-  ]
-}
-```
-
-### Field Reference
-
-| Field | Required | Description |
-|-------|----------|-------------|
-| `name` | Yes | Display name (supports multiple configs for same provider) |
-| `provider` | Yes | Provider type (`openai`, `anthropic`, `google`, `bedrock`, etc.) |
-| `models` | Yes | List of model IDs |
-| `default` | No | Set to `true` to auto-select this provider's first model as default |
-| `apiKeyEnv` | No | Custom API key env var name (defaults to provider's standard var like `OPENAI_API_KEY`) |
-| `baseUrlEnv` | No | Custom base URL env var name |
-
-### Notes
-
-- API keys and credentials are provided via environment variables. By default, standard var names are used (e.g., `OPENAI_API_KEY`), but you can specify custom var names with `apiKeyEnv`.
-- The `name` field allows multiple configurations for the same provider (e.g., "OpenAI Production" and "OpenAI Staging" both using `provider: "openai"` but with different `apiKeyEnv` values).
-- If config is not present, the app falls back to `AI_PROVIDER`/`AI_MODEL` environment variable configuration.
-
 ## Model Capability Requirements
 
 This task requires exceptionally strong model capabilities, as it involves generating long-form text with strict formatting constraints (draw.io XML).

docs/en/docker.md

@@ -22,27 +22,6 @@ cp env.example .env
 docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest
 ```
 
-### Using server-side model configuration
-
-You can mount an `ai-models.json` file into the container to provide multiple server-side models without exposing user API keys:
-
-```bash
-docker run -d -p 3000:3000 \
-  -e OPENAI_API_KEY=your_api_key \
-  -v $(pwd)/ai-models.json:/app/ai-models.json:ro \
-  ghcr.io/dayuanjiang/next-ai-draw-io:latest
-```
-
-If you prefer to keep the config in a different path inside the container, set `AI_MODELS_CONFIG_PATH`:
-
-```bash
-docker run -d -p 3000:3000 \
-  -e OPENAI_API_KEY=your_api_key \
-  -e AI_MODELS_CONFIG_PATH=/config/ai-models.json \
-  -v $(pwd)/ai-models.json:/config/ai-models.json:ro \
-  ghcr.io/dayuanjiang/next-ai-draw-io:latest
-```
-
 Open [http://localhost:3000](http://localhost:3000) in your browser.
 
 Replace the environment variables with your preferred AI provider configuration. See [AI Providers](./ai-providers.md) for available options.

docs/ja/README_JA.md

@@ -201,7 +201,6 @@ Next.jsアプリをデプロイする最も簡単な方法は、Next.jsの作成
 -   OpenAI
 -   Anthropic
 -   Google AI
--   Google Vertex AI
 -   Azure OpenAI
 -   Ollama
 -   OpenRouter
@@ -215,10 +214,6 @@ AWS BedrockとOpenRouter以外のすべてのプロバイダーはカスタム
 
 📖 **[詳細なプロバイダー設定ガイド](./ai-providers.md)** - 各プロバイダーの設定手順をご覧ください。
 
-### サーバーサイドマルチモデル設定
-
-管理者は、ユーザーが個人のAPIキーを提供することなく利用できる複数のサーバーサイドモデルを設定できます。`AI_MODELS_CONFIG` 環境変数（JSON文字列）または `ai-models.json` ファイルで設定します。
-
 **モデル要件**：このタスクは厳密なフォーマット制約（draw.io XML）を持つ長文テキスト生成を伴うため、強力なモデル機能が必要です。Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1を推奨します。
 
 注：`claude`シリーズはAWS、Azure、GCPなどのクラウドアーキテクチャロゴ付きのdraw.ioダイアグラムで学習されているため、クラウドアーキテクチャダイアグラムを作成したい場合は最適な選択です。

docs/ja/ai-providers.md

@@ -217,63 +217,6 @@ AI_MODEL=openai/gpt-4o
 AI_PROVIDER=google  # または: openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway, sglang
 ```
 
-## サーバーサイドマルチモデル設定
-
-管理者は、ユーザーが個人のAPIキーを提供することなく利用できる複数のサーバーサイドモデルを設定できます。
-
-### 設定方法
-
-**方法1：環境変数**（クラウドデプロイ推奨）
-
-`AI_MODELS_CONFIG` をJSON文字列として設定：
-
-```bash
-AI_MODELS_CONFIG='{"providers":[{"name":"OpenAI","provider":"openai","models":["gpt-4o"],"default":true}]}'
-```
-
-**方法2：設定ファイル**
-
-プロジェクトルートに `ai-models.json` ファイルを作成します（または `AI_MODELS_CONFIG_PATH` でパスを指定）。
-
-### 設定例
-
-```json
-{
-  "providers": [
-    {
-      "name": "OpenAI Production",
-      "provider": "openai",
-      "models": ["gpt-4o", "gpt-4o-mini"],
-      "default": true
-    },
-    {
-      "name": "Custom DeepSeek",
-      "provider": "deepseek",
-      "models": ["deepseek-chat"],
-      "apiKeyEnv": "MY_DEEPSEEK_KEY",
-      "baseUrlEnv": "MY_DEEPSEEK_URL"
-    }
-  ]
-}
-```
-
-### フィールド説明
-
-| フィールド | 必須 | 説明 |
-|------------|------|------|
-| `name` | はい | 表示名（同一プロバイダーの複数設定をサポート） |
-| `provider` | はい | プロバイダータイプ（`openai`, `anthropic`, `google`, `bedrock` など） |
-| `models` | はい | モデルIDのリスト |
-| `default` | いいえ | `true` に設定すると、そのプロバイダーの最初のモデルがデフォルトで選択されます |
-| `apiKeyEnv` | いいえ | カスタムAPIキー環境変数名（デフォルトは `OPENAI_API_KEY` などの標準変数） |
-| `baseUrlEnv` | いいえ | カスタムBase URL環境変数名 |
-
-### 備考
-
-- APIキーと認証情報は環境変数で提供します。デフォルトは標準変数名（例：`OPENAI_API_KEY`）を使用しますが、`apiKeyEnv` でカスタム変数名を指定できます。
-- `name` フィールドにより同一プロバイダーの複数設定が可能です（例：「OpenAI Production」と「OpenAI Staging」が両方とも `provider: "openai"` を使用しつつ、異なる `apiKeyEnv` を持つ）。
-- 設定が存在しない場合、アプリは `AI_PROVIDER`/`AI_MODEL` 環境変数設定にフォールバックします。
-
 ## モデル性能要件
 
 このタスクは、厳密なフォーマット制約（draw.io XML）を伴う長文テキストの生成を含むため、非常に強力なモデル性能が必要です。

electron/electron-builder.yml

@@ -37,11 +37,10 @@ mac:
       arch:
         - x64
         - arm64
-  # Disable electron-builder's signing - we use custom ad-hoc signing in afterPack
+  hardenedRuntime: true
-  # to properly sign nested bundles with --deep flag for bundled draw.io files
-  identity: null
-  hardenedRuntime: false
   gatekeeperAssess: false
+  entitlements: resources/entitlements.mac.plist
+  entitlementsInherit: resources/entitlements.mac.plist
 
 dmg:
   contents:

electron/electron.d.ts

@@ -38,12 +38,6 @@ interface SetProxyResult {
     devMode?: boolean
 }
 
-/** Result of setting user locale */
-interface SetUserLocaleResult {
-    success: boolean
-    error?: string
-}
-
 declare global {
     interface Window {
         /** Main window Electron API */
@@ -68,10 +62,6 @@ declare global {
             getProxy: () => Promise<ProxyConfig>
             /** Set proxy configuration (saves and restarts server) */
             setProxy: (config: ProxyConfig) => Promise<SetProxyResult>
-            /** Get user's preferred locale */
-            getUserLocale: () => Promise<"en" | "zh" | "ja" | undefined>
-            /** Set user's preferred locale */
-            setUserLocale: (locale: string) => Promise<SetUserLocaleResult>
         }
 
         /** Settings window Electron API */
@@ -98,10 +88,4 @@ declare global {
     }
 }
 
-export type {
+export { ConfigPreset, ApplyPresetResult, ProxyConfig, SetProxyResult }
-    ConfigPreset,
-    ApplyPresetResult,
-    ProxyConfig,
-    SetProxyResult,
-    SetUserLocaleResult,
-}

electron/main/app-menu.ts

@@ -12,12 +12,11 @@ import {
     getCurrentPresetId,
     setCurrentPreset,
 } from "./config-manager"
-import { getMenuTranslations, getPreferredLocale } from "./menu-i18n"
 import { restartNextServer } from "./next-server"
 import { showSettingsWindow } from "./settings-window"
 
 /**
- * Build and set the application menu with i18n support
+ * Build and set the application menu
  */
 export function buildAppMenu(): void {
     const template = getMenuTemplate()
@@ -26,22 +25,18 @@ export function buildAppMenu(): void {
 }
 
 /**
- * Rebuild the menu (call this when presets change or language changes)
+ * Rebuild the menu (call this when presets change)
  */
 export function rebuildAppMenu(): void {
     buildAppMenu()
 }
 
 /**
- * Get the menu template with translations
+ * Get the menu template
  */
 function getMenuTemplate(): MenuItemConstructorOptions[] {
     const isMac = process.platform === "darwin"
 
-    // Get translations for preferred locale (saved preference or system default)
-    const locale = getPreferredLocale(app.getLocale())
-    const t = getMenuTranslations(locale)
-
     const template: MenuItemConstructorOptions[] = []
 
     // macOS app menu
@@ -49,10 +44,10 @@ function getMenuTemplate(): MenuItemConstructorOptions[] {
         template.push({
             label: app.name,
             submenu: [
-                { role: "about" }, // System-translated
+                { role: "about" },
                 { type: "separator" },
                 {
-                    label: t.settings,
+                    label: "Settings...",
                     accelerator: "CmdOrCtrl+,",
                     click: () => {
                         const win = BrowserWindow.getFocusedWindow()
@@ -60,26 +55,26 @@ function getMenuTemplate(): MenuItemConstructorOptions[] {
                     },
                 },
                 { type: "separator" },
-                { role: "services" }, // System-translated
+                { role: "services" },
                 { type: "separator" },
-                { role: "hide" }, // System-translated
+                { role: "hide" },
-                { role: "hideOthers" }, // System-translated
+                { role: "hideOthers" },
-                { role: "unhide" }, // System-translated
+                { role: "unhide" },
                 { type: "separator" },
-                { role: "quit" }, // System-translated
+                { role: "quit" },
             ],
         })
     }
 
     // File menu
     template.push({
-        label: t.file,
+        label: "File",
         submenu: [
             ...(isMac
                 ? []
                 : [
                       {
-                          label: t.settings,
+                          label: "Settings",
                           accelerator: "CmdOrCtrl+,",
                           click: () => {
                               const win = BrowserWindow.getFocusedWindow()
@@ -88,76 +83,76 @@ function getMenuTemplate(): MenuItemConstructorOptions[] {
                       },
                       { type: "separator" } as MenuItemConstructorOptions,
                   ]),
-            isMac ? { role: "close" } : { role: "quit" }, // System-translated
+            isMac ? { role: "close" } : { role: "quit" },
         ],
     })
 
     // Edit menu
     template.push({
-        label: t.edit,
+        label: "Edit",
         submenu: [
-            { role: "undo" }, // System-translated
+            { role: "undo" },
-            { role: "redo" }, // System-translated
+            { role: "redo" },
             { type: "separator" },
-            { role: "cut" }, // System-translated
+            { role: "cut" },
-            { role: "copy" }, // System-translated
+            { role: "copy" },
-            { role: "paste" }, // System-translated
+            { role: "paste" },
             ...(isMac
                 ? [
                       {
                           role: "pasteAndMatchStyle",
-                      } as MenuItemConstructorOptions, // System-translated
+                      } as MenuItemConstructorOptions,
-                      { role: "delete" } as MenuItemConstructorOptions, // System-translated
+                      { role: "delete" } as MenuItemConstructorOptions,
-                      { role: "selectAll" } as MenuItemConstructorOptions, // System-translated
+                      { role: "selectAll" } as MenuItemConstructorOptions,
                   ]
                 : [
-                      { role: "delete" } as MenuItemConstructorOptions, // System-translated
+                      { role: "delete" } as MenuItemConstructorOptions,
                       { type: "separator" } as MenuItemConstructorOptions,
-                      { role: "selectAll" } as MenuItemConstructorOptions, // System-translated
+                      { role: "selectAll" } as MenuItemConstructorOptions,
                   ]),
         ],
     })
 
     // View menu
     template.push({
-        label: t.view,
+        label: "View",
         submenu: [
-            { role: "reload" }, // System-translated
+            { role: "reload" },
-            { role: "forceReload" }, // System-translated
+            { role: "forceReload" },
-            { role: "toggleDevTools" }, // System-translated
+            { role: "toggleDevTools" },
             { type: "separator" },
-            { role: "resetZoom" }, // System-translated
+            { role: "resetZoom" },
-            { role: "zoomIn" }, // System-translated
+            { role: "zoomIn" },
-            { role: "zoomOut" }, // System-translated
+            { role: "zoomOut" },
             { type: "separator" },
-            { role: "togglefullscreen" }, // System-translated
+            { role: "togglefullscreen" },
         ],
     })
 
     // Configuration menu with presets
-    template.push(buildConfigMenu(t))
+    template.push(buildConfigMenu())
 
     // Window menu
     template.push({
-        label: t.window,
+        label: "Window",
         submenu: [
-            { role: "minimize" }, // System-translated
+            { role: "minimize" },
-            { role: "zoom" }, // System-translated
+            { role: "zoom" },
             ...(isMac
                 ? [
                       { type: "separator" } as MenuItemConstructorOptions,
-                      { role: "front" } as MenuItemConstructorOptions, // System-translated
+                      { role: "front" } as MenuItemConstructorOptions,
                   ]
-                : [{ role: "close" } as MenuItemConstructorOptions]), // System-translated
+                : [{ role: "close" } as MenuItemConstructorOptions]),
         ],
     })
 
     // Help menu
     template.push({
-        label: t.help,
+        label: "Help",
         submenu: [
             {
-                label: t.documentation,
+                label: "Documentation",
                 click: async () => {
                     await shell.openExternal(
                         "https://github.com/dayuanjiang/next-ai-draw-io",
@@ -165,7 +160,7 @@ function getMenuTemplate(): MenuItemConstructorOptions[] {
                 },
             },
             {
-                label: t.reportIssue,
+                label: "Report Issue",
                 click: async () => {
                     await shell.openExternal(
                         "https://github.com/dayuanjiang/next-ai-draw-io/issues",
@@ -181,9 +176,7 @@ function getMenuTemplate(): MenuItemConstructorOptions[] {
 /**
  * Build the Configuration menu with presets
  */
-function buildConfigMenu(
+function buildConfigMenu(): MenuItemConstructorOptions {
-    t: ReturnType<typeof getMenuTranslations>,
-): MenuItemConstructorOptions {
     const presets = getAllPresets()
     const currentPresetId = getCurrentPresetId()
 
@@ -223,11 +216,11 @@ function buildConfigMenu(
     }))
 
     return {
-        label: t.configuration,
+        label: "Configuration",
         submenu: [
             ...(presetItems.length > 0
                 ? [
-                      { label: t.switchPreset, enabled: false },
+                      { label: "Switch Preset", enabled: false },
                       { type: "separator" } as MenuItemConstructorOptions,
                       ...presetItems,
                       { type: "separator" } as MenuItemConstructorOptions,
@@ -236,8 +229,8 @@ function buildConfigMenu(
             {
                 label:
                     presetItems.length > 0
-                        ? t.managePresets
+                        ? "Manage Presets..."
-                        : t.addConfigurationPreset,
+                        : "Add Configuration Preset...",
                 click: () => {
                     const win = BrowserWindow.getFocusedWindow()
                     showSettingsWindow(win || undefined)

electron/main/config-manager.ts

@@ -137,7 +137,6 @@ interface ConfigPresetsFile {
     version: 1
     currentPresetId: string | null
     presets: ConfigPreset[]
-    userLocale?: "en" | "zh" | "ja"
 }
 
 const CONFIG_FILE_NAME = "config-presets.json"
@@ -162,7 +161,6 @@ export function loadPresets(): ConfigPresetsFile {
             version: 1,
             currentPresetId: null,
             presets: [],
-            userLocale: undefined,
         }
     }
 
@@ -183,7 +181,6 @@ export function loadPresets(): ConfigPresetsFile {
             version: 1,
             currentPresetId: null,
             presets: [],
-            userLocale: undefined,
         }
     }
 }
@@ -465,21 +462,3 @@ export function getCurrentPresetEnv(): Record<string, string> {
     }
     return env
 }
-
-/**
- * Get user's preferred locale from config
- * Returns undefined if not set
- */
-export function getUserLocale(): "en" | "zh" | "ja" | undefined {
-    const data = loadPresets()
-    return data.userLocale
-}
-
-/**
- * Set user's preferred locale in config
- */
-export function setUserLocale(locale: "en" | "zh" | "ja" | null): void {
-    const data = loadPresets()
-    data.userLocale = locale === null ? undefined : locale
-    savePresets(data)
-}

electron/main/ipc-handlers.ts

@@ -1,5 +1,4 @@
 import { app, BrowserWindow, dialog, ipcMain } from "electron"
-import { rebuildAppMenu } from "./app-menu"
 import {
     applyPresetToEnv,
     type ConfigPreset,
@@ -8,9 +7,7 @@ import {
     getAllPresets,
     getCurrentPreset,
     getCurrentPresetId,
-    getUserLocale,
     setCurrentPreset,
-    setUserLocale,
     updatePreset,
 } from "./config-manager"
 import { restartNextServer } from "./next-server"
@@ -254,32 +251,4 @@ export function registerIpcHandlers(): void {
             }
         }
     })
-
-    // ==================== User Locale ====================
-
-    ipcMain.handle("get-user-locale", () => {
-        return getUserLocale()
-    })
-
-    ipcMain.handle("set-user-locale", (_event, locale: string) => {
-        // Validate locale is one of the supported values
-        if (!["en", "zh", "ja"].includes(locale)) {
-            return { success: false, error: "Invalid locale" }
-        }
-
-        try {
-            setUserLocale(locale as "en" | "zh" | "ja")
-            // Rebuild the menu to reflect the new locale
-            rebuildAppMenu()
-            return { success: true }
-        } catch (error) {
-            return {
-                success: false,
-                error:
-                    error instanceof Error
-                        ? error.message
-                        : "Failed to set locale",
-            }
-        }
-    })
 }

electron/main/menu-i18n.ts

@@ -1,162 +0,0 @@
-/**
- * Internationalization support for Electron menu
- * Translations for menu labels that don't use Electron's built-in roles
- */
-
-import { getUserLocale } from "./config-manager"
-
-export type MenuLocale = "en" | "zh" | "ja"
-
-export interface MenuTranslations {
-    // App menu (macOS only)
-    settings: string
-
-    // File menu
-    file: string
-
-    // Edit menu
-    edit: string
-
-    // View menu
-    view: string
-
-    // Configuration menu
-    configuration: string
-    switchPreset: string
-    managePresets: string
-    addConfigurationPreset: string
-
-    // Window menu
-    window: string
-
-    // Help menu
-    help: string
-    documentation: string
-    reportIssue: string
-}
-
-const translations: Record<MenuLocale, MenuTranslations> = {
-    en: {
-        // App menu
-        settings: "Settings...",
-
-        // File menu
-        file: "File",
-
-        // Edit menu
-        edit: "Edit",
-
-        // View menu
-        view: "View",
-
-        // Configuration menu
-        configuration: "Configuration",
-        switchPreset: "Switch Preset",
-        managePresets: "Manage Presets...",
-        addConfigurationPreset: "Add Configuration Preset...",
-
-        // Window menu
-        window: "Window",
-
-        // Help menu
-        help: "Help",
-        documentation: "Documentation",
-        reportIssue: "Report Issue",
-    },
-
-    zh: {
-        // App menu
-        settings: "设置...",
-
-        // File menu
-        file: "文件",
-
-        // Edit menu
-        edit: "编辑",
-
-        // View menu
-        view: "查看",
-
-        // Configuration menu
-        configuration: "配置",
-        switchPreset: "切换预设",
-        managePresets: "管理预设...",
-        addConfigurationPreset: "添加配置预设...",
-
-        // Window menu
-        window: "窗口",
-
-        // Help menu
-        help: "帮助",
-        documentation: "文档",
-        reportIssue: "报告问题",
-    },
-
-    ja: {
-        // App menu
-        settings: "設定...",
-
-        // File menu
-        file: "ファイル",
-
-        // Edit menu
-        edit: "編集",
-
-        // View menu
-        view: "表示",
-
-        // Configuration menu
-        configuration: "設定",
-        switchPreset: "プリセット切り替え",
-        managePresets: "プリセット管理...",
-        addConfigurationPreset: "設定プリセットを追加...",
-
-        // Window menu
-        window: "ウインドウ",
-
-        // Help menu
-        help: "ヘルプ",
-        documentation: "ドキュメント",
-        reportIssue: "問題を報告",
-    },
-}
-
-/**
- * Get menu translations for a given locale
- * Falls back to English if locale is not supported
- */
-export function getMenuTranslations(locale: string): MenuTranslations {
-    // Normalize locale (e.g., "zh-CN" -> "zh", "ja-JP" -> "ja")
-    const normalized = locale.toLowerCase().split("-")[0]
-
-    if (normalized === "zh") return translations.zh
-    if (normalized === "ja") return translations.ja
-    return translations.en
-}
-
-/**
- * Detect system locale from Electron app
- * Returns one of: "en", "zh", "ja"
- */
-export function detectSystemLocale(appLocale: string): MenuLocale {
-    const normalized = appLocale.toLowerCase().split("-")[0]
-
-    if (normalized === "zh") return "zh"
-    if (normalized === "ja") return "ja"
-    return "en"
-}
-
-/**
- * Get locale from stored preference or system default
- * Checks config file for user's language preference first
- */
-export function getPreferredLocale(appLocale: string): MenuLocale {
-    // Try to get from saved preference first
-    const savedLocale = getUserLocale()
-    if (savedLocale) {
-        return savedLocale
-    }
-
-    // Fall back to system locale
-    return detectSystemLocale(appLocale)
-}

electron/preload/index.ts

@@ -26,9 +26,4 @@ contextBridge.exposeInMainWorld("electronAPI", {
     getProxy: () => ipcRenderer.invoke("get-proxy"),
     setProxy: (config: { httpProxy?: string; httpsProxy?: string }) =>
         ipcRenderer.invoke("set-proxy", config),
-
-    // User locale settings
-    getUserLocale: () => ipcRenderer.invoke("get-user-locale"),
-    setUserLocale: (locale: string) =>
-        ipcRenderer.invoke("set-user-locale", locale),
 })

env.example

@@ -1,6 +1,6 @@
 # AI Provider Configuration
 # AI_PROVIDER: Which provider to use
-# Options: bedrock, openai, anthropic, google, vertexai, azure, ollama, openrouter, deepseek, siliconflow, gateway
+# Options: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, gateway
 # Default: bedrock
 AI_PROVIDER=bedrock
 
@@ -40,14 +40,6 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 # GOOGLE_THINKING_BUDGET=8192                # Optional: Gemini 2.5 thinking budget in tokens (for more/less thinking)
 # GOOGLE_THINKING_LEVEL=high                 # Optional: Gemini 3 thinking level (low/high)
 
-# Google Vertex AI Configuration (Enterprise GCP)
-# For enterprise users needing data residency, VPC Service Controls, or GCP integration
-# GOOGLE_VERTEX_API_KEY=                          # Required: Express Mode API key
-# GOOGLE_VERTEX_BASE_URL=https://...              # Optional: Custom endpoint URL
-# Note: Gemini 2.5/3 models automatically enable reasoning display (includeThoughts: true)
-# GOOGLE_VERTEX_THINKING_BUDGET=8192              # Optional: Gemini 2.5 thinking budget in tokens (1024-100000)
-# GOOGLE_VERTEX_THINKING_LEVEL=high               # Optional: Gemini 3 thinking level (minimal/low/medium/high)
-
 # Azure OpenAI Configuration
 # Configure endpoint using ONE of these methods:
 #   1. AZURE_RESOURCE_NAME - SDK constructs: https://{name}.openai.azure.com/openai/v1{path}
@@ -101,11 +93,6 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 # LANGFUSE_SECRET_KEY=sk-lf-...
 # LANGFUSE_BASEURL=https://cloud.langfuse.com  # EU region, use https://us.cloud.langfuse.com for US
 
-# Optional server-side multi-model configuration
-# If set, points to a JSON file with server-provided models (see README for schema).
-# Default: ./ai-models.json in project root
-# AI_MODELS_CONFIG_PATH=/path/to/ai-models.json
-
 # Temperature (Optional)
 # Controls randomness in AI responses. Lower = more deterministic.
 # Leave unset for models that don't support temperature (e.g., GPT-5.1 reasoning models)
@@ -129,8 +116,3 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 # Enabled by default. Set to "false" to disable.
 # ENABLE_PDF_INPUT=true
 # NEXT_PUBLIC_MAX_EXTRACTED_CHARS=150000  # Max characters for PDF/text extraction (default: 150000)
-
-# Security Settings (Optional)
-# Allow private/internal URLs for reverse proxy setups (default: true)
-# Set to "false" to block private IPs, localhost, and internal hostnames
-# ALLOW_PRIVATE_URLS=false

hooks/use-diagram-tool-handlers.ts

@@ -1,12 +1,5 @@
 import type { MutableRefObject } from "react"
-import { useRef } from "react"
 import type { DiagramOperation } from "@/components/chat/types"
-import type {
-    ValidationState,
-    ValidationStatus,
-} from "@/components/chat/ValidationCard"
-import type { ValidationResult } from "@/lib/diagram-validator"
-import { formatValidationFeedback } from "@/lib/diagram-validator"
 import { isMxCellXmlComplete, wrapWithMxFile } from "@/lib/utils"
 
 const DEBUG = process.env.NODE_ENV === "development"
@@ -37,14 +30,6 @@ type AddToolOutputParams = AddToolOutputSuccess | AddToolOutputError
 
 type AddToolOutputFn = (params: AddToolOutputParams) => void
 
-const MAX_VALIDATION_RETRIES = 3
-
-// Type for the validation function passed from useValidateDiagram hook
-type ValidateDiagramFn = (
-    imageData: string,
-    sessionId?: string,
-) => Promise<ValidationResult>
-
 interface UseDiagramToolHandlersParams {
     partialXmlRef: MutableRefObject<string>
     editDiagramOriginalXmlRef: MutableRefObject<Map<string, string>>
@@ -52,14 +37,6 @@ interface UseDiagramToolHandlersParams {
     onDisplayChart: (xml: string, skipValidation?: boolean) => string | null
     onFetchChart: (saveToHistory?: boolean) => Promise<string>
     onExport: () => void
-    captureValidationPng?: () => Promise<string | null>
-    validateDiagram?: ValidateDiagramFn
-    enableVlmValidation?: boolean
-    sessionId?: string
-    onValidationStateChange?: (
-        toolCallId: string,
-        state: ValidationState,
-    ) => void
 }
 
 /**
@@ -76,34 +53,7 @@ export function useDiagramToolHandlers({
     onDisplayChart,
     onFetchChart,
     onExport,
-    captureValidationPng,
-    validateDiagram,
-    enableVlmValidation = true,
-    sessionId,
-    onValidationStateChange,
 }: UseDiagramToolHandlersParams) {
-    // Track validation retry count per tool call
-    const validationRetryCountRef = useRef<Map<string, number>>(new Map())
-
-    // Helper to update validation state
-    const updateValidationState = (
-        toolCallId: string,
-        status: ValidationStatus,
-        options?: {
-            attempt?: number
-            maxAttempts?: number
-            result?: ValidationResult
-            error?: string
-            imageData?: string
-        },
-    ) => {
-        if (onValidationStateChange) {
-            onValidationStateChange(toolCallId, {
-                status,
-                ...options,
-            })
-        }
-    }
     const handleToolCall = async (
         { toolCall }: { toolCall: ToolCall },
         addToolOutput: AddToolOutputFn,
@@ -205,159 +155,7 @@ ${finalXml}
             // Success - diagram will be rendered by chat-message-display
             if (DEBUG) {
                 console.log(
-                    "[display_diagram] Success! Checking if VLM validation is enabled...",
+                    "[display_diagram] Success! Adding tool output with state: output-available",
-                )
-            }
-
-            // VLM validation after successful display
-            if (
-                enableVlmValidation &&
-                captureValidationPng &&
-                validateDiagram
-            ) {
-                let capturedPngData: string | null = null
-                try {
-                    // Notify UI that we're starting capture
-                    updateValidationState(toolCall.toolCallId, "capturing")
-
-                    // Small delay (100ms) to allow diagram rendering to complete before capture.
-                    // This is a best-effort heuristic and may need adjustment for complex diagrams or slower devices.
-                    await new Promise((resolve) => setTimeout(resolve, 100))
-
-                    capturedPngData = await captureValidationPng()
-                    if (capturedPngData) {
-                        if (DEBUG) {
-                            console.log(
-                                "[display_diagram] Captured PNG for validation",
-                            )
-                        }
-
-                        const retryCount =
-                            validationRetryCountRef.current.get(
-                                toolCall.toolCallId,
-                            ) || 0
-
-                        // Notify UI that we're validating (include the image)
-                        updateValidationState(
-                            toolCall.toolCallId,
-                            "validating",
-                            {
-                                attempt: retryCount + 1,
-                                maxAttempts: MAX_VALIDATION_RETRIES,
-                                imageData: capturedPngData,
-                            },
-                        )
-
-                        const result = await validateDiagram(
-                            capturedPngData,
-                            sessionId,
-                        )
-
-                        if (!result.valid) {
-                            if (retryCount < MAX_VALIDATION_RETRIES) {
-                                validationRetryCountRef.current.set(
-                                    toolCall.toolCallId,
-                                    retryCount + 1,
-                                )
-
-                                const feedback =
-                                    formatValidationFeedback(result)
-                                if (DEBUG) {
-                                    console.log(
-                                        `[display_diagram] Validation failed (attempt ${retryCount + 1}/${MAX_VALIDATION_RETRIES}):`,
-                                        result.issues,
-                                    )
-                                }
-
-                                // Notify UI of validation failure (include the image)
-                                updateValidationState(
-                                    toolCall.toolCallId,
-                                    "failed",
-                                    {
-                                        attempt: retryCount + 1,
-                                        maxAttempts: MAX_VALIDATION_RETRIES,
-                                        result,
-                                        imageData: capturedPngData,
-                                    },
-                                )
-
-                                addToolOutput({
-                                    tool: "display_diagram",
-                                    toolCallId: toolCall.toolCallId,
-                                    state: "output-error",
-                                    errorText: `[Validation attempt ${retryCount + 1}/${MAX_VALIDATION_RETRIES}]\n${feedback}`,
-                                })
-                                return
-                            } else {
-                                // Max retries reached - accept the diagram with warning
-                                if (DEBUG) {
-                                    console.log(
-                                        "[display_diagram] Max validation retries reached, accepting diagram",
-                                    )
-                                }
-                                validationRetryCountRef.current.delete(
-                                    toolCall.toolCallId,
-                                )
-
-                                // Notify UI that we're accepting with issues (include the image)
-                                updateValidationState(
-                                    toolCall.toolCallId,
-                                    "skipped",
-                                    { result, imageData: capturedPngData },
-                                )
-
-                                addToolOutput({
-                                    tool: "display_diagram",
-                                    toolCallId: toolCall.toolCallId,
-                                    output: "Diagram displayed (validation issues noted but max retries reached).",
-                                })
-                                return
-                            }
-                        } else {
-                            // Validation passed - clean up retry count
-                            validationRetryCountRef.current.delete(
-                                toolCall.toolCallId,
-                            )
-                            if (DEBUG) {
-                                console.log(
-                                    "[display_diagram] Validation passed!",
-                                )
-                            }
-
-                            // Notify UI of success (include the image)
-                            // Use "success_with_warnings" if valid but has issues
-                            const hasWarnings = result.issues.length > 0
-                            updateValidationState(
-                                toolCall.toolCallId,
-                                hasWarnings
-                                    ? "success_with_warnings"
-                                    : "success",
-                                { result, imageData: capturedPngData },
-                            )
-                        }
-                    } else {
-                        // PNG capture failed - skip validation
-                        updateValidationState(toolCall.toolCallId, "skipped")
-                    }
-                } catch (error) {
-                    // VLM validation error - log but don't block the user
-                    console.warn(
-                        "[display_diagram] VLM validation error:",
-                        error,
-                    )
-                    updateValidationState(toolCall.toolCallId, "error", {
-                        error:
-                            error instanceof Error
-                                ? error.message
-                                : "Validation failed",
-                        imageData: capturedPngData || undefined,
-                    })
-                }
-            }
-
-            if (DEBUG) {
-                console.log(
-                    "[display_diagram] Adding tool output with state: output-available",
                 )
             }
             addToolOutput({

hooks/use-model-config.ts

@@ -1,7 +1,6 @@
 "use client"
 
 import { useCallback, useEffect, useState } from "react"
-import type { FlattenedServerModel } from "@/lib/server-model-config"
 import { STORAGE_KEYS } from "@/lib/storage"
 import {
     createEmptyConfig,
@@ -133,56 +132,14 @@ export interface UseModelConfigReturn {
 export function useModelConfig(): UseModelConfigReturn {
     const [config, setConfig] = useState<MultiModelConfig>(createEmptyConfig)
     const [isLoaded, setIsLoaded] = useState(false)
-    const [serverModels, setServerModels] = useState<FlattenedServerModel[]>([])
-    const [serverLoaded, setServerLoaded] = useState(false)
 
-    // Load client config on mount
+    // Load config on mount
     useEffect(() => {
         const loaded = loadConfig()
         setConfig(loaded)
         setIsLoaded(true)
     }, [])
 
-    // Load server models on mount (if any)
-    useEffect(() => {
-        if (typeof window === "undefined") return
-
-        fetch("/api/server-models")
-            .then((res) => {
-                if (!res.ok) {
-                    console.error(
-                        "Failed to load server models:",
-                        res.status,
-                        res.statusText,
-                    )
-                    throw new Error(`Request failed with status ${res.status}`)
-                }
-                return res.json()
-            })
-            .then((data) => {
-                const raw: FlattenedServerModel[] = data?.models || []
-                setServerModels(raw)
-                setServerLoaded(true)
-
-                // Auto-select default server model if no model is currently selected
-                setConfig((prev) => {
-                    if (!prev.selectedModelId && raw.length > 0) {
-                        const defaultModel = raw.find((m) => m.isDefault)
-                        if (defaultModel) {
-                            return { ...prev, selectedModelId: defaultModel.id }
-                        }
-                        // If no default marked, use first server model
-                        return { ...prev, selectedModelId: raw[0].id }
-                    }
-                    return prev
-                })
-            })
-            .catch((error) => {
-                console.error("Error while loading server models:", error)
-                setServerLoaded(true)
-            })
-    }, [])
-
     // Save config whenever it changes (after initial load)
     useEffect(() => {
         if (isLoaded) {
@@ -191,33 +148,9 @@ export function useModelConfig(): UseModelConfigReturn {
     }, [config, isLoaded])
 
     // Derived state
-    const userModels = flattenModels(config)
+    const models = flattenModels(config)
-
-    const models: FlattenedModel[] = [
-        // Server models (read-only, credentials from env)
-        ...serverModels.map((m) => ({
-            id: m.id,
-            modelId: m.modelId,
-            provider: m.provider,
-            providerLabel: `Server · ${m.providerLabel}`,
-            apiKey: "",
-            baseUrl: undefined,
-            awsAccessKeyId: undefined,
-            awsSecretAccessKey: undefined,
-            awsRegion: undefined,
-            awsSessionToken: undefined,
-            validated: true,
-            source: "server" as const,
-            isDefault: m.isDefault,
-            apiKeyEnv: m.apiKeyEnv,
-            baseUrlEnv: m.baseUrlEnv,
-        })),
-        // User models from local configuration
-        ...userModels,
-    ]
-
     const selectedModel = config.selectedModelId
-        ? models.find((m) => m.id === config.selectedModelId)
+        ? findModelById(config, config.selectedModelId)
         : undefined
 
     // Actions
@@ -349,7 +282,7 @@ export function useModelConfig(): UseModelConfigReturn {
 
     return {
         config,
-        isLoaded: isLoaded && serverLoaded,
+        isLoaded,
         models,
         selectedModel,
         selectedModelId: config.selectedModelId,
@@ -381,10 +314,6 @@ export function getSelectedAIConfig(): {
     awsSecretAccessKey: string
     awsRegion: string
     awsSessionToken: string
-    // Selected model ID (for server model lookup)
-    selectedModelId: string
-    // Vertex AI credentials (Express Mode)
-    vertexApiKey: string
 } {
     const empty = {
         accessCode: "",
@@ -396,8 +325,6 @@ export function getSelectedAIConfig(): {
         awsSecretAccessKey: "",
         awsRegion: "",
         awsSessionToken: "",
-        selectedModelId: "",
-        vertexApiKey: "",
     }
 
     if (typeof window === "undefined") return empty
@@ -420,8 +347,6 @@ export function getSelectedAIConfig(): {
             awsSecretAccessKey: "",
             awsRegion: "",
             awsSessionToken: "",
-            selectedModelId: "",
-            vertexApiKey: "",
         }
     }
 
@@ -432,32 +357,12 @@ export function getSelectedAIConfig(): {
         return { ...empty, accessCode }
     }
 
-    // No selected model = use server default (AI_PROVIDER/AI_MODEL/env auto-detect)
+    // No selected model = use server default
     if (!config.selectedModelId) {
         return { ...empty, accessCode }
     }
 
-    // Server-side model selection (id = "server:<name-slug>:<modelId>")
+    // Find selected model
-    // Provider is resolved server-side via findServerModelById()
-    if (config.selectedModelId.startsWith("server:")) {
-        const parts = config.selectedModelId.split(":")
-        const nameSlug = parts[1] || ""
-        const modelId = parts.slice(2).join(":") // Preserve Bedrock-style IDs
-
-        return {
-            ...empty,
-            accessCode,
-            // Note: nameSlug is NOT the provider, but we send it for backwards compat
-            // Server uses selectedModelId to lookup the actual provider
-            aiProvider: nameSlug,
-            aiBaseUrl: "",
-            aiApiKey: "",
-            aiModel: modelId,
-            selectedModelId: config.selectedModelId,
-        }
-    }
-
-    // Find selected user-defined model
     const model = findModelById(config, config.selectedModelId)
     if (!model) {
         return { ...empty, accessCode }
@@ -474,8 +379,5 @@ export function getSelectedAIConfig(): {
         awsSecretAccessKey: model.awsSecretAccessKey || "",
         awsRegion: model.awsRegion || "",
         awsSessionToken: model.awsSessionToken || "",
-        selectedModelId: config.selectedModelId || "",
-        // Vertex AI credentials (Express Mode)
-        vertexApiKey: model.vertexApiKey || "",
     }
 }

hooks/use-validate-diagram.ts

@@ -1,136 +0,0 @@
-"use client"
-
-/**
- * Hook for VLM-based diagram validation using AI SDK's useObject.
- */
-
-import { experimental_useObject as useObject } from "@ai-sdk/react"
-import { useCallback, useRef } from "react"
-import { getApiEndpoint } from "@/lib/base-path"
-import {
-    type ValidationResult,
-    ValidationResultSchema,
-} from "@/lib/validation-schema"
-
-export type { ValidationResult }
-
-// Default valid result for fallback cases
-const DEFAULT_VALID_RESULT: ValidationResult = {
-    valid: true,
-    issues: [],
-    suggestions: [],
-}
-
-interface UseValidateDiagramOptions {
-    onSuccess?: (result: ValidationResult) => void
-    onError?: (error: Error) => void
-}
-
-// Track pending validation promises for imperative API
-type PendingValidation = {
-    resolve: (result: ValidationResult) => void
-    reject: (error: Error) => void
-}
-
-export function useValidateDiagram(options: UseValidateDiagramOptions = {}) {
-    const { onSuccess, onError } = options
-    const pendingValidationRef = useRef<PendingValidation | null>(null)
-
-    const { object, submit, isLoading, error, stop } = useObject({
-        api: getApiEndpoint("/api/validate-diagram"),
-        schema: ValidationResultSchema,
-        onFinish: ({
-            object,
-            error: finishError,
-        }: {
-            object: ValidationResult | undefined
-            error: Error | undefined
-        }) => {
-            if (finishError) {
-                console.error(
-                    "[useValidateDiagram] Validation error:",
-                    finishError,
-                )
-                onError?.(finishError)
-                pendingValidationRef.current?.reject(finishError)
-                pendingValidationRef.current = null
-                return
-            }
-
-            if (object) {
-                const result = object as ValidationResult
-                onSuccess?.(result)
-                pendingValidationRef.current?.resolve(result)
-                pendingValidationRef.current = null
-            }
-        },
-        onError: (err: Error) => {
-            console.error("[useValidateDiagram] Stream error:", err)
-            onError?.(err)
-            pendingValidationRef.current?.reject(err)
-            pendingValidationRef.current = null
-        },
-    })
-
-    /**
-     * Validate a diagram image.
-     * Returns a promise that resolves with the validation result.
-     */
-    const validate = useCallback(
-        async (
-            imageData: string,
-            sessionId?: string,
-        ): Promise<ValidationResult> => {
-            // Reject any pending validation to prevent promise leaks
-            if (pendingValidationRef.current) {
-                pendingValidationRef.current.reject(
-                    new Error("Validation superseded by new request"),
-                )
-                pendingValidationRef.current = null
-            }
-
-            return new Promise((resolve, reject) => {
-                // Store the promise handlers
-                pendingValidationRef.current = { resolve, reject }
-
-                // Submit the validation request
-                submit({ imageData, sessionId })
-            })
-        },
-        [submit],
-    )
-
-    /**
-     * Validate with fallback - returns default valid result on error.
-     * Use this to avoid blocking the user on validation failures.
-     */
-    const validateWithFallback = useCallback(
-        async (
-            imageData: string,
-            sessionId?: string,
-        ): Promise<ValidationResult> => {
-            try {
-                return await validate(imageData, sessionId)
-            } catch (error) {
-                console.warn(
-                    "[useValidateDiagram] Validation failed, using fallback:",
-                    error,
-                )
-                return DEFAULT_VALID_RESULT
-            }
-        },
-        [validate],
-    )
-
-    return {
-        // Validation functions
-        validate,
-        validateWithFallback,
-        stop,
-
-        // State
-        isValidating: isLoading,
-        partialResult: object as ValidationResult | undefined,
-        error,
-    }
-}

lib/ai-providers.ts

@@ -4,7 +4,6 @@ import { azure, createAzure } from "@ai-sdk/azure"
 import { createDeepSeek, deepseek } from "@ai-sdk/deepseek"
 import { createGateway, gateway } from "@ai-sdk/gateway"
 import { createGoogleGenerativeAI, google } from "@ai-sdk/google"
-import { createVertex } from "@ai-sdk/google-vertex"
 import { createOpenAI, openai } from "@ai-sdk/openai"
 import { fromNodeProviderChain } from "@aws-sdk/credential-providers"
 import { createOpenRouter } from "@openrouter/ai-sdk-provider"
@@ -30,13 +29,8 @@ export interface ClientOverrides {
     awsSecretAccessKey?: string | null
     awsRegion?: string | null
     awsSessionToken?: string | null
-    // Vertex AI config
-    vertexApiKey?: string | null // Express Mode API key
     // Custom headers (e.g., for EdgeOne cookie auth)
     headers?: Record<string, string>
-    // Custom env var names for server models (allows multiple API keys per provider)
-    apiKeyEnv?: string
-    baseUrlEnv?: string
 }
 
 // Providers that can be used with client-provided API keys
@@ -44,7 +38,6 @@ const ALLOWED_CLIENT_PROVIDERS: ProviderName[] = [
     "openai",
     "anthropic",
     "google",
-    "vertexai",
     "azure",
     "bedrock",
     "openrouter",
@@ -95,36 +88,6 @@ export function resolveBaseURL(
     return userBaseUrl || serverBaseUrl || defaultBaseUrl || undefined
 }
 
-/**
- * Resolve API key from custom env var name or default env var.
- * Supports multiple API keys per provider via ai-models.json apiKeyEnv config.
- *
- * Priority:
- * 1. User-provided API key (overrides.apiKey)
- * 2. Custom env var from ai-models.json (overrides.apiKeyEnv)
- * 3. Default provider env var (defaultEnvVar)
- */
-function resolveApiKey(
-    overrides: ClientOverrides | undefined,
-    defaultEnvVar: string,
-): string | undefined {
-    if (overrides?.apiKey) return overrides.apiKey
-    if (overrides?.apiKeyEnv) return process.env[overrides.apiKeyEnv]
-    return process.env[defaultEnvVar]
-}
-
-/**
- * Resolve base URL from custom env var name or default env var.
- * Supports multiple base URLs per provider via ai-models.json baseUrlEnv config.
- */
-function resolveBaseUrlEnv(
-    overrides: ClientOverrides | undefined,
-    defaultEnvVar: string,
-): string | undefined {
-    if (overrides?.baseUrlEnv) return process.env[overrides.baseUrlEnv]
-    return process.env[defaultEnvVar]
-}
-
 /**
  * Safely parse integer from environment variable with validation
  */
@@ -159,8 +122,6 @@ function parseIntSafe(
  * - ANTHROPIC_THINKING_TYPE: Anthropic thinking type (enabled)
  * - GOOGLE_THINKING_BUDGET: Google Gemini 2.5 thinking budget in tokens (1024-100000)
  * - GOOGLE_THINKING_LEVEL: Google Gemini 3 thinking level (low/high)
- * - GOOGLE_VERTEX_THINKING_BUDGET: Vertex AI Gemini 2.5 thinking budget in tokens (1024-100000)
- * - GOOGLE_VERTEX_THINKING_LEVEL: Vertex AI Gemini 3 thinking level (low/high)
  * - AZURE_REASONING_EFFORT: Azure/OpenAI reasoning effort (low/medium/high)
  * - AZURE_REASONING_SUMMARY: Azure reasoning summary (none/brief/detailed)
  * - BEDROCK_REASONING_BUDGET_TOKENS: Bedrock Claude reasoning budget in tokens (1024-64000)
@@ -325,46 +286,7 @@ function buildProviderOptions(
             }
             break
         }
-        case "vertexai": {
-            const thinkingBudget = parseIntSafe(
-                process.env.GOOGLE_VERTEX_THINKING_BUDGET,
-                "GOOGLE_VERTEX_THINKING_BUDGET",
-                1024,
-                100000,
-            )
-            const thinkingLevel = process.env.GOOGLE_VERTEX_THINKING_LEVEL
 
-            if (
-                modelId &&
-                (modelId.includes("gemini-2") ||
-                    modelId.includes("gemini-3") ||
-                    modelId.includes("gemini2") ||
-                    modelId.includes("gemini3"))
-            ) {
-                const thinkingConfig: Record<string, any> = {
-                    includeThoughts: true,
-                }
-
-                const isGemini3 =
-                    modelId?.includes("gemini-3") ||
-                    modelId?.includes("gemini3")
-                const isGemini25 =
-                    modelId?.includes("2.5") || modelId?.includes("2-5")
-
-                if (isGemini3 && thinkingLevel) {
-                    // Vertex AI provider in AI SDK supports more granular levels (minimal/low/medium/high)
-                    thinkingConfig.thinkingLevel = thinkingLevel as
-                        | "minimal"
-                        | "low"
-                        | "medium"
-                        | "high"
-                } else if (isGemini25 && thinkingBudget) {
-                    thinkingConfig.thinkingBudget = thinkingBudget
-                }
-                options.google = { thinkingConfig }
-            }
-            break
-        }
         case "azure": {
             const reasoningEffort = process.env.AZURE_REASONING_EFFORT
             const reasoningSummary = process.env.AZURE_REASONING_SUMMARY
@@ -466,7 +388,6 @@ const PROVIDER_ENV_VARS: Record<ProviderName, string | null> = {
     openai: "OPENAI_API_KEY",
     anthropic: "ANTHROPIC_API_KEY",
     google: "GOOGLE_GENERATIVE_AI_API_KEY",
-    vertexai: "GOOGLE_VERTEX_API_KEY",
     azure: "AZURE_API_KEY",
     ollama: null, // No credentials needed for local Ollama
     openrouter: "OPENROUTER_API_KEY",
@@ -514,15 +435,9 @@ function detectProvider(): ProviderName | null {
 
 /**
  * Validate that required API keys are present for the selected provider
- * @param provider - The provider to validate
- * @param customApiKeyEnv - Optional custom env var name (from ai-models.json apiKeyEnv)
  */
-function validateProviderCredentials(
+function validateProviderCredentials(provider: ProviderName): void {
-    provider: ProviderName,
+    const requiredVar = PROVIDER_ENV_VARS[provider]
-    customApiKeyEnv?: string,
-): void {
-    // Use custom env var name if provided, otherwise use default
-    const requiredVar = customApiKeyEnv || PROVIDER_ENV_VARS[provider]
     if (requiredVar && !process.env[requiredVar]) {
         throw new Error(
             `${requiredVar} environment variable is required for ${provider} provider. ` +
@@ -576,7 +491,6 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
     if (
         overrides?.baseUrl &&
         !overrides?.apiKey &&
-        !(overrides?.provider === "vertexai" && overrides?.vertexApiKey) &&
         overrides?.provider !== "edgeone"
     ) {
         throw new Error(
@@ -586,11 +500,7 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
     }
 
     // Check if client is providing their own provider override
-    const isClientOverride = !!(
+    const isClientOverride = !!(overrides?.provider && overrides?.apiKey)
-        overrides?.provider &&
-        (overrides?.apiKey ||
-            (overrides?.provider === "vertexai" && overrides?.vertexApiKey))
-    )
 
     // Use client override if provided, otherwise fall back to env vars
     const modelId = overrides?.modelId || process.env.AI_MODEL
@@ -660,7 +570,7 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
 
     // Only validate server credentials if client isn't providing their own API key
     if (!isClientOverride) {
-        validateProviderCredentials(provider, overrides?.apiKeyEnv)
+        validateProviderCredentials(provider)
     }
 
     console.log(`[AI Provider] Initializing ${provider} with model: ${modelId}`)
@@ -710,15 +620,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
         }
 
         case "openai": {
-            const apiKey = resolveApiKey(overrides, "OPENAI_API_KEY")
+            const apiKey = overrides?.apiKey || process.env.OPENAI_API_KEY
-            const serverBaseUrl = resolveBaseUrlEnv(
-                overrides,
-                "OPENAI_BASE_URL",
-            )
             const baseURL = resolveBaseURL(
                 overrides?.apiKey,
                 overrides?.baseUrl,
-                serverBaseUrl,
+                process.env.OPENAI_BASE_URL,
             )
             if (baseURL) {
                 // Custom base URL = third-party proxy, use Chat Completions API
@@ -737,15 +643,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
         }
 
         case "anthropic": {
-            const apiKey = resolveApiKey(overrides, "ANTHROPIC_API_KEY")
+            const apiKey = overrides?.apiKey || process.env.ANTHROPIC_API_KEY
-            const serverBaseUrl = resolveBaseUrlEnv(
-                overrides,
-                "ANTHROPIC_BASE_URL",
-            )
             const baseURL = resolveBaseURL(
                 overrides?.apiKey,
                 overrides?.baseUrl,
-                serverBaseUrl,
+                process.env.ANTHROPIC_BASE_URL,
                 "https://api.anthropic.com/v1",
             )
             const customProvider = createAnthropic({
@@ -760,18 +662,12 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
         }
 
         case "google": {
-            const apiKey = resolveApiKey(
+            const apiKey =
-                overrides,
+                overrides?.apiKey || process.env.GOOGLE_GENERATIVE_AI_API_KEY
-                "GOOGLE_GENERATIVE_AI_API_KEY",
-            )
-            const serverBaseUrl = resolveBaseUrlEnv(
-                overrides,
-                "GOOGLE_BASE_URL",
-            )
             const baseURL = resolveBaseURL(
                 overrides?.apiKey,
                 overrides?.baseUrl,
-                serverBaseUrl,
+                process.env.GOOGLE_BASE_URL,
             )
             if (baseURL || overrides?.apiKey) {
                 const customGoogle = createGoogleGenerativeAI({
@@ -784,37 +680,13 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
             }
             break
         }
-        case "vertexai": {
-            // Express Mode: Use API key for authentication
-            const vertexApiKey =
-                overrides?.vertexApiKey || process.env.GOOGLE_VERTEX_API_KEY
-
-            if (!vertexApiKey) {
-                throw new Error(
-                    "Vertex AI requires an API key for Express Mode. " +
-                        "Get one from Google Cloud Console or set GOOGLE_VERTEX_API_KEY environment variable.",
-                )
-            }
-
-            // Support custom base URL from env or client override
-            const baseURL =
-                overrides?.baseUrl || process.env.GOOGLE_VERTEX_BASE_URL
-
-            const vertexProvider = createVertex({
-                apiKey: vertexApiKey,
-                ...(baseURL && { baseURL }),
-            })
-            model = vertexProvider(modelId)
-            break
-        }
 
         case "azure": {
-            const apiKey = resolveApiKey(overrides, "AZURE_API_KEY")
+            const apiKey = overrides?.apiKey || process.env.AZURE_API_KEY
-            const serverBaseUrl = resolveBaseUrlEnv(overrides, "AZURE_BASE_URL")
             const baseURL = resolveBaseURL(
                 overrides?.apiKey,
                 overrides?.baseUrl,
-                serverBaseUrl,
+                process.env.AZURE_BASE_URL,
             )
             // Only use server's resourceName if user is NOT providing their own API key
             const resourceName = overrides?.apiKey
@@ -848,15 +720,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
             break
 
         case "openrouter": {
-            const apiKey = resolveApiKey(overrides, "OPENROUTER_API_KEY")
+            const apiKey = overrides?.apiKey || process.env.OPENROUTER_API_KEY
-            const serverBaseUrl = resolveBaseUrlEnv(
-                overrides,
-                "OPENROUTER_BASE_URL",
-            )
             const baseURL = resolveBaseURL(
                 overrides?.apiKey,
                 overrides?.baseUrl,
-                serverBaseUrl,
+                process.env.OPENROUTER_BASE_URL,
             )
             const openrouter = createOpenRouter({
                 apiKey,
@@ -867,15 +735,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
         }
 
         case "deepseek": {
-            const apiKey = resolveApiKey(overrides, "DEEPSEEK_API_KEY")
+            const apiKey = overrides?.apiKey || process.env.DEEPSEEK_API_KEY
-            const serverBaseUrl = resolveBaseUrlEnv(
-                overrides,
-                "DEEPSEEK_BASE_URL",
-            )
             const baseURL = resolveBaseURL(
                 overrides?.apiKey,
                 overrides?.baseUrl,
-                serverBaseUrl,
+                process.env.DEEPSEEK_BASE_URL,
             )
             if (baseURL || overrides?.apiKey) {
                 const customDeepSeek = createDeepSeek({
@@ -890,15 +754,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
         }
 
         case "siliconflow": {
-            const apiKey = resolveApiKey(overrides, "SILICONFLOW_API_KEY")
+            const apiKey = overrides?.apiKey || process.env.SILICONFLOW_API_KEY
-            const serverBaseUrl = resolveBaseUrlEnv(
-                overrides,
-                "SILICONFLOW_BASE_URL",
-            )
             const baseURL = resolveBaseURL(
                 overrides?.apiKey,
                 overrides?.baseUrl,
-                serverBaseUrl,
+                process.env.SILICONFLOW_BASE_URL,
                 "https://api.siliconflow.cn/v1",
             )
             const siliconflowProvider = createOpenAI({
@@ -910,15 +770,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
         }
 
         case "sglang": {
-            const apiKey = resolveApiKey(overrides, "SGLANG_API_KEY")
+            const apiKey = overrides?.apiKey || process.env.SGLANG_API_KEY
-            const serverBaseUrl = resolveBaseUrlEnv(
-                overrides,
-                "SGLANG_BASE_URL",
-            )
             const baseURL = resolveBaseURL(
                 overrides?.apiKey,
                 overrides?.baseUrl,
-                serverBaseUrl,
+                process.env.SGLANG_BASE_URL,
             )
 
             const sglangProvider = createOpenAI({
@@ -1027,15 +883,11 @@ 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
-            const apiKey = resolveApiKey(overrides, "AI_GATEWAY_API_KEY")
+            const apiKey = overrides?.apiKey || process.env.AI_GATEWAY_API_KEY
-            const serverBaseUrl = resolveBaseUrlEnv(
-                overrides,
-                "AI_GATEWAY_BASE_URL",
-            )
             const baseURL = resolveBaseURL(
                 overrides?.apiKey,
                 overrides?.baseUrl,
-                serverBaseUrl,
+                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
@@ -1067,15 +919,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
         }
 
         case "doubao": {
-            const apiKey = resolveApiKey(overrides, "DOUBAO_API_KEY")
+            const apiKey = overrides?.apiKey || process.env.DOUBAO_API_KEY
-            const serverBaseUrl = resolveBaseUrlEnv(
-                overrides,
-                "DOUBAO_BASE_URL",
-            )
             const baseURL = resolveBaseURL(
                 overrides?.apiKey,
                 overrides?.baseUrl,
-                serverBaseUrl,
+                process.env.DOUBAO_BASE_URL,
                 "https://ark.cn-beijing.volces.com/api/v3",
             )
             const lowerModelId = modelId.toLowerCase()
@@ -1100,15 +948,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
         }
 
         case "modelscope": {
-            const apiKey = resolveApiKey(overrides, "MODELSCOPE_API_KEY")
+            const apiKey = overrides?.apiKey || process.env.MODELSCOPE_API_KEY
-            const serverBaseUrl = resolveBaseUrlEnv(
-                overrides,
-                "MODELSCOPE_BASE_URL",
-            )
             const baseURL = resolveBaseURL(
                 overrides?.apiKey,
                 overrides?.baseUrl,
-                serverBaseUrl,
+                process.env.MODELSCOPE_BASE_URL,
                 "https://api-inference.modelscope.cn/v1",
             )
             const modelscopeProvider = createOpenAI({
@@ -1177,27 +1021,3 @@ export function supportsImageInput(modelId: string): boolean {
     // Default: assume model supports images
     return true
 }
-
-/**
- * Get the AI model for diagram validation.
- * Uses VALIDATION_MODEL env var if set, otherwise falls back to AI_MODEL.
- * Throws if the model doesn't support image input.
- */
-export function getValidationModel(): ReturnType<typeof getAIModel>["model"] {
-    const modelId = process.env.VALIDATION_MODEL || process.env.AI_MODEL
-
-    if (!modelId) {
-        throw new Error(
-            "No validation model configured. Set VALIDATION_MODEL or AI_MODEL.",
-        )
-    }
-
-    if (!supportsImageInput(modelId)) {
-        throw new Error(
-            `Validation requires a vision-capable model. Model "${modelId}" does not support image input.`,
-        )
-    }
-
-    const { model } = getAIModel({ modelId })
-    return model
-}

lib/diagram-validator.ts

@@ -1,64 +0,0 @@
-/**
- * Types and utilities for VLM-based diagram validation.
- * The actual validation is performed via useValidateDiagram hook using AI SDK's useObject.
- */
-
-// Re-export types from the schema file (single source of truth)
-export type { ValidationIssue, ValidationResult } from "./validation-schema"
-
-import type { ValidationResult } from "./validation-schema"
-
-/**
- * Format validation feedback for display to the AI model.
- * This creates a human-readable error message that guides the AI to fix issues.
- *
- * @param result - The validation result from VLM
- * @returns Formatted string for tool error output
- */
-export function formatValidationFeedback(result: ValidationResult): string {
-    // If validation passed with no issues, return empty string
-    if (result.valid && result.issues.length === 0) {
-        return ""
-    }
-
-    const lines: string[] = []
-
-    lines.push("DIAGRAM VISUAL VALIDATION FAILED")
-    lines.push("")
-
-    // Group issues by severity
-    const criticalIssues = result.issues.filter(
-        (i) => i.severity === "critical",
-    )
-    const warnings = result.issues.filter((i) => i.severity === "warning")
-
-    if (criticalIssues.length > 0) {
-        lines.push("Critical Issues (must fix):")
-        for (const issue of criticalIssues) {
-            lines.push(`  - [${issue.type}] ${issue.description}`)
-        }
-        lines.push("")
-    }
-
-    if (warnings.length > 0) {
-        lines.push("Warnings:")
-        for (const issue of warnings) {
-            lines.push(`  - [${issue.type}] ${issue.description}`)
-        }
-        lines.push("")
-    }
-
-    if (result.suggestions.length > 0) {
-        lines.push("Suggestions to fix:")
-        for (const suggestion of result.suggestions) {
-            lines.push(`  - ${suggestion}`)
-        }
-        lines.push("")
-    }
-
-    lines.push(
-        "Please regenerate the diagram with corrected layout to fix these visual issues.",
-    )
-
-    return lines.join("\n")
-}

lib/i18n/dictionaries/en.json

@@ -115,11 +115,7 @@
         "httpProxy": "HTTP Proxy",
         "httpsProxy": "HTTPS Proxy",
         "applyProxy": "Apply",
-        "proxyApplied": "Proxy settings applied",
+        "proxyApplied": "Proxy settings applied"
-        "diagramValidation": "Diagram Validation (Experimental)",
-        "diagramValidationDescription": "Use a vision language model to validate generated diagrams. Requires a VLM like GPT-5.2 or Sonnet-4.5.",
-        "enabled": "Enabled",
-        "disabled": "Disabled"
     },
     "save": {
         "title": "Save Diagram",
@@ -252,24 +248,6 @@
         "searchPlaceholder": "Search chats...",
         "noResults": "No chats found"
     },
-    "validation": {
-        "title": "Validate Diagram",
-        "capturing": "Capturing",
-        "validating": "Validating",
-        "validatingWithAttempt": "Validating ({attempt}/{max})",
-        "valid": "Valid",
-        "validWithWarnings": "Valid with Warnings",
-        "issuesFound": "Issues Found",
-        "error": "Error",
-        "skipped": "Skipped",
-        "capturedScreenshot": "Captured Screenshot:",
-        "issuesFoundLabel": "Issues Found:",
-        "suggestions": "Suggestions:",
-        "passedValidation": "Diagram passed visual validation - no issues detected.",
-        "improvementRequested": "Improvement requested - check the new diagram below",
-        "improveWithSuggestions": "Improve with Suggestions",
-        "regenerateWithFeedback": "Regenerate the diagram using the validation feedback"
-    },
     "modelConfig": {
         "title": "AI Model Configuration",
         "description": "Configure multiple AI providers and models",
@@ -302,7 +280,6 @@
         "enterSecretKey": "Enter your secret access key",
         "baseUrl": "Base URL",
         "optional": "(optional)",
-        "baseUrlWithExample": "Base URL (optional, e.g. {example})",
         "customEndpoint": "Custom endpoint URL",
         "models": "Models",
         "customModelId": "Custom model ID...",
@@ -328,13 +305,10 @@
         "noModelsFound": "No models found.",
         "default": "Default",
         "serverDefault": "Server Default",
-        "serverModels": "Server Models",
-        "userModels": "User Models",
         "configureModels": "Configure Models...",
         "onlyVerifiedShown": "Only verified models are shown",
         "showUnvalidatedModels": "Show unvalidated models",
         "allModelsShown": "All models are shown (including unvalidated)",
-        "unvalidatedModelWarning": "This model has not been validated",
+        "unvalidatedModelWarning": "This model has not been validated"
-        "serverDefaultModel": "Server default model"
     }
 }

lib/i18n/dictionaries/ja.json

@@ -115,11 +115,7 @@
         "httpProxy": "HTTP プロキシ",
         "httpsProxy": "HTTPS プロキシ",
         "applyProxy": "適用",
-        "proxyApplied": "プロキシ設定が適用されました",
+        "proxyApplied": "プロキシ設定が適用されました"
-        "diagramValidation": "ダイアグラム検証（実験的）",
-        "diagramValidationDescription": "視覚言語モデルを使用して生成されたダイアグラムを検証します。GPT-5.2 や Sonnet-4.5 などの VLM が必要です。",
-        "enabled": "有効",
-        "disabled": "無効"
     },
     "save": {
         "title": "ダイアグラムを保存",
@@ -252,24 +248,6 @@
         "searchPlaceholder": "チャットを検索...",
         "noResults": "チャットが見つかりません"
     },
-    "validation": {
-        "title": "ダイアグラムを検証",
-        "capturing": "キャプチャ中",
-        "validating": "検証中",
-        "validatingWithAttempt": "検証中 ({attempt}/{max})",
-        "valid": "有効",
-        "validWithWarnings": "有効（警告あり）",
-        "issuesFound": "問題が見つかりました",
-        "error": "エラー",
-        "skipped": "スキップ",
-        "capturedScreenshot": "キャプチャした画像：",
-        "issuesFoundLabel": "検出された問題：",
-        "suggestions": "提案：",
-        "passedValidation": "ダイアグラムは視覚検証に合格しました - 問題は検出されませんでした。",
-        "improvementRequested": "改善リクエスト済み - 下の新しいダイアグラムを確認してください",
-        "improveWithSuggestions": "提案で改善",
-        "regenerateWithFeedback": "検証フィードバックを使用してダイアグラムを再生成"
-    },
     "modelConfig": {
         "title": "AIモデル設定",
         "description": "複数のAIプロバイダーとモデルを設定",
@@ -302,7 +280,6 @@
         "enterSecretKey": "シークレットアクセスキーを入力",
         "baseUrl": "ベース URL",
         "optional": "（オプション）",
-        "baseUrlWithExample": "ベース URL（オプション、例: {example}）",
         "customEndpoint": "カスタムエンドポイント URL",
         "models": "モデル",
         "customModelId": "カスタムモデル ID...",
@@ -328,13 +305,10 @@
         "noModelsFound": "モデルが見つかりません。",
         "default": "デフォルト",
         "serverDefault": "サーバーデフォルト",
-        "serverModels": "サーバーモデル",
-        "userModels": "ユーザーモデル",
         "configureModels": "モデルを設定...",
         "onlyVerifiedShown": "検証済みのモデルのみ表示",
         "showUnvalidatedModels": "未検証のモデルを表示",
         "allModelsShown": "すべてのモデルを表示（未検証を含む）",
-        "unvalidatedModelWarning": "このモデルは検証されていません",
+        "unvalidatedModelWarning": "このモデルは検証されていません"
-        "serverDefaultModel": "サーバーデフォルトモデル"
     }
 }

lib/i18n/dictionaries/zh.json

@@ -115,11 +115,7 @@
         "httpProxy": "HTTP 代理",
         "httpsProxy": "HTTPS 代理",
         "applyProxy": "应用",
-        "proxyApplied": "代理设置已应用",
+        "proxyApplied": "代理设置已应用"
-        "diagramValidation": "图表验证（实验性）",
-        "diagramValidationDescription": "使用视觉语言模型验证生成的图表。需要支持视觉的模型，如 GPT-5.2 或 Sonnet-4.5。",
-        "enabled": "已启用",
-        "disabled": "已禁用"
     },
     "save": {
         "title": "保存图表",
@@ -252,24 +248,6 @@
         "searchPlaceholder": "搜索对话...",
         "noResults": "未找到对话"
     },
-    "validation": {
-        "title": "验证图表",
-        "capturing": "截图中",
-        "validating": "验证中",
-        "validatingWithAttempt": "验证中 ({attempt}/{max})",
-        "valid": "通过",
-        "validWithWarnings": "通过（有警告）",
-        "issuesFound": "发现问题",
-        "error": "错误",
-        "skipped": "已跳过",
-        "capturedScreenshot": "截图预览：",
-        "issuesFoundLabel": "发现的问题：",
-        "suggestions": "建议：",
-        "passedValidation": "图表通过视觉验证 - 未发现问题。",
-        "improvementRequested": "改进请求已发送 - 请查看下方新图表",
-        "improveWithSuggestions": "根据建议改进",
-        "regenerateWithFeedback": "使用验证反馈重新生成图表"
-    },
     "modelConfig": {
         "title": "AI 模型配置",
         "description": "配置多个 AI 提供商和模型",
@@ -302,7 +280,6 @@
         "enterSecretKey": "输入您的 Secret Key",
         "baseUrl": "基础 URL",
         "optional": "（可选）",
-        "baseUrlWithExample": "基础 URL（可选，例如 {example}）",
         "customEndpoint": "自定义端点 URL",
         "models": "模型",
         "customModelId": "自定义模型 ID...",
@@ -328,13 +305,10 @@
         "noModelsFound": "未找到模型。",
         "default": "默认",
         "serverDefault": "服务器默认",
-        "serverModels": "服务器模型",
-        "userModels": "用户模型",
         "configureModels": "配置模型...",
         "onlyVerifiedShown": "仅显示已验证的模型",
         "showUnvalidatedModels": "显示未验证的模型",
         "allModelsShown": "显示所有模型（包括未验证的）",
-        "unvalidatedModelWarning": "此模型尚未验证",
+        "unvalidatedModelWarning": "此模型尚未验证"
-        "serverDefaultModel": "服务器默认模型"
     }
 }

lib/server-model-config.ts

@@ -1,151 +0,0 @@
-import fs from "fs/promises"
-import path from "path"
-import { z } from "zod"
-import type { ProviderName } from "@/lib/types/model-config"
-import { PROVIDER_INFO } from "@/lib/types/model-config"
-
-export const ProviderNameSchema: z.ZodType<ProviderName> = z
-    .string()
-    .refine((val): val is ProviderName => val in PROVIDER_INFO, {
-        message: "Invalid provider name",
-    })
-
-export const ServerProviderSchema = z.object({
-    name: z.string().min(1),
-    provider: ProviderNameSchema,
-    models: z.array(z.string().min(1)),
-    // Optional: custom environment variable name for API key
-    // e.g., "OPENAI_API_KEY_TEAM_A" instead of default "OPENAI_API_KEY"
-    apiKeyEnv: z.string().min(1).optional(),
-    // Optional: custom environment variable name for base URL
-    baseUrlEnv: z.string().min(1).optional(),
-    // Optional: mark the first model in this provider as the default
-    default: z.boolean().optional(),
-})
-
-export const ServerModelsConfigSchema = z.object({
-    providers: z.array(ServerProviderSchema),
-})
-
-export type ServerProviderConfig = z.infer<typeof ServerProviderSchema>
-export type ServerModelsConfig = z.infer<typeof ServerModelsConfigSchema>
-
-export interface FlattenedServerModel {
-    id: string // "server:<slugified-name>:<modelId>" - name ensures uniqueness for multiple API keys per provider
-    modelId: string
-    provider: ProviderName
-    providerLabel: string
-    isDefault: boolean
-    // Custom env var names for credentials (optional)
-    apiKeyEnv?: string
-    baseUrlEnv?: string
-}
-
-/**
- * Convert provider name to URL-safe slug for use in model ID
- * e.g., "OpenAI Production" → "openai-production"
- */
-function slugify(name: string): string {
-    return name
-        .toLowerCase()
-        .replace(/[^a-z0-9]+/g, "-")
-        .replace(/^-|-$/g, "")
-}
-
-function getConfigPath(): string {
-    const custom = process.env.AI_MODELS_CONFIG_PATH
-    if (custom && custom.trim().length > 0) return custom
-    return path.join(process.cwd(), "ai-models.json")
-}
-
-export async function loadRawServerModelsConfig(): Promise<ServerModelsConfig | null> {
-    // Priority 1: AI_MODELS_CONFIG env var (JSON string) - for cloud deployments
-    const envConfig = process.env.AI_MODELS_CONFIG
-    if (envConfig && envConfig.trim().length > 0) {
-        try {
-            const json = JSON.parse(envConfig)
-            return ServerModelsConfigSchema.parse(json)
-        } catch (err) {
-            console.error(
-                "[server-model-config] Failed to parse AI_MODELS_CONFIG:",
-                err,
-            )
-            return null
-        }
-    }
-
-    // Priority 2: ai-models.json file
-    const configPath = getConfigPath()
-    try {
-        const jsonStr = await fs.readFile(configPath, "utf8")
-        const json = JSON.parse(jsonStr)
-        return ServerModelsConfigSchema.parse(json)
-    } catch (err: any) {
-        if (err?.code === "ENOENT") {
-            return null
-        }
-        console.error(
-            "[server-model-config] Failed to load ai-models.json:",
-            err,
-        )
-        return null
-    }
-}
-
-export async function loadFlattenedServerModels(): Promise<
-    FlattenedServerModel[]
-> {
-    const cfg = await loadRawServerModelsConfig()
-    if (!cfg) return []
-
-    const defaultProvider = process.env.AI_PROVIDER as ProviderName | undefined
-    const defaultModelId = process.env.AI_MODEL
-
-    const flattened: FlattenedServerModel[] = []
-
-    for (const p of cfg.providers) {
-        const providerLabel =
-            p.name || PROVIDER_INFO[p.provider]?.label || p.provider
-
-        // Use slugified name for unique ID (supports multiple API keys per provider)
-        const nameSlug = slugify(p.name)
-
-        for (const modelId of p.models) {
-            const id = `server:${nameSlug}:${modelId}`
-
-            // Default model priority:
-            // 1. From ai-models.json: first model of provider with default: true
-            // 2. From env vars: AI_MODEL matches (legacy behavior)
-            const isDefault =
-                (p.default === true && modelId === p.models[0]) ||
-                (!!defaultModelId &&
-                    modelId === defaultModelId &&
-                    (!defaultProvider || defaultProvider === p.provider))
-
-            flattened.push({
-                id,
-                modelId,
-                provider: p.provider,
-                providerLabel,
-                isDefault,
-                apiKeyEnv: p.apiKeyEnv,
-                baseUrlEnv: p.baseUrlEnv,
-            })
-        }
-    }
-
-    return flattened
-}
-
-/**
- * Find a server model by its ID (format: "server:<slugified-name>:<modelId>")
- * Returns the model config including apiKeyEnv/baseUrlEnv if configured
- */
-export async function findServerModelById(
-    modelId: string,
-): Promise<FlattenedServerModel | null> {
-    if (!modelId.startsWith("server:")) return null
-
-    const models = await loadFlattenedServerModels()
-    return models.find((m) => m.id === modelId) || null
-}

lib/session-storage.ts

@@ -75,18 +75,6 @@ export function isIndexedDBAvailable(): boolean {
     }
 }
 
-// Check if IndexedDB is actually usable (not just present).
-export async function isIndexedDBUsable(): Promise<boolean> {
-    if (!isIndexedDBAvailable()) return false
-    try {
-        const db = await getDB()
-        db.close()
-        return true
-    } catch {
-        return false
-    }
-}
-
 // CRUD Operations
 export async function getAllSessionMetadata(): Promise<SessionMetadata[]> {
     if (!isIndexedDBAvailable()) return []

lib/ssrf-protection.ts

@@ -1,63 +0,0 @@
-/**
- * SSRF (Server-Side Request Forgery) protection utilities
- */
-
-/**
- * Check if URL points to private/internal network
- * Blocks: localhost, private IPs, link-local, AWS metadata service
- */
-export function isPrivateUrl(urlString: string): boolean {
-    try {
-        const url = new URL(urlString)
-        const hostname = url.hostname.toLowerCase()
-
-        // Block localhost
-        if (
-            hostname === "localhost" ||
-            hostname === "127.0.0.1" ||
-            hostname === "::1"
-        ) {
-            return true
-        }
-
-        // Block AWS/cloud metadata endpoints
-        if (
-            hostname === "169.254.169.254" ||
-            hostname === "metadata.google.internal"
-        ) {
-            return true
-        }
-
-        // Check for private IPv4 ranges
-        const ipv4Match = hostname.match(
-            /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/,
-        )
-        if (ipv4Match) {
-            const [, a, b] = ipv4Match.map(Number)
-            if (a === 10) return true // 10.0.0.0/8
-            if (a === 172 && b >= 16 && b <= 31) return true // 172.16.0.0/12
-            if (a === 192 && b === 168) return true // 192.168.0.0/16
-            if (a === 169 && b === 254) return true // 169.254.0.0/16 (link-local)
-            if (a === 127) return true // 127.0.0.0/8 (loopback)
-        }
-
-        // Block common internal hostnames
-        if (
-            hostname.endsWith(".local") ||
-            hostname.endsWith(".internal") ||
-            hostname.endsWith(".localhost")
-        ) {
-            return true
-        }
-
-        return false
-    } catch {
-        return true // Invalid URL - block it
-    }
-}
-
-/**
- * Whether private URLs are allowed (defaults to true)
- * Set ALLOW_PRIVATE_URLS=false to block private URLs
- */
-export const allowPrivateUrls = process.env.ALLOW_PRIVATE_URLS !== "false"

lib/storage.ts

@@ -24,7 +24,4 @@ export const STORAGE_KEYS = {
 
     // Chat input preferences
     sendShortcut: "next-ai-draw-io-send-shortcut",
-
-    // Diagram validation
-    vlmValidationEnabled: "next-ai-draw-io-vlm-validation-enabled",
 } as const

lib/types/model-config.ts

@@ -4,7 +4,6 @@ export type ProviderName =
     | "openai"
     | "anthropic"
     | "google"
-    | "vertexai"
     | "azure"
     | "bedrock"
     | "ollama"
@@ -37,9 +36,6 @@ export interface ProviderConfig {
     awsSecretAccessKey?: string
     awsRegion?: string
     awsSessionToken?: string // Optional, for temporary credentials
-    // Vertex AI specific fields
-    vertexApiKey?: string // Express Mode API key
-
     models: ModelConfig[]
     validated?: boolean // Has API key been validated
 }
@@ -54,7 +50,7 @@ export interface MultiModelConfig {
 
 // Flattened model for dropdown display
 export interface FlattenedModel {
-    id: string // Model config UUID or synthetic server ID (e.g., "server:provider:modelId")
+    id: string // Model config UUID
     modelId: string // Actual model ID
     provider: ProviderName
     providerLabel: string // Provider display name
@@ -65,17 +61,7 @@ export interface FlattenedModel {
     awsSecretAccessKey?: string
     awsRegion?: string
     awsSessionToken?: string
-    // Vertex AI specific fields
-    vertexApiKey?: string // Express Mode API key
-
     validated?: boolean // Has this model been validated
-    // Source of this model config: user-defined (client) or server-defined
-    source?: "user" | "server"
-    // Whether this model is the server default (matches AI_MODEL env var)
-    isDefault?: boolean
-    // Custom env var names for server models (allows multiple API keys per provider)
-    apiKeyEnv?: string
-    baseUrlEnv?: string
 }
 
 // Provider metadata
@@ -83,36 +69,20 @@ export const PROVIDER_INFO: Record<
     ProviderName,
     { label: string; defaultBaseUrl?: string }
 > = {
-    openai: {
+    openai: { label: "OpenAI" },
-        label: "OpenAI",
-        defaultBaseUrl: "https://api.openai.com/v1",
-    },
     anthropic: {
         label: "Anthropic",
         defaultBaseUrl: "https://api.anthropic.com/v1",
     },
-    google: {
+    google: { label: "Google" },
-        label: "Google",
+    azure: { label: "Azure OpenAI" },
-        defaultBaseUrl: "https://generativelanguage.googleapis.com/v1beta",
-    },
-    vertexai: { label: "Google Vertex AI" },
-    azure: {
-        label: "Azure OpenAI",
-        defaultBaseUrl: "https://your-resource.openai.azure.com/openai",
-    },
     bedrock: { label: "Amazon Bedrock" },
     ollama: {
         label: "Ollama",
         defaultBaseUrl: "http://localhost:11434",
     },
-    openrouter: {
+    openrouter: { label: "OpenRouter" },
-        label: "OpenRouter",
+    deepseek: { label: "DeepSeek" },
-        defaultBaseUrl: "https://openrouter.ai/api/v1",
-    },
-    deepseek: {
-        label: "DeepSeek",
-        defaultBaseUrl: "https://api.deepseek.com/v1",
-    },
     siliconflow: {
         label: "SiliconFlow",
         defaultBaseUrl: "https://api.siliconflow.cn/v1",
@@ -121,10 +91,7 @@ export const PROVIDER_INFO: Record<
         label: "SGLang",
         defaultBaseUrl: "http://127.0.0.1:8000/v1",
     },
-    gateway: {
+    gateway: { label: "AI Gateway" },
-        label: "AI Gateway",
-        defaultBaseUrl: "https://ai-gateway.vercel.sh/v1/ai",
-    },
     edgeone: { label: "EdgeOne Pages" },
     doubao: {
         label: "Doubao (ByteDance)",
@@ -190,17 +157,6 @@ export const SUGGESTED_MODELS: Partial<Record<ProviderName, string[]>> = {
         // Legacy
         "gemini-pro",
     ],
-    vertexai: [
-        // Gemini 2.5 series
-        "gemini-2.5-pro",
-        "gemini-2.5-flash",
-        // Gemini 2.0 series
-        "gemini-2.0-flash",
-        "gemini-2.0-flash-exp",
-        // Gemini 1.5 series
-        "gemini-1.5-pro",
-        "gemini-1.5-flash",
-    ],
     azure: ["gpt-4o", "gpt-4o-mini", "gpt-4-turbo", "gpt-4", "gpt-35-turbo"],
     bedrock: [
         // Anthropic Claude
@@ -332,7 +288,7 @@ export function createModelConfig(modelId: string): ModelConfig {
     }
 }
 
-// Get all models as flattened list for dropdown (user-defined only)
+// Get all models as flattened list for dropdown
 export function flattenModels(config: MultiModelConfig): FlattenedModel[] {
     const models: FlattenedModel[] = []
 
@@ -354,12 +310,7 @@ export function flattenModels(config: MultiModelConfig): FlattenedModel[] {
                 awsSecretAccessKey: provider.awsSecretAccessKey,
                 awsRegion: provider.awsRegion,
                 awsSessionToken: provider.awsSessionToken,
-                // Vertex AI fields
-                vertexApiKey: provider.vertexApiKey,
-
                 validated: model.validated,
-                source: "user",
-                isDefault: false,
             })
         }
     }

lib/validation-prompts.ts

@@ -1,22 +0,0 @@
-/**
- * VLM system prompt for diagram validation.
- * Note: Response parsing is now handled via AI SDK's structured outputs (generateObject with schema).
- */
-
-export const VALIDATION_SYSTEM_PROMPT = `You are a diagram quality validator. Analyze the rendered diagram image for visual issues.
-
-Evaluate the diagram for the following issues:
-
-1. **Overlapping elements** (critical): Shapes covering each other inappropriately, making content unreadable
-2. **Edge routing issues** (critical): Lines/arrows crossing through shapes that are not their source or target
-3. **Text readability** (warning): Labels cut off, overlapping, or too small to read
-4. **Layout quality** (warning): Poor spacing, misalignment, or cramped elements
-5. **Rendering errors** (critical): Incomplete, corrupted, or missing visual elements
-
-Rules:
-- Set "valid" to true ONLY if there are no critical issues
-- Be specific about which elements have problems (e.g., "The 'Login' box overlaps with 'Register' box")
-- Provide actionable suggestions (e.g., "Move the Login box 50 pixels to the left")
-- Minor cosmetic issues (slight misalignment, non-uniform spacing) should be warnings, not critical
-- Empty diagrams or diagrams with only 1-2 elements should pass unless they have obvious errors
-- If the diagram looks generally acceptable, set valid to true even with minor warnings`

lib/validation-schema.ts

@@ -1,38 +0,0 @@
-/**
- * Shared validation schema for VLM-based diagram validation.
- * This file can be safely imported on both client and server.
- */
-
-import { z } from "zod"
-
-// Schema for structured validation output
-export const ValidationResultSchema = z.object({
-    valid: z.boolean().describe("True if there are no critical issues"),
-    issues: z
-        .array(
-            z.object({
-                type: z
-                    .enum([
-                        "overlap",
-                        "edge_routing",
-                        "text",
-                        "layout",
-                        "rendering",
-                    ])
-                    .describe("Type of visual issue"),
-                severity: z
-                    .enum(["critical", "warning"])
-                    .describe("Severity level"),
-                description: z
-                    .string()
-                    .describe("Clear description of the issue"),
-            }),
-        )
-        .describe("List of visual issues found"),
-    suggestions: z
-        .array(z.string())
-        .describe("Actionable suggestions to fix issues"),
-})
-
-export type ValidationResult = z.infer<typeof ValidationResultSchema>
-export type ValidationIssue = ValidationResult["issues"][number]

package.json

@@ -1,6 +1,6 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.4.12",
+    "version": "0.4.10",
     "license": "Apache-2.0",
     "private": true,
     "main": "dist-electron/main/index.js",
@@ -37,7 +37,6 @@
         "@ai-sdk/deepseek": "^2.0.0",
         "@ai-sdk/gateway": "^3.0.0",
         "@ai-sdk/google": "^3.0.0",
-        "@ai-sdk/google-vertex": "^4.0.16",
         "@ai-sdk/openai": "^3.0.0",
         "@ai-sdk/react": "^3.0.1",
         "@aws-sdk/client-dynamodb": "^3.957.0",
@@ -50,7 +49,6 @@
         "@next/third-parties": "^16.0.6",
         "@opennextjs/cloudflare": "1.14.8",
         "@openrouter/ai-sdk-provider": "^1.5.4",
-        "@opentelemetry/api": "^1.9.0",
         "@opentelemetry/exporter-trace-otlp-http": "^0.209.0",
         "@opentelemetry/sdk-trace-node": "^2.2.0",
         "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -139,7 +137,7 @@
         "vite-tsconfig-paths": "^6.0.3",
         "vitest": "^4.0.16",
         "wait-on": "^9.0.3",
-        "wrangler": "^4.60.0"
+        "wrangler": "4.58.0"
     },
     "overrides": {
         "@openrouter/ai-sdk-provider": {

packages/mcp-server/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@next-ai-drawio/mcp-server",
-    "version": "0.1.15",
+    "version": "0.1.12",
     "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/http-server.ts

@@ -44,17 +44,6 @@ function isLikelyMcpSessionId(sessionId: string): boolean {
     return sessionId.startsWith("mcp-") && sessionId.length <= 128
 }
 
-// Find the most recent active session (for auto-redirect when no sessionId provided)
-function getMostRecentSessionId(): string | null {
-    let mostRecent: { id: string; lastUpdated: Date } | null = null
-    for (const [sessionId, state] of stateStore) {
-        if (!mostRecent || state.lastUpdated > mostRecent.lastUpdated) {
-            mostRecent = { id: sessionId, lastUpdated: state.lastUpdated }
-        }
-    }
-    return mostRecent?.id || null
-}
-
 function ensureSessionStateInitialized(sessionId: string): void {
     if (!sessionId) return
     if (!isLikelyMcpSessionId(sessionId)) return
@@ -206,17 +195,6 @@ function handleRequest(
 
     if (url.pathname === "/" || url.pathname === "/index.html") {
         const sessionId = url.searchParams.get("mcp") || ""
-
-        // Auto-redirect to most recent session if no sessionId provided
-        if (!sessionId) {
-            const recentSessionId = getMostRecentSessionId()
-            if (recentSessionId) {
-                res.writeHead(302, { Location: `/?mcp=${recentSessionId}` })
-                res.end()
-                return
-            }
-        }
-
         ensureSessionStateInitialized(sessionId)
 
         res.writeHead(200, { "Content-Type": "text/html" })
@@ -397,202 +375,85 @@ function getHtmlPage(sessionId: string): string {
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Next AI Draw.io</title>
+    <title>Draw.io MCP</title>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');
         * { margin: 0; padding: 0; box-sizing: border-box; }
         html, body { width: 100%; height: 100%; overflow: hidden; }
         #container { width: 100%; height: 100%; display: flex; flex-direction: column; }
         #header {
-            padding: 0 20px; height: 52px;
+            padding: 8px 16px; background: #1a1a2e; color: #eee;
-            background: linear-gradient(to bottom, #ffffff, #fafbfc);
+            font-family: system-ui, sans-serif; font-size: 14px;
-            border-bottom: 1px solid #e8ecf0;
-            font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
             display: flex; justify-content: space-between; align-items: center;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
-            position: relative; z-index: 10;
-        }
-        #header .brand {
-            display: flex; align-items: center; gap: 10px;
-        }
-        #header .logo {
-            width: 28px; height: 28px; border-radius: 6px;
-            background: #18181b;
-            display: flex; align-items: center; justify-content: center;
-            overflow: hidden;
-        }
-        #header .logo img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
-        #header .title {
-            font-size: 15px; font-weight: 600; color: #1a1a2e;
-            letter-spacing: -0.3px;
-        }
-        #header .session {
-            font-size: 11px; color: #8b95a5; font-weight: 400;
-            background: #f1f3f9; padding: 3px 8px; border-radius: 4px;
-            margin-left: 12px; font-family: 'SF Mono', Monaco, monospace;
-        }
-        #header .right { display: flex; align-items: center; gap: 12px; }
-        #save-btn {
-            display: flex; align-items: center; gap: 6px;
-            padding: 7px 14px; border-radius: 8px; font-size: 13px;
-            background: linear-gradient(to bottom, #18181b, #27272a);
-            color: white; border: none; cursor: pointer;
-            font-weight: 500; font-family: inherit;
-            box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);
-            transition: all 0.15s ease;
-        }
-        #save-btn svg { width: 14px; height: 14px; }
-        #save-btn:hover {
-            background: linear-gradient(to bottom, #27272a, #3f3f46);
-            transform: translateY(-1px);
-            box-shadow: 0 3px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
-        }
-        #save-btn:active { transform: translateY(0); }
-        #save-btn:disabled, #history-btn:disabled {
-            background: #e5e7eb; color: #9ca3af;
-            cursor: not-allowed; transform: none; box-shadow: none;
-        }
-        #history-btn {
-            display: flex; align-items: center; gap: 6px;
-            padding: 7px 14px; border-radius: 8px; font-size: 13px;
-            background: #f4f4f5; color: #3f3f46; border: 1px solid #e4e4e7;
-            cursor: pointer; font-weight: 500; font-family: inherit;
-            transition: all 0.15s ease;
-        }
-        #history-btn svg { width: 14px; height: 14px; }
-        #history-btn:hover {
-            background: #e4e4e7; border-color: #d4d4d8;
         }
+        #header .session { color: #888; font-size: 12px; }
+        #header .status { font-size: 12px; }
+        #header .status.connected { color: #4ade80; }
+        #header .status.disconnected { color: #f87171; }
         #drawio { flex: 1; border: none; }
-        #history-modal, #save-modal {
+        #history-btn {
-            display: none; position: fixed; inset: 0;
+            position: fixed; bottom: 24px; right: 24px;
-            background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
+            width: 48px; height: 48px; border-radius: 50%;
-            z-index: 2000; align-items: center; justify-content: center;
+            background: #3b82f6; color: white; border: none; cursor: pointer;
-        }
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-        #history-modal.open, #save-modal.open { display: flex; }
-        .modal-content {
-            background: white; border-radius: 16px;
-            width: 90%; max-width: 480px; max-height: 70vh;
-            display: flex; flex-direction: column;
-            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
-            font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
-            animation: modalIn 0.2s ease-out;
-        }
-        @keyframes modalIn {
-            from { opacity: 0; transform: scale(0.95) translateY(-10px); }
-            to { opacity: 1; transform: scale(1) translateY(0); }
-        }
-        .modal-header {
-            padding: 20px 24px 16px; border-bottom: 1px solid #f1f3f5;
-        }
-        .modal-header h2 {
-            font-size: 17px; font-weight: 600; margin: 0; color: #18181b;
-            letter-spacing: -0.3px;
-        }
-        .modal-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
-        .modal-footer {
-            padding: 16px 24px; border-top: 1px solid #f1f3f5;
-            display: flex; gap: 10px; justify-content: flex-end;
-        }
-        .history-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
-        .history-item {
-            border: 2px solid #e4e4e7; border-radius: 10px; padding: 10px;
-            cursor: pointer; text-align: center; transition: all 0.15s ease;
-            background: #fafafa;
-        }
-        .history-item:hover { border-color: #a1a1aa; background: white; }
-        .history-item.selected {
-            border-color: #18181b; background: white;
-            box-shadow: 0 0 0 3px rgba(24,24,27,0.1);
-        }
-        .history-item .thumb {
-            aspect-ratio: 4/3; background: #f4f4f5; border-radius: 6px;
             display: flex; align-items: center; justify-content: center;
-            margin-bottom: 6px; overflow: hidden;
+            z-index: 1000;
+        }
+        #history-btn:hover { background: #2563eb; }
+        #history-btn:disabled { background: #6b7280; cursor: not-allowed; }
+        #history-btn svg { width: 24px; height: 24px; }
+        #history-modal {
+            display: none; position: fixed; inset: 0;
+            background: rgba(0,0,0,0.5); z-index: 2000;
+            align-items: center; justify-content: center;
+        }
+        #history-modal.open { display: flex; }
+        .modal-content {
+            background: white; border-radius: 12px;
+            width: 90%; max-width: 500px; max-height: 70vh;
+            display: flex; flex-direction: column;
+        }
+        .modal-header { padding: 16px; border-bottom: 1px solid #e5e7eb; }
+        .modal-header h2 { font-size: 18px; margin: 0; }
+        .modal-body { flex: 1; overflow-y: auto; padding: 16px; }
+        .modal-footer { padding: 12px 16px; border-top: 1px solid #e5e7eb; display: flex; gap: 8px; justify-content: flex-end; }
+        .history-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
+        .history-item {
+            border: 2px solid #e5e7eb; border-radius: 8px; padding: 8px;
+            cursor: pointer; text-align: center;
+        }
+        .history-item:hover { border-color: #3b82f6; }
+        .history-item.selected { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.3); }
+        .history-item .thumb {
+            aspect-ratio: 4/3; background: #f3f4f6; border-radius: 4px;
+            display: flex; align-items: center; justify-content: center;
+            margin-bottom: 4px; overflow: hidden;
         }
         .history-item .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
-        .history-item .label { font-size: 11px; color: #71717a; font-weight: 500; }
+        .history-item .label { font-size: 12px; color: #666; }
-        .btn {
+        .btn { padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; border: none; }
-            padding: 9px 18px; border-radius: 8px; font-size: 13px;
+        .btn-primary { background: #3b82f6; color: white; }
-            cursor: pointer; border: none; font-weight: 500;
+        .btn-primary:disabled { background: #93c5fd; cursor: not-allowed; }
-            font-family: inherit; transition: all 0.15s ease;
+        .btn-secondary { background: #f3f4f6; color: #374151; }
-        }
+        .empty { text-align: center; padding: 40px; color: #666; }
-        .btn-primary {
-            background: linear-gradient(to bottom, #18181b, #27272a);
-            color: white;
-            box-shadow: 0 1px 2px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);
-        }
-        .btn-primary:hover {
-            background: linear-gradient(to bottom, #27272a, #3f3f46);
-            transform: translateY(-1px);
-        }
-        .btn-primary:disabled {
-            background: #e4e4e7; color: #a1a1aa;
-            cursor: not-allowed; transform: none; box-shadow: none;
-        }
-        .btn-secondary {
-            background: #f4f4f5; color: #3f3f46; border: 1px solid #e4e4e7;
-        }
-        .btn-secondary:hover { background: #e4e4e7; }
-        .empty { text-align: center; padding: 40px; color: #71717a; font-size: 14px; }
-        .form-group { margin-bottom: 18px; }
-        .form-group label {
-            display: block; font-size: 13px; font-weight: 500;
-            margin-bottom: 8px; color: #3f3f46;
-        }
-        .form-group select, .form-group input {
-            width: 100%; padding: 10px 14px; border: 1px solid #e4e4e7;
-            border-radius: 8px; font-size: 14px; outline: none;
-            font-family: inherit; background: white;
-            transition: all 0.15s ease;
-        }
-        .form-group select:focus, .form-group input:focus {
-            border-color: #18181b;
-            box-shadow: 0 0 0 3px rgba(24,24,27,0.08);
-        }
-        .filename-group { display: flex; }
-        .filename-group input { border-radius: 8px 0 0 8px; border-right: none; }
-        .filename-group .ext {
-            padding: 10px 14px; background: #f4f4f5; border: 1px solid #e4e4e7;
-            border-radius: 0 8px 8px 0; font-size: 13px; color: #71717a;
-            font-family: 'SF Mono', Monaco, monospace;
-        }
     </style>
 </head>
 <body>
     <div id="container">
         <div id="header">
-            <div class="brand">
+            <div>
-                <div class="logo">
+                <strong>Draw.io MCP</strong>
-                    <svg viewBox="0 0 1536 1536" fill="#ffffff">
+                <span class="session">${sessionId ? `Session: ${sessionId}` : "No session"}</span>
-                        <g transform="translate(0,1536) scale(0.1,-0.1)">
-                            <path d="M2765 14404 c-100 -29 -181 -58 -225 -82 -227 -125 -359 -296 -431 -560 -19 -70 -19 -108 -19 -1175 0 -1068 1 -1104 20 -1172 58 -206 159 -356 319 -474 71 -53 199 -121 226 -121 9 0 26 -5 38 -12 12 -6 62 -19 112 -29 85 -17 207 -18 2219 -19 1172 0 2133 -3 2138 -8 4 -4 7 -246 6 -538 l-3 -529 -2330 -5 c-2506 -6 -2373 -3 -2470 -54 -61 -31 -150 -113 -194 -178 -87 -128 -82 -77 -90 -1025 l-6 -838 -360 -6 c-292 -4 -368 -8 -405 -21 -194 -68 -303 -177 -373 -372 l-22 -61 1 -2887 c1 -2716 2 -2890 18 -2935 56 -153 161 -276 286 -334 126 -59 0 -54 1400 -54 1394 0 1290 -4 1410 53 95 45 198 148 242 241 62 133 58 -93 58 3026 0 2992 1 2883 -40 2990 -59 156 -183 272 -360 337 -25 9 -146 14 -440 18 l-405 5 0 540 0 540 2020 3 c1111 1 2030 0 2043 -3 l22 -5 -2 -538 -3 -537 -380 -6 c-312 -4 -388 -8 -426 -21 -195 -68 -326 -204 -383 -399 -15 -51 -16 -295 -16 -2921 0 -2778 1 -2867 19 -2920 36 -104 72 -167 134 -230 75 -78 115 -105 222 -151 l50 -22 1219 -3 c672 -1 1255 1 1300 6 109 12 217 63 298 140 73 69 107 118 144 208 l29 69 3 2880 c2 2687 1 2884 -15 2945 -48 183 -188 332 -373 398 -37 13 -114 17 -430 21 l-385 6 -3 534 c-2 421 0 536 10 543 7 4 925 8 2039 8 1718 0 2028 -2 2038 -14 8 -10 11 -154 11 -531 -1 -284 -4 -523 -7 -531 -4 -12 -69 -14 -392 -14 -354 0 -391 -2 -448 -20 -168 -52 -282 -148 -353 -295 -22 -45 -40 -91 -40 -103 0 -11 -5 -33 -10 -47 -7 -18 -10 -988 -10 -2875 0 -2393 2 -2858 14 -2902 43 -167 148 -298 293 -369 57 -27 107 -44 151 -50 88 -11 2429 -11 2508 0 210 31 416 238 445 450 6 39 8 1245 7 2926 -3 2713 -4 2862 -21 2900 -41 93 -74 150 -110 191 -46 52 -149 134 -169 134 -8 0 -19 5 -24 10 -6 6 -42 19 -80 30 -63 18 -100 20 -415 20 -307 0 -348 2 -353 16 -3 9 -6 390 -6 848 0 797 -1 834 -19 886 -31 87 -50 118 -111 183 -66 70 -141 119 -221 144 -50 16 -228 18 -2389 23 l-2335 5 0 535 0 535 2165 5 c1191 3 2170 8 2176 12 6 4 35 12 65 17 201 35 435 198 539 376 55 93 82 153 110 245 19 63 20 94 20 1167 0 1047 -1 1106 -19 1180 -70 290 -275 523 -539 613 -160 54 232 50 -5028 49 -4182 0 -4856 -2 -4899 -15z"/>
-                        </g>
-                    </svg>
-                </div>
-                <span class="title">Next AI Draw.io</span>
-                ${sessionId ? `<span class="session">${sessionId.slice(-8)}</span>` : ""}
-            </div>
-            <div class="right">
-                <button id="history-btn" title="History" ${sessionId ? "" : "disabled"}>
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <circle cx="12" cy="12" r="10"></circle>
-                        <polyline points="12 6 12 12 16 14"></polyline>
-                    </svg>
-                    History
-                </button>
-                <button id="save-btn" ${sessionId ? "" : "disabled"}>
-                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
-                        <polyline points="7 10 12 15 17 10"></polyline>
-                        <line x1="12" y1="15" x2="12" y2="3"></line>
-                    </svg>
-                    Download
-                </button>
             </div>
+            <div id="status" class="status disconnected">Connecting...</div>
         </div>
-        <iframe id="drawio" src="${normalizeUrl(DRAWIO_BASE_URL)}/?embed=1&proto=json&spin=1&libraries=1&noSaveBtn=1&noExitBtn=1&saveAndExit=0"></iframe>
+        <iframe id="drawio" src="${normalizeUrl(DRAWIO_BASE_URL)}/?embed=1&proto=json&spin=1&libraries=1"></iframe>
     </div>
+    <button id="history-btn" title="History" ${sessionId ? "" : "disabled"}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"></circle>
+            <polyline points="12 6 12 12 16 14"></polyline>
+        </svg>
+    </button>
     <div id="history-modal">
         <div class="modal-content">
             <div class="modal-header"><h2>History</h2></div>
@@ -606,35 +467,10 @@ function getHtmlPage(sessionId: string): string {
             </div>
         </div>
     </div>
-    <div id="save-modal">
-        <div class="modal-content">
-            <div class="modal-header"><h2>Download Diagram</h2></div>
-            <div class="modal-body">
-                <div class="form-group">
-                    <label>Format</label>
-                    <select id="save-format">
-                        <option value="drawio">Draw.io (.drawio)</option>
-                        <option value="png">PNG Image (.png)</option>
-                        <option value="svg">SVG Vector (.svg)</option>
-                    </select>
-                </div>
-                <div class="form-group">
-                    <label>Filename</label>
-                    <div class="filename-group">
-                        <input type="text" id="save-filename" value="diagram" placeholder="Enter filename">
-                        <span class="ext" id="save-ext">.drawio</span>
-                    </div>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button class="btn btn-secondary" id="save-cancel-btn">Cancel</button>
-                <button class="btn btn-primary" id="save-confirm-btn">Save</button>
-            </div>
-        </div>
-    </div>
     <script>
         const sessionId = "${sessionId}";
         const iframe = document.getElementById('drawio');
+        const statusEl = document.getElementById('status');
         let currentVersion = 0, isReady = false, pendingXml = null, lastXml = null;
         let pendingSvgExport = null;
         let pendingAiSvg = false;
@@ -645,6 +481,8 @@ function getHtmlPage(sessionId: string): string {
                 const msg = JSON.parse(e.data);
                 if (msg.event === 'init') {
                     isReady = true;
+                    statusEl.textContent = 'Ready';
+                    statusEl.className = 'status connected';
                     if (pendingXml) { loadDiagram(pendingXml); pendingXml = null; }
                 } else if ((msg.event === 'save' || msg.event === 'autosave') && msg.xml && msg.xml !== lastXml) {
                     // Request SVG export, then push state with SVG
@@ -653,23 +491,6 @@ function getHtmlPage(sessionId: string): string {
                     // Fallback if export doesn't respond
                     setTimeout(() => { if (pendingSvgExport === msg.xml) { pushState(msg.xml, ''); pendingSvgExport = null; } }, 2000);
                 } else if (msg.event === 'export' && msg.data) {
-                    // Handle file download export (PNG/SVG only, drawio uses lastXml directly)
-                    if (pendingDownload && (pendingDownload.format === 'png' || pendingDownload.format === 'svg')) {
-                        const dl = pendingDownload;
-                        pendingDownload = null;
-                        let dataUrl = msg.data;
-                        if (!dataUrl.startsWith('data:')) {
-                            const mime = dl.format === 'png' ? 'image/png' : 'image/svg+xml';
-                            dataUrl = 'data:' + mime + ';base64,' + btoa(unescape(encodeURIComponent(msg.data)));
-                        }
-                        const a = document.createElement('a');
-                        a.href = dataUrl; a.download = dl.filename;
-                        document.body.appendChild(a); a.click(); document.body.removeChild(a);
-                        saveModal.classList.remove('open');
-                        saveConfirmBtn.disabled = false;
-                        saveConfirmBtn.textContent = 'Save';
-                        return;
-                    }
                     // Handle sync export (XML format) - server requested fresh state
                     if (pendingSyncExport && !msg.data.startsWith('data:') && !msg.data.startsWith('<svg')) {
                         pendingSyncExport = false;
@@ -742,64 +563,6 @@ function getHtmlPage(sessionId: string): string {
 
         if (sessionId) { poll(); setInterval(poll, 2000); }
 
-        // Save modal
-        const saveBtn = document.getElementById('save-btn');
-        const saveModal = document.getElementById('save-modal');
-        const saveFormat = document.getElementById('save-format');
-        const saveFilename = document.getElementById('save-filename');
-        const saveExt = document.getElementById('save-ext');
-        const saveCancelBtn = document.getElementById('save-cancel-btn');
-        const saveConfirmBtn = document.getElementById('save-confirm-btn');
-        let pendingDownload = null;
-
-        const extMap = { drawio: '.drawio', png: '.png', svg: '.svg' };
-
-        saveBtn.onclick = () => {
-            if (!sessionId || !isReady) return;
-            saveModal.classList.add('open');
-            saveFilename.focus();
-            saveFilename.select();
-        };
-
-        saveFormat.onchange = () => {
-            saveExt.textContent = extMap[saveFormat.value] || '.drawio';
-        };
-
-        saveCancelBtn.onclick = () => { saveModal.classList.remove('open'); };
-        saveModal.onclick = (e) => { if (e.target === saveModal) saveCancelBtn.onclick(); };
-
-        saveConfirmBtn.onclick = () => {
-            const format = saveFormat.value;
-            const filename = (saveFilename.value.trim() || 'diagram') + extMap[format];
-            saveConfirmBtn.disabled = true;
-            saveConfirmBtn.textContent = 'Exporting...';
-
-            if (format === 'drawio') {
-                // Use lastXml directly instead of requesting export (avoids race with SVG exports)
-                let xmlData = lastXml || '';
-                if (xmlData && !xmlData.includes('<mxfile')) {
-                    xmlData = '<mxfile host="mcp"><diagram name="Page-1">' + xmlData + '</diagram></mxfile>';
-                }
-                const blob = new Blob([xmlData], { type: 'application/xml' });
-                const url = URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url; a.download = filename;
-                document.body.appendChild(a); a.click(); document.body.removeChild(a);
-                URL.revokeObjectURL(url);
-                saveModal.classList.remove('open');
-                saveConfirmBtn.disabled = false;
-                saveConfirmBtn.textContent = 'Save';
-            } else if (format === 'png') {
-                pendingDownload = { format: 'png', filename };
-                iframe.contentWindow.postMessage(JSON.stringify({ action: 'export', format: 'png', scale: 2 }), '*');
-                setTimeout(() => { saveConfirmBtn.disabled = false; saveConfirmBtn.textContent = 'Save'; pendingDownload = null; }, 5000);
-            } else if (format === 'svg') {
-                pendingDownload = { format: 'svg', filename };
-                iframe.contentWindow.postMessage(JSON.stringify({ action: 'export', format: 'svg' }), '*');
-                setTimeout(() => { saveConfirmBtn.disabled = false; saveConfirmBtn.textContent = 'Save'; pendingDownload = null; }, 5000);
-            }
-        };
-
         // History UI
         const historyBtn = document.getElementById('history-btn');
         const historyModal = document.getElementById('history-modal');

packages/mcp-server/src/index.ts

@@ -260,7 +260,6 @@ COMMON STYLES:
             // Update session state
             currentSession.xml = xml
             currentSession.version++
-            currentSession.lastGetDiagramTime = Date.now()
 
             // Push to embedded server state
             setState(currentSession.id, xml)

proxy.ts

@@ -31,7 +31,6 @@ export function proxy(request: NextRequest) {
     if (
         pathname.startsWith("/api/") ||
         pathname.startsWith("/_next/") ||
-        pathname.startsWith("/drawio") ||
         pathname.includes("/favicon") ||
         /\.(.*)$/.test(pathname)
     ) {

scripts/afterPack.cjs

@@ -1,52 +1,10 @@
 /**
  * electron-builder afterPack hook
  * Copies node_modules to the standalone directory in the packaged app
- * and ad-hoc signs macOS apps for offline draw.io bundle compatibility
  */
 
-const {
+const { cpSync, existsSync } = require("fs")
-    copyFileSync,
-    existsSync,
-    lstatSync,
-    mkdirSync,
-    readdirSync,
-    statSync,
-} = require("fs")
 const path = require("path")
-const { execSync } = require("child_process")
-
-/**
- * Copy directory recursively, converting symlinks to regular files/directories.
- * This is needed because cpSync with dereference:true does NOT convert symlinks.
- * macOS codesign fails if bundle contains symlinks pointing outside the bundle.
- */
-function copyDereferenced(src, dst) {
-    const lstat = lstatSync(src)
-
-    if (lstat.isSymbolicLink()) {
-        // Follow symlink and check what it points to
-        const stat = statSync(src)
-        if (stat.isDirectory()) {
-            // Symlink to directory: recursively copy the directory contents
-            mkdirSync(dst, { recursive: true })
-            for (const entry of readdirSync(src)) {
-                copyDereferenced(path.join(src, entry), path.join(dst, entry))
-            }
-        } else {
-            // Symlink to file: copy the actual file content
-            mkdirSync(path.join(dst, ".."), { recursive: true })
-            copyFileSync(src, dst)
-        }
-    } else if (lstat.isDirectory()) {
-        mkdirSync(dst, { recursive: true })
-        for (const entry of readdirSync(src)) {
-            copyDereferenced(path.join(src, entry), path.join(dst, entry))
-        }
-    } else {
-        mkdirSync(path.join(dst, ".."), { recursive: true })
-        copyFileSync(src, dst)
-    }
-}
 
 module.exports = async (context) => {
     const appOutDir = context.appOutDir
@@ -67,7 +25,7 @@ module.exports = async (context) => {
     console.log(`[afterPack] Copying node_modules to ${targetNodeModules}`)
 
     if (existsSync(sourceNodeModules) && existsSync(standaloneDir)) {
-        copyDereferenced(sourceNodeModules, targetNodeModules)
+        cpSync(sourceNodeModules, targetNodeModules, { recursive: true })
         console.log("[afterPack] node_modules copied successfully")
     } else {
         console.error("[afterPack] Source or target directory not found!")
@@ -82,22 +40,4 @@ module.exports = async (context) => {
                 "Ensure 'npm run electron:prepare' was run before building.",
         )
     }
-
-    // Ad-hoc sign macOS apps to fix signature issues with bundled draw.io files
-    if (context.packager.platform.name === "mac") {
-        const appPath = path.join(
-            appOutDir,
-            `${context.packager.appInfo.productFilename}.app`,
-        )
-        console.log(`[afterPack] Ad-hoc signing macOS app: ${appPath}`)
-        try {
-            execSync(`codesign --force --deep --sign - "${appPath}"`, {
-                stdio: "inherit",
-            })
-            console.log("[afterPack] Ad-hoc signing completed successfully")
-        } catch (error) {
-            console.error("[afterPack] Ad-hoc signing failed:", error.message)
-            throw error
-        }
-    }
 }

scripts/prepare-electron-build.mjs

@@ -6,54 +6,13 @@
  * that electron-builder can properly include
  */
 
-import {
+import { cpSync, existsSync, mkdirSync, rmSync } from "node:fs"
-    copyFileSync,
-    existsSync,
-    lstatSync,
-    mkdirSync,
-    readdirSync,
-    rmSync,
-    statSync,
-} from "node:fs"
 import { join } from "node:path"
 import { fileURLToPath } from "node:url"
 
 const __dirname = fileURLToPath(new URL(".", import.meta.url))
 const rootDir = join(__dirname, "..")
 
-/**
- * Copy directory recursively, converting symlinks to regular files/directories.
- * This is needed because cpSync with dereference:true does NOT convert symlinks.
- * macOS codesign fails if bundle contains symlinks pointing outside the bundle.
- */
-function copyDereferenced(src, dst) {
-    const lstat = lstatSync(src)
-
-    if (lstat.isSymbolicLink()) {
-        // Follow symlink and check what it points to
-        const stat = statSync(src)
-        if (stat.isDirectory()) {
-            // Symlink to directory: recursively copy the directory contents
-            mkdirSync(dst, { recursive: true })
-            for (const entry of readdirSync(src)) {
-                copyDereferenced(join(src, entry), join(dst, entry))
-            }
-        } else {
-            // Symlink to file: copy the actual file content
-            mkdirSync(join(dst, ".."), { recursive: true })
-            copyFileSync(src, dst)
-        }
-    } else if (lstat.isDirectory()) {
-        mkdirSync(dst, { recursive: true })
-        for (const entry of readdirSync(src)) {
-            copyDereferenced(join(src, entry), join(dst, entry))
-        }
-    } else {
-        mkdirSync(join(dst, ".."), { recursive: true })
-        copyFileSync(src, dst)
-    }
-}
-
 const standaloneDir = join(rootDir, ".next", "standalone")
 const staticDir = join(rootDir, ".next", "static")
 const targetDir = join(rootDir, "electron-standalone")
@@ -71,19 +30,20 @@ mkdirSync(targetDir, { recursive: true })
 
 // Copy standalone (includes node_modules)
 console.log("Copying standalone directory...")
-copyDereferenced(standaloneDir, targetDir)
+cpSync(standaloneDir, targetDir, { recursive: true })
 
 // Copy static files
 console.log("Copying static files...")
 const targetStaticDir = join(targetDir, ".next", "static")
-copyDereferenced(staticDir, targetStaticDir)
+mkdirSync(targetStaticDir, { recursive: true })
+cpSync(staticDir, targetStaticDir, { recursive: true })
 
 // Copy public folder (required for favicon-white.svg and other assets)
 console.log("Copying public folder...")
 const publicDir = join(rootDir, "public")
 const targetPublicDir = join(targetDir, "public")
 if (existsSync(publicDir)) {
-    copyDereferenced(publicDir, targetPublicDir)
+    cpSync(publicDir, targetPublicDir, { recursive: true })
 }
 
 console.log("Done! Files prepared in electron-standalone/")

tests/unit/diagram-validator.test.ts

@@ -1,116 +0,0 @@
-import { describe, expect, it } from "vitest"
-import {
-    formatValidationFeedback,
-    type ValidationResult,
-} from "@/lib/diagram-validator"
-
-describe("formatValidationFeedback", () => {
-    it("formats result with critical issues", () => {
-        const result: ValidationResult = {
-            valid: false,
-            issues: [
-                {
-                    type: "overlap",
-                    severity: "critical",
-                    description: "Box A overlaps with Box B",
-                },
-            ],
-            suggestions: ["Move Box A to the left"],
-        }
-
-        const feedback = formatValidationFeedback(result)
-
-        expect(feedback).toContain("DIAGRAM VISUAL VALIDATION FAILED")
-        expect(feedback).toContain("Critical Issues (must fix):")
-        expect(feedback).toContain("[overlap] Box A overlaps with Box B")
-        expect(feedback).toContain("Suggestions to fix:")
-        expect(feedback).toContain("Move Box A to the left")
-        expect(feedback).toContain(
-            "Please regenerate the diagram with corrected layout",
-        )
-    })
-
-    it("formats result with warnings only", () => {
-        const result: ValidationResult = {
-            valid: true,
-            issues: [
-                {
-                    type: "text",
-                    severity: "warning",
-                    description: "Label text is small",
-                },
-            ],
-            suggestions: [],
-        }
-
-        const feedback = formatValidationFeedback(result)
-
-        expect(feedback).toContain("Warnings:")
-        expect(feedback).toContain("[text] Label text is small")
-        expect(feedback).not.toContain("Critical Issues")
-    })
-
-    it("formats result with both critical issues and warnings", () => {
-        const result: ValidationResult = {
-            valid: false,
-            issues: [
-                {
-                    type: "edge_routing",
-                    severity: "critical",
-                    description: "Edge crosses through node",
-                },
-                {
-                    type: "layout",
-                    severity: "warning",
-                    description: "Uneven spacing",
-                },
-            ],
-            suggestions: ["Reroute the edge", "Adjust spacing"],
-        }
-
-        const feedback = formatValidationFeedback(result)
-
-        expect(feedback).toContain("Critical Issues (must fix):")
-        expect(feedback).toContain("[edge_routing] Edge crosses through node")
-        expect(feedback).toContain("Warnings:")
-        expect(feedback).toContain("[layout] Uneven spacing")
-        expect(feedback).toContain("Reroute the edge")
-        expect(feedback).toContain("Adjust spacing")
-    })
-
-    it("returns empty string for valid result with no issues", () => {
-        const result: ValidationResult = {
-            valid: true,
-            issues: [],
-            suggestions: [],
-        }
-
-        const feedback = formatValidationFeedback(result)
-
-        expect(feedback).toBe("")
-    })
-
-    it("formats result with multiple suggestions", () => {
-        const result: ValidationResult = {
-            valid: false,
-            issues: [
-                {
-                    type: "rendering",
-                    severity: "critical",
-                    description: "Missing element",
-                },
-            ],
-            suggestions: [
-                "Check the XML syntax",
-                "Ensure all elements are defined",
-                "Verify parent-child relationships",
-            ],
-        }
-
-        const feedback = formatValidationFeedback(result)
-
-        expect(feedback).toContain("Check the XML syntax")
-        expect(feedback).toContain("Ensure all elements are defined")
-        expect(feedback).toContain("Verify parent-child relationships")
-    })
-})

tests/unit/server-model-config.test.ts

@@ -1,85 +0,0 @@
-import { afterEach, describe, expect, it } from "vitest"
-import {
-    loadFlattenedServerModels,
-    type ServerModelsConfig,
-    ServerModelsConfigSchema,
-} from "@/lib/server-model-config"
-
-const ORIGINAL_ENV = { ...process.env }
-
-afterEach(() => {
-    process.env.AI_PROVIDER = ORIGINAL_ENV.AI_PROVIDER
-    process.env.AI_MODEL = ORIGINAL_ENV.AI_MODEL
-    process.env.AI_MODELS_CONFIG_PATH = ORIGINAL_ENV.AI_MODELS_CONFIG_PATH
-    process.env.AI_MODELS_CONFIG = ORIGINAL_ENV.AI_MODELS_CONFIG
-})
-
-describe("ServerModelsConfigSchema", () => {
-    it("accepts valid provider names", () => {
-        const config: ServerModelsConfig = {
-            providers: [
-                {
-                    name: "OpenAI Server",
-                    provider: "openai",
-                    models: ["gpt-4o"],
-                },
-            ],
-        }
-
-        expect(() => ServerModelsConfigSchema.parse(config)).not.toThrow()
-    })
-
-    it("rejects invalid provider names", () => {
-        const invalidConfig = {
-            providers: [
-                {
-                    name: "Invalid Provider",
-                    // Cast to any so we can verify runtime validation, not TypeScript
-                    provider: "invalid-provider" as any,
-                    models: ["model-1"],
-                },
-            ],
-        }
-
-        expect(() =>
-            ServerModelsConfigSchema.parse(invalidConfig as any),
-        ).toThrow()
-    })
-})
-
-describe("loadFlattenedServerModels", () => {
-    it("returns empty array when config file is missing", async () => {
-        // Point to a non-existent config path so fs.readFile throws ENOENT
-        process.env.AI_MODELS_CONFIG_PATH = `non-existent-config-${Date.now()}.json`
-
-        const models = await loadFlattenedServerModels()
-        expect(models).toEqual([])
-    })
-
-    it("flattens providers and marks default model from env var config", async () => {
-        // Use AI_MODELS_CONFIG env var instead of file
-        const config: ServerModelsConfig = {
-            providers: [
-                {
-                    name: "OpenAI Server",
-                    provider: "openai",
-                    models: ["gpt-4o", "gpt-4o-mini"],
-                    default: true,
-                },
-            ],
-        }
-        process.env.AI_MODELS_CONFIG = JSON.stringify(config)
-        process.env.AI_MODELS_CONFIG_PATH = "" // Clear file path
-
-        const models = await loadFlattenedServerModels()
-
-        expect(models.length).toBe(2)
-
-        const defaults = models.filter((m) => m.isDefault)
-        expect(defaults.length).toBe(1)
-
-        const defaultModel = defaults[0]
-        expect(defaultModel.provider).toBe("openai")
-        expect(defaultModel.modelId).toBe("gpt-4o") // First model of default provider
-    })
-})

tsconfig.json

@@ -30,11 +30,5 @@
         ".next/types/**/*.ts",
         ".next/dev/types/**/*.ts"
     ],
-    "exclude": [
+    "exclude": ["node_modules", "packages", "electron", "dist-electron"]
-        "node_modules",
-        "packages",
-        "electron",
-        "electron-standalone",
-        "dist-electron"
-    ]
 }